Paris Web 2013 : ateliers et conclusion

Après les journées de conférences de jeudi et vendredi, la journée des ateliers du samedi a été l’occasion d’aborder des sujets de manière un peu plus participative et poussée. Avec une heure et demie par atelier, ça donne effectivement plus d’amplitude pour creuser les choses.

Développons notre efficacité !

J’ai commencé la journée avec un thème loin de la technique. L’atelier de Teddy Marie-Luce portait sur le développement personnel et j’en suis sorti mitigé.
Le fond était intéressant et utile – dans une certaine mesure – mais la forme n’était pas évidente.

Teddy présentait sa méthodologie qui se découpe en quelques étapes :

1. Identifier une « croyance limitante » qui nous est propre. En gros, une idée qui m’empêche d’être au top. Par exemple pour un jeune diplômé, se dire qu’on ne peut pas avoir un salaire élevé parce qu’on sort de l’école est une croyance limitante.
2. Sur la base de cette croyance identifiée, se projeter dans son contexte professionnel pour voir comment on réagit.
3. Trouver un mentor (un modèle, un exemple) similaire à soi mais qui n’est pas limité par cette croyance. Puis se projeter dans sa peau en contexte professionnel. L’objectif étant d’identifier ce qu’il fait et qui permet d’outrepasser cette croyance.
4. Enfin, se remettre dans son propre contexte mais en agissant en suivant l’exemple de son mentor.

Après un exemple de mise en pratique avec une personne de l’assemblée, Teddy nous a demandé de faire l’exercice en duo.

Autant l’exercice reste sympa parce qu’il a permis à chacun de s’exprimer par rapport à sa propre situation, autant je pense que son efficacité reste limitée dans ce contexte. Car c’est le genre de sujet qui nécessite d’être travaillé avec quelqu’un qui est un minimum compétent en relation humaines voire dont c’est le métier (coach par exemple). Je suis donc sorti de là sceptique.

Après la macro, la micro !

L’année dernière, j’avais suivi et adoré l’atelier de Vincent Valentin et Marie Guillaumet qui parlaient de macro-typographie. Après les grilles de mise en page (échelle macro) l’année dernière, Vincent présente – cette fois seul – l’échelle micro qui concerne donc, à l’opposé de la macro, les détails du texte : lignes de texte, mots, lettres, signes, espaces…

Sous forme d’un jeu visant à relever les erreurs dans des citations de films, Vincent nous fait découvrir les règles typographiques qui s’appliquent aux éléments de la micro-typographies : signes de ponctuation, espaces, majuscules, abréviations, symboles… La présentation est riche de leçons et je peux difficilement résumer ici ce qu’il a déjà bien dû avoir du mal à résumer dans ces slides.
Si vous êtes curieux du contenu, je vous invite donc à les parcourir sur Slideshare (voir le lien ci-dessous). D’autant plus qu’elles sont accompagnées des commentaires d’explication qui vont bien !

Les ressources de l’atelier :

• Slides de « Après la macro, la micro ! » sur Slideshare.

Rendre son application HTML5 accessible en 4 étapes

Après un buffet bien garni, j’ai entamé mon après-midi dédié à l’accessibilité avec Jean-Pierre Villain, accompagné de sa fille Shanni, avait pour ambition de présenter les étapes et la démarche pour rendre accessible une application web en HTML5.
Sur le modèle de leur conférence pendant CRAW2013, ils nous ont offert une présentation très dynamique mélangeant explications et démonstrations concrètes. Ainsi l’atelier a permis de présenter la mise en accessibilité d’une application de type Twitter disposant des fonctionnalité de lecture et d’écriture de messages courts, avec la possibilité de répondre et supprimer des messages.

Leur travail s’est déroulé en 4 temps :

1. HTML0 : une version de base de l’application, sans effort particulier d’accessibilité (le cas d’une majorité d’applications ou sites web). En gros, une soupe de div sans structure menant à mal un utilisateur de lecteur d’écran, personnifié par Shanni.
2. HTML4 avec un niveau WCAG2 AA : à partir de la première version, il a simplement été corrigé les problèmes de structure et de sémantique. Par exemple, le bouton pour écrire un message était une simple image avec un onclick dans la version 0 ; l’image a donc été remplacée par un élément button permettant à l’utilisateur d’interagir avec.
3. HTML5 : cette troisième étape sert essentiellement à fortifier la stucture sémantique de la page à renfort de header, footer, nav, etc.
4. HTML5 avec ARIA : enfin la dernière étape consiste à ajouter la couche d’ARIA permettant de rendre plus utilisable l’application aux utilisateurs d’aides techniques. Jean-Pierre fait ainsi la démonstration du rôle dialog permettant de gérer les pop-ins et autres système de type « lightbox ».

Comme d’habitude une session très enrichissante de la part de Jean-Pierre. Et comme d’habitude malheureusement une session trop courte pour tout ce qu’il a à nous dire.

Les ressources de l’atelier :

• Slides de « Rendre son application HTML5 accessible en 4 étapes » sur Slideshare.

Des modèles de conceptions pour vos composants d’interface grâce à ARIA

Avant de clôturer ce cru de Paris Web, je suis resté dans l’accessibilité avec Aurélien Lévy et Laurent Denis Stéphane Deschamps venus animer un atelier dédié à ARIA.

