Chronologie JS en russe. Chronologie du projet. Avant le départ : trois points importants

Une chronologie graphique affiche les événements par ordre chronologique et constitue un moyen très efficace de visualiser les informations au fil du temps. Que ce soit à des fins de gestion de projet, pour des affaires juridiques ou pour retracer des événements historiques, l'organisation visuelle des événements sous forme de séquence de points/jalons permet de simplifier et d'illustrer des contextes complexes, les rendant faciles à comprendre et à suivre.

Meilleures utilisations de la chronologie

• Visualisation calendriers de projet pour vous aider, vous et votre équipe, à rester sur la bonne voie
• Aider affaires juridiques, pour montrer la relation entre différents faits (par exemple, comment une déclaration de témoin correspond à des images de sécurité)
• Regrouper plusieurs événements en un seul chronologique commande; la narration non linéaire (comme l'ordre des événements dans la franchise de films Marvel Comic) peut prêter à confusion, donc les réorganiser dans une chronologie peut donner une certaine clarté
• Communicant historique les données de manière ludique, visuelle et facilement compréhensible

Comment faire une timeline avec Vizzlo ?

Créez facilement une chronologie convaincante en ligne et exportez-la vers vos présentations et rapports. Cliquez sur le didacticiel vidéo ou suivez simplement ces étapes très simples :

• Sélectionnez la taille du document sur l'onglet « APPARENCE » de la barre latérale
• Choisissez un « style de date » pour définir comment organiser vos données, en jours, semaines, mois, etc.
• Cliquez sur n'importe quel jalon pour modifier les données et changer les couleurs si nécessaire
• Cliquez sur l'axe pour ajouter un nouveau jalon ou un saut d'échelle
• Enfin, affinez l'apparence de votre timeline en explorant les options de personnalisation de l'onglet « APPARENCE »

Chronologie : conseils de pro

• Ajoutez rapidement une plus grande quantité de données à l’aide de la feuille de calcul. Pour cela, cliquez sur le bouton « SPREADSHEET » dans l’onglet « DONNÉES » de la barre latérale. À l'aide de l'icône de roue, assurez-vous que le format de date correspond à votre ensemble de données. Importez ou copiez et collez vos données dans le tableau

Créateur de chronologie : fonctionnalités clés

• Différents styles de jalons : jour, semaine, mois, trimestre, année ou aucun
• Positionnement automatique ou manuel des jalons
• Formats et couleurs de date personnalisés
• Sauts d'échelle facultatifs
• Données historiques (années BCE/CE)

La timeline permet d'organiser la gestion des objets dans le temps, et affiche également visuellement l'ordre dans lequel les objets se succèdent.

Il existe une connexion directe entre les objets de la timeline et les objets de l'éditeur de scène. Ainsi, par exemple, lorsqu'un objet est sélectionné dans la timeline, l'objet est sélectionné dans l'éditeur ; lorsqu'un objet est supprimé de la timeline, il est supprimé de l'éditeur et vice versa. Il s'agit essentiellement du même objet, mais affiché dans l'espace dans l'éditeur de scène et dans le temps dans la timeline.

À l'aide de la chronologie, vous pouvez modifier l'heure de début d'apparition d'un objet sur la scène, ainsi que sa durée. À l'aide du curseur, vous pouvez régler l'heure actuelle dans l'éditeur et la scène entière sera redessinée en fonction de l'heure actuelle. L'heure actuelle de l'éditeur est affichée dans la barre d'état, et les heures de début et de fin de la plage de la zone de travail y sont également affichées.

Vous pouvez gérer les objets à l'aide du menu appelé en cliquant sur le bouton droit de la souris. Vous pouvez supprimer un objet, le copier dans le presse-papiers, couper ou coller un objet depuis le presse-papiers. Vous pouvez également modifier l'ordre des objets en sélectionnant l'élément approprié dans le menu. Les éléments « Déplacer le curseur au début/à la fin » vous permettent de modifier l'heure actuelle et de la définir égale à l'heure à laquelle l'objet apparaît ou à l'heure à laquelle il est masqué. L'élément de menu « Propriétés » affiche une fenêtre avec les propriétés de l'objet.

Lorsque vous sélectionnez un objet dans la timeline, un onglet supplémentaire apparaît avec le nom de cet objet. En cliquant dessus, vous passerez à l'édition de cet objet et pourrez y ajouter d'autres objets ou effets. Dans ce cas, la chronologie affichera désormais le contenu de l'objet d'édition actuel. Pour revenir à l'édition d'une scène, vous devez sélectionner l'onglet portant le nom de la scène (c'est toujours le premier). Vous pouvez également passer en mode édition d'objet en double-cliquant sur le nom de l'objet dans la timeline.

