Répondre au Quizz 2
jusqu'à l'obtention d'un bon niveau.
Générer une frise chronologique avec Timeline Js
Le but de cet exercice est de générer une frise chronologique sur l'histoire du Web en HTML/CSS/Javascript dans un fichier
frise.html à partir des données contenues dans le fichier source frise_data.csv au format
CSV. Un petit programme Javascript extrait les données avec
la bibliothèque Papaparse puis la frise est générée avec la bibliothèque
Timeline. Celle-ci permet de travailler directement à partir d'une feuille de calcul
GoogleSpreadSheet mais pour un usage en classe,
avec la
RGPD, on ne peut pas demander aux élèves d'utiliser un compte Google. J'ai donc choisi d'utiliser des fichiers
CSV générés avec un outil classique de bureautique
comme un tableur.
Un exemple est disponible en ligne :
Générateur de frise à partir d'un fichier CSV.
Créer un dossier frise dans le dossier snt/web de son répertoire personnel sur le réseau
pédagogique puis récupérer le matériel depuis ce lien de téléchargement ,
enfin extraire l'archive avec 7zip.
On doit obtenir un dossier frise contenant les fichiers et dossiers ci-dessous.
Lister le contenu des sous-dossiers js, css et ressources puis à partir de ses
connaissances, essayer d'identifier les
différents fichiers à partir de leur extension ou du programme proposé par le système d'exploitation
pour les ouvrir. Après quelques minutes, demander à l'enseignant le rôle de ces différents fichiers.
Lancer Firefox et saisir about:config dans la barre d'adresses, accepter le risque dans la page
d'avertissement, saisir la préférence privacy.file_unique_origin dans la barre de recherche et cliquer sur
la valeur booléenne pour la passer à false.
Cette démarche est nécessaire pour permettre au code Javascript générant la frise.
Pour en savoir plus.
Il est aussi possible de générer une frise en ligne à partir de mon
Générateur de frise. Le fichier CSV, avec les données formatées comme dans la capture ci-dessous, devra être enregistré dans un Cloud pour
fournir son URL au générateur.
Ouvrir le fichier frise_data.ods avec Libre Office Calc
, le fichier texte frise_data.csv avec un éditeur de texte comme Notepad++
et le fichier frise.html avec un navigateur comme Firefox.
Le fichier frise_data.ods doit s'ouvrir sur une feuille de tableur avec sept colonnes et chaque ligne
stocke les données d'une diapositive de la frise correspondant au titre de la colonne. La première ligne est particulière
car elle renseigne le titre.
Pour chaque ligne, à l'exception de celle du titre, seule la colonne start_date_year
doit être nécessairement remplie.
start_date_year : année de début de l'événément/période de la diapositive
end_date_year : année de fin de l'événément/période de la diapositive
text_headline : titre de l'événément/période de la diapositive
text_text : texte décrivant l'événément/période de la diapositive
media_url : URL d'une ressource média (image, vidéo) illustrant l'événément/période de la diapositive
media_caption :légende de la ressource média illustrant l'événément/période de la diapositive
media_credit :citation des sources
de la ressource média illustrant l'événément/période de la diapositive. Il est indispensable de vérifier
les droits d'utilisation d'une image ou d'une vidéo avant son utilisation dans une page Web.
Quel caractère permet de séparer dans le fichier frise_data.csv, les données de deux cellules voisines sur une même ligne du fichier frise_data.ods
?
<a href='https://fr.wikipedia.org/wiki/Ted_Nelson'> Ted Nelson </a> est un lien hypertexte
écrit en langage HTML dont l'URL pointe vers la page Wikipedia de Ted Nelson. Remplacer cette URL par https://interstices.info/famille-interaction-homme-machine/#1
dans le fichier frise_data.ods puis enregistrer ce fichier au format CSV en écrasant
frise_data.csv.
Attention, dans le lien hypertexte, l'URL doit être délimitée uniquement par le caractère apostrophe ' et sans laisser d'espace.
Recharger la page frise.html dans le navigateur puis vérifier que le lien
hypertexte a bien été modifié.
Le texte de la dernière diapositive (cellule D6 dans la feuille de tableur),
est formaté en langage HTML. Repérer les balises ouvrantes <p> et
fermantes </p> qui délimitent des paragraphes et les balises
<a href='http://exemple.com'> et </a> qui délimitent les liens hypertextes.
le fichier frise_data.ods a été enregistré
au format CSV sous le nom frise_data.csv et
il doit être ouvert dans Libre Office Calc ce qui facilite les modifications
par rapport à Notepad++.
Modifier et compléter le fichier frise_data.csv pour générer une frise plus riche et
plus complète sur l'histoire du Web. Le résultat sera rendu sous la forme d'un fichier frise_data_Nom_Prenom.csv
et ce travail sera évalué.
Voici les aides et consignes :
obligation d'insérer de nombreux liens hypertextes supplémentaires vers des images, des vidéos et du texte
avec un formatage simple en HTML (balises <p>)
obligation de vérifier de citer les sources des images et vidéos insérées après avoir vérifier
leurs droits d'usage :
Les licences Creative Commons et les assouplissements du droit d'auteur permettent la réutilisation et
la diffusion de ressources :
legamedia sur eduscol
Des moteurs de recherches d'images selon leurs droits d'usages :
Google searchavec le paramétrage de l'outils Droits d'usages
