HTeuMeuLeu

Nous sommes le 31 décembre 2010, et nous voici à l’heure quasi-obligée du bilan. L’année dernière, au même moment, je ne savais pas ce qu’était une vuvuzela, je ne jouais pas à Minecraft, je n’avais pas de compte Twitter ni de blog, et encore moins d’iPad.

Côté intégration web, 2010 a été l’arrivée massive d’HTML5, CSS3 et autres joyeuses nouveautés. IE6 passe doucement sous la barre des 5% d’utilisateurs, IE7 sous la barre des 10%, et l’avenir s’annonce presque heureux si on oublie quelques instants IE8 et IE9. Pour la première fois, j’ai utilisé abusivement du CSS3 dans des projets clients, ainsi que certaines API HTML5 (File, Drag&Drop) dans des projets internes (promis je vous en dit plus l’année prochaine). J’ai aussi pour la première fois réalisé des wireframes complets de sites web en HTML, en oubliant définitivement la case Powerpoint. Et en cette toute fin d’année, j’ai travaillé sur des maquettes graphiques de grands comptes directement dans le navigateur, en mettant quasi-définitivement Photoshop de côté. Bref, je sens qu’il fera bon être intégrateur en 2011.

Reste que si la course au HTML5 est lancée, et que les fabriquants de navigateurs utilisent ce terme abusivement pour vanter les mérites de leurs dernières betas, l’année est restée relativement calme au niveau des sorties officielles de versions de navigateurs. Calme ? Oui, mais pas pour tout le monde…

Le 31 décembre 2009, Chrome était en version 3. Le 31 décembre 2010, Chrome est en version 8. Et les betas des 9 et 10 sont déjà bien avancées. Et tout ça sans aucun retéléchargement d’exécutable et réinstallation complète du navigateur (hein Firefox), et même sans aucun redémarrage complet de la machine (hein IE9 Preview). Du coup, ce versioning n’a plus vraiment de sens : il aura fallu 5 ans à Microsoft pour passer d’IE6 à IE7, et seulement 2 mois à Google pour passer de Chrome 6 à Chrome 7. Mais les résultats sont là pour les internautes : Chrome est passé de 5% d’utilisateurs à environ 15%, là où Firefox stagne depuis deux ans autour de 25%, et Microsoft continue sa dégringolade de 55% à environ 45%.

Sur ce, je souhaite une très bonne année à mes 3 ou 4 lecteurs. Et si vous devez prendre une résolution pour 2011… dites au moins 1920×1280. Ca fait 10 ans que tout le monde fait la blague avec 1024×768, il serait peut être temps de vous mettre à jour, vous aussi.

PS : Joyeux Noël/Kwanza/Hannukah et bonne année !

Pour Halloween, HTML, CSS et Javascript ont décidé de se déguiser.

HTML s’est déguisé en Javascript :
<div id="citrouille" onclick="alert('Bouh !');"></div>


Javascript s’est déguisé en CSS :
var citrouille = document.getElementById('citrouille');
citrouille.style.color = "orange";
citrouille.style.backgroundColor = "black";


Et CSS s’est déguisé en HTML :
#citrouille:before {
content: "Joyeux Halloween !";
}


Joyeux Halloween à tous !

Cet article est la traduction de Happy Halloween chez CSS-Tricks. Je n’ai aucun mérite pour l’ingéniosité de ce code. Je suis même super jaloux en fait de pas avoir trouvé ça par moi même…

La semaine dernière, j’étais en vacances. Du coup, plus de Twitter, Reader, Gmail, etc… Du coup, j’ai passé mon dimanche après-midi à tenter de rattraper tout ça. Plutôt que de pourrir la timeline de mes gentils followers sur Twitter, voici un bref résumé des articles qui m’ont plu et que j’aurais sans doute Tweeté.

Pour commencer, une citation toute bête vue, mais tellement vraie, chez l’excellent blog de 37signals :

L’idée qu’on puisse faire un site web sans connaître HTML me retourne la tête, car c’est comme construire un immeuble sans savoir ce qu’est une brique. Vous pouvez être un magicien des CSS ou vous pouvez connaître les bases, mais vous devez au moins avoir un savoir de base sur vos matériaux de construction.

Voir le reste des articles

