SlideShare une entreprise Scribd logo
1  sur  25
Construire ensemble 
un enseignement du front-end 
pertinent, pédagogique, pérenne 
Delphine Malassingne – Rémi Parmentier
#parisweb 
Rémi Parmentier – Intégrateur front 
@hteumeuleu 
Delphine Malassingne – Responsable qualité 
@nissone 
Participants à l’atelier 
du 18 octobre 2014, Paris Web
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.
Introduction
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
Consensus 
• Enseignement global 
• Du concret 
• Autonomie, capacité à ré-apprendre 
• Utilité d’un outil
Conclusion de l’élaboratoire 
• Idées partagées, une même direction 
• Outil qui manque 
• Envie que ça n’en reste pas là
Cadre
Cadre 
• Public : étudiant 
• Techno : 
– Pour cet atelier : 
• HTML 
• CSS 
• JavaScript 
– Pour les déclinaisons futures : 
• Toutes les technos que l’on souhaite :)
Modèle de fiche 
d’enseignement
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
Des éléments qui permettent de situer la 
fiche dans une suite pédagogique 
La consigne simule une situation réelle.
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.
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.
Mise à l’épreuve de la fiche 
Votre avis ?
Atelier
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.
https://github.com/ 
hteumeuleu/ 
enseigner/
Restitution 
Regardons ce que nous avons fait
Et après ?
Pour ne pas en rester là 
• Alimenter le repository GitHub 
• Récolter des retours d’expérience 
et avis des étudiants
Infos utiles
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)
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
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

Contenu connexe

Tendances

La classe inversée corrige
La classe inversée corrigeLa classe inversée corrige
La classe inversée corrige
Martine Dubreucq
 
Moodle Presentation Epfl Final
Moodle Presentation Epfl FinalMoodle Presentation Epfl Final
Moodle Presentation Epfl Final
szeps
 

Tendances (20)

10 étapes-pour-un-projet-réussi
10 étapes-pour-un-projet-réussi10 étapes-pour-un-projet-réussi
10 étapes-pour-un-projet-réussi
 
Atelier mercredi 15 octobre
Atelier mercredi 15 octobreAtelier mercredi 15 octobre
Atelier mercredi 15 octobre
 
Apprendre à planifier, concevoir et animer une classe virtuelle
Apprendre à planifier, concevoir et animer une classe virtuelleApprendre à planifier, concevoir et animer une classe virtuelle
Apprendre à planifier, concevoir et animer une classe virtuelle
 
La classe inversée
La classe inverséeLa classe inversée
La classe inversée
 
Mooc J'me lance, j'me lance pas
Mooc J'me lance, j'me lance pasMooc J'me lance, j'me lance pas
Mooc J'me lance, j'me lance pas
 
Présentation elaastic à ludovia 2013
Présentation elaastic à ludovia 2013Présentation elaastic à ludovia 2013
Présentation elaastic à ludovia 2013
 
Formation pilotage de MOOC : atelier France Université Numérique
Formation pilotage de MOOC : atelier France Université NumériqueFormation pilotage de MOOC : atelier France Université Numérique
Formation pilotage de MOOC : atelier France Université Numérique
 
Enseigner avec des capsules vidéo
Enseigner avec des capsules vidéoEnseigner avec des capsules vidéo
Enseigner avec des capsules vidéo
 
La classe inversée
La classe inverséeLa classe inversée
La classe inversée
 
Diaporama bonnes pratiques d'une classe virtuelle
Diaporama bonnes pratiques d'une classe virtuelleDiaporama bonnes pratiques d'une classe virtuelle
Diaporama bonnes pratiques d'une classe virtuelle
 
La classe inversée et la baladodiffusion (AESTQ)
La classe inversée et la baladodiffusion (AESTQ)La classe inversée et la baladodiffusion (AESTQ)
La classe inversée et la baladodiffusion (AESTQ)
 
Roule ta-bosse
Roule ta-bosseRoule ta-bosse
Roule ta-bosse
 
La plateforme projet du FONGECIF Bretagne
La plateforme projet du FONGECIF BretagneLa plateforme projet du FONGECIF Bretagne
La plateforme projet du FONGECIF Bretagne
 
spiralconnect2
spiralconnect2spiralconnect2
spiralconnect2
 
Prototype formation spiralconnect
Prototype formation spiralconnectPrototype formation spiralconnect
Prototype formation spiralconnect
 
Mettre en place une FOAD
Mettre en place une FOADMettre en place une FOAD
Mettre en place une FOAD
 
La classe inversée corrige
La classe inversée corrigeLa classe inversée corrige
La classe inversée corrige
 
Cours massifs ouverts en ligne - Environnements personnels d'apprentissage co...
Cours massifs ouverts en ligne - Environnements personnels d'apprentissage co...Cours massifs ouverts en ligne - Environnements personnels d'apprentissage co...
Cours massifs ouverts en ligne - Environnements personnels d'apprentissage co...
 
