Construire ensemble un enseignement du front-end pertinent, pédagogique et pérenne – Paris Web 2014

Avec Rémi Parmentier
Atelier, 1 h 30
Paris Web, octobre 2014

Un atelier-débat improvisé à Sud web en mai 2014 a permis de lister quelques pistes sur l’enseignement du développement front-end. Parmi ces pistes, la difficulté de la pédagogie et le manque d’outils sont ressortis. Il s’agit en effet de bien transmettre les principes et les spécificités du média (plus que la technique, peu complexe en définitive) sans lasser, sans assomer, sans braquer ou encore donner l’impression de couper les cheveux en quatre.

Nous vous proposons de concevoir ensemble des fiches pédagogiques qui permettraient :

  • aux étudiants d’avoir un projet ou un cas concret avec un problème clair à résoudre.
  • à l’enseignant de distiller les grands principes du web petit à petit à travers ces cas concrets, et pas présentés de manière théorique.

Le tout sera mis à la disposition de tous sur GitHub.

Aux experts de l’accessibilité fatigués

Vous n’êtes pas en charge de la prise en compte de l’accessibilité en France ; vous y avez contribué. C’est différent.
Vous avez œuvré pour en faire comprendre les enjeux, fourni des outils pour faciliter son intégration, transmis vos connaissances – et souvent votre enthousiasme.
Personne n’aurait de légitimité à vous reprocher d’arrêter. Pas même vous ; ce n’est pas un abandon, c’est un passage de relais.

Donc, si vous êtes usés, déçus ou que vous avez juste envie de passer à autre chose, recevez, via ce billet, mes humbles remerciements pour ce que vous avez fait pour l’accessibilité et tous mes vœux d’épanouissement dans votre nouvelle voie.

Ne vous inquiétez pas de la suite : certains ont déjà commencé à marcher dans vos pas ; je les vois. Et c’est ça aussi votre succès.

(Ce blog n’a pas une grosse audience mais si parmi les lecteurs certains se reconnaissent dans la relève (en gros, le sujet de l’accessibilité vous intéresse de plus en plus), je vous invite à vous manifester dans les commentaires. Ça nous fera plaisir de vous voir.)

Illustrations autour de l’accessibilité numérique

Ce n’est pas grand chose, mais ça m’a été utile et ça peut en aider d’autres. Voici quelques dessins qui servent à illustrer des idées autour de l’accessibilité numérique.

J’en ai eu besoin lors d’une conférence introductive (1) à la première session de Accessiday, journée consacrée à l’accessibilité numérique.

Les dessins que j’ai fais pour illustrer mes propos ont beaucoup plus et certains m’ont dit qu’ils pourraient en avoir besoin. Les voici donc à disposition ; ils sont en effet distribués sous licence CC BY-SA 3.0 FR.

Handicap vs. déficience

Un personnage en fauteuil roulant. Il souffre d'une déficience physique (permanente ou temporaire) à laquelle il pallie par le truchement d'un fauteuil roulant.
Un personnage en fauteuil roulant. Il souffre d’une déficience physique (permanente ou temporaire) à laquelle il pallie par le truchement d’un fauteuil roulant.
Un personnage en fauteuil roulant en haut d'un escalier. Il est en situation de handicap.
Un personnage en fauteuil roulant en haut d’un escalier. Il est en situation de handicap.
Un personnage en fauteuil roulant face à sa table de travail. Il n'est pas en situation de handicap.
Un personnage en fauteuil roulant face à sa table de travail. Il n’est pas en situation de handicap.

Aide technique – Le lecteur vocal

Un personnage aveugle face à un écran d'ordinateur. Il ne peut pas consulter le contenu.
Un personnage aveugle face à un écran d’ordinateur. Il ne peut pas consulter le contenu.
Un personnage aveugle face à un écran d'ordinateur. Par le truchement d'une aide technique -ici un lecteur vocal- il peut consulter le contenu.
Un personnage aveugle face à un écran d’ordinateur. Par le truchement d’une aide technique -ici un lecteur vocal- il peut consulter le contenu.