Il convient de noter que lors de l'édition d'une scène ou d'un sprite, l'ordre des objets dans la timeline est inversé, c'est-à-dire Le premier objet de la timeline est affiché en dernier dans l'éditeur (au-dessus de tous les autres). Dans le même temps, l'ordre des effets est direct et montre dans quel ordre les filtres sont appliqués à l'objet.

Lorsque vous double-cliquez sur l'un des blocs de la timeline, la zone de travail est sélectionnée en fonction de son heure et de sa durée d'apparition. Vous pouvez également définir la zone de travail via la barre d'outils correspondante (voir ci-dessous), ou en cliquant sur la règle de temps dans la chronologie et en maintenant le bouton enfoncé, sélectionnez la plage requise, puis relâchez-la. Une autre façon de contrôler un espace de travail consiste à manipuler directement ses pointeurs. En faisant glisser le pointeur de début ou de fin de la zone de travail, vous pouvez modifier sa position dans le temps.

Barre d'outils " Outils de zoom”

Cette barre d'outils vous permet de modifier l'échelle de temps dans la timeline. Il contient les éléments suivants : zoom avant, zoom arrière, zoom minimum, curseur de zoom fluide. Vous pouvez également définir l'échelle pour l'adapter à la zone de travail. Pour ce faire, sélectionnez une plage dans la timeline et cliquez sur le bouton correspondant dans la barre d'outils.

Barre d'outils " Outils de gestion”

Contient les éléments suivants : changer le mode d'affichage temps/image, déplacer le curseur au début de l'objet sélectionné, à la seconde précédente, à l'image précédente, à l'image suivante, à la seconde suivante et à la fin de l'objet sélectionné, respectivement . Ici, vous pouvez définir le début et la fin de la zone de travail, ainsi qu'aligner son début ou sa fin avec la position du curseur.

Barre d'outils " Gestion des blocs”

Cette barre d'outils est utilisée pour gérer les blocs (objets) dans la timeline et permet d'aligner les blocs dans le temps avec le curseur, et l'alignement est possible au moment où les objets ont commencé à apparaître et au moment où ils ont disparu. Ici, vous pouvez aligner les blocs sélectionnés les uns avec les autres afin qu'un bloc suive l'autre immédiatement ou avec un certain décalage. Cela peut être utilisé lorsque vous devez créer une scène dans laquelle un objet en remplace un autre séquentiellement ou sur une période de temps.

L'idée originale de l'équipe Timeline JS. Permet de créer des flux d'événements liés à Google Maps. En termes de fonctionnalité et de simplicité, c'est au-delà des éloges. Bien que le service soit traditionnellement considéré comme un outil de création de cartes interactives, il peut être utilisé pour réaliser des affiches ou présenter la biographie d'un héros.

Mon amour personnel dans le monde des services de création de chronologies. Les chronologies s'avèrent volumineuses et volumineuses, car vous pouvez utiliser des photos, des vidéos, de l'audio et coudre des liens.

Ici, vous pouvez changer le mode de 2D à 3D, lorsque le lecteur se déplace chronologiquement plus profondément dans l'écran, et personnaliser l'apparence de la bande entière et des points temporels individuels. Tous les plaisirs sont disponibles dans la version gratuite avec une limitation : vous ne pouvez créer qu'une seule chronologie et vous ne pouvez pas obtenir de code d'intégration pour l'intégration sur un site Web ou un blog. Si vous n'avez pas assez d'argent pour un forfait payant, vous pouvez enregistrer un nombre illimité d'e-mails - vous n'avez même pas besoin de confirmation

La chronologie du service Sutori n'est pas similaire aux chronologies horizontales habituelles. Ici, vous enchaînez différents types de contenu sur un axe vertical le long duquel le lecteur se déplace de haut en bas. Il peut s'agir de texte, de photo, de vidéo ou d'audio avec une description, ainsi que de faits intéressants, de sondages, de tests ou de discussions. Les intervalles de temps sont personnalisables et dépendent de l'endroit où sur l'axe vertical vous appuyez sur le bouton plus. L’outil vous permet de raconter différentes histoires médiatiques, mais visuellement, le projet semblera basé sur une chronologie.

