ParisWeb 2016

mercredi 5 octobre 2016

De retour à la conf des gens qui font le web.

Comme en 2015, j’ai eu la chance d’aller manger les petits fours et en errant à la recherche de têtes connues à l’occasion de Paris Web 2016. La bonne nouvelle, c’est qu’il y a plus de têtes connues par rapport à l’an dernier.

Paris Web est une conférence annuelle basée à Paris, qui rassemble le microcosme des artisans français du web autour de sujets touchant aux technologies du web, au design et à l’accessibilité. Mon employeur m’y envoie à condition que j’écrive un compte-rendu des conf auxquelles j’assiste, je les publie sur Medium pour en faire profiter le plus grand monde. Voici mon compte-rendu de Paris Web 2015 .

Après une mission assez longue chez un client, j’ai réintégré mon équipe en interne le mois dernier : ça m’a permis de me rendre compte plus en détail des savoirs et process qu’on a ensemble en interne. C’est sous cet angle-là que j’ai abordé les différents talks de la conférence : d’une part dans le cadre de l’équipe, et aussi pour mon périmètre. De plus, certains talks se détachaient encore par leur caractère universel, j’en parle à la fin.

Si vous voyez des erreurs ou des flous dans ce texte, n’hésitez pas à me contacter : @joachimesque )

---

Ce qui va être utile à mon équipe

Est-ce que le développement serait si amusant s’il n’y avait pas continuellement une nouvelle techno à adopter ? J’ai entendu les collègues parler de Docker et Capistrano, j’y pigeais rien. Jusqu’à ce que David Sferruzza explique le principe.

Pour éviter de tout gérer soi-même à la main (ce que je fais pour mes projets perso), il y a toute une série d’outils pour travailler à plusieurs sur le même projet ou automatiser les tâches. Git, on l’utilise déjà dans l’équipe, comme NPM ou Grunt. En revanche, tout ce qui est CI (Intégration Continue) ou déploiement, on n’a pas encore touché. Les gars, regardez du côté de GitLab CI, Docker, Deployer ou Capistrano… mais avant ça, regardez les slides (en attendant la vidéo).

Le déploiement manuel : non merci, j’essaye d’arrêter !
Par David Sferruzza — Sur paris-web.fr — Les slides

---

Certains de nos projets n’ont pas besoin de grosse base de donnée, d’énormes serveurs qui peuvent traiter des millions de requêtes à la minute. Parfois, moins c’est mieux. En l’occurence, la technologie commence à être mature du côté des générateurs de sites statiques ; bien utilisé, un système statique auquel on ajoute un Headless CMS est plus performant, scalable et moins cher. Bref, il y a plein d’outils sympathiques à découvrir. Peut-être même un peu trop .

Ne passons pas à côté des choses simples
Par Franck Taillandier et Bertrand Keller — Sur paris-web.fr — Les slides & le support texte

---

Un site dans une langue, c’est bien, dans plein de langues c’est mieux mais beaucoup plus compliqué. L’internationalisation (i18n pour les intimes), c’est à penser en amont, et ça impacts toutes les étapes du développement. Du contenu (qui va traduire ?) au back-end (comment stocker les dates ?) au design (écriture de gauche à droite, de droite à gauche ? polices de caractères adaptées ?) au référencement, ou à l’intégration de fonctionnalités (quels outils utiliser ? Google est interdit en Chine), rien ne s’improvise, il faut tout spécifier dès le début.

Lancer son site à l’international, facile ? Oui, si l’on pense à tout !
Par Aurélie Guillaume — Sur paris-web.fr — Les slides

---

Paris Web m’étonne toujours par les moyens déployés, notamment en matière d’intervenants étrangers. On a une traduction simultanée assorti d’une vélotypie, comme ça c’est accessible pour tous, même ceux qui ne comprennent pas l’anglais. C’est fou. Comme ça on peut avoir des intervenants étrangers et on ne reste pas à tourner en rond dans notre communauté web française.

---

Les tests d’utilisabilité sont une étape cruciale du développement d’un produit, malheureusement le manque de moyen nous empêche de bien le faire (ou le manque d’intérêt de la part des décideurs, mais ça c’est un autre problème). Tester une app mobile, c’est la mettre entre les mains d’un sujet qui n’y connait encore rien et voir s’il s’en sort. Filmer ces tests, c’est parfait pour se souvenir des résultats, pour communiquer plus facilement, et pour générer de l’empathie avec les vrais utilisateurs.

