Design & Développement web - Le topic des canards qui mangent des cookies

**elpaulo** · 13/08/2013, 22h37

Un ptit projet perso pour tester le bootstrap twitter et la balise audio d'HTML5, have fun : http://papelou.fr/eddy

Et puis un ptit life game sans interactions parce que prout : http://papelou.fr/html5/

**Anon26492** · 15/08/2013, 18h37

J'ai décidé de basculer dans le troisième millénaire et de basculer mes cours imprimés/pdfisés sur tablette.

L'idée, c'est de tout avoir sur un iPad (format 4:3 ftw) sous la forme d'une webapp perso consultable hors ligne (donc installée sur l'écran d'accueil, avec un fichier de manifest pour le cache, etc.)

Rien de bien complexe, j'ai déjà les bases. Un sommaire basique sous forme de listes imbriquées, reprenant l'arbo globale de mes cours (classe -> matière -> partie -> chapitre) menant à une vue linéaire composées à 90% de texte et 10% d'illustrations.

Reste la question des données. J'hésite entre trois approches :

- les cours sont actuellement en markdown. Donc en html. Donc je peux tout simplement faire une boucle PHP qui pisse l'intégralité de mes cours dans un immense index.html, puis manipuler ce DOM de grand malade en JavaScript pour afficher/masquer le cours que je veux. L'avantage c'est que c'est super simple pour moi, par contre je n'ai aucune idée du comportement d'un iPad avec une grosse quantité de texte chargée dans une seule page.

- même base, mais je divise les cours en plusieurs fichiers html que je récupère et ensuite en AJAX. Un peu plus chiant, mais j'ai un DOM moins lourd.

- je passe mes cours en JSON et j'utilise mustache.js. Plus difficile à faire (mais pas très non plus), mais là j'ignore aussi les perfs du rendering client-side. J'ai intérêt à avoir un énorme JSON ou là encore à diviser en morceaux ? Ce que j'apprécie là, c'est d'éviter l'AJAX, d'après mes tests une requête "hors-ligne" n'est pas du tout instantanée.

Je sais pas si je suis clair

**Skiant** · 15/08/2013, 18h49

Envoyé par Mdt

J'ai décidé de basculer dans le troisième millénaire et de basculer mes cours imprimés/pdfisés sur tablette.

L'idée, c'est de tout avoir sur un iPad (format 4:3 ftw) sous la forme d'une webapp perso consultable hors ligne (donc installée sur l'écran d'accueil, avec un fichier de manifest pour le cache, etc.)

Rien de bien complexe, j'ai déjà les bases. Un sommaire basique sous forme de listes imbriquées, reprenant l'arbo globale de mes cours (classe -> matière -> partie -> chapitre) menant à une vue linéaire composées à 90% de texte et 10% d'illustrations.

Reste la question des données. J'hésite entre trois approches :

- les cours sont actuellement en markdown. Donc en html. Donc je peux tout simplement faire une boucle PHP qui pisse l'intégralité de mes cours dans un immense index.html, puis manipuler ce DOM de grand malade en JavaScript pour afficher/masquer le cours que je veux. L'avantage c'est que c'est super simple pour moi, par contre je n'ai aucune idée du comportement d'un iPad avec une grosse quantité de texte chargée dans une seule page.

- même base, mais je divise les cours en plusieurs fichiers html que je récupère et ensuite en AJAX. Un peu plus chiant, mais j'ai un DOM moins lourd.

- je passe mes cours en JSON et j'utilise mustache.js. Plus difficile à faire (mais pas très non plus), mais là j'ignore aussi les perfs du rendering client-side. J'ai intérêt à avoir un énorme JSON ou là encore à diviser en morceaux ? Ce que j'apprécie là, c'est d'éviter l'AJAX, d'après mes tests une requête "hors-ligne" n'est pas du tout instantanée.

Je sais pas si je suis clair

Perso je garderai les cours en Markdown et je ferai en sorte de convertir le markdown en HTML à la volée avec du JS.
Après je sais pas à quel point le chargement AJAX peut être lent sur ton ipad mais tu peux probablement faire joujou avec l'appcache, surtout si tes cours ne changent pas sans arrêt. Tu caches tes fichiers markdown, et roule ma poule.

**Anon26492** · 15/08/2013, 19h01

je vais utiliser l'appcache (sinon pas de cours hors ligne.)

Le truc, c'est qu'une requête Ajax en local, c'est déjà 200 ou 300ms avant même que la réponse soit traitée.
Tu as donc :