Aide technique – Les lunettes

Un personnage avec une mauvaise vue face à un écran d'ordinateur. Il n'arrive pas à lire le contenu.
Un personnage avec une mauvaise vue face à un écran d’ordinateur. Il n’arrive pas à lire le contenu.
Un personnage avec une mauvaise vue face à un écran d'ordinateur. Par le truchement d'une aide technique -ici une paire de lunettes- il peut consulter le contenu.
Un personnage avec une mauvaise vue face à un écran d’ordinateur. Par le truchement d’une aide technique -ici une paire de lunettes- il peut consulter le contenu.

Contexte – L’ensoleillement

Un personnage consulte son mobile. Bien que le texte soit peu contrasté, le personnage n'est pas gêné.
Un personnage consulte son mobile. Bien que le texte soit peu contrasté, le personnage n’est pas gêné.
Un personnage consulte son mobile en plein soleil. Le manque de contraste des textes sur l'écran ne lui permet pas de lire.
Un personnage consulte son mobile en plein soleil. Le manque de contraste des textes sur l’écran ne lui permet pas de lire.
Un personnage consulte son mobile en plein soleil. Le fort contraste des textes sur l'écran lui permet de lire facilement.
Un personnage consulte son mobile en plein soleil. Le fort contraste des textes sur l’écran lui permet de lire facilement.

Le daltonien

Un daltonien ne perçoit pas les couleurs correctement.
Un daltonien ne perçoit pas les couleurs correctement.

Si vous utilisez ces dessins, j’en serais ravie ! Signalez-le moi via les commentaires 😉

Notes :

(1) Conférence  » Accessibilité numérique, mais au fait de quoi on parle ? » Retour

À propos : Si vous aussi vous voulez faire des croquis, je vous conseille d’aller faire un tour chez Eva-Lotta Lamm

Comment enseigner l’intégration HTML ? – Sud Web 2014

Élaboratoire improvisé suite à la conférence de Rémi Parmentier « Faire comprendre son métier » et suite à une question de Delphine Malassingne à la fin de la conférence.

Débat ouvert pour trouver quel devraient-être le contenu et la pédagogie d’un enseignement de l’intégration front.

Voir aussi l’atelier qui y a fait suite : Construire ensemble un enseignement du front-end pertinent, pédagogique et pérenne – Paris Web 2014

Crédit photo : romytetue

Bonnes pratiques des API – Compte-rendu

Pour les besoin de mon projet Spoiled People (voir Projet de liste cadeaux sur GitHub), je dois monter en compétence côté API. Je suis allé voir du côté de la conférence « Bonnes pratiques des API ».

Cette conférence de 15 petites minutes est un retour d’expérience, y compris sur les ratés.

La première leçon qu’Éric Daspet a appris et nous transmet concerne la littérature et la pratique. Sans critiquer la littérature, son constat a été que d’un point de vue pragmatique, il vaut mieux s’adapter aux envies des utilisateurs (les développeurs).

Eric Daspet - Paris Web 2013 - Photo Brice Favre

Les recettes à suivre

Voici une première liste de conseils issus de cette conférence.

Internationalisation

  • Toujours mettre des heures et non juste une date
    Pas GMT mais en mettant un fuseau horaire que vous allez interpréter dans chaque paramètre)
    Voir le commentaire d’Éric ci-dessous.
  • Attention aux langues : anticiper la possibilité d’avoir plusieurs langues, utiliser UTF-8 (et non de l’ISO).

Pagination

  • L’offset sont de fausses bonnes idées.
  • Trier les données par ordre (alphabétique, de date, d’arrivée,…) et utiliser « after | before » (plus ancien ou plus récent que tel item)
  • Rendre la pagination obligatoire.
  • Mettre des limites de taille avec une profondeur maximum