Le service permet aux étudiants de créer jusqu'à trois chronologies gratuitement, mais personne n'a besoin d'un carnet de notes lors de l'inscription. L'interface est stylisée comme un récepteur à l'ancienne, qui peut être transformé en une fonctionnalité du matériel. L'importance des événements est définie par l'utilisateur et affichée sur une échelle de taille de police. Le lecteur clique sur le moment qui l'intéresse et en apprend davantage. Les illustrations sont affichées sur une échelle parallèle en haut, ce qui est inhabituel. Vous ne pouvez pas ajouter de fragment vidéo ou audio. Le résultat est intégré sur un site Web ou un blog à l'aide d'un code d'intégration.

Le service n'est pratiquement pas utilisé dans RuNet.

Le service crée des graphiques temporels basés sur du texte. Vous ne pouvez pas ajouter de photos ou d'autres éléments multimédias aux événements.

Le service est similaire à StoryMap JS : il construit également des chronologies liées aux géolocalisations, vous permettant de marquer non seulement la date et l'heure d'un événement, mais aussi le lieu où il s'est produit. Le résultat est une présentation chronologique.

L'histoire terminée peut être intégrée sur un site Web ou un blog à l'aide d'un code d'intégration avec lecture automatique (l'utilisateur se déplacera d'un point à l'autre à des intervalles de 15 secondes). Il est possible de sauvegarder les données sous forme de tableau CSV, qui contient uniquement des données textuelles sur le lieu, l'heure et les descriptions d'événements ; au format KML (permet de télécharger la présentation pour la visualiser dans Google Maps ou un autre service de cartographie) ou au format PDF. Le service est facile à prendre en main, il est gratuit et bien russophone.

Un article dans lequel nous examinerons le processus de création d'une chronologie réactive à l'aide des classes de grille Bootstrap 4.

Qu'est-ce qu'une chronologie ?

Chronologie est un élément d'interface conçu pour afficher une liste de certains événements par ordre chronologique sur un site Internet.

Par exemple, avec son aide, vous pouvez organiser une présentation de l'historique des publications ou des actions des utilisateurs sur un site Internet (dans votre compte personnel).

Qu'est-ce qu'une chronologie ? Une chronologie est une « chronologie » sur laquelle certains événements sont marqués par des points de contrôle. Chaque événement sur cette ligne est expliqué avec du contenu.

Les chronologies peuvent être horizontales ou verticales.

Création d'une chronologie verticale

Le processus de conception de la chronologie verticale consiste à créer la structure HTML et CSS.

Structure HTML d'une timeline verticale :

...

Un peu sur la structure du code HTML de la timeline. Un élément avec une chronologie de classe est un conteneur. L'ajout de points d'arrêt se fait en plaçant des éléments avec la classe timeline-wrapper dans ce conteneur.

À son tour, un élément avec la classe timeline-wrapper est également un conteneur, mais pour les éléments de timeline (timeline-item).

L'élément timeline (timeline-item) a une structure simple et se compose de 5 éléments span. Chacun d'entre eux est utilisé par les éléments pour baliser tout ou partie du contenu d'un point de contrôle.

L'étape suivante consiste à créer le code CSS pour le HTML ci-dessus (l'effet de chaque règle est expliqué à l'aide d'un commentaire).

