Réaliser une production interactive

Florian COOL, professeur documentaliste

Réaliser une production interactive en classe

acver.fr/productioninteractive

Contenu de l'atelier

De la démarche de recherche à la réalisation, présentation des étapes permettant de mener en classe un projet de réalisation d’une production interactive.

Présenter

Réaliser

Structurer

Se documenter

Planifier

Définir

Sommaire

Définir

Présenter

Réaliser

Structurer

Se documenter

Planifier

Définir

INTERACTIVITÉ

À vous de jouer !

(Définition simple)

1. Se dit de phénomènes qui réagissent les uns sur les autres.2. En informatique, doué d'interactivité.3. Se dit d'un support de communication favorisant un échange avec le public : Émission, exposition, livre interactifs.

Interactivité (n.f.) : Caractère d'un média interactif

Interactif, ve (adj.) :

Source : Larousse en ligne

Qu'est-ce que l'interactivité ?

(Définition avancée)

Qu'est-ce que l'interactivité ?

« Dans l’histoire de l’informatique, le concept d’interactivité est lié, entres autres, à celui d’hypertexte, c’est-à-dire à l’idée qu’un document électronique ou une application informatique constitue un environnement dans lequel un certain nombre de choix possibles sont présentés à l’utilisateur à l’instant t, et que chacun de ces choix entraîne, à l’instant t+1, une modification différente de l’environnement. »

Source : André Tricot & Alain Rufino, "Modalités et scénarii d’interaction dans des environnements informatisés d’apprentissage", 1999, Revue des Sciences de l’Éducation, numéro thématique, XXV (1), 105-129, en ligne

Lien activable reliant des données textuelles ou multimédias, qui renvoie directement, en un clic, vers un autre élément de la page consultée, une autre page ou un autre site Web. Dans le Web, la navigation est assurée par les hyperliens, que ce soit des liens hypertextes ou des liens hypermédias.

Système de présentation de l'information reposant sur des liens hypertextes qui permettent de passer d'un document à un autre, notamment afin de contextualiser ou de définir certains éléments d'un texte.

Source : Office québecois de la langue française, Vocabulaire des réseaux sociaux, màj 30/08/2018

HYPERLIEN

HYPERMÉDIA

HYPERTEXTE

Hyperlien, hypertexte, hypermédia

Système de présentation de l'information reposant sur des hyperliens qui permettent de passer d'un document multimédia à un autre. On considère généralement l'hypermédia comme une extension de l'hypertexte aux données multimédias.

D'après une image d'andreariverac (CC BY-SA 3.0)

hyperlien

HYPERMÉDIA

HYPERTEXTE

Hyperlien, hypertexte, hypermédia

QUIZINTERACTIF

Lycée - 2ndeLittérature & SociétéCours et TM

Académie de Nantes

Site du collège

IMAGE INTERACTIVE

CHRONOLOGIE INTERACTIVE

AFFICHE INTERACTIVE

Exemples de productions interactives

Collège - 5emeFrançais-EMI???

Collège - 3emeAnglaisCours et AP

Lycée - 1ere LHistoireCours

Site du collège

PRÉSENTATION INTERACTIVE

Collège - 6emeHistoire-EMC-EMICours et AP

Strabon

WEBDOCUMENTAIRE

Collège - 3emeHistoire-EMC-EMICours et AP

Scape

ESCAPE GAME

COMPTE-RENDUINTERACTIF

Exemples de productions interactives

Collège - 6emeEMI???

Collège - 4emeAllemand-EMICours

Démarche de projet pas systématique

Compétences EMI travaillées : recherche d'informations, collecte d'informations, structuration de l'information,plagiat, production coopérative, droits d'auteurs...

Objectif de la production : construire un exposé, rendre compte d'un événement, ludifier un apprentissage...

Complexité de la structure hypermédiatique : simple page à un ensemble des 30 pages comprenant des liens complexes

Application utilisée

Disciplines impliquées : projet mono ou pluri-disciplinaires, pas toujours l'EMI

