Flash et son bug des fenêtres pas redimensionnables

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.

Flash et son bug de redimensionnement des fenêtres

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.

Gmail et les marges sous les images

Le bug des marges avec les images dans Gmail

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.

Le robots.txt de Last.fm est drôle

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 !

Droid X et son interface mal polie

Le Droid X de Motorola

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.

Le W3C aime Pixar

Le W3C aime Pixar... et moi aussi !

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>

Le navigateur le plus rapide

Les origines de la balise <blink>

La Redoute touche le background

Du code HTML qui fait P.E.U.R.

Bonjour tout le monde !