Ce matin, tout le monde s’est réveillé en découvrant sur Google un logo pour le moins rebondissant. Ce week-end, Google avait déjà lancé un premier logo animé à l’occasion du 25ème anniversaire de la découverte des molécules de carbone. Sauf qu’aujourd’hui, tout le monde se demande en quel honneur on a le droit à ce logo animé ? Tellement que « google logo » et « google balls » sont en ce moment les 2 premiers sujets des « Hot trends » sur Google.

Certains pensent que ce logo est là pour vanter les mérites d’HTML5. Sauf que ce logo n’a rien à voir avec HTML5. Quelques divs et des border-radius en CSS3 pour recréer le logo, et un bon gros javascript pour animer le tout, et le tour est joué. D’autres pensent que c’est pour l’anniversaire de John Dalton, à l’origine des tests permettant de détecter le daltonisme. Sauf que son anniversaire, c’était hier.

De mon côté, je pense que Google en profite surtout pour démontrer la rapidité de son navigateur Chrome. En effet, en se cantonnant à des technologies déjà en place depuis des années (HTML et Javascript), Google démontre la rapidité d’exécution de son moteur Javascript. Si l’animation fonctionne également sur Safari, Internet Explorer 8 et Firefox, ces derniers n’offrent pas une animation aussi fluides. En mai dernier, Google avait déjà créé la panique chez les utilisateurs de Firefox avec son logo Pacman, jouable et sonorisé. Sur Firefox, les sons du logo continuaient de jouer même lorsque la fenêtre ou l’onglet étaient en arrière plan. Le site de support de Firefox avait été submergé de messages d’incompréhension.

Vendredi 27 août dernier, nous avons pu fêter les 9 ans d’Internet Explorer 6. Enfin, fêter, c’est un bien grand mot. Ce serait plutôt comme l’anniversaire d’un arrière grand-père super riche dont on n’attends qu’une chose… Et à l’heure où beaucoup prônent la mort d’IE6, il est l’heure de faire les comptes. Avec plusieurs centaines de milliers de développeurs web à travers le monde, avec plusieurs heures par semaine à s’arracher les cheveux, combien d’heures la planète entière a-t-elle perdue sur IE6 ? Découvrez la réponse en cliquant sur la grand-mère.

Combien d’heures ont été perdues sur IE6 ?

La semaine dernière, j’ai rencontré une joyeuseté de Firefox. A priori, il y a un code magique qui fait que sur une liste avec des puces carrées, ces dernières ne sont pas toujours vraiment carrées. Une fois sur [INSERT_RANDOM_NUMBER_HERE], on se retrouve avec un semblant de carré ratatiné (un rectangle, quoi). Peu importe la doctype, seul le code suivant suffit.

<style>
  li { list-style:square; }
</style>
<ul>
  <li>Un</li>
  <li>Deux</li>
</ul>

Je n’ai pas trouvé de solution pour corriger ce problème. Par contre, la bonne nouvelle c’est que c’est corrigé sur les nouvelles beta de Firefox 4. C’est déjà ça.

Si comme moi vous faites du Flash de temps en temps, vous vous êtes sûrement déjà arraché les cheveux avec certaines horreurs de l’interface du logiciel d’Adobe. Hier, c’est un de mes collègues qui a rencontré le problème suivant sur lequel j’étais déjà tombé.

Parfois, certaines fenêtres contextuelles (comme la console de sortie, ou la fenêtre de code) deviennent anormalement hautes, et dépassent le bas de l’écran. Il est alors impossible de les redimensionner car le coin bas-droite de la fenêtre est désormais inaccessible. Sous Mac, avec Flash CS3, on peut facilement redimensionner la fenêtre par en haut. Par contre, sous Windows 7, avec la CS5, c’est à priori impossible. Vous aurez beau cliquer sur tous les boutons, masquer ou réduire la fenêtre, rien n’y fait. Rien ? Si vous suivez les étapes suivantes, et uniquement dans ce cas là, vous pourrez vous en sortir comme par magie. Vous avez le droit de devenir rageux au passage.

C’est bien sûr totalement la qualité attendue d’un logiciel professionnel qui coûte 837€. Et ça encore, c’est rien comparé aux énormes erreurs qui jonchent tous les solutions de la suite Adobe, dont vous pouvez vous délecter sur l’excellent blog Adobe UI Gripes.

