da scritch net works - Mot-clé - apache

Firefox, l'invisible

Da Scritch — 2017-01-12T06:26:00+01:00

Est-ce que le navigateur Firefox n'aurait pas une audience sous-estimée ? Pourquoi ? Et si certains se contentaient de chiffres d'audience biaisés ?
Webdev

Mon discours sera un peu long. Il n'est pas étayé de chiffres, mais si quelqu'un veut étayer mon hypothèse, je lui donne les éléments qui lui permettrait de faire l'analyse. Seule condition, il faut les logs serveurs d'un site qui a une audience significative.

Parlons de la publicité sur le web

C'est un fait, la publicité est devenue incontrôlable, au point que même l'IAB, l'association des publicitaires sur internet, reconnait que ces abus sont devenus dangereux pour leur secteur économique :

La publicité est devenue trop distractive entre les animations, les couleurs criardes, le son voire la vidéo. Apparaissant des fois en plein milieu du contenu alors qu'on déroule un article, elle donne plus envie de fuir que de persévérer ;
Elle a pris ses aises avec le support et se substitue au contenu du site, avec des encarts en pop-over, pop-under, des vidéos en pre-roll… ;
Les publicités sont extrêmement lourdes à charger et à jouer. On frise parfois le délire avec des spots vidéos en HD pas optimisées, des polices de caractères dépassant la dizaine de Mo, un contenu 600 fois plus lourd que le reste de la page, impactant la réactivité du navigateur, les performances de l'ordinateur et l'autonomie de la batterie. Une machine qui peut faire tourner un FPS sans sourciller devient brusquement un veau en allant lire un article d'un quotidien ;
Le javascript des encarts est souvent de mauvaise qualité et peut faire planter la page hôte ;
Elles sont très indiscrètes, profilant le plus possible le visiteur, souvent au mépris des lois Européennes. Pourquoi les quotidiens français veulent connaître ma position géographique ? Sans compter une multitude de trackers posés par des réseaux sociaux, des régies publicitaires et autres ;
Les publicités posées s'affichent souvent avec retard, entrainant le phénomène de reflow d'une page. Outre leur poids, certaines régies travaillent avec un système d'enchères sur l'audience acquise, dans le but de vendre au plus cher l'écran du visiteur en fonction des intérêts qu'il a manifestés. Résultat : une pénalisation de la lecture par le délai d'attente, créant un effet de clignotement/déplacement de la mise en page ;
Elles sont devenues un vecteur d'attaque très prisé pour les virus et autres logiciels malicieux, et même indirectement les autres utilisateurs du réseau ! Le malvertising joue sur le fait que des sites réputés servent du code extérieur sans aucun contrôle, et même les experts sécurités peuvent se retrouver vecteurs d'infection malgré eux

Il ne faut donc pas s'étonner de la part importante de personnes qui surfent sur internet avec un bloqueur de publicités, pas uniquement pour avoir un ordinateur plus réactif, ni pour protéger un minimum sa vie privée, mais carrément pour se protéger les logiciels malveillants !

Un exemple de taxe à la performance dû aux publicités et outils de tracking sur un article du journal Guardian, relevé par Paul Irish dans un article où il liste les éléments forçant un repaint

Et c'est ainsi que naquirent les filtreurs de pubs

Illustration : Christophe Andrieu

Sur internet, il ne suffit pas d'apposer un petit sticker Pas de pubs, merci sur sa boîte aux lettres… une page web part d'un document HTML, de là, votre navigateur va charger ses assets (images, style, scripts,…), et dans ces derniers sont présents les éléments publicitaires. Il faut donc trier pour pouvoir les retirer.

À noter que le choix de ne pas charger/afficher des pubs est légale en Europe, mais réprimandable aux États-Unis. C'est même une des bases du fameux procès Betamax qui avait opposé studios de productions et fabricants de magnétoscopes, qui furent ravivées 30 ans après avec TiVo, l'enregistreur numérique capable de sauter les pubs.

D'abord, il y eu les filtrages écrit à la main par des utilisateurs développeurs… Soit en définissant localement certains noms de domaines dans /etc/hosts, soit en injectant spécifiquement des règles dans les navigateurs.

Puis arrivèrent les premières extensions de navigateurs, afin de permettre à d'autres utilisateurs de profiter de la fonctionnalité.

Puis une industrie se construisit, avec les filtreurs de publicités qui en ont fait un business model, comme Ad Block Plus, et dont le comportement est clairement prédateur, avec un chantage d'extorsion envers les régies publicitaires et les annonceurs.

Mais maintenant, avec Firefox (et tout récemment Brave), des navigateurs précablent des fonctions de filtrage et le signal Do Not Track, le jeu change car il implique une décision par défaut d'utilisateurs d'un logiciel.

Or, justement, je veux faire le parallèle avec une autre tendance, qui me semble contemporaine : la perception de la chute d'audience des pages web vues via le navigateur Firefox.

Apple a sa culture insulaire et a oublié le web

Cette chute d'audience n'a pas été commentée pour Safari, alors qu'Apple a lui aussi largement favorisé le blocage des publicités.
Et pour cause : sur l'audience des ordinateurs purs, Safari n'a jamais dépassé les 10%. Par contre, dans le domaine des tablettes et des smartphones, Apple est dans une position de force, et donc Safari en monopole dans son écosystème. Car le fabricant Apple refuse totalement qu'un autre moteur de rendu que Safari puisse être installé sur les appareils de sa marque. Je rappelle que les apps Chrome pour iOS et Firefox pour iOS ne sont que des recarrossages du moteur de Safari, et qu'ils en ont les mêmes limitations techniques.

La position d'Apple est encore plus extrémiste que celle que s'autorisait Microsoft il y a 15 ans et qui lui a pourtant valut des procès pour abus de position dominante..

Et comme l'époque ou MSIE régnait sans partage, Safari est un navigateur indigent, une catastrophe : Il lui manque plein d'API du W3C, de fonctions javascript, de propriétés DOM ou SVG qui sont déjà implémentées dans Microsoft Edge. Un comble !

Apple a certes remis une équipe de développement sur son navigateur pour iOS9, mais le retard reste titanesque.
Mais est-ce que le constructeur est motivé à avoir un navigateur web dans les canons actuels ? Car la firme de Cupertino fait principalement sa marge via la vente d'applications natives sur son App Store. Avoir la possibilité de faire des applications à partir du navigateur web en single page application ou en progressive web app n'est absolument pas dans l'intérêt de la firme à la Pomme. Par une culture forte de la marque (et la qualité du matériel, il faut bien l'avouer), ses consommateurs sont bien peu enclins d'aller voir ailleurs. Il reste donc très difficile de faire une application web universelle qui puisse se comparer avec les applications natives.

D'un autre côté, sous prétexte de protection de ses usagers, Apple a autorisé les bloqueurs de publicité à être installés comme extension de Safari mobile. Ce qui fait réduire mécaniquement le nombre d'utilisateurs de Safari mobile dans les rapports d'audiences des sites. La situation n'est pas pour déplaire à Apple, puisqu'il entretient l'illusion que les utilisateurs préféreront toujours avoir une application native plutôt que passer par un navigateur web, et que Safari Mobile n'a strictement aucune concurrence face à qui se mesurer.
Alors que les statistiques montrent que les applications installées sont très vites boudées.

Et puis, la publicité dans les pages web, Apple avait tenté de s'y aventurer en rachetant plusieurs régisseurs d'encarts et en construisant iAd. Mais ils n'ont pu faire jeu égal avec un mastodonte qui regroupe réseau publicitaire, outils d'analyse de trafic, profilage et surtout un écosystème mobile concurrent.

En faisant rejeter la pub par ses afficionados, Apple attaque via le porte-monnaie le Maître de l'Univers Android…

L'écosystème global de Google

Source : shortblacktechie.com

Google édite un navigateur, Chrome.
Il a gagné la bataille des features, il a gagné la bataille de la vitesse avec son moteur javascript V8, il a gagné le cœur des développeurs avec son mode développeur F12. Puis Google a attiré les développeurs avec d'autres technologies, notamment AngularJS (même dépassé, l'attrait existe toujours), Dart (abandonné), Polymer (qui sert de polyfill aux web components mais avec moins de respect au standard que Bosonic les dernières fois que je les aient comparés) et Go (un langage principalement serveur)…

Personnellement, je n'ai absolument rien contre : Google est un acteur très important qui fait énormément de R&D, contribue énormément aux standards en respectant les règles, libère très souvent publiquement les sources et ses technologies web,… et moi même, je suis un grand fan de nombres d'entre elles.
Google est un des rares contributeurs du web à continuellement le faire avancer, tout comme la Mozilla Foundation.

Mais trop de développeurs oublient de tester leurs sites ailleurs que sur Chrome. Certains développeurs livrent encore des propriétés dans leur version expérimentales préfixées -webkit- sans avoir vérifié que celles-ci étaient retirées de Chrome depuis plus de 2 ans. Pire que tout, j'ai vu récemment un développeur essayer sa création sur Opera pour se donner une bonne conscience… sauf qu'Opera a abandonné son propre moteur et utilise le Blink qui motorise Chrome. Bref, un coup dans l'eau.

La plupart de ces développeurs tiers me sortent le fait que Chrome représente actuellement plus de 60% de la fréquentation de leurs sites, selon leurs chiffres d'audience.
Et, forcément, si leur site très riche en javascript se montre moins utilisable avec d'autres navigateurs, leur prophétie est auto-réalisatrice.

Mais reprenons les chiffres de fréquentation. Si Google Chrome a effectivement une place de leader, j'ai un doute : celui que Google Analytics sous-évalue les parts de marchés de Firefox.

Et étonnement, les deux font exactement le travail qui leur a été confié en toute bonne foi.

The mission

Par défaut, Firefox demande désormais que le trafic de son utilisateur ne soit plus pris en compte, entres autres via le signal Do Not Track, et dans les dernières versions via une bibliothèque qui bloque par défaut les trackers et les malwares en se basant sur la liste maintenue par uBlock Origin. D'ailleurs, en accédant aux paramètres des add-ons, c'est la deuxième suggestion proposée, après un thème graphique, et il démarre sans redémarrer l'application.

Google tente à l'inverse de tracer au mieux les usages de son navigateur, les liant au plus vite nativement avec les identités de ses utilisateurs. Avoir Chrome qui ne remonte pas par défaut son trafic vers Google Analytics est contre-productif pour Google, surtout que leur source principale de revenus est leur régie publicitaire. (Et je ne parle pas du fait qu'il n'est pas possible d'empêcher un tracker d'audience faire son travail dans une application native)

Voilà pourquoi j'en suis venu à la conclusion que la position dominante de Chrome dans le statistiques d'usage me semble un poil sur-évaluée, et Google n'est évidemment pas bien pressé de corriger les chiffres qui sont en sa faveur.

Bref, j'abandonne l'audience-turfing

J'ai (enfin) viré Google Analytics de mon blog.

Depuis plusieurs mois, voyant une certaine dissymétrie entre les visites de Firefox relevées dans mes logs apache et ce qu'il me rapporte, ses chiffres ne me semblaient plus assez exacts. Ils me rappelle le flou des chiffres de la Alexa Toolbar à ses hautes heures il y a une décennie, laquelle ne comptabilisait que le trafic des utilisateurs anglophones sous Windows...
Analyser quels sont les sujets qui intéressent le plus les gens qui viennent me lire, c'était grisant il y a 10 ans, mais comme je ne fais pas une activité commerciale de mon blog, il y a peu d'intérêt (sinon le bonus supposé d'indexation dans le moteur de recherche Google)

Alors certes, je gardais Google Analytics pour faire des démonstrations de traçage publicitaire aux Brown Bag Lunch vie privée et des cryptoparties,… Mais finalement, je faisais rarement ces démonstrations.

De plus, les rapports de Google Analytics sont de plus en plus encombrés par les spam-referrer, au point d'avoir des résultats de moins en moins précis.

Je déconne à peine : dans mes statistiques par langue de navigateur, j'ai 20% de pollution avec des entrées qui ne sont clairement pas au format IETF. Le tableau a été édité pour mieux voir les déchets.

Comment vérifier cette intuition

Sur cette idée que Firefox (et sûrement aussi Brave et Safari) sont sous-estimés par les outils d'analyse de trafic, j'ai regardé mes logs de serveur web, mais l'audience de mon site est beaucoup trop typé et anecdotique pour être une mesure concluante.

Si vous comptez vérifier de votre côté, sachez qu'il va falloir pas mal travailler dans le filtrage des données de vos logs :

Il faudrait un site qui enregistre selon plusieurs outils de mesures (Piwik et Google Analytics), au moins 500 visites quotidiennes.
Filtrez les IP des administrateurs (et donc la votre, on compte pas, c'est tricher)
À partir des logs du serveur web, isoler les visites qui semblent réelles : les chargement de pages canoniques (donc écartez les miroirs, les repompeurs et les lecteurs de flux rss), accédées par le verbe GET, accompagnées du chargement d'assets statiques (CSS, js, webfonts, svg, images) et dynamiques (si vous chargez des éléments en asynchrone, par exemple lors de DOMContentLoaded).
Écartez les user-agent qui annoncent clairement un bot ou un crawler (on ne sait jamais, si un vous a échappé).
À partir du user-agent, comptabiliser chaque navigateur
Et de là, vous aurez des métriques à comparer.

Si en termes de proportion, la différence est flagrante, vous saurez quoi penser des chiffres analytics.

Si j'avais des recommandations

Apple relance timidement le développement de Safari, qui reste le navigateur moderne le plus en retard. Il faut l'encourager dans cette voie en refaisant un procès pour abus de position dominante. Si vous êtes propriétaire de votre ordinateur, vous avez le droit d'installer n'importe quel logiciel. Et vous êtes bien propriétaire de votre smartphone, non ? Forcer Apple à accepter que ses clients puissent avoir le choix d'un autre navigateur web, indépendamment des moteurs de rendus vieillissants webkit. Qu'enfin nous puissions construire des web-apps complètes qui tournent aussi sur iPhone. Songez que Firefox sur Android est capable d'incrustation 3D sur une image de caméra.

Ensuite, La publicité est très utile pour les contenus gratuits, mais elle est devenue un vrai fléau. Il faut libérer de la dictature de la publicité certains sites, en s'y abonnant. Oui, reconnaissez la valeur de ce que vous utilisez gratuitement. Abonnez-vous à la Presse Libre pour mutualiser des abonnements (Ou laissez La Moustache vous hypnotiser), soutenez Wikipédia, et donnez aux projets open-source. Le navigateur Brave propose de filtrer les publicités, et en contrepartie de centraliser des abonnements. Si vous utilisez régulièrement un service, reconnaissez-en le prix. (et je ne dis pas ça pour mon compte Flattr : il n'a connu des versements que quatre mois).

Et enfin, n'utilisez pas le même navigateur que tout le monde. Sinon, nous allons revenir vers les mêmes travers que l'époque où MSIE avait gagné une guerre : une monoculture et la perte d'interopérabilité du web. Ça serait dommage.

Alors ? Stop ou encore ?

Soutenons le web que nous voulons.

CPU Ex0003 : La loi et l'internet

Da Scritch — 2015-10-01T13:25:00+02:00

« Bon alors expliquez-moi internet. C'est un peu comme le minitel, c'est ça ? ». Introduction à l'émission ayant pour thème "Les élus politiques et internet", avec en invité Eric Walter.
2 ¢ d'humour

Ceci est une partie du script de la release Ex0003 du programme CPU, diffusé Jeudi 1^er à 11h. Plus d'infos sur le site de l'émission.

Bonjour à toi, enfant du futur immédiat, toi qui est un netizen sans le savoir.

L'Homme Politique et Internet, ça fait deux. Aussi peu miscibles que ces deux-là, il doit y avoir l'huile et le vinaigre. Tu peux arriver à quelque chose en secouant très fort, mais tôt ou tard, faudra passer à la mayonnaise pour que le mélange entre les deux liquides tienne.

Oui, parce que, étonnement, les milieux militants, qu'ils soient les moins démocratiques (l'extrême droite est présent sur internet depuis le milieu des années 1990) ou des petits partis les moins représentés parmis nos élus (comme le Parti Pirate ou Les Abstentionnistes) ont une excellente maîtrise des outils offerts par internet. Au contraire des hommes et des femmes élus par la majorité de leurs concitoyens et qui sont parfois en place depuis avant la disparition du minitel.