Un bon exemple : Twitter

Versionnement

Même si dans la littérature, le versionnement peut être vu comme une mauvaise pratique, en l’état, nous ne sommes pas forcément prêt à nous en passer. Partir du principe qu’on va se planter et, alors, qu’on fera une V2 plutôt que mettre des bouts de sparadrap.

  • Prévoir un /v1 en bout d’URL dès le début

(NB : Le versionning dans les en-têtes n’est pas assez simple et ne sera pas pratique pour vos utilisateurs et donc ne servira pas)

Sécurité

  • HTTP Basic Oauth
  • + SSL
  • imposer HTTPS
  • Ne pas permettre le SSL désactivé dans le SDK (qui est recommandé)
  • Clé d’API : savoir à tout moment qui fait la requête. Prévoyez-la.

Structure

  • Faites de l’hypermédia mais ça ne suffit pas.
  • Vos adresses doivent être « bidouillables » de façon qu’elles soient prédictives.
  • Une adresse doit ressembler à un nom de fichier : pas de caractères spéciaux encodés, que des minuscules, pas de caractères accentués.
  • Réduire la hiérarchie aux maximum (3 semble être la bonne pratique).

La conclusion

La clé :

  • En faire peu.
  • Ouvrir un maximum de champs pour plus tard.
  • Faire simple.
  • Utiliser les standard existants.
  • Penser pragmatique.
Diaporama de la conférence
NB : Le diaporama contient 10 bonnes pratiques supplémentaires en page 11.

Projet de liste cadeaux sur GitHub

Mise à jour du 17/11/2013 : Le projet est maintenant géré en organisation GitHub (les liens ci-dessous ont été mis à jour)

Alors voilà. Figurez-vous que j’ai eu envie d’une application de liste cadeaux sur mon mobile (Android). Il y en a pas mal et j’avais l’embarras du choix. Pourtant, après les avoir regardées, testées, repoussées et re-testées, je n’en ai trouvé aucune qui correspondent à mon besoin.

Et là, vous vous dites que soit je cherche la petite bête, soit je suis passée à côté de l’évidence. Une conversation Twitter a fini de me convaincre que non, il n’y a pas ce que je veux (non, non, pas même Amazon ou Pinterest).

Et donc, je veux :

  • pouvoir ajouter un item via ma caméra – donc une application mobile ;
  • pouvoir ajouter un item via ma galerie (je vous jure qu’il y a des appli qui permettent l’un sans l’autre) ;
  • pouvoir ajouter un item depuis n’importe qu’elle page en ligne – donc via un bookmaklet associé ;
  • pouvoir éditer tout ça aussi depuis un site en ligne ;
  • et que ce soit joli.

Voilà mes 5 critères incontournables.

J’ai trouvé une application/site web (Ookoodoo) qui a tout ça …sauf le dernier point : elle fait bien vieillotte, a une ergonomie compliquée et cela gâche beaucoup mon plaisir.

Seule solution (puisque Ookoodoo n’est pas open source) : lancer mon propre projet. Oui mais voilà, je n’ai pas les compétences de développement qu’il faut ! Et là, Laurent Demontiers m’a donné LA bonne idée : lancer un projet GitHub pour un projet en open source. Non seulement l’état d’esprit me plaît mais en plus ça me fait un prétexte pour mettre vraiment les mains dans GitHub.

logo001-480px

Et donc voilà : ça s’appelle « Spoiled People » et ça a besoin de vous.

De l’aide est la bienvenue pour tout :

  • développement,
  • graphisme,
  • ergonomie,
  • conception fonctionnelle,
  • aspects légaux,
  • etc.,
  • et même pour tout ce qui est prise en main de GitHub

Alors ? Ça vous dit de jouer aussi ? Tout est dans le  « README »

Internet et société : la responsabilité des professionnels

