Créer une frise interactive avec timeline.js

Créer une frise interactive avec timeline.js
1ère étape : se connecter sur google
 Ouvrir votre navigateur internet et dirigez-vous sur la
page de google.
En haut à droite, cliquez sur connexion :
Entrer votre identifiant (formation.valognes pour aujourd’hui) puis
cliquer sur suivant :
Entrer le mot de passe
(valognes50)
puis cliquer sur connexion
Vous êtes connecté avec votre compte google.
2ème étape : Récupérer le tableur nécessaire à la réalisation de la frise
 Dans la recherche google, noter timeline.js et valider votre recherche
 Sélectionner le premier site
proposé
 Vous arrivez sur ce site :
 Descendre sur la page du site pour arriver à ce visuel :
Cliquer sur le cadre bleu
« Get the Spreadsheet
Template »
 Une nouvelle fenêtre s’ouvre :
Cliquer sur « utiliser ce modèle »
en haut à gauche.
 Une copie de ce tableur s’enregistre alors sur votre drive. Vous pouvez supprimer le contenu de toutes
les lignes mis à part la première.
 Modifier le titre de votre tableur en
cliquant dessus. (en haut à gauche)
 Votre tableur est prêt sur votre drive.
3ème étape : Compléter le tableur avec les élèves (utiliser le pdf élève2 se trouvant dans le dossier tableau).
 Les élèves ne complètent pas directement le tableur sur le drive. Nous leur proposons en amont de
travailler sur un tableur (excel ou open office) que vous retrouverez sur le site de la circonscription suite
à cette formation.
 Ouvrir le tableur de travail pour les élèves (pour le retrouver suivre les indications sur le tableau blanc
de la salle)
Les cases blanches sont les cases obligatoirement remplies par les élèves.
Les cases bleues sont optionnelles.
Les cases jaunes doivent restées vides.
Colonne A : Année de début de l’évènement
Colonne B : Mois de début de l’évènement
Colonne C : Jour de début de l’évènement
Colonne D : Heure de début de l’évènement
Colonne E : Année de fin de l’évènement
Colonne F : Mois de fin de l’évènement
Colonne G : Jour de fin de l’évènement
Colonne H : Heure de fin de l’évènement
Colonne I : Date à afficher sur la frise (si vous voulez qu’elle soit différente de l’affichage automatique produit à
partir des informations des premières colonnes)
Colonne J : Titre de l’évènement
Colonne K : Texte descriptif de l’évènement (c’est aussi dans cette case que seront collés les liens vidéo ou son)
Colonne L : Coller ici l’adresse internet (URL) de l’image.
 Compléter les colonnes A à J avec les informations relatives au tableau choisi.
 Compléter une description succincte de l’artiste et/ou de son œuvre dans la colonne K.
 Retourner sur le document-élève sur
lequel se trouvent les liens vers les
images/vidéos/sons. Copier le lien de
votre son réalisé plus tôt.
 Retourner sur le tableur et double cliquer sur la case K pour compléter votre descriptif. Pour réaliser un
passage à la ligne dans la cellule, appuyer sur la touche « ctrl » du clavier et en maintenant cette touche
enfoncée, appuyer sur « Entrée ». Faites un clic droit au niveau du curseur et coller.
 Votre lien vers la vidéo ou le son est maintenant créé.
 Retourner sur le document-élève sur lequel se trouvent les liens vers les images/vidéos/sons. Copier le
lien de votre image et coller celui-ci dans la colonne L.
 Votre ligne est maintenant
complétée. Nous allons la
copier. Pour cela faire un
clic droit sur le numéro de
la ligne et copier celle-ci.
 Nous allons maintenant retourner sur le tableur collectif qui se trouve sur le drive.
4ème étape : Compléter le tableur collectif sur le drive.
 Ouvrir le navigateur internet et accéder à google
 Cliquer alors sur les 9 petits carrés se trouvant en haut à droite de l’écran
 Cliquer ensuite sur le drive
 Ouvrir le tableur collectif stocké en ligne sur le drive (pour la formation il s’agit aujourd’hui du
document intitulé « frise du 21 janvier »).
 Faire un clic droit sur le numéro de la première ligne vide de ce tableur et cliquer ensuite sur coller.
 Votre ligne est collée sur le document collectif.
5ème et dernière étape : Réaliser la frise.
 Une fois le tableur compléter par tous les élèves,
cliquer sur fichier dans celui-ci.
21 janvier
 Cliquer ensuite sur « Publier sur le web ».
 Une nouvelle fenêtre s’ouvre :
 Vérifier que le document entier est bien
noté.
 Cliquer sur publier.
 Une boite de dialogue s’ouvre, cliquer sur
« ok ».
 Un nouveau lien apparait
 Réaliser un clic droit dessus et copier celui-ci :
 Retourner maintenant sur le site timeline.js
 Accéder à ce visuel en déroulant la page :
 Faire un clic droit dans la barre blanche et cliquer sur coller.
 ( Pour une publication sur un blog dotclear : noter 500 dans la case « Width » et 325 dans la case
«Height »  ne le faites pas aujourd’hui
 Cliquer à présent sur (show) et modifier le langage et sélectionner le français
 Dérouler encore la page pour avoir ce visuel :
 Sélectionner ce code et le copier dans un document writer pour le garder en mémoire et vous éviter
à devoir refaire toutes les manipulations.
 Cliquer sur « Get link to preview »
 Votre frise s’ouvre, vous pouvez communiquer l’adresse de celle-ci aux élèves via un blog, un mail…
Penser à enregistrer la frise dans les favoris de votre navigateur internet.