Formation FOAD en Bretagne - Partie 2
Formation FOAD en Bretagne - Partie 2Formation FOAD en Bretagne - Partie 2
Formation FOAD en Bretagne - Partie 2
 
Moodle Presentation Epfl Final
Moodle Presentation Epfl FinalMoodle Presentation Epfl Final
Moodle Presentation Epfl Final
 

En vedette

Qualité Web - Cours _WebSchoolFactory - juin 2014
Qualité Web - Cours _WebSchoolFactory - juin 2014Qualité Web - Cours _WebSchoolFactory - juin 2014
Qualité Web - Cours _WebSchoolFactory - juin 2014
Delphine Malassingne
 
Alberta mario y david
Alberta mario y davidAlberta mario y david
Alberta mario y david
pacitina
 
Diossabe
DiossabeDiossabe
Diossabe
dann1
 
Notre dame d outremeuse se prépare au 15 août
Notre dame d outremeuse se prépare au 15 aoûtNotre dame d outremeuse se prépare au 15 août
Notre dame d outremeuse se prépare au 15 août
Outremeuse
 
Piratas Que Operan Como Empresas
Piratas Que Operan Como EmpresasPiratas Que Operan Como Empresas
Piratas Que Operan Como Empresas
meli1986
 
Le Scénario de jeu de rôle, un genre littéraire
Le Scénario de jeu de rôle, un genre littéraireLe Scénario de jeu de rôle, un genre littéraire
Le Scénario de jeu de rôle, un genre littéraire
Footbridge
 

En vedette (20)

Qualité Web - Cours _WebSchoolFactory - juin 2014
Qualité Web - Cours _WebSchoolFactory - juin 2014Qualité Web - Cours _WebSchoolFactory - juin 2014
Qualité Web - Cours _WebSchoolFactory - juin 2014
 
Tilkee - Tutoriel création de Tilks
Tilkee - Tutoriel création de TilksTilkee - Tutoriel création de Tilks
Tilkee - Tutoriel création de Tilks
 
Alberta mario y david
Alberta mario y davidAlberta mario y david
Alberta mario y david
 
Diossabe
DiossabeDiossabe
Diossabe
 
Notre dame d outremeuse se prépare au 15 août
Notre dame d outremeuse se prépare au 15 aoûtNotre dame d outremeuse se prépare au 15 août
Notre dame d outremeuse se prépare au 15 août
 
DeArGe Mitteilungen 4-5/2002
DeArGe Mitteilungen 4-5/2002DeArGe Mitteilungen 4-5/2002
DeArGe Mitteilungen 4-5/2002
 
Mehr Fans auf Ihrer Fanpage
Mehr Fans auf Ihrer FanpageMehr Fans auf Ihrer Fanpage
Mehr Fans auf Ihrer Fanpage
 
« Semaine des Célibataires » a l'hotel Tamassa, Ile Maurice
« Semaine des Célibataires » a l'hotel Tamassa, Ile Maurice« Semaine des Célibataires » a l'hotel Tamassa, Ile Maurice
« Semaine des Célibataires » a l'hotel Tamassa, Ile Maurice
 
Techdays 2013 : ALM et eCommerce, des challenges en continu
Techdays 2013 : ALM et eCommerce, des challenges en continuTechdays 2013 : ALM et eCommerce, des challenges en continu
Techdays 2013 : ALM et eCommerce, des challenges en continu
 
Muller traballadora
Muller traballadoraMuller traballadora
Muller traballadora
 
Conférence motivation HEC entrepreneuriat 20 mars
Conférence motivation HEC entrepreneuriat 20 marsConférence motivation HEC entrepreneuriat 20 mars
Conférence motivation HEC entrepreneuriat 20 mars
 
Gloria Ambas
Gloria AmbasGloria Ambas
Gloria Ambas
 
Piratas Que Operan Como Empresas
Piratas Que Operan Como EmpresasPiratas Que Operan Como Empresas
Piratas Que Operan Como Empresas
 
Kochbuch küche
Kochbuch kücheKochbuch küche
Kochbuch küche
 
Le Scénario de jeu de rôle, un genre littéraire
Le Scénario de jeu de rôle, un genre littéraireLe Scénario de jeu de rôle, un genre littéraire
Le Scénario de jeu de rôle, un genre littéraire
 
Social Media Guideline - A propos de Wikipédia
Social Media Guideline - A propos de WikipédiaSocial Media Guideline - A propos de Wikipédia
Social Media Guideline - A propos de Wikipédia
 
Dfcg
DfcgDfcg
Dfcg
 
Presentación impress. madrid de los austrias
Presentación impress. madrid de los austriasPresentación impress. madrid de los austrias
Presentación impress. madrid de los austrias
 