Là, Belen Pena et Bernard Tyers nous proposent un protocole à faire soi-même (DIY, Do It Yourself ), à base de webcams, de patafix, de Linux et de pièces de Meccano, pour filmer l’écran et le visage d’un testeur, et mieux comprendre ses réactions. Le talk était très réussi : ils ont pu faire une démonstration sur la scène pour tester le site des Aéroports de Paris sur mobile. Le site lui-même est inusable.

CDG airport web site totally destroyed on stage by conference on mobile user testing #parisweb HILARIOUS !!!

— Daniel Glazman (@glazou) 29 septembre 2016

DIY Mobile Usability Testing
Par Bernard Tyers et Belen Barros Pena — Sur paris-web.fr — Les slides

---

Il est des talks dont je ne comprends pas tout, mais dont je sais qu’ils peuvent être importants. La sécurité, par exemple, c’est important. Les données de chacun sont à la merci des hackers, plus personne n’est à l’abri. La sécurité est la responsabilité de toutes les entreprises (PME comme CAC 40). Jérémie Jourdin et Benjamin Leroux sont experts en sécurité et donnent quelques pistes pour envisager les bonnes pratiques de sécurité dès le début d’un projet. Ça peut vouloir dire éviter les mauvaises décisions (mauvais usage de chiffrement, pas de logs…), prises pour de mauvaises raisons (time to market, faible sensibilisation sécurité, manque de contrôles…). La sécurité ça s’apprend, il ne faut pas réinventer la roue et investir dans des bons process.

Web Security by design
Par Jérémie Jourdin et Benjamin Leroux — Sur paris-web.fr

---

Le retour d’expérience, c’est un exercice un peu périlleux : comment rapporter les enseignements d’un projet, sans partir trop dans le détail et rester pertinent ?

Le talk de Noëlie Andrieu est bien conçu sur ce plan là. Au lieu d’une liste technique de ce qui a été fait dans le projet en question, elle nous parle de l’approche personnelle à adopter, de méthodes qui permettent de comprendre/mesurer/être à l’écoute pour bien avancer. Étaient abordées aussi les questions du management, et son utilité, ainsi que les personnes : la maturité, positivité et l’écoute dont elles doivent faire preuve. Plein d’idées utiles, j’attends les slides !

Retour d’expérience sur la refactorisation d’une application d’e-mail
Par Noëlie Andrieu — Sur paris-web.fr

---

Ce qui va m’être utile

Le syndrome de l’imposteur, c’est le décalage entre les compétences perçues et les compétences réelles. Quelqu’un qui en souffre trouvera toutes les excuses pour ne pas faire valoir son expérience. « J’ai pas de diplôme/expertise/idée cool » (rayez la mention inutile)

Pour s’en défaire, pourquoi ne pas redécouvrir ses compétences en les mettant en avant en participant à des conférences ou en participant au monde de l’Open Source ? Ici, Agnès Haasser raconte comment elle a dépassé ce syndrome, et conclut que ce qui est évident pour soi ne l’est pas forcément pour tous : c’est bien de partager ses connaissances.

Libérée, délivrée… du syndrome de l’imposteur
Par Agnès Haasser — Sur paris-web.fr — Les slides

---

L’Open Design, c’est curieux. On connait l’open source pour le développement logiciel, mais pour le design c’est loin d’être aussi riche et développé. À travers quelques exemples, My Lê nous a montré l’effervescence autour du partage en matière de design. Au niveau des connaissances, les designers on tendance à cacher leurs process, sans doute parce qu’ils sont payés pour le process. La solution c’est d’ouvrir, de partager. Dans le monde typographique, quelques fonderies libèrent leurs polices, notamment Velvetyne ou Open Source Type Foundry. Si on choisit ces d’utiliser ces typos, on lutte contre l’uniformisation (voir le talk suivant) et on soutient la démarche des graphistes dans l’Open Source. Le troisième exemple portait sur le rebranding de Mozilla.

