Atelier co-présenté avec Rémi Parmentier (http://www.hteumeuleu.fr/) lors de Paris Web 2014.

1. Construire ensemble
un enseignement du front-end
pertinent, pédagogique, pérenne
Delphine Malassingne – Rémi Parmentier

2. #parisweb
Rémi Parmentier – Intégrateur front
@hteumeuleu
Delphine Malassingne – Responsable qualité
@nissone
Participants à l’atelier
du 18 octobre 2014, Paris Web

3. Déroulé de l’atelier
• Introduction et cadre
• Fiche modèle
– Présentation
– Mise à l’épreuve
10
min.
• Production de fiches
• Restitution
• Et après ?
30
min.
30
min.

4. Introduction

5. Discussion-débat improvisé
• « Élaboratoire » Sud Web
– Rémi, Romy, Delphine
• Participants :
– certains avaient déjà enseigné
– quelques étudiants
– beaucoup d’intégrateurs / développeurs

6. Consensus
• Enseignement global
• Du concret
• Autonomie, capacité à ré-apprendre
• Utilité d’un outil

7. Conclusion de l’élaboratoire
• Idées partagées, une même direction
• Outil qui manque
• Envie que ça n’en reste pas là

8. Cadre

9. Cadre
• Public : étudiant
• Techno :
– Pour cet atelier :
• HTML
• CSS
• JavaScript
– Pour les déclinaisons futures :
• Toutes les technos que l’on souhaite :)

10. Modèle de fiche
d’enseignement

11. Présentation
de la fiche exemple
• Une fiche
= une problématique
= un grand principe (au moins)
• Un consigne en deux temps
Du travail en cours
• Des éléments annexes

12. Des éléments qui permettent de situer la
fiche dans une suite pédagogique
La consigne simule une situation réelle.

13. Les éléments qui ne sont pas pertinents
pour l’exercice sont déjà donnés.
Différentes solutions sont indiquées pour
accompagner l’enseignant.

14. Comme en situation réelle, des
changements arrivent en cours de route,
amenant des contraintes
supplémentaires.
Là encore, au moins une solution est
indiquée.
La fiche est complétée par des
ressources.

15. Mise à l’épreuve de la fiche
Votre avis ?

16. Atelier

17. Construisons ensemble
de nouvelles fiches
Exemples de principes/problématiques :
• Accessibilité, interopérabilité, maintenabilité,
référencement, standards du web, sémantique,
expérience utilisateur, performance (etc ?)
• Agent utilisateur, protocole HTTP, etc.
• Snipets, framework, preprocesseurs, etc.

18. https://github.com/
hteumeuleu/
enseigner/

19. Restitution
Regardons ce que nous avons fait

20. Et après ?

21. Pour ne pas en rester là
• Alimenter le repository GitHub
• Récolter des retours d’expérience
et avis des étudiants

22. Infos utiles

23. Liens
• GitHub :
– Hteumeuleu > enseigner
• À propos de cet atelier :
– présentation sur le site de Paris Web
• À propos de l’élaboratoire Sud Web :
– l'article de Rémi
– l'article de Boris
– l'article de Romy
– tableau-blanc de l'atelier (photo)

24. Contacts
Rémi Parmentier – Intégrateur front
@hteumeuleu – www.hteumeuleu.fr
Tilt Studio – www.tilt-studio.fr
Delphine Malassingne – Responsable qualité
@nissone – nissone.com
ekino – www.ekino.com/
@parisweb – #parisweb – www.paris-web.fr

25. Crédits et remerciements
Merci Romy d’avoir animé avec nous les prémices de cet atelier.
Merci à tous les participants.
Photos : Jean-François Renauld, Johnson Cameraface