Chaque fois qu'un élu politique parle d'internet, c'est pour lui faire porter les pires maux de l'Humanité allant du terrorisme breton salafiste aux destructions d'emplois chez les producteurs d'artistes musicaux, en passant par le réchauffement climatique causé par la prolifération de datacenters et les malformations de fœtus dues aux ondes électromagnétiques.

Il faut dire qu'une invention qui vient des États-Unis et qui, tels le rock'n'roll, le Coca-Cola et les westerns, pollue le mode de vie traditionnel du bon français moyen, ben de Gauche à Droite, ça rue dans l'Hémicycle ! « Quoi ?? On veut ridiculiser l'électeur moyen et la ménagère de moins de... de plus de 50 ans qui va acheter sa baguette un béret sur le bec à Gauloises ? il faut immédiatement stigmatiser ça ! » Comme en 1949 contre les comics à Mickeys avec la Loi sur les publications jeunesse et dans les années 1990s contre les Jeux De Rôles en réglementant le lancer de boule de feu dans les couloirs étroits des donjons de dragons.
C'est vrai, ces amerloques sont tellement des sauvages que leurs sites webs se font avec le logiciel Apache !

Cet état d'esprit est à tel point ancré chez nos élus qu'un Président de la République haut-perché sur ses talonnettes parla un jour de civiliser ce nouveau continent.
Face à sa vision raciste et colonialiste de la Terra Incognita qu'est Internet, les animateurs de cette émission ont exceptionnellement un regard biaisé et présente présentement cette édition du programme avec un os dans le nez.

Heureusement, vous n'avez pas la vidéo.
Comme l'a dit son successeur et actuel Président de la République : « le numérique est d'abord un risque mais peut aussi être une chance » (Conférence de presse du 7/9/2015).

Oui, il est vrai qu'à chaque fois qu'un élu politique prend la parole à propos d'internet, on peut être sûrs qu'il va promulguer une nouvelle loi.
Sus aux pédophiles ! Sus aux vendeurs de livres ! Sus aux loueurs d'apparts ! Sus la prostitution !

Heureusement, dans les chambres Législatives, les Ministères et à l'Europe, on n'y concocte pas que les lois d'interdiction, d'encadrement ou de pyrolyse de sorcières. Depuis le perchoir de l'Assemblée Nationale, on y pond aussi des lois qui tentent d'inciter à l'innovation, d'autres à attirer les startups, d'autres encore à aider nos Glorieuses Nationales SSII à l'export, et enfin d'autres qui tente de réduire les zones d'ombres où internet ne passe pas, ou alors avec un vieux modem 56k US Robotics.

Blague à part, on est dans le dilemme éternel de la fabrique des lois : une législation doit-elle anticiper sur l'innovation au risque de la brider, ou se retrouver dépassée par l'intrépide technologie fonceuse et devoir en contenir les débordements ? Comme l'a dit l'économiste réputé et premier ministre Raymond Barre « il faut mettre d'urgence un frein à l'immobilisme »

À partir du moment où la majorité des citoyens utilisent régulièrement Internet, ou que des entreprises jouent via leurs bases de données avec les droits élémentaires des netizens, oui, il n'est plus possible de séparer internet des choses de la ville.
choses de la ville, c'est la traduction littérale de politique, bande de pécores !

Sauf que le principal problème est une erreur de traitement : pourquoi faire une loi qui s'attaque spécifiquement au symptôme de la haine raciale dans les forums sur internet, alors qu'il existe déjà tout un arsenal de lois pour réprimer pénalement le racisme.

Enfant du futur immédiat, je pense que tu es d'accord avec moi et l'Académie de Médecine si je t'affirme que ce n'est pas la laideur de la lèpre qui tue, mais la lèpre elle-même. Donc ce n'est pas en leur mettant du fond de teint qu'on soigne les lépreux !
Et pourtant... nous n'arrêtons pas d'entendre parler de lois spécifiques contre la diffamation sur internet, la remise en cause d'élus dans les médias numériques, ou encore la vente d'armes de guerre sur le Bon Coin.
À en croire nos élus qui siègent à l'Assemblée Nationale, il serait donc moins dangereux de refourguer des AK-47 dans une brocante de quartier sensible contre du liquide, plutôt que via Silkroad, où l'on ne peut y accéder que via trois proxys dans Tor et les paiements ne se font qu'en bitcoins, inutile de dire que c'est largement plus hasardeux. Surtout la livraison par la Poste.

Le problème devient pire par ses effets de bord. Par exemple, pour lutter contre le terrorisme, et pour mettre à l'écoute l'ensemble des Français, le procureur Molins est parti en guerre contre le chiffrement des données. Qu'il soit dans votre smartphone pour protéger vos mots de passe ou... pour tout paiement bancaire qui transite par internet. Bref, en voulant lutter contre une menace terroriste qui n'est pas négligeable mais bien moins meurtrière que l'industrie du tabac ou les violences conjugales, des excités de l'Esprit des Lois veulent tout simplement interdire le commerce en ligne ! On aurait voulu faire passer la France dans une économie du Tiers-Monde qu'on ne ferait pas mieux. À mon humble avis, c'est tout à fait le genre de privation de liberté qui font plaisir aux terroristes, tout en ne résolvant pas le problème du nombre de morts par cancer ou par tabassage du concubin.

Il suffit de faire une analogie, que je pique à Benjamin Bayart : le code législatif est comme un programme informatique, dont le code source est écrit en Français, et qui décrit un ensemble de règles élémentaires. La meilleure preuve étant que le Code Civil est disponible sur GitHub.
Aux États-Unis, Larry Lessig, un ~~ex-patron de la Mozilla Foundation~~ juriste du mouvement open-source et John McAfee, le tycoon de l'antivirus se sont lancés dans la course à la Maison Blanche. Après tout, si un acteur de westerns a réussi à être président dans les années 1980s, pourquoi pas les développeur logiciels dans les années 2020s....

Enfant du futur immédiat, il ne faut pas prendre à la légère les lois et leur débugage : Si ce programme est bien écrit, il fonctionne sans heurts, sinon il plante de partout et peut mettre la société en échec.

Finesse en ‹img /›

Da Scritch — 2014-06-12T10:47:00+02:00

Plus gros, plus gros, plus gros, encore plus gros, plus gros, vous pouvez mettre encore plus gros ? Parce que j'ai un écran très très fin et vos images ont un grain beaucoup trop gros…
Webdev

Ce billet fait partie de la série en <img /> :

Histoires en <img />
Manuel en <img />
Ressources en <img />
Bricolages en <img />
Progressivement en <img />
Finesse en <img />
Propositions en <img /> / English version

Après le problème de l'affichage progressif des images qui correspondait à l'époque des modems RTC, attaquons notre souci actuel de riches : Comment adapter une image en fonction de la finesse du support client ? De votre écran, quoi.
Un problème de finesse des écrans, des millions d'insultes proférées par tous les intégrateurs qui tentent de faire du responsive web-design beau et soyeux sur des supports en High-DPI (densité conséquente de pixels).

Comparaison de la finesse d'écran entre iPhone 3G et le 4 dit à écran Retina.
Source : iphone3gsystem.fr

La situation s'était brusquement aggravée depuis que le pixel décrit dans nos documents HTML/CSS/JS n'est plus le pixel physique d'un écran, la triplette de photophores de couleur primaire. Non, maintenant, ce qu'on décrit avec l'unité px est un pixel logique, le multiple divisible de pixels affichés. La dernière unité quasi-certaine en notation css est devenue aussi abstraite que les autres.

Vous croyiez ne pas avoir tout compris au paragraphe précédent, mais la situation est encore pire ! Tentez d'inclure un SVG dans un HTML et là, vous allez commencez à perdre la raison comme si vous aviez entrevu le nom d'un dieu plus ancien que l'Humanité dans le code source On peut même arriver à définir des pixels non-carrés sans le faire exprès. J͔͖̗͇͒ͫ̒͒͝e̸̬̠̟͎̥̬̙ͥͨ͑̅͂̅ ̸͚̞̫͕͇̠̊́̔ͩͪ̏v̥́̋̇a̷̺ͩi̭̙̥̩̜ͩ̚s͌͌̈ ̖̙̪̯̣͎͒ͅd̡̖͊̄̆e̸̱̎̊̈ͭ͊ͅv̙̺̱̻͖͕̫̀̏͒̍̾̚e̎͐̔n̛̹̺̩̬i̼̙̩̣ͤͦ́ͬ͒ͩr̈́͑ͥ҉̹͈ ̞̯̯̫̪̥̰̽̇f͎̹̲̆̽͂̂ͧ̑o̩̓͛u̵͈̰̗ͤͅ ̱̘ͮͥ̆̄ ̳͈͔̜͚̦̯͒̓͛͊ͦ͗̀g͒̑ͩ̉҉̯̮̫̣͓̼lo͚̯͖̻̥͙̻̓ͯ̊̋i̮̤͕͖̲̐̒̂͗͋̓rͬ̉̽ẹ͎̹̜͙̮͑ͭ͋ ̼͎̾ͬͫ͑̀ạ͍͔̳̀ͥ̽̏̇͗ͧ ̢̽̽ͨ̍̈́Ĉ̤͈̗̼̘͕ͪt͎͚h̜̪͕͍̭ͬͩ͞ͅu̲̫͆ͥ̑ͮ̂͑l̂̿͞ḫ̙̹̞ͣ͌̐ͫụ̪͇̫̝͗̅ͦ͛̕ͅ

Et pourtant…

Le problème Retina ? En fait, rien de nouveau

Le fameux souci d'avoir des images plus précises en fonction de la finesse de résolution de l'affichage existe depuis qu'il est possible d'imprimer une page web comportant des images, donc depuis… 1993.

À cette époque, les imprimantes laser proposaient déjà une résolution de 300 dpi. 300 dpi, c'est-à-dire 300 points (ou pixels) indépendants par pouce sur une ligne horizontale ou verticale, ou, parce que nous sommes civilisés, modernes, éclairés et donc métriques, 118 pixels par centimètre linéaire.
Du côté des écrans d'ordinateurs, le Macintosh présentera systématiquement ~~à son heureux pigeo~~ 72 dpi, finesse empiriquement choisie à la conception du tout premier Mac de 1984, d'une résolution de 512×342 sur son écran de 9" de diagonale ; cette finesse de résolution restera en vigueur dans l'univers Apple jusqu'à la popularisation de Mac OSX en 2003.
Du côté des PC, rien n'est standard mais la moyenne sera d'environ 96 dpi à la fin des années 1990s, selon les études marchés menées par Microsoft, et restera dans ces eaux-là jusqu'à la mort des tubes cathodiques. Et j'oublie de préciser que le pixel carré n'est pas une évidence…

Donc à l'impression d'une page web, tous les navigateurs ajustaient les images par rapport à la taille rendue des polices imprimées en les zoomant. En fait, le processus passait par l'OS, le service d'impression, le driver, voire l'imprimante elle-même… mais ne nous encombrons pas de détails bien oiseux. Plouf… plouf…

Pour vous donner une idée, voici une simulation de rendu où je passe un extrait d'une page web prise au hasard de 100 dpi à 300 dpi. Les polices suivent, les images sont lissées, la plupart du temps par interpolation cubique.
Imprimer les images comme si elles étaient en 96 dpi donnera donc ce résultat magnifique comme si un graphiste avait oublié d'inclure ses images sources dans son document Quark XPress™ avant de l'envoyer chez l'imprimeur. Et en oubliant de vérifier le BAT, tant qu'on y est. Ne rigolez pas : j'ai déjà vu cet incident arriver chez des éditeurs de BD..

Cela ne vous rappelle rien ? Ben si, c'est très exactement ce que nous avons avec un écran High-DPI comme ceux des smartphones, des tablettes et des portables haut-de-gamme.

La question n'a donc absolument rien de neuf, sauf que l'impression des pages webs a de manière générale toujours été négligée. Il existe parfois des feuilles de styles spéciales @media print, mais bien peu de personnes ont considéré que les images ne devaient pas être mosaïquées à 72 dpi quand elles sortent en papier.
Sachant que désormais les imprimantes lasers couleurs peuvent largement monter à une résolution de 1200 dpi, on peut en déduire le postulat suivant :

La résolution Retina™ professée par Apple révèle juste que les intégrateurs de sites web ne se soucient que maintenant d'un problème vieux comme le premier navigateur Netscape.

Faut avouer que c'est un peu dommage : on s'y serait attaqué nettement plus tôt, on aurait déjà les bonnes réponses, standards, utilisables, éprouvées et tout ça…

Comme a ultime-soupiré George Abitbol tout en finesse :

Heureusement, on a presque les bonnes réponses.

La sur-résolution

La sur-résolution semble être la méthode actuellement la moins honnie. Elle fonctionne naturellement et fait confiance au navigateur pour que son moteur fasse le travail.

Le principe est d'envoyer une image qui contient largement plus de pixels que les dimensions dans lesquelles elle sera insérée, Par exemple, à envoyer une image qui fait 1200×900, mais la contraindre dans sa balise d'appel à 300×225, comme suit :

<img src="image.jpg" width="300" height="225" alt="" />

Pour un navigateur qui a un pixel physique pour un pixel logique, il fera un rendu adouci en moyennant 16 pixels pour en afficher un. Sur les (très vieux) navigateurs, le redimensionnement naturel de l'image peut être traité à la serpe (je ne prend que le premier pixel du carré, et j'oublie les autres), ce qui donne un rendu un peu rustre que j'avais parlé justement en abordant les attributs de dimension.
Pour les écrans très fins où les navigateurs utilisent 16 pixels physiques (4×4) pour un logique, nous aurons l'image dans toute sa finesse.

La technique de la sur-résolution peut mener à des réglages très fins. Google a récemment finement raboté d'un pixel son logo à cause du rendu en sous-résolution sur Chrome :

La différence de rendu entre les deux images, réduites à 50% sur Chrome.
Le flou du L sur la barre du haut ou du bas, c'est comme la barbe de Haddock :
Vous n'en dormirez pas !

