Paris Web 2017

Listes des orateurs
Liste des conférences

Pour rappel Paris Web est le rendez-vous annuel axé sur les standards web et tout ce qui gravite autour des métiers du Front (front end, UX/UI, accessibilité, qualité web...) réparti sur 2 jours de conférences et 1 journée d'ateliers.

J'y avais assisté en 2008 (eh oui ça date !) et il était encore pas mal question de faire la promotion des standards web.
Aujourd'hui, il n'y a plus de débat sur l'intérêt des standards web. Les conférences sont désormais plus des questionnements sur nos métiers (toujours front) à travers des retours d'expériences et sur des bonnes pratiques en lien avec nos process.
Cette année était également très axé accessibilité, un sujet dont la méconnaissance est toujours importante même 10 ans après Paris Web 2008...

Voici donc un résumé des conférences des 5 et 6 octobre 2017 (enfin celles auxquelles j’ai pu assister !)

Jour 1

Le secret de la correspondance numérique

Laurent Chemla et Julien Dudebout

Laurent et Julien nous ont expliqué les origines des services de courrier centralisés, notamment depuis Louis XI et comment cette centralisation permet une surveillance généralisée de la population y compris de nos jours à travers le courrier électronique (non crypté).

Via Caliopen et le Privacy Index (PI), ils proposent un début de solution pour informer l’utilisateur sur le niveau de confidentialité au moment de ses échanges électroniques.

Alors qu’y a-t-il d'ici ES2020 ?

Christophe Porteneuve

Christophe nous a rappelé le rôle du TC39 (organisme de standardisation du Javascript) et le processus suivi par chaque standard qui finit par être (ou non) implémenté dans nos navigateurs.

Quelques nouveautés qui devraient voir le jour avant 2020 (non exhaustif):

• Import dynamique
• Virgule terminal dans les paramètres de méthode
• async/await dans les boucles for
• Les Décorateurs : programmation orienté aspect (AOP)
• RegExp avec groupes de capture nommées, support unicode
• Observable : basé sur Rxjs 5 (Rxjs suit désormais le standard)

Le typage n’est pas prévu au menu des standards car ce que propose la communauté est déjà très bien (TypeScript, Flow…)

L’accessibilité à l’ère de l’intelligence artificielle

Elie Sloïm & Denis Boudreau

Elie et Denis nous ont montré à quelle point l’intelligence artificielle peut apporter un confort nouveau à travers des services d’assistances directement portés par l’utilisateur, générant alors un web "ambiant" qui nous entoure à chaque instant.

Parmi ces services on peut citer:

• La reconnaissance faciale
• La langue des signes
• La traduction automatique
• Le résumé de texte automatique

Bien entendu, ces nouveautés questionnent sur l’avenir de nos métiers. Va-t-on être remplacé par des IA ? A priori non (pas tout de suite...), car ces IA ont besoin d’apprendre et l’humain sera pour ça plus "smart" qu’une machine (pour combien de temps ?...)

L’Informatique est trop importante pour être laissé aux hommes

Nathalie Pauchet

Encore aujourd’hui les femmes sont discriminées sur plein d’aspects de la vie, personnelle et surtout professionnelle.

Cette discrimination va jusque dans l’héritage de l’écriture genrée.
A cette occasion, j’ai découvert l’écriture non genré et le "Point médian" qui sert à finaliser les mots concernés par le genre.

Souriez (?) #GDPR, #PrivacyByDesign, #PrivacyByDefault deviennent réalité !

Stéphane Lebarque

Depuis le 25 mai 2018 le nouveau règlement Européen sur la protection des données sera applicable.

Teaser : C’est le règlement qui promet des amendes de 4% du chiffre d’affaire mondiale d’une société (qui elle même peut se retourner contre un sous traitant...) si un utilisateur se plaint d’une fuite de donnée personnelle...

• 99 articles règles respect caractère perso en europe mais aussi monde
• Dès le design
• Méthodo CNIL

Pour autant la nouvelle directive ePrivacy associée aux communications électroniques semble ne pas être encore suffisante aux yeux de certains acteur du net

