Chez Jérémie - Mot-clé - wdx

@media London 2010 : Day 4

Jeremie — Fri, 11 Jun 2010 21:28:00 +0200

Quatrième et dernier jour à Londres. Programme toujours aussi intense pour cette dernière journée avec encore six conférences de prévus. Heureusement, cette fois-ci les choix ont été un peu moins dure à faire.

La conférence d'ouverture est assuré par Andy Clark (« Hardboiled web design »). Andy est un vraie show-man et il joue sur un parallèle entre le web design et le roman noir pour expliquer que les web designers sont comme des détectives inflexibles : il doivent faire face à des conventions et des idées préconçus pour atteindre leur but : ex. « CSS3 n'est pas encore disponible dans IE » ce à quoi il répond « Oui, et alors ? ». Assez ironiquement, ce n'est pas un problème nouveau dans le web design. En effet, les théories de l'enrichissement progressif et de la dégradation harmonieuse date du début des années 2000 avec l'arrivée de CSS 2... étonnement les discourt étaient les mêmes à l'époque. Pour moi qui travail dans le Web depuis plus de 10 ans, ce n'est pas nouveau, mais c'est quelques choses qui doit être répéter encore et encore, surtout pour tous les jeune qui ne connaissent le Web que depuis quelques années (moins de 5 ans environ). Andy est un fervent partisan (pour ne pas dire un fanatique) de la logique de dégradation harmonieuse. C'est d'autant plus important que chaque navigateur à des capacité différentes et qu'il est impossible de fournir un design ou une expérience utilisateur exactement identique avec tous les navigateurs... il faut savoir lâcher prise pour ce concentrer sur l'important : l'utilisateur et l'accès qu'on lui donne à un service.

Au delà des différences entre navigateurs, le mode de construction de CSS3 est très particulier. En effet, CSS3 est composé de modules et rien ne garantie que les constructeurs de navigateurs acceptent de les implémenter tous, même si tous étaient à l'état de recommandation validé (ce qui en soit n'a rien de sur, après tout, CSS 2.1 n'est pas encore une recommandation du W3C, mais seulement un recommandation « proposée »). Globalement, cette présentation est une version concentré de l'atelier du premier jours.

Pour la deuxième conférence, il y avait le choix entre Matt Biddulph (« Mobile social location ») et Sandi Wassmer (« Inclusive design is for everyone »). Les deux sujets ne m'inspire pas plus que ça... bon, j'irai voir Sandi.