Le principal inconvénient de cette méthode est qu'évidemment les images sont nettement plus lourdes, et peuvent prendre un temps plus que conséquent à se charger dans certaines conditions (genre smartphone en GPRS ou sur la 3G parisienne). Et, réalité que nous avons oubliée depuis Free Mobile, le volume de données transférées peut coûter cher dans certains cas à l'utilisateur, et donc attirer une mauvaise réputation pour certains sites.
Les graphistes consciencieux pensent à réduire la qualité des images lossy générées, par exemple en passant le jpeg de 85% à 75%. Vu que 300 dpi est la limite perceptible pour l'œil humain, les artefacts résultants ne se voient pas trop. Une autre astuce courante est de préciser au compresseur quelles sont les zones les plus humainement importantes en terme de détails.

Un autre inconvénient est la maintenance : le style est embarqué dans l'image, mais en cas de changement de la ressource et de sa dimension, il faut repasser derrière tous les appel <img /> pour corriger les attributs de dimension. De la maintenabilité digne des années 1990s, quoi…

Les images vectorielles

Source : vectorise.fr

Ce serait l'idéal.

Malheureusement, une large partie des images qui composent le web sont issues de photos, scans ou captures vidéos. Si on converti une image raster pour le format vectoriel svg, on atteint un poids délirant, des pertes de qualité conséquentes et…

Bref : Contre-productif, passons.

Les images à formats multiples

Comme le format .ico qui peut contenir des images à de multiples résolutions différentes. Les éventuels soucis de brevets détenus par Microsoft sont nuls et non-avenus vu son âge canonique. Sauf que ce format d'image n'est pas du tout supporté par Apple, et que son support n'est pas consistant entre Chrome et Firefox.
On peut rester dans la même idée d'utiliser un format d'image conteneur, à savoir le PNG, mais il faudrait là aussi que tous les navigateurs puissent en adresser une ressource interne particulière, soit via l'URL, soit via une propriété DOM.

On peut alternativement jouer avec les formats d'images à chargement progressif, le PNG en mode progressif Adam7 ou encore le jpeg/jfif progressif. On garde une compatibilité parfaite avec l'ensemble des navigateurs. Le problème est que nous envoyons une quantité de données aux clients qui ne sera jamais entièrement exploitée. Ce souci pourrait être indirectement résolu par une transmission partielle interrompu des données. Techniquement, on le fait déjà depuis 2007 via un Request-Range et les retours de requêtes HTTP code 206 partial content, donc c'est faisable.

Mais pour le faire proprement, il faudrait modifier les infrastructures côté serveur. Cette solution demande donc beaucoup d'huile de coude sur les serveurs et les proxies en plus d'adapter les navigateurs. Beaucoup de si avant d'arriver au résultat escompté on est loin de l'économie espérée…

La méthode <noscript>

Il existe une méthode intermédiaire qui consiste à charger l'image avec la bonne finesse par javascript. Je n'aurais jamais découvert cette méthode sans Sud-Web où ~~Thomas Parisot~~ les éditions Eyrolles m'ont offert l'excellent livre « Intégration web : les bonnes pratiques » de Corinne Schillinger.
Je vous laisse goûter la syntaxe de l'astuce :

<span class="retina-holding" data-width="600" data-height="400" data-lowres="img-x1.jpg" data-hires="img-x2.jpg" data-hireszoom="2"> <noscript> <img src="img-x1.jpg" width="600" height="400" /> </noscript> </span>

Le hack peut sembler “élégant” par rapport à d'autres mais
… Cela ne vous rappelle rien ?

Source : « Astérix en Corse » par René Goscinny et Albert Uderzo, cité sur le tumblr officiel. © Éditions Albert René

Eeeeeehh si !
Le lazy loading qui nous a tant fait hurler ~~de rire~~ dans le précédent épisode. Et comme lui, cette méthode possède de nombreux inconvénients :

À moins que javascript ne soit désactivé par le navigateur, l'image n'est pas chargée naturellement et donc peut ne jamais apparaître en cas de plantage ;
La syntaxe ne se montre pas de la plus belle des légèretés, même si elle tente de respecter approximativement la sémantique. Malgré tout, le référencement et les outils de lecture différés tels que Wallabag ou Pocket ne trouveront pas l'image ;
Comme pour la sur-résolution, il faut déclarer explicitement les dimensions logiques de l'image, ce qui alourdi la notation et n'aidera pas à la maintenance ;

Le Web Component

Le Web Component est une proposition de standard du W3C pour construire ses propres balises HTML. Vous pouvez les définir comme des macros côté client pour du code html, javascript et css. Une partie du html généré peut même être caché en shadow-DOM.
La méthode n'existe pas encore en natif dans les navigateurs, mais je vous fais le pari que sa généralisation native ne va pas tarder car elle est vraiment très pratique. En attendant, des bibliothèques polyfill comme Polymer ou Bosonic peuvent facilement vous aider à implémenter ce nouveau standard.

Oui, bon, j'aurais tenté de vous faire passer un maquereau pour une macro…
Je voudrais vous y voir à illustrer un sujet technique. Source : La rousse

Utiliser un Web Component peut pénaliser votre indexation si vous créez une mauvaise sémantique, et là aussi, il deviendra impossible aux outils tiers de voir vos images ou en cas de plantage javascript. C'est là encore un comportement à éviter pour tout ce qui est publication, blog ou site d'e-commerce.
Néanmoins, si je devais implémenter l'exemple précédent de la manière la plus propre possible, j'arriverai à :

<responsive-img data-x2="img-x2.jpg"> <img src="img-x1.jpg" width="600" height="400" alt="" /> </responsive-img>

Une balise <img /> standard dont l'appel n'est pas bloqué, à priori, je ferais difficilement plus propre. Et je peux me passer des attributs de dimension si je fais excessivement confiance aux dimensions servies comme on dit en Côte d'Ivoire. En fait non, je ne peux pas. RAAAHHH !

Via Content negotiation

La solution serait théoriquement transparente dans le code HTML, puisque tout se passe dans l'étape de négociation HTTP entre le navigateur et le serveur. Effectivement, quand le navigateur demande une ressource à un serveur, il dit ce qu'il peut accepter comme format de document pour cette ressource.
Ainsi, pour les ressources images, mon navigateur indique au serveur ce qu'il attend, et ses préférences :
Accept: image/png,image/*;q=0.8,*/*;q=0.5

La solution me semble élégante. Mais elle réclamerait beaucoup d'adaptation côté serveur, et aussi beaucoup de technicité car il faudra travailler les fichiers de configuration de vos Apache, n'ginx ! Or qui dit bricoler dans la configuration serveur, dit solution inatteignable dans un très grand nombre de situations, ce qui serait très frustrant. Sans compter qu'une nouvelle finesse d'écran sur le marché demandera de reparamétrer à nouveau les serveurs. Et elle ne résoudrait pas le problème de la différence de dimensions à prendre en compte par le navigateur.
En clair, ce n'est pas la meilleure car elle ne peut fonctionner que sur un hébergement dynamique.

Exemple de négociation de contenu : ici un texte est disponible entre différentes versions linguistiques, mais celui qui est servi dépend de la langue de l'ordinateur du client.
Source : Blog W3C, « Content Negotiation : why it is useful, and how to make it work. »

Si je devais la construire, voici comment fonctionnerait mon polyfill :

Un javascript côté client stocke un cookie pour le domaine indiquant la finesse d'écran attendue. Disons X-pitch=4
Un .htaccess peut rediriger la requête en fonction de la cookie et de la disponibilité de la ressource, en indiquant la finesse servie par un paramètre GET image.jpg?pitch=4 ou une sur-extensionimage.jpg,pitch_4.
Si jamais la finesse demandée n'existe pas, la redirection se fait vers une finesse moindre, par ex.: image.jpg,pitch_2.
Si aucune autre finesse que l'image par défaut n'est disponible, aucune redirection n'est effectuée.
Côté navigateur, à la réception de l'image, le javascript (ou la css en trickant comme un taré ?) applique le ratio de réduction correspondant si l'url de ressource d'image chargée comporte cette indication de finesse

Ce que j'aime dans ce scénario, c'est que si nous avons un souci de javascript ou côté serveur, le comportement par défaut du navigateur n'est pas impacté. De même, nous n'aurons aucun souci de syntaxe et pour les outils tiers.

Enfin bon, c'est juste une idée jetée comme ça à 2 h du matin, sans même en vérifier la faisabilité. Il y a sûrement un os quelque part si personne n'y avait pensé jusqu'ici, non ?
Genre, comment fais-tu quand la requête vient de la CSS et pas de <img /> ?

La proposition du W3C : srcset="https://dascritch.net/post/2014/06/12/"

Vue la longueur de mon billet uniquement sur les hacks possibles, et vu ce que j'ai à écrire sur la proposition de cet attribut, je vais réserver ça pour un dernier chapitre.
Parce que, il y en a à dire, mais surtout à proposer.

Bricolages en ‹img /›

Da Scritch — 2014-05-12T10:15:00+02:00

Où l'on apprendra comment les images sont gérées par les serveur web, et comment les navigateurs utilisent le document et ses méta-données header http. Avec une très belle astuce pour les CMS.
Webdev

Ce billet fait partie de la série en <img /> :

Histoires en <img />
Manuel en <img />
Ressources en <img />
Bricolages en <img />
Progressivement en <img />
Finesse en <img />
Propositions en <img /> / English version

Maintenant que nous avons défini la méthode d'appel dans la syntaxe html et que nous connaissons les formats d'images actuellement supportés, intéressons-nous sur la manière dont les navigateurs web travaillent, avec en prime un petit hack amusant.

Reverse engineering : comment les navigateurs gèrent <img />

Le plus important à savoir est que pour les clients web l'extension du nom de fichier n'a aucune influence.
Croire qu'il faut un .gif en fin de nom de fichier pour mettre votre truc animé, c'est un peu la même croyance que croire mordicus que .html en fin d'url aide précieusement votre référencement. Le W3C, l'IETF et toutes les cyberpolices qui définissent internet se foutent de chaque charlatan qui professe le contraire. Ces derniers sont des SEO-LOL qui travaillent exclusivement sous Windows et qui ne connaissent rien au web, ni à internet, ni à l'informatique.

Un spécialiste SEO diplômé Sup-De-LOL avec son appeau à crawlers.
Photo CC de Rodrigo Álvarez avec Oscar Zimmerman

Parce que cela n'a jamais été le cas : Il n'est pas rare dans la vie d'un crawler de moteur de recherche de tomber sur du texte ou des images générés dynamiquement et servis par des URL se terminant en .pl, .php ou .aspx. Une extension de nom de fichier n'est jamais une information fiable pour identifier un type de document.
Dans le protocole HTTP, si un logiciel client, qu'il soit navigateur web ou crawler, doit identifier le type de document (si c'est une image ou une page de texte) autrement que par son contenu, il doit se référer au type-mime indiqué dans l'entête Content-type: par le serveur. Si cette information ne semble pas fiable, on passe alors à une analyse divinatoire du type de document, familièrement appelée magic.

Le format réel de la ressource image est devinée par la bibliothèque de décodage graphique embarquée par le navigateur. GIF ? JFIF ? PNG ? Pas de souci : ces bibliothèques procèdent à une divination magic optimisée, testant les formats de documents qu'elle supportent. Elles sauront très bien se dépatouiller avec l'image.

Mais je vais être honnête : Dans les faits, quand il faut construire l'header d'une ressource à servir, les serveurs web en production correctement paramétrés ne se basent pas sur les définitions magic des fichiers, mais… sur l'extension de leur nom. Nettement plus rapide qu'analyser le contenu du document et le confronter à plusieurs milliers de règles regex.
Arrêtez de pouffer dans le fond, nous verrons plus bas que son utilité est toute relative pour <img />.

C'est l'histoire d'un trou de fort beau gabarit

