construire ensemble un enseignement du front-end pertinent, pédagogique et pérenne
DESCRIPTION
Atelier co-présenté avec Rémi Parmentier (http://www.hteumeuleu.fr/) lors de Paris Web 2014.TRANSCRIPT
![Page 1: Construire ensemble un enseignement du front-end pertinent, pédagogique et pérenne](https://reader035.vdocuments.site/reader035/viewer/2022070320/5586ea0bd8b42a7b198b4674/html5/thumbnails/1.jpg)
Construire ensemble un enseignement du front-end pertinent, pédagogique, pérenneDelphine Malassingne – Rémi Parmentier
![Page 2: Construire ensemble un enseignement du front-end pertinent, pédagogique et pérenne](https://reader035.vdocuments.site/reader035/viewer/2022070320/5586ea0bd8b42a7b198b4674/html5/thumbnails/2.jpg)
#parisweb
Rémi Parmentier – Intégrateur front@hteumeuleu
Delphine Malassingne – Responsable qualité@nissone
Participants à l’atelierdu 18 octobre 2014, Paris Web
![Page 3: Construire ensemble un enseignement du front-end pertinent, pédagogique et pérenne](https://reader035.vdocuments.site/reader035/viewer/2022070320/5586ea0bd8b42a7b198b4674/html5/thumbnails/3.jpg)
Déroulé de l’atelier
• Introduction et cadre• Fiche modèle– Présentation– Mise à l’épreuve
• Production de fiches• Restitution• Et après ?
10min.
30min.
30min.
![Page 4: Construire ensemble un enseignement du front-end pertinent, pédagogique et pérenne](https://reader035.vdocuments.site/reader035/viewer/2022070320/5586ea0bd8b42a7b198b4674/html5/thumbnails/4.jpg)
Introduction
![Page 5: Construire ensemble un enseignement du front-end pertinent, pédagogique et pérenne](https://reader035.vdocuments.site/reader035/viewer/2022070320/5586ea0bd8b42a7b198b4674/html5/thumbnails/5.jpg)
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
![Page 6: Construire ensemble un enseignement du front-end pertinent, pédagogique et pérenne](https://reader035.vdocuments.site/reader035/viewer/2022070320/5586ea0bd8b42a7b198b4674/html5/thumbnails/6.jpg)
Consensus
• Enseignement global• Du concret• Autonomie, capacité à ré-
apprendre• Utilité d’un outil
![Page 7: Construire ensemble un enseignement du front-end pertinent, pédagogique et pérenne](https://reader035.vdocuments.site/reader035/viewer/2022070320/5586ea0bd8b42a7b198b4674/html5/thumbnails/7.jpg)
Conclusion de l’élaboratoire
• Idées partagées, une même direction
• Outil qui manque• Envie que ça n’en reste pas là
![Page 8: Construire ensemble un enseignement du front-end pertinent, pédagogique et pérenne](https://reader035.vdocuments.site/reader035/viewer/2022070320/5586ea0bd8b42a7b198b4674/html5/thumbnails/8.jpg)
Cadre
![Page 9: Construire ensemble un enseignement du front-end pertinent, pédagogique et pérenne](https://reader035.vdocuments.site/reader035/viewer/2022070320/5586ea0bd8b42a7b198b4674/html5/thumbnails/9.jpg)
Cadre
• Public : étudiant• Techno : – Pour cet atelier :
• HTML• CSS• JavaScript
– Pour les déclinaisons futures :• Toutes les technos que l’on souhaite :)
![Page 10: Construire ensemble un enseignement du front-end pertinent, pédagogique et pérenne](https://reader035.vdocuments.site/reader035/viewer/2022070320/5586ea0bd8b42a7b198b4674/html5/thumbnails/10.jpg)
Modèle de fiche d’enseignement
![Page 11: Construire ensemble un enseignement du front-end pertinent, pédagogique et pérenne](https://reader035.vdocuments.site/reader035/viewer/2022070320/5586ea0bd8b42a7b198b4674/html5/thumbnails/11.jpg)
Présentation de la fiche exemple
• Une fiche = une problématique = un grand principe (au moins)
• Un consigne en deux tempsDu travail en cours
• Des éléments annexes
![Page 12: Construire ensemble un enseignement du front-end pertinent, pédagogique et pérenne](https://reader035.vdocuments.site/reader035/viewer/2022070320/5586ea0bd8b42a7b198b4674/html5/thumbnails/12.jpg)
Des éléments qui permettent de situer la fiche dans une suite pédagogique
La consigne simule une situation réelle.
![Page 13: Construire ensemble un enseignement du front-end pertinent, pédagogique et pérenne](https://reader035.vdocuments.site/reader035/viewer/2022070320/5586ea0bd8b42a7b198b4674/html5/thumbnails/13.jpg)
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.
![Page 14: Construire ensemble un enseignement du front-end pertinent, pédagogique et pérenne](https://reader035.vdocuments.site/reader035/viewer/2022070320/5586ea0bd8b42a7b198b4674/html5/thumbnails/14.jpg)
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.
![Page 15: Construire ensemble un enseignement du front-end pertinent, pédagogique et pérenne](https://reader035.vdocuments.site/reader035/viewer/2022070320/5586ea0bd8b42a7b198b4674/html5/thumbnails/15.jpg)
Mise à l’épreuve de la fiche
Votre avis ?
![Page 16: Construire ensemble un enseignement du front-end pertinent, pédagogique et pérenne](https://reader035.vdocuments.site/reader035/viewer/2022070320/5586ea0bd8b42a7b198b4674/html5/thumbnails/16.jpg)
Atelier
![Page 17: Construire ensemble un enseignement du front-end pertinent, pédagogique et pérenne](https://reader035.vdocuments.site/reader035/viewer/2022070320/5586ea0bd8b42a7b198b4674/html5/thumbnails/17.jpg)
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.
![Page 18: Construire ensemble un enseignement du front-end pertinent, pédagogique et pérenne](https://reader035.vdocuments.site/reader035/viewer/2022070320/5586ea0bd8b42a7b198b4674/html5/thumbnails/18.jpg)
https://github.com/hteumeuleu/
enseigner/
![Page 19: Construire ensemble un enseignement du front-end pertinent, pédagogique et pérenne](https://reader035.vdocuments.site/reader035/viewer/2022070320/5586ea0bd8b42a7b198b4674/html5/thumbnails/19.jpg)
Restitution
Regardons ce que nous avons fait
![Page 20: Construire ensemble un enseignement du front-end pertinent, pédagogique et pérenne](https://reader035.vdocuments.site/reader035/viewer/2022070320/5586ea0bd8b42a7b198b4674/html5/thumbnails/20.jpg)
Et après ?
![Page 21: Construire ensemble un enseignement du front-end pertinent, pédagogique et pérenne](https://reader035.vdocuments.site/reader035/viewer/2022070320/5586ea0bd8b42a7b198b4674/html5/thumbnails/21.jpg)
Pour ne pas en rester là
• Alimenter le repository GitHub• Récolter des retours d’expérience
et avis des étudiants
![Page 22: Construire ensemble un enseignement du front-end pertinent, pédagogique et pérenne](https://reader035.vdocuments.site/reader035/viewer/2022070320/5586ea0bd8b42a7b198b4674/html5/thumbnails/22.jpg)
Infos utiles
![Page 23: Construire ensemble un enseignement du front-end pertinent, pédagogique et pérenne](https://reader035.vdocuments.site/reader035/viewer/2022070320/5586ea0bd8b42a7b198b4674/html5/thumbnails/23.jpg)
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)
![Page 24: Construire ensemble un enseignement du front-end pertinent, pédagogique et pérenne](https://reader035.vdocuments.site/reader035/viewer/2022070320/5586ea0bd8b42a7b198b4674/html5/thumbnails/24.jpg)
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
Contacts
![Page 25: Construire ensemble un enseignement du front-end pertinent, pédagogique et pérenne](https://reader035.vdocuments.site/reader035/viewer/2022070320/5586ea0bd8b42a7b198b4674/html5/thumbnails/25.jpg)
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