Retour d’expérience sur les ateliers #parisWeb

Une journée sur l’accessibilité et la performance web

J’ai testé les ateliers de Paris Web 2014
Par David Leuliette le

Samedi, réveil matin 5h direction la capitale. Au programme ? une journée d’ateliers organisés par l’association Paris Web. Les 3 thématiques de cette année : Qualité, Accessibilité & respect des standards ouverts.

Grâce à la magie d’internet un covoiturage est organisé, je retrouve d’autres Lillois passionnés de web @rbwebdev, @lellexindo et @kevinthenard. Pour l’année prochaine n’hésitez pas à nous mentionner sur twitter il restait une place dans la voiture.

Sac de goodies offertà Paris Web

Les chats envahissent le monde réel

Organisation

Pour la 9 année consécutive le staff de Paris web est bien rodé, et ça se voit. Dès votre arrivée c’est direction le check-in pour récupérer votre sac de goodies, le programme de la journée, et le plus important le mot de passe wifi !

On prends un café, plus de 150 participants sont attendus. En attendant on choisi son programme de la journée. Que vous soyez designer, graphiste, développeur ou simplement curieux vous avez le choix, le spectre de thématiques est assez important. C’est très difficile de planifier sa journée car n’avez le temps que pour 4 ateliers dans la journée.

Mon programme de développeur front-end

La veille, j’avais préparé mon programme "clone de whatsapp" à base d’HTML5 et d’Angular.js. Problème : je voulais absolument assister à l’atelier de @nhoizey sur la performance et le responsive web design. Quand je vous disais que c’est très compliqué de faire son programme de la journée. Au final j’ai choisi en temps réel mon programme en fonction de l’humeur du moment.

Un jeu accessible avec HTML5, JavaScript et ARIA.

Avec par Sylvie Duchateau et Victor Brito

Trop souvent négligée, l’accessibilité est cependant quelque chose de nécessaire pour certains sites. Sylvie nous a expliqué comment elle utilise le web au quotidien avec sa liseuse braille et un lecteur d’écran.

Sketchnote paris web 2014 technologie Aria croquis paris web 2014 accessibilité

J’ai approfondi mes connaissances de la technologie ARIA -autre que role="banner", et j’ai 2 ou 3 idées pour rendre le Framework Foundation encore plus accessible. Je suis convaincu que cette technologie peut apporter énormément de valeur aux utilisateurs et pas seulement aux déficients visuels.

Quand on voit ce qu’est capable de faire Google Now, Siri et Cortana, je pense que contrôler une application web intégralement à la voix n’est pas de la science fiction.

Finissons-en ensemble avec le mythe de Responsive Web Design lent

Avec Matthias Dugué et Nicolas Hoizey

Pourquoi je voulais participer à cet atelier ? Parce que @nhoizey c’est le meilleur #privateJoke. Plus sérieusement, si vous souhaitez faire de vrai interfaces web préparés pour l’avenir vous devez gagner votre indépendance vis à vis de la résolution d’écran. Pour cela : les mesures c’est en em ou rien.

La participation est au coeur de cet atelier. En partant d’un thème responsive hébergé sur GitHub, le but est de proposer des solutions au travers de pull-request. En plus le projet est un site statique -comme le mien. Génial ! … Et puis j’ai suivi le workflow qui est à mon avis le gros point noir : le temps de git clone le projet, bundle install les gems ruby et npm install le-reste-du-monde, vous avez déjà "perdu" pas mal de temps.

Ateliers paris web github et pull-request

Solution pour la prochaine fois : Afficher une liste de pré-requis pour les ateliers. Toutes ces opérations peuvent être réalisées en amont, à la maison sur une bonne connexion. Un simple tableau blanc peut aussi faire l’affaire : positionné au check-in du matin, on affiche une petite liste des choses à télécharger en fonction des ateliers.

Malgrés ces petits désagréments, j’ai quand même appris quelque chose : je suis déjà compétent car je mets déjà en place quelques bonnes pratiques pour la performance et cet atelier m’a permis de conforter mes idées : utiliser du SVG et optimiser ses images pour avoir un impact significatif sur le chargement d’un site.

Actuellement je gère les images HD avec du JavaScript mais demain j’utiliserais la solution srcset pour déléguer ce travail directement au navigateur. Pour en savoir plus je vous invite à visiter le site du Responsive Image Community Group.

Construire ensemble un enseignement Front-end

Avec Delphine Malassingne et Rémi Parmentier

Cet atelier essaye de répondre à la question suivante : Comment enseigner l’intégration pour que cela soit pertinent, pédagogique et pérenne. Nous sommes tous d’accord pour dire que dépiller la documentation HTML5 ou CSS3 en présentant toutes les balilse n’a aucun intérêt. Alors comment peut-on faire ?

Chacun est mis à contribution pour trouver une formule de création de fiche d’enseignement qui s’articule autour de 3 points :

  • Définir un problème
  • Trouver une solution
  • Appliquer la solution

Enseignement integration et developpement front-end fiche d’enseignement par l’exemple

J’ai souri en voyant la consigne car je pense exactement la même chose. Le but caché de ces fiches se résume à une chose : Apprendre à apprendre, car c’est la seule chose qui sera utile aux étudiants.

Si cette initiative vous intéresse il existe un repo sur GitHub. Vous pouvez aussi vous renseignez sur le mouvement webmakers de Mozilla.

Un peu de musique programmation d’ascenseur

Avec Thomas Parisot

J’avais fait mon choix dès le début de la journée. Si Thomas est présent, je vais le voir sans aucune hésitation. Arrivé en fin de journée, j’ai réalisé que suivre ses présentations est beaucoup plus simple que de faire un de ses exercices : du JavaScript pur, directement dans un navigateur sans utiliser Sublime… 1h30 plus tard nous sommes sortis bien #brainF$ck mais content d’avoir "programmé des ascenseurs".

Programmation JavaScript ascenseurs

Un peu de pub pour le FOSDEM en passant

Si vous souhaitez essayer, l’exercice disponible en ligne sur elevato.rs. L’objectif est de jouer avec JavaScript dans le but de faire bouger des ascenseurs. Mais attention à ne pas envoyer ces derniers au mauvais endroit :D

Mes conseils pour l’année prochaine

  • Prendre une rallonge / multi-prise. Avoir du jus et de l’internet c’est un peu le nerf de la guerre.
  • Se renseigner sur le contenu et essayer de récupérer les fichiers / la configuration nécessaire avant le début de l’atelier.
  • Arriver tôt au ateliers qui vous intéressent. Avec @rbwebdev j’ai instauré la règle du "En avance et premier rang"… Surtout pour choisir une place en fonction des prises disponibles.
  • Me contacter sur twitter pour organiser un covoiturage :D

Conclusion

Une journée intense où j’en ai appris un peu plus sur l’accessibilité, comment parler de mon métier, pour terminer avec du Vanilla JavaScript (Compliqué dès qu’on est habitué à CoffeeScript).

Un grand merci à toute l’équipe & bravo aux orateurs, vous êtes formidables.