HTeuMeuLeu

En janvier 2013, le monde entier découvrait avec effroi que le webmail Outlook.com (dans sa version desktop et mobile) supprimait systématiquement les propriétés CSS float et margin (et ses dérivées margin-top, margin-left, etc.). C’est fortement dommage, parce que des flottants et des marges, ça peut éventuellement servir en intégration (doux euphémisme).

Mais tout récemment, un tweet de Mark Robbins m’a mis la puce à l’oreille sur une faille insoupçonnée de ce filtrage d’Outlook.com. En fait, Outlook.com supprime simplement toute les propriétés float et margin. Mais pas Float et Margin. Ni floaT et margiN. Ni FlOaT et MaRgIn. Ou FLOAT et MARGIN. Vous avez compris l’idée : simplement en changeant la casse de la propriété, on arrive à passer au travers du filtrage d’Outlook.com. La syntaxe des propriétés CSS n’étant pas sensible à la casse, cela ne pose pas de problème de compatibilité ailleurs.

L’attribut srcset est un nouvel attribut pour les balises images décrit dans la spécification de HTML 5.1. Il permet de résoudre en partie l’une des plus grosses problématiques de l’intégration de sites responsive : les images.

Venant en complément de l’attribut src habituel d’une balise <img>, l’attribut srcset permet de spécifier une liste d’images à afficher selon des critères particuliers. L’immense avantage, c’est que c’est le navigateur qui décide quelle image afficher, et que seule cette image sera téléchargée.

Son implémentation a déjà commencé depuis février dernier dans la version 34 de Chrome, mais limitée à la sélection d’image selon la densité de pixels de l’écran d’un appareil. Ainsi dans le code suivant, je peux préciser le chemin d’une image optimisée pour des appareils avec une densité de pixels à l’écran d’au moins 2 (aussi vulgairement appelés « écrans rétina »).

<img src="default.jpg" srcset="hidpi.jpg 2x" />

C’est déjà un bon début. Mais ce qui est vraiment bien, c’est que les navigateurs commencent maintenant à implémenter la suite, à savoir la sélection d’images selon le viewport. C’est en cours d’implémentation dans Chrome, Opera, et dans Firefox derrière un flag. Et surtout, ce sera activé par défaut dans Safari 8 sur iOS 8 et OS X Yosemite. Cela signifie que d’ici la fin de l’année, la majorité des navigateurs supporteront srcset. (Pour Internet Explorer, c’est pour l’instant « en considération ».)(On me fait signe que la version beta actuelle de Safari 8 ne supporte que la première partie de la spécification, et pas la sélection d’images selon le viewport).

Il y a donc de quoi être tout excité par cette nouveauté. J’ai fait mumuse avec srcset ces derniers jours, et voici que j’ai appris et compris.

Tout d’abord, pour tester tout ça, il va falloir installer ou configurer les navigateurs compatibles. Pour avoir Safari 8 sur iOS, vous pouvez télécharger la beta de Xcode 6 dans laquelle vous aurez la dernière version du Simulateur iOS. Pour avoir Safari 8 sur OS X, vous pouvez télécharger la bêta publique de OS X Yosemite.
Pour Chrome, vous pouvez télécharger Chrome Canary (actuellement en version 38).
Pour Firefox, vous pouvez télécharger Firefox Nightly (actuellement en version 34). Puis il faudra activer le support de srcset à la main. Pour ça, il faut aller à l’adresse about:config, chercher les préférences dom.image.srcset.enabled et dom.image.picture.enabled, et les passer toutes les deux à la valeur true.

Nous sommes prêts pour tester. Pour commencer, nous allons préciser dans srcset une liste de quatre images : small.png (320×240), medium.png (640×480), large.png (1024×768) et xl.png (1920×1080). Si le navigateur ne supporte pas srcset, c’est l’attribut src qui prendra le relais avec l’image default.png (1024×768). Voici le résultat de ce premier exemple avec le code suivant :

<img src="default.png" srcset="small.png 320w, medium.png 640w, large.png 1024w, xl.png 1920w" alt="Test" />

Comme vous pouvez le constater, chaque image est accompagnée d’un « descripteur w » (dixit la spécification, en opposition au « descripteur x » utilisé lui pour la sélection selon la densité de pixels d’écran). J’ai eu beaucoup de mal à comprendre la signification de ce descripteur, notamment à cause d’article comme celui publié chez Alsacréations (désolé Geoffrey) qui confondent descripteur w et largeur de viewport. À ce stade, il faut bien comprendre qu’il n’y a aucun lien entre les deux. Le descripteur w est une indication laissée au navigateur sur la largeur en pixels de l’image correspondante.