Temps passé sur la production : de 1 séance à 1 trimestre

Interactivité

Des productions très diverses

VS

DIFFÉRENCES

POINTS COMMUNS

les parcours

Citoyen

PEAC

les Enseignements Pratiques Interdisciplinaires

Et aussi....

Quelques pistes

L'EMI et les programmes(cycle 3)

Sciences de la Vie et de la Terre 1ere

Info-doc en lycée à la rentrée 2019(Elsa Chipiloff)

L'EMI dans les nouveaux programmes du lycée(Juliette Filiol)

Programme d'éducation aux médias et à l'information (cycle 4)

Langues vivantes 2nde

Sciences numériques et technologie 2nde

L'EMI et les programmes(cycle 4)

EMC 1ere

Nouveaux programmes de lycée

Programmes de collège

Dans quel cadre institutionnel ?

• Améliorer l'engagement de l'élève dans ses apprentissages

• Varier la forme de la trace écrite pour favoriser la mémorisation du contenu par les élèves

• Situation privilégiée pour sensibiliser les élèves aux questions de droit d'auteur

• Augmenter la motivation des élèves

• Mettre les élèves en situation d'éditeur de contenu

Les enjeux d'une production interactive

Définir

Présenter

Réaliser

Structurer

Se documenter

Planifier

Planifier

QU'EST-CE QUI CARACTÉRISEUNE DÉMARCHEDE PROJET ?

À vous de jouer !

cité dans Catherine Reverdy, "Des projets pour mieux apprendre ?", Dossier d'actualité Veille et analysesde l'Ifé, fév. 2013

Philippe Perrenoud, "Apprendre à l'école à travers des projets : pourquoi ? comment ?", Education n°14, déc. 2002, p. 6-11

• favorise en même temps des apprentissages identifiables (au moins après-coup) figurant au programme d'une ou plusieurs disciplines."

• suscite l'apprentissage de savoirs et de savoir-faire de gestion de projet (décider, planifier, coordonner, etc.) ;

• induit un ensemble de tâches dans lesquelles tous les élèves peuvent s'impliquer et jouer un rôle actif, qui peut varier en fonction de leurs moyens et intérêts ;

• s'oriente vers une production concrète [au sens large] ;

• est une entreprise gérée par le groupe-classe (l’enseignant (e) anime, mais ne décide pas de tout) ;

"La démarche de projet :

Restitution du projet.Institutionnalisationdes savoirs.Phase d'évaluation (et d'auto-évaluation)Démarche réflexivesur les compétences travaillées au coursdu projet.

Découverte de la ou des applications nécessairesà la réalisation de la production finale.Prise en main le plus possible en autonomie à l'aide de tutoriels.Réalisation en collaboration ou en coopération.

Découpage du scénario en fonction de l'angle choisi (chronologique, topologique, thématique).Rédaction descontenus textuels.Structuration de la production à l'aide d'un outil dédié (storyboard, chemin de fer, etc.).

Collecte de documentset d'informations.Recherches spécifiques en fonction du contenu médiatique venant enrichir la production (images, vidéos, sons, animations, cartes, diagrammes, etc.)

BILANDU PROJET

RÉALISATIONDE LA PRODUCTION

Élaboration du projetet présentation aux élèves voire co-construction du projet avec les élèves.Analyse et caractérisation de la production finale.Détermination du calendrier du projet.

PRÉSENTATION DU PROJET

STRUCTURATIONDE LA PRODUCTION

RECHERCHES DOCUMENTAIRES

Les étapes du projet

Quels enjeux pour les élèves ? Quelles compétences en jeu ?

POURQUOI ?

Quelles méthodes pédagogiques ? Quelle répartition des tâches ?

COMBIEN ?

COMMENT ?

QUAND ?

OÙ ?

QUOI ?

QUI ?

Quels moyens matériels ? budgétaires ? humains ?

Quelle durée totale ?Sur quelles heures ?

Quels espaces (physiques et numériques) ?