UX en Agence, 5 ans pour s’y mettre en vrai

Nicolas Le Cam

Nicolas est revenu sur la création et les errements de son agence LunaWeb, jusqu’à aujourd’hui où elle assume pleinement les valeurs de son approche centrée utilisateur, avec au passage quelques rappels essentiels :

- Importance de prendre du temps en avant vente, pour amener le client dans la démarche
- Utilisateur intégré dès le début
- Prendre le pouvoir : assumer ses valeurs, challenger le client
- Prise de conscience client via les tests utilisateurs 

HTML re-invented for the age of the web apps

Lea Verou

Lea (qui a un débit de parole de fou !) part d’un constat : Créer un simple site web est vraiment compliqué, voire impossible si vous n’êtes pas développeur.

Elle s’est associée à un groupe de recherche (MIT CSAIL) qui travail sur la question et nous fait découvrir MAVO (projet open source) qui propose de créer un site web complet à partir d’une bibliothèque de composants directement éditables à partir de l’interface.

Le projet est vraiment intéressant mais le plus simple c’est de l’essayer !

Namaste qualité

Marie Terrier

Marie a partagé son expérience de collaboration avec des développeurs Indiens aussi bien sur place qu’à distance.

Au delà du cliché sur les développeurs Indien, elle nous montre que bien travailler avec eux est largement possible à condition de connaître et respecter certaines différences culturelles.

Au final, atteindre un bonne culture qualité demande d’appliquer les même bonnes pratiques que ce soit en France ou en Inde, ou ailleurs...

Lecteurs d'écran : le choc des titans

Sylvie Duchateau

Sylvie est aveugle.

Elle est revenu sur son expérience personnelle qui l’a conduite à travailler pour Braillenet puis Access42.

Elle a partagé avec nous sa connaissance approfondie des différents lecteurs vocaux du marché en nous indiquant leurs différences en fonction des OS et navigateurs.

A travers des démonstrations claires et ludiques, elle nous a aussi montré à quelle point un développement adapté à ces lecteurs est indispensable pour permettre l’accès à nos services et contenus par les personnes ayant besoin de ces lecteurs (pas seulement les non voyant !)

Au passage, elle nous a signalé la mise en application prochaine de l’article 47 de la loi pour une République Numérique, concernant les entreprises privées délégataire de mission publique ou dépassant un certain chiffre d’affaire qui les oblige à se mettre en conformité pour l'accessibilité...

Améliorer la performance : entre réalité et perception

Geoffrey Crofte

Du point de l’utilisateur, la performance peut être rapidement affaire de perception.

Geoffrey a donc balisé les différentes solutions en partant des plus techniques (choix du serveur, cache, mise à jour, etc...), en passant par les bonnes pratiques d’ergonomie, jusqu’à mentir à l’utilisateur (pour son propre bien, bien sûr !)

Rendez vous en terre inconnue

Matthieu Bué

Matthieu a partagé son expérience sur son intervention dans un projet où l’équipe galérait pour intégrer un interface web complexe (imaginez recoder gmail…).

En intégrateur chevronné, il s’est engagé à fournir un résultat dans les délais…

C’était sans compter sur la stack technique qui impose des choix cornéliens, les infos données au goutte à goutte et le nombreuses refactorisations CSS conséquentes…

NdR : Son expérience montre à quel point la modularisation des templates, le principe de "Separation of concern", les design system sont nécessaires dans des projets de plus en plus complexes, y compris pour l’intégration HTML/CSS !

Jour 2

L'épopée d'une couleur

Maryla U.

Marylu a partagé avec nous ces connaissances sur la couleur, acquise durant ces dernières années chez Google sur le projet Camera Art (numérisation haute définition d'oeuvres d'art).

Dès 9h du matin c’était du costaud !

Mais Maryla a tellement bien construit sa présentation que j’ai tout compris sur la couleur (enfin de ce qu’elle a expliqué ;) ) !

Pour résumer vulgairement son propos: Personne ne peut voir strictement la même couleur !