À la suite de ce talk, il y a eu une informelle (une conf « improvisée », espace de conversations). Il en est ressorti plusieurs idées chères aux graphistes

• le design est perçu moins comme une expertise que comme un truc artistique sur lequel tout le monde doit avoir un avis
• le rebranding de Mozilla est l’exemple même du design by committee , et gagnerait peut-être à un benevolent dictator pour trancher
• @hellgy conseille de demander pourquoi ? à chaque commentaire, ça a tendance à départager ce qui est pertinent de ce qui ne l’est pas
• @l_myle_l ajoute la règle des 5 pourquoi , qui fait la même chose, mais encore plus profondément
• le plus important pour faire accepter un design, c’est la pédagogie

Open Design
Par My Lê — Sur paris-web.fr — La transcription

---

En ce moment, tous les sites se ressemblent ! , c’est le constat qui ouvre la présentation. Il y a beaucoup d’homogénéisation dans le web, due au plagiat ou aux templates, ou au syndrome de on-ne-va-pas-réinventer-la-roue. Utiliser un thème déjà fait, c’est utiliser une antisèche qui n’a pas la bonne réponse. Le principal, nous dit Amélie Boucher, c’est d’être soi, et d’apporter du sens aux projets. Pour ça, il faut rechercher, trouver un regard neuf, se poser les bonnes questions et découvrir le domaine. Ça passe aussi par le détail, réfléchir à ce qu’on veut montrer/cacher, et être conscient qu’une réponse de design peut être liée au contenu. Le process peut aussi aider, par exemple en se mettant dans la peau de l’utilisateur, en ne partant de rien ( l’esprit du débutant ), en faisant attention aux fausses bonnes idées que sont le benchmark ou le brainstorm, et surtout en sortant de sa zone de confort.

C’était une présentation très intéressante, que je conseille à tout travailleur « créatif ».

Questionnements sur l’Internet prêt-à-porter
Par Amélie Boucher — Sur paris-web.fr — les slides

---

