Paris Web 2010, jour 2

La Mecque des développeurs Web francophone, j’ai nommé Paris Web, s’est déroulée cette année du 14 au 16 octobre. Clever Age en est le partenaire privilégié et vous livre son ressenti sur les conférences de la seconde journée.

Après une première journée riche en émotions, en suspense, et en bonnes pratiques CSS, Damien et Rudy nous racontent la suite de leurs aventures à Paris Web 2010 !

La typographie comme outil de design

(ppt)

Damien : La journée du vendredi débute avec la conférence de David Rault sur la typographie. Après un tour exhaustif des familles de fontes (dont on aurait pu se passer) David nous a bien remis les idées en place concernant la typographie et le Web : deux mots qui en général finissent mal dans la même phrase.

Les recommandations sont pleines de bon sens :
– pas plus de 3 fontes par page
– prêter attention à la connotation que peut véhiculer la fonte choisie
– pas de mélange de fontes à fortes personnalités
– pas de Comic sans ms (une conférence sur la typographie, il FALLAIT parler de celle-là !)

David préconise de traiter le Web comme le papier, y attribuer la même attention en terme de mise en page et règle de lecture. Les écrans sont maintenant partout et tendent à être tous d’excellente qualité. Les webfonts quant à elles semblent ne pas l’attirer. TypeKit ne serait pas au point techniquement et trop cher, et @font-face un trop grand danger pour les créateurs de polices, les « fondeurs » (piratage de police de caractère). Pour ma part j’ai le sentiment que la frilosité des fondeurs à accepter la mise en place de leurs polices sur le Web est un peu la même que celle des majors avec l’explosions des sites de streaming musical : ça leur passera quand il se rendront compte que ce n’est pas dangereux pour leur business.

HTML5, c’est maintenant (IE6 inclus)

(slideshare 1 – 2 – 3)