Là où la spécification de srcset est surprenante, c’est dans la façon de décrire comment un navigateur va choisir l’image à afficher :

L’agent utilisateur va calculer la densité de pixel réelle de chaque image à partir du descripteur w spécifié et des tailles de rendus spécifiées dans l’attribut sizes. Il peut ensuite choisir n’importe quelle ressource en fonction de la densité de pixels de l’écran de l’utilisateur, de son niveau de zoom, ou peut-être d’autres facteurs comme les conditions de réseau de l’utilisateur.

En gros : le navigateur fait ce qu’il veut. Cela signifie que Chrome pourrait décider de choisir l’image la plus petite si la connexion est un peu lente, alors que Safari pourrait au contraire décider de systématiquement choisir l’image la plus grande. Bienvenue dans un futur nouvel enfer du responsive !

À noter qu’actuellement, Firefox ne va charger une image qu’au chargement initial de la page, mais ne rafraîchira pas son affichage au redimensionnement de la fenêtre. La dernière version de Chrome Canary gère très bien ça au redimensionnement (et au passage, la nouvelle vue device mode des outils de développement de Chrome est vraiment bien foutue).

Les choses sérieuses vont commencer en introduisant l’attribut sizes. Celui-ci permet de spécifier la largeur d’affichage de l’image selon des points de rupture. Dans l’exemple ci-dessus, les images vont toujours par défaut prendre 100% de la largeur du viewport. La spécification explique clairement que la valeur par défaut de l’attribut sizes est de 100vw et que dans ce cas, l’attribut peut-être omis. Malheureusement les développeurs de chez Mozilla ont du s’arrêter de lire la spécification juste avant ce paragraphe car dans l’implémentation actuelle, il faut impérativement préciser l’attribut sizes, même pour une valeur de 100vw. (J’ai remonté le problème, et il a déjà été affecté, donc on peut espérer une correction en moins de douze ans.)

Là où sizes est bien pratique, c’est qu’il va permettre de spécifier différentes largeurs d’affichage pour notre image selon le reste du gabarit de notre page. Si par exemple je suis sur un viewport de 800px de large, mais que j’affiche mon image à seulement 400px de large, je peux le préciser dans l’attribut sizes et le navigateur tentera de charger l’image qu’il juge la plus appropriée. En reprenant le premier exemple et en y appliquant cette condition, ça donnerait ce deuxième exemple et le code suivant :

<img src="default.png" srcset="small.png 320w, medium.png 640w, large.png 1024w, xl.png 1920w" sizes="(width:800px) 400px" alt="Test" />

Ici, l’image est toujours affichée à une largeur correspondant à 100% du viewport, sauf si celui-ci vaut exactement 800px, auquel cas l’image est fixée à une largeur de 400px. Cet exemple est totalement stupide dans la vraie vie.  On pourra alors plutôt écrire ce genre de code un peu verbeux pour ce troisième exemple :

<img src="default.png" srcset="small.png 320w, medium.png 640w, large.png 1024w, xl.png 1920w" sizes="(min-width:20em) and (max-width:50em) 20em, (min-width:50em) and (max-width:80em) 40em, (min-width:40em) 10em" alt="Test" />

J’ai défini ici trois points de rupture précisant des tailles d’images respectivement de 20em, 40em et 10em. Si aucune des conditions des points de rupture n’est remplie, alors le navigateur appliquera à l’image sa valeur par défaut de 100vw.

Là où ça peut devenir un joyeux bazar, c’est qu’on peut combiner les descripteurs w et x. Et tout ça peut être combiné à la balise <picture> qui elle aussi commence à être supportée. Opera a récemment publié un article pour donner des cas pratiques d’utilisation d’images responsive. L’article d’Eric Portis sur « srcset et sizes » est magnifiquement illustré et très complet sur le sujet et m’a aidé à comprendre un tas de trucs.

Une croyance courante dans l’intégration d’e-mails est de dire que Gmail ne supporte pas les styles ou le responsive design. En réalité, c’est un peu plus fin que ça. En avril dernier, EmailOnAcid rappelait que Gmail supporte bien la balise <style>.