Les sélecteurs CSS, il y a des tonnes à dire sur ce sujet, mais Gaël Poupard s’est bien débrouillé pour en tirer la substantifique moelle, en proposant à la fin son projet a11y.css , un outil CSS pour contrôler le markup HTML sur certains sujets d’accessibilité (genre contrôler la présence de l’attribut lang dans la balise .

L’usage de sélecteurs dans le genre de [aria-hidden=”true”] au lieu d’ajouter/enlever des classes spéciales dans nos scripts peut être plus pratique. On peut aussi en économiser en utilisant [class=”btn”] au lieu de .btn.btn-red.btn-big ou autre horreur. Et puis ça, c’est joli : main + * { margin-top: 1em; } (au lieu de faire des tas de p:first-child { margin-top: 0; }).

Maintenant, il faut que je me renseigne sur Atomic CSS et Tachyons , je crois que ça peut m’intéresser.

Il n’y a pas que class et id dans la vie
Par Gaël Poupard — Sur paris-web.fr — La transcription

---

Cette présentation très complète portait sur les nouveautés qu’apportera la spec HTML5.1, par exemple les service workers , les notifications push , l’API Gamepad (pour les jeux dans le navigateur), et les trucs dont on ne sait pas encore si ça existera un jour (genre ContentEditable ).

HTML 5.1 + Web Platforms API
Par Léonie Watson et Charles McCathieNevile — Sur paris-web.fr — Les slides

---

Leboncoin, c’est le site jaune qui a changé récemment (mais pas trop). Son design est basé sur la simplicité d’utilisation, lors de la refonte responsive, l’accent a été mis sur l’UX, le « pixel » est passé après. Pour un tel projet, ils ont rassemblé des talents très différents mais complémentaires, et ont coupé la chaine décisionnaire habituelle. Il leur a fallu se former auprès d’autres équipes de leur groupe, et auprès de consultants extérieurs. Avec 40% de visiteurs sur mobile, la refonte était un vrai enjeu, qu’ils ont pu réussir en faisant les changements petit à petit, workflow par workflow. Ils ont pu recruter un très grand nombre de testeurs pour leurs beta grâce aux réseaux sociaux (il leur a fallu lire 70000 réponses). Les leçons finales, c’est de faire les features progressivement, d’écouter les utilisateurs, de ne pas trop se couper des décisions des autres équipes de la boîte (c’est plutôt important, ça), et surtout de bien communiquer au sein de sa propre équipe.

Leboncoin, les coulisses d’une refonte graphique
Par Margaux Chenard et Jérémie Pereira— Sur paris-web.fr

---

Une expertise de graphiste au milieu d’une équipe de dev c’est toujours une richesse, mais ça passe d’abord par le partage et la présentation du métier (peu de développeurs savent en quoi ça consiste vraiment), et cultiver les à-cotés comme le dessin, etc. Et puis ça peut être intéressant d’avoir l’avis de devs sur des sujets de graphistes.

Une graphiste parmi les dev
Par Florie Séchaud — Sur paris-web.fr

---

Ce qui va être utile au plus grand nombre

En regardant mes notes, il y a trois talks qui m’ont vraiment enthousiasmé, c’est là qu’il y a le plus de pages noircies, de mots soulignés et de flèches dans tous les sens. Étrangement, c’est des sujets plus larges que de la technique ou du retour d’expérience, ça a à voir avec le web et la façon dont il influence les sociétés.

Les données personnelles, c’est le pétroles du web ; qui a un gisement de data, domine. Apple récolte, Google récolte, Amazon en sait sûrement plus sur moi que ma maman, Facebook et Twitter n’en parlons pas. Il y a aussi les data brokers , qui récupèrent toutes les données utilisateurs possibles, les croisent, et en font des profils le plus détaillé possible pour nous envoyer des publicités pour du viagra.

L’existence de données utilisateur peut être positive mais elle est beaucoup plus souvent négative. Quand le site d’une pharmacie contient un tracker de Google, Google sait quels médicaments j’achète, et donc quelles maladies je peux avoir.

En tant que professionnels du web, on a une responsabilité dans la protection de la vie privée, la notre et celle des utilisateurs pour qui on fait des sites. En l’absence de contexte, toutes les données doivent être considérées comme sensibles ; une donnée peut être indirectement sensible. Adoptons un principe de précaution, et offrons la possibilité aux utilisateurs de modifier/supprimer leurs données.

Il faudra donc « dératiser » nos sites, notamment en analysant les logs ou en hébergeant les outils soi-même (au lieu de faire appel à Google), en hébergeant aussi ses typos et en n’incluant pas de maps google… Il faudra aussi toujours activer le chiffrement, réinternaliser/désexternaliser les données, par exemple les commentaires, ne pas empêcher les utilisateurs de protéger leur vie privée, et plein d’autres choses.

Anatomie d’une désintoxication Web sous surveillance
Par Thibault Jouannic — Sur paris-web.fr — Le support texte — La transcription

---

Le Web a énormément grossi depuis ses débuts il y a 20 ans ; les pages web ont grossi 115 fois : plein d’images, de scripts, de typos, etc. Grâce à l’explosion du web et maintenant des apps, Internet a une empreinte environnementale plus grande que deux fois la France.

Le principal impact se situe au niveau des terminaux, et non des réseaux ou des serveurs ; en tant que dev web, on ne peut pas allonger la durée de vie des smartphones et ordinateurs personnels… en revanche, on peut réduire le besoin en terme de serveurs et de bande passante. L’important, c’est la frugalité et l’efficience.

Malheureusement, il n’existe pas de certification officielle « écoconception de services numériques » type écolabel, bien qu’il y a une demande de la part de grands groupes ( Il ne faudrait pas non plus que ça devienne un argument de green-washing). En revanche, beaucoup de petites structures en France se posent la question et bâtissent des réseaux de connaissance et de bonnes pratiques au niveau régional.

Parmi les bonnes pratiques à développer, il faut centrer la conception sur le fonctionnel ( Le designer en moi est horrifié, l’utilisateur en moi applaudit des deux mains, l’écolo en moi enlève ses chaussures pour applaudir aussi des deux pieds ), avec une approche frugale et sobre. Au niveau design et UX on bosse en mobile first, on purifie l’interface (pas trop d’images—bande passante—ou d’animations—puissance processeur), au niveau technique on adapte les choix techno à l’usage ( voir plus haut la conférence sur les sites statiques ), on évite les plugins genre flash ou java, etc…

Dans l’esprit des gens, le web est immatériel. Mais nous, les concepteurs, on sait que tout ça a un coût, à nous de réduire ce coût.

Éco-conception : mon site web au régime
Par Frédéric Bordage — Sur paris-web.fr — Les slides

---

Bruce Lawson travaille chez Opera, les développeurs du navigateur éponyme. Chez Opera, ils se préoccupent énormément des 4 milliards d’internautes à venir, en provenances des pays en développement. Sa conférence était très intéressante pour briser les idées reçues sur tous les utilisateurs qu’on ne voit pas. Énormément de gens n’ont pas commencé avec Internet sur un ordinateur, par exemple, mais via un téléphone mobile. Il faut donc penser à construire le web en tenant compte de ces limitations. Par exemple, au lieu d’apps faites depuis un marketplace, les progressive web apps sont beaucoup mieux : toujours à jour, et peuvent s’utiliser sur toutes les plate-formes, et même offline grâce aux Service Workers . C’est d’ailleurs en Asie et en Afrique qu’on voit le plus de web apps natives ( Pour des exemples, voir pwa.rocks ).

_It doesn’t matter how smart your device is, if your network is dumb
_Pour accélérer l’accès au web, Opera a mis en place un navigateur proxy : les pages visitées par un utilisateur sont compressées par un serveur, puis envoyées au device de l’utilisateur, de manière dégradée certes, mais beaucoup plus rapide. Il faut donc oublier les typos web (surtout pour les icônes, le SVG c’est le bien), les coins arrondis ou les animations. Là on parle web basique, mais web accessible sur un réseau lent ou soumis aux coupures de courant.

WWW : World Wide Web, not Wealthy Westerners’ Web
Par Bruce Lawson — Sur paris-web.fr — Les slides

---

J’ai aussi assisté à deux ou trois autres talks assez intéressants mais peu pertinents à ce compte-rendu, et aux lightning talks, très sympa… mais j’ai pas pris de notes, il faudra les regarder en vidéo.

Parmi les sujets des talks auxquels je n’ai pas assisté et qui m’intéressaient aussi, il y avait :

• La Blockchain , on m’en a dit le plus grand bien (et sans langue de bois)

• Les Beacons , comment augmenter le monde physique, dans le cadre par exemple d’une visite de musée ?

• L’accessibilité décomplexée , j’admets que le résumé me laisse sur ma faim, j’attends la vidéo

• Les ateliers de co-conception UX , j’admets volontiers que l’UX est pour moi un domaine à explorer (mais à la différence de beaucoup de directeurs artistiques qui se la pêtent, je sais que c’est une discipline à part entière et pas juste une excuse pour vendre du design minimaliste et des boutons hamburger), heureusement les slides sont déjà là

• Les Progressive Web Apps , j’attends la vidéo avec impatience, étant donné que la salle était archi-pleine

• L’accessibilité au delà des référentiels , il faudrait déjà que j’arrive à sensibiliser les gens pour qui je fais des sites, sur les sujets de l’accessibilité. Mais c’est bien de savoir comment aller plus loin

• Le design de l’audio , un talk dont on m’a beaucoup parlé, et que j’ai pu revoir avec Carine , la conférencière

J’ai lu quelques articles au sujet de cette édition de ParisWeb, sur le manque de diversité dans le type de conférenciers présents (depuis 10 ans). Personnellement, je suis pour plus de diversité. En tant que participant, j’ai été content de voir sur la scène et dans les couloirs des gens qui ne me ressemblaient pas. Je sais que l’organisation de ParisWeb fait beaucoup de travail dans ce sens, il faut continuer, et amplifier le mouvement. Je ne dis pas ça pour plonger moi aussi dans la polémique, mais bien pour souligner l’importance de la discussion.

---

En conclusion de ce long—très long—compte rendu, j’ai appris plein de choses et passé des bons moments avec des amis professionnels que je ne vois que pas assez souvent. L’an prochain j’y reviens, avec peut-être une idée de conférence sous le bras, mais surtout avec plein de collègues. Ils verront à quel point c’est fondamentalement bien de se connecter à tant d’autres gens qui partagent leur savoir, leurs pratiques, leur foi dans le web.

---

Initialement publié le 5 octobre 2016 sur Medium.