Timeline, chronologies, etc : Différence entre versions
(Page créée avec « Comment créer une frise chronologique sympa pour le web ? Regardez ici : * https://elliottchiaradia.ch/blog/article/detail/timelinejs-la-creation-de-timelines-a-portee-d... ») |
|||
| (12 révisions intermédiaires par le même utilisateur non affichées) | |||
| Ligne 1 : | Ligne 1 : | ||
Comment créer une frise chronologique sympa pour le web ? | Comment créer une frise chronologique sympa pour le web ? | ||
| + | ==avec Timeline JS== | ||
| + | Timeline JS permet réaliser des frises chronologiques très belles, permettant d'afficher différents paramètres: | ||
| + | * une image | ||
| + | * un titre | ||
| + | * un texte | ||
| + | il permet egalement de créer plusieurs "groupe" (des frises paralèles). | ||
| + | ===Timeline JS à partir d'un tableau google shit=== | ||
| + | * [https://elliottchiaradia.ch/blog/article/detail/timelinejs-la-creation-de-timelines-a-portee-de-main Suivez ce tuto en français.] | ||
| + | * Ou [https://timeline.knightlab.com/#make celui-ci en anglais] | ||
| + | le principe est le suivant : | ||
| + | * vous mettez les données dans un tableau Google (feuille de calcul) basée sur une [https://docs.google.com/spreadsheets/d/1pHBvXN7nmGkiG8uQSUB82eNlnL8xHu6kydzH_-eguHQ/template/preview feuille de calcul type] (cliquez sur : utiliser ce modèle). | ||
| + | * vous partagez ce tableau : faites fichier -> partager -> publier sur le web, cliquez OK. | ||
| + | * Copiez l'URL de la page google dans la barre d'URL de votre navigateur. | ||
| + | * revenez sur le site de Knightlab et collez l'URL la ou il faut. | ||
| + | * vous pouvez ajuster la lisibilité en réglant les "optionnal settings". | ||
| + | |||
| + | pour créer plusieurs lignes paralèles, dans le tableau google c'est au bout dans la colonne "group". | ||
| + | |||
| + | |||
| + | ===Timeline JS avec logiquiz de la digitale=== | ||
| + | [https://ladigitale.dev/ La digitale] propose un vaste d'outils pédagogiques libre pour l'éducation. | ||
| + | |||
| + | [https://ladigitale.dev/blog/logiquiz-le-logiciel-qui-simplifie-l-acces-aux-outils-h5p Logiquiz] est logiciel qui s'installe sur votre ordinateur (il est multiplateforme : MAc, windows, linux). | ||
| + | |||
| + | Il s'appuis sur H5P, qui est un machin bien foutu pour faire pliens de trucs. | ||
| + | |||
| + | Sur logiquiz, il y a plein d'outils. Alors, cherchez "TimeLine" et faites des essais. | ||
| + | |||
| + | Truc et astuces : si vous souhaitez héberger des images sur le web, mettez les sur ce wiki par exemple. | ||
| + | |||
| + | {| class="wikitable" | ||
| + | |- | ||
| + | ! Atouts !! Faiblesses | ||
| + | |- | ||
| + | | autonome, fonctionne sur son ordi || chaque fiche de la timeline doit être faite à la main | ||
| + | |- | ||
| + | | peut-être joué hors-ligne || les fiche ne sont pas classée par ordre chronologique, difficile de s'y retrouver | ||
| + | |- | ||
| + | | || laboriueux s'il y a beaucoup de dates | ||
| + | |} | ||
| + | |||
| + | ===Résultat=== | ||
| + | <html> | ||
| + | <iframe src='https://cdn.knightlab.com/libs/timeline3/latest/embed/index.html?source=1HJqvDkjtN0q_wY0oRDtlbY0jweHTvQ0gpGRlskdArps&font=Fjalla-Average&lang=fr&initial_zoom=2&height=650' width='100%' height='650' webkitallowfullscreen mozallowfullscreen allowfullscreen frameborder='0'></iframe> | ||
| + | </html> | ||
| + | ==Des ressources== | ||
Regardez ici : | Regardez ici : | ||
| − | * https://elliottchiaradia.ch/blog/article/detail/timelinejs-la-creation-de-timelines-a-portee-de-main | + | * comment créer une timeline avec Github https://github.com/thecdil/timelinejs-template/blob/main/docs/timeline.md |
| + | * Un tuto détaillé : https://elliottchiaradia.ch/blog/article/detail/timelinejs-la-creation-de-timelines-a-portee-de-main | ||
* https://github.com/NUKnightLab/TImelineJS3 | * https://github.com/NUKnightLab/TImelineJS3 | ||
| − | * https://ladigitale.dev/logiquiz/ | + | * Logiquiz, un logiciel qui permet de le faire : https://ladigitale.dev/logiquiz/ |
==ça donne quoi ?== | ==ça donne quoi ?== | ||
| + | |||
<html> | <html> | ||
| − | <iframe src="https:// | + | <iframe src="https://h5p.org/h5p/embed/715" width="1090" height="625" frameborder="0" allowfullscreen="allowfullscreen" allow="geolocation *; microphone *; camera *; midi *; encrypted-media *" title="Timeline"></iframe><script src="https://h5p.org/sites/all/modules/h5p/library/js/h5p-resizer.js" charset="UTF-8"></script> |
</html> | </html> | ||
Version actuelle datée du 1 octobre 2024 à 07:29
Comment créer une frise chronologique sympa pour le web ?
Sommaire
avec Timeline JS
Timeline JS permet réaliser des frises chronologiques très belles, permettant d'afficher différents paramètres:
- une image
- un titre
- un texte
il permet egalement de créer plusieurs "groupe" (des frises paralèles).
Timeline JS à partir d'un tableau google shit
le principe est le suivant :
- vous mettez les données dans un tableau Google (feuille de calcul) basée sur une feuille de calcul type (cliquez sur : utiliser ce modèle).
- vous partagez ce tableau : faites fichier -> partager -> publier sur le web, cliquez OK.
- Copiez l'URL de la page google dans la barre d'URL de votre navigateur.
- revenez sur le site de Knightlab et collez l'URL la ou il faut.
- vous pouvez ajuster la lisibilité en réglant les "optionnal settings".
pour créer plusieurs lignes paralèles, dans le tableau google c'est au bout dans la colonne "group".
Timeline JS avec logiquiz de la digitale
La digitale propose un vaste d'outils pédagogiques libre pour l'éducation.
Logiquiz est logiciel qui s'installe sur votre ordinateur (il est multiplateforme : MAc, windows, linux).
Il s'appuis sur H5P, qui est un machin bien foutu pour faire pliens de trucs.
Sur logiquiz, il y a plein d'outils. Alors, cherchez "TimeLine" et faites des essais.
Truc et astuces : si vous souhaitez héberger des images sur le web, mettez les sur ce wiki par exemple.
| Atouts | Faiblesses |
|---|---|
| autonome, fonctionne sur son ordi | chaque fiche de la timeline doit être faite à la main |
| peut-être joué hors-ligne | les fiche ne sont pas classée par ordre chronologique, difficile de s'y retrouver |
| laboriueux s'il y a beaucoup de dates |
Résultat
Des ressources
Regardez ici :
- comment créer une timeline avec Github https://github.com/thecdil/timelinejs-template/blob/main/docs/timeline.md
- Un tuto détaillé : https://elliottchiaradia.ch/blog/article/detail/timelinejs-la-creation-de-timelines-a-portee-de-main
- https://github.com/NUKnightLab/TImelineJS3
- Logiquiz, un logiciel qui permet de le faire : https://ladigitale.dev/logiquiz/
ça donne quoi ?
