[Outil] Générateur de timelines

Vous voulez faire une frise chronologique pour votre roman ? Les outils existants ne vous conviennent pas ? Contrarient votre subtil goût pour l'esthétique ? Vous n'avez pas la patience pour en monter une via paint ou autre outil de dessin ? Ou tout simplement la flemme de revenir à chaque fois qu'un élément change ?

Alors ce topic est fait pour vous !

Moi aussi, je voulais une timeline claire me permettant de retracer l'évolution de mes personnages simplement. N'étant pas satisfait des solutions existantes (notamment sur le web), j'ai crée l'outil de mes rêves !

Voici un aperçu :
[

La chronologie se compose comme suit :

• Deux axes temporels
  
• Un axe temporel informatif (heures, jours, ect...)
  
• Trois niveaux distincts pour placer les évènements et les relier entre eux

Pour utiliser mon outil, vous allez devoir utiliser ces logiciels :

• Wamp Server : serveur web permettant de faire tourner du php en local. Ce qu'il faut comprendre : c'est grâce à Wamp que la page s'affiche
  
• Le site web : pack qui permettra de générer la page
  
• Un navigateur web : de préférence Firefox, même si Chrome est pas mal aussi
  
• Awesome Screenshot (Firefox, Chrome) : plugin qui permettra d'enregistrer la page en image, ce qui est plus pratique pour visualiser
  
• Paint.net : qui nous servira à couper le bas de l'image qui sera en trop

1. Télécharger et installer Wamp Server : c'est pas compliqué, je suis sûr que vous pouvez y arriver !
   
2. Télécharger et Installer Paint.net : idem
   
3. Installer le plugin Awesome Screenshot : paix à votre âme si vous êtes sur IE  
   
4. Extraire l'archive dans le dossier www (C:\Program Files\Wamp\www)
   
5. Lancer Wamp Server
   
6. Se rendre sur la page http://localhost/Chronologie/
   
7. Là, vous allez avoir une page avec un formulaire Ici, c'est l'axe temporel principal. Un élément par ligne. Remplissez le champ puis cliquez sur le bouton Envoyer pour passer à l'étape suivante.
   
8. Une fois fait, un nouveau niveau s'affiche : Vous allez pouvoir ajouter l'axe temporel inférieur.Remplissez les champs puis cliquez sur le bouton Envoyer pour passer à l'étape suivante.
   
9. C'est maintenant que vous allez pouvoir ajouter les évènements : En 1, vous pourrez rajouter une heure, une autre information temporelle ou laisser le champ vide (selon les besoin). En 2, vous pourrez rajouter vos évènements (un par ligne). Petite subtilité, les évènements peuvent être sur 3 niveaux distincts (bas, milieu, haut). Pour les mettre en haut, il faut précéder l'évènement de "1:" (sans les guillemets). Pour le milieu, "2:" et pour le bas, "3:". Si deux éléments se suivent avec cette méthode, une flèche les reliera. Si vous laissez l'élément vide, aucun évènement ne sera affiché. Voici un exemple : Remplissez les champs puis cliquez sur le bouton Envoyer pour passer à l'étape suivante.
   
10. Le lien "Génération de la chronologie" apparaît finalement : Vous allez pouvoir constater le fruit de votre dur labeur ! Vous pourrez toujours modifier la chronologie en modifiant le contenu des champs, c'est pourquoi je vous conseille de l'ouvrir dans un nouvel onglet.
    
11. Et voilà le travail ! Bon, les barres noires dépassent. Je ne suis pas parfait, ma chronologie non plus
    Pour solutionner ça, un petit effort sera requis : il faut modifier 3 lignes dans le fichier "style.css". Dans le fichier, il faudra changer la valeur du champ height des classes ".longueur_0" (bulles du haut), ".longueur_1" (bulles du milieu), ".longueur_2" (bulles du bas). La valeur est Ypx (Y étant un nombre entier), il suffit de diminuer ou augmenter ce Y pour solutionner le tout.
    
12. Bon, en vrai, c'est pas fini. Maintenant il faut encore enregistrer l'image. C'est pas compliqué, il faut cliquer sur l'icone d'Awesome Screenshot (un espèce de rond noir avec des couleurs dedans) puis "Capture entire page". Une fenêtre s'ouvre, vous avez la possibilité d'encore modifier l'image. Perso, je préfère Paint pour ça. Cliquez sur Done puis Save local.
    
13. Une fois l'image sauvegardée, ouvrez-la avec Paint.net. Activez la règle et sur la gauche, regardez la hauteur de la timeline sur la règle à gauche (pour info, celle de l'exemple était d'environ 350 pixels). Ensuite, Allez dans Image/Taille de la zone de dessin puis il vous suffit de mettre la valeur que vous avez relevée dans le champ Hauteur. Voilà ! Votre timeline est prête !  

Si vous avez des questions, je suis là pour y répondre !
Et faites partager vos timelines (ou pas ).

En espérant que ce petit outil maison vous sera utile.

Merci, c'est cool ! Je vais peut-être m'en servir du coup.

C'est marrant , je fais un peu le même genre de choses avec Freemind , c'une frise divisé en deux (pour mes deux personage que je suis a tour de rôle.) par contre , j'ai pas une façon de noter qui soit aussi brève.

Plus la phrase est longue et plus la lecture de l'information est longue. Libre à toi de faire comme tu le souhaites mais à mon sens, l'utilité d'une timeline, c'est justement faire que tu puisses te remettre en tête les évènements rapidement.

je n'écrit pas des pavés non-plus XD mais je précise les détails important de l'intrigue et ce que mes personages ont appris d'important.