{"id":4917,"date":"2025-01-03T10:47:29","date_gmt":"2025-01-03T10:47:29","guid":{"rendered":"https:\/\/www.hgsempai.fr\/atelier\/?p=4917"},"modified":"2025-01-03T10:54:28","modified_gmt":"2025-01-03T10:54:28","slug":"creer-une-frise-chronologique-timeline-js-avec-une-ia-generative","status":"publish","type":"post","link":"https:\/\/www.hgsempai.fr\/atelier\/?p=4917","title":{"rendered":"Cr\u00e9er une frise chronologique Timeline JS avec une IA g\u00e9n\u00e9rative"},"content":{"rendered":"\n

Lorsque l’on cr\u00e9e une frise chronologique avec Timeline JS, le service en ligne nous demande de charger un template dans Google Drive et de le compl\u00e9ter pour g\u00e9n\u00e9rer la frise (tout est tr\u00e8s bien expliqu\u00e9 ici<\/a>.<\/p>\n\n\n\n

Il est alors possible de faire cr\u00e9er une frise par un IA g\u00e9n\u00e9rative. Il suffit pour cela de g\u00e9n\u00e9rer un prompt d\u00e9taillant le format de sortie de la requ\u00eate. Prenons l’exemple d’un professeur de coll\u00e8ge souhaitant g\u00e9n\u00e9rer une frise chronologique sur le th\u00e8me de l’Empire romain. Il pourrait entrer le prompt suivant:<\/p>\n\n\n\n

Tu es professeur d'histoire G\u00e9o en coll\u00e8ge. Tu dois r\u00e9aliser une frise chronologique regroupant les 20 dates les plus importantes concernant l'empire romain. D\u00e9finis ces 20 \u00e9v\u00e8nements en les pr\u00e9sentant rapidement. \nTa r\u00e9ponse doit \u00eatre donn\u00e9e au format csv\nLa premi\u00e8re colonne contient l'ann\u00e9e de d\u00e9but de l'\u00e9v\u00e8nement au format aaaa et doit \u00eatre obligatoire remplie.\nLa colonne B contient le mois de d\u00e9but de l'\u00e9v\u00e8nement au format mm et n'est pas obligatoirement remplie.\nLa colonne C contient le jour de d\u00e9but de l'\u00e9v\u00e8nement au format jj et n'est pas obligatoirement remplie.\nLa colonne D contient l'heure de d\u00e9but de l'\u00e9v\u00e8nement au format hh:mm:ss et n'est pas obligatoirement remplie.\nLa colonne E contient l'ann\u00e9e de fin de l'\u00e9v\u00e8nement au format aaaa et doit \u00eatre obligatoire remplie. Elle doit toujours correspondre \u00e0 la date de d\u00e9but ou \u00eatre situ\u00e9e plus tard si c'est une p\u00e9riode.\nLa colonne F contient le mois de fin de l'\u00e9v\u00e8nement au format mm et n'est pas obligatoirement remplie.\nLa colonne G contient le jour de fin de l'\u00e9v\u00e8nement au format jj et n'est pas obligatoirement remplie.\nLa colonne H contient l'heure de fin de l'\u00e9v\u00e8nement au format hh:mm:ss et n'est pas obligatoirement remplie.\nLa colonne I est laiss\u00e9e libre.\nLa colonne H contient le titre de l'\u00e9v\u00e8nement.\nLa colonne K contient une courte description de l'\u00e9v\u00e8nement.<\/code><\/pre>\n\n\n\n
Il obtiendrait alors le code suivant:<\/p>\n\n\n\n
Date d\u00e9but ann\u00e9e,Date d\u00e9but mois,Date d\u00e9but jour,Date d\u00e9but heure,Date fin ann\u00e9e,Date fin mois,Date fin jour,Date fin heure,,Titre,Description\n-753,,,,-753,,,,,Fondation de Rome,\"Fondation de Rome par Romulus.\"\n-509,,,,-509,,,,,D\u00e9but de la R\u00e9publique romaine,\"Remplacement de la monarchie par la R\u00e9publique romaine.\"\n-218,,,,-201,,,,,Deuxi\u00e8me Guerre punique,\"Conflit majeur entre Rome et Carthage, marqu\u00e9 par les exploits d'Hannibal.\"\n-44,,,,-44,,,,,Assassinat de Jules C\u00e9sar,\"Assassinat de Jules C\u00e9sar par un groupe de s\u00e9nateurs.\"\n-27,,,,-27,,,,,D\u00e9but de l'Empire romain,\"Octave devient le premier empereur sous le nom d'Auguste.\"\n64,,,64,,,,,Grand incendie de Rome,\"Incendie d\u00e9vastateur sous le r\u00e8gne de N\u00e9ron.\"\n79,,,79,,,,,\u00c9ruption du V\u00e9suve,\"Destruction de Pomp\u00e9i et d'Herculanum par une \u00e9ruption volcanique.\"\n212,,,212,,,,,\u00c9dit de Caracalla,\"Accorde la citoyennet\u00e9 romaine \u00e0 tous les hommes libres de l'Empire.\"\n313,,,313,,,,,\u00c9dit de Milan,\"Constantin promulgue la libert\u00e9 de culte pour les chr\u00e9tiens.\"\n325,,,325,,,,,Concile de Nic\u00e9e,\"\u00c9tablissement des bases doctrinales du christianisme.\"\n330,,,330,,,,,Inauguration de Constantinople,\"Fondation de Constantinople par Constantin.\"\n395,,,395,,,,,Division de l'Empire romain,\"S\u00e9paration de l'Empire romain en Empires d'Orient et d'Occident.\"\n410,,,410,,,,,Saccage de Rome,\"Pillage de Rome par les Wisigoths dirig\u00e9s par Alaric.\"\n476,,,476,,,,,Chute de l'Empire romain d'Occident,\"D\u00e9position du dernier empereur romain d'Occident, Romulus Augustule.\"\n527,,,565,,,,,R\u00e8gne de Justinien,\"R\u00e8gne de l'empereur Justinien et reconqu\u00eate partielle de l'Occident.\"\n622,,,622,,,,,D\u00e9but de l'H\u00e9gire,\"D\u00e9part de Mahomet de La Mecque vers M\u00e9dine.\"\n800,,,800,,,,,Couronnement de Charlemagne,\"Charlemagne est couronn\u00e9 empereur des Romains par le pape L\u00e9on III.\"\n1054,,,1054,,,,,Grand Schisme,\"S\u00e9paration entre l'\u00c9glise d'Orient et l'\u00c9glise d'Occident.\"\n1453,,,1453,,,,,Chute de Constantinople,\"Prise de Constantinople par les Ottomans, marquant la fin de l'Empire byzantin.\"\n1492,,,1492,,,,,D\u00e9couverte de l'Am\u00e9rique,\"Exp\u00e9dition de Christophe Colomb qui d\u00e9couvre le Nouveau Monde.<\/code><\/pre>\n\n\n\n
Il lui suffirait alors de copier le code et de le \u00ab\u00a0coller\u00a0\u00bb dans la premi\u00e8re case d’un tableau LibreOffice Calc en veillant bien \u00e0 s\u00e9lectionner \u00ab\u00a0Virgule\u00a0\u00bb dans options de s\u00e9parateur.<\/p>\n\n\n
\n
\"\"<\/figure>\n<\/div>\n\n\n
Il obtiendrait alors le tableau suivant<\/p>\n\n\n
\n
\"\"<\/figure>\n<\/div>\n\n\n
A noter qu’il peut y avoir des petites erreurs dans la r\u00e9partition des informations dans les colonnes et qu’il convient donc de v\u00e9rifier.<\/p>\n\n\n\n
Il suffit alors de copier \/ coller le tableau \u00e0 partir de la ligne 2 dans le template fourni par timeline JS en prenant soin de de ne pas effacer la premi\u00e8re ligne.<\/p>\n\n\n\n
Il n’y a plus qu’\u00e0 suivre la fin du tutoriel de timeline JS et on obtient la frise suivante:<\/p>\n\n\n\n