Intrigué, j’ai fait mes petits tests, et je confirme : la version desktop du webmail Gmail conserve bien une balise <style> incluse dans le <head> d’un e-mail. Toutes les règles sont bien conservées, mais préfixées par une classe propre à Gmail. Ainsi le code suivant…

.toto { background:red; }

@media only screen and (max-width:600px) { 
	.toto { background:white; }
}

… sera transformé en :

div.m1479b618d2293d85 .toto { background:red; }

@media only screen and (max-width:600px) { 
	div.m1479b618d2293d85 .toto { background:white; }
}

Le hic (parce que forcément il y a un hic), c’est que Gmail supprime toutes les classes et identifiants au sein du code HTML de l’e-mail. Du coup, même si ces styles sont bien conservés, aucun n’est appliqué puisque plus aucune classe ou identifiant ne sont présents.

Mais du coup, ça signifie qu’on peut jouer sur des styles ciblant des balises. Par exemple, le code suivant transformé par Gmail sera bien appliqué dans votre e-mail :

div.m1479b618d2293d85 table td { background:red; }

On pourrait alors imaginer styler des éléments non plus par classe mais par leur position dans le code HTML. Malheureusement, Gmail supprime toute règle CSS contenant des pseudo-sélecteurs comme :first-child ou :nth-child().

Par contre, Gmail conserve bien les règles utilisant des sélecteurs d’éléments enfants ou adjacents, comme >, + ou ~. On peut alors jouer sur des combinaisons de balise pour cibler un élément en particulier. Par exemple, pour cibler le troisième tableau d’un e-mail, on pourrait créer la déclaration suivante :

table + table + table { background:red; }

Toutefois, cette règle s’appliquera aussi pour tout autre tableau précédé de deux tableaux (donc aussi le quatrième, le cinquième, etc.).

Mais surtout, ces bidouilles ne concernent que la version desktop du webmail Gmail. La version mobile de Gmail, ainsi que les applications iOS ou Android, continuent de supprimer toute balise <style>.

J’avais lu cette information il y a déjà plus d’un mois, mais de nouvelles photos destinées à la presse sorties ce week-end en sont un malheureux rappel. L’écran de la Moto 360 n’est pas rond. Il y a une coupure droite en bas sur toute la longueur.

Depuis que je sais ça, je ne vois plus rien d’autre. D’après un responsable de Google répondant à The Verge, c’est une « inévitable étrangeté de conception ». Personne ne sait si Apple travaille sur un projet similaire, mais si c’est le cas, et si je devais répondre à ce tweet, je donnerais la réponse C.

J’ai toujours été fasciné par les statistiques globales de parts de marché ou d’utilisation des navigateurs, même si c’est toujours à prendre avec de grosses pincettes. En 2011, je suivais attentivement l’adoption d’IE9 et de Firefox 4. Je m’interrogeais même sur l’avenir que pourrait avoir le marché des navigateurs, en me disant que ce serait chouette d’arriver à un marché sain avec trois concurrents à parts égales.

Ce doux rêve ne dura pas longtemps. L’année dernière, je constatais le passage de la domination d’IE à la domination de Chrome. Ce constat m’a été rappelé cette semaine sur Reddit avec cette carte des navigateurs les plus utilisés par pays (d’après les données de StatCounter).

Ça en devient presque effrayant. Si on compare avec la même carte un an plus tôt, Chrome a réussi à devenir le principal dans de nombreux pays, ne laissant plus qu’à IE que le Japon et la Corée. Firefox s’est aussi bien fait devancer un peu partout dans le monde, et surtout en Afrique, par Opera. L’explosion du web mobile en Afrique que j’évoquais à la sortie de Firefox OS se fait sentir.

Si on regarde le chemin parcouru depuis juillet 2011 (d’après StatCounter), le constat n’en est que plus effrayant. 

En trois ans, en seulement trois petites années, on est passé d’une utilisation de Firefox de 28 % à seulement 17 %. En trois ans, on est passé d’une utilisation d’Internet Explorer de 42 % à 21 %. Et en trois ans, on est passé d’un Chrome à 22 % à 45 %.

Ce qui m’inquiète, c’est que sans bouleversement majeur du marché de l’informatique personnelle, la dégringolade d’IE et Firefox au profit de Chrome ne risque que de s’accentuer. En trois ans, on est passé d’un marché où Windows représentait 85 % des OS utilisés sur le web, à seulement 55 %, suivi par une forte croissance d’Android et d’iOS représentant à eux deux 28 % des OS utilisés sur le web. L’insignifiance de Firefox et Internet Explorer sur le marché mobile ne va certainement pas arranger ça.