Lufthansa First Schwarzwald
Lufthansa First  SchwarzwaldLufthansa First  Schwarzwald
Lufthansa First Schwarzwald
 
Genossenschaft von ganz unten: NGO-Iniativen in Indien
Genossenschaft von ganz unten: NGO-Iniativen in IndienGenossenschaft von ganz unten: NGO-Iniativen in Indien
Genossenschaft von ganz unten: NGO-Iniativen in Indien
 

Similaire à Construire ensemble un enseignement du front-end pertinent, pédagogique et pérenne

Diprobib aifbd
Diprobib aifbdDiprobib aifbd
Diprobib aifbd
apajard
 

Similaire à Construire ensemble un enseignement du front-end pertinent, pédagogique et pérenne (20)

Retours d'exprience MOOC à l'ENSAM
Retours d'exprience MOOC à l'ENSAMRetours d'exprience MOOC à l'ENSAM
Retours d'exprience MOOC à l'ENSAM
 
Les technologies pour soutenir le travail collaboratif
Les technologies pour soutenir le travail collaboratifLes technologies pour soutenir le travail collaboratif
Les technologies pour soutenir le travail collaboratif
 
Apprentissage collaboratif appuyé sur le web2.0 : exemple et bonnes pratiques
Apprentissage collaboratif appuyé sur le web2.0 : exemple et bonnes pratiquesApprentissage collaboratif appuyé sur le web2.0 : exemple et bonnes pratiques
Apprentissage collaboratif appuyé sur le web2.0 : exemple et bonnes pratiques
 
Apprentissagecollaboratifweb20 131210123355-phpapp02
Apprentissagecollaboratifweb20 131210123355-phpapp02Apprentissagecollaboratifweb20 131210123355-phpapp02
Apprentissagecollaboratifweb20 131210123355-phpapp02
 
E portfolio hesso-fribourg-journee2-13-10-14
E portfolio hesso-fribourg-journee2-13-10-14E portfolio hesso-fribourg-journee2-13-10-14
E portfolio hesso-fribourg-journee2-13-10-14
 
Mot de bienvenue au labo vté
Mot de bienvenue au labo vtéMot de bienvenue au labo vté
Mot de bienvenue au labo vté
 
Resultats enquete besoins_recueil_partage_experiences_pédagogiques
Resultats enquete besoins_recueil_partage_experiences_pédagogiquesResultats enquete besoins_recueil_partage_experiences_pédagogiques
Resultats enquete besoins_recueil_partage_experiences_pédagogiques
 
Tournage des vidéos pour un MOOC : cas du Home Studio, coûts - 7-12-2013
Tournage des vidéos pour un MOOC : cas du Home Studio, coûts - 7-12-2013Tournage des vidéos pour un MOOC : cas du Home Studio, coûts - 7-12-2013
Tournage des vidéos pour un MOOC : cas du Home Studio, coûts - 7-12-2013
 
eLeraning retour d'experience
eLeraning retour d'experienceeLeraning retour d'experience
eLeraning retour d'experience
 
Prise en main Moodle - Présentation - MoodleMoot 2014
Prise en main Moodle - Présentation - MoodleMoot 2014 Prise en main Moodle - Présentation - MoodleMoot 2014
Prise en main Moodle - Présentation - MoodleMoot 2014
 
EFAP-1 Introduction technologies web - 1ère séance 9/10/2017
EFAP-1 Introduction technologies web - 1ère séance 9/10/2017EFAP-1 Introduction technologies web - 1ère séance 9/10/2017
EFAP-1 Introduction technologies web - 1ère séance 9/10/2017
 
Formation FOAD en Bretagne - Partie 1
Formation FOAD en Bretagne - Partie 1Formation FOAD en Bretagne - Partie 1
Formation FOAD en Bretagne - Partie 1
 
Du cours papier au cours online
Du cours papier au cours onlineDu cours papier au cours online
Du cours papier au cours online
 
Diprobib aifbd
Diprobib aifbdDiprobib aifbd
Diprobib aifbd
 
La gestion de projet d'un cours digital
La gestion de projet d'un cours digitalLa gestion de projet d'un cours digital
La gestion de projet d'un cours digital
 
Ptdea Quebec
Ptdea QuebecPtdea Quebec
Ptdea Quebec
 
Benchmark stratice des plateformes open source
Benchmark stratice des plateformes open sourceBenchmark stratice des plateformes open source
Benchmark stratice des plateformes open source
 
Outils numériques pour enseignants
Outils numériques pour enseignants Outils numériques pour enseignants
Outils numériques pour enseignants
 
Master 1 intro 2014
Master 1 intro  2014Master 1 intro  2014
Master 1 intro 2014
 
Projet
ProjetProjet
Projet
 

Plus de Delphine Malassingne

