Réaliser une production interactive

Réaliser une production interactive en classe

Florian COOL, professeur documentaliste

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.

acver.fr/productioninteractive

Planifier

Définir

Sommaire

Présenter

Se documenter

Structurer

Réaliser

Planifier

Définir

Se documenter

Présenter

Définir

Structurer

Réaliser

À vous de jouer !

INTERACTIVITÉ

Qu'est-ce que l'interactivité ?

(Définition simple)

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

Interactif, ve (adj.) :

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.

Source : Larousse en ligne

Qu'est-ce que l'interactivité ?

(Définition avancée)

« 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

Hyperlien, hypertexte, hypermédia

HYPERMÉDIA

HYPERTEXTE

HYPERLIEN

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.

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.

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.

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

Hyperlien, hypertexte, hypermédia

hyperlien

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

HYPERTEXTE

HYPERMÉDIA

Exemples de productions interactives

QUIZ INTERACTIF

AFFICHE INTERACTIVE

IMAGE INTERACTIVE

CHRONOLOGIE INTERACTIVE

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

Collège - 3eme Anglais Cours et AP

Lycée - 1ere L Histoire Cours

Collège - 5eme Français-EMI ???

Site du collège

Académie de Nantes

Exemples de productions interactives

PRÉSENTATION INTERACTIVE

COMPTE-RENDU INTERACTIF

WEBDOCUMENTAIRE

ESCAPE GAME

Collège - 6eme EMI ???

Collège - 3eme Histoire-EMC-EMI Cours et AP

Collège - 4eme Allemand-EMI Cours

Collège - 6eme Histoire-EMC-EMI Cours et AP

Site du collège

Scape

Strabon

Des productions très diverses

DIFFÉRENCES

POINTS COMMUNS

VS

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

Interactivité

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

Application utilisée

Démarche de projet pas systématique

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

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

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

Dans quel cadre institutionnel ?

Nouveaux programmes de lycée

Programmes de collège

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)

L'EMI et les programmes (cycle 4)

L'EMI et les programmes (cycle 3)

Sciences numériques et technologie 2nde

Langues vivantes 2nde

Quelques pistes

les Enseignements Pratiques Interdisciplinaires

EMC 1ere

Et aussi....

Citoyen

Sciences de la Vie et de la Terre 1ere

les parcours

PEAC

Les enjeux d'une production interactive

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

• Augmenter la motivation des élèves

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

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

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

Planifier

Définir

Se documenter

Présenter

Planifier

Structurer

Réaliser

À vous de jouer !

QU'EST-CE QUI CARACTÉRISE UNE DÉMARCHE DE PROJET ?

"La démarche de projet :

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

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

• 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 ;

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

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

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

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

Les étapes du projet

STRUCTURATION DE LA PRODUCTION

RÉALISATION DE LA PRODUCTION

PRÉSENTATION DU PROJET

RECHERCHES DOCUMENTAIRES

BILAN DU PROJET

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

Élaboration du projet et 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.

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

Restitution du projet. Institutionnalisation des savoirs. Phase d'évaluation (et d'auto-évaluation) Démarche réflexive sur les compétences travaillées au cours du 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.

QUI ?

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

QUOI ?

OÙ ?

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

Quels espaces (physiques et numériques) ?

COMMENT ?

QUAND ?

Planifier un projet

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

Quelle durée totale ? Sur quelles heures ?

COMBIEN ?

POURQUOI ?

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

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

Coopération ou collaboration ?

PRODUCTION

PRODUCTION PRODUCTION PRODUCTION PRODUCTION PRODUCTION

COOPÉRATION

COLLABORATION

VS

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

La production finale est plus ambitieuse

La production finale est moins ambitieuse

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

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

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

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

Planifier

Définir

Se documenter

Présenter

Présenter

Structurer

Réaliser

Appréhender l'objet de la production

Des pistes d'activités possibles :

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

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

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

À vous de jouer !

Naviguez quelques minutes dans les webdocumentaires suivants...

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

acver.fr/webdoc2

acver.fr/webdoc1

framemo.org/1306interactif

acver.fr/webdoc4

acver.fr/webdoc5

Planifier

Définir

Présenter

Se documenter

Se documenter

Structurer

Réaliser

Trouver des ressources : images

et bien d'autres...

Banques d'images librement réutilisables

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.

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

Trouver des ressources : vidéos

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

CGU INA

CGU FranceTV

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

CGU Onisep

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

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

Comment représenter mes données ?

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

Comparer des grandeurs de même nature

Comparer des proportions ou des pourcentages

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

Voir la fiche

Voir la fiche

Voir la fiche

Voir la fiche

Planifier

Définir

Se documenter

Présenter

Structurer

Structurer

Réaliser

Découper son scénario

DÉCOUPAGE TOPOLOGIQUE

DÉCOUPAGE THÉMATIQUE

DÉCOUPAGE CHRONOLOGIQUE

PARCOURS PERSONNALISÉ

"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."

"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"

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

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

Source 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 EN ARÊTES DE POISSON

STRUCTURE LINÉAIRE

STRUCTURE CONCENTRIQUE

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

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

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

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

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

Réaliser un diagramme numérique

Draw.io

Application totalement gratuite Pas d'inscription nécessaire Pas de limite de documents à réaliser

Interface en anglais

Images : Fidel Navamuel / OutilsTice.com

LucidChart

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

Inscription nécessaire Maximum 3 documents avec un compte gratuit

À vous de jouer !

Rendez-vous sur

AFFICHE INTERACTIVE

DIAPORAMA INTERACTIF

https://test.quiziniere.com/

Code de l'exercice :

V2YME2

COMPTE-RENDU INTERACTIF

WEBDOCUMENTAIRE

À vous de jouer !

COMPTE-RENDU INTERACTIF

DIAPORAMA INTERACTIF

AFFICHE INTERACTIVE

WEBDOCUMENTAIRE

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

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

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

Structure linéaire Découpage thématique Travail en coopération

Planifier

Définir

Présenter

Se documenter

Réaliser

Structurer

Réaliser

Choisir des outils numériques...

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

• 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é

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

THINGLINK

KLYNT

PREZI

PICTOGON

https://www.klynt.net/

https://www.thinglink.com/edu

https://prezi.com/

https://pictogon.com/

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.

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

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

... et un couteau-suisse !

https://www.genial.ly/fr

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

À vous de jouer !

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

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

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

Quelques tutoriels...

Insérer des images

Comment commencer à créer

Intégrer des vidéos

Édition basique

Intégrer un PDF

Interactivité

Intégrer un graphique d'Infogram

Donner vie avec de l'animation

Intégrer un tweet de Twitter

Gérer les pages

Merci de votre attention !

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

florian.cool@ac-versailles.fr

@Soycool0