Nous pouvons tout de même agir en amont sur la qualité des captures (appareils photos, caméra) et des restitutions (calibration des écrans) fait par nos appareils pour se rapprocher de la vraie couleur (longueur d’onde entre 400 et 700 nm qui définit le spectre lumineux visible pour un humain).

J’ai notamment retenu, l’introduction des profiles exif dans les navigateurs via CSS Color Module level 4 (profile srgb, @working-color-space, …)

Why Fast Matter

Harry Robert

• Trainline : 0.3 second de latence en moins = + 8.1. Million £ / an
• Netflix : diminue de 43% sa consommation de bande passante en compressant ses sources en... gzip
• GQ dimininue de 80% son temps de chargement = +32% de temps de fréquentation

Voilà comment commence la conférence de Harry.
Il égraine de façon ininterrompu les business cases, les bonnes pratiques et les solutions techniques.

En pagaille :

• wpostats.com = performance cases studies
• Low connection is common !
• "The next billion users" (inde, indonesie, chine) : des connexions lentes sur des appareils bon marché mais un taux d’équipement énorme !
• Mobile first ! : tester sur une bande passante basse systématiquement
• Dareboost : comparaison de site concurrents , reporting performance
• SpeedCurve : historique des temps de connection au site (avec budget temps, profiles...)
• "Facebook's 2G Tuesday"
• Charles : simulation réseau lent (ou sinon network link conditioner sur smartphone)
• Geekaphone : comparaison perf entre smartphones
• csswizardry : le site de Harry :)
• Utiliser de vrais devices pour tester la perf et toujours le plus lent
• Nous faisons charger au nav des tonnes de fichiers dont l’utilisateur se fou complètement !
• Chrome dev tool : onglet performance > bottom-up > Group By Domain
• Chrome : Experiment > source network group (?)
• Tag manager, quand c’est mal géré = source de blocage javascript
• User expérience plus important que nos propres mesures
• Tout mesurer !
• Google analytic reporting de perf par région du monde

Design et Accessibilité, frères d'armes ou ennemis ?

Aurélien Levy et Julien Dudebout

Aurélien est expert accessibilité, Julien est designer.

"L’accessibilité c'est moche !"

Aurélien et Julien déroulent un dialogue qui met en scène les échanges que peuvent avoir un expert accessibilité et un design sur un projet professionnel (avec un client, des utilisateurs, une équipe technique, des délais etc…).

A la fin, la page, ambiance "voyage lunaire dans le vide de l’espace" , est accessible et belle !... A condition d’instaurer une confiance mutuelle et une bonne dose de compromis !

NdR : Cela montre encore, à quelle point la phase de préparation d’un projet est essentielle : avant de commencer, mettons nous d’accord, et partageons la même vision du projet !

A noter :

• @media reduce-motion
• WCAG 2.1 = impact important sur le design !

Let's Work Together

Brad Frost

On commence à connaitre les guides de style.

Ce qu’on connaît moins, c’est à quel point ils peuvent être le reflet de l’organisation entière d’une entreprise.

Brad, qui est surtout connu pour "Atomic Design", plonge en profondeur dans cette citation fondatrice de nos applications modernes :

"We’re not designing pages, we’re designing systems of components."

— Stephen Hay

Il nous explique tout le processus qui va réunir les différents services d’une entreprise (marketing, design, communication, développement, ressources humaines, …) autour de la co-construction d’un "design system".
Ce système sera la pierre angulaire de cette entreprise dans la réalisation de ses projets, et surtout dans l’affirmation de ses valeurs au quotidien. C’est donc aussi un outil pour fédérer !

Quelques exemples :

• Material Design
• IBM - Carbon Design System
• Ubuntu Brand Assets
• MailChimp Content Style Guide (celui ci est ouf !)
• SalesForce

Quelques outils :

• Figma (comme Sketch, en ligne)
• Adobe Creative Cloud
• Photoshop Etiquette (bonnes pratiques)
• Frontend Guidelines Questionnaire (question pour bien construire son guide de style)
• Styleguide guide (Brad Frost, this guy is damn good ! )

J’entre dans un magasin…

Boris Schapira

