Les articles du mois de juillet 2010

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 ».