Quel(s) sujet(s) ?Quelle production ?Quel programme ?

Quels élèves ?Quelles matières ?(Quels partenaires ?)

Planifier un projet

PRODUCTION PRODUCTION PRODUCTION PRODUCTION PRODUCTION

PRODUCTION

Chaque élève/groupe présentesa production comme il le souhaite

Nécessite une harmonisationdes contenus de chaque élève/groupe

La production finale est moins ambitieuse

La production finale est plus ambitieuse

Les compétences travailléespar chaque élève sont les mêmes

Les compétences travailléespar chaque élève peuvent être différentes

Chaque élève (ou groupe d'élèves)réalise la production finale à sa manière

Chaque élève (ou groupe d'élèves)réalise une partie de la production finale

Coopération ou collaboration ?

VS

COLLABORATION

COOPÉRATION

Définir

Présenter

Réaliser

Structurer

Se documenter

Planifier

Présenter

Remue-méninges collectif pour observer des points communs, des différences et établir une définition

Consultation et analyse d'exemples avec un questionnaire (type La Quizinière) à remplir pour guider la réflexion

Des pistes d'activités possibles :

Appréhender l'objet de la production

Sélection de cartes pour déterminer quelles sont les caractéristiques de ce type de production

framemo.org/1306interactif

... puis notez vos idées dans le document collaboratif accessible ci-dessous :

acver.fr/webdoc5

acver.fr/webdoc4

Naviguez quelques minutes dans les webdocumentaires suivants...

acver.fr/webdoc2

acver.fr/webdoc1

À vous de jouer !

Définir

Présenter

Réaliser

Structurer

Se documenter

Planifier

Se documenter

et bien d'autres...

Attention au filtrage par licence dans les moteurs de recherche, qui peuvent parfois être trompeurs. Il faut toujours aller vérifier sur le site.

Banques d'icônes librement réutilisables

"Librement réutilisables" ne signifie pas qu'on peut en faire ce que l'on veut.Il est toujours nécessaire de vérifier la licence de l'image pour connaître ses droits.

Banques d'images librement réutilisables

Trouver des ressources : images

CGUOnisep

CGUINA

CGUFranceTV

Attention : si les vidéos sont produites par les élèves, penser à demander les autorisations de droit à l'image (cf. boîte à outils Eduscol)

Certains sites autorisent la diffusion de leurs contenus grâce à un lecteur embarqué, en précisant le contexte d'utilisation.

Attention : la diffusion de certains contenus pédagogiques mis à dispositiondes enseignants avec un accès par connexion peut être interdite (ex : Eduthèque)

Certaines plateformes (YouTube, Vimeo, etc.) possèdent un système de filtrage par licence permettant de trouver des contenus Creative Commons.

Trouver des ressources : vidéos

Voir la fiche

Voir la fiche

Voir la fiche

Voir la fiche

Représenter/comparer des données selon une répartition géographique

Suivre l'évolution d'une grandeur dans le temps

Comparer des proportions ou des pourcentages

Comment représenter mes données ?

Comparer des grandeurs de même nature

Définir

Présenter

Réaliser

Structurer

Se documenter

Planifier

Structurer

"Les entrées sont liées le plus souvent à des verbes ou des actions à réaliser. On invite le lecteur à composer son propre parcours dans le web-documentaire."

Source textes : Nicolas BUREAU et Alain MICHEL, Structure d'un webdocumentaire, sous licence CC-BY-SA 4.0

Découper son scénario

PARCOURSPERSONNALISÉ

DÉCOUPAGE CHRONOLOGIQUE

DÉCOUPAGE THÉMATIQUE

DÉCOUPAGE TOPOLOGIQUE

"Division en sous-thèmes constitutifs. Chaque entrée permet d'éclairer une facette de la thématique globale."

"Entrées par lieux, itinéraires, zones géographiques. [...]Le parcours se fait sous forme de visite guidée des zones que l'on souhaite explorer"

"Entrées par dates ou par périodes temporelles."

"Parallèle", "embranchements", "constellation"Cf. Slideshare de Benjamin Hoguet

Source images et textes : Nicolas BUREAU et Alain MICHEL, Structure d'un webdocumentaire, sous licence CC-BY-SA 4.0

Les différentes structures narratives

D'AUTRES STRUCTURES PLUS COMPLEXES

STRUCTURE LINÉAIRE

STRUCTURE CONCENTRIQUE

STRUCTURE EN ARÊTES DE POISSON

"Une page d'accueil qui distribue sur toutes les parties du web-doc via les objets interactifs de l'image."

"Possibilité de décrocher de l'axe central pour découvrir de nouveaux contenus."

"Les étapes s’enchaînent de manière simple, linéaire ; l'utilisateur a la possibilité de continuer ou sauter dans le temps."

Application totalement gratuitePas d'inscription nécessairePas de limite de documents à réaliser

Interface en anglais

Draw.io

Inscription nécessaireMaximum 3 documents avec un compte gratuit

Interface en français et facile à prendre en mainPossibilité d'utiliser l'application gratuitement

Images : Fidel Navamuel / OutilsTice.com

LucidChart

Réaliser un diagramme numérique

V2YME2

Code de l'exercice :

https://test.quiziniere.com/

Rendez-vous sur

COMPTE-RENDUINTERACTIF

AFFICHE INTERACTIVE

WEBDOCUMENTAIRE

DIAPORAMA INTERACTIF

À vous de jouer !

À vous de jouer !

Structure concentrique(plusieurs pages)Découpage topologiqueTravail en coopération

COMPTE-RENDU INTERACTIF

AFFICHE INTERACTIVE

WEBDOCUMENTAIRE

DIAPORAMA INTERACTIF

Structure concentrique(plusieurs pages)Découpage chrono-thématiqueTravail en collaboration

Structure linéaireDécoupage thématiqueTravail en coopération

Structure concentrique(1 seule page)Découpage thématiqueTravail en collaboration

Définir

Présenter

Réaliser

Structurer

Se documenter

Planifier

Réaliser

• Pertinence & utilisabilité
• Connexion & configuration des comptes
• Évolutivité & interopérabilité
• Gestion & suivi des utilisateurs par l’administrateur/l’enseignant
• Intégrations avec l’écosystème numérique
• Fonctions communautaires
• Données à caractère personnel : traitement, sécurité et propriété

Liste de 55 "points de vigilance pour choisir des outils numériques en éducation" (F. Jourde)

Choisir des outils numériques...

Malheureusement payante, cette application est particulièrement adaptée à la création de webdocumentaires.

Une application qui permet de rendre une présentation dynamique et non-linéaire grâce à des liens et des changements d'échelle.

Cette application permet la création d'images interactives, ainsi que l'insertion de contenus multimédias à l'intérieur de vos vidéos.

https://pictogon.com/

Des outils spécifiques en fonction des productions...

KLYNT

PICTOGON

PREZI

THINGLINK

https://www.klynt.net/

https://prezi.com/

https://www.thinglink.com/edu

À l'aide de polygones, cette application permet de dessiner des zones interractives sur une image.

https://www.genial.ly/fr

- présentation- image interactive- infographie- présentation "gamifiées"- story (bientôt)...

... et un couteau-suisse !

Si vous ne souhaitez pas vous créer de compte, vous pouvez utiliser les identifiants ci-dessous :

• email : productioninteractive@laposte.net
• mdp : emi2019

Objectif : réaliser un document interactif avec Genial.ly pour garder trace des conférences de la journée EMI2019.

À vous de jouer !

Gérer les pages

Intégrer un tweet de Twitter

Intégrer un graphique d'Infogram

Intégrer un PDF

Intégrer des vidéos

Insérer des images

Donner vie avec de l'animation

Interactivité

Édition basique

Comment commencer à créer

Quelques tutoriels...

@Soycool0

florian.cool@ac-versailles.fr

D'autres questions ? Un retour d'expérience ?

Merci de votreattention !