Et puisqu'on parle de cela, il que je vous conte l'histoire d'un trou de sécurité qui resta très longtemps béant.
Il était une fois un navigateur qui avait gagné une guerre, et qui fut le plus populaire des navigateurs de son temps : MSIE (MSIE 6 inclus jusqu'à la XP SP1).

En ce temps-là, le navigateur fourni d'office par Microsoft était tellement imbriqué dans Ms-Windows qu'il demandait aux procédures standards de l'OS de deviner à sa place les fichiers images. Jusqu'ici rien d'anormal : les équipes de développement Microsoft utilisaient pragmatiquement sans le savoir l'approche DRY. Do not Repeat Yourself (il est inutile de répéter les mêmes fonctions) est une très bonne pratique de développement de projet.

MSIE n'étant disponible que dans l'OS de Microsoft (l'équipe de la version Mac mourrait d'inanition), la IETeam n'allait pas s'embêter à ré-inventer la roue et se baser sur la gestion des types de documents propre à Ms-Windows.
Du coup, si le système hôte supporte un nouveau type de document qui est un format d'image, le gestionnaire de document tout comme le navigateur imbriqué vont aussi le gérer, comme tout logiciel de cet éditeur. Ce mode de conception se retrouve dans d'autres OS et navigateurs : Rekonq se base sur les bibliothèques Qt de l'environnement KDE, et Safari se reposait en défaut sur Quicktime pour les ressources qu'il ne comprenait pas.
On y retrouve d'ailleurs le même manque fonctionnel par construction : l'affichage durant le chargement du gif 89a entrelacé et du jpeg progressif n'est pas possible, toute image n'est affichée qu'une fois complètement décodée.

Sauf que dans l'écosystème de Microsoft, cette procédure était trop permissive : Gestion par extension de fichier plus oubli de limite de périmètre fonctionnel. Les documents “images” appelés via <img /> se finissant en .exe ou .dll étaient… exécutés… avec le plus haut niveau de privilège possible…

Double facepalm, quand un seul ne suffit pas.

Si je vous dis qu'il était à l'époque “courant” de piéger des pages web qui changaient par ce biais le numéro d'appel du modem pour accéder à Internet en un 08 99… soigneusement surfacturé. Oui, Monsieur le Président, je plaide la complicité.

Ce fut la dernière fois qu'un navigateur se basait sur une extension de nom de fichier pour gérer les éléments d'une page web au lieu de vérifier son contenu effectif. Et depuis, MSIE fait comme tout le monde et utilise une bibliothèque compartimentée pour le décodage et l'affichage des images.

D'ailleurs, c'est suite au comblement de cette faille qu'on a commencé à voir arriver des favicons animées. La recette est simple : renommer une animation gif de taille 16×16 en favicon.ico et le mettre à la racine du site. Encore une fois terriblement efficace.

C'est cette astuce qui allait me donner l'idée d'un hack…

(teasing)

Classique des CMS : Image source et sous-formats

Quand vous construisez un CMS ou n'importe quel service qui doit servir des images fournies par des utilisateurs dans un contexte formaté, l'exercice de style archi-classique est la gestion des sous-formats d'images.

Tout outil de blogging ou d'e-commerce doit forcément gérer le fait qu'un contenu texte ou qu'un item soit enrichi d'une image. Il est dans les faits extrêmement rare que l'utilisateur qui crée le contenu envoie au serveur une image aux dimensions exactes préconisées par le designer.

Mock-up d'un design d'article magazine. Flottant à gauche, un espace contraint est prévu pour des images.
Source : Étude de redesign du site news.uci.edu

Et il est probable que cette image d'illustration soit reprise dans d'autres contextes, par exemple une page de une, de sommaire ou de recherche mais dans d'autres dimensions contraintes. Cette image doit donc être réduite ou/et coupée par l'interface d'édition afin de tenir dans un ou plusieurs certain canevas. Une opération plus cohérente et largement meilleure que de faire de la sur/sous-résolution.

Le CMS crée à partir de cette image source (ou master) des sous-images qu'on a conformé aux dimensions du design graphique du site. Ces sous-formats sont parfois optimisés pour le transfert en jouant sur les paramètres de compression, en suppression des métadonnées embarquées, etc…

L'écueil du nommage des sous-formats

« Qui amat bene, castigat bene. » (maxime latine qui explique qu'au rugby, on aime beaucoup ses adversaires).
Pour l'avoir beaucoup trituré dans tous les sens, je vais parler du moteur de blog qui motorise mon site depuis 10 ans. Dotclear, dans sa version 1 n'avait qu'un seul format de sous-images. Si j'envoyai capture.jpg, le script créait capture.TN__.jpg. Ce qui posait un souci de lisibilité dans les répertoires, puisque les entrées étaient doublées dans les gestionnaires de transfert.

Dotclear 2 propose une gestion paramétrables de multiples sous-formats. Cette fois-ci, Dieu décida de cacher le sous-formats d'images en préfixant par un point le nom de fichier (le standard Unix pour cacher un document, dans l'univers MS-DOS, c'est un bit d'état dans les métadonnées). Ainsi, on passait d'une structure :

capture.png
capture.__TN.jpg

capture.png
.capture_m.jpg
.capture_s.jpg
.capture_sq.jpg
.capture_t.jpg

La génération de certains sous-formats ne se fait pas si l'image master est en-dessous des tailles maximales du canevas de ce format.

Extrait d'une vue de l'arborescence des illustrations de ce dossier. À droite, les documents originaux que j'ai envoyé, à gauche, les sous-formats générés par Dotclear. Ces derniers sont en sous-opacité car ils sont “cachés”.

Mais il reste un souci : jusqu'à la version 2.5, les sous-formats générés par le moteur de blog sont forcément des jpeg. Imaginez que vous envoyiez exemple.jpg et exemple.jpeg, si les masters sont bien différenciés, vous aurez forcément une collision parce que le nom du document hors extension est le même.

Pour moi, cette imprécision n'était pas acceptable car j'ai régulièrement eu des utilisateurs qui se plantaient à l'extension. Et je ne vais pas les en blâmer : mes clients humains étaient des chefs d'entreprises dont le métier n'est pas l'informatique, je devais donc m'adapter, ou en suer à gérer le “bug” par téléphone.

Forcément, quand j'ai créé le mien…

Pour mon service dAgence, je souhaitais avoir la plus grande plasticité possible pour générer les sous-formats à partir d'une image originale. Comme nous (Nicolas “Xylpho” Guilhou au design et moi au code) construisions une solution B2B destinée à des freelances et des agences web, il fallait avoir un service générique, exhaustif capable de répondre à leurs demandes en étant le plus souple possible.

Le problème de collision de nom de document hors extension était, croyez-moi, le moins pire de nos soucis : Vous ne pouvez pas imaginer de quoi est capable un client, surtout s'il est conseillé par un spécialiste design qui n'a jamais fait de css de sa vie.

Pour illustrer, voici les paramétrages de sous-formats d'images utilisés pour mon site corporate dascritch.com, actuellement toujours hébergé sur dAgence.

Capture du backoffice béta, sur la liste des sous-formats d'images générées

En clair, si j'envoie un capture.png, j'aurais forcément pour les besoins du backoffice, un sous-format favicon (qui tronque en 16×16 et exporte en png) et icone (qui réduit en 128×128, en jpeg). Sur cette portion capturée, on ne le voit pas très bien mais ces formats ne sont pas modifiables.

En frontal (le site accessible à tous, quoi), je crée et paramètre autant de sous-formats que je le souhaite. Ainsi, sur mon site, j'ai le dsn (qui ne modifie pas la taille, mais transcode jpeg à 80%, sans métas) et realisat, générée à partir des paramétrages suivants :

Comme le laisse deviner le titre de la dernière section que je n'ai pas inclus, on peut aussi y surimposer une image en filigrane ou en tampon.

Ce qui me rappelle un projet magnifique : Un client avait prévu que son site web soit disponible en au moins 7 langues, et que les images aient des versions avec un tampon nouveau !, un avec promo ! dans chacune des versions linguistiques. 14 filigranes, plus l'original multiplié par les 4 formats minimum designés, ça faisait un joli paquet.
Oui, le client voulait absolument que toutes ses images soient filigranées, au cas où un concurrent parse son catalogue pour remplir le sien, comme lui-même a dû le faire pendant des années.
Petit coquinou.

Alors je me suis gratté la tête

Donc, quand j'en étais à créer un gestionnaire de média, j'ai dû faire un choix sur la stratégie de nommage des sous-formats d'images. J'avais écarté l'idée de créer dans chaque répertoire un sous-répertoire par sous-formats, car c'était reculer pour mieux se planter. Je voulais rester dans l'idée de sous-formats dans le même répertoire que le document original. Il fallait trouver une solution en jouant sur les standards et pratiques courantes.
Et je me suis dit que malgré toutes les bêtises que mes clients humains aient pu faire, je n'avais jamais vu un élément sans extension se terminer par une virgule puis un mot.

Bingo.

Pour m'assurer que les navigateurs un peu problématiques de l'époque ne soient pas perdus (de mémoire, des navigateurs pour feature-phones comme Open-Wave), je leur envoie un type-mime d'image universellement supporté, mais sans support de chargement progressif. Donc forcément un png. Je demande donc au serveur http du service de fournir les documents avec le type-mime image/png sans se baser sur le contenu interne du document servi mais sur le nom de fichier (ce qu'il fait quand même… eh oui).

Paramétrages pour un serveur Apache :
<FilesMatch ,[A-Za-z0-9_\-]+$> ForceType image/png </FilesMatch>
Pour un serveur nginx :
location ,[A-Za-z0-9_\-]+$ { default_type image/png; }

Et voilà *.
Peu importe le type d'image généré, que cela soit un gif, png ou jpeg, votre serveur web déclarera dans les headers http un Content-Type: image/png, les navigateurs clients qui le récupèrent comme ressource <img /> ou composante css laissent à leur bibliothèque de gestion des images le soin de se dépatouiller avec. Et tous les navigateurs l'ont très bien supporté, même MSIE6.
(* En Français dans le texte)

Avant de tester ce dernier fait, petits rappels :

les directives apache ou nginx, moins il y en a, mieux c'est ;
les directives avec des expressions régulières dedans, c'est une chute de performance annoncée. Mais comme les méthodes magic en sont farcies, ici, au contraire, on peut faire gagner du temps au serveur ;
sur serveur apache, évitez autant que possible de mettre des directives en .htaccess : si elles ne sont pas destinées à bouger sans un redémarrage serveur, préférez les mettre dans votre arborescence /etc/apache2/…

Ainsi, si j'envoie dans le backoffice de mon site pro, une image appelée capture.png, mon serveur va construire dans un répertoire les documents :

capture.png
capture.png,demo
capture.png,dsn
capture.png,favicon
capture.png,icone
capture.png,realisat

Let's test !

Il s'agit du même test dynamique que pour le chapitre précédent : Si l'image “oui” s'affiche, c'est que le navigateur le supporte.

Format	Type/mime standard	support	forcé en image/png	text/xml	application/binary
xbm	image/x-xbitmap
xpm	image/x-pixmap
pbm	image/x-portable-bitmap
pgm	image/x-portable-graymap
ppm	image/x-portable-pixmap
bmp	image/x-ms-bmp
gif	image/gif
ico	image/vnd.microsoft.icon
jpeg/jfif	image/jpeg
jpeg2000	image/jp2
jpeg XR	image/vnd.ms-photo
tga	image/x-targa
png	image/png
mng/jng	video/x-mng
apng	image/png
svg	image/svg+xml
webp	image/x-webp

Quels que soient les navigateurs web, pour que la ressource d'une <img /> soit parfaitement interprétée, le seul besoin impérieux est que le fichier doit être correct. La seule exception où nous avons besoin d'un type-mime exact concerne le format svg.
La raison est évidente : la nature vectorielle du svg le fait passer par le moteur de rendu “normal” du navigateur, donc un arbre dom. À l'usage, une image svg n'a pas une consommation mémoire aussi indécente qu'une <iframe></>, puisque les navigateurs très récents ne chargent pas un interpréteur complet.
Pas fous.

Ceci dit, même si le format svg est celui dont la gestion des éléments est le plus aléatoire dans les navigateurs, les corrections avancent. Je ne serais pas surpris que le tableau fasse mentir le paragraphe qui le suit dans les mois qui viennent.

Vos retours sur le hack

Est-ce que mon hack est propre ou dégueulasse ? Survivra-t-il à l'épreuve du temps et de l'élégance ? Est-ce que l'Inspecteur Dirty Hacky doit dégainer et flinguer ?

Je serais curieux d'avoir votre retour. Positif, négatif, analyses… On pourrait peut-être en parler IRL à la prochaine soirée HTML Sur <Table>

Dans le prochain épisode, l'épineux problème du chargement progressif pour qu'il soit ni trop lent, ni trop rapide. Si. Si.

Venez me causer pérennité à Paris-Web

Da Scritch — 2013-09-11T07:12:00+02:00

Autopromo. En plus de ma conférence de Jeudi, je tiendrais un atelier le Samedi. Viendriez-vous ?
Sortons

Les inscriptions aux ateliers sont ouvertes depuis ce Lundi. L'occasion pour vous rappeler que j'y tiendrais un “atelier”, puisqu'il s'agira de retours d'expériences, d'idées pour faire qu'un service web tienne dix années et plus. On a des cas célèbres de projets qui n'avaient pas prévu de tenir autant comme Spip, Wordpress, OS Commerce, Dotclear (tiens, dix ans justement), Craigslist ou Wikipédia ; certains tiennent le choc, d'autres auraient mérité de meilleures pratiques dès le début.

Mon atelier Construire pour le futur sera le Samedi 12 Octobre à 15h30 à l'EGS Management School (Paris, XI^ème) uniquement sur inscription préalable. Et si vous venez pas, je ne vous en voudrais pas : à la même heure Rudy Rigot et Jérémie Patonnier parleront RD à côté, y'aura de l'ARIA dans les composants, du redesign dans le navigateur,…
Ça me fait bizarre d'être au milieu de gens aussi pointus.

Ce que vous avez manqué cet été

Voici quelques unes de mes précédentes bafouilles dont nous aborderons peut être quelques ratures :

Un très vague aperçu de Sud Web

Da Scritch — 2013-07-31T07:45:00+02:00

Si vous regrettez de n'être pas venus cette année, voici les vidéos de rattrapage !
Webdev

Les conférences étaient filmées, comme pour les éditions précédentes. Elles sont disponibles à la consultation :

Le client, ce gentil méchant - Olivier de Villardi (conférence 20mn)
Conduite du changement, de l'artisanat à l'industrialisation - Agnès Haasser (conférence 20mn)
Sass et Compass ont embelli mon quotidien - Mehdi Kabab (conférence 20mn)
Getting Touchy: an introduction to Touch Events - Patrick Lauke (conférence 20mn)
Le développement c'est difficile - Rémi Parmentier (lightning talk 5mn)
Aubergine n'est pas une couleur - Alain Witkowski (lightning talk 5mn)
L'odyssée de l'espace insécable - Damien Alexandre (lightning talk 5mn)
Et si j'écrivais un livre ? - Corinne Schillinger (lightning talk 5mn)
Une quête de sens, conférence sur l'éthique animée par David Larlet (débat 1 heure)
Responsive News : l'actualité mobile à la BBC - Kaelig Deloumeau-Prigent (conférence 20mn)
Un peu de TLS ne fait pas de mal - Éric Daspet (lightning talk 5mn)
Le culte du cargo - Thomas Zilliox (lightning talk 5mn)
Les super-pouvoirs du nouveau venu - Mathieu Agopian (lightning talk 5mn)
Travailler sur ses 2 pieds - Pierre Martin (lightning talk 5mn)
La visualisation de données comme outil pour découvrir et partager des idées sur le web - Nicolas Belmonte (conférence 20mn)
Monitoring : une culture plus que des outils - Arnaud Limbourg (conférence 20mn)
Comment l'impression 3D va modifier le web et l'économie - Marc Lipskier (conférence 20mn)

Malheureusement pour vous, vous n'aurez pas gagné le plaisir des rencontres et des discussions. Vous avez loupé cette excellente ambiance de parlement anglais dans le palais des Papes en Avignon. Et surtout, le plaisir de défourailler (ici, avec Constant Barsalou, mon patron !)

Merci Brice Favre pour tes excellentes photos !

Alors, venez l'année prochaine !

Sud Web 2013, habemus principes

Da Scritch — 2013-05-22T13:57:00+02:00

Avignon est une ville superbe. Son Palais des Papes est magnifique. Et la salle de conférence en son sein a donné un cachet très particulier à SudWeb. Une ambiance de parlement Anglais.
Sortons

L'an dernier, j'ai eu la chance formidable d'y être orateur. Cette année, j'y suis allé sur mes propres deniers, car l'argent investi vaut très largement le skill acquis, le level up (comme disent les jeunes maintenant) conséquent.

Le ponpon, le Monsieur Plus ça reste l'immense Rudy Rigot déclamer le programme en alexandrins. Là, je crois que la barre a été mise vraiment très haut pour toutes les conférences techniques du circuit.

Il est vrai que les conférences étaient nettement moins techniques : Loïc “Chibani” Gerbaud (qui a sorti deux comptes-rendus très complets sur les conférences et les ateliers) m'a amené un bloc-note de secours car l'an dernier, je noircissais 3 pages par conférence. Là, cette année, on était moins dans le pointu et plus sur le retour d'expérience, mais du coup, cela donnait des regards très différents sur notre métier, des retours d'expériences enrichissants, voire des angles qui font changer notre point de vue.

Et puis, il y a les rencontres

Disons que vous avez des capacités et des connaissances techniques, mais quelques doutes. Ça nous arrive tous.

photographie de ma modestie par Thanh Nguyen (de O2Sources), lors de Sud Web 2012

Après quelques discussions, du partage, vous êtes devenus encore plus puissant

super-pouvoirs illustrés par @ookook

Rien à redire, participer à ce genre d'événements est une chance rare. Parce que les autres participants sont des professionnels passionnés. Vous pouvez consulter les slides, voir les vidéos, mais vous n'aurez jamais profité des rencontres.

Les conférences

Allant de thèmes variés, comme l'industrialisation d'un processus, la visualisation de données chez Twitter ou le responsive chez BBC News, chacun avait des éléments de sa spécialité, mais aussi des regards différents comme les imprimantes 3D, le bien-être comme le fait de travailler debout…

La fameuse quête mystère, agora sur notre secteur, qui a crevé de nombreux abcès. Il y a vraiment une prise de conscience qu'au-delà du respect des standards, nous devons amener un autre regard sur notre profession. Nous sommes des passionnés, nous devons néanmoins défendre, valoriser notre expertise.

Les ateliers

Mon gros regret est de n'avoir pu participer au fort ingénieux serious game mené par Antoine Vernois. Il y a tout simplement trop à voir en simultané. Je me suis en plus piqué au jeu de proposer mon propre atelier sur le coup. Et en plus, il y avait même un coin où ça jouait à cHTeMeLe, un jeu de barbu.