Depuis mai 2010, Gmail affiche une marge sous chaque image. C’est bien embêtant puisqu’un e-mail est composé principalement d’images, de tableaux et d’offres pour du viagra. Heureusement, il y a une solution toute simple proposée entre autres par CampaignMonitor. Il suffit d’ajouter sur chaque image concernée un style="display:block;" directement dans votre balise img. Vous obtiendrez alors quelque chose comme ça : <img src="ch34p_v14gr4.jpg" style="display:block;" />. Tadam !

Ce problème n’est pas directement lié à Gmail, mais à HTML5. En effet, en passant une page en doctype HTML5, les navigateurs affichent différemment les images, probablement en prenant en compte une hauteur de ligne (line-height) différente.

En plus d’être un très bon service, le site Last.fm fait preuve d’humour, jusque dans son fichier robots.txt. Après quelques règles classiques interdisant l’accès à certaines rubriques du site, on y trouve les 3 lignes suivantes.

Disallow: /harming/humans
Disallow: /ignoring/human/orders
Disallow: /harm/to/self

Il s’agit bien entendu d’une référence aux Trois lois de la robotique énoncées par Isaac Asimov. Son auteur, Jonty Wareing, a officialisé sur Twitter la découverte de son easter-egg il y a quelques heures. Le code était en ligne depuis 5 mois !

Samedi dernier, un employé de 37Signals a posté les captures d’écran ci-dessus avec le commentaire suivant.

Le nouveau téléphone Android de Motorola tronque le texte « Text Messaging » en « Text Messagin… » et « Text Mess.« 

Si le détail est déjà plutôt embarrassant en soi (pourquoi afficher trois points de suspension à la place de la lettre g ? Il n’y aurait pas comme un problème de… « calcul dans la formule » ? Hinhinhin), les commentaires du blog (qui parle régulièrement de design et d’ergonomie) ont vite tourné en jeu des X erreurs. Et le résultat me laisse pantois :

1. L’icône de l’application de messagerie n’est pas vraiment appropriée. Des SMS et MMS sont des messages courts, utilisés pour des conversations rapides. Rien à voir avec une enveloppe et une lettre papier, qui en plus corresponds habituellement à des e-mails.
2. L’application s’appelle « Text Messaging » (verbe d’action) alors que toutes les autres applications portent des noms communs.
3. L’icône de l’application « Music » ressemble à une machine à laver.
4. L’icône du signal réseau tout en haut a l’air d’être tombée, contrairement aux autres icônes qui sont bien alignées verticalement.
5. Un internaute s’est même demandé comment le téléphone avait pu perdre la moitié de sa batterie en 7 minutes ! La réponse est simple : le téléphone est en charge, et l’icône est animée, se remplissant et vidant sans arrêt. Cette animation n’a donc aucune utilité, puisqu’elle n’apporte aucune indication sur l’avancement du chargement.

J’ai zappé les commentaires qui tournaient au débat puéril « iPhone vs. Android ». Mais pour moi, le résultat est là : en permettant à n’importe qui de modifier son système d’exploitation, Google permet aussi à des marques comme Motorola de commercialiser un OS mal fini, mal poli, et qui va à l’encontre de règles basiques d’ergonomie d’interfaces utilisateurs.

Il y a quelques mois, j’étais tombé sur une surprise amusante en lisant les spécifications HTML5 du W3C. Dans la description de la balise br, le W3C donne l’exemple d’utilisation suivant :

<p>P. Sherman<br>
42 Wallaby Way<br>
Sydney</p>

Mon cerveau a tout de suite fait tilt ! Cette adresse, c’est celle répétée sans arrêt par Dorie dans Le Monde de Nemo. Wouhou ! Le W3C a donc un peu d’humour et de référence culturelle !

En parcourant le reste des spécifications HTML5, j’ai trouvé d’autres références à Pixar. Dans les exemples d’utilisation de la balise li, on retrouve une liste d’un « Top 10 des films de tous les temps » dans laquelle figurent 8 films de Pixar. Beau palmarès !