A travers une mise en situation dans un magasin physique, Boris égrène les errements parfois douteux, les incohérences et les insuffisances des boutiques en lignes.

En résumé :

• On y vend tout et n’importe quoi
• Mauvaise qualité des données récoltées
  • mauvaise suggestions ou stéréotypées, voire manipulées,
  • vente forcée
  • but de la récolte pas clairement annoncée (pas assumée)
  • pas de consentement de l’utilisateur
• Expérience client pauvre
  • infos produit incomplètes ou inappropriées,
  • pas de conseil à l’achat
  • fidélisation abusive (client fidèle = qui parle de vous, pas qui revient)

CSS tu peux pas test

Thomas Zilliox

Faire du CSS peut être vécu comme une punition par les développeurs.

Le CSS c’est pas simple :

• Bugs de support des navigateurs (ndr: C’est quand mieux qu’avant !)
• 2300 devices différents
• Complexité propre (spécification toufue)
• Revue de code pas efficace : Lire du CSS n’est pas
• Difficile à maintenir (pas de Class, de structure…)
• et… testable !

Il y a bien des outils de test automatique par "vue" (ie. Persy) mais pas de solution pour tester au niveau composant.

Les tests restent donc majoritairement manuels (BrowserStack, Saucelabs, Storybook) mais ne sont pas efficaces pour détecter les régressions à l’échelle d’un site ou d’une application.

NDR : Pour anticiper, utiliser PostCSS pour écrire du code CSS qui sera automatiquement préfixé suivant le niveau de support navigateur cible

Il y a des linter (analyse statique du code, voire style du code) comme CSSComb (plus ancien), Prettier + Stylelint (plus moderne), Bemlinter (BEM = une méthode basée sur une convention de nommage), qui assure au moins un peu plus de cohérence dans le style du code CSS partagé.

Enfin, une bonne manière de réduire l’effort de maintenance est le découpage du code en plusieurs fichiers CSS organisés par composants.

Devenir mentor

Sonia Prévost-Mercier

Retour d’expérience intéressant sur le mentoring plein de bienveillance !

Portrait du mentor

• expérimenté, attentif et sage
• accompagner l'apprentissage en douceur

Pourquoi être Mentor ?

• continuer à apprendre, consolider ses connaissances,
• liens différents et forts entre mentor et l’élève
• faire progresser l’équipe et l’entreprise
• enrichir les communautés sous représentées, minoritaires

DO , DO NOT

• ne pas brusquer,
• remarquer les progrès (vs défauts),
• ne pas jouer au prof.
• poser des questions (gentillement),
• s' adapter à l'apprenant
• encourager (lister les réussites),
• laisser le clavier,
• se rendre disponible
• challenger , laisser chercher

Accessibilité vite fait

Mylène Chandelier

Un guide pratique de règle pour intégrer l’accessibilité à nos projets

A retenir :

• www.mylene-chandelier.me/pw17/
• Atalan AcceDe Web : documents pratiques et opérationnels pour la prise en compte de l’accessibilité numérique
• aXe : plugin chrome firefox pour tester l’accessibilité (pas testé)

De mes 100 échecs, j’ai fait une application de communication universelle

Olivier Jeannel

Olivier Jeannel est sourd depuis l’âge de 2 ans et au lieu de se plaindre du manque d’outil de communication moderne adapté à son handicap, il est devenu entrepreneur et a créé Roger Voice (Son écrit, écrit vocalisé, le tout traduit en temps réel !).

Échapper au 'zombie styleguide' : 3 méthodes pour armer une équipe dans la conception de son styleguide

Thibault Mahe

Un Styleguide c’est bien mais comment le maintenir pour ne pas aboutir à un Nième document qui ne reflète plus du tout la réalité au bout de 6 mois : un "Zombie Styleguide" !

Quelques pistes en vrac (pas exhaustif du tout ! Sinon regardez la vidéo de la conférence, c’est plein d’infos !)

• Matrice de proposition de valeur (méthode LEAN)
• "Thinking in systems" (Styleguide, Design system, atomic design)
• "Design tokens", variables SASS
• Brand.ai