J'ai eu droit à un excellent (et particulièrement éprouvant) atelier de refactoring de code javascript particulièrement moisi. Un débat sur le commentaire décentralisé, qui montre qu'on est très loin d'avoir une solution simple et protégée. Et un autre sur la perception de sécurité des données personnelles, quoique totalement impromptu donc parfois décousu, il avait du potentiel.

Une satisfaction personnelle

J'en ai deux : La première, c'est que Constant Barsalou, qui m'a recruté pour le projet Simtie, est venu avec moi, et a pu comprendre mon monde. Je crois même qu'il l'a apprécié cette idée d'émulation pour porter vers le haut notre niveau d'exigence.

La deuxième, c'est que j'ai lancé un élaboratoire le jour-même, sous le titre provocateur Urgent recherche stagiaire, et que ce qu'il en sort risque de faire beaucoup parler dans la profession. Et en bien. Je vous en causerai la semaine prochaine.

Le logement

On va pas se mentir : les nuits furent COURTES.

Rien à redire, avec AirBnB, on est tombé sur un superbe appartement à 3 minutes du Palais, tenu par des logeurs qui nous ont même prévu un petit-dej. À deux pas des musées, dont c'était la Nocturne ce même week-end. Super bonus.

Comme du bonus

Outre le sac en toile de jute, les badges et la balle à envoyer sur les collègues, le bonheur, c'est de pouvoir acheter des ouvrage de références qu'on peut faire dédicacer aux auteurs. Et ça, c'est… Enfin, c'est SudWeb, quoi.

Un nouveau défi : écrire le web pour dix ans

Da Scritch — 2013-04-30T08:13:00+02:00

Bonjour, je suis à nouveau salarié. Et mon employeur doit être aussi fou que moi.
Ma vie est une sitcom

Voilà, c'est officiel : j'ai repris une activité de salarié, d'employé, d'ouvrier du code.

Notalus, c'est l'histoire d'une belle aventure familiale, d'une entreprise qui transforme vos paquets de papiers administratifs en superbes reliures. Ils ont des clients prestigieux et l'âge de la raison. Et ils font un double pari : proposer un nouveau service sur internet, et passer à un mode de gestion Agile.

Simtie est un projet de service web pour la gestion documentaire. À l'usage des petites structures, et dans l'idée de penser plus comme elles que de se bloquer à un mode de pensé qui ne conviendrait qu'à une minorité. Et ce projet doit tenir une décennie.
Notalus m'a proposé de devenir leur lead developer sur ce projet. De concevoir avec leur équipe d'une manière souple, solide, extensible et ingénieuse.

Le défi est beau.

J'ai tenté d'être mon patron

Être indépendant fut une très belle aventure, mais trop épuisante, éreintante.

Quand je me suis lancé en indépendant en 2007, je sortais de 7 années en tant que concepteur rédacteur en ~~publicité ~~multimédia~~~~. J'écrivais parfois sur la sécurité informatique, et je voulais me prouver que j'étais un développeur. J'avais juste oublié que dans « web-développeur freelance », le deuxième terme impliquait d'être un commercial. Un très bon commercial. Et là, je dois avouer que je n'ai pas su.

La difficulté à obtenir certains marchés parce que je ne suis pas un commercial, le comportement prédateur de certains “clients” parce qu'ils vous voient comme une variable d'ajustement à leurs mauvais calculs, les gestions de projets catastrophiques sur lesquels vous êtes appelé en pompier quand y'a plus grand-chose à sauver.
Tous ces problèmes furent plus fort que les très beaux projets réalisés comme la construction de dAgence, la collaboration avec Phonitive et bien d'autres encore…

Non, dAgence n'est pas abandonné. Il tourne, il y a des clients dessus, l'infrastructure est solide, et j'ai des plans d'améliorations. Donc ce travail n'est pas perdu. Il m'a permis d'expérimenter les WebForms2 dès 2007, les PDO, les surcharges, le MVC, les tests, l'extensibilité, les délégations de responsabilité sécurité, le SVG, les API, et d'autres avancées “HTML5” comme le mode strict, CSS3, etc…
Je ne peux que remercier mes partenaires, notamment Nicolas Guilhou et Kairn car ce projet est un très beau bébé.

Mais tout n'est pas perdu : Mon expérience sur plusieurs projets de web applications, dans différentes tailles et structures, semble séduire. Mon carnet d'adresse, et mes différente expériences, permettent d'imaginer des solutions différentes à des problématiques.

Tartine beurrée + sol ⇒ —

Évidemment, je souffre du syndrome Facebook. Suffit que mettre sur Facebook que vous êtes en couple pour que les filles gravitent autour de vous. Ben dans mon cas, depuis que j'ai annoncé à certains que j'entre dans une boîte, j'ai des offres d'emplois qui se réveillent. Des grosses agences Parisiennes ou Berlinoises, une de brillantes startups toulousaines qui vous disent ouvertement qu'il n'ont pas su vous appeler assez vite, et là, tout récemment, un superbe London calling.

Mais j'ai foi dans le projet Simtie. C'est un “classique” mais il y a réellement la volonté de le faire sous un angle moderne et neuf.

Et puis surtout, je reste un allumé exigeant, et complètement frappé. Et je ne suis pas sûr qu'au bout de 4 mois, même si je suis accompagné d"'un ex-collègue d'Index Multimédia, mes coworkers imaginent jusqu'où je suis capable d'aller en exigence technique.

Chamedi vernissage

Da Scritch — 2012-10-20T18:53:00+02:00

いけ猫 : L'art ancien d'arranger votre chat d'une manière convenable. Cette fois-ci, écrite.
Vu

Improbable.

Le chamedi de la semaine dernière proposait de visiter le tumbl Ikeneko. Il se trouvait que mon amie Florence venait de poster une photo de son chat Enki, dans l'idée même de la construction de ce type de photos.

En lisant mes logs apache, j'ai découvert que l'article était lié. Quelle ne fut pas ma surprise d'y trouver de plus une notice, que je vous traduis ici :

Notez usage formidable de l'étagère et de diverses plantes afin de mettre en valeur la douceur du neko. Le feuillage tombant du haut de l'étagère place le spectateur au point de départ de son voyage visuel. Avec la continuité de la verdure, des sauts visuels vous mènent jusqu'au pied de l'arrangement. Le neko placé en bas marque la fin du voyage.

Titre : « Le chat, cet objet déco über tendance. »
Photographe : Florence
Neko : Enki

S'inscrire à Sud Web, c'est maintenant !

Da Scritch — 2012-05-11T18:41:00+02:00

Pour des raisons de temps et d'économie, je recycle un slogan que j'avais filé y'a un an. Garanti sur facture, c'est un slogan gagnant !
Sortons

Combien de temps cette blague signifiera encore quelque chose pour vous ?

Source inconnue, donc D.R.

Les internets évoluent comme jamais. Combien de temps la manière dont vous créez des interfaces va-t-elle encore tenir avant d'être totalement ringarde ? C'est maintenant qu'il faut prendre le retour de ceux qui écrivent les normes, de ceux qui ont tenté de l'implémenter, de ceux qui ont eu les retours clients et utilisateurs.

Fin Mai, il n'y aura qu'un événement qui comptera pour vous :

Et venez profiter à la fois du temps magnifique que nous avons à Toulouse, mais aussi d'un week-end riche plaisir d'apprendre. Et avant que je vous fasse une conférence sur comment j'ai tenté de me faire élire, vous aurez droit à mes retours sur mes tentatives de me faire recruter mais aussi à d'autres personnes. D'autres candidats, des recruteurs, des cabinets de recrutement.

Et bien évidemment, tout le reste du programme de Sud Web est très enrichissant avec des intervenants qui sont des demi-dieux du web.

Alors n'hésitez plus : les inscriptions ne sont ouvertes que jusqu'à ce dimanche !

Y'a-t-il un Sud Par Sud Ouest qui s'ignore ?

Da Scritch — 2012-05-02T09:46:00+02:00

Viendez à Toulouse ! Venez ouvrir toutes grandes vos esgourdes et goûtez le plaisir que nous avons à exercer nos métiers.
Sortons

SXSW (prononcez « South By South West ») est un festival incroyable qui a lieu à Austin, Texas. Les artistes et la technologie se rencontrent ensemble. Il y a donc des concerts, des performances, des projections, mais aussi des conférences techniques, des showcases technologiques. C'est un peu comme si un festival de musique s'était allié à un de cinéma indépendant et un d'art moderne plus un de salon industriel avec une part importante de bidouilleurs.
En fait, c'est exactement ça.

L'impact de SXSW est énorme.
La chaîne musicale européenne MTV2 y installe un studio permanent. Les journalistes aussi bien musicaux que technique y accourent. Les cinéastes projettent à un public très différent des festivals comme Tribeca ou Sundance. Les musiciens jouent dans une multitude de salles et de bars et signent parfois avec des labels indies.
Économiquement et culturellement, Austin est un poumon important pour le Texas, et la ville doit énormément à ce festival établi depuis maintenant 25 ans.

C'est exactement l'événement qui nous fait kiffer, et qui donne envie de créer, d'innover, de construire et de rencontrer.

Ça me manque de n'avoir pas un tel foisonnement pluridisciplinaire en France.

Pourtant

C'est exactement ce qui pourrait arriver à la fin de ce mois :

Le même week-end à Toulouse a lieue la seconde édition de Sud Web et la troisième du Toulouse Hacker Space Factory (THSF).

Or vous savez qu'on a couvert avec beaucoup de passion et de bonheur l'édition précédente du THSF, et que je suis très heureux de me retrouver orateur à cette édition de Sud Web.

En fait, ça serait vraiment dommage que vous ne participiez qu'à un seul événement. Faites coup double ! Avec un peu de chance, nous aurons très beau temps, et vous rencontrerez des gens formidables et stimulants.

Vendredi 25 et Samedi 26 : Sud Web

Où des orateurs parlent de cas concrets en rapport avec leur profession. C'est extrêmement intéressant car on ne parle pas de théories, mais de réels retours d'expériences. Et donc les avancées telles que le html5, les méthodes agiles, l'accessibilité voient leurs objectifs confrontés au quotidien. Sans langue de bois.

Ruez-vous pour vos places : il n'en reste pas beaucoup !

Vendredi 25 à Dimanche 27 : THSF

Des badges sociaux zombies, des androïdes à réparer, apprendre à hacker des caméras ou se créer un réseau WiFi mesh, transformer une Kinect pour jouer sur un grand mur, voir des concerts ou les musiciens jouent avec les éthers… Ouvert pour adultes et aussi pour enfants.

Lundi 28

Sera férié, et c'est encore l'occasion de discuter. Pour ceux qui n'auront rien à démonter dans l'immédiat ni un besoin impérieux de prendre un train, ça sera l'occasion de prolonger les rencontres par des boustifailles improvisées dans les jardins. Au hasard... qui sait ?

Il y a donc un week-end formidable à la fin de ce mois de Mai

Si justement vous cherchez votre voie, un job ou un partenaire, vous aurez bien plus de chance de trouver avec bonne humeur sous un riant soleil, qu'en poireautant sous de tristes néons. Plaisir d'apprendre, d'expérimenter et de rencontrer. SudWeb et THSF sont deux opportunités de relance d'activité.

Et ça, je le pense sincèrement.

PS : Je crois que je n'ai jamais mis autant de mots-clés sur un billet. Mais difficile d'en retirer un seul ;)

Me voici à Sud Web

Da Scritch — 2012-03-13T13:47:00+01:00

Et bang ! J'ai encore du mal à y croire. Mais fin Mai, je devrais aussi assurer le show.
Sortons

Me voici orateur à Sud Web, la plus grande conférence concernant les technologies du web au sud de Paris.
Un festival de rock stars du web jouant de vertigineux solos de normes, standards et bonnes pratiques , un événement officiellement soutenue par le W3C, un comedy-club de geeks ponctuées de blagues en regex.

C'est Vendredi 25 et Samedi 26 Mai, et vaut mieux s'inscrire à l'avance vu le line-up de folie pour ce festival technique.

C'est pas mes sujets qui manquent

Parmi la multitude de sujets que j'aborde régulièrement, j'aurais pu proposer les trous dans la gestion de formulaire dans l'API de ce que l'on appelle abusivement le HTML5, les évolutions des compressions lousy de formats d'images/son/vidéos, le bricolage d'un framework javascript pour braficoter du SVG, sucrer un site donne-t-il le diabète, le théâtre de la sécurité qu'est devenu la certification SSL malheureusement à la base du HTTPS, pourquoi un moteur de blog n'est pas une panacée ni l'avis d'un SEO, comment ruiner sa réputation avec un comportement de bot sur les réseaux sociaux, la taille des différentes espaces en Unicode …

Finalement, j'en ai ressorti 3.

Mon vieux problème de tables HTML4 au support incomplet toujours d'actualité, et qu'on complète dans un coin, un dossier sur les emoji en cours de publication qui a mûri pendant 10 ans.

C'est finalement ma gueulante sur les tests de recrutement qui a été retenu.

Mauvaise foi ?

Car j'y jouais le rôle de la personne qui se présente avec un niveau convenable pour un poste, mais qui tombe sur des tests totalement aberrants, datant d'une autre ère. Sauf que je n'ai pas tenu ma langue dans ma poche.

Cette expérience hallucinante, je l'ai vécue plus d'une fois en moins d'un an. J'en ai donc parlé sur mon blog, et pas avec des pincettes.

Avec un retour incroyable : celui d'un cabinet de recrutement et pas des moindres, Expectra qui fait amende honorable ! Au point que ce groupe s'est engagé dans une refonte de ses tests, et que ma participation a été demandée.

En fait, le plus difficile a été d'expliquer aux organisateurs de Sud Web que je ne souhaite surtout pas parler d'une technologie en particulier. La plupart des tests que j'ai passé concernaient PHP, une technologie server-side, mais qui ne constitue pas l'exclusivité du web : en langage de génération de page existe aussi Perl, ASP, Java, Ruby, NodeJS,… sans oublier les bases de données (MySQL, PgSQL, MSSQL, Oracle, NoSQL), l'administration serveur, l'encodage des données, la conformation et bien évidemment les technologies client-side comme CSS, javascript et HTML.

Je souhaite réellement passer au-delà d'un quelconque troll sur une technologie, et parler purement de la distance entre ces tests théoriques et le domaine réels qu'ils sont censés quantifier.

Refaire le monde

Le fait que ce sujet soit pris pour un lighting talk suivi d'un atelier est une opportunité unique : celle d'un débat de groupe sur l'évolution que l'on peut donner à ces tests, de méthodes de recrutement différents. Mais surtout, de ce que ces tests dévoilent sur l'organisation interne de l'entreprise recrutrice.

Sud Web me propose donc d'animer le Samedi une rencontre qui permettra de croiser le regard des recruteurs et des postulants sur des méthodes qui évoluent beaucoup trop lentement en regard des changements techniques incessants que nous voyons dans notre profession. Et aussi de la difficulté de conduire une campagne de recrutement et un deuxième tri (après celui du CV) sur des critères objectifs, à des coûts raisonnables et quantifiables pour des directions non-techniques (au hasard, les ressources humaines).