/* CSS */ /* Ajout de padding à un élément avec la classe timeline */ .timeline ( padding-top: 1rem; padding-bottom: 1rem; position: relative; ) /* Création d'une ligne verticale à l'aide de pseudo-éléments */ .timeline:: avant ( contenu : " " ; position : absolue ; largeur : .125rem ; hauteur : 100 % ; couleur d'arrière-plan : #dee2e6 ; gauche : 2rem ; haut : 0 ; ) /* ajout d'un remplissage inférieur et d'une marge gauche pour les éléments avec la classe timeline -wrapper */ .timeline-wrapper ( margin-bottom: 1rem; padding-left: 4rem; ) /* supprime le remplissage inférieur du dernier élément.timeline-wrapper */ .timeline-wrapper:last -child ( margin-bottom : 0 ; ) /* styles pour les éléments de la timeline */ .timeline-item ( position : relative ; background-color : #118c4e ; couleur : #fff ; padding : .825rem ; border-radius : .25rem ; ) /* ajout de points de contrôle à la ligne verticale */ .timeline-item::before ( contenu : " " ; position : absolue ; largeur : .75rem ; hauteur : .75rem ; background-color : #118c4e ; border-radius : .4rem gauche : -2,3125rem ; haut : 50% ; 8);

Lorsque la largeur de la fenêtre d'affichage est inférieure à 576 pixels, la chronologie passe en vue mobile. Dans ce mode, le contenu de l'événement est toujours placé à droite de la timeline.

Supposons que nous travaillions sur un projet long et complexe composé de plusieurs étapes. La tâche est de montrer clairement toute la chronologie des travaux sur le projet, en plaçant les points clés du projet (jalons) sur l'axe du temps. Quelque chose comme ça :

Dans la théorie de la gestion de projet, un tel calendrier est généralement appelé calendrier ou calendrier de projet, bien que j'aie également rencontré un autre analogue en russe - « chronologie ». Dans tous les cas, l’essentiel n’est pas de savoir comment l’appeler, mais comment le construire. Allons-y...

Étape 1. Données initiales

Pour construire, il faudra formaliser les premières informations sur les jalons du projet sous la forme du tableau suivant :

Notez deux colonnes de service supplémentaires :

• Doubler- une colonne avec la même constante autour de zéro dans toutes les cellules. Cela donnera une ligne horizontale sur le graphique parallèle à l'axe X, sur laquelle les nœuds - les jalons du projet - seront visibles. En principe, il serait possible d'utiliser un zéro complet, mais le graphique coïncide alors avec l'axe X, ce qui pose alors des problèmes de personnalisation de l'apparence du graphique dans Excel 2007-2010. Le nouvel Excel 2013 accepte les zéros sereinement.
• Légendes- des colonnes invisibles pour augmenter les signatures jusqu'aux jalons d'un montant donné (différent) afin que les signatures ne se chevauchent pas. Valeurs 1,2,3, etc. fixent le niveau d'élévation des signatures au-dessus de l'axe du temps et sont choisis arbitrairement.

Étape 2. Construire la base

Maintenant, nous sélectionnons tout dans le tableau sauf la première colonne (c'est-à-dire la plage B1: D13 dans notre exemple) et construisons un graphique plat régulier avec des marqueurs sur l'onglet. Insérer - Graphique - Graphique avec marqueurs (Insertion - Graphique - Ligne avec marqueurs) :

Nous supprimons les lignes de quadrillage, les échelles verticales et horizontales et la légende. Vous pouvez le faire manuellement (sélectionnez avec la souris et appuyez sur Supprimer) ou en désactivant les éléments inutiles sur l'onglet Mise en page. Le résultat devrait être le suivant :

Sélectionnez maintenant la ligne Légendes(c'est-à-dire une ligne orange brisée) et sur l'onglet Mise en page sélectionner une équipe Lignes - Lignes de projection (Mise en page - Lignes - Lignes de projection) :

De chaque point du graphique supérieur, une perpendiculaire sera tracée vers celle du bas. Dans le nouvel Excel 2013, cette option se trouve sur l'onglet Constructeur - Ajouter un élément de graphique(Conception - Ajouter un élément de graphique) .

Étape 3. Ajoutez les noms des étapes

Cette partie sera simple pour ceux qui ont déjà osé ​​installer le nouvel Excel 2013 et plus difficile pour ceux qui travaillent encore avec des versions plus anciennes.

Excel 2013 facilite les choses. Comme je l'ai déjà écrit, il peut créer des légendes pour les points de données simplement en prenant le texte de n'importe quelle plage spécifiée par l'utilisateur. Pour ce faire, vous devez sélectionner la ligne avec les données (orange) et sur l'onglet Constructeur choisir Ajouter un élément de graphique - Étiquettes - Options avancées (Conception - Ajouter un élément de graphique - Étiquettes de données) , puis dans le panneau qui apparaît à droite, cochez la case Valeurs des cellules et sélectionnez la plage A2:A13 :

Les versions Excel 2007-2010 et antérieures ne disposent pas de cette option, mais vous disposez de deux options alternatives :

Étape 4. Cacher les lignes et ajouter de la brillance

Faisons les dernières modifications pour transformer notre diagramme presque terminé en un chef-d'œuvre complet et final :

• Sélectionnez une ligne Légendes(ligne orange), faites un clic droit dessus et sélectionnez Formater la série de données. Dans la fenêtre qui s'ouvre, supprimez la couleur de remplissage et de ligne. Le graphique orange disparaît essentiellement du diagramme – seules les étiquettes restent. C'est ce qui est requis.
• Ajoutez des signatures de date à l'axe du temps bleu sur l'onglet Disposition - Étiquettes de données - Options d'étiquettes de données supplémentaires - Noms de catégories (Mise en page - Étiquettes de données - Plus d'options - Noms des catégories) . Dans la même boîte de dialogue, les étiquettes peuvent être placées sous le graphique et pivotées de 90 degrés, si vous le souhaitez.