<figure>
<figcaption>The top 10 movies of all time</figcaption>
<ol>
<li value="10"><cite>Josie and the Pussycats</cite>, 2001</li>
<li value="9"><cite lang="sh">Црна мачка, бели мачор</cite>, 1998</li>
<li value="8"><cite>A Bug's Life</cite>, 1998</li>
<li value="7"><cite>Toy Story</cite>, 1995</li>
<li value="6"><cite>Monsters, Inc</cite>, 2001</li>
<li value="5"><cite>Cars</cite>, 2006</li>
<li value="4"><cite>Toy Story 2</cite>, 1999</li>
<li value="3"><cite>Finding Nemo</cite>, 2003</li>
<li value="2"><cite>The Incredibles</cite>, 2004</li>
<li value="1"><cite>Ratatouille</cite>, 2007</li>
</ol>
</figure>

L’auteur avait apparemment un gros coup de coeur pour Ratatouille. Pas étonnant, du coup, qu’on retrouve le film cité un peu plus loin dans les exemples d’utilisation de la balise img :
<article>
<header>
<h1>Ratatouille wins <i>Best Movie of the Year</i> award</h1>
<p><img src="movies.png" alt="Movies"></p>
</header>
<p>Pixar has won yet another <i>Best Movie of the Year</i> award,
making this its 8th win in the last 12 years.</p>
</article>

Si vous avez téléchargé un des principaux navigateurs récemment, vous avez sûrement rencontré quelque chose comme ça…

Un peu de modestie, ça ne fait jamais de mal. D’autant plus quand il se trouve que, comme Google Chrome, on est le navigateur le plus rapide au monde.

PS : Cet article a été largement inspiré par le billet « Navigateurs web, qui croire ? » publié par Romain Commandé, « jeune ingénieur développeur ».

Cet article est la traduction d’un billet rédigé par Louis J. Montulli II, « The origins of the <blink> tag« . Dans les années 90, il travaille chez Netscape et est à l’origine de nombreuses innovations du web qui deviendront par la suite complétement omniprésentes :  les cookies, les proxy HTTP, les modes sécurisés HTTPS via SSL… Il est également à l’origine de la balise <blink>. Voici son histoire.

Je suis largement crédité comme l’inventeur de la balise <blink>. Pour ceux d’entre vous qui sont relativement nouveaux sur le web, la balise <blink> est une commande HTML qui permets de faire clignoter du texte, et beaucoup, beaucoup de gens trouvent son comportement particulièrement agaçant. Je ne vais pas renier son invention, mais son histoire est un peu plus complexe que ce qui est raconté habituellement.

En 1994, j’étais un des ingénieurs fondateurs chez Netscape. Avant ça, j’avais écris le navigateur Lynx, qui précédait tous les autres navigateurs populaires à cette époque. Lynx étais et est toujours un navigateur en mode texte uniquement et est toujours couramment utilisé en mode console sous des machines UNIX. Chez Netscape, nous développions des logiciels qui avaient une interface graphique et qui pouvaient ainsi permettre d’afficher beaucoup plus de styles de textes, de mises en page ainsi que des images et autres médias. Nous avons passé beaucoup de temps à penser au futur du web et aux nouvelles technologies qui proposeraient de nouveaux types de documents, d’applications et d’utilisations. Quelques exemples de ça seraient les tableaux HTML, le mode SSL pour des communications sécurisées, des Plugins pour  réaliser des extensions, et JavaScript pour permettre de faire du HTML dynamique.

A un moment à la fin de l’été, j’ai pris une pause avec d’autres ingénieurs et nous sommes allé dans un petit bar local sur Castro street à Mountain View. Le bar s’appelait le St. James Infirmary, et à l’intérieur il y avait entre autres une statue de Wonder Woman de plus de 9m de haut. A un moment dans la soirée, je parlais du fait que je trouvais ça triste que Lynx n’allait pas pouvoir afficher la plupart des extensions HTML qu’on était en train de proposer. J’ai aussi fait remarqué que le seul style de texte que Lynx pourrait afficher vu son environnement serait du texte clignotant. On a bien rigolé à l’idée d’avoir du texte clignotant, et on s’imaginait faire clignoter ci et faire clignoter ça, tout en sachant à quel point tout ça étais absurde. Après ça, la soirée s’est déroulée normalement, avec une bonne quantité de boisson, et ma rencontre avec une fille qui deviendra par la suite ma femme.