Avant de rentrer dans le vif du sujet, Sandi commence par faire le distinguo entre Design et Art. La différence principale résidant dans l'aspect « utile/utilisable » explicite du Design. Un bon design a des objectif claire et suit un certain nombres de principes dont elle détaillera quelques uns mais sans trop insister. Plus spécifiquement, les designs inclusifs sont des designs qui sont prévus pour tenir compte de tous les utilisateurs, quelque soit les capacités et handicaps de chacun... et ce n'est pas seulement une question d'accessibilité. Globalement, cette conférence insiste sur le fait qu'un bon Design est avant tout orienté utilisateur (c'est un peu le leitmotive de toutes les conférences : pensez à l'utilisateur avant tout, c'est tout bénéfice pour vous), que ce soit au niveau du look & feel ou au niveau de l'architecture de l'information... rien de vraiment neuf sous le soleil. C'est peut être parce que ce sont de notions que je connais déjà, mais ça me donne l'impression d'enfoncer des portes ouverte. J'en ressort vaguement dessus.

Troisième conférence, cette fois avec au choix : Hannah Donovan (« Telling Stories through design ») ou Patrick H. Lauke (« Brave New World of HTML5 ») en remplacement de Bruce Lawson. C'est mon coté geek qui l'emporte, en avant pour HTML 5.

Cette conférence est une revue de détail de ce qu'il est possible d'utiliser aujourd'hui en provenance de la future norme HTML5. Avant toute chose, Patrick commence par débroussailler tous le bruit qu'il y a autour du mot « HTML 5 » qui a tendance à devenir un « buzz word ». Il fait un petit passage historique avec l'initiative WHAT-WG, l'abandon de XHTML 2.0 et la réintroduction du projet WebForms au sein du W3C qui donnera le HTML 5.

A bien des égards HTML5 entre en compétition avec Flash et Silverlight, mais essentiellement à un niveau peu perceptible par les utilisateurs et n'a pas vocation à les remplacer mais plutôt à les compléter en donnant aux développeurs la possibilité de choisir la technologie qu'ils veulent selon le contexte d'utilisation. Fondamentalement HTML5 est une simple évolution de HTML4 qui standardise un grand nombre de comportement liée au fonctionnement interne des navigateurs. Cela fait de HTML un langage à la fois plus strict (le comportement de tous les navigateurs sera unifié) et plus permissif (la syntaxe reste très, très souple... trop dirons certains). HTML5 rajoute également un certains nombre de nouvelles balises et un certains nombre de nouvelles API pour Javascript. Une des fonctionnalités les plus attendu est sans doute tout ce qui touche à la gestion des formulaires et en particulier à la validation du contenue de formulaire sans avoir recourt à Javascript. Patrick parle aussi évidement de la gestion de la video et de l'audio (LA fonctionnalité qui fait le buzz autour de HTML5 !), de la balise canvas (une zone de dessin accessible directement via Javascript mais attention au problèmes d'accessibilités, il insistera sur ce dernier point). La encore, je n'ai rien appris de neuf, mais Patrick est un excellent orateur qui sait communiquer son enthousiasme (il n'est pas Tech Evangeliste chez Opera pour rien ).

Pendant la pause déjeuner, une discussion s'improvise entre Andy Clark est une cinquantaine (!?) de personnes sur la difficulté qu'il y a à expliquer aux clients que le rendu d'un site web peut être parfois très, très différent d'un navigateur à l'autre. Gros débat qui ne trouvera pas sa conclusion aujourd'hui, mais va très certainement se continuer en ligne dans les semaines qui arrivent (à suivre sur @malarkey)

L'après midi-débute avec la quatrième conférence. Tant pis pour Relly Annett-Baker (« All the small things »), mais je vais voir Remy Sharp (« Browser with wings: HTML 5 API ») histoire de compléter la conférence du matin.

Comme lors de la conférence de Patrick Lauke, Remy commence par démonter le hype autour de HTML 5, pour ensuite s'attacher au cœur du sujet : les nouvelles API introduites par HTML5 pour Javascript :

D'abords les médias avec la gestion de la video et de l'audio. Les API associés permettent de contrôler le fonctionnement de ces éléments ce qui permet de créer des contrôles personnalisés.
Canvas qui est une zone de dessin vierge qui n'a de sens qu'avec son API de dessin. Elle permet de dessiner n'importe quoi dans un contexte 2D (le dessin dans un contexte 3D est encore hyper expérimental, en particulier au travers de l'API WebGL, mais devrait voir le jour très prochainement, Chrome et Firefox y travail dure) et d'exporter le résultat.
Les API de stockage qui permettent de stocker des données localement sous forme de paire clé / valeur. Ce stockage peut être permanent ou limité dans le temps (pour la durée de la session utilisateur par exemple). Il est aussi possible d'aller plus loin avec les API SQL qui repose sur l'utilisation d'une base de données SQL dans le navigateur, en l'occurrence IndexDB.
L'API de géolocalisation permet elle d'accéder à la position géographique de l'utilisateur (s'il le souhaite).
Les Web Socket permet de gérer un flux de donnée binaire permanent, montant et descendant entre le navigateur et le serveur (cette API, en dehors de son support dans les navigateurs à aussi besoin de bénéficier de serveurs capables de gérer de tels flux) ce qui permet d'implémenter à peut près n'importe quel protocole de haut niveau (XMPP par exemple) en Javascript.
La gestion de la mise Offline permet de savoir quand un navigateur est déconnecté et de proposer des actions dont le résultat ne sera réellement exécuté qu'une fois le navigateur reconnecté (par exemple avec un webmail). Il est également possible de gérer assez finement le cache des éléments nécessaires à l'application grâce au manifeste de cache.
Enfin, L'API de fichiers permet d'accéder au système de fichier local du navigateur.

Bien que HTML5 soit encore en cours de normalisation (tous les navigateurs n'ont pas encore implémenté toutes ces API ou pas forcement exactement de la même façon) on peut déjà commencer à utiliser ce qui existe. Certes avec prudence, mais c'est possible, en particulier avec toutes les solution de substitution et de contournement qui existent.

L'avant dernière conférence (déjà !?) offre le choix entre Aral Balkan (« The art of emotional design ») et Steve Souders (« Even faster web sites »). Depuis le temps que j'entends parler de Steve, impossible de manquer ça. Aller hop !

Steve revient sur la question des performances coté client. Il ne s'étend pas trop sur les méthodes et l'outillage, il se contente de nous montrer rapidement les différences et points communs existant entre Yslow et PageSpeed. En effet, l'essentiel de sa présentation tourne autour de tests réalisés par Google (Steve travail pour Google) qui permettent de mettre en évidence les amélioration de performances mises en œuvre par les différents éditeurs de services en lignes. On voit bien à quel point les développeurs ont pris conscience de l'importance des performances au sein du navigateur (tout ce qui touche au chargement et à l'exécution du code par les navigateurs). Il nous parle d'ailleurs de l'émergence d'un nouveau métier : le WPO (Web Performance Optimisation) qui est au développement ce que le SEO est au marketing web.

La conférence de clôture sera assuré par Scott Berkun (« The myths of innovation, remixed and remastered »). Cette conférence assez théorique nous fait rentrer dans les mécanismes qui président à l'innovation et comment celle-ci est possible... on pourrait résumé sa pensé par l'expression « 100 fois sur le métier tu remettras ton ouvrage ».

Ce fut dense et de très haut niveau. Globalement les orateurs sont excellents et même si je n'ai pas appris grand chose sur HTML 5, les rencontres faites sur place ont été particulièrement enrichissante. L'organisation était au top. Si vous hésitez, je vous invite vivement à assister à la prochaine édition et entre temps, Paris-Web vous tend les bras au mois d'octobre

@media London 2010 : Day 3

Jeremie — Fri, 11 Jun 2010 01:03:00 +0200

Troisième jour à Londres. Aujourd'hui, fini les ateliers, c'est le débuts des conférences. Le programmes est dense et le choix de chaque conférence a été difficile. L'évènement à lieu au Hall Queen Elizabeth à proximité de la gare de Waterloo. Le lieu est bien choisi, et malgré la présence d'au moins 300 participants, on ne se sent ni à l'étroit ni perdu au milieu du vide. La qualité de l'accueil est impeccable, mais ce qui compte vraiment ce sont les conférences

Démarrage à l'américaine à 9h avec une courte introduction par john Allsopp qui plaisante un peu sur les australiens pour expliquer que @media est maintenant organisé par Web Direction qui est une entreprise australienne.

On enchaine directement par la première conférence : Brendan Eich (directeur technique de Mozilla Corporation) sur l'évolution de Javascript, langage dont il est à l'origine. Une session ultra technique (au réveil, ça fait mal), mais passionnante sur les prochaines évolutions de Javascript. Javascript est un langage à la fois très simple et très complexe avec beaucoup de subtilité. De gros travaux sont actuellement fait pour le rendre plus structuré et plus fiable, on à droit à une revue de détail, code à l'appuie.

Pour la deuxième conférence on à le choix entre il faut choisir entre Christian Crumlish (« Designing for play ») et Doug Schepers (« SVG today and tomorrow »). Dans la mesure ou j'ai déjà passé une journée avec Christian, je choisie d'aller voir Doug (et puis j'adore SVG, je suis en train de vous préparer un petit article sur le sujet).

La conférence démarre sur les chapeaux de roues, en effet, tous ses slides sont en SVG et on commence directement par une demo tiré du site SVG Wow! Plus prosaïquement, Doug nous présente tous ce qu'il est possible de faire avec SVG (découpes, filtres, animations, etc... je suis en train de préparer un article sur la question). C'est un grand tour d'horizon du sujet, exemple à l'appuis. Franchement je suis certain qu'avec la sortie de IE9, cette technologie va décoller de manière intensive. Pour mémoire, SVG est un format d'image vectoriel. D'ailleurs, Doug fait également le parallèle avec l'élément Canevas en montrant les différences entre ces deux technologie et comment elles se complètent. Il conclus en évoquant rapidement les outils qui permettent de créer des document SVG... et c'est sans doute là que se jouera l'avenir de ce format car pour l'instant, ce n'est pas très reluisant.

La troisième conférence met en compétition Rachel Andrew (« Core CSS3 ») et John "jQuery" Resig (« Testing mobile web apps »). Comme je maitrise déjà bien le sujet CSS3, pas d'hésitation, direction la conférence de John.

Le développement d'application web utilisant Javacript est de plus en plus communs, mais l'univers des mobiles est extrêmement hétérogène. John nous présente la démarche qu'il a suivit pour tester la prochaine version de jQuery sur les plateforme mobile. En effet, en temps que principal développeur de jQuery, il fait en sorte de s'assurer que ce Framework peut fonctionner sur les plateforme mobile les plus importantes. Une des principales difficultés et d'arriver à trouver des statistiques pertinentes pour savoir quoi faire et à qu'elle plateforme s'intéresser (en l'occurance : Symbian, iPhone OS, RIM et Androïd). Basiquement la stratégie de test à avoir est la même que pour les environnements de bureau (via une logique de qualification tel que celle utilisé par Yahoo!), mais la différence tiens au nombre de plateformes et de navigateurs bien plus important. Pour pouvoir faire des tests, les simulateurs (parfois difficiles à se procurer) sont un bon début pour réaliser un certain nombre de test automatique, mais il est toujours nécessaire de faire un test sur un support physique pour valider les partis-pris mis en œuvre. Au final on reste un peu sur sa faim car on ne découvre pas grand choses sur les résultats concret de ce travail. Par contre on ressort avec une vision assez claire de l'état de l'art des environnements mobiles, ce qui n'est pas rien.

Quatrième conférence de la journée, et cette fois ci, il faut choisir entre Tom Hughes-Croucher (« Introduction to server-side Javascript ») et Simon Willison (« Building crowdsourcing applications »). L'utilisation de Javascript coté serveur, même si c'est un sujet passionnant, n'est pas exactement ma tasse de thé. Je préfère donc aller voir Simon pour comprendre ce qu'il entend exactement quand il parle de « crowdsourcing ».

Simon commence donc par essayer de définir le termes « crowsourcing ». C'est essentiellement un buzz word comme a put l'être l'expression « Web 2.0 ». Il s'agit d'ailleurs de notions assez proches. L'expression « Intelligence collective » ne traine pas loin, mais n'est finalement pas utilisé. En fait, plutot que de s'essayer à une définition hasardeuse, il préfère utiliser des exemples pour définir le terme : wikipedia, openStreetMap, Google Image Labeler, Mapumental, XKCD.

Il rentre ensuite dans le détaille de ce qu'il à fait pour le site Internet du Guardian. Ils ont proposés aux visiteurs d'analyser, trier et voter pour les documents liés aux dépenses des parlementaires Anglais pour savoir sur quels sujets il fallait aller investiguer. Cette expérience a été faite deux fois ce qui à permis de l'améliorer à chaque fois en se reposant à la fois sur les mesures d'utilisation et sur les retour d'utilisateurs. Une conclusion intéressante fut de dire que finalement, peut importe qu'une expérience de crowdsourcing fonctionne ou non, il y a toujours quelque chose à en tirer.

On arrive à l'avant dernière conférence, et il faut encore choisir. Soit Mark Boulton (« Designing grid systems ») soit Jonathan Stark (« Building mobile apps »). Je préfère finalement aller voir Mark qui propose une conférence un peu plus généraliste sur un sujet assez chaud dans le milieu du webdesign : l'utilisation des grilles de mise en page.

Ça démarre assez lentement sur des considérations très théoriques, on pare de très loin, avec un passage historique par le gestion des container de fret maritime jusqu'au théorie canon de l'impression papier pour enfin commencer à arriver à parler de web (enfin bon, plus 20 minute pour en arriver là... ce fut très, très long pour pas grand chose). Enfin dans le vif du sujet, on en revient à la question essentielle : le web est un média à part entière avec ses propre règles graphiques. Il faut arriver à se détacher des maquettes Photoshop fixe pour arriver capturer l'essence du Web : la flexibilité. 3 notions sont en jeux : la notion de grille de mise en page flexible (pas de largeur ni de hauteur prédéterminé), la notion de taille d'image flexible et la notion d'espace visible (« viewport » en anglais). Le problème des supports physiques, c'est qu'ils mélangent la gestion du contenu et sa mise en forme. Le web sépare les deux, ce qui demande un gymnastique intellectuelle complètement nouvelle. Mark finira par détaillé explicitement les type de grilles possibles, mais comme cela arrive en fin de conférence, c'est survolé assez rapidement et on est finalement un peu frustré malgré la qualité de la prestation et de la démarche intellectuel, c'est un peu dommage.

La dernière conférence est une table ronde avec Jeremy Keith, Christian Crumlish, Hannah Donovan, John Allsopp et Simon Willison. Cette dernière partie est un peu décevante dans le sens où l'interaction avec la salle fut réduite à la portion congrue, ce qui donnait la sensation d'assister à une discussion d'expert sans vraiment y participer... sans doute le gros fail de la journée.

En conclusion, ce fut un journée dense avec des orateurs de haut niveau. Et même si la fin de journée fut un peut moins enthousiasmante (la fatigue aidant peut-être aussi), cela n'enlève rien au niveau global de cet événement qui permet de côtoyer certain des meilleurs web designer de la planète. Vivement demain pour la suite.