200ms de délai au clic (bon, ça peut se supprimer avec un fastclic)
300ms de délai de la requête en local
???ms de conversion du markdown en HTML
???ms d'insertion du HTML dans le DOM

Sachant que quand tu passes les 500ms, t'as l'impression que ça rame.

Au feeling, je pense que la solution offrant les meilleures perfs "confort d'utilisation", c'est un fat JSON injecté directement via un <script> et mouliné en mustache. Ça a l'avantage de supprimer toute la partie AJAX, et je me dis qu'un iPad devrait (devrait) être foutu de manipuler un ou deux Mo de JSON. Devrait

Ou alors tout d'un coup dans la même page et des display:none/block pour afficher ce dont j'ai besoin. Mais ça pour le coup c'est assez crade.

**Skiant** · 15/08/2013, 19h29

Franchement tu peux faire des tests mais je suis pas sûr qu'un ipad puisse encaisser super bien un json de deux Mo. Pas forcément mieux que quelques requêtes AJAX que tu peux précharger si tu veux absolument que ça soit aussi lisse qu'un cul de nourrisson.

**Anon26492** · 15/08/2013, 19h35

Ah, oui, pas con de les précharger. Sauf qu'au final ça revient au même, je vais stocker les réponses en JS...

Mais en fait je réalise que mon exigence de perf est complètement con. Vu la granularité que je compte utiliser dans le sommaire, un cours, même de deux heures, ne nécessitera pas plus d'un chargement de contenu. Autant dire que même si l'Ajax prenait dix seconde, ça serait pas un drame...

Je vais voir comment passer markdown en HTML en JS, merci.

(faut aussi que je fasse une fonction PHP ou python qui me génère mon manifest, sinon ça va être galère à maintenir alla mano.)

**deathdigger** · 15/08/2013, 20h22

Tu ne veux pas tout convertir en XML ?

**Anon26492** · 15/08/2013, 21h13

XML is like violence...

**Skiant** · 16/08/2013, 00h12

Envoyé par deathdigger

Tu ne veux pas tout convertir en XML ?

**Anon26492** · 17/08/2013, 12h52

Bon, j'ai plané, après avoir refait une batterie de test avec des timestamp (au clic, à la réponse de l'Ajax, après l'exploitation de la réponse) les délais sont totalement négligeables lorsqu'on est en appcache.

Et pas besoin d'un fastclick lorsqu'on dégage le zoom.

**Awake** · 18/08/2013, 17h11

http://lucb1e.com/rp/cookielesscookies/

Système de tracking sans javascript/cookies/plugins via les ETags. Méchant.

**Anon26492** · 18/08/2013, 17h25

Boaf, c'est pas nouveau et c'est pas méchant.
A quoi bon se faire chier avec un système imparfait (CRTL F5) quand les autres méthodes évoquées sont plus faciles/puissantes ? Surtout panopticlick...

**Sekigo Le Magnifique** · 23/08/2013, 08h18

Bonjour, je ne comprend rien à comment configurer apache (sous debian/ubuntu) pour une utilisation strictement en réseau interne.
J'explicite un peu plus.