Aurélien a présenté les design patterns ARIA au clavier pour certains widgets. En effet, à chaque widget (accordéon, date picker, boîte de dialogue…) correspond un design pattern qui définit le modèle d’interaction du widget. Autrement dit, pour chaque widget une norme d’usage précise quelles touches permettent de réaliser quelle action.
Si on prend l’exemple du date picker, la touche de tabulation permet de prendre le focus sur la date du jour. Si on est déjà dans le widget : la tabulation permet d’en sortir, les flèches gauche/droite permettent de se déplacer sur le jour précédent/suivant, les flèches bas/haut permettent de se déplacer sur le même jour de la semaine suivante/précédente, etc.
Chaque widget a donc ses règles d’usage prédéfinies, c’est ce qu’on appelle le design pattern.

Cependant et malgré une trentaine de design patterns prédéfinis, Aurélien précise assez rapidement qu’avant de se lancer dans la conception d’un widget, il convient de bien réfléchir en amont au fonctionnement de l’interface.
Il donne l’exemple du calendrier sur la page d’accueil du site de l’Élysée dont l’ergonomie est vraiment particulière et qui a donc nécessité une réflexion poussée pour déterminer le meilleur modèle. Il illustre donc l’un des messages forts de cette édition : il n’y pas de règles figées dans le marbre et universelles, au quotidien les décisions sont à prendre selon le motto « ça dépend ».

La dernière partie de l’atelier a donné lieu à une réflexion partagée sur la création d’un carrousel auquel il nous était demandé de déterminer le design pattern à appliquer. C’était l’occasion idéale – au delà du discours déjà clair d’Aurélien – que se rendre compte que le plus dur se joue à la conception. Et qu’il est donc important de vraiment prendre le temps de penser à l’usage et aux fonctionnalités très précisément dès le début.
Malheureusement on a manqué de temps pour aller au bout de l’exercice et je ne doute pas que la grande majorité des participants auraient aimé aller jusqu’au bout. Mais on en quand même vu assez pour réaliser que la tâche n’était pas aisée.

Conclusion et impressions

Et voilà, c’est déjà fini pour cette huitième édition de Paris Web. La troisième en ce qui me concerne.
Comme d’habitude, ce sont les conférences « à côté » que j’ai préférées. Le web qui rouille, les objets connectés, le hacktivisme… sont des sujets qui sont certes loin de nos préoccupations quotidiennes quand on travaille dans la conception web, mais ils sont en même temps intimement liés à notre job. Et il est d’autant plus important de parler de sujets comme ceux-là parce qu’ils nous obligent à nous poser des questions avec beaucoup plus de recul que ce qu’on est en mesure de se permettre au quotidien. Ils nous obligent à réfléchir sur ce qu’on fait, à regarder les choses sous un autre angle et en définitive à enrichir notre vision et nos opinions.
Au final, ces sujets révèlent des problématiques qui peuvent avoir un impact direct sur notre travail (évolution des interfaces, gestion de nos données et de celles de nos clients…). Bref, Paris Web est le moment idéal pour aborder des sujets qui nous obligent à prendre de la hauteur et j’aime !

Au delà du contenu des conférences et des ateliers, ce sont surtout les échanges humains qui font de Paris Web un grand moment. Le caractère « bisounours » décrié par certains fait partie des forces de l’évènement en ce qui me concerne. Parce que notre quotidien n’est pas toujours facile et nous oblige très souvent à faire des concessions sur nos rêves de qualité, d’accessibilité ou de mettre-ici-le-sujet-de-vos-rêves.
Profiter de ces quelques jours de partage – pendant lesquels on rencontre d’autres personnes avec des idéaux communs – ça me permet personnellement de recharger les piles et de partir gonflé à bloc pour affronter la dure réalité quotidienne. On se rend compte qu’on n’est pas seul et que d’autres se battent aussi pour faire du web un « monde » meilleur pour tous. Bref, je reviendrai en 2014 !

Et si vous n’êtes pas rassasié par mon compte-rendu, il y en a toute une tripotée d’autres à lire (liste non exhaustive) :

• [ Paris web ] – 2013 – Une année de transition ? et [ Paris web ] – La bisounourserie par Adrien Leygues.
• Paris Web 2013, l’accessibilité et l’internet des objets par Baptiste Adrien, Bastien Jaillot et Damien Alexandre.
• Paris-Web 2013, nous y étions ! par Benoit Vrins.
• Mes conférences chouchous à Paris Web 2013, De l’enthousiasme post-Paris Web et Internet et société : la responsabilité des professionnels par Delphine Malassingne.
• Pourquoi je ne retournerais pas à ParisWeb (et pourquoi c’est un excellent évènement) par Grégory Babonaux.
• Paris Web 2013, l’être ensemble par Marie Guillaumet.
• Paris Web 2013, ça dépend, Paris Web 2013… vu de l’orateur et Des bisounours à Paris Web par Nicolas Hoffmann.
• Paris Web 2013 (en anglais) par Nicolas Steinmetz.
• Paris Web 2013 par Romy Duhem-Verdière.
• Mes rêves sont devenus réalité à Paris web par Sophie Drouvroy.
• Mon Paris Web 2013 par Stéphane Deschamps
• Paris Web 2013 – retour sur la première journée par Stéphanie Walter.
• Retour sur Paris Web 2013 : état de l’art ou nombrilisme ? par Vincent Bouyssou.