Bonus de fin de stage

Sachez que si vous venez à Toulouse, profitez pour y rester aussi le Dimanche, car ce même week-end aura lieu l'excellent THSF, organisé par le hackerspace Tetalab. J'en reparle cette semaine.

Note de service

La suite de la série sur les emoji est fort opportunément reportée à la semaine prochaine.

Bleu comme un écran

Da Scritch — 2012-01-25T16:03:00+01:00

Ça me fait rire de ressortir des photos comme ça.
Sortons

Ça, c'est moi qui passait sa première soirée sur un langage totalement nouveau pour moi (appris en 1 heure), chez une agence qui n'a jamais été mon client, et accompagné de la fine fleur de la scène du code de Toulouse :

Photo « Ruby sur l'ongle » : © Frank Taillandier

C'était lors du premier Coding Dojo à Toulouse, en Septembre dernier. Depuis y'a eu un deuxième Coding Dojo dans notre cour (photos d'Enflammée), puis un un Code Retreat à Toulouse (encore des photos d'Enflammée). Tout cela, on le doit à Antoine Vernois qui a le talent de donner envie de se dépasser. Il a fondé une Software Craftsmanship à Toulouse, un peu dans l'idée du compagnonnage d'antan appliqué au développement informatique.

Parallèlement, le projet We Work In Toulouse a abouti à un véritable espace de co-working : Tau.

Les apéro-webs lancés par Frank Taillandier et Yann Madeleine (avant que ce dernier parte pour la Belle Province) continuent leur bonhomme de chemin. Et le second Sud Web aura lieu à Toulouse.

C'est un plaisir : il y a une réelle communauté de travailleurs du web, indépendants, salariés, développeurs, designers qui donne envie de partager et de progresser… Et elle n'est pas sur Paris.

CharlieHebdo.Fr , SDF sur le net

Da Scritch — 2011-11-03T09:19:00+01:00

Les foies, pas la foi...
Webdev

Charlie Hebdo a silencieusement fêté son millième numéro, par un bouquin et a fait une provoc' de plus. Comme tous les mercredis.
Un classique : Ils ont tapé sur la religion, à un moment opportun où des Catholiques Intégristes bloquent un théâtre à Paris, mais surtout à la montée de partis dits “Islamistes” qui veulent rétablir la Charia en Tunisie lors des premières élections libres dans ce pays depuis 40 ans.

Je ne lis quasi jamais Charlie Hebdo et j'adhère pas vraiment à leur ligne éditoriale.
Je n'ai pas à juger du choix démocratique d'un peuple. Charlie Hebdo s'est dit que ça valait le coup de rappeler ce que signifie la charia selon eux. Ils ont un peu rapidement oublié qu'elle est déjà appliquée dans la plupart des pays Arabes.

Mais le débat n'est pas là.

Dans la nuit de Mardi à Mercredi, des cocktails molotov ont été lancés contre leurs nouveaux locaux, détruisant la rédaction. Au même moment, le site web du journal a été attaqué et défacé.

Tandis que Libération, Le Nouvel Observateur, Le Monde et même Le Petit Journal de Canal+ offrait l'asile technique à la rédaction pour qu'ils puissent sortir leur prochain numéro, je m'intéressais de savoir comment le site web allait être relancé.
Normal : les scénarii de sortie de crise m'intéressent toujours en hébergement web.

dascritch Charlie Hebdo utilisait quoi pour son site ? y'a aucune référence sur le site de leur agence web http://www.bluevision.be/portfolio.html

bluevisionhq @dascritch Un bon CMS mais surtout une belle attaque bien programmée. Jusqu'à nouvel ordre, le site reste fermé.

Oui, ça se peut. Mais en général, ce sont des script-kiddies qui utilisent des outils relativement basiques de brute-force et qui cherchent à se faire un nom. Bien souvent, sous prétexte de revendications, il n'y a que l'aubaine de l'actualité alliée à un outil d'exploitations de failles archi-connues.

dascritch @bluevisionhq Attendez, je viens de voir charliehebdo.fr ... le site est retombé ? hack again ? ouille...

dascritch @bluevisionhq je suis de tout cœur avec vous dans cette épreuve. Jamais facile les relances de sites piratés...

bluevisionhq @dascritch non il s'agit d'une décision liée à la sécurité humaine... Merci pour le soutien.

Là, les bras me sont tombés...

dascritch @bluevisionhq ça c'est moins glorieux d'avoir foutu dehors charliehebdo.fr alors que la presse se bat pour les accueillir…

Toutes les rédactions ont voulu jouer des coudes non pas par opportunisme publicitaire, mais par réel élan de solidarité car un tel attentat est un acte de censure. Comme occuper un théâtre, bloquer un site web ou réduire les subventions des radios associatives. Tous ces journaux sont eux-aussi très vulnérables et eux-aussi craignent la mort, et en connaissance de cause : ils se souviennent de l'affaire des caricatures de Mahomet au Danemark.
À l'heure où j'écris, le nom de domaine pointe nulle part. Le fournisseur a abandonné son client au moment où il a le plus besoin de lui.

Désolé, mais là, j'ai beaucoup moins envie de compatir pour l'agence web.

Moralité : un “bon CMS”, cela ne veut rien dire : S'il n'y a pas eu un bon audit de code de leur belle interface, ou que les règles élémentaires de sécurité (mots de passe, mises-à-jour) ne sont pas appliquées, cela ne reste qu'un argument marketing qui tient que par le design. C'est le piège que je voulais éviter pour dAgence.

SSL est-elle ?

Da Scritch — 2011-09-15T10:13:00+02:00

Une fois de plus, la sécurité a été le parent pauvre d'une politique financière. Ça tombe mal pour une entreprise qui vend de la confiance. Pourquoi paie-t-on pour des chiffres si mal gardés ? Pour une poignée de certificats : Du chiffre, du code, du pognon, de la révocation...
Webdev

Mais qui est Le Chiffre ?

~~Le Chiffre est le premier super-méchant auquel est confronté James Bond, dans « Casino Royale », premier roman de la séri~~

L'histoire du chiffrement d'un message est longue comme celle des guerres de l'Humanité. César a laissé son nom à un principe primitif mais toujours efficace. Cette stratégie a été revue et industrialisée dans les années 1920s par les banques Allemandes : Les transferts financiers entre les différents établissements bancaires étaient transmis par télégramme, mais les messages étaient cryptés dans les agences avec la fameuse machine Enigma pour éviter tout casse virtuel par les postiers. Lors de la remilitarisation de l'Allemagne, ces engins si efficaces entrèrent en fonction pour les manœuvres militaires.
Les méthodes actuelles de chiffrement utilisent des clés asymétriques, ce qui veut dire qu'une clé de lecture ne permet pas d'écrire un message codé. Actuellement, elles sont majoritairement basées sur le chiffrement RSA, écrite durant les années 1970s, et elles sont autant utilisées dans les domaines stratégiques (Militaires, diplomatiques,...) que civiles.
Les opérations bancaires, monétaires, de transfert de titres furent pendant longtemps les utilisateurs civils les plus importants de communications chiffrées, car elles utilisaient les infrastructures publiques de télécommunication (télégramme, télex, modem sur téléphone, liaisons louées,…).

Le Chiffre vous garanti une solide protection, vous permettant d'effectuer des opérations financières partout dans le monde

Techniquement, ce sont des algos qui sont réputés comme suffisamment fiables, tant qu'on ne peut les casser. La méthode de “cassage”, ce que l'on appelle une compromission, s'obtient en général par une attaque en force brute : essayer mécaniquement toutes les possibilités, trouver des nombres premiers de plus en plus grands, parfois jusqu'à 4 000 chiffres. Avec l'augmentation continue de la puissance de calcul des ordinateurs, on travaille avec des nombres de plus en plus grands, rendant coûteux et onéreux la compromission d'une paire de clé. En gros, allonger une clé primaire d'un seul chiffre double la durée estimée de cassage par attaque en force brute : Une clé à 500 chiffres est deux fois plus longue à casser qu'une clé de 499 chiffres. C'est comme pour les sécurités sur les billets de banques, elles ne pourront bloquer indéfiniment toute contrefaçon, elles doivent au moins la rendre non-rentable.

Néanmoins, il existerait des faiblesses dans ces constructions mathématiques. Les algorithmes utilisés actuellement ont un certain nombre de faiblesses publiquement connues, et leurs implémentations font en sorte de ne pas générer de clés faibles. Jusqu'à plus ample informé, quand celles-ci ne sont pas publiques, et/ou seraient utilisées à la discrétion de certains services de renseignement militaires.

Avant d'aller plus loin, il est important de noter qu'on parle de chiffrement, car les messages encodés doivent être reconstitués à l'identique à l'arrivée. Ce qui n'est pas le cas d'autres méthodes de cryptages dites destructrices, comme le hashage (MD5, CRC32, SHA-1,...).

Chiffrement for the masses

Dans l'univers d'internet, difficile de se passer d'une solution de chiffrement. C'est une étape indispensable que de pouvoir établir un canal privatif et sécurisé entre deux personnes, qu'il sera impossible de lire à leur insu.

Certains services du quotidien fonctionnent sur le principe de la confiance. Vous confiez à ÉDF vos crédences bancaires car vous estimez leurs relevés justes. De même que vous attendez de votre quotidien une information fraîche et honnête, vous attendez de votre facteur qu'il n'ouvre pas vos courriers. Dans un univers ~~mathématique~~ où les services postaux seraient en concurrence, si justement les clients ne font plus confiance à La Poste, leur service ne serait pratiquement plus utilisé, sinon par les ~~pollupost~~ publicitaires.

Contrairement à ce que certains politiques peuvent croire, les occasions où vous utilisez quotidiennement une communication chiffrée ne manquent pas :

Quand vous envoyez vos e-mails, vous aimeriez que ceux-ci n'arrivent qu'aux bonnes personnes
Quand vous achetez en ligne, votre numéro de Carte Bleue ne doit être destiné uniquement à la banque du commerçant, pas à l'ensemble des serveurs hébergés chez OVH
Quand vous établissez un dossier personnel du type impôts ou mutuelle de santé, certaines de vos réponses ne sont pas forcément destinées à vos voisins
Quand vous téléphonez (Skype, Jabber, voire votre mobile), ce n'est pas forcément pour inclure la Terre entière dans votre conversation
Quand vous utilisez votre wifi chez vous, votre concierge n'a pas à savoir chaque page que vous consultez
Quand vous mettez à jour votre site d'e-commerce, ça serait bien que personne ne change les prix à votre place

En temps normal, quand vous surfez par le web, vous utilisez le protocole http:// (la première partie de l'URL), qui envoie et réceptionne des données en clair. Seulement sur Internet, les trames du dialogue sont susceptibles de passer par des chemins très différents entre deux points, c'est le principe même de ce réseau. En étant à Toulouse, quand je communique avec un serveur basé à Lille, mes données remontent à Paris via Bordeaux (ou une partie peuvent être envoyées par Montpellier), mais peuvent passer par Londres puis Bruxelles... Et encore, on parle d'un hébergement à un endroit fixe. Quand on parle d'un service en cloud, tout est possible.

Un chiffre aux multiples fonctions

Les principales missions du chiffrement sont :

① Certifier votre correspondant: Vous avez besoin d'être absolument sûr que le correspondant avec qui vous allez entamer un dialogue est bien la personne qu'il prétend être. Et, au besoin, inversement
② Confidence de la communication: Celle-ci ne s'adresse qu'à lui, et ne saurait être écoutable en clair par un tiers
③ Intégrité du message: Celui-ci ne doit pouvoir être modifié entre les deux correspondants
④ Non-contrefaçon: S'il est impossible de certifier que des messages ne sont pas interceptés par un tiers, que celui-ci ne puisse insérer dans la conversation des réparties en se faisant passer pour un des correspondants

Dans le cas du web, si il y a besoin d'une confidentialité, on utilise le protocole https://. Les différences sont minimes avec le http:// (le protocole est identique à part la procédure d'authentification, à part le numéro de port qui passe du 80 au 443), mais il est chiffré entre votre navigateur et le serveur que vous consultez. Il se présente pour l'utilisateur par un affichage légèrement différent, allant du traditionnel cadenas :

... à un aspect très modifié de la barre d'adresse.

Les bonnes pratiques conseillent de systématiquement proposer une version https:// d'un site pour peu qu'on identifie les visiteurs avec des données personnelles. Depuis un an, un serveur web peut indiquer par un manifeste HSTS que le navigateur doit obliger l'utilisateur à passer en https:// pour toutes les visites ultérieures. Après l'avoir mis en pratique, je ne peux le conseiller qu'aux cas vraiment critiques type paiement bancaires ou webmail car il sera impossible de revenir en arrière.

Seulement, il est impossible pour les utilisateurs du web de tenir personnellement une liste de toutes les signatures numériques (les paires de clés pour initier un dialogue) de l'ensemble des usagers de l'internet. C'est ici qu'entre en jeu les...

Tiers de confiance, chiffres presque entiers ?