En étant pessimiste, dans trois ans, Chrome sera peut-être utilisé par au moins 75 % des internautes. En étant optimiste, dans trois ans, Internet Explorer et Firefox seront peut-être encore là pour voir ça.

A Blind Legend est un jeu d’action-aventure audio jouable sur mobile.

Il s’appuie sur les sons binauraux permettant de se repérer dans un environnement en 3 dimensions uniquement par le biais de l’audio, et l’écran tactile du mobile pour contrôler le héros.

Ce jeu est créé par les lyonnais de DOWiNO, et il est en financement participatif sur Ulule depuis un peu plus d’un mois. Il ne reste plus que deux jours pour les aider à financer 22 % du montant total.

Je trouve que c’est vraiment un beau projet, et j’ai participé à son financement sans hésitation. Les développeurs ont sorti une démo du concept de jeu audio (pour Windows ou OS X), et ça m’a conforté dans mon premier ressenti. Je suis fasciné par l’idée de jouer à des jeux à l’aveugle depuis que j’ai lu les histoires de ce canadien qui a fini Zelda : Ocarina Of Time ou cet américain qui a fini Oddworld : L’exode d’Abe.

J’espère que le financement arrivera à son but, et que peut-être vous aussi vous participerez à cette belle aventure.

 

En mai dernier, j’avais retweeté cette comparaison que j’aime beaucoup (traduite par mes soins) :

Une interface utilisateur, c’est comme une blague. Si vous devez l’expliquer, c’est qu’elle n’est pas si bonne.

La citation a été reprise en français (sans mention de l’auteur original, tant pis), mais avec une légère déformation au passage :

Une interface utilisateur, c’est comme une blague, s’il faut l’expliquer c’est qu’elle n’est pas bonne.

Cette déperdition dans la traduction a généré quelques débats intéressants ici ou là. Et si je suis le premier à détester les explications pour utiliser une porte et à préférer l’apprentissage par le design, je sais aussi reconnaître que la complexité est parfois nécessaire.

Prenons par exemple le tableau de bord d’un Airbus A380.

Au premier abord, pour le néophyte que je suis, cette interface me paraît atrocement compliquée. Mais c’est peut-être parce que je n’y connais absolument rien en aviation. Et cette interface est destinée à être utilisée par des professionnels, ayant suivi des années de formations spécifiques. En soi, c’est plutôt rassurant de se dire que l’interface d’un appareil servant à transporter 800 personnes dans les airs est incompréhensible pour le premier venu.

Je pourrais en dire de même pour les interfaces des logiciels de traders ou même l’interface de World of Warcraft. Mais ces remarques sur les interfaces sont aussi valables pour les blagues.

Voici une de mes blagues préférées découverte ces dernières années (catégorisée dans les « blagues de papas »).

— Call me a taxi.
— OK. You’re a taxi.

Au risque de passer pour un idiot, je n’avais pas compris cette blague à sa première lecture. Mais dès que je l’ai comprise, j’ai trouvé ça drôle. C’est une bonne blague. La même chose est valable pour la blague anglophone suivante, lue chez Bruce Lawson :

Jean-Pierre : Toc-toc.
Armand : Qui est là ?
Jean-Pierre : Loste.
Armand : Loste qui ?
Jean-Pierre : Oui, malheureusement.

J’ai dû chercher des explications pour comprendre cette blague. Ça ne signifie pas que c’est une mauvaise blague. Maintenant que je la comprends, je l’apprécie beaucoup.

Une interface utilisateur, c’est comme une blague. Certaines blagues sont compréhensibles instantanément. D’autres nécessitent des explications pour être comprises par des gens comme moi qui pourront ensuite la trouver drôle. Mais ça ne suffit pas pour déterminer si une interface est bonne ou pas.

J’ai aussi regardé récemment Tim’s Vermeer, un documentaire produit par Penn & Teller (les magiciens). Ils suivent un de leurs amis informaticiens, Tim Jenison, qui s’est mis en tête de reproduire La Leçon de musique de Vermeer.

Je ne connaissais pas Vermeer plus que ça, mais il est soupçonné d’utiliser un système de projection et d’optique afin de reproduire des scènes avec un rendu précis et réaliste.

Ça m’a fait bizarre, parce que ça m’a rappelé certaines techniques employées au début du millénaire pour reproduire des pages web au pixel près (rires), où l’on superposait une maquette en JPG au dessus d’une page web pour s’assurer de bien respecter le travail du gentil graphiste web (à la main ou avec des outils comme Pixel Perfect).

