VizStory is a program designed for the elaboration of visual narratives.

Group:the term “group” is the general name for any type of visual collection in VizStory. In the “Edit” mode, the creation of a visual narrative starts with the creation of at least one group. Under a group, the user can create “New frame sets”, “New grids”, or include an existing “frame set” or “grid”.

Frame set:the term “frame set” designates a collection of “nodes”. A frameset is a basic “collective unit” of visual elements placed in a succession of “nodes”.

Grid: a grid is a matrix to display several frame sets at the same time. A grid can contain from 2 to 16 framesets (recommended maximum). Each frame set in a grid constitutes a narrative in itself. The grid mode can be used to create a new narrative, to assemble existing frame sets into a single narrative. A grid can also contain grids to create pathways similar to pearl trees.

Node:a node is the basic brick of a visual narrative. A node can receive one or several “objects”. There is no specification, but when a node contains several objects, the size of each object is reduced to fit in the standard display frame.

Object: an “object” is an individual visual document: still image (photograph, drawing, etc), map (as still image), film, and an external web link (map, web page, etc.).

Vizstory : Notice d'utilisation

Vizstory est une application web qui permet de créer des Récits Visuels (Visuals narrative) en ligne à partir de contenus en ligne (bases de données de Virtual Database et données extérieures).

L'application demande une authentification même quand on est authentifié dans sa propre plateforme (Virtual Shanghai, etc.). Pour cela, ajouter « /editmode » à l'URL (barre d'adresse) créée en cliquant sur le menu « Visual narrative » dans votre plateforme.

En mode « Edition », l'utilisateur dispose de la barre de menu suivante :

Edit Mode : Indique qu'on se trouve en « mode édition » L'icône X [ne sert à rien]

L'icône Home sert à revenir à la liste des récits visuels L'icône Bouton vert + sert à créer un nouveau récit visuels L'icône X à la fin de chaque récit visuel sert à supprimer le récit visuel. Soyez circonspect avant de cliquer !

Présentation générale

Pour créer un nouveau récit visuel, cliquer sur le bouton + vert, en haut à droite. Cette action crée l'enveloppe d'un nouveau récit visuel.

Deux champs sont à renseigner : Titre : Titre du récit visuel Summary : Résumé/présentation du récit visuel

Pour ajouter du contenu à un récit visuel, on crée des groupes qui abriteront eux-mêmes les composants visuels du récit. Pour ajouter un groupe, cliquer sur le bouton + vert « Add a group »:

Un groupe peut prendre deux formes  : frameset ou grid (grille).

- Un frameset est un groupe d'objets visuels avec un défilement de type pellicule. - Un grid est un groupe d'objets visuels avec une présentation sous forme de mosaïque, chaque élément de la mosaïque pouvant servir de point de départ d'un frameset ou d'un autre grid. La combinaison grid-grid permet de décliner un récit visuel sous forme d'une arborescence (pearl tree).

1. Apparence d'un frame set : le contenu de la pellicule s'affiche dans la barre en bas. Un ou plusieurs objets visuels s' affichent dans la fenêtre principale, accompagné(s) ou non d'un texte.

Contenu d'un frameset : un frameset est constitué de nodes que l'on peut ajouter en cliquant sur le bouton + vert « Add a node » :

Une nouvelle node sera alors ajoutée au groupe et placée en fin de pellicule. Au fur et à mesure de la création de nodes, celles-ci apparaissent sous forme de vignettes, selon un axe vertical, à droite de la fenêtre principale. Il est possible de modifier l'ordre des nodes par un simple glisser/déposer vers le haut ou le bas.

Chaque node créée peut faire l'objet d'une description dans le champ « Description ».

Les nodes sont les réceptacles des objets visuels. Pour ajouter un objet visuel, cliquer sur le bouton + vert « Add an object »

Les objets visuels peuvent être de quatre types : - images - cartes - films - url externes

2. Un grid est un groupement de plusieurs framesets :

Présentation détaillée

Création de récit visuel

Ajout d'un nouveau récit visuel :

Title : Titre du récit visuel Summary : Présentation résumée du récit visuel

Les informations s'affichent sous cette forme sur la première page :

1 : Titre 2 : Résumé/présentation du récit visuel 3 : Image de la première node ou image par défaut. Créaton d'un frameset ou d'un grid vide

1. Création d'un frameset :

Pour créer un nouveau frameset cliquer sur le bouton + vert « Add a group »:

Une nouvelle fenêtre permet de choisir de créer un nouveau frameset (empty frame set) ou un nouveau grid (empty grid) ou d'utiliser un frameset ou grid existant. Pour l'exemple, nous choisirons « add an empty frameset ». Le groupe se rajoute dans la liste des groupes du récit visuel Group XX : Id du groupe dans le système. Chaque groupe possède un identifiant unique. Name : Nom du groupe Description : Résumé/présentation/explication du groupe qui apparaît uniquement en infobulle quand il est intégré dans un grid.

On peut modifier l'ordre des groupes par glisser/déposer. 2. Création d'un grid :

Pour créer un nouveau grid cliquer le bouton + vert « Add a group » :

Choisir « add an empty grid ». Le groupe se rajoute dans la liste des groupes du récit visuel

Group XX : Id du groupe dans le système. Name : Nom du groupe Description : Résumé/présentation/explication du groupe qui apparaît uniquement en infobulle quand il est intégré dans un grid.

On peut changer l'ordre des groupes par glisser/déposer. 3. Ajout d'un frameset ou d'un Grid préexistant

Pour ajouter un grid ou un frameset préexistant cliquer sur le bouton + vert « Add a group »: :

Choisir « add an existing Grid/frameset »

La liste des grid/frameset existants dans le projet s'affiche dans une nouvelle fenêtre :

Choisir le groupe à copier par simple clic sur le groupe sélectionné : le groupe sera ajouté au récit visuel sans modifier la source d'origine. Attention : les liens spéciaux ne seront pas conservés (voir plus loin).

Le groupe se rajoute dans la liste des groupes du récit visuel.

Group XX : Id du groupe dans le système Name : Nom du groupe Description : Résumé/présentation/explication du groupe qui apparaît uniquement en infobulle quand il est intégré dans un grid. Type : Type du groupe, frame set ou grid.

On peut changer l'ordre des groupes par glisser/déposer. 4. Création d'une node

Une fois un frameset créé, on peut ajouter une node en cliquant sur le lien + Add a node :

Un nouvel écran apparaît :

Return to visual : permet de retourner sur l'écran contenant la liste des framesets/grids Node Id : Id de la node dans le système Node title : Titre de la node. Le titre sera indiqué dans la liste des nodes et dans le panneau déroulant en bas des framesets. Node description : Présentation/résumé/explication de la node. Ceci apparaît en infobulle sur la node dans le panneau déroulant en bas des framesets.

On peut changer l'ordre des nodes par glisser/déposer.

TIP : ne pas donner de nom dans le champ « Node title » si le frameset comporte un grand nombre de nodes car ce nom s'affiche au-dessus des vignettes de photos. S'il y en a beaucoup et si le titre des nodes est long, cela crée un problème d'affichage (double ligne de vignettes). 5. Ajout d'un objet dans une node :

Cliquer sur le bouton vert + « add an object »

Choisir le type de media à ajouter. Une fenêtre s'affiche avec les contenus en fonction du type de média sélectionné (images, cartes, films) On peut chercher dans les images en remplissant la zone de texte « Search ». La flèche verte sert à remettre la fenêtre à zero. Les champs de recherche sont : titre, mots-clés et image ID.

Sélectionner une image par un simple clic sur celle-ci pour l'ajouter à la node. La sélection de plusieurs images est possible et créera une pile (stack) d'images. On identifie une pile d'images par le fait qu'un texte s'affiche en bas à gauche : « Click on image stack to change ».

Stack d'images

Attention : on ne peut pas créer de stack de films.

Pour ajouter une page web externe, selectionner « Ext » et entrer l'url de la page. Attention : la page peut ne pas s'afficher si la sécurité est restreinte sur la page cible.

Le media sélectionné apparaît alors dans la liste des objets de la node :

Media original title : Titre original du fichier tel qu'il est renseigné dans la base de données Object title : Ttitre de l'objet tel qu'il s'affiche dans le récit visuel Object X comment : Commentaire qui apparaît dans la zone de texte de la node

Ajout d'une région sur les cartes et images

On peut définir sur une image fixe (photographie, carte) une ou plusieurs zones (région) auxquelles on pourra ajouter un commentaire particulier.

Cliquer sur le bouton vert + add a region

Cliquer ensuite sur l'image. Le point sélectionné devient alors par défaut le centre du carré qui s'affichera par la suite. Tag name : Nom de la région qui s'affiche dans la liste des régions  Description : Description de la région.

Ajout d'une image/carte dans une pile (stack)

Une fois la pile créée, cliquer sur le bouton vert + Add an image.

Suppression d'une image/carte dans un Stack

Cliquer sur le bouton X rouge à côté du nom de l'image à supprimer.

Suppression d'une région sur les cartes et images

Cliquer sur le bouton X rouge à côté du nom de la région à supprimer.

Suppression d'un Objet

Cliquer sur le bouton X rouge à côté du nom de l'objet à supprimer.

Suppression d'une Node

Cliquer sur le bouton X rouge à côté de la vignette de la node à supprimer

Suppression d'un Frameset/Grid

Cliquer sur le bouton X rouge à côté du nom du groupement à supprimer

Suppression d'un Récit Visuel (Visual narrative)

Cliquer sur le bouton X rouge à côté du nom du visual à supprimer.

Création d'un frameset ou d'un Grid vide dans un Grid

Une fois le Grid vide créé, cliquer sur le bouton vert + Add a frameset/grid

Pour ajouter un frameset vide, choisir « add an empty frameset »

Le frameset vide s'affiche alors dans le grid  L'ordre des groupes peut être changé par glisser/déposer.

Pour ajouter un Grid vide, choisir « add an empty grid »

Le grid s'ajoute ainsi:

L'ordre des groupes peut être changé par glisser/déposer.

Suppression d'un Frameset/Grid dans un Grid

Cliquer sur le bouton X rouge à côté du nom du groupement à supprimer

L'ordre des groupes peut être changé par glisser/déposer.

Exclure un groupe de l'ordre de visionnage

Par défaut les frameset/grid s'affichent dans l'ordre des numéros indiqués

Afin de les exclure et qu'ils ne soient pas visibles, il faut décocher la case à coter du numéro.

Le groupe est alors déplacé vers la fin du récit visuel et il ne pourra plus être inséré plus haut à moins de recocher la case. Création de liens spéciaux

Les liens spéciaux permettent de s'affranchir de l'ordre de déroulement normal des éléments au sein d'un récit visuel. On peut ainsi relier deux nodes entre elles en créant un « pont direct » par les liens « spéciaux »

Une fois une node créée, cliquer sur « Add a special link » La liste des nodes du récit visuel en cours s'affiche : Sélectionner la cible du lien par un simple clic :

Le lien apparaît alors dans la liste des liens :

Cette fonction permet de créer un nouveau cheminement autonome au sein d'un récit visuel et de déployer de fait un récit visuel propre.

Suppression des liens speciaux

Cliquer sur le bouton X rouge à coté du lien à supprimer.

Mode lecture des récits visuels

En mode lecture, la barre de menu ci-dessous s'affiche en haut à droite de l'écran :

De droite à gauche, elle comporte quatre éléments : les flèches servent à passer d'un récit visuel à un autre l'icône « Home » (maison) permet de revenir à la liste des récits visuels l'icône « Vitesse accélérée » permet de revenir directement au premier récit visuel l'icône «Schéma» permet d'affiche une carte du récit visuel (voir ci-dessous)

Cartographie des récits visuels

A mesure qu'un récit visuel est construit, l'application produit une carte des éléments et de leurs liens. Ceci permet une cartographie élémentaire du récit visuel. Cette carte ne peut pas être modifiée elle-même. Elle ne se modifie que lorsque le récit visuel est lui-même modifié.

Pour afficher une carte du récit visuel en cours, cliquer sur l'icone situé en haut à droite comme indiqué ci-dessous :

La carte du récit visuel en cours s'affiche dans une nouvelle fenêtre :

Dans ce cadre, le groupe (group name) cerclé de rouge est celui où l'on se trouve. Les flèches rouges indiquent la suite normale des groupes et les flèches bleues indiquent les liens spéciaux entre les groupes.

Il est possible alors de déplacer les éléments afin de mieux lire les informations