Une autorité de certification (Certificate Authority ou C.A.) est un tiers de confiance : En encodant avec sa clé de cryptage une clé de décryptage (celle du site de vente en ligne, de la banque, d'un ministère, etc...), il vous garanti que la personne avec qui vous dialoguez est bien celle qu'elle prétend être. Quand vous vous connectez à un site par un canal chiffré, mais dont vous n'avez pas la clé, ce site indique quelle est son C.A., laquelle fourni publiquement sa clé de déchiffrement. Si vous faites confiance à cette C.A., vous récupérez la clé du certificat du site que vous joignez, laquelle s'ajoute au trousseau de votre navigateur. On saute donc la mission ①, tout en vous donnant la clé pour poursuivre votre dialogue dans les garanties suivantes. La suite, c'est une génération de clés de dialogues entre votre navigateur et le site correspondant, des clés qui seront jetées à la fin de votre session de surf.
Ce mécanisme de clés est basé sur les algorithmes SSL, lesquels sont basés sur les travaux de Ronald Rivest, Adi Shamir et Leonard Adleman, aka R.S.A., plus tard fondateurs de RSA Security.

Il existe un nombre relativement restreint d'entreprises « Tiers de confiance », les clés publiques de déchiffrage de ces entreprises sont donc embarquées dans votre navigateur web, votre client e-mail, voire au niveau du système. Car oui, même au niveau de votre système d'exploitation, afin de garantir des mises-à-jour logicielles, ce n'est pas un certificat délivré par Microsoft, Apple, Mozilla, Red-Hat, Ubuntu que vous utilisez, mais des clés délivrées par des tiers de confiance à ces entreprises/organismes. C'est pour une raison de cohérence et d'universalité, car vous pourriez utiliser un autre outil que le gestionnaire logiciel de votre système d'exploitation afin de mettre à jour votre ordinateur.
Les conditions de création de telles clés, leur enregistrement public et leurs révocations font parti du travail de ces tiers, avec des rôles clairement séparés. Je vous conseille de lire la Wikipédia sur le sujet qui sera infiniment plus pédagogue que moi.

Allons sur le site normal (non-chiffré) de Google :

Vous pouvez faire apparaitre une bulle de certificat de confidentialité en cliquant sur la favicon à gauche de l'adresse.
Notez que pour mes captures, j'ai pris Firefox 7 (encore en version béta à la date de mon billet) car elle introduit de subtils changements introduits sur le desktop par Chrome et qui semblent devenir la norme : la disparition dans la barre d'URL de l'indication du protocole http://, et de mettre en sous-contraste ce qui n'est pas le nom de domaine principal du site.

Maintenant, passons sur la page sécurisée de Google :

Le protocole https:// apparait, avec entre la favicon et l'URL l'indication du possesseur du certificat SSL utilisé. On notera que Google sert son site sécurisé dans un sous-domaine à part (encrypted.), mais plus bizarre, le certificat SSL de Google a été délivré par un revendeur (Google lui-même) mais délivré à personne (?).
Cliquons sur plus d'informations, et regardons les détails du certificat :

Le certificat SSL de Google a été chiffré par le C.A. Equifax Secure, devenu GeoTrust en Juin 2010. C'est donc ce tiers de confiance qui nous certifie les clés. Equifax a autorisé un revendeur (Google Internet Authority) à générer des clés pour le domaine google.com.

Si vous vous amusez à générer une clé en dehors de ces tiers de confiance, de suite, c'est une méfiance généralisée contre vous qui va s'installer.

Voilà un business avec des gros chiffres

Lors de la création du protocole https:// en 1995, RSA Security était l'unique autorité délivrant/facturant des certificats. Ce qui posait de multiples problèmes : À l'époque, la législation Américaine sur les technologies militaires interdisait de commercialiser en dehors des États-Unis des clés solides, les clés commercialisables faisaient moins de 256 bits, ce qui rendait leur intégrité en partie dérisoire pour un usage bancaire. Il y avait de même un monopole par l'existence d'un brevet mathématique sur l'algorithme RSA, donc un prix totalement arbitraire vis-à-vis d'un service et l'impossibilité de critiquer le système sous peine d'en être exclu.

En 2000, le brevet RSA expire. Des entreprises indépendantes peuvent donc se constituer en Certificate Authority, à condition d'inspirer suffisamment confiance pour que leurs clés publiques soient embarqués par les éditeurs des navigateurs.

C'était prévisible, cette gestion des clés certifiantes est immédiatement devenue un business. Malheureusement avec les dérives qui vont avec : Commercialisation à outrance, économies en tout genre et comme toujours dans un service informatique, c'est la sécurité qui en est le premier poste à souffrir. Dans leur domaine, voilà qui en est paradoxal.

Il était déjà arrivé que des C.A. démarchent “très pro-activement” certaines entreprises, allant même jusqu'à prendre induement la place de leur fournisseur de clés SSL. Le cas d'une commercialisation abusive est déjà arrivée à Mozilla, la fondation éditrice de Firefox. Il aurait pu devenir possible pour des réseaux maffieux de se faire passer par Mozilla et de glisser des mises-à-jour vérolées dans Firefox/Thunderbird.

Tout ça pour quelques chiffres

Le gros problème, c'est que passer par un C.A. est la seule méthode pour avoir une sécurisation viable de son site web. Pour peu qu'on propose un système monétaire (paiement embarqué), un webmail, un backoffice d'un site corporate ou un extranet sensible, ou même un service web hébergé en cloud, il est franchement recommandé de proposer une version chiffrée de son site web : Par exemple dans le cas où l'utilisateur utilisera votre site via un wifi ouvert (non-crypté, ou insuffisamment). Aucun des opérateurs proposant du wifi en itinérance (Fonera, FreeWifi, Orange,...) n'utilise de wifi protégé, sans compter les hôtels, Starbucks™ et autre McDo.

Mais si votre délivreur de clés SSL commence à générer des clés à votre nom à des organisations totalement étrangères, le cycle complet de confiance tombe. Vous comptiez utiliser Google Mail, mais votre gouvernement vous écoute voire vous envoie de faux messages. C'est exactement ce qu'il s'est passé pendant le Printemps Arabe : Pour mâter les révoltes, le gouvernement Iranien s'est placé entre Internet et les FAI nationaux, et a soigneusement écouté tous les mails échangés via Gmail. Le problème ne concerne pas une petite faune marginale de geeks, mais dans ce cas précis, au moins 300 000 internautes !
Imaginez de même que les mises-à-jour de vos serveurs sont compromis par une duplication imbue de Microsoft, Apple,… vous ne pouvez plus avoir la moindre confiance envers votre propre ordinateur. La situation serait beaucoup plus difficile à démontrer, mais elle concernerait la totalité de la population connectée, donc les entreprises étrangères sur place. Ben là aussi, c'est arrivé avec des certificats contrefaits de fabricants Taïwanais permettant à des virus de se loger bien au chaud.

La correction a été aussi rapide que possible : Une révocation des certificats publics du C.A. en question à condition que tout le monde l'applique. Or, entre nous, s'il y a bien une chose que le Grand Public ne fait jamais, ce sont les mises-à-jour de sécurité.

Chiffres molles

Et c'est bien là le problème : Le C.A. Comodo infiltré et compromis par un pirate, qui à partir de ces serveurs, s'est fabriqué de fausses clés. Puis moins de 3 mois après, rebelote avec un autre C.A., DigiNotar, sauf que cette entreprise s'est ingénié à minimiser la réalité de la situation. On a crû que seulement moins d'une demi-douzaine de certificats ont été contrefaits, ce serait au moins 500.
Avoir caché la situation a été fait exclusivement pour ne pas perdre des clients, mais voilà : Nier un incendie n'aide pas à l'éteindre.

Et selon les éléments qu'a livré le pirate qui a revendiqué ces exploit, il a eu la tâche facilitée par le fait que ces C.A. ont très mal séparés les éléments vitaux de la création d'un certificat. D'ailleurs, en plus de Comodo et DigiNotar, il a aussi compromis GlobalSign (qui est un énorme fournisseur du marché, et qui a immédiatement arrêté toute activité jusqu'à correction) et 3 autres C.A... Pour ajouter l'insulte à l'inconsistance, le fait que DigiNotar a voulu cacher sciemment l'ampleur des dégâts en dit long sur la confiance qu'on peut accorder à ce C.A.