Tim’s Vermeer est disponible en import chez Amazon.fr, et la bande-annonce est visible sur son site officiel ou sur Youtube.

Le week-end dernier, j’ai enfin regardé The Crowd Work Tour de Todd Barry. Le principe : pas de sketchs, pas de blagues préparées. Todd arrive chaque soir sur scène les mains dans les poches, et il commence à discuter avec certaines personnes du public. C’est au final très plaisant et plutôt drôle. Et c’est disponible pour seulement 5$ dans une version sans DRM chez Louis CK. (Si vous n’avez jamais rien acheté chez Louis CK, faites-le, c’est une très bonne expérience).

J’aime bien ce spectacle, parce que ça corrobore l’idée que la personne la plus intéressante lors d’une représentation n’est pas forcément celle qui est sur scène. Ça me fait penser à la « quête de sens » de Sud Web 2013.

En préparant ma conférence pour Sud Web 2014, je suis tombé sur une excellente citation de Donald Rumsfeld, ancien Secrétaire à la Défense des États-Unis d’Amérique. Il répondait en 2002 aux reproches de journalistes sur le manque de preuves de possession d’armes de destruction massive par le gouvernement Irakien.

Il y a des connaissances connues; ce sont les choses que nous savons que nous savons. Nous savons aussi qu’il y a des méconnaissances connues; c’est à dire que nous savons qu’il y a des choses que nous ne savons pas. Mais il y a aussi des inconnues inconnues, celles que nous ne savons pas que nous ne savons pas.

Ça lui a valu un Foot in Mouth Award. Mais j’ai trouvé que ça collait parfaitement à la description de mon métier d’intégrateur et la façon dont j’aborde ma veille.

Tout d’abord, il y a les choses que je sais que je sais. Par exemple, je connais les positionnements flottants en CSS, et je sais m’en servir. Ensuite, il y a les choses que je sais que ne sais pas. Par exemple, je sais qu’il existe des polices d’icônes, mais je ne sais pas m’en servir car je n’ai jamais eu l’occasion d’en utiliser sur aucun de mes projets. Enfin, il y a les choses que je ne sais même pas que je ne sais pas. Je ne peux pas vous donner d’exemple, puisque par définition, je ne sais pas ce que je ne sais pas.

Le but pour moi dans ma veille quotidienne est de réduire au maximum cette zone « d’inconnues inconnues ». Le métier d’intégrateur devient de plus en plus complexe et diversifié. Il y a deux ans, déjà, j’écrivais qu’une maîtrise complète de l’intégration n’est plus possible. Du coup, l’objectif pour moi est d’avoir une vision suffisamment large pour qu’à chaque choix que je doive faire lors d’une intégration, j’ai un maximum de cartes en main pour m’assurer de faire le bon choix.

Mario Kart 8 est sorti, et j’ai pu m’en délecter une bonne partie du week-end. J’adore certaines nouveautés, comme les portions de circuits sur des routes anti-gravité. Je m’accommode de certains changements, comme le fait qu’on ne puisse plus maintenir un objet à l’arrière de son kart et prendre un autre objet en même temps. Mais il y a un changement qui m’insupporte déjà plus que tout.

À la fin de chaque course en mode Grand Prix, il y a un écran de menu qui permet  de passer à la course suivante, de voir le replay de la course, ou de quitter la partie. Voici un aperçu de ces écrans dans les précédentes versions de Mario Kart (respectivement Mario Kart Double Dash, Mario Kart Wii, Mario Kart DS, et Mario Kart 7).

Et voici maintenant le même écran dans Mario Kart 8.

Nintendo a choisi de mettre le bouton vers le replay en premier, et le bouton vers la course suivante en second. Résultat : je me trompe régulièrement en appuyant par réflexe sur le bouton de validation dès la fin d’une course et je me tape donc le replay au lieu de passer à la course suivante.

C’est vraiment le genre de changement que je déteste dans une interface. 95 % du temps, je vais choisir d’accéder à la course suivante. Les 5 % restants seront partagés entre l’envie de revoir la course si vraiment il s’est passé un truc exceptionnel, ou de quitter la partie si je me suis complètement planté. Du coup, j’ai le sentiment que Nintendo me force à utiliser son nouveau système de replay Mario Kart TV, au détriment du jeu en lui même.