Pour mon entreprise, je développe un tas d'outils. Au début, je ne faisais que des logiciels locaux, avec Qt. Sauf que au fur et à mesure, j'en ai eu marre qu'on me fasse sans arrêt des demandes de personnalisation saugrenue, et j'ai décidé de basculer le maximum de ces logiciels en service web hébergé sur ma machine, avec UNE seule utilisation possible et pas de personnalisation idiote. Et ainsi, c'est plus simple pour moi de maintenir ces logiciels, au lieu d'aller sur tout les postes.
Sauf que l'administration système et réseau, ça me casse les burnes, et j'ai fait au plus simple/idiot (et ça se retourne contre moi aujourd'hui).
Je développe principalement en Python, donc j'utilise cherrypy comme serveur http. En gros, je lance mes logiciels un par un, qui écoute un port précis (à partir de 8080 et en incrémentant de 1 à chaque fois). Pour que les autres accèdent à ma machine, ils doivent taper <monip 192.168.0.X>:<numero_de_port_ecoute> dans leur navigateur. Mais ça devient galère pour moi à me souvenir quel numéro de port est attribué à quel logiciel. Et quand l'adresse ip change, je suis obligé d'envoyer un email à tout le monde. Mais j'ai découvert récemment que l'on pouvait accéder à ma machine en tapant son hostname.... C'est vous dire à quel point je suis incompétent.

Donc, je souhaiterais simplifier tout ce foutoir en utilisant apache. Pourquoi apache ? Parce que certains de mes logiciels vont quitter mon poste, dans un avenir plus ou moins proche, pour migrer vers le serveur central qui utilise apache. Ainsi, la migration sera simplifié.
Ce que je voudrais, c'est utiliser les sous-domaines. Par exemple, j'ai un logiciel qui affiche "Hello World !" en html. Mon hostname est felix. Donc, pour accéder à ce lgociel, il faut taper helloworld.felix (et non 192.168.0.1:8086 par exemple).
Seulement, je ne comprend rien à la doc d'Apache. Ils utilisent tout le temps exemple.com et exemple.org, en passant par un resolver DNS, pour configurer le virtualhost dans /etc/apache2/sites-availables. Je n'y comprend rien, et je ne sais pas quoi mettre dans ServerName par exemple, ou l'ip à coté de virtualhost.
Quelqu'un aurait un exemple ? Après, je sais que pour Python, on utilise mod_wsgi, et pour ça, je peux me débrouiller, j'ai compris comment ça fonctionne. Mais pas la base de la base qu'est le ServerName.

Et je parle de l'utilisation pour mon entreprise, mais en fait, j'aimerais avoir la même chose chez moi pour mes besoins familiaux. J'envisage de me monter bientôt un petit serveur pour mon utilisation type git, rsync, petit site perso, etc... Donc, je suis face à la même problématique.
En espérant avoir été clair.

**Tomaka17** · 23/08/2013, 08h27

Quand une requête HTTP arrive sur apache, il y a un en-tête "host" qui indique à apache l'adresse que l'utilisateur a tapé dans son navigateur (par exemple helloworld.felix)
Ce que fait apache, c'est qu'il va prendre un à un tous les virtual hosts que tu lui as donnés (les fichiers dans /etc/apache2/sites-available) et comparer cette valeur avec le ServerName pour trouver le bon.

Quant à l'IP à côté de virtualhost, c'est l'ip sur laquelle apache écoute. Si tu mets *:80, il accepte toutes les connexions. Si tu mets 192.168.0.1:80, il n'accepte la connexion que si le client s'est connecté au serveur avec l'IP 192.168.0.1. Donc par exemple, il refusera si tu te connectes en localhost.

**Awake** · 23/08/2013, 12h08

Envoyé par Mdt

Boaf, c'est pas nouveau et c'est pas méchant.
A quoi bon se faire chier avec un système imparfait (CRTL F5) quand les autres méthodes évoquées sont plus faciles/puissantes ? Surtout panopticlick...

C'est pas méchant pour ceux qui s'en foutent de se faire tracker. Pour empêcher de se faire suivre sur le web du coup y'a quoi comme solution... utiliser un browser de hacker qui change d'user-agent aléatoirement ? C'est pas à la portée de tout le monde..

**deathdigger** · 23/08/2013, 15h39

Les sous-domaines c'est très simple, après faut que les dns de ta société aient un enregistrement pointant vers mondomaine.int et vers *.mondomaine.int.

**Charmide** · 23/08/2013, 20h28

Envoyé par hijopr

C'est pas méchant pour ceux qui s'en foutent de se faire tracker. Pour empêcher de se faire suivre sur le web du coup y'a quoi comme solution... utiliser un browser de hacker qui change d'user-agent aléatoirement ? C'est pas à la portée de tout le monde..

Vu comment le truc marche, tu peux.. désactiver le cache.

**Anon26492** · 23/08/2013, 20h40

Envoyé par hijopr

C'est pas méchant pour ceux qui s'en foutent de se faire tracker. Pour empêcher de se faire suivre sur le web du coup y'a quoi comme solution... utiliser un browser de hacker qui change d'user-agent aléatoirement ? C'est pas à la portée de tout le monde..

Disons que si tu es sensible aux problématiques de hacking, si tu est au courant de telles questions, bah tu as les compétences pour utiliser les outils nécessaires.
Après, est-ce que ça vaut le coup de te pourrir la vie avec un VPN + un Firefox sans addon + dump du cache régulier...

**Awake** · 23/08/2013, 22h25

C'est bien ce que je veux souligner, il n'existe pas de moyen accessible (dans le genre une pauvre case à cocher) pour maintenir un réel anonymat sur le web. Enfin quand on bosse dans le web tant mieux, un user sans cookies ni javascript c'est la merde à gérer, mais quand même au niveau respect de la vie privée c'est pas génial.

**deathdigger** · 24/08/2013, 10h03

Y'a le mode privé d'ie, ça existe aussi sur chrome il me semble.

**Ash_Crow** · 24/08/2013, 10h38

Et sur Firefox aussi.

Tant qu'à être parano (et pas pressé, parce que c'est quand même putain de lent), vous pouvez aussi utiliser le TOR Browser, qui est un Firefox repackagé pour laisser le moins de traces possibles (js désactivé par défaut, mode privé forcé, httpseverywhere, et bien sûr, passant par TOR.)

