Article co-écrit par Naël ABOU CHAHINE, Nicolas BEAUSSART-HATCHUEL et François DELBRAYELLE.
Les Cht’Ippons (Naël, Nicolas et François) ont assisté à WebStories, une nouvelle conférence dédiée au web. Plusieurs talks se sont succédé le temps d’une journée (le 5 février 2021 de 9h à 18h) entièrement en anglais.
Huit intervenants abordent à leur tour les différentes façons dont les sites ont été conçus au fil de l'histoire du web. Ippon fut l’un des nombreux partenaires de cette première édition. L’événement aurait dû se dérouler en présentiel mais a été réalisé entièrement en distanciel en raison de la crise sanitaire. L’organisation a choisi pour cela l’outil Remo qui a fait ses preuves depuis le début de la crise sanitaire comme en témoigne le succès de Cloud Nord 2020.
Les talks étaient tous au format conférence à raison d’environ une heure chacun en comptant la session de questions/réponses. Voici notre résumé et nos impressions des conférences du jour !
A History of the Web in 100 Pages
Speaker : John Allsopp
John Allsopp nous propose ici de revenir sur l’histoire du web à travers plusieurs dates et “pages” depuis la seconde guerre mondiale. Son talk est basé sur l’histoire du monde en 100 objets mais adapté au web :
- Page 1 (1945) : Des innovations ont souvent découlé des recherches de l’armée et des scientifiques comme cet ancêtre d’une Go Pro ou le “Memex” qui permettait déjà en 1945 de restituer des livres en lien avec une bibliothèque. La recherche pendant la seconde guerre mondiale a amené en 1963 à la naissance de l’hypertexte (500 mots maximum à l’époque) mais aussi aux marque-pages.
- Page 2 (1989) : Tim Berners Lee au CERN à Genève développe les prémices du web en proposant une nouvelle gestion de l’information. Lancement du World Wide Web avec notamment le protocole HTTP pour transmettre de l’hypertexte.
- Page 3 (1991) : Première page web toujours en ligne. Le projet du WWW devrait être largement disponible au public. Le WWW c’est des documents et des liens. Une première version de l’HTML est utilisée avec des balises basiques comme par exemple pour les liens (toujours utilisées aujourd’hui).
La vidéo pré-enregistrée était une bonne introduction mais pour le coup il s’agissait plutôt de 3 pages que de 100. La deuxième moitié sur une demi-heure est un échange entre John et Angela moins intéressant et percutant. Dommage qu’il n’y ait pas eu une keynote d’ouverture en direct.
Designing beyond the pixel-perfect idealistic case
Speaker : Stéphanie Walter
Lors de ce talk, Stéphanie Walter (UX researcher and Product designer) cherche à nous faire comprendre qu’il y a beaucoup plus important que le positionnement au pixel près des éléments de notre application web. Elle aborde un grand nombre de notions très intéressantes qui pourraient constituer un article entier, nous allons ici nous contenter de vous en restituer certaines (les plus importantes).
Le mot d’ordre c’est : “Design to scale” (Concevoir à l’échelle).
Et pour arriver à cela, Stéphanie nous invite à nous poser les bonnes questions. Par exemple, sur le flux de chargement de votre application : comment nos pages vont être chargées ? A quoi mon composant va ressembler lorsqu’il charge ? Que faire en cas d’erreur de chargement d’un composant ? Mon design fonctionne-t-il toujours dans d’autres langues ?
Nous reviendrons plus tard dans un deuxième article plus en détail sur ce talk qui selon nous était l’un des plus réussis de WebStories !
Impression de Naël : Ayant une grosse appétence pour le front-end et l’intégration de design notamment, ce talk est certainement celui qui m’a le plus intéressé. J’ai toujours aimé challenger les designers sur différents projets auxquels j’ai pu participer. Stéphanie nous a rappelé ici quelques éléments à toujours avoir en tête.
Impression de François : Pour moi sans aucun doute l’un des meilleurs talks de cet évènement ! Stéphanie nous a montré une vision assez large des bonnes pratiques en termes de conception de composants.
Impression de Nicolas : Pour moi l’un des meilleurs talks. Ayant conçu des applications, elle a mis en lumière des points de vigilance à avoir lorsque nous concevons une application et quand nous la mettons en place. Je le recommande vivement à tout développeur front tout comme aux designers.
Project Fugu, the first two years
Speaker : Kenneth Rohde
Retour sur le projet Fugu lancé par Google (et rejoint par d’autres comme Intel et Microsoft), une plateforme accessible à tous, basée sur les standards, pour toutes les architectures et formats (applications, livres…) et destinée à faire converger les développements pour applications web et natives (on entend souvent demander “est-ce qu’il y a une appli pour ça ?”).
Comment en est-on arrivé au projet Fugu ? Partant du principe que 60 % du temps utilisé sur un PC l’est sur un navigateur, les développeurs du projet Fugu en sont venus à penser cette convergence des applications.
Kenneth revient sur son parcours chez Nokia avant d’aborder les PWA (progressive web apps) qui permettent de faire converger la conception d’applications web et natives. Le problème qui se posait de plus en plus était l’écart entre l’utilisation des nouvelles APIs, la sortie de certaines d’entre elles et ce qui était réellement adopté et adoptable par les utilisateurs, d’où la création du projet Fugu.
Comme le rappelle Kenneth, le fugu est un poisson qui peut être délicieux mais mortel si mal préparé. Le nom du projet vient de ce poisson comme il est délicat de proposer un standard permettant de satisfaire tout le monde quels que soient l’architecture ou le format.
Le projet Fugu supporte plusieurs fonctionnalités comme par exemple : récupérer la liste des contacts, utiliser un contact, détecter les codes barres, détection de formes, one time password, accès au système de fichiers…
Il est possible de faire des requêtes de nouveau contenu sur le projet Fugu. L’avancement et la compatibilité du projet Fugu sont également disponibles en ligne.
Impression de François : Yet another PWA talk! L’intérêt est l’interopérabilité des systèmes avec des applications développées une fois pour plusieurs terminaux. Ma crainte ici est de voir Google continuer de prendre une part quasi monopolistique dans ce domaine quand d’autres acteurs comme Mozilla/Firefox auraient peut-être quelque chose à apporter.
Impression de Nicolas : Le talk classique sur les PWA d’une conférence dédiée au web. Un listing des fonctionnalités, même si l’intervenant ne travaille pas chez Google, c’est très orienté vers celui-ci. Il faut quand même noter que ce qui ressort de ce talk pour moi, Google décide moins dans son coin qui décide des fonctionnalités des PWA mais d'autres acteurs du marché tel qu’Intel font partie de la discussion.
You talkin' to me?
Speaker : Léonie Watson
Léonie propose ici une conférence à propos du SSML (Speech Synthesis Markup Language), de l’API Web Speech et du module CSS Speech. Beaucoup de balises pour utiliser la synthèse et la reconnaissance vocale existent en SSML : <voice>, <emphasis>... Léonie nous a expliqué qu’il est possible de reproduire des actions Alexa et Google Home par exemple avec la balise <amazon:emotion> qui peut lire un texte avec certaines émotions dans l’intonation.
Léonie nous a présenté ensuite une API importante à utiliser en complément du SSML : la Web Speech API qui est développée par le W3C et comprend deux interfaces : une pour la reconnaissance et une pour la synthèse vocale (avec window.speechSynthesis).
Enfin, le module CSS Speech a été mis en avant pour montrer qu’il est également possible de manipuler ce que l’on dit ou entend sur une application web ou mobile par exemple avec voice-volume: loud pour indiquer un volume élevé de voix lors d’une synthèse vocale. Ce module comprend en effet plusieurs niveaux de recommandations depuis… déjà 1998 ! (le dernier date de 2020).
Impression de François : J’ai redécouvert cette API géniale pour l’accessibilité du web qu’est la Web Speech API à utiliser avec le SSML et le module CSS Speech. Très pratique pour les personnes malvoyantes, c’est un sujet souvent méconnu et oublié lors de la conception d’applications.
Impression de Naël : Je ne connaissais les éléments que Léonie nous a présentés que de nom, j’ai pu donc associer des fonctionnalités à ceux-ci. Au-delà de ça le talk était très intéressant et je ne manquerai pas de m’intéresser à ces technologies dans le courant de l’année.
Impression de Nicolas : Un autre regard sur l'accessibilité web, avec la découverte du module CSS Speech qui n’est pas encore très utilisable, mais pourtant c’est un sujet très prometteur. La popularité grandissante des assistants vocaux offre de beaux jours aux APIs. Une application peut maintenant répondre autre chose qu’un simple texte rouge pour indiquer une erreur.
The Layers of the Web
Speaker : Jeremy Keith
Jeremy Keith travaille sur la reconstruction du navigateur NeXT. Il revient sur plusieurs personnes ayant apporté beaucoup à l’informatique d’un point de vue scientifique :
- Ada Lovelace
- Vannevar Bush (l’inventeur du memex à la base des ordinateurs et des réseaux)
- Douglas Engelbart (inventeur de la souris, travaux sur les IHM, développeur du système hypertexte)
- Stewart Brand (fondateur de la communauté The WELL en 1985 contenant des forums de discussion et à l’origine du concept de “shearing layers” <=> couches cisaillées)
Pour l’anecdote, en faisant des recherches en marge du talk, on tombe sur les travaux du scientifique belge Paul Otlet dont les recherches ont grandement influencé les créateurs des réseaux, du web et de l’hypertexte. Internet serait donc (en partie) belge !
De fil en aiguille Jeremy amène le concept de “pace layers” sur lequel repose le web : TCP/IP, HTTP, URLs, HTML, CSS, JS+... L’idée est d’arranger les couches pour un maximum d’adaptabilité entre elles et ne pas avoir d’écart important de l’une à l’autre.
Pour passer d’une couche à l’autre, il est important de se demander comment gérer les différents cas d’erreurs. C’est pourquoi choisir le langage ou le framework le moins puissant pour un besoin donné semble ici recommandé par Jeremy (c’est la fameuse “rule of least power”).
Jeremy Keith conclut en insistant sur l’importance d’avoir du contenu structuré et textuellement visible y compris sur le premier navigateur ayant existé (donc du texte et des liens). Une façon de s’en assurer pourrait être de tester cela sur un navigateur 100 % texte tel que Lynx.
Enfin, le site de Jeremy Keith contient de nombreuses ressources et en particulier le chapitre dédié aux couches.
Impression de François : Un talk inspirant pour revenir aux sources du web en couches en prenant soin de comprendre chacune d’entre elles et les liens entre elles. Le point a été mis également sur l’importance du web sémantique et de la simplicité des pages web pour que le contenu textuel et les liens hypertextes soient clairs et simples.
Impression de Nicolas : Un talk très intéressant qui fait relativiser sur
les cycles d'itérations dans le web et en particulier le JavaScript.
Ombromanie: Storytelling with Machine-Learning Infused Hand Shadows
Speaker : Jen Looper
Un talk original qui sort du lot en montrant comment il est possible de créer des ombres chinoises sur un site notamment avec HandsFree.js, TensorFlow.js et MediaPipe.
Impression de François : Un talk original un peu OVNI dans la mesure où Jen a montré comment réaliser des ombres chinoises sur un site capturant la vidéo via une webcam en utilisant VueJS, HandsFree.js, TensorFlow.js et MediaPipe.
Scaling yourself: Building what works for you
Speaker : Cassidy Williams
“Le meilleur moyen d’échapper à un problème est de le résoudre”
Prenant le pas de cette citation, Cassidy s’est fabriquée elle-même son propre outil comme elle utilisait de nombreux outils différents. Ce qui fonctionne pour quelqu’un ne fonctionne pas forcément pour quelqu’un d’autre. L’outil que vous construisez n’a pas à être permanent. Commencez où vous êtes. Utilisez ce que vous avez. Faites ce que vous pouvez.
Impression de François : Même si le talk part d’une bonne intention (savoir s’organiser et prendre les devants pour créer ses propres outils), j’ai trouvé un peu long le temps pour expliquer tout cela.
Impression de Flo : La fin était intéressante sur la forme : une discussion avec les auditeurs à travers le chat. Moins sur le fond : une séance de commentaires sur les réalisations de chacun.
Impression de Nicolas : Un talk avec beaucoup de potentiel, mais qui je trouve aurait pu aller plus en profondeur sur le fond. Le temps d’échanges était très intéressant mais peut-être un peu long.
Design in the Background
Speaker : Eric Meyer
Eric montre des trucs et astuces sur son site pour aller au-delà des couches et canvas en CSS.
Impression de François : Un talk pas très passionnant me concernant mais je pense qu’il peut intéresser des personnes ayant ce genre de problématique en CSS. J’ai décroché, pas techniquement, mais peu d’intérêt pour ce sujet qui est assez loin des réalités rencontrées au quotidien en mission me concernant.
Impression de Naël : Eric nous présente ici des techniques plus ou moins avancées de CSS. C’est intéressant de garder un tel répertoire d’astuces lorsque l’on travaille sur de l’intégration web. Cependant, je rejoins François, les cas présentés sont loin de ce que j’ai pu rencontrer jusqu’à présent en mission.
Impression de Nicolas : Pour les personnes qui font de l’art à partir de CSS, ce talk est pour vous. Une explication détaillée étape par étape de ce qu’on peut réaliser avec du CSS. Malheureusement, je n’ai pas accroché car je n’ai pas cet usage du CSS, et pour moi un peu trop loin de la vie de tous les jours.
En conclusion
Cette première édition du WebStories a rencontré un franc succès avec près de 300 spectateurs à distance. Les talks étaient globalement variés et équilibrés. Une keynote de fin plus percutante aurait peut-être eu plus d’impact pour terminer sur une touche plus dynamique voire humoristique. Nous espérons qu’une deuxième édition en présentiel pourra avoir lieu l’an prochain à Lille !
