La Mecque des développeurs Web francophones, 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 première journée.
Cette année, Damien et Rudy vivent l’effervescence web-geek annuelle, et vous la font vivre de l’intérieur, au gré de leurs découvertes des conférences et des conférenciers…
_ (et puis, vu qu’on n’a que deux têtes et quatre yeux, désolé d’avance aux conférences que nous avons involontairement ratées d’une même voix !)
La conception universelle, est-ce toujours possible ?
Damien : Matt May (évangéliste accessibilité chez Adobe) nous a présenté sa vision de l’universalité sur le Web. Cette première conférence de la journée nous a tout de suite mis dans le bain avec une question que l’on se pose tous : faut-il concevoir un site par périphérique, ou un site universel ?
On se rend aussi compte au fur et à mesure de la présentation que la question ne porte pas seulement sur la taille de l’écran du visiteur, mais aussi sur l’accessibilité en général, et surtout pas que pour les handicapés.
Une bonne accessibilité est bénéfique à tout le monde, même au quidam en parfaite santé, mais qui tente péniblement de lire un contenu écrit trop petit avec les yeux fatigués, par exemple. Il faut aussi penser qu’un jour, nous ne serons plus en pleine possession de nos moyens, et peut-être qu’utiliser un équipement tactile ou une souris deviendra pénible. Ça fait réfléchir.
Il était une époque où nous concevions des sites mobiles dédiés (souvent sur le sous-domaine m.*), et puis un jour est arrivé l’iPhone, le succès qu’on lui connaît et le raz de marée de smartphones aujourd’hui en circulation. Ces périphériques ne justifient plus la création de sites dédiés, notre usage du Web mobile à complètement changé et si WML[[Le Wireless Markup Language est un langage proche de l’HTML conçu pour créer des sites WAP, capable de s’afficher sur un écran de téléphone portable.]] est mort, c’est bien grâce à Apple.
Mais l’adaptation des sites Web aux mobiles a continué. On a conçu des sites « iPhone ready« , fait des développements spécifiques.
Constat final : aujourd’hui, il n’est plus possible de rendre son site compatible avec tous les périphériques mobiles : il y en a trop, et ce n’est pas prêt de s’arrêter. Ne serait-ce que la diversité des appareils embarquant Android : smartphones, tablettes, netbooks, téléviseurs, iPhones… (wait what?!). Il serait impossible de prévoir le type de périphérique sur lequel notre site va être vu et c’est là qu’intervient la conception universelle. Je vous invite à regarder la vidéo de sa présentation (qui aurait surement été plus agréable en anglais d’ailleurs) pour en savoir plus !
Espace construit et espace virtuel, un retour vers le futur ?
Rudy : Fabien Basmaison, est une sorte d’architecte fou (un vrai, un qui fait des vrais murs et des vraies portes) qui vient d’abandonner les briques et le béton pour son autre passion, le Web (d’ailleurs, c’est un ex-membre de la team Paris Web). Du coup, il est particulièrement bien placé pour nous parler, certes avec une timidité touchante, d’une comparaison troublante qui pourtant ne peut que nous interpeler.
– Il nous décrit les défis et les pionniers de l’architecture lors de ses balbutiements, et on s’aperçoit que le Web n’a rien inventé quant à « tenir la charge ».
– Il nous parle d’architectes qui regorgent d’inventivité pour tenir les délais, contrôler leur périmètre, et motiver leurs troupes, et on s’aperçoit que le Web n’a rien inventé avec ses méthodoogies projets.
– Il nous parle de gestion du risque, et on s’aperçoit que le Web n’a rien inventé pour assurer ses arrières.
– Etc.
En bref, les mêmes défis techniques, créatifs, et organisationnels, cent ans plus tard ; tout simplement.
On se sent d’abord tiré par les cheveux, et puis on finit par tellement y croire qu’on se sent coupable de ne pas y avoir pensé nous-même !
Après la conférence, votre serviteur pose une question inutile, puis compare Microsoft à Le Corbusier, tout le monde s’esclaffe. Ah ah, première conf, et déjà je ne serai pas venu à Paris Web pour rien ! 😉
Internautes sous surveillance : retours de la réalité pour un Web meilleur
Rudy : certes, rien de très novateur, mais des rappels enthousiasmants pour les ergonomes débutants comme moi, démontrés avec un pragmatisme sans artifice théorisant à l’excès, qui manque souvent dans les conférences du genre.
Amélie Boucher (si vous n’avez pas encore acheté son livre, vous n’avez plus le droit d’utiliser le mot ergonomie tant que vous ne l’avez pas fini !) se donne pour mission toute simple de nous rappeler que sans les tests utilisateurs, toutes nos belles idées de webeux ne valent pas grand chose dans la vraie vie… Les exemples sont parfois fonctionnellement solides, mais appliqués faiblement en terme d’ergonomie :
– notamment, un beau moteur de recherche avec des facettes intelligentes et des beaux résultats illustrés, mais une ligne de flottaison trop basse, et les gens n’ont même pas l’occasion de voir les jolies illustrations (site de bière, d’ailleurs, hop, URL bookmarkée !) ;
– un logo sans lien textuel « accueil », et des utilisateurs qui cliquent 15 fois sur « Précédent » ;
– une mise en forme trop pensée pour un bouton « Écrire en mail » (oui, sérieusement, trop pensée !).
Et pour la quote qu’on retient : « rien ne vaut la parole des internautes… mais il ne faut surtout pas les croire ! »
_ Promis, on ne les croira pas trop… mais toi par contre, Amélie, tu nous as convaincus !
Le JavaScript server side, faire un point
Damien : Quentin ADAM, CEO de Clever Cloud (quel joli nom) nous a parlé de l’utilisation de JavaScript côté serveur (aussi nommé SSJS).
Sur le Web, l’utilisation principale que nous avons de JavaScript se trouve côté client : on exécute du code dans le navigateur du visiteur. Si nous développons une application de gestion de voitures, par exemple, il nous faut développer deux objets Voiture : un dans le langage serveur (PHP, Java, .Net…) et un en JavaScript. Le rêve du JavaScript serverside, c’est de n’avoir qu’un seul langage pour toute la chaîne : du poste du client au serveur en passant par la base de données – et donc de permettre l’unification de notre code mais aussi de nos outils et de nos développeurs.
Bien que JavaScript ne se destine à priori pas à une exécution côté serveur, c’est bien dans ce but qu’il a été créé, à l’époque nommé LiveScript, la première implémentation de Brendan Eich devait tourner sur le serveur HTTP de Mosaic / Netscape ! L’histoire en a décidé autrement, mais il n’est donc pas si contre-nature que ça côté serveur.
Le langage a besoin d’être compilé en code binaire pour être compris par le processeur à chaque exécution. Il y a presque autant de moteurs que de navigateurs : SpiderMonkey et ses successeurs, V8, Rhino, et j’en passe. Les implémentations ne sont pas toujours les mêmes, et les performances non plus. Côté client c’est gênant, côté serveur ça l’est moins, puisqu’on est maître de notre moteur.
Ainsi, tous les serveurs SSJS se basent avant tout sur un moteur JavaScript, et c’est un premier critère de choix important. Rhino est très populaire étant donné sa portabilité, il est développé en Java.
Concernant le choix d’un serveur, Quentin défend APE, une solution française plus intéressante que le très connu node.js. Pour finir je dirais qu’il s’agissait d’une conférence très intéressante, présentant bien les avantages et inconvénients de cette solution. Le SSJS a de beaux jours devant lui, à n’en pas douter.
Let’s interface – how to make people as excited about tech as we are
Damien : Chris Heilmann (évangéliste technique senior chez Yahoo) nous a présenté, en anglais, une conférence absolument géniale sur l’art et la manière de rendre une API sexy aux yeux des développeurs comme des décideurs. Avec des exemples à l’appui, il a démontré comment la façon de présenter un produit, une API, pouvait être la clé de son succès.
Il nous a aussi montré comme il était simple d’utiliser YQL[Le [Yahoo! query language.]] pour traiter des données. On peux par exemple publier un CSV en ligne, et utiliser YQL pour faire du SQL-like dedans :
select * from csv where url="http://monsite.com/moncsv.csv" and columns="Year,City,Sport,Event,Country" and Year="1924";
L’idée ici est trouver une histoire à raconter avec des données, d’en faire quelque chose de visuel, de démonstratif qui soit aussi ludique pour le développeur qu’intéressante pour le décideur.
Rudy : ce n’est pas plus étonnant que ça de constater que Damien et moi-même ayons assisté à la même conférence, mais que pourtant nous ne sortons pas du tout avec le même ressenti, tant elle était autobiographique pour Christian Heilman !
Les démonstrations techniques étaient impressionnantes, mais j’ai plus particulièrement apprécié les conseils qu’Heilman dirigeait aux développeurs pour les encourager à se démarquer en tant qu’innovateurs dans leur propre environnement (qui n’est pas toujours propice à l’innovation). Les conseils étaient particulièrement basés sur la confiance en soi, et la capacité, par des démonstrations pragmatiques, qu’un développeur va avoir à se mettre dans les baskets de la personne qui va utiliser l’innovation en question.
On a aussi appris que les français prononcent « bagages » en allemand comme « viennoiseries », et qu’être évangéliste chez Yahoo, aujourd’hui, c’est simplement « fucking cool ». Ah bah, maintenant, on sait. 🙂
Estimer l’accessibilité de son site, 15 minutes top chrono !
Damien : Laurent Denis et Aurélien Levy, deux noms bien connus du Web Francophone nous ont effectué une inspection de l’accessibilité du site France.fr (choisi au hasard ?).
Avec de simples outils comme Firebug et la Web Debug Toolbar, il est possible d’analyser succinctement le niveau d’accessibilité d’un site Web. En l’occurrence, pour France.fr le résultat n’est pas glorieux : les attributs « alt » sur des images-liens manquants, la navigation au clavier invisible, le menu se dépliant uniquement au survol de la souris, la mauvaise utilisation des titres , l’absence de navigation clavier dans la mappemonde en Flash… les erreurs ne manquent pas.
_ Un autre point abordé est la présence de sous-titres dans la vidéo, et d’un contenu alternatif à cette vidéo.
Pour un site de cette envergure, est-ce bien raisonnable ? Avec tous ces défauts, il est bien évident qu’un utilisateur de lecteur d’écran ne pourra pas naviguer correctement.
Méthode Daisy : les CSS feuille à feuille
([le billet de blog adapté de la mini-conf->http://romy.tetue.net/methode-daisy])
Damien : Présenté par Romy Duhem Verdière, cette conférence nous expose une technique, parmi d’autres, pour organiser ses feuilles de styles de façon à maintenir dans le temps une maintenabilité importante et à faciliter le travail en équipe.
Il n’y a pas de consensus établi, pas de bonne pratique qui émerge et chacun y va de sa propre idée. C’est un point qui a aussi été abordé lors de l’atelier « Industrialiser l’artisanat de l’intégration HTML » présenté par Thomas Parisot, en présence de Romy Duhem Verdière (et de vos vaillants serviteurs).
_ Il s’avère que cette méthode est en fait déjà utilisée chez Clever Age depuis un moment, mais aussi par de nombreux autres acteurs du Web. Elle consiste simplement à séparer ces feuilles de style par fonction :
– le reset dans un reset.css
– les styles typographiques dans un typo.css
– le skin dans un style.css
– Etc.
Et, en bout de chaîne, pour éviter les effets néfastes de ce découplage des CSS sur les performance du site, on merge et compresse ces fichiers en un seul.
C’est propre, efficace, et ça porte maintenant un nom : la méthode Daisy !
Le Kit documentaire de conception pour simplifier la communication projet
Rudy : J’ai faim.
_ Non, sérieusement, je sors de la conférence, et j’ai faim.
_ Pas des adorables petits-fours qui ont fait la réputation de Paris Web (Christophe Porteneuve ne m’avait pas menti !), mais d’informations sur le sujet dont je viens vaguement d’entendre parler…
Christophe Cotin-Valois et Cédric Magnin arrivent vers nous les bras ouverts et avec une solution miracle qu’ils ont peaufinée pour faciliter la communication entre les intervenants sur les projets Web ; ils nous expliquent la problématique (que l’on connaît par coeur, parce qu’elle nous prend de front tous les jours), et… Et c’est tout. « Allez voir sur le site ! »
Si ça, c’est pas du teasing !
Proposition constructive : peut-être qu’une mini-conférence n’a pas suffi, et que le sujet aurait mérité une conf entière ? Hmm, peut-être !
_ Pour en avoir le cœur net, je… hé bien… j’irai voir sur le site ![[Comme quoi, la com’, ça marche…]]
HTML5 et le Web de demain
Rudy : Le W3C se veut ludique (et explicite sur leur rôle de construction vers l’avenir) en nous embarquant dans un voyage dans le temps délirant vers l’utilisation à venir des technos Web. Plutôt que de nous énumérer une énième fois les nouveautés techniques apportées par le HTML5 (et SVG, et CSS3, toussa, toussa), le W3C prend la tangente, et utilise des références de culture pop aussi variées que Matrix, K2000, ou Meg Ryan, pour illustrer la distance qui s’amenuise entre les visions futuristes de la conscience populaire et les technos telles que le W3C les voit.
On y voit Robin Berjon et Dominique Hazael-Massieux chausser des lunettes de soleil en se prenant pour l’agent Smith, ou nous faire une démonstration de kung-fu façon Keanu Reeves (démonstration d’un dixième de seconde, soit, mais ô combien spectaculaire quand même !)
On y apprend aussi que : « Faire du graphisme avec HTML/CSS parce qu’on est un expert Web, c’est comme faire du sexe dans une baignoire parce qu’on est expert en baignoires »[Oh mon dieu, j’ai dit le mot « sexe » sur le blog de Clever Age ! C’est nos experts SEO qui vont être contents ! o/]]
_…Et chez Clever Age, on se fait un devoir d’écouter sagement les conseils du W3C ! 🙂
Reusable Code, for good or for awesome!
([slideshare)
Damien : Jake Archibald, développeur front pour la BBC, nous a expliqué comment une mauvaise documentation pouvait provoquer le fait qu’un adolescent regarde un documentaire sur les phallus avec sa mère ! (là pour comprendre je vous invite à regarder la vidéo de la présentation, vous passerez un très bon moment !).
Plus que la mauvaise documentation, Jake se bat contre les mauvaises conceptions. Pour lui, du bon code, une bonne API/Plugin c’est :
– de la consistance (il a bien sûr trollé sur PHP et JavaScript)
– de la flexibilité
– de la lisibilité
– de la facilité d’écriture (en Anglais, writetability – je suis preneur d’une meilleure traduction)
– et enfin, de l’utilité !
Le fil rouge de sa conférence était la réalisation d’un carrousel en JavaScript. Il nous a démontré quelle était la meilleure technique pour développer un tel module. Entre créer une fonction dans le namespace global (surtout pas), utiliser des namespaces (oui, envisageable mais avec intelligence), étendre le DOM (non, trop de risques de collision, trop dépendant du client[L’[exemple de Prototype.js qui a dû retirer getElementsByClassName est très convainquant !]]) et enfin la création d’une librairie (solution retenue).
Côté facilité d’écriture et flexibilité, un des points que je retiens est l’utilisation d’objets d’options plutôt qu’un constructeur avec de multiples paramètres pour la création d’une librairie, d’un plugin.
_ Il est par exemple nécessaire de spécifier tous les paramètres d’un constructeur si la seule option que nous voulons changer est la dernière :
maFonction("#coucou", null, null, false, true, ’poney’);
Ce code n’est pas lisible (qui peut me dire à quoi correspondent mes paramètres sans aller voir la documentation ?), pas facile à écrire (des paramètres null à écrire) et pas flexible.
Alors que si on utilisait un objet, ça serait quand même beaucoup plus sexy :
maFonction("#coucou", difficultToWrite: false,
madeOfAwesomeness: true,
title: "poney"
);
N’est ce pas ? 🙂
Jake est aussi un partisan de l’écriture de la documentation et des exemples avant l’écriture du code en lui même. En effet si on soumet une documentation à un collègue avant même d’avoir développé l’API, mais avec toutes les méthodes documentées, il est fort probable que les erreurs de consistance, de logique ou de flexibilité soient éliminées rapidement.
Cette conférence était pleine d’humour et de bons conseils. Je vous recommande chaudement de la visionner !
Méthodologie du design d’expérience utilisateur
Rudy : Le design d’expérience utilisateur étant l’un des métiers du Web les plus récents, il n’a parfois pas encore dépassé l’état de quantité intrigante et difficile à évaluer, pour ceux d’entre nous qui sont les moins au fait de ces nouvelles pratiques (et puisque vous posez la question, oui, je parle de moi !)
Mathieu Mingasson nous expose très rapidement une méthodologie éprouvée pour le design d’expérience utilisateur, basée sur une communication optimale entre les différents membres de l’équipe projet (pas seulement les créatifs !), et nous arrose de retours d’expérience pertinents.
Bon, j’avoue, je sors de la conférence, et je ne suis toujours pas convaincu de l’utilité des démarches d’expérience utilisateur… Mais je ne peux pas le reprocher à Mathieu Mingasson : il n’est pas venu pour nous convaincre, juste pour nous expliquer et nous faire assimiler une méthodologie. Et ce message-là, pour le coup, est très bien passé.
Innover de 9 à 5
Rudy : Chez Clever Age (comme dans toutes les agences Web qui s’efforcent d’être pro-actives), la problématique de l’innovation nous revient dans les pattes à échéance très régulière. L’une des difficultés avec les tentatives de contrôles d’innovation, c’est que l’innovation est par essence catalysée par la créativité. Or, contrôler la créativité est par nature contre-productif… Autre difficulté, il s’agit d’un de ces sujets assez flous et qui catalysent un nombre agaçant de charlatans auto-proclamés innovateurs, dont le discours est aussi convaincant qu’il est bidon !
Vous comprenez maintenant mon inquiétude initiale quant à cette conférence…
Inquiétude qui a été rassurée : Olivier Thereaux n’est pas du tout venu jusqu’ici pour nous prouver ses géniales capacités d’innovation, il vient juste nous rappeler que l’innovation est un problème qui se prend à la source humaine d’une organisation. Il utilise des expressions motivantes et étonnamment expressives, comme « hacker, bidouiller son entreprise », pour exprimer le contre-courant constructif face à sa hiérarchie. Il rappelle que la culture de l’envie d’apprendre en entreprise, ça s’entretient. Il rappelle que cette culture ne se fait pas sans dépenser du temps (« Make a little, sell a little, learn a lot »), et du temps de qualité (le développement de l’innovation ne peut pas se faire en positionnant des profils en intercontrat ou des stagiaires en montée en compétence !). Il encense la culture de l’erreur décomplexée (« Mistakes will be made »)
Tous ces rappels essentiels, agrémentés de quelques exemples de tentatives d’innovation réussies ou complètement ratées (merci, ô merci, humilité, qui a eu raison de mon inquiétude initiale !). Et pour être le plus clair possible sur l’utilité de la session : quelques jours après, nous sommes déjà en train d’étudier l’application de certaines idées séduisantes tirées de la conférence, en interne chez Clever Age. 😉
CSS3/Photoshop : quel avenir pour le métier de Web designer ?
Damien : Présentée par Francis Chouquet, Web designer freelance, cette conférence a eu la bonne idée de soulever des questions très polémiques dans l’audience (composée de trolls velus). Toute la question est de savoir si les designers doivent utiliser les nouveautés de CSS3 (et donc mettre de côté leur Photoshop), ou simplement en connaître les possibilités et laisser l’intégrateur se débrouiller.
Il y a plusieurs écoles, les designers défendent que concevoir un site sans passer par la case Photoshop relève du blasphème, tandis que les développeurs prétendent que les designers ont juste peur de CSS et sont des fainéants. Bref, le jeu des questions-réponses a très vite tourné au débat, et il en ressort que chacun travaille avec les outils qui lui sont propres et que CSS3 n’est pas un outil de conception de design, mais un langage de description d’interface. Francis a, durant le débat, été invité en direct par Daniel Glazman (CSS Working Group Co-chairman) pour participer au CSS WG, ce qui est très rare pour un designer (c’est plutôt un Working Group d’intégrateurs).
La fin de la présentation était moins intéressante à mon sens, avec toute une partie sur « aimer son métier », être passionné, le fait de se tenir au courant et de faire de la veille. J’ai le sentiment que, dans l’audience de Paris Web, tout le monde en est déjà convaincu.
Les conférences que nous avons ratées (mais qui, nous n’en doutons pas, devaient être passionnantes !)
- L’utilisabilité dans la stratégie Web des organisations internationales par Aurélie Valtat
- Le texte : parent pauvre du Web ? par Jean-Marc Hardy
- L’accessibilité dans une chaîne de production Web par Vincent François et Denis Boudreau
