Différences

Ci-dessous, les différences entre deux révisions de la page.

--- cours:tutoriel_timeline [2019/04/09 15:39]
mrcjl
+++ cours:tutoriel_timeline [2019/04/16 00:42] (Version actuelle)
mrcjl [Génération de la frise]
@@ Ligne 1: / Ligne 1: @@
 ======Tutoriel TimeLine======
-TimeLine est une application qui permet de générer des frises chronologiques modernezs et dynamiques sur Internet. Il nécessite de préparer le travail (les informations utiles) dans un document Google Sheet dont il fourni le modèle. Le contenu du document sera traité par l'application et la frise générée sera accessible par un lien Internet.
+TimeLine est une application qui permet de générer des frises chronologiques modernes et dynamiques sur Internet. Il nécessite de préparer le travail (les informations utiles) dans un document Google Sheet dont il fourni le modèle. Le contenu du document sera traité par l'application et la frise générée sera accessible par un lien Internet.
 =====Pré requis=====
-Tout d’abord, il faut créer un compte Google et se connecter avec sur Google.
+Tout d’abord, il faut se connecter avec sur Google pour y créer un compte avec une adresse gmail. Toutes les informations obligatoires sont importantes comme le numéro de téléphone destiné à recevoir les codes de confirmation. Bien sur, il ne faudra pas oublier l'adresse et son mot de passe.
+<WRAP group>
+<WRAP twothirds column>
 Puis, il faut se rendre sur le site internet Timeline JS : [[https://timeline.knightlab.com/]]
@@ Ligne 10: / Ligne 12: @@
   - Cliquer sur le bouton "Get the Spreadsheet Template" pour ouvrir le document modèle,
   - Cliquer sur le bouton "Make a Copy" afin d'enregistrer une copie du modèle et de pouvoir commencer à le remplir.
+</WRAP>
+<WRAP third column>{{ :cours:img-tl.jpg?200 |}}</WRAP>
+</WRAP>
+Il faut aussi avoir effectué des recherches pour relever les informations utiles à votre frise. Pour chaque étape de la frise, il faut au minimum : une date, un titre, une description, l'adresse URL d'une image et celle de la source. Tous les éléments doivent être libre de droit bien sur.
+=====Saisie des informations utiles=====
+Il ne faut pas modifier les titres et les colonnes sur la première ligne. Les 3 lignes d'exemples suivantes  devront être supprimées ou remplacées. L'enregistrement est automatique à chaque changement de cellule.
+Les dates seront reclassées automatiquement et la diapo de titre placé en premier si elle existe.
+{{ :cours:img_google-tl.jpg?600 |}}
+  * Les 4 colonnes rouges [A - D] correspondent à la date de début (Année, Mois, Jours et heure). Il ne faut utiliser que des nombres. L'année est obligatoire, pas les autres.
+  * Les 4 suivantes [E - H] signalent la date de fin (Année, Mois, Jours et heure) si elle existe. Les laisser vide sinon.
+  * La suivante [I] permet de personnaliser la date affichée si besoin.
+  * Les 2 suivantes correspondent au titre [J] et au texte [K] de l'information
+  * Le 4 suivantes : permettent d'insérer une image
+    * L : Lien (URL) vers l'image (Faire "Copier l'adresse de l'image" sur la page d'un site et pas dans Google).
+    * M : Lien (URL) de la page Internet ou vous avez trouvé l'image (source qui doit être libre de droit)
+    * N : Courte légende expliquant l'image si besoin.
+    * O : Affichage d'une vignette dans la chronologie si vous coller ici l'URL de l'image.
+  * Les trois suivantes personnalisent la diapo.
+    * La colonne P permet de déclarer une diapo de titre qui sera placé au début même sans date.
+    * La colonne Q organise les diapositives par groupes (une valeur identique les place dans la même ligne de la chronologie.
+    * La colonne R défini l'arrière-plan avec la valeur hexadécimale d’une couleur ou l'URL d'une image.
+{{ :cours:img-tl3.jpg?600 |}}
+=====Génération de la frise=====
+<WRAP group>
+<WRAP twothirds column>
+Il faut au préalable publier sur le web votre document : Fichier - Publier sur le web \\
+Penser à cocher la case : Republier automatiquement après chaque modification.
+Il faut ensuite copier l'adresse URL du document qui se trouve dans la barre d'adresse du navigateur et la coller à l'étape 3 de la page TimeLine et récupérer le lien généré à l'étape 4.
+</WRAP>
+<WRAP third column>{{ :cours:img-tl2.jpg?300 |}}</WRAP>
+</WRAP>
+Il est possible de configurer certaines options comme :
+  - Paramétrer la hauteur de la largeur de la frise (Width et Height)
+  - Choisir la langue : Français.
+  - Choisir les polices des titres et des textes.
+  - Paramétrer le diaporama. Pour ma part, je conseille un niveau de zoom de 3.
+Ouvrir ce lien dans un nouvel onglet pour contrôler le résultat. Si le résultat ne vous convient pas, retourner dans le document Google pour le modifier et l'améliorer. Il faut ensuite actualiser la page du résultat. Renouveler l'opération autant de fois que nécessaire.
-Il faut aussi avoir effectué des recherches pour relever les informations utiles à votre frise. Pour chaque étape j'ai besoin de : une date, un titre, une description, l'adresse URL d'une image et celle de la source. Tous les éléments doivent être libre de droit bien sur.
-=====Inscription des informations utiles=====
-Il ne faut pas modifier les titres et les colonnes. Les 3 lignes exemples devront être supprimées.

WikiTechno.morceau.fr (amen.fr)

Outils pour utilisateurs

Outils du site

Différences

Outils de la page