Envie d un reférentiel ? Créons-le ! Là, maintenant | Paris Web 2012
 Envie d un reférentiel ? Créons-le ! Là, maintenant | Paris Web 2012 Envie d un reférentiel ? Créons-le ! Là, maintenant | Paris Web 2012
Envie d un reférentiel ? Créons-le ! Là, maintenant | Paris Web 2012
Delphine Malassingne
 

Plus de Delphine Malassingne (12)

GitPourLaNulle
GitPourLaNulleGitPourLaNulle
GitPourLaNulle
 
Accessibilité numérique, mais au fait de quoi on parle ?
Accessibilité numérique, mais au fait de quoi on parle ?Accessibilité numérique, mais au fait de quoi on parle ?
Accessibilité numérique, mais au fait de quoi on parle ?
 
Table-ronde Qualité web - Codeurs en Seine 2013
Table-ronde Qualité web - Codeurs en Seine 2013Table-ronde Qualité web - Codeurs en Seine 2013
Table-ronde Qualité web - Codeurs en Seine 2013
 
Être bien pour produire bien - Paris Web 2013
Être bien pour produire bien - Paris Web 2013Être bien pour produire bien - Paris Web 2013
Être bien pour produire bien - Paris Web 2013
 
Qualité web - Partir dans la bonne direction | _WebSchoolFactory | décembre 2012
Qualité web - Partir dans la bonne direction | _WebSchoolFactory | décembre 2012Qualité web - Partir dans la bonne direction | _WebSchoolFactory | décembre 2012
Qualité web - Partir dans la bonne direction | _WebSchoolFactory | décembre 2012
 
Envie d un reférentiel ? Créons-le ! Là, maintenant | Paris Web 2012
 Envie d un reférentiel ? Créons-le ! Là, maintenant | Paris Web 2012 Envie d un reférentiel ? Créons-le ! Là, maintenant | Paris Web 2012
Envie d un reférentiel ? Créons-le ! Là, maintenant | Paris Web 2012
 
Atelier Référentiel des bonnes pratiques de performance web
Atelier Référentiel des bonnes pratiques de performance webAtelier Référentiel des bonnes pratiques de performance web
Atelier Référentiel des bonnes pratiques de performance web
 
Argumenter en faveur du poste de responsable qualité web | Paris Web 2011
Argumenter en faveur du poste de responsable qualité web | Paris Web 2011Argumenter en faveur du poste de responsable qualité web | Paris Web 2011
Argumenter en faveur du poste de responsable qualité web | Paris Web 2011
 
Pourquoi / comment le poste de Responsable qualité web | Sud Web 2011
Pourquoi / comment le poste de Responsable qualité web | Sud Web 2011Pourquoi / comment le poste de Responsable qualité web | Sud Web 2011
Pourquoi / comment le poste de Responsable qualité web | Sud Web 2011
 
Prise de parole - Paris-Web 2011
Prise de parole - Paris-Web 2011Prise de parole - Paris-Web 2011
Prise de parole - Paris-Web 2011
 
Intégrer l accessibilité dans une démarche qualité | W3Café
Intégrer l accessibilité dans une démarche qualité | W3CaféIntégrer l accessibilité dans une démarche qualité | W3Café
Intégrer l accessibilité dans une démarche qualité | W3Café
 
Mettre en place la gestion de la qualité web (octobre 2010)
Mettre en place la gestion de la qualité web (octobre 2010)Mettre en place la gestion de la qualité web (octobre 2010)
Mettre en place la gestion de la qualité web (octobre 2010)
 

Construire ensemble un enseignement du front-end pertinent, pédagogique et pérenne

  • 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.
  • 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à
  • 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 ?
  • 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.
  • 19. Restitution Regardons ce que nous avons fait
  • 21. Pour ne pas en rester là • Alimenter le repository GitHub • Récolter des retours d’expérience et avis des étudiants
  • 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

Notes de l'éditeur

  1. L’importance d’un enseignement global incluant la culture générale du web et ses grands principes La nécessité d’inclure du concret - des exemples mais aussi de la pratique voir l’apprentissage par l’erreur - plus que de la théorie La priorité donnée à l’autonomie, la capacité à ré-apprendre plutôt qu’un enseignement dogmatique (vite obsolète) La grande utilité qu’aurait un outil sur lequel s’appuyer.
  2. On est reparti avec : des idées plutôt partagées, une même direction. Le sentiment qu’un outil nous manque. L’envie que ça n’en reste pas là. L’appel à orateurs de Paris Web se finissait le lendemain ; notre retour vers le nord était notre seule occasion de proposer quelque chose ...Nous l’avons saisie et nous voilà aujourd’hui.
  3. >> RÉMI
  4. >> RÉMI
  5. >> RÉMI
  6. >> RÉMI
  7. >> RÉMI