Rudy : [Jean-Pierre Vincent->http://braincracking.org/] prend la spécification HTML5 par son extrêmité pragmatique, la saupoudre de vraies capacités navigateur, et secoue très fort ! Le but est d’avoir un discours dédramatisant sur le monstre informe et lointain qu’est HTML5 pour certains développeurs frileux…
_ Nouvelle spec par nouvelle spec, il identifie IE6 comme l’ennemi, et présente des moyens de le contourner, avec du retour d’expérience.

« IE6 l’ennemi ? Mais, mais, mais… » me direz-vous.

Bien que Jean-Pierre Vincent ait fouillé son sujet, et ait effectué un véritable travail de recherche de solutions de bricolage, il semble qu’il ait oublié en chemin quelques règles basiques du pragmatisme Web… (d’ailleurs, la séquence de questions-réponses n’a pas manqué de le lui rappeler avec plus ou moins de douceur)

Déjà, considérer IE6 comme le seul ennemi du HTML5 à une époque où des smartphones pas toujours si smart envahissent le Web est un peu simpliste : Opera Mini, c’est toujours 40 millions de terminaux grâce à (ou à cause de) J2ME. Et ce n’est pas du tout un chiffre en diminution, bien au contraire ! (je l’avais remarqué pendant la conférence, mais les remarques pertinentes fusaient déjà un peu trop au micro…)

Ensuite, Aurélien Lévy fait très justement remarquer lors de la séquence de questions-réponses que l’approche accessibilité durant la conférence oublie complètement la problématique des lecteurs d’écran et autres navigateurs « dégradés ».

Autant de raisons qui font que, étonnamment, la méthode du « si ça marche sur IE6, c’est donc accessible » n’a étrangement pas encore été reconnue par le W3C…

Ah, je me moque, je me moque, mais ce n’est pas donné à tout le monde de parler d’accessibilité devant les experts de Temesis ! Et à défaut d’une démarche pragmatique, Jean-Pierre Vincent a au moins délivré un bon état des lieux des outils qui tentent tant bien que mal de faire d’HTML5 une réalité actuelle.

La macrotypographie de la page Web

(slideshare)

Rudy : Elle nous sourit, elle nous énonce une règle incontournable avec une conviction envoûtante, elle nous sourit à nouveau, et nous on rit presque nerveusement de se sentir embarquer dans un voyage vers cette discipline inconnue et pleine de mystère en si bonne compagnie. Pour une première conférence, le charme professionnel d’Anne-Sophie Fradier laisse sans voix (et non sans nouvelle passion pour la macrotypographie, tiens).

On se laisse tout d’abord prendre par la main pour un voyage au départ de l’aube de la communication écrite, en descendant le temps de main de maître. On atterrit en douceur sur le Web moderne, et on s’aperçoit que les marges, les grilles, et autres notions basiques, s’y retrouvent en terrain connu.

[Anne-Sophie Fradier->http://www.twitter.com/Mitternacht] nous explique quand même que le confort de lecture sur le Web, ce n’est pas le même que le confort de lecture sur papier, donc qu’il y a des différences majeures à ne pas outrepasser, et nous montre de bien mauvais exemples : les pubs du Monde.fr qui vous laissent espièglement penser qu’elles sont liées à l’article, les colonnes agaçantes des sites journalistiques, …

Elle passe avec une aisance sans complexe de la page papier à la page Web, transforme l’une en l’autre, l’autre en l’une, en appliquant intelligemment les règles, ou en les ignorant, et nous explique très clairement pourquoi.

Et pour la route, la petite quote qui fait tout : « ce livre, je vous le promets, il est trop génial ; vous vous posez tous les dimanches avec votre petite famille et vous en lisez dix pages ! » (mais écoutez la conférence dès qu’elle est disponible, l’heure entière est un florilège d’humour décomplexé)

Damien : Juste après la conférence de David Rault, j’ai souhaité en savoir plus sur ce terme étrange qu’est la macrotypographie. Déjà il faut dire que @Mitternacht elle a quand même le don pour rendre la chose intéressante. Elle a réussi à captiver l’auditoire avec des histoires de moines qui font des dessins sur du tissu. La suite c’est un condensé de bonnes pratiques typographiques dont je retiens l’importance du blanc. Laisser du blanc (en faisant des marges latérales suffisamment importantes) aide à éloigner le lecteur des distractions d’un menu, d’une publicité et ainsi améliore la lisibilité. L’importance des grilles aussi – de nombreux designers les considèrent comme une contrainte à leur créativité et ce n’est pas du tout l’avis d’Anne-Sophie. Ah et comme David le disait, traiter le Web comme le papier mais en prenant en compte ses spécificités (on ne peux pas scroller un livre).

Upgrading the front end : adding new web technology to an existing design workflow

Damien : Dave Shea, ça vous dit forcément quelque chose. Il est un peu responsable de l’explosion de l’utilisation des CSS chez les développeurs Web dans les années 2000 avec son site CSS Zen Garden. Dans la continuité de son action, faire avancer les choses, Dave nous a présenté les nouveautés d’HTML5 et CSS3 que nous pouvons (devons !) déjà utiliser.

J’ai par exemple appris avec surprise que les nouveaux types d’input (email, date, number, url…) pouvait être utilisés car le fallback des navigateurs qui ne les connaissent pas est le type « text », que nous utilisons aujourd’hui partout. Pour l’instant ça ne sert pas à grand chose mais sur Safari iPhone par exemple, la saisie est facilitée par un clavier virtuel adapté !

Il en est de même pour l’attribut [data-*->http://dev.w3.org/html5/spec/elements.html#embedding-custom-non-visible-data-with-the-data-attributes], qui permet d’inclure des données directement dans le DOM sans les rendre visible par l’utilisateur.

Quand à RGBA, le nouveau code couleur qui permet de spécifier un Alpha, il est très simple de l’utiliser dès aujourd’hui avec un fallback pour les anciens navigateurs :


color : #FFFFFF ;
color : rgba(255, 255, 255, 0.4) ;


Dave nous a aussi parlé de Modernizr, la librairie JavaScript de détection de feature, des WebWorker qui vont permettre de faire tourner nos script sur plusieurs processus, et d’autres points d’intérêts à retrouver dans la vidéo de la conférence.

Comment un vigneron étranger utilise le Web pour s’intégrer dans la France rurale

Damien : C’est l’histoire de Ryan O’Connell, un Américain dans la fleur de l’âge qui débarque dans le Languedoc avec ses parents et en tombe amoureux. Il y produit du vin mais il aime le Web. Et il se rend compte que les producteurs de sa région, le Web, ça leur parle pas.

Quoi qu’il en soit, il va réussir en quelques années à se faire une vraie place sur la toile Française. D’habitude, c’est plus dans des conférences sur le vin qu’il prêche la bonne parole, il éduque les foules à l’utilisation des outils de l’internet – mais sa présentation était aussi ludique qu’intéressante ! Je recommande le visionnage de la vidéo !

Au boulot les cerveaux !

Rudy : Un bol d’air pur dédramatisant, dans ce monde de brutes digitales ! Virginie Caplet nous remet le cerveau en place, tout en nous l’ouvrant, et nous montrant qu’à l’intérieur, il y a du créatif (du côté droit), et du logique (du côté gauche… euh, ou l’inverse, j’avoue !).

Du créatif et du logique ? Ça ressemble fort à la distribution d’une équipe projet, entre d’une part, les directeurs artistiques, graphistes, etc. et d’autre part, les développeurs, administrateurs de base de données, etc. ! (et les intégrateurs, tiens, coincés entre les deux ?)

Virginie nous explique comment motiver le bon côté du cerveau en fonction du profil de votre interlocuteur, et faciliter la communication entre les techniques et les artistes !

On y apprend aussi, accessoirement, que les cerveaux des collaborateurs, ça s’écrase comme des noix (beurk !)

Building usability into accessibility

Rudy : Partant du constat que le contenu Web s’enrichit avec le temps (de moins en moins textuel, de plus en plus interactif), James Taylor et Christophe Jolif nous inquiètent d’abord en nous prédisant les catastrophes non-accessibles que cette richesse de contenus peut entraîner. Puis, alors que tous les experts ARIA sont enfoncés dans leurs sièges une sueur froide sur le front, ils nous annoncent que leurs travaux sur des bibliothèques de composants riches les ont mené à penser que les deux problématiques (ergonomie et accessibilité) peuvent souvent se résoudre d’une pierre deux coups.

« — Ah ? », sussure l’expert ARIA en se redressant.
« — Oui », répondent-ils en choeur, « parce que tous deux passent par une simplification et une clarification de l’interface ».
_ Donc il suffirait juste de simplifier et de clarifier l’interface pour tomber sur des solutions communes ? Hm. L’idée est abstraite, mais est certainement interpelante.

Malheureusement, au moment où l’on désirait le plus du concret sur cette théorie intriguante, James et Christophe nous donnent quelques exemples très (trop ?) précis sur des utilisations très (trop ?) particulières (notamment, un algorithme de navigation au clavier, meilleur pour l’ergonomie et l’accessibilité en même temps par définition), et n’attendent pas plus pour plier bagage.

Quelques exemples de plus m’auraient peut-être convaincu, mais là, je reste dubitatif… Alors je lance un appel : quelqu’un saurait où ces messieurs garderaient un recueil un peu plus exhaustif de leurs trouvailles ? En attendant, merci gens du Web !

Étude de cas sur la mise en accessibilité du Web

Damien : Denis Boudreau, expert accessibilité au Québec, est venu nous présenter un retour d’expérience sur la mise en conformité d’un site Web.

Brièvement, je retiens un passage très intéressant dans sa présentation : « ce n’est pas parce que quelqu’un produit du site Web qu’il est passionné. Et les non-passionnés ont besoin d’un cadre pour concevoir des sites Web accessibles et de qualité ». L’idée, c’est qu’il ne faut pas attendre des non-passionnés avec lesquels on travaille, la production d’un code tel que nous le concevons naturellement ; il faut les former, lister les bonnes pratiques, leur donner des directives.

Un player vidéo accessible, si c’est possible !

Damien : Présenté par Vincent Aniort et David Molina d’Orange / France Télécom, cette présentation m’a un peu déçu. On y a appris ce qu’un lecteur vidéo accessible avait comme pré-requis, mais le titre de la présentation est trompeur : à ce jour, le lecteur en question n’est pas fonctionnel, et les éditeurs de contenu sont incapable de le nourrir. L’idée est belle, mais j’ai bien peur qu’il faille encore attendre un moment avant de voir arriver cette technologie sur des sites publiques. Courage les gars, c’est un projet ambitieux !

HTML5 et ses amis : Nouvelles APIs

Damien : Présenté par l’excellent Paul Rouget (tech evangelist pour Mozilla), il s’agit d’une des présentations les plus impressionnantes qu’il m’ait été donné de voir durant ces deux jours. Après quelques blagues bien sympathiques, Paul est très vite entré dans le vif du sujet en nous présentant une série de futures technos Web, encore en cours de spécification mais déjà (plus ou moins) implémentées dans Firefox 4 – avec démos à l’appuis. Petit tour d’horizon des points à retenir :

Les WebSocket : ça fonctionne déjà plutôt bien. On peut comparer ça à du TCP over HTTP, le serveur et le client peuvent échanger via une connexion persistante, et les applications qui en découlent risque d’étonner ! Pour l’exemple, depuis une page Web utilisant WebSocket, tous les auditeurs pouvaient voir les slides de la présentation en direct, et Paul pouvait « pusher » tout ce qu’il voulait dans les navigateurs de la soixantaine de personnes connectée.
_ Bémol important, ça nécessite un serveur spécialisé (Node.js par exemple) et, le protocole utilisé n’est pas encore stable. Des changements importants risquent d’intervenir.

Ça marche actuellement sous Firefox 4, Google Chrome 4, Opera 10.70 et Safari 5.

FileAPI : ce nouveau module permet de lire de façon asynchrone des fichiers sélectionnés par l’utilisateur. Par exemple sur un champ d’upload de fichier, l’internaute sélectionne une photo de son chien, il est possible grâce à FileAPI de récupérer l’image et de l’afficher dans la page, et cela sans qu’aucune donnée n’ait été envoyée au serveur.
_ HTML5 apportant aussi la sélection multiple de fichiers dans un input file, FileAPI présente les fichiers sous forme de FileList. Et chaque objet File contient 3 propriétés : name, size et type.
_ Grâce à FileReader, un autre module d’HTML5, il est possible de lire ces Files, qu’ils soient binaires ou textuels. Cette API permet alors d’éditer un fichier et rend donc possible toutes sortes d’applications. Il serait par exemple facile de redimensionner toutes les images qu’un utilisateur a sélectionné avant de les uploader sur le serveur !

Mozilla travaille activement sur ces fonctionnalités et vous trouverez une démo intéressante sur le hacks.mozilla.org (un blog à suivre immédiatement si vous ne l’avez pas déjà fait). Ça ne fonctionne que sous Firefox (car ça utilise des méthodes non présentes dans la spécification) mais ça expose très bien l’idée générale et les possibilités offertes par ces modules pour nos futures applications Web.

FormData : Vous connaissez tous le plugin jQuery Form, qui permet de sérialiser les données d’un formulaire pour, disons, les envoyer à un serveur via Ajax ? Et bien vous pouvez l’oublier.

FormData est une nouvelle API qui va vous permettre de gérer directement des pairs clé / valeur et de les envoyer avec XMLHttpRequest comme un formulaire. Et avec FileAPI, ça comprend aussi l’upload de fichiers !
_ Il est possible de simuler un formulaire, où d’en prendre un présent sur la page, et ce avec souplesse. C’est là encore une feature que l’on va retrouver dans Firefox 4.

Audio Data API : Si on ne retrouve ce module que dans Firefox, c’est pour une raison simple, c’est eux qui on poussé la spécification au W3C ! Tout le monde ici connaît la balise apportée par HTML5, Audio Data API va servir à travailler avec les sons sur une page Web.
_ Il va être possible d’extraire en temps réel chacun des échantillons de son joués par une page Web, à la fréquence du bitrate, et de le modifier ! Les applications vont du logiciel de mixage, en passant par l’equalizer, l’analyseur de spectre… et tout ça, côté client en Javascript. Un peu de SVG / Canvas et il devient super simple de faire une « visualisation » kitch (ou pas) à la Windows Media Player !

WebGL : Ici Paul nous a fait une démonstration digne des plus beaux demoscene :-)
_ Pour résumer (mais je vous invite à aller voir ça en vidéo), grâce à WebGL on peux faire de la vraie 3D dans le navigateur en temps réel. Dans cette démonstration, la caméra se déplace dans une ville futuriste toute en 3D, la musique est jouée avec la balise , un spectre s’affiche sur un immeuble, et des tweets taggués « #parisweb » apparaissent sur les façades. Rien que ça.

Une remarque est soulevée dans l’assistance, « Flash est capable de faire ça aussi ! », oui, mais WebGL… ça marche sur mobile ! (il faudra oublier la ville en 3D quand même, ne rêvez pas).

Cette démonstration cloture une présentation très riche en “OOOOHHH” et “WAAAAAHHH”, et qui pour une fois, s’est très bien passée (pas d’« effet Bonaldi » comme tout le monde le craignait, Paul ayant l’habitude de voir ses démonstrations se ratatiner en temps réel aussi).

Le web, un métier de valeur

(Slideshare)

Rudy : Je doute qu’Eric Daspet (bien connu de nos services de renseignement pour être l’un des « messieurs Paris Web » depuis le premier jour), en se lançant sur le sujet de l’éthique dans les métiers du Web, savait qu’il livrerait un travail aussi personnel, et aussi interpelant pour tous les webeux qui se sentent un minimum responsables.

Il commence directement par dénoncer les dérives d’un métier qu’il décrit en plein malaise, coincé entre connaissance pointue des technologies de pointe, et connaissance pointue de technologies obsolètes (« Qui d’autre que nous développe encore pour Windows 98 ? »), menacé par une concurrence féroce peu soucieuse de la qualité, et une clientèle souvent trop peu dérangée par le « quick and dirty ».

(La quote modeste : « Des gens super compétents, bon il y en a 500 à Paris Web. On va dire qu’il y en a le double en France… ». Ah non tiens, pas modeste en fait !)

Devant ces contraintes et ces menaces, le discours d’Eric passe progressivement de descriptif en syndicaliste (oui, j’ose !), et il appelle les travailleurs du Web à se prendre en main, à ne pas hésiter à s’imposer fièrement comme experts face aux clients réticents, à parfois même utiliser les faiblesses techniques de ces mêmes clients pour les éduquer à la qualité (minifier les JS ? oh oui, oui, c’est très « HTML5 » ça, vous savez !)

Au final, il dénonce une difficulté terminologique de la langue française pour désigner cette expertise (intégrateur Web ? développeur front Web ? expert Web ?), qui rend difficile la reconnaissance de cette expertise lorsque les échanges se font en langue française.
_ Et une fois cette terminologie trouvée, il appelle chaque personne concernée à se regrouper autour de ce terme, afin de fortifier la communauté, et attaquer ce chantier de reconnaissance publique de front, ensemble.

Une petite conférence pour tout un programme, moi je vous dis, si Eric Daspet se présente en 2012, je sais déjà pour qui je vote ! ;)

Demistifying the UX toolbox : creating an effective framework

(slideshare)

Rudy : Avec l’arrivée des notions d’expérience utilisateur, de nombreux outils ont fait leur apparition, censés industrialiser ce design afin d’encadrer leur succès. De mon point de vue (de chef de projet fonctionnel venu du développement, et qui donc vaut ce qu’il vaut), beaucoup de ces méthodologies me semblent d’une linéarité inquiétante dans un contexte qui se veut innovant par nature ; mais l’expérience utilisateur étant une notion un peu obscure pour moi, on peut tout-à-fait s’autoriser à dire que je ne sais pas trop de quoi je parle…

Du coup, voir Stephanie Troeth arriver et lancer un pavé dans la mare m’est assez jouissif ! Le message est simple, et clair : les méthodologies toutes faites pour le design d’expérience utilisateur, parfois, il vaut mieux mettre un peu tout ça à la poubelle, et repartir de zéro pour se retrouver mieux adapté au cas.

Parmi quelques conseils d’une sagesse exemplaire, elle nous rappelle que :
– « the act of designing is what matters more than the final design itself » (l’action de faire un design est ce qui compte plus que le design final lui-même)
– « Cook-book processes can be worthless ; we need to cook based on the ingredients we have » (les méthodologies-recettes de cuisines, ça peut ne servir à rien ; il va nous falloir cuisiner à partir des ingrédients qu’on a)

A défaut de m’avoir enfin éclairé sur l’utilité réelle des démarches d’expérience utilisateur, Stephanie Troeth m’aura au moins permis de leur avoir rendu un visage humain, en remplacement des traits « réchauffés » que je leur prêtais jusqu’alors.

La conférence dont vous êtes le héros

Damien : Le principe de cette conférence était de donner la parole aux auditeurs, et de débattre tous ensemble des sujets qu’on voulait. Bon, c’était vendredi soir et on venait de passer deux jours super denses pleins d’informations et de discussions, mais certains courageux avaient encore des choses à dire !

Il y a été question d’un Sud Web, parce qu’une fois par an ce n’est pas assez ! Le sujet à intéressé beaucoup de monde et le projet va donc se monter (Note de Rudy : bibi fait même partie de l’organisation, et vu d’ici, ça devrait envoyer du bois !)
Le débat sur les différentes interactions entre designers, webdesigners, intégrateurs et développeurs sont aussi revenus sur le tapis. On a aussi entendu parler de formation. Enfin beaucoup d’échanges plus ou moins intéressants qu’il aurait été agréable de poursuivre !

Cette 5e édition de Paris Web ne se terminera que le lendemain, au terme d’une journée d’ateliers, mais il est déjà l’heure pour toute l’équipe d’être vigoureusement applaudie par la foule en délire.

Une petite conclusion, puisque c’est ce qui se fait habituellement !

Déjà, dire que chez Clever Age, on a été fier de sponsoriser cette aventure, c’est encore très loin de la réalité (si les goodies-balles-de-jonglage Clever Age se baladent d’open-space en open-space depuis le weekend dernier, ça ne pourrait pas être par autre chose que par nostalgie, parce que soit dit en passant, personne ne sait jongler chez nous !)

Sur le marché Web d’aujourd’hui, s’auto-proclamer défenseur des bonnes pratiques et de la qualité Web, c’est déjà pas mal, mais ça ne veut pas dire grand chose (il y a du monde à ce portillon-là ; et du monde d’honnêteté variable !). Donner les moyens aux bonnes personnes de traiter de ces questions qui nous tiennent à coeur, c’est une nécessité, et nous ne pouvons pas nous empêcher d’être fiers d’avoir pu y apporter notre contribution.

Du coup, en attendant Paris Web 2011 (et Sud Web 2011 ?), vous nous trouverez comme d’habitude, à droite, à gauche, et un peu partout dans la communauté Web française, à tenter de contribuer à ce que ces sujets continuent d’évoluer dans la bonne direction…

Merci à tous et à la prochaine !

Conférences géniales que nous avons eu tort de manquer !

• Un framework HTML est-il possible ?, par Cédric Morin
• Rendre une application d’entreprise accessible : contraintes et pragmatisme, par Tanguy Loheac
• Le Web vu d’un client grand compte, par Pascal Aubin