C'est le feuilleton de cette fin d'été, sachant qu'un autre casse y'a 6 mois, chez RSA Security cette fois-ci, aurait permis à des malveillant de faire main basse sur des documents très particuliers : des faiblesses de divers algos de chiffrages (dont le RSA, dont SSL,…) qui n'ont jamais été révélés au public.
Une situation encore plus ubuesque en France où des recherches sur les faiblesses des chiffrages sont strictement interdites par les lois DADVSI, LOPPSI, HADOPI et LCEN (Loi pour la Confiance en l'Économie Numérique, ben voyons…).

En attendant, les responsables de sites web voient deux types d'attaques périmétriques face auxquelles ils sont totalement démunis : le détournement de nom de domaine (DNS poisonning) et désormais le faux et usage de faux certificat SSL en leur nom.

Cela amène certaines autorités d'internet, en plus de revoir le système DNS, à songer à remplacer le SSL, mais on est loin du consensus.

Chiffres en berne

Seulement, pourquoi payer (assez cher et tous les ans) des certificats si le fournisseur, l'“autorité” qui vous la vend n'est plus digne de confiance ? Et surtout, pourquoi encore faire confiance à ces C.A. qui n'appliquent qu'une politique de sécurité au rabais ? Et d'ailleurs, puisque finalement ces C.A. ne sont que des marchands de services plus préoccupés par leur ~~C.A.~~ chiffre d'affaire que par la valeur morale de leur service, il est temps de faire jouer leur responsabilité morale.

La sanction est proche : Les certificats d'autorités ne sont embarqués dans les navigateurs que parce que leurs éditeurs leur font confiance. La Mozilla Foundation a lancé un ultimatum à l'ensemble des C.A. : Conduisez immédiatement un audit de sécurité par un organisme indépendant, où les utilisateurs de notre navigateur ne feront plus confiance à vos clients. Et il n'y aura aucune exception.
Évidemment, en cas de retrait d'un certificat d'un C.A., des centaines milliers de sites deviendront inaccessibles avec ce navigateur. Mais le but de la Mozilla Foundation n'est pas d'acquérir des parts de marchés, mais d'améliorer Internet pour l'usager, en toute ouverture. Sacrifier l'accès à des milliers de sites, si c'est pour obliger à de meilleurs pratiques ne sera pas une première de leur part. Et cela ne les a pas empêchés d'être le navigateur web le plus utilisé en Europe, donc l'exigence paie.

On peut parler d'une réelle prise d'otage, mais la gabegie est édifiante chez certains C.A., troués depuis 3 mois. Et soyez assurés que les autres éditeurs de navigateurs (Microsoft, Google, Apple,…) appliqueront eux aussi la sanction de Mozilla.

Car sur Internet, tout est question de confiance. Et elle ne se chiffre pas...

Cours express de référencement internet, aussi dit “S.E.O.”

Da Scritch — 2011-04-17T22:30:00+02:00

Il est 22h30 ? OK, on y va pour la leçon...
Webdev

Dans un site Internet, on met à la racine de ce site un document appelé “robots.txt”. Il permet aux moteurs de recherche comme Google, Yahoo et Bing de leur dire « inutile d'archiver cette page, d'ailleurs je ne le souhaite pas ». C'est une procédure qui existe depuis 16 ans (oh ? déjà ?!?) parfaitement documenté. Cette pratique s'appelle du SEO et se facture à un prix indécent.
Le robots.txt d'un site donne parfois des infos très très très intéressantes.

Exemple pratique avec PriceMinister.com

Qu'apprend-t-on à lire http://www.priceminister.com/robots.txt

# robots.txt

# PriceMinister FR robots file for http://www.priceminister.com/
# Contact: Hostmaster PriceMinister (hostmaster@priceminister.com)
# 01.03.2011 TLE

User-agent: Mediapartners-Google
Disallow:

User-agent: *
Disallow: /affiliation/
Disallow: /cover/
Disallow: /cart
Disallow: /inventory
Disallow: /purchase
Disallow: /sponsorship
Disallow: /submit
Disallow: /user
Disallow: /wish
Disallow: /info/no/op/
Disallow: /info/vo/op/
Disallow: /info/co/op/
Disallow: /info/rc/op/
Disallow: /V2/productSearch
Disallow: /p/
Disallow: /comparateur_fr/V3/
Disallow: /ext/
Disallow: /op/
Disallow: /google/adsense
Disallow: /offer/buy/80729165/retard-retarder-ejaculation-soin-beaute.html

User-agent: TurnitinBot
Disallow: /

« Oups... », comme on dit dans le métier : dire qu'il existe aussi la balise HTML <meta name="robots"[...]> pour interdire une seule page. C'est plus discret...

Milles mercis à l'indispensable Olivier “Bluetouff” Laurelli

Héberger en Cloud, c'est super tant que...

Da Scritch — 2011-04-04T22:40:00+02:00

... que les nuages noirs ne s'amoncèlent pas. Pourquoi la stratégie du cloud est à réfléchir lourdement avant de l'envisager.
Webdev

La fable sécurité du jour vient de The Register.

C'est l'histoire d'un producteur télé américain. Un petit, hein, le genre à proposer ses productions en syndication, c'est-à-dire non pas en les proposant en exclusivité à un grand réseau (les networks comme ABC, CBS, NBC et Fox qui n'émettent effectivement qu'en soirée, le reste, les stations locales font ce qu'elles veulent), mais en vendant ses programmes à un max de petites chaînes hertziennes locales qui en ont l'exclusivité pendant au moins un an. Appelons-le WeR1 World Network.

WeR1 produit une série éducative en animation, « Zodiac Island » qui a été bardée de récompenses.

“Animation”, veut dire dessin-animé, veut donc dire dessinateurs, et donc bien souvent, vu le prix de production d'une minute de personnages qui bougent, outsourcing de l'animation en Asie. Les méthodes de production délocalisées (appelons un chat un Simpson) se font depuis plus de 30 ans ; aux États-Unis comme en Europe, on maîtrise parfaitement ce genre de sous-traitance.
À l'ère du numérique, on va bien plus vite que les feuilles de celluloïd peintes au revers, on utilise des documents informatiques dans des formats industriels.

Chez WeR1, tous les partages de documents de production (scénarii, scripts, dessins, bible graphique, scènes, animations, plans, sonores, rushes voix, mixages) et les vidéos finales PÀD sont hébergés dans le nuage, in the cloud par un spécialiste du genre. Appelons ce prestataire CyberLynk.
Le cloud, c'est fashion, tendance, et théoriquement économique puisqu'on peut se passer d'un responsable informatique.

Un jour, leur prestataire d'hébergement serveur décida, pour des raisons sûrement justifiées, de virer un de ses salariés. Appelons l'éconduit Michael Scott Jewson.

Premier souci : si l'individu a été mis à la porte, et n'en était pas très heureux de cet état de fait, l'employeur CyberLynk a été assez idiot pour ne pas lui retirer aussi ses crédences d'accès à son back-service. Jewson s'est tout simplement loggué un mois après, et par vengeance, a effacé 304Go de données.
Comme la plupart des hébergeurs responsables, CyberLynk, dont la spécialité est le backupage de données sensibles, effectue la redondance de données et la sauvegarde de serveurs.

Deuxième souci : l'ensemble des sauvegardes étaient accessibles du back-service avec les crédences de l'employé marri. Jewson s'est donc empressé de supprimer aussi les redondances.

Un nuage s'évapore, la prod est à sec

Donc, pour des raisons “économiques”, WeR1 a vu s'évaporer la production complète de la deuxième saison de « Zodiac Island ». La PME a une centaine de clients pas contents de devoir remettre des rediffusions (ben oui, une chaîne de télé, ça émet 24h/24, ne rien avoir dans la grille n'est même pas envisageable, même Direct Star emploie des stagiaires qui pillent le web pour leur zapping) alors qu'ils ont payé plein pot pour un programme original.

304Go de données perdues. Pour ne pas avoir 2 NAS redondants dans leurs locaux, soit un budget de 300 $, c'est une année complète de production foutue en l'air pour WeR1. Jewson, l'ex-employé indélicat de CyberLynk a reconnu les faits et proposé de réparer financièrement. Sauf qu'avec son statut de chômeur et la recommandation peut flatteuse que doit lui faire son ancien employeur, je doute qu'il puisse lever un quelconque emprunt pour payer les quelques millions de dollars en dommages et intérêts.

Comme quoi, contrairement à ce que dit la pub, un chef d'entreprise qui sait pas où va son informatique, mais qui se satisfait de l'avis de la comptable, ben il a peut-être fait une belle idiotie.

Stop the hype : it's not so... génial...

L'hébergement en cloud est la suite logique de la virtualisation. C'est à dire qu'on simule le fonctionnement matériel d'un ordinateur complet. Théoriquement, la virtualisation est une sécurité. En pratique, pas vraiment.
C'est même un facteur de risque maintes fois prouvé : il se trouve que la plupart du temps, quand un site web est hébergé sur une machine virtualisée, le développeur lambda prend moins de précautions car il est dans un faux sentiment de sécurité. Alors qu'il est facile de “s'évader” d'une machine virtuelle vers le serveur réel. Les détails sont abscons, mais en gros, ça consiste à écouter du Édith Piaf au ralenti en regardant une toupie tourner, si elle ne tombe pas, suffit de se pincer et hop ! On y est... Alors que sur une machine réelle, un tel subterfuge ne même à rien sinon à enclencher des signaux d'alarmes et donc appeler le service d'ordre.
Un tel exploit (c'est le terme technique) donne accès à l'entièreté des machines virtuelles hébergées sur le serveur, et donc grille toutes les sécurités matérielles émulées.
Même si votre code n'est pas en cause, vous êtes faillibles.

Alors si un serveur virtuel est moins fiable qu'un serveur matériel, imaginez pour un serveur virtuel dont les bouts et des copies sont partagés entre plusieurs hébergeurs à travers le monde. Parce que le cloud hosting, c'est ça : des clones volatiles de données sensées être uniques, et qui se retransmettent entres-elles dans différentes salles de serveurs, souvent d'un continent à l'autre.
Non seulement tous les clones ne sont pas parfaits à l'instant X (les données mettent du temps à se propager d'un endroit à un autre), mais en plus, il font circuler des éléments aléatoirement entre eux, et pas toujours de la manière la plus sécurisée. Eh oui ! “sécuriser” veut dire “crypter”, et ça coûte cher à la fois en temps de développement mais aussi en processus, que l'on pourrait vendre à encore d'autres clients hébergés.

Mais au-delà de la technique, le problème est aussi juridique. Héberger en cloud, cela veut dire avoir des données hébergées un peu partout dans le monde. Disséminées en France, bien sûr, mais aussi au Royaume-Uni, en Pologne, aux États-Unis, en Russie, en Inde,... et ceci de manière “transparente”, c'est-à-dire sans aucun contrôle sur l'hébergement réel (matériel et géographique).

Ce qui veut dire qu'un site e-commerce d'une entreprise Française peut se retrouver, à l'insu de son plein gré, à transmettre toutes ses données clients à une quelconque administration étrangère, laquelle peut très bien revendre les données à des entreprises tierces (après tout, l'Administration Française revend bien à des bulk-emailers mes adresses e-mails persos puisque je suis inscrit en entreprise. Charge à eux de trier les bases en conformité avec la loi, c'est-à-dire quasi jamais).
Avouez que si ça se saurait, ça ferait une p☹☠☒☭n de mauvaise pub pour votre business...

Prévoir le pire, imaginer le mieux

J'ai des concurrents qui proposent du service e-commerce hébergé en cloud. Le gros problème, c'est qu'à moins de gérer intégralement les grappes de serveurs matériels par eux-même (et cela demande des moyens assez conséquents), ils n'ont aucun contrôle effectif sur ce qu'il s'y passe réellement. Vu qu'ils ont l'air d'avoir une taille salariale comparable à mon service, ça me fait des sueurs froides pour eux. Enfin... surtout pour leurs clients.

Pour dAgence, grâce à mes partenaires techniques, nous appliquons une stratégie de backup et de redondance, mais bien plus conventionnelle. Cela nous permet de gérer la possibilité d'une défaillance matérielle, d'avoir des politiques de sécurité maîtrisées et des scénarii de récupération d'activité.

Plusieurs clients potentiels m'ont jugé “business-rétrograde”, parce que mon service, même s'il en a les possibilités (il dispose d'un système control & command), n'est pas hébergé en cloud, et j'ai expressément expliqué que je refuse un hébergement intégral en cloud. Désolé pour eux, je préfère une bonne politique de sécurité qu'un argumentaire techno-commercial full of buzzwords. Je crois que c'est cette analyse qui me vaut mes clients actuels.

La possibilité de l'hébergement en cloud ne s'envisage que pour des données non-sensibles. Les codes serveurs, la plupart des bases de données, les documents à accès payants sont des éléments dont stratégiquement la dissémination n'est pas souhaitable. Les images (les versions publiques, pas les masters), les données client-side statiques (css, javascript, micro-formats),... peuvent passer dans le cloud.

C'est même fortement conseillé quand votre site commence à avoir un trafic très important, et c'est ce que l'on appelle le CDN. Akamai le fait très bien depuis plus d'une dizaine d'années, bref inutile de dire que c'est pas une idée très neuve.

L'hébergement cloud peut être un avantage stratégique, tout comme la cause d'immenses pertes. La hype n'autorise pas n'importe quoi, notamment l'absence de réflexion.

Même le Dimanche

Da Scritch — 2011-04-03T20:04:00+02:00

j'arrive pas à me délogguer de mes consoles ssh
Webdev

Pour nos sites persos aussi, il faut des entretiens. Et là, c'est notre colocation collective (parce qu'en plus de moi et de mon amour, il y a aussi Zorel, Sveetch, LongHairedGuru, LiNuCe, Chrisix, et tous ceux que j'oublie) qui a profité d'une solde pour prendre un serveur encore plus gros à moindre coût.

Sauf qu'il faut aussi transférer tous nos documents, et les quasi 10Go de podcasts, photos, etc... présents rien que sur dascritch.net avant le switch final. Et là, c'est...

My Inception À Moi

(Zorel a insisté sur les remote).

① J'ouvre une console sur mon téléphone, qui ② se connecte à mon pc de bureau, qui ③ se loggue en ssh à une machine proxy du datacenter, de là ④ qu'on se loggue en ssh à notre futur serveur lequel ⑤ récupère par ssh/sftp les données du site web actuel.
Et en même temps, je me paie le luxe de consulter la rapidité du transfert (8,49 Mo/sec), en faisant la queue avec les oignons et le Bourgogne.

Si ça, c'est pas du Dimanche de gros nerd. J'avoue que je vais pas aussi loin pour nos propres serveurs pros.

Enfoncé, Baboulinet. Ouahahaha

Hihihihi, j'ai le kiki tout dur...

Badges

Da Scritch — 2011-01-19T20:23:00+01:00

Je n'ai pas fait mon service militaire, donc ça ne peut que me rappeler mes années boy-scout, mais voici mes décorations HTML5 certifiées norme W3C.
Webdev

HTML5 est le mot hyper-hype en ce moment. Faut dire qu'on oublie qu'en plus de la sémantique HTML, il intègre aussi CSS3, ECMA script 5, DOM level 3 SVG, les micro-formats, etc... Et, il est important de le noter, on ne parle que des technologies côté navigateur (clients), pour les serveurs webs, je parle d'autres langues (Apache, PHP, Bash, expressions régulières, bases de données,...) .
Donc selon la classification du W3C accompagnant le nouveau logo du HTML5, voici mes compétences supposées dans la matière :

C'est totalement partial, il y a un manque très important qui me tient à coeur (le volet sécurité client, qui il est vrai n'est pas encore standardisé) et mon niveau varie fortement selon les compétences. Je dois reconnaitre qu'une expérience récente m'a rendu particulièrement humble. En plus d'être en indépendant, je développe dAgence, une application d'hébergement (avec Nicolas Guilhou et Kairn) dont le backoffice est conçu pour être totalement HTML5 depuis 2 ans à l'origine...

Pour ceux qui trouvent le logo W3C moche (des goûts, des #rrggbbaa), ils peuvent en ricaner en faisant d'excellentes parodies.

Pour la petite histoire, et ce que je ne raconte pas dans mon profil LinkedIn, mon premier badge de boyscout, c'était “cuisinier”. Là aussi, maintenant, j'ai de quoi être humble...

Comment accélérer internet

Da Scritch — 2009-08-17T21:14:00+02:00

Tour d'horizon complet sur les différentes technologies qui permettent d'accélérer internet, et comment l'appliquer facilement chez le particulier.
Webdev

De plus en plus de grands spécialistes des réseaux de télécommunications s'inquiètent : Internet est à deux doigts de l'implosion par saturation des débits. Il est temps de trouver des solutions pour alléger les grands tuyaux.

Or la plupart des méthodes d'accélérations sont déjà parfaitement rodées, du temps où le goulet d'étranglement était la liaison par modem (et encore... 56kbds, c'était pour les riches), et où Intel accélérait internet grâce à son Pentium IV (AMD avec XP).

Notre époque exigeant une plus grande réactivité sur Internet, il est important d'adopter dès à présent des méthodes d'accélérations sérieuses et terriblement efficaces.

Le préchargement par média solide

Cette technique consistait à distribuer dans les boîtes aux lettres un support CD-ROM contenant les logiciels qui avaient déjà leurs interfaces fournies. Je pense notamment à AOL, Infonie, etc...
Soit installer un logiciel de navigation qui contient déjà tous les éléments graphiques nécessaires de l'internet, qui à l'époque pouvait tenir presque entier en un seul CD-ROM. Inconvénient : l'internet en question est très très limité (horoscope, foot, assistance technique du FAI).

À l'heure actuelle, ce système a perduré dans les multiples logiciels gracieusement préinstallés par les fabricants de PC (d'ailleurs, ils se font payer pour ça). Ainsi, il est tout à fait normal qu'un driver d'imprimante vienne avec Real Player, un antivirus, un logiciel de retouche photo, des logiciels de bannières publicitaires impromptues, Skype, Quicktime, Itunes, et deux logiciels de poker en ligne.

La compression côté serveur

Cette technologie dépend de la maîtrise technique du webmaster (métier supérieur à web-designer et web-développeur), puisqu'il faut compresser les images .bmp en .jpeg, les sonores en .wav en .mp3, les .doc en .pdf et les vidéos familiales .dvd.iso en .rip.divx.avi avant de le mettre sur serveur.

Les systèmes serveurs professionnels comme Apache proposent aussi des recompressions à la volée avec compress (méthode obsolète) et zlib. Néanmoins, l'activation n'est pas forcément acquise, et demande une maîtrise très avancée dans l'administration serveur.

Le proxy

Le proxy est une technologie de cache intermédiaire qu'on retrouve notamment dans les entreprises, le proxy permet de garder en mémoire la galerie photo consulté par tous les employés de l'entreprise, sans plomber sa liaison spécialisée par les multiples requêtes. Le document est chargé une fois, redistribué à chaque salarié qui lui en fait la demande.

Un réglage fin est la durée du proxy avant rafraichissement, établie souvent de manière arbitraire. Lire incomplètement la documentation, associé à une mauvaise compréhension peut aider à d'importantes évolutions de communication entre l'entreprise et ses partenaires. Par exemple le proxy du réseau intranet du groupe NRJ ne rafraichissait son contenu que toutes les 4h (c'était y'a 4 ans, depuis, y'a prescription...). L'inconvénient était que les communications étaient parfois difficiles, voire violentes entre les commerciaux de NRJ Régies (qui n'étaient pas awares des choix technologiques de la direction informatique de leur groupe) et les graphistes des fournisseurs.

Le filtrage

Le proxy permet aussi d'ajouter une fonction de filtrage, ce qui permet de dégager du débit utile en rejetant ce qui n'est pas souhaitable.

Toute grande entreprise le sait :
En interdisant à ses employés de charger des contenus licencieux comme par exemple pornographie, para-médecine, bannières publicitaires, youtube, blogs, sites syndicaux, le débit général de ses tuyaux devient nettement moins encombré, permettant aux directeurs commerciaux de faire du facebook sur viadeo.

Un exemple pratique : l'Iran. Sur recommandation nord-coréenne (forte d'une expérience de plus de vingts utilisateurs !), les autorités techniques de ce pays a banni sites pornographiques mais aussi Twitter, Facebook et les blogs, l'internet Iranien a été fortement accéléré, tout en remettant au travail les étudiants devenu délinquants à cause de la décadence occidentale.

Heureusement, la France compte justement adopter ces mesures hygiéniques grâce à la loi Hadopi.

La recompression côté opérateur

En plus d'avoir un cache côté ordinateur client (c'est à dire le votre) et côté opérateur (comme celui de l'intranet d'une entreprise), AOL puis Neuf proposaient de recompresser les images et les contenus (la fameuse technologie TopSpeed , hélas blâmée pour un disfonctionnement célèbre). Par exemple, si un jpeg était envoyé, le proxy recompressait cette image en gif (généralement en moins de 64 couleurs, d'où l'utilité de travailler qu'en palette websafe), les .mp3 en .rm et les html des sites pornos en pages NetNanny.
Cette méthode est malheureusement oubliée.

Une technologie équivalente est utilisée pour les téléphones qui tentent vainement de naviger sur internet. Par exemple Opera Mini, ou le traducteur wap de Google.

le préchargement de contenu aux heures creuses

Un peu comme pour la machine à laver que vous mettez en route après 22h30, histoire non seulement d'emmerder profondément le voisin mais aussi du tarif réduit de l'ÉDF.

Comment ça marche :

il y a le <link rel="prefetch" />.
Par exemple, la page de garde de mon site personnel fait précharger à votre navigateur (si celui-ci est suffisamment moderne) les archives récentes de la section blog lorsqu'il a fini de charger entièrement les éléments de la page.
C'est une technologie très avancée que je ne peux révéler ici.

il y a aussi le flux rss. Ce qui permet d'avoir à sa disposition l'ensemble des textes d'une publication régulière. Par exemple, le flux rss de mon propre blog.

Certains sites fonctionnent de manière encore plus astucieuse en conjonction avec le protocole BitTorrent. Par exemple The Pirate Bay propose un lien qui permettra à votre client BitTorrent de télécharger nuitemment vos films de vacances au format .rip.divx.avi , ce qui permet de les lire nettement plus vite (et en meilleure qualité) que vos mêmes films hébergés sur des plateformes douteuses comme Youtube ou Dailymotion.

Il arrive aussi que des proxies (pluriel de proxy) d'entreprises fassent un préchargement lors de la première visite d'un site. Par exemple, le proxy de l'intranet de Carrefour télécharge l'ensemble du site dascritch.net (6 Go de sonores inclus) si un employé a tapé une requête google qui l'a emmené sur une de mes pages.
Avantage : l'ensemble de la saison V du Supplément Week-End pourrait être immédiatement écouté par l'ensemble des salariés du groupe hypermarché.

la prédiction de contenu

Les études statistiques démontrent de nombreuses répétitions de contenus, notamment dans les forum et sur IRC. Il est prouvé que « Lâchez vos coms' » induit automatiquement la phrase « Preum's ». Ou encore « lol je trouv ça ou ? » qui invariablement est suivi de « DTC ».

Par exemple, le pseudo “Lolita13” (ville : Marseille) sur le chat de Skyrock entrainera forcément une réponse automatique : « coucou, tu veux voir ma bite ? ».

L'étude de ces algorithmes a enfin été autorisé depuis la réforme du Code Napoléon en 1994, mettant fin à un âge d'obscurantisme moyen-âgeux en France.
Les détracteurs jugent les prédiction empiriques, car nul ne peut prévoir à 100% d'exactitude de quoi l'avenir sera fait. Néanmoins, on peut aisément deviner 50% du contenu de l'Internet :

Un technologie parfaitement maitrisée : le chat.

Car il se trouve que Internet est composé à 50% de chats. Sur ce blog, nous avions interrogé un spécialiste de la question, contredit par des fâcheux qui n'y connaissent rien (temps de parole oblige, on les a écoutés).

Bref, un chat permet de prédire une bonne partie du contenu d'Internet.

Notre chatalogue :

Note pour les jeunes hommes actuellement célibataires : Installer un chat réel augmente les chances de télécharger une vraie fille en 3D chez soi. J'ai même désinstallé Meetic.

Eh oui... l'opération “Casons les Mini-Pouss 2” continue.

ADOPTEZ UN MINIPOUSS (une puce offerte)

Previously in Casons les MiniPouss :

Et le tag Poussière