Parmi toutes les conférences que j’ai vues et aimées cette année à Paris Web, certaines m’ont particulièrement marquée par rapport à leur thématique. En effet, il me semble que plus d’une présentation nous renvoyait à notre responsabilité en tant que professionnels et utilisateurs d’Internet.

« La rencontre entre hacktivisme et sociétés civiles, un enjeu pour les libertés numériques » d’Amaëlle Guiton m’a permis de rattraper un retard que je cachais honteusement. Mais pas que ; loin de là.

Nous vivons, avec l’arrivée somme toute récente d’Internet, une nouvelle révolution après celle de l’imprimerie (je n’invente pas cette belle image mais reprends ce que j’ai entendu). Notre capacité à communiquer avec toute la planète et à transmettre est sans limite. Sans limite ? Le politique a bien compris le pouvoir que donne Internet et se pose les questions de ces limites. Mais se pose-t-il les bonnes questions ? Internet n’est pas une question politique. Internet est un support qui équipe la société et la société (civile, mondiale) ne doit pas le laisser lui échapper pour être contrôlé par un pouvoir politique, soit-il capitaliste, anarchiste, socialiste ou tout autre -iste.

Internet est un outil qui équipe la société. Il ne doit pas être récupéré par le mercantile et le politique

Oui, mais Internet, c’est compliqué. Comprendre en quoi la liberté du Net c’est important (cf. « Vers une nouvelle éthique » de Xavier Mouton-Dubosc), ce n’est pas (encore) à la portée de ma mère, mon voisin, mon boucher qui a autre chose à faire. Les enjeux de la liberté individuelle et de la vie privée vont bien plus loin que le « je n’ai rien à cacher » de ma cousine lycéenne et de mon épicier réac’.

Mais nous, professionnels du web, nous sommes bien mieux placés que les politiques pour comprendre notre média et ses possibilités. Nous nous y intéressons, connaissons sa mécanique, sommes consommateurs et acteurs. Il reste encore un rôle que nous pourrions choisir de revêtir : vulgariser et transmettre.

Si nous ne le faisons pas, c’est TF1 qui le fera.

Mais que transmettre ? À mon sens et en m’appuyant sur les conférences qui ont motivé ce billet, je dirais :

  • En quoi Internet est notre – nous, les citoyens du monde – média, fait de nos données ?
  • Comment le monde mercantile utilise et pourrait utiliser Internet (nos données) ?
  • Que souhaite-t-on qu’Internet devienne ? Projetons-nous dans 100 ans.

Dans cette révolution que nous vivons, depuis les premiers rangs pour les professionnels que nous sommes, nos actes et nos non-actes seront la cause de ce que sera Internet demain.

À nous de nous emparer d’Internet avec recul et discernement.

Car Internet est un nouvel eldorado pour notre monde capitaliste. Les possibilités que l’on entrevoit actuellement ne sont sûrement rien par rapport à ce que cela va devenir. Les perspectives que nous donne, par exemple, Avi Itzkovitch dans sa conférence « Designing with Sensors: Creating Adaptive Experiences » sont autant de nouveaux services que nos appareils pourront nous rendre – et je m’enthousiasme autant à cette idée que je me réjouis de mon utilisation actuelle de mon mobile. Mais n’est-ce pas autant de raisons de s’inquiéter de la compromission de la liberté individuelle, de la disparition de la vie privée ? Si certains s’en inquiètent, la réponse pour moi est la même que ci-dessus  : à nous d’être responsable de notre support, de vulgariser pour le « grand public », de réfléchir et de se projeter pour être sûrs de ne pas créer un monstre.

Olivier Thereaux et Karl Dubost nous ont donné des premières pistes de réflexion avec « Esthétique et pratique du Web qui rouille » – à nous de les creuser.