Samedi matin pointa le bout de son nez, et je me rendais au bureau pour ne découvrir rien d’autre que du texte clignotant. Il étais sur l’écran, clignotant dans toute sa splendeur, et dans le navigateur. Comment c’est possible, vous allez me demander ? Il se trouve que l’un des ingénieurs a tellement aimé mon idée qu’après avoir quitté le bar un peu après minuit, il est retourné au bureau et implémenta la balise <blink> en une nuit. Il étais toujours là le matin, et il en étais plutôt fier.

A l’époque il y avais 3 versions de Netscape qui tournaient sur UNIX, Windows et sous Mac. Pendant une douzaine d’heures, le clignotement était réservé uniquement à la version UNIX, mais il n’a pas fallu longtemps pour qu’il se propage sur les versions Windows puis Mac. Je me souviens m’être dit que ce serait sûrement un easter egg inoffensif, que personne n’utiliserait vraiment. Mais j’avais totalement tort. Quand on a sorti Netscape Navigator 1.0, on n’a pas documenté la balise <blink> d’aucune façon, et pendant un moment c’est resté sous silence. Mais à un moment, d’une manière ou d’une autre, la connaissance occulte du clignotement a fuit vers le monde réel, et tout à coup, tout clignotait. « Regardez ici », « Achetez ça », « Découvrez ceci », le tout clignotant. De grosses publicités clignotaient dans toute leur splendeur. C’était un peu Las Vegas, sauf que c’était sur mon écran, et qu’il n’y avais aucun moyen de le désactiver.

Finalement, tout a été dit, la plupart sous la forme de messages incendiaires sur différents forums de discussion, et on se souviendra probablement de la balise <blink> comme la plus détestée de toutes les balises HTML. Je tiens à déclarer publiquement qu’à aucun moment je n’ai écris du code ni même sérieusement plaidé en faveur de la balise <blink>. C’est vrai que j’en suis la source d’inspiration, mais c’était vraiment plutôt pour une expérience à imaginer. Je ne vais pas balancer les noms des gens qui ont codé cette ignoble chose. S’ils veulent se mettre en avant, ils le feront d’eux-même. Au final, la seule chose dont je suis vraiment triste, c’est que Lynx n’a jamais eu de clignotement. Je suis également triste de préciser que le St James Infirmary a complétement brulé en 1997. C’était un super endroit où se retrouver, et ça me manque.

Clignotement votre,

:lou

Depuis environ 1 an, La Redoute a la bonne idée d’intégrer des images très larges en fond de site. C’est le cas par exemple en ce moment pendant les Soldes. Si le résultat est plutôt chouette sur un écran dans une résolution inférieure à 1500px de large, c’est tout de suite moins sympa dès qu’on dépasse cette résolution. Et si on en croit NetMarketShare, près de 10% des internautes seraient dans des résolutions supérieures. On pourrait alors comprendre qu’il n’est pas nécessaire pour La Redoute de perdre du temps pour une si petite part de ses visiteurs. Sauf que ça ne prendrait que 10 minutes de :

1. Créer une image d’1px de large à partir d’un des côtés de l’image existante.
2. Raccorder avec l’image principale des 2 côtés avec l’image de 1px répétée.
3. Mettre l’image d’1px en background de la balise <html>.
4. ?
5. Profit.

Cette info date un peu, mais elle m’avait fait sourire à l’époque, alors j’ai pensé bon la ressortir pour ce premier billet. Fin 2008, pour préparer la sortie du jeu F.E.A.R. 2, les développeurs de Monolith avaient préparé une petite vidéo de teasing. Au début de cette vidéo, on y voit l’écran d’un informaticien en train de coder en HTML, dans une syntaxe digne des années 90. Le jeu porte bien son nom : effectivement, ça fait P.E.U.R.

« Je m’appelle Rémi, et je suis sans font-family ! »

Bonjour à tous ! Je suis intégrateur web et voilà le genre d’humour dont je suis capable. Forcément : 10 ans après avoir codé mes premières pages HTML, et à en vivre depuis 5 ans, au bout d’un moment, ça attaque le cerveau. HTeuMeuLeu, c’est donc l’occasion pour moi de partager mes expériences, mes conseils, mes « pro-tips » comme on dit, mais aussi mes coups de gueule, mes dénonciations, et mes crises de nerf. Bref, la vie quotidienne d’un intégrateur web, passionné mais un peu grincheux quand même.

J’espère donc que ce blog vous plaira. Et sinon, vous n’avez qu’à aller vous %#& @£!§$.

A bientôt, donc !