**Skiant** · 24/08/2013, 12h28

Envoyé par Ash_Crow

Et sur Firefox aussi.

Tant qu'à être parano (et pas pressé, parce que c'est quand même putain de lent), vous pouvez aussi utiliser le TOR Browser, qui est un Firefox repackagé pour laisser le moins de traces possibles (js désactivé par défaut, mode privé forcé, httpseverywhere, et bien sûr, passant par TOR.)

'faut vraiment avoir un besoin précis en tête pour avoir envie de sciemment se tirer une balle dans le pied avant de courir un marathon, quand même.

**zatura** · 29/08/2013, 09h26

Amis du CSS bonjour.

Je bug totalement sur un truc qui est surement débile. Je dois reproduire un menu comme ci-dessous.

Là ou je sèche c'est sur le petit "chapeau" au dessus de l'élément survolé. J'arrive pas à voir comment faire en sorte qu'il puisse déborder sur les autres et qu'il puisse aller un peu plus haut que l'élément lui même.

J'étais parti sur un changement de background avec un simple hover en css mais je sens que c'est pas la bonne direction.

**Skiant** · 29/08/2013, 09h45

Envoyé par zatura

Amis du CSS bonjour.

Je bug totalement sur un truc qui est surement débile. Je dois reproduire un menu comme ci-dessous.

http://tof.canardpc.com/view/0c16311...9b87578a3f.jpg

Là ou je sèche c'est sur le petit "chapeau" au dessus de l'élément survolé. J'arrive pas à voir comment faire en sorte qu'il puisse déborder sur les autres et qu'il puisse aller un peu plus haut que l'élément lui même.

J'étais parti sur un changement de background avec un simple hover en css mais je sens que c'est pas la bonne direction.

Tes éléments de menu ils ont une largeur fixe ou elle dépend du contenu ?
Ça va influencer pas mal le code que tu vas devoir produire.

Dans tous les cas, le meilleur truc à faire sera probablement d'utiliser les pseudo-éléments, positionnés en absolu par rapport à leur parent, un peu comme ce qui est utilisé pour les effets dits "ribbon".

**zatura** · 29/08/2013, 09h56

Ils sont fixes, le menu est figé et ne sera pas modifié.

**Skiant** · 29/08/2013, 10h14

Alors tu peux probablement t'en sortir avec un seul élément (::before) avec une image en background si tu veux vraiment pas t'emmerder.

un truc genre :

.menu-item.active{
background: blue;
position: relative;
}

.menu-item.active:before{
position: absolute;
top:-10px;
left: -8px;
height: 10px;
background: url(/img/menu-active-ribbon.png);
}

En la faisant speed. C'est bourrin mais ça passera. Ça sera chiant si tu veux changer la couleur des éléments actifs, aussi.
Si tu veux un truc plus flexible, il faudra probablement utiliser le ::before et le ::after pour faire les triangles noirs, en collaboration avec un élément qui va te faire le fond bleu.

**zatura** · 29/08/2013, 10h56

Je vais tester ça merci !

**tenshu** · 29/08/2013, 10h57

Quelle horreur, encore une créa qui provoquera la décapitation de son auteur lorsque l'on aura instauré le comité de salut public numérique.

**Skiant** · 29/08/2013, 11h19

Envoyé par tenshu

Quelle horreur, encore une créa qui provoquera la décapitation de son auteur lorsque l'on aura instauré le comité de salut public numérique.

Aussi. Avec un effet ruban parce que c'est trop in, t'as vu coco.

**zatura** · 29/08/2013, 11h58

Ca va l'auteur est à l'autre bout du bâtiment

PS : ça marche j'ai réussi à faire mon truc.

Discussion: Design & Développement web - Le topic des canards qui mangent des cookies

Outils de la discussion

Règles de messages