Chaque utilisateur d’Internet doit être vigilant par rapport à ce qu’il met en ligne et à la manière dont il utilise ses applications. Mais c’est à nous – professionnels du web – de relayer ce message de vigilance sans dramatiser mais de vulgariser, donnant à chacun la possibilité de prendre position.

Liens

Ces quatre conférences ont motivé ce billet mais de nombreuses autres ressources vont pouvoir nous aider à cette prise de conscience et à la transmission.
Voici quelques éléments que je peux vous indiquer :

Remerciements

Merci aux orateurs que j’ai cités ci-dessus pour ce partage et merci aux auditeurs qui y ont ajouté leurs questions et leurs points de vue.
Merci à Paris-Web pour ces choix qui n’étaient pas si évidents ; merci vraiment !
Merci à Ekino qui m’a permis d’assister à ces journées de conférences.

Mes autres articles sur Paris Web 2013

De l’enthousiasme post-Paris Web

Cette année, c’était la première fois depuis 2008 que je venais à Paris Web en tant qu’auditrice. Avoir fait partie du staff et redevenir simple « consommateur » est une délectation (mais chut ! il ne faut pas que les staffeurs le sachent : je ne voudrais pas qu’ils aient envie de quitter l’équipe, ils sont trop bons).

En étant qu’auditrice, j’ai pu profiter des conférences et je me suis réjouie des choix faits pour le programme. J’ai particulièrement apprécié qu’il y ait des conférences nous faisant prendre du recul sur nos métiers et notre support.

J’ai également pu, enfin !, discuter aux pauses et profiter des gens. Je n’ai pas échangé longuement mais j’ai pu saluer plein de monde et discuter avec des gens que je ne connaissais pas – ce qui est aussi le but de tels événements. J’ai eu des retours intéressants sur ma conférence – auditeurs, vraiment, allez parler aux orateurs aux pauses, ils ne demandent que ça !

Photo Nazcange – CC by-NC-SA

Je reviens de Paris Web pleine de cette belle énergie que les gens s’insufflent les uns aux autres quand ils se réjouissent d’être là. Je reviens de Paris Web avec le constat, encore une fois, que nous aimons notre métier et, plus encore, que nous voulons le faire bien, même quand il faut se battre pas-à-pas pendant des années pour ce bien. Je reviens de Paris Web avec une prise de conscience toute personnelle ; je me sens plus mature et mieux préparée à transmettre. Je reviens de Paris Web avec le sentiment d’avoir reçu un cadeau et d’être plus riche, maintenant, de le transmettre.

Photo Nazcange – CC by-NC-SA

Je lis de-ça, de-là, des retours difficiles post-Paris Web. Pour avoir fait partie du staff je sais comme le retour peut être difficile. J’ai déjà eu des « baby blues » à couper au couteau. C’est douloureux et ingérable. Cette année, le staff a en plus dû gérer un nouveau lieu (et quel lieux !) avec son lot de difficultés. Une centaine d’auditeurs en plus que les autres années (une centaine d’heureux en plus ! merci le staff).
Bien heureusement, certains, je le sais, n’ont pas du tout été raisonnables ; c’est tant mieux. Et si leur Paris Web blues est accentué par ce manque de sommeil, réjouissez-vous : vous devez votre état au plaisir que vous avez su prendre et à l’investissement que vous avez su mettre. Et pis bon, je le sais très bien que si c’était à refaire vous le referiez.

Photo frphoto1 – CC by-SA

Alors oui, le retour au quotidien est souvent difficile – pour tous ; viennent parfois se greffer de mauvaises nouvelles dont on se serait bien passées, mais réjouissons-nous, tous : si certains sont dans un triste état, c’est du trop plein qu’ils ont reçus. Transmettez ce trop plein. Qu’il soit de connaissances, de tendresse, d’énergie, du plaisir de donner, etc.

Savourons le plaisir de ces deux ou trois jours en mettant en application, en testant, en transmettant. Faisons durer cette belle énergie reçue.

Photo frphoto1 – CC BY-SA