[aller au menu | aller au contenu]

Librairies Xiss web

Librairie Fichier
Librairie permettant l'exécution de traitements lors de l'exploration d'une hiérarchie de répertoires. Voir l'API (en Anglais).

Libarairie Worker
Cette librairie permet de contrôler (arrêt, pause, ...) de long processus (une adaptation de celui de Sun). Voir API (en Anglais).

Libarairie Préférences
Librairie gestion de préférences utilisant seulement des fichiers pour rendre les préférences persistantes. Cette librairie n'a pas exactement les mêmes fonctionnalités que celles des préférences Java. Voir l'API (en Anglais).

Documentation Xiss web 1.7

Diaporama interactif XML basé sur des standards du W3C : XML, XSLT, CSS, HTML/XHTML.

1 Démarrer avec Xiss web

1.1 Pré requis

Xiss web nécessite au minimum J2SE 1.4 (Edition Standard de Java 2, version 1.4.2 ou 1.5) ou Java SE 6, cf. le site d'Oracle). La variable d'environnement JAVA_HOME doit être initialisée avec le répertoire racine de l'installation d'un JRE (environnement d'exécution Java).

Dans la suite de cette documentation les commandes sont écrites dans une syntaxe Windows. Si vous êtes sous Linux vous devez adapter les commandes à la syntaxe de Linux.

1.2 Initialisation ligne de commande

Premièrement initialisez la variable d'environnement XISSWEB_HOME avec le répertoire racine de Xiss web. Ensuite ajouter à la variable d'environnement système PATH le chemin %XISSWEB_HOME%\bin.

Vous êtes prêt à utiliser Xiss web.

1.3 Initialisation pour l'IHM

Aucune initialisation n'est nécessaire.

Xiss web peut directement être utilisé par son IHM (Interface Homme Machine) sans aucune initialisation. Xiss web est prêt à être utilisé par son IHM.

INFO:

Dans ce document, même si la variable d'environnement XISSWEB_HOME n'est pas initialisé, elle utilisée pour indiquer le répertoire racine de l'installation de Xiss web.

2 Utiliser les exemples

Deux exemples basic sont prêts à être utilisés : projet1-sport-mode et projet2-sport-mode. Nous vous suggérons d'essayer les deux exemples pour voir leurs différences et comprendre comment Xiss web fonctionne. Si vous êtes pressé de créer votre propre diaporama, passez à la suite. La section Les exemples liste et décrit tous les exemples de Xiss web.

Dans une fenêtre de command, changez de répertoire pour vous mettre dans le répertoire racine d'un des deux exemples (qui se trouve dans le répertoire %XISSWEB_HOME%\examples de Xiss web). Dans un explorateur de fichiers vous pouvez naviguer depuis le répertoire src dans les sous-répertoires. Vous découvrez alors l'organisation des images ainsi que d'autres fichiers (dans l'exemple projet2-sport-mode : xissweb.properties et layout.xml seront décrits plus tard).

Il existe deux façons de générer les diaporamas des exemples :

Maintenant un nouveau répertoire build existe. Naviguez-y avec un explorateur de fichiers et ouvrez avec un explorateur web les fichiers index.html que vous trouvés. Maintenant vous pouvez voir un diaporama généré en ouvrant les fichiers HTML par un navigateur web. Vous pouvez aussi visualiser les diaporamas depuis l'IHM en cliquant sur le bouton Visionner... .

Si vous naviguez à nouveau dans les sous-répertoires de src, vous pouvez voir des nouveaux fichiers slideshow.xml , chacun décrit le contenu d'un diaporama (ils peuvent être édités pour ajouter des commentaires aux images, par exemple).

Ci-dessous nous expliquons les différences entre les deux exemples :

Les différences de ces exemples peuvent être visualisées dans l'IHM de Xiss web, avec notamment le filtre montrer les fichiers image activé.

La génération des diaporamas de ces deux exemples a été faite avec la commande xiss-web mais elle peut être obtenu en deux étapes avec les deux commandes :

  1. La commande xiss-sow : génère les fichiers slideshow.xml . Ces fichiers décrivent tous les contenus des diaporamas dans les répertoires où il y a des images. Vous pouvez éditer ces fichiers pour ajouter des commentaires aux images, par exemple.
  2. La commande xiss-build : génère les vignettes et les pages HTML dans le répertoire build en respectant l'organisation en répertoires issue de src. Les fichiers slideshow.xml dans src sont aussi modifiés pour prendre en compte les informations sur les vignettes.
INFO:

D'autres exemples sont disponibles dans le répertoire examples/freatures (voir Les exemples). Ils sont aussi directement accessibles par l'IHM. Ces exemples illustrent des fonctionnalités avancées décrites plus loin.

3 Créer votre premier diaporama

Avant de créer votre premier projet, il est préférable d'aller voir les exemples. Nous présentons deux façons de créer des diaporamas : en 3 étapes et la façon adaptable.

3.1 Diaporama en 3 étapes

Créez votre diaporama en trois étapes. Avec cette façon de procéder vous obtenez votre diaporama avec une présentation par défaut (agencement et habillage). Cette présentation par défaut est conçue pour des images d'une taille maximale de 600 pixels. Elle est utilisée par le premier exemple (dont le résultat est visible ici). Même si vos images sont plus grandes que cette taille maximale, vous pouvez tester ces étapes pour obtenir votre premier diaporama. Ensuite, allez à la découverte des possibilités de Xiss web (ou simplement passer au chapitre suivant) pour obtenir votre diaporama comme désiré.

  1. Créez le répertoire racine de votre projet. Dedans, créez un sous-répertoire src.
  2. Maintenant organisez les images depuis le répertoire src en créant des sous-répertoires : chacun de ces sous-répertoires où il y a des images (jpeg ou gif) est considéré comme étant un répertoire de diaporama.
    WARNING:

    Mettez vos images dans des sous-répertoires de src mais jamais directement dans src. Le répertoire src ne peut pas être un répertoire de diaporama.

  3. Pour cette dernière étape, deux voies sont possibles :
    • ligne de commande : commencez par copier le fichier %XISSWEB_HOME%\rsrc\xissweb.properties dans le répertoire racine du projet, ensuite depuis ce répertoire, exécutez la commande xiss-web .
    • IHM : Ouvrez l'IHM de Xiss web, ouvrez la boîte de dialogue nouveau projet et y sélectionnez le répertoire de votre projet en tant que sa localisation, et quand votre projet est ouvert, cliquez successivement sur les boutons lancer le semage... et lancer la construction... .

C'est tout ! Le diaporama est généré avec l'habillage par défaut dans le répertoire build comme dans le cas de l'exemple 1. Il peut être visualisé avec un navigateur web : ouvrez un fichier index.html dans le répertoire build ou cliquez sur le bouton Visionner... de l'IHM.

3.2 Façon adaptable

Ici nous ajoutons cinq étapes aux trois ci-dessus. Chacune d'elles est optionnelle, suivant les adaptations dont vous avez besoin.

  1. Paramétrage : Vous pouvez modifier les paramètres par défaut du fichier xissweb.properties dans le répertoire racine de votre projet. Ce fichier est auto documenté, vous y trouverez les explications nécessaires pour le modifier (si ce n'est pas le cas, regardez le fichier %XISSWEB_HOME%\rsrc\xissweb.properties).
    Plus simplment, les propriétés du projet sont éditable directement depuis l'IHM.
  2. Organisation des images : Un ensemble de paramètres du fichier xissweb.properties gèrent l'organisation des images de diaporama. L'organisation des images peut être : la mise directe des images dans des sous-répertoires, chacun correspondant à un diaporama ; ou la mise des images dans un répertoire spécial (par exemple nommé "photos") dans chaque répertoire de diaporama. dans ce dernier cas vous devez changer dans votre copie du fichier xissweb.properties de l'étape 1, les paramètres image.directory.name et image.directory.filter.
    A cette étape vous avez à choisir si vos images sont directement dans des répertoires de votre projet (sous le répertoire src) où si elles sont dans un espace de stockage externe (voir Import d'images originales pour plus de détails) et de mettre à jour les paramètres associés. Par l'IHM, une Boîte de dialogue permet la création d'un projet utilisant un espace de stockage d'images originales.
  3. Commentaires, sections, métadonnées, ... : Après l'exécution du processus de semage, les fichiers slideshow.xml générés dans chaque répertoire diaporama peuvent être édités pour ajouter des commentaires aux images, ajouter des sections, éditer les métadonnées, etc. Un éditeur dédié aide à l'édition du contenu de diaporamas.
  4. Présentation : Pour définir vos présentations des diaporamas vous devez mettre des fichiers layout.xmpl (fichier d'agencement) là où vous en avez besoin : au niveau du répertoire src ou n'importe quelle autre sous-répertoire (de répertoire de diaporama ou pas). (Cette étape peut être réalisée avant l'étape 3, voir la note plus bas.) Aller voir la section gestion de l'apparence pour plus de détails.
  5. Génération : L'exécution du processus de construction génère les images principales, les pages HTML pour les diaporamas ainsi que les vignettes dans le répertoire build. Vous venez de crer des diaporamas immédiatement visible avec un navigateur web : choisissez une page HTML dans le répertoire de construction (build) et ouvrez-la avec un navigateur web ou choisissez le bouton Visionner... dans l'IHM.
INFO:

Si vous faites l'étape 4 avant l'étape 3, alors vous pouvez réaliser en une seule commande les étapes 3 et 5 (correspondant à toute la génération des diaporamas) : il s'agit de la commande xiss-web . L'équivalent n'existe pas dans l'IHM, vous devez exécuter successivement un semage (initialisation) et une construction (génération) avec les actions IHM.

INFO:

Vous pouvez ajouter vos propres pages HTML dans le répertoire src. Ces pages peuvent être organisées dans une hiérarchie de répertoires, utiliser des fichiers CSS, des images etc. Tous vos fichiers personnels sont copiés dans le répertoire build par le processus de construction (cf. "Web or not").

4 Processus de Xiss web

4.1 Introduction

Xiss web possède deux processus distincts :

Entre ces deux processus, il est possible :

4.2 Semage (initialisation)

Voir aussi exécuter le processus de semage depuis l'IHM, exécuter le processus de semage en line de commande.

L'objet du processus de semage est de générer les informations initiales décrivant chaque diaporama trouvé dans une hiérarchie de répertoires ou de mettre à jour ces informations après des changements. Il gère un fichier slideshow.xml dans chaque répertoire correspondant à un diaporama. Ce fichier décrit un diaporama et ses images. Pour chaque image il contient : nom du fichier, extension du fichier (jpg, gif, ...), largeur, hauteur, commentaire et métadonnées.

Si vous utilisez un gestionnaire de photo sur votre ordinateur et si vous ajouter des commentaires, titres ou description, Xiss web réutilise ces information pour les commentaires des images. Le processus de semage recherche un commentaire dans les métadonnées des images, dans un premier temps dans les données Exif associé à la clée 'user comment'. Si aucune valeur n'est trouvée, il essaye d'obtenir la valeur de la clée 'caption/description' (titre/description) dans les données IPTC. Si l'image ne contient pas de commentaire, une valeur par défaut est prise dans les propriétés du projet de diaporama (image.default.comment).

Pour les métadonnées, le processus de semage teste si les images traitées viennent d'un appareil photo numérique pour en extraire des information des données Exif. Si une image n'est pas une photo d'un appareil numérique, alors l'image est de type inconnu et le processus de semage extrait la date, l'heure et les informations GPS des données Exif. Pour en connaître d'avantage sur les métadonnées et les types d'image, aller voir la section dédiée.

Le premier semage peut inverser un diaporama existant en HTML. Dans ce cas les informations de diaporama et des images sont extraites des pages HTML. Les éléments qui permettent l'extraction des informations dans les pages HTML sont spécifiés dans les propriétés du projet de diaporama.

Les images d'un projet de diaporamas peuvent être importées depuis un espace de stockage d'images originales. Le processus de semage est capable d'importation d'images dans un projet, voir cette section.

Les changements qui nécessitent un nouveau semage pour mettre à jour les fichiers slideshow.xml (et pour que ces changements soient pris en compte pour la prochaine génération des pages HTML par un processus de construction) sont :

Les actions de modification suivantes ne nécessitent pas un nouveau semage :

Dans le dernier cas, même si un semage est requis, les mises à jour d'images sont directement prises en compte par le processus de construction.

Les éditions manuelles du fichier de description de diaporama (par exemple via l'éditeur dédié) ne sont pas affectées par les processus de semages qui peuvent être fait pour tenir compte de changements d'images.

4.3 Construction

Voir aussi exécuter le processus de construction depuis l'IHM, exécuter le processus de construction en line de commande.

La construction de diaporama correspond à la création des pages HTML et des vignettes, et à la copie des images principales, dans le répertoire de production (build). L'ensemble de ces éléments constitue des diaporamas visible immédiatement dans un navigateur web et prêt à être installé dans un site web (ou pas, vous avez le choix). Ce processus copie aussi les fichiers d'habillage (fichiers CSS et ressources). Il copie aussi vos propres fichiers (voir la section Web ou non) s'ils se trouvent dans les répertoires source (src). Pendant la génération elle met à jour les fichiers slideshow.xml pour ajouter les informations relatives aux vignettes et éventuellement les informations d'images principales si des changements on été fait après un précédant semage ou une précédente génération.

Toues les actions de génération et de copie sont effectuées seulement si nécessaire. Xiss web prend en compte les dépendances entre fichiers pour produire ou non un fichier dans le répertoire build. Tous les fichiers générés dépendent des propriétés du projet, et d'autres fichiers comme, par exemple pour les vignettes et les pages HTML, comme décrit ci-dessous :

Les fichiers simplement copiés, aucune dépendance n'est nécessaire. Ils sont copiés seulement s'ils changent entre deux constructions de diaporama.

Comme c'est indiqué pour le processus de semage des changements peuvent être fait dans le répertoire src et être pris en compte directement par le processus de génération.

WARNING:

Les images principales des diaporamas sont directement dans le répertoire source (src) ou dans le répertoire d'un espace de stockage d'images originales. Cela dépend du type de projet diaporama (voir la section d'importation d'images). Dans le cas d'un espace de stockage sans importation, l'espace de stockage doit être accessible pendant le processus de génération.

5 Fonctionnalités avancées

Ici nous présentons les fonctionnalités avancées suivantes : import d'images originales depuis un espace de stockage, informations d'image, spécifier un index local paramétrable (standard or Goole Maps), gérer l'apparence, animation entre les images, numéroter les images, gérer la décoration des pages générées, créer des liens entre diaporamas, modifier le comportement de la barre de navigation, organiser les images en sections, générer les diaporamas en mode web ou non et, inverser un diaporama existant.

A chaque fonctionnalité décrite ci-dessous peut correspondre un exemple dans le répertoire examples/features (voir Les exemples). Vous pouvez exécuter ces exemples comme illustration à nos explications. Les exemples sot directement accessible depuis l'IHM de Xiss web, voir Comment ouvrir un projet exemple.

5.1 Import d'images originales

Depuis la version 0.8.2, amélioré en version 0.9.0.

Les images principales d'un projet de diaporamas peuvent être crées par l'import d'images originales stockées dans un espace externe au projet. L'organisation de cette espace de stockage (hiérarchie de répertoires contenant des images) est alors reproduite dans l'espace d'un projet.

Cette fonctionnalité est utile pour créer des diaporamas Xiss web à partir d'images provenant : d'un CDROM, d'une digitalisation en haute résolution, d'un logiciel de gestion de photos, ou directement d'un appareil photo numérique. Si ces images sont trop grandes pour être directement utilisées dans des pages HTML, elles peuvent nécessiter d'être réduites et être ainsi compatible de la taille d'un écran et/ou de la bande passant d'internet pour un affichage dans des temps raisonnables.

Un paramétrage est associé à cette fonctionnalité. Il correspond aux paramètres de la partie espace d'image d'originales des propriétés d'un projet (voir l'éditeur de propriétés et ouvrir un projet). Elles sont :

Une boîte de dialogue aide à la création d'un projet de ce type. Cela crée un projet et initialise une partie des paramètres ci-dessus. Ces paramètres peuvent être édités à tout moment pour être adaptées à vos besoins.

Cette fonctionnalité correspond à l'option -repository de la commande xiss-sow ou à la sélection du radio bouton originaux de l'IHM associé au bouton semage . Aucun paramétrage particulier n'est nécessaire pour la commande xiss-build ou pour le lancement de la construction depuis l'IHM avec le bouton construction .

Voir l'exemple de cette fonctionnalité.

5.2 Métadonnées

Depuis la version 1.1.0 amélioré dans les versions 1.2.0, 1.3.0 et 1.3.3.

Xiss web extrait les informations d'image contenues dans les fichiers JPEG. Ces informations sont des métadonnées stockées par les appareils photo numériques dans les fichiers d'image a leur création. Ces données sont normalisées (voir le format Exif) et concerne : le fabricant et le modèle d'appareil photo, date et heure, des paramètres de prise de vue, etc. Cette fonctionnalité permet l'affichage de ce type d'information avec les images dans les diaporamas générés.

Pour des images venant de la numérisation de photos argentiques (photos sur pellicule ou tirages papier) ou de créations ou traitement numériques, aucunes métadonnées ne sont disponibles directement. Xiss web permet d'ajouter pour ces images des métadonnées. Les 4 types d'images et leurs métadonnées associées sont définis comme suit :

  1. [P] photo numérique, crée directement par un appareil photo numérique :
    • sur l'appareil photo : le fabricant et le modèle,
    • date et heure de la photo,
    • paramètres de prise de vues : vitesse, ouverture, vitesse ISO, focale, flash, balance des blancs.
    • paramètres GPS : latitude, longitude, altitude.
  2. [F] film argentique, numérisation d'une image crée par un appareil photo argentique :
    • sur l'appareil photo : le fabricant et le modèle,
    • date et heure de la photo,
    • pellicule argentique : film et vitesse ISO,
    • paramètres de prise de vues : vitesse, ouverture, focale, flash.
    • paramètres GPS : latitude, longitude, altitude.
  3. [C] création numérique : image crée ex nihilo avec un logiciel ou par le traitement d'images :
    • logiciel,
    • date et heure,
    • paramètres GPS : latitude, longitude, altitude.
  4. [U] inconnu : type d'image par défaut :
    • date et heure,
    • paramètres GPS : latitude, longitude, altitude.

Xiss web détecte automatiquement les photos numériques et extrait les métadonnées associées listées ci-dessus. Si le type d'image numérique n'est pas reconnu, alors le type inconnu est pris et les métadonnées associées extraites. Les données GPS sont toujours extraites quand elles existent dans les images.

L'extraction des métadonnées est réalisée pendant le processus de semage et elles sont enregistrées dans le de contenu de diaporama. L'éditeur de contenu de diaporama affiche les métas données d'une image sélectionnée.

Pour les images argentiques et de création numérique, les métadonnées doivent être explicitement ajoutées dans le fichier de contenu de diaporama, manuellement ou par l'éditeur de contenu de diaporama. Des logiciels enregistrent des informations dans les données Exif d'une image : nom du logiciel, date et heure, données GPS. Si une image de type argentique ou création numérique est sélectionnée, Xiss web essaye d'extraire des informations dans les métadonnées Exif.

Les métadonnées peuvent être affichées dans la zone d'image principale des pages HTML générées (sauf pour les données GPS). L'agencement (voir fichier d'agencement ou l'éditeur d'agencement) quelles sont les données à afficher et où. L'habillage peu préciser le style pour leur affichage. L'éditeur d'habillage simple permet la définition de ce style.

Les informations GPS sont seulement utilisées pour localiser les images sur une carte avec Google Maps dans une page d'index (voir index local paramétrable et la sous-section index Google Maps).

L'exemple features/metadata est disponible pour expérimenter cette fonctionnalité.

Comment ajouter les métadonnées dans un diaporama existant ?

Si vous avez déjà généré un diaporama avec une version de Xiss web antérieur à la version 1.1.0 et si vos images proviennent d'un appareil photo numérique, alors il est possible d'ajouter les métadonnées dans votre diaporama; Cette procédure peut être suivie, quand une mise à jour de Xiss web ajoute de nouvelles métadonnées, pour incorporer les nouvelles métadonnées dans votre diaporama.

  1. Faites a nouveau un semage sur votre projet. Si vos images proviennent d'un espace de stockage, alors sélectionnez l'option 'originaux'. Ouvrez les fichiers slideshow.xml pour ajouter et éditer les métadonnées pour les images argentiques ou de création numérique.
  2. Editez les agencements et habillages. Pour chaque agencement qui s'applique à vos diaporamas, ajoutez les éléments de métadonnées voulues pour leur affichage. Les éléments métadonnées sont associés à l'élément zone d'image (voir l'éditeur d'agencement). Si vous utilisez votre propre habillage, ajouter la classe CSS .metaData. Ou si vous utilisez un "habillage simple", vous pouvez préciser une police de caractères pour les métadonnées avec l'éditeur d'habillage simple.
  3. Reconstruisez les diaporamas. Avec les mises à jour des fichiers de contenu de diaporama, des agencements et des habillages, vous re-générez vos diaporamas. Si vos images n'ont pas changées, seules les pages HTML sont re-générées. Vous pouvez voire le résultat en navigant dans les pages HTML ainsi mises à jour.

5.3 Index local paramétrable

Depuis la version 1.3.0, amélioré à la version 1.3.4 et mis à jour à la version 1.3.6.

Un index local est une page index dédié à introduire un diaporama. Cette page peut être générée par Xiss web. Elle présente toutes les images du diaporama par leur vignette et des informations supplémentaires.

Avant la version 1.3 de Xiss web, la seule possibilité de préciser la génération d'une page d'index local pour un diaporama était de le spécifier dans les propriétés d'un projet avec la propriété local index. Cette propriété s'applique à tout un projet (pour tous les diaporamas d'un projet) et n'est pas paramétrable.

Maintenant il est possible de préciser la génération d'un index local paramétrable pour un diaporama ou un ensemble de diaporama. Cet index local se spécifie dans un agencement (layout) (voir la gestion de l'apparence, l'éditeur d'agencement, le fichier layout). Il est aussi possible de créer votre propre page d'index local dans le répertoire src au niveau d'un diaporama, voir la section web ou non. Il y a donc trois types d'index local :

  1. personnel : vos propres pages HTML (voir aussi la section Web ou non et l'exemple features/persinal-pages ),
  2. agencement : index standard ou Google Maps généré par Xiss web si spécifié dans un agencement,
  3. par défaut: index généré par Xiss web si spécifié dans les propriétés d'un projet.

L'ordre décroissant de priorité entre des types d'index local est : personnel, agencement et défaut. Cela signifie qu'une page d'index personnel à la priorité sur un index d'un agencement, lui-même ayant priorité sur l'index par défaut. La suite de cette section détaille l'index spécifié dans un agencement.

Pour les deux types d'index d'agencement (standard and Google Maps), il existe un élément d'habillage correspondant (voir la section suivante et l'éditeur d'habillage).

5.3.1 Index local standard

Un index local standard permet l'affichage ou non et de façon indépendante ou non deux types d'information avec les vignettes d'un diaporama :

Ci-après un exemple de l'affichage de la description et de l'explication :

Exemple d'un index standard avec une description et une explication

Si aucune description n'est affichée, vérifiez si une description a été renseignée dans fichier de contenu de diaporama.

5.3.2 Index local Google Map

Ce type d'index utilise les métadonnées GPS des images et l'API de Google Maps pour afficher leur localisation sur une carte. Les éléments paramétrables sont :

Ci-après un exemple de l'index Google Map avec le résultat mit cote à cote de deux types de paramétrage :

Exemple d'un index Google Maps.

Sur un index local Goole Maps, un clic sur un marqueur sur la carte montre les informations du marqueur, comme le comportement par défaut de Google Maps. Les informations du marqueur sont le commentaire et la vignette de l'image correspondante. Les informations du marqueur sont aussi affichées lorsque la souris survole une vignette hors de la carte.

Un index local de type Google Maps n'a de sens que si les images ont une localisation GPS dans leurs métadonnées et si l'emplacement final des diaporamas est un site web (voir la section web ou non, il est possible de tester depuis le système de fichier une page d'index Google Maps générée, si une connexion internet est disponible). Chaque image ayant une localisation GPS est représentée par une marque sur une carte. Si aucune image n'a de localisation GPS la page d'index générée affiche une carte sans aucun marqueur. Un clic sur la vignette dans les informations d'un marker affiche la page de l'image principale, tout comme la vignette hors de la carte.

Plusieurs façons existent pour obtenir une la localisation GPS d'une image :

INFO:

Les métadonnées ne sont extraites automatiquement que pour les images de type photo numérique (voir la section métadonnées). Pour ce type d'image, les informations GPS sont extraites automatiquement et les images être représentées directement sur une carte. Si une image n'est pas représentée sur la carte, vérifiez dans l'éditeur de contenu de diaporama si l'image a un type défini. Si ce n'est pas le cas, sélectionnez son type ([F] film argentique ou [C] création numérique), alors les informations GPS (si elles existent) sont extraites depuis les métadonnées Exif. N'oubliez pas de reconstruire le diaporama avant de l'afficher.

WARNING:

Google Maps API est libre mais nécessite une clé pour son utilisation sur un site web. Si vous voulez utiliser Google Maps vous devez obtenir une clé ici. Cette clé doit être ajoutée à la propriété 'google.maps.key' dans les propriétés de vos projets.

Une clé Google Maps key existe dans les propriétés du projet exemple features/metadata . Cette clé est celle de Xiss web et correspond à l'utilisation de Google Maps API pour les URL commençant par http://xissweb.free.fr.

5.4 Gestion de l'apparence

Depuis la version 0.6.

L'apparence finale (le look) d'un diaporama est bâtie sur deux éléments : un agencement (layout) sur lequel s'applique un habillage (skin). L'agencement définit l'organisation des constituants d'un diaporama (vignettes, image principale, commentaires, barre de navigation). L'habillage définit le rendu visuel de ces constituants (couleurs, polices de caractères, ...). Plusieurs habillages peuvent s'appliquer à un agencement et un habillage peut être utilisé par différents agencement.

Un agencement par défaut peut être précisé dans les propriétés d'un projet Xiss web. Il correspond à un fichier layout.xml . Un fichier layout peut aussi être construit et édité avec un éditeur dédié.

Un fichier d'agencement peut être positionné dans l'arborescence des répertoires d'images pour s'appliquer à un ou plusieurs diaporamas ou directement à la racine du projet pour s'appliquer à tous les diaporamas du projet. Les deux règles suivantes sont appliques pour choisir un agencement :

  1. si aucun agencement n'est définit dans votre projet, alors l'agencement %XISSWEB_HOME%\rsrc\layouts\default\layout.xml est choisi ;
  2. a un niveau donné dans les sous-répertoires, l'agencement choisi est celui qui est le plus près sur le chemin allant de ce niveau au répertoire racine de votre projet.

Vous pouvez créer les fichiers d'agencement à partir de rien ou en copier un existant dans %XISSWEB_HOME%\rsrc\layouts\xxx ou dans les exemples puis le modifier avec un éditeur dédié. Vous pouvez aussi choisir un habillage associé à un ou plusieurs agencements. Pour plus de détails voir la gestion de l'apparence.

L'habillage est spécifié dans le fichier xissweb.properties ou un fichier d'agencement (layout.xml . Des habillages sont déjà disponibles dans le répertoire %XISSWEB_HOME%\rsrc\skins. De nouveaux habillages peuvent être définies dans un projet de diaporama, voir la section éditeur d'habillage. Un habillage est un ensemble de fichiers CSS (Cascading Style Sheet) et d'images. Il offre les possibilités suivantes :

Les styles CSS pour l'habillage se composent de trois fichiers :

INFO:

Dans la plus part des cas un nouvel habillage peut être définie simplement avec de nouveaux page.css et component.css. Le fichier layout.css est générique et définit les classes CSS pour l'application de l'agencement.

WARNING:

Toutes les informations de style ne sont pas dans les fichiers CSS. Certaines informations de style sont générées par les fichiers XSL dans les pages HTML. C'est le cas pour une présentation centrée dans un agencement vertical.

Les fichiers XLST définissent la transformation depuis le couple de fichiers layout.xml et slideshow.xml pour construire les pages HTML. Ces fichiers XSLT sont divisés en trois groupes :

  1. Diaporama : d'abord le fichier slideshow2html.xsl est responsable de la structure de la page HTML, ensuite il y a un fichier par composant (thumbnailRenderer.xsl, mainImageRenderer.xsl, navigationBarRenderer.xsl, builtWithRenderer.xsl) qui est responsable de son rendu par rapport au type d'agencement qui le contient (horizontal ou vertical).
  2. Index principal : un fichier (indexes2html.xsl) est dédié à la génération de la page d'index principal qui répertorie tous les diaporamas.
  3. Propriétés : le fichier properties.xsl contient les différents textes affichés dans les pages HTML. Ces textes dépendent de la langue. Actuellement deux langues sont proposées : Anglais et Français.

Si vous changez la génération des pages HTML en changeant les fichiers XSLT, alors vous devez changer les feuilles de styles CSS en conséquence pour obtenir le résultat voulu.

La caractéristique principale de Xiss web est de toujours présenter les vignettes pendant la navigation des diaporamas. Pour un diaporama, l'ensemble des vignettes est donc affiché avec chaque image principale. Il est important de garder à l'esprit cette caractéristique pour avoir un résultat plaisant : par exemple éviter d'avoir a scroller sur un écran de 1024 par 768 lors de l'affichage de chaque image principale.

Une règle simple peut être suivie pour obtenir une belle présentation : ne pas avoir trop d'images dans un répertoire. Ne pas hésiter à répartir les images dans des sous-répertoires. Pour un écran de 1024 par 768 le nombre maximum d'images est de 24 vignettes de 70 pixels max (dans 4 colonnes de 6 vignettes chacune) et une image de 600 pixels max. Par exemple, si toutes les images sont dans un format paysage, alors il est possible d'avoir plus de 24 vignettes mais vous devez tester votre cas. Avec Xiss web il est facile d'adapter l'apparence à votre cas spécifique en procédant par tests successifs avec la génération de diaporama sur différentes configurations d'organisation d'images et d'habillage.

5.5 Animation

Depuis la version 1.6.O mis à jour aux versions 1.6.5, 1.6.6, 1.6.7, 1.6.8 et 1.7.6.

5.5.1 Principe

Cette fonctionnalité permet une animation sur les transitions entre les images. Plus précisément, l'animation s'applique au changement du contenu complet de la zone d'image principale. Cette zone présente les index de diaporama et les images principales avec leurs commentaire et méta données. L'animation se choisie dans un agencement.

Trois étapes sont considérés dans l'animation pour passer d'une image à une autre : avant le chargement; chargement et affichage de la nouvelle image. Une transition animée se produit sur ces trois étapes et dépend des quatre types d'animation :

Différentes vitesses de transition concernant les images sont possibles : lente, intermédiaire, rapide et instantanée.

Trois tailles d'écran d'attente sont disponibles : aucune, taille de la zone image, taille de la page (appelé aussi 'plein écran'). La taille 'aucune' correspond à aucun affichage de l'écran d'attente.

WARNING:

La fonctionnalité d'animation change en profondeur la génération des pages HTML (sans animation, une page par image est générée). Avec animation, une seule page HTML est générée et un script (utilisant jQuery) exécute les animations dans la page.

Cette caractéristique à une influence sur les liens entre diaporamas et la navigation entre diaporamas.

5.5.2 Contrôle

En association avec l'animation il est possible d'avoir des actions pour l'utilisateur final pour contrôler des paramètres de diaporama. Cette possibilité est une option de la partie animation d'agencement et ajoute des actions dans la page de diaporama pour contrôler :

Les éléments de contrôle sont présentés dans un panneau, près de la zone de l'image principale, à montrer/cacher au besoin. L'apparence finale des éléments de contrôle dépende de styles CSS dédiés.

5.5.3 Diaporama automatique

L'animation permet de jouer automatiquement un diaporama. Les images sont successivement affichées automatiquement en suivant la politique de navigation. Deux paramètres sont disponibles au moment de la définition du diaporama au niveau de l'agencement :

Pendant le déroulement d'un diaporama, il est possible de le contrôler : pauser/jouer le diaporama et, changer la durée d'affichage des images. Il est aussi possible d'utiliser la barre de navigation pendant l'affichage d'une image (hors des phases de transition d'animation).

.Les éléments de contrôle du diaporama automatique sont présentés près de la zone d'image principale. L'aspect final de ces éléments dépend de styles CSS spécifique.


Cette fonctionnalité est présentes dans les exemples : projet2-sport-mode et features/metadata , features/html-comment et features/personal-pages .

5.6 Numérotation des images

Depuis la version 8.0.

Dans les fichiers de diaporama générés par Xiss web ( slideshow.xml ), chaque image porte un numéro. Il est possible d'afficher le numéro de l'image avec son commentaire. Pour cela un format d'affichage peut être défini dans un fichier d'agencement ( layout.xml ). Le format se base les deux éléments suivants :

Dans un layout.xml on précise le format de numérotation dans l'attribut format-number de l'élément comment avec un texte qui inclut les codes ci-dessus comme le montre les exemples suivants :

WARNING:

Les caractères '@', '#', '%' et '+' ne peuvent pas être utilisés comme texte simple dans le format de numérotation. Par exemple il n'est pas possible d'obtenir une numérotation du type : "#1", "#2", "#3", ...

Vous pouvez vous reporter aux exemples de Xiss web qui utilisent différents formats de numérotation.

5.7 Décoration des pages

Depuis la version 0.8.

Dans la définition de l'agencement d'une page HTML (fichier layout.xml ) il est possible de déclarer des éléments de décorations. Les éléments de décoration forment un cadre des pages HTML. Ces éléments sont : un en-tête, un pied de page, une marge gauche et droite. Dans un fichier layout.xml ils correspondent respectivement aux balises XML suivantes : <header>, <footer>, <left-margin> et <right-margin>. La disposition des ces éléments dans une page HTML est la suivante :

            --------------------------------------
            |              en tête               |
            |------------------------------------|
            |      |                     |       |
            |  m   |                     |   m   |
            |  a   |       partie        |   a   |
            |  r   |                     |   r   |
            |  g   |                     |   g   |
            |  e   |         du          |   e   |
            |      |                     |       |
            |  g   |                     |   d   |
            |  a   |      diaporama      |   r   |
            |  u   |                     |   o   |
            |  c   |                     |   i   |
            |  h   |                     |   t   |
            |  e   |                     |   e   |
            |      |                     |       |
            |------------------------------------|
            |            pied de page            |
            --------------------------------------

Chacun des ces éléments permet d'ajouter par rapport à leur partie respective (cf. ci-dessus) du code HTML. Le code HTML qui se trouve entre balise début et fin d'un élément de décoration est recopié dans les pages HTML du diaporama dans une division (div) HTML correspondante. Ces éléments sont éditables avec l'éditeur d'agencement.

Pour avoir un cas d'utilisation des décorations de pages vous pouvez regarder l'exemple features/page-decoration , notamment regardez le contenu des fichiers layout.xml .

Dans le code HTML il est possible de mettre des éléments prédéfinis suivants de Xiss Web :

INFO:

Le texte utilisé par les deux éléments 'title' et 'description' peut être édité avec l'éditeur de contenu de diaporama.

Depuis la version 0.7, mis à jour à la version 1.6.0.

Des diaporamas peuvent être reliés entre eux. Ces liens permettent une navigation orientée entre diaporamas avec deux types de lien : diaporama précédent et suivant. Ces liens sont spécifiés dans les fichiers slideshow.xml et ils sont affichés dans la barre de navigation.

WARNING:

Les diaporamas liés ensemble doivent former un ensemble cohérent du point de vue de l'animation. Si un diaporama sans animation est lié avec un diaporama avec animation, alors tous des cas de navigation entre eux ne sont pas possibles. Cela car les diaporamas sont générés séparément et l'accès à une page spécifique dans un diaporama animé n'est pas possible.

Des éléments d'IHM vous aident à garder les ensembles de diaporamas liés consistants.

Après l'exécution du processus de semage vous pouvez éditer les fichiers slideshow.xml générés pour ajouter les liens :

Il existe deux façons de gérer les liens :

Pour afficher chaque lien le fichier d'agencement layout.xml doit contenir, dans l'élément navigation-bar, un composant lien lui correspondant. Les composants de lien sont les suivants :

Un lien est affiché seulement s'l y a un lien correspondant dans le fichier slide show.xml .

L'exemple examples\features\links utilise les liens entre diaporamas.

Depuis la verson 0.9.1, mis à jour aux versions 1.5.0 et 1.6.0.

La barre de navigation permet dans un diaporama d'avancer image après image en avant et en arrière. Elle permet aussi d'aller à un diaporama suivant ou précédent (cf. la fonctionnalité liens entre diaporamas ci-dessus). Le comportement de la barre de navigation est modifiable (voir l'éditeur d'agencement). Il existe cinq types de navigation. Un type de navigation peut être spécifié dans un fichier layout.xml dans l'élément navigation-bar avec l'attribut type. Les valeurs possibles sont :

INFO:

Les comportement des types next et previous ne sont pas les mêmes avec ou sans des diaporamas animés. Avec des diaporamas animés, la navigation se fait vers le premier élément du diaporama lié (index local ou la première image s'il n'y a pas d'index ou s'il y a un index personnel). Ceci car avec la fonctionnalité d'animation une seule page représente l'ensemble d'un diaporama et il n'est pas possible de choisir une image spécifique depuis l'extérieur.

Plusieurs barres de navigation sont possibes pour un diaporama. Pour avoir un comportement cohérent entre les barres de navigation, toutes les barres dans un agencement doivent avoir le même type. (L'éditeur d'agencement assure cela.)

Cette fonctionnalité est illustrée par trois exemples :

Après la génération des diaporamas vous pouvez changer le type de navigation dans le fichier layout.xml, régénérer les diaporamas et voir les changements.

5.10 Sections

Depuis la version 0.7.

Cette partie explique comment utiliser les sections dans un diaporama. Les sections permettent d'organiser les images dans un diaporama pour la présentation des vignettes.

Une section est une subdivision de vignettes dans un diaporama. Par défaut une section anonyme (sans titre et donc non affichée) est créée par le processus de semage. Après le semage, vous pouvez éditer le fichier de contenu de diaporama ( slideshow.xml ) pour y ajouter des sections déplacer des images à l'intérieur d'une section ou d'une section à l'autre avec l'éditeur graphique dédié de l'IMH de Xiss web.

Voir un exemple de cette fonctionnalité.

5.11 Web ou non

Depuis la version 0.6.

Vous pouvez créer votre site web entier dans le répertoire src. Vous y mettre vos propres pages HTML et ressources, sauf pour les parties diaporama que Xiss web gère. L'exemple features/personal-pages illustre cette possibilité. Voir aussi la section Index local paramétrable pour le cas particulier des pages index.html.

Le processus de semage ne tient pas compte des parties non diaporama. Votre site web entier est obtenu après l'exécution du processus de construction : vos pages HTML sont copiées dans le répertoire build et les parties diaporamas y sont créées. Dans vos pages HTML vous pouvez mettre des liens vers les pages de diaporama. Ces liens fonctionneront après l'exécution de du processus de construction dans le répertoire de construction (build).

Il est possible de laisser les pages générées dans un répertoire sur un disque (et non sur internet) et de consulter localement les diaporamas avec un navigateur web. Il est aussi possible d'enregistrer les pages générées sur un CDROM et de les consulter avec un navigateur web.

La propriété slideshow.final.location dans le fichier slideshow.properties définit le type de la généraiton : web or système de fichiers. La différence de génération concerne seulement une partie des liens HTML :

INFO:

La génération type système de fichier fonctionne aussi dans un serveur web. Tous les liens HTML vers les pages générés par Xiss web sont des liens relatifs.

INFO:

Les premières générations de vos diaporamas peuvent être faites en mode fichier pour une navigation plus aisée localement. La génération finale peut alors être faite en mode web afin de publier le résultat sur internet.

5.12 Inverseur

Depuis la version 0.6.

Xiss web peut construire votre référentiel d'images (images organisées en répertoires) à partir d'un diaporama HTML existant, même s'il n'a pas été construit avec Xiss web. Les diaporamas inversibles ne doivent pas être trop éloignés de ce que Xiss web génère : le minimum est un diaporama avec une hiérarchie de répertoires d'images ; et pour plus de possibilités (extraction d'informations) il faut une page HTML par image principale affichée, toutes ces pages avec la même structure.

L'inverseur est le processus de semage exécuté en mode 'inverser'. Tous les paramètres liés à l'inversion sont dans une section du fichier xissweb.properties.

L'inverseur copie sous le répertoire src toutes les images (sans les vignettes) de la source en respectant leur organisation en répertoires. Il construit en même temps les fichiers slideshow.xml qui peuvent inclure des informations extraites de pages HTML. Le processus d'inversion parcourt par défaut tous les répertoires dans la source à inverser. Il est possible d'exclure des répertoires non voulus. Le processus copie non seulement les fichiers images mais aussi tous les autres fichiers. Par exemple, il copie les fichiers HTML qui sont hors des répertoires d'images. Il est possible de définir un filtre pour exclure des fichiers de la copie. Tout ce paramétrage se trouve dans les propriétés du projet.

Une fois l'inversion effectuée vous pouvez ajouter des agencements (fichiers layout.xml ), éditer des fichiers slideshow.xml comme c'est décrit dans les parties précédentes. Il est possible d'inverser un diaporama et de le reconstruire en une fois par la commande xiss-web -reverse.

INFO:

Normalement pour un projet donné un seul processus d'inversion est nécessaire. Si votre paramétrage n'est pas satisfaisant et nécessite des corrections, alors une inversion doit être effectuée après chaque changement. Dans certains cas il peut être nécessaire d'effacer le répertoire src de votre projet avant une inversion.

L'exemple features/reverse inverse le diaporama généré dans l'exemple projet1-mode-sport.

6 Manuel utilisateur

6.1 Présentation de la fenêtre principale de de Xiss web

Depuis la version 0.10.0, mis à jour en version 1.7.0.

6.1.1 Demarrer Xiss web

Xiss web et son IHM sont contenu dans le fichier exécutable xiss-web.jar dans le répertoire d'installation de Xiss web. Pour lancer Xiss web il suffit de double-cliquer sur ce fichier (ou exécuter la commande java -jar xiss-web.jar). Des scripts sont aussi disponibles pour démarrer Xiss web :

La fenêtre principale de Xiss web s'affiche :

Démarrer l'IHM de Xiss web.

L'IHM ouvre le dernier projet utilisé. Sur l'image précédente il s'agit du projet exemple projet2-sport-mode.

La fenêtre principale est composée de quatre parties :

  1. Une partie actions en haut qui contient aussi la localisation du projet.
  2. Une vue arborescente à gauche qui présente l'organisation des diaporamas du projet.
  3. Une zone d'éditeurs sur la droite. Tous les fichiers gérés par Xiss web peuvent être édités : slideshow.properties, slideshow.xml , layout.xml , skin.xml . Xiss web permet aussi l'édition de fichiers texte (txt, html, xml, JavaScript, php) et la visualisation d'images.

6.1.2 Vue arborescente des fichiers

L'organisation des fichiers affichée est celle sur le système de fichier. Xiss web distingue trois types de fichier :

  1. Fichier gérer by Xiss web : contenu de diaporama, agencement, habillage, etc. Ces fichiers sont éditables avec un éditeur dédié et ils sont utilisés pour construire le résultat final.
  2. Fichier image de diaporama: le pourquoi des diaporamas. Cela n'inclue pas les images hors des diaporamas comme cela est spécifié par les propriétés du projet.
  3. Tout autre fichier : fichiers qui ne contribuent pas à la création du résultat final, mais sont copiés dans la résultat produit pour y être intégrés (voir exemple utilisant des fichiers personnels). Les fichiers texte peuvent être édités avec l'éditeur texte de Xiss web.

La vue arborescente des fichiers peut filtrer les deux dernier type de fichier ci-dessus (filtres accessibles dans le menu contextuel de la racine) : montrer ou non les images dans les dossiers diaporama, montrer ou non tous les autres fichiers. Par défaut les fichiers image de diaporama et les autres fichiers sont cachés.

La vue arborescente de fichiers permet la gestion des fichiers comme le glisser déposer, le copier-coller, la suppression et la création. Cette gestion tient compte des fichiers spécifiques de Xiss web et de leur organisation dans un projet. Le glisser déposer et le copier-coller peuvent démarrer depuis un gestionnaire de fichier de la plateforme courante (explorer Windows ou finder MacOS X). Si des actions sont effectuées hors de l'IHM de Xiss web, la vue arborescente peut être resynchronisée avec le système de fichier (item de menu actualiser dans le menu contextuel de la racine) après des changements.

6.1.3 Partie action

En plus de la barre de menu, la zone d'actions est composée d'une ligne de boutons organisés en deux groupes. Ces deux groupes correspondent aux deux étapes principales pour la céation de diaporamas : la première est une étape d'initialisation et la sedonde une étape de construction. Les actions dans cette zone sont accessible dans le menu Projet.

Les actions de cette partie sont aussi disponible dans la vue arborescente des fichiers ou depuis l'éditeur de contenu de diaporama.

6.2 Nouveau projet

Depuis la version 1.1.2, amélioré en version 1.2.2.

Deux types de projet peuvent être créés à partir d'IMH dédiées : simple ou utilisant un espace de stockage d'images originales. Ces deux possibilités sont accessibles depuis le menu fichier principal.

Main file menu

6.2.1 Nouveau projet simple

La sélection de l'item Nouveau projet simple... dans le menu fichier ouvre la boîte de dialogue suivante.

Boîte de dialogue nouveau projet

Cela vous guide pour la sélection de l'emplacement de votre projet (le répertoire racine du projet). Votre nouveau projet doit déjà contenir une hiérarchie d'images, comme c'est expliqué dans la section "Créez votre propre diaporama". Cliquez sur le bouton à la droite du champ de l'emplacement du projet ou sur l'élément "Choisir l'emplacement d'une hiérarchie d'images..." dans la zone principale. Cela ouvre un sélecteur de fichier. Naviguez dans les répertoires pour trouver l'emplacement de votre projet. Vous pouvez aussi choisir un répertoire par un glisser-déposer depuis un explorateur de fichier de la plateforme courante dans le champ texte 'Emplacement'.

Sélecteur de fichier pour un nouveau projet

L'emplacement choisi est d'abord analysé pour vérifier l'organisation des images.

Emplacement du projet en analyse

L'analyse peut être arrêtée par un clic sur le carré rouge. Cela annule votre choix pour le nouveau projet.

Si l'organisation des images n'est pas valide, la boîte de dialogue indique des possibilités pour résoudre le problème par l'affichage d'options. Une fois une option choisie, le bouton OK est actif et la création du projet devient possible.

Résultat de l'analyse d'une localisation d'un projet

Les deux classes de problèmes qui sont gérées sont les suivants :

Pour résoudre ces problèmes des options sont proposées en fonction du problème courant :

Si les solutions proposées ne correspondent pas à la façon dont vous souhaitez répondre au problème courant, ou si un cas particulier n'est pas pris en compte, vous pouvez forcer la création du projet (avec le bouton "Créer quand même !"). Cela ignore l'éventuelle option sélectionnée et crée votre projet. Vous devez alors gérer votre cas avec le paramétrage du projet au travers de ses propriétés après sa création.

Si un problème se produit, même si des options de correction sont proposées, vous avez toujours la possibilité de choisir une nouvelle localisation.

La validation par le bouton OK crée effectivement le nouveau projet ou effectue l'action correspondant à une éventuelle option sélectionnée. Les deux dernières options listées ci-dessus ouvrent la boîte de dialogue pour créer un projet utilisant des images originales. La création d'un projet correspond à mettre le fichier xissweb.properties à la racine du projet. Un fois le projet créé, il est ouvert dans l'IHM de Xiss web. Cela ouvre aussi l'éditeur de propriétés pour vous permettre de finir la configuration de votre projet en modifiant les propriétés que vous voulez.

6.2.2 Nouveau projet avec images originales

L'item "Nouveau projet avec images originales..." du menu fichier ouvre une boîte de dialogue pour la création d'un nouveau projet associé à un espace de stockage d'image originales.

Boîte de dialogue nouveau projet utilisant un espace d'image originale

Vous devez choisir deux répertoires :

Ces deux emplacements sont à choisir par un sélecteur de fichier activé par les boutons à la droite des champs correspondants ou depuis les nœuds correspondants dans l'arbre de la zone principale (voir la figure ci-dessus). ils peuvent aussi être choisis par glisser-déposer depuis un explorateur de fichier de la plateforme courante dans les champs texte correspondants.

Chaque emplacement est analysé, mais seulement le résultat de l'analyse de l'espace des images originales est affiché. Car cet emplacement contient les images organisées pour des diaporamas. Les analyses peuvent être stoppées comme dans le cas projet simple. Si un problème est détecté, une explication est affichée. Contrairement au projet simple, aucune option de correction n'est proposée car il y a de multiple façon de les corriger. Vous devez donc corriger vous même les problèmes.

Le bouton OK est actif si les deux emplacements sont choisis et l'organisation des images de l'espace de stockage est valide. Un clic sur le bouton OK crée le projet et l'ouvre dans l'IHM de Xiss web. Cela ouvre aussi l'éditeur de propriétés sur la partie images originales. Cela vous permet de modifier les propriétés que vous voulez pour terminer le paramétrage du projet.

6.2.3 Aperçu d'image

Dans les deux boîtes de dialogue pour la création de nouveau projet, le bouton image preview/image preview affiche ou cache une fenêtre d'affichage d'aperçu d'image. Quand une localisation est choisie et son contenu affiché dans la vue arborescente, vous pouvez naviguer dans les répertoires et afficher les images que vous y trouvez en les sélectionnant. Voir la section Aperçu d'image pour plus de détails.

Aperçu d'image

6.3 Ouvrir un projet

Amélioré en versions 1.2.0, 1.2.2 et 1.6.0.

L'ouverture d'un projet provoque la fermeture du projet courant. Cette action ne provoque aucun effet néfaste sur le projet courant.

6.3.1 Choisir un projet

Pour ouvrir un nouveau projet, choisissez l'item Ouvrir un projet... dans le menu Fichier.

Ouvrir un projet.

Cette action ouvre un sélecteur de fichier :

Ouvrir un projet avec un sélecteur de fichiers.

Vous pouvez naviguer dans les répertoires pour trouver le répertoire racine de votre projet. Un projet Xiss web projet doit respecter une structure comme dans l'exemple examples\projet1-sport-mode ou examples\projet2-sport-mode. Cela signifie que les images doivent être organisées dans des sous-répertoires d'un répertoire source (appelé src par défaut).

Vous pouvez aussi simplement choisir votre projet par un glisser-déposer du répertoire racine depuis un explorateur de fichier de la pfateforme courante dans le champ texte "Projet courant" de la fenêtre principale de Xiss web.

Si le répertoire sélectionné ne correspond pas à celui d'un projet Xiss web, alors le message suivant est affiché :

Message si ce n'est pas un porjet Xiss web

Il est possible de céer un nouveau project avec l'emplacement choisi : un projet simple ou un projet avec l'emplacement en tan qu'espace d'images originales.

6.3.2 Projet récent

Les projets récents sont accessibles par le menu fichier. Il est facile de rouvrir un projet précédemment ouvert. Le nombre de projets récents disponibles est éditable dans les préférences de Xiss web.

Ouvrir un projet récent.

6.3.3 Ouverture

La fenêtre principale de Xiss web s'initialise en fonction du nouveau projet et de ses propriétés. Xiss web est prêt pour traiter votre projet.

En particulier l'IHM tient compte de l'option originaux et inverser comme montrer sur les deux figures ci-dessous.

Projet ouvert.
Sélection du l'option originaux à l'ouverture en correspondance aux propriétés affichées.

Projet ouvert.
Sélection du l'option 'inverer' à l'ouverture en correspondance avec les propriétés affichées.

6.4 Initialisation (semage)

Ici nous décrivons les possibilités d'IHM. Pour connaître ce que fait le processus de semage, aller voir l'objet du processus de semage.

Pour exécuter ce traitement vous avez juste à cliquer sur le bouton lancer le semage... ou sélectionnez l'item 'Semage (initialiser)... (Ctrl-I)' dans le menu Projet. Cela démarre le traitement de semage. L'avancement du traitement est affiché dans la fenêtre suivante.

Traitement de semage en cours.

Durant le processus, vous pouvez faire une pause, le redémarrer ou l'arrêter. Si une image de grande taille est traitée (par exemple un redimensionnement d'une image principale lors de son import, voir Import d'images originales section), une roue animée apparaît pendant la durée de ce long traitement.

Traitement long d'une image.

Quand le traitement est fini, des statistiques sont affichées.

Semage terminé.

Une case à cocher indique si la fenêtre doit se fermer à la fin du traitement. Ce paramètre est géré comme une préférence utilisateur.

Il est possibk le d'exécuter le processus de semage pour un diaporama, directement depuis la vue arborescente des fichiers en ouvrant le menu contextuel sur un dossier diaporama.

Semage depuis un dossier diaporama.

Les modes 'inversion' (reverse) et 'espace de stockage' (repository) sont disponibles comme ils le sont avec la commande xiss-sow .

Le mode 'espace de stockage' est accessible si un espace d'images originales est indiqué dans les propriétés du projet courant. L'espace des images originale est visible dans la vue arborescente des fichiers. Dans ce cas le radio bouton originaux apparaît et il permet de sélectionner le mode 'espace de stockage'. Alors le processus de semage analyse les images de l'espace de stockage et les importe si la propriété import.image est positionnée à true.

Semage à partir d'originaux.

Le mode 'inversion' est accessible si un emplacement à inverser est indiquée dans les propriétés du projet courant. Dans ce cas le radio bouton inverser apparaît et il permet la sélection du mode 'inverser'. Alors, le processus de semage analyse les images et les pages HTML dans l'emplacement à inverser et initialise les images et les informations des diaporamas.

Semage en mode inversion.

Si l'option courante n'est pas en accord avec les propriétés du projet alors, le bouton de semage n'est plus actif. La localisation analysée par le processus de semage est surchargé par l'icone process, comme c'est montré sur les figures ci-dessus.

Il existe aussi l'équivalent de l'option -select à la commande xiss-sow. Pour cela il suffit de sélectionner dans la vue arborescente du projet les répertoires voulus (les variantes de sélection avec SHIFT et CTRL sont possibles). Si des fichiers sont sélectionnés, leurs répertoires se trouveront dans la sélection finale. Les répertoires sont traités récursivement. La figure suivante montre le répertoire sport sélectionné. Cela produit un semage sur le répertoire sport mais aussi ces deux sous-répertoires gymnastique et handball.

Sow avec répertoires sélectionnés.

Il est possible de sélectionner des répertoires dans un espace d'image originales pour importer seulement les images voulues. Si un espace d'images originales est spécifié dans les propriétés du projet, il est alors affiché dans la vue arborescente des fichiers. Les répertoires de cet espace peuvent être sélectionnés. Les sélections sont possibles seulement si le mode 'espace de stockage' est actif, c'est à dire si le symbole 'espace de stockage' pres du bouton semage est sélectionné. Les deux images suivantes montrent des répertoires de l'espace d'images originales sélectionnés et, sans le mode 'espace de stockage', aucune sélection n'est possible.

Semage avec des répertoire d'originaux sélectionnés. Répertoire d'originaux non sélectionnable.

WARNING:

Si le traitement n'est pas celui attendu, vérifiez la sélection courante dans la vue arborescente des fichiers.

6.5 Générer les diaporamas (construction)

Pour en savoir plus sur le processus de construction, voir son objet ici.

Pour exécuter ce traitement vous avez juste à cliquer sur le bouton lancer la construction... ou l'item 'Construire... (Ctrl-B)' dans le menu 'Projet'. Si aucun traitement de semage n'a jamais été fait, le bouton est désactivé. Vous devez alors exécuter un traitement de semage avant celui de construction.

Ce bouton lance le traitement de construction. La progression du traitement est affichée dans la fenêtre ci-dessous.

Construction en cours.

Durant le processus, vous pouvez faire une pause, le redémarrer ou l'arrêter. Quand le traitement est fini, des statistiques sont affichées dans la fenêtre suivante.

Construction terminé.

Chaque répertoire visité est affiché avec des caractères : un '=' correspond à la copie d'une image ; un '+' correspond à la création d'une vignette ; un '.' correspond à la génération d'une page HTML ; et 'i' à la création d'un index local. La trace du type 's(xissweb)' correspond à la copie d'un habillage (skin) dans l'espace de destination et le texte entre parenthèses est le nom de l'habillage. Le 'i' à la fin de la visite des répertoires correspond à la création d'une page d'index de plu haut niveau (index global). A la suite du parcours des répertoires des statiques sont affichées.

Une case à cocher indique si la fenêtre doit se fermer à la fin du traitement. Ce paramètre est géré comme une préférence utilisateur.

Il existe aussi l'équivalent de l'argument -select à la commande build . Pour cela il suffit de sélectionner dans la vue arborescente du projet les répertoires voulus (les variantes de sélection avec SHIFT et CTRL sont possibles). Si des fichiers sont sélectionnés, leurs répertoires se trouveront dans la sélection finale. Les répertoires sont traités récursivement. La figure suivante montre le répertoire sport sélectionné. Cela produit la construction des diaporamas à partir du répertoire sport et ces deux sous-répertoires gymnastique et handball.

Sow avec répertoires sélectionnés.

WARNING:

Si le traitement n'est pas celui attendu, vérifiez la sélection courante dans la vue arborescente des fichiers.

Les diaporamas générés peuvent être supprimés avec le bouton construire. Si une sélection dans la vue arborescente existe, seuls les répertoires sélectionnés sont supprimés. La suppression d'un répertoire supprime son contenu et ses sous-répertoires. Le processus de génération ne supprime pas les fichiers inutiles. Un effacement est nécessaire avant de lancer une génération après quelques tests (comme tester différentes apparences) ou après la suppression ou la réorganisation d'images dans le répertoire src. Ainsi vous obtenez uniquement les fichiers utiles.

6.6 Afficher les diaporamas générés

Les diaporamas générés peuvent être affiché dans un navigateur web directement depuis l'IHM. Pour visualiser les diaporamas du projet courant, cliquez sur le bouton afficher. Note, si la génération du diaporama n'a pas été faite, le bouton est désactivé. Pour le rendre actif, lancer une construction des diaporamas.

Par défaut le navigateur web est Internet Explorer pour la plate-forme Windows : C:\Program Files\Internet Explorer\IEXPLORE.EXE. Vous pouvez choisir votre navigateur préféré ou changer le lien vers Internet Explorer pour une autre plate-forme. Pour changer de navigateur web, éditez les préférences et changez la valeur de l'élément Par défaut/Navigateur web.

6.7 Capacités d'édition

Depuis la version 0.10.3, mis a jour en version 1.7.0.

La plus part des fichiers d'un projet diaporama affichés dans la vue arborescente un peuvent être édités avec Xiss web. Les fichiers gérer par Xiss web ont un des éditeurs spécifiques : propriétés de projet, les préférences utilisateur , contenu de diaporama, agencement and habillage. Un éditeur text simple peut aussi être utilisé pour les contenus de diaporama, les agencements, les habillages et les fichiers suivants : txt, html, css, xml, js, php. Les images peuvent être montrées dans un éditeur, mais elles ne peuvent être modifiées. Ici nous décrivons les fonctionnalités d'édition communes.

Pour ouvrir un éditeur sur un fichier, cliquez droit sur le fichier dans la vue arborescente pour ouvrir un menu associé, choisissez ensuite l'item Ouvrir. Des fichiers peuvent être édités avec plusieurs éditeurs. Dans ce sas un sous-menu Ouvrir avec est disponible pour choisir un éditeur. Dans ce cas l'item Ouvrir ouvre l'éditeur par défaut (le premier dans le sous-menu Ouvrir avec).

Ouvrir un éditeur. Ouvrir avec. Ouvrir fichier autre.

Alors l'éditeur s'ouvre et il est associé à un onglet. Plusieurs fichiers peuvent être ouverts en même temps. Un double click sur un fichier dans la vue arborescente, l'ouvre dans un éditeur s'il le l'est pas déjà ou sélectionne l'éditeur avec le fichier. Un éditeur sélectionné (ou un éditeur courant) est celui qui a un onglet bleu et un bouton de fermeture toujours affiché.

Editeurs ouverts.

Quand un fichier est ouvert dans un éditeur vous pouvez y faire des changements. Quand le contenu d'un fichier dans un éditeur est modifié une étoile (*) est affichée avec le nom du fichier dans l'onglet (le fichier courant sur la figure ci-dessus). Les actions communes possibles sont :

Ces actions sont accessibles depuis : le menu fichier principal, le menu fichier dans la vue arborescente, les onglets des éditeurs. Pour les fichiers specifiques a Xiss web on des actions suplémentaires possibles. Ces actions sont dépendentes du type du fichier.

Menu fichier principal. Menu fichier de la vue arborescente. Menu onglet d'éditeur.

Sur la figure ci-dessus, les menus associés au diaporama présentent des actions suplémentaires spécifiques aux diaporamas.

Certaines actions peuvent être activées par des raccourcis clavier : par exemple sur Windows, Ctrl-S pour la sauvegarde du fichier courant. Sur l'onglet d'un éditeur, le bouton de fermeture peut directement fermer l'éditeur correspondant.

L'action de fermeture demande une confirmation s'il y a des changements au fichier.

Demande de sauvegarde

Pendant l'édition une validation du texte est effectuée pour vérifier s'il est conforme à sa grammaire (W3C XML Schema) si elle existe, ou simplement à la syntaxe XML. Si des erreurs sont trouvées un message est affiché et l'icon du fichier change.

Erreurs de validation

Pour obtenir plus d'information sur les erreurs, une fenêtre affiche la description des erreurs (voir ci-dessous). Cette fenêtre peut être ouverte par un click sur le message d'erreur qui est dans la fenêtre principale de Xiss web.

Explications des erreurs de valisatrion

6.8 Editer les propriétés d'un projet

Depuis la version 1.10.0, amélioré en version 0.10.3.

Les propriétés d'un projet peuvent être éditées par un éditeur spécifique. Pour ouvrir cet éditeur, sélectionnez l'item Editer les propriétés du projet dans le menu Options ou ouvrez le menu dans la vue arborescente sur le fichier des propriétés et choisissez Ouvrir.

Ouvrir l'éditeur de propriétés. Menu dans la vue arborescente.

L'éditeur de propriétés s'ouvre et s'affiche comme le montre l'image ci-dessous. L'éditeur deux parties principales :

Sur l'image suivante, la propriété 'répertoire des vignettes' est sélectionnée et prête à être éditée dans la partie édition.

Editeur de propriétés.

Les propriétés éditées sont en gras. Quand les propriétés sont sauvegardées, les changements sont appliqués sur le projet.

Aller voir la section Capacités d'édition pour plus de détails sur les actions d'édition.

Vous avez aussi la possibilité de mettre toutes les valeurs par défaut dans les propriétés de votre projet par un click sur le bouton Valeurs par défaut. Ces valeurs sont celles mises par Xiss web pour la création d'un nouveau projet.

6.9 Editeur contenu de diaporama (slideshow.xml)

Depuis la version 0.10.4, amélioré dans les versions 1.1.0, 1.1.2, 1.2.0, 1.3.2, 1.3.3, 1.3.6 et 1.5.0

6.9.1 Présentation générale

Un éditeur graphique permet des manipulations suivantes sur les fichiers slideshow.xml :

L'éditeur de fichier slideshow.xml présente le contenu du fichier par une vue arborescente d'éléments. Il permet aussi l'affichage d'une image sélectionnée :

Editeur de diaporama (slideshow.xml).

Les éléments éditables sont les suivants :

Les images manquantes sont représentées par l'image par défaut Pas trouvé.

Les textes associés aux éléments sont éditables. Il existe deux façons d'éditer les textes :

  1. Directement dans l'éditeur de texte sous la zone d'affichage des images. Cet éditeur est toujours actif (sauf quand un élément dans la vue arborescente est en mode édition).
  2. Depuis un élément dans la vue arborescente : l'activation du mode édition se fait en tapant la touche ENTREE ou par un triple clique. Pour terminer l'édition tapez la touche ENTREE ou ECHAP, ou sélectionnez un autre élément. La figure ci-après montre un commentaire d'image en édition.

Edition des textes

Il est possible d'éditer tous les commentaires des images en utilisant seulement le clavier. Sélectionnez la première image puis pressez la touche ENTREE pour éditer son commentaire. Quand l'édition est finie (après avoir pressé ENTREE ou ECHAP), utilisez la flèche descendante du clavier pour sélectionner l'image suivante, et appuyer une nouvelle fois sur la touche ENTREE pour éditer le commentaire. Répétez ces actions jusqu'à atteindre la dernière image.

L'éditeur de texte sous la zone d'affichage des images donne plus d'espace pour l'édition que la zone dans la vue arborescente. C'est une possibilité d'édition de textes plus confortable. Pour les commentaires et descriptions il est possible d'y inclure des éléments HTML quand le mode HTML est sélectionné (radio bouton HTML). Cela permet, par exemple, des liens hypertexte dans les commentaires d'image (voir l'exemple features/html-comment ). Le mode HTML est associé à un texte. Cela signifie que, dans in diaporama un commentaire d'une image peut être en mode HTML et en texte normal pour une autre image. Dans le mode HTML, un clic droit dans l'éditeur fait apparaître un menu pour ajouter rapidement des éléments HTML. Si une partie du texte est sélectionné, l'élément inséré l'encadre (avec un tag de début et de fin). Le HTML ici doit respecter la syntaxe XML (chaque élément doit être fermé).

Sur chaque élément un menu pop-up est disponible, ils permettent respectivement :

Menu contectuel de contenu de diaporama Menu contectuel lien de diaporama

Menu contextuel section de diaporama Menu contextuel image

INFO:

Les accélérateurs (caractères de contrôle associés à un item de menu) activent la commande associé sur une sélection : Entrée sur le premier élément sélectionné ; Alt-P, Alt-F, Alt-C, Alt-U et Alt-B sur toutes les images sélectionnées ; Alt-D sur la première image sélectionnée.

WARNING:

La reconstruction directe de la page HTML d'une image peut est utile pour prendre en compte des changements comme le commentaire ou des métadonnées alors que le diaporama a déjà été généré. Elle ne génère pas la vignette associée et ne recopie pas l'image principale dans le répertoire destination. Pour la première construction il faut construire le diaporama en son entier.

6.9.2 Edition des métadonnées

Les images de type numérique [P] sont des images venant d'un appareil photo numérique. Le processus de semage détecte automatiquement de type d'image et extrait les métadonnées correspondantes. Si une image n'est pas de type numérique, Xiss web affecte le type inconnu ([U]) essaye d'extraire des informations de date, heure et GSP depuis les données Exif. Deux autres types d'image existent :

Il est toujours possible de changer le type d'une image par le choix de l'un des 3 autres types possibles. A chaque changement de type, Xiss web extrait les informations correspondantes dans les données Exif de l'image. Dans le tableau présentant les métadonnées d'une image, toutes les valeurs sont éditables. Il est aussi possible de restaurer les valeurs par défaut contenues dans les données Exif de l'image.

Les valeurs éditées dans la table des métadonnées sont libres (ie aucun contrôle en entrée), sauf pour la latitude et la longitude. Ces deux propriétés sont utilisées pour localiser les images sur une carte pour l'index local Google Maps. Les autres valeurs sont juste utilisées pour affichage à titre informatif. Il est de votre responsabilité de respecter (ou non) le sens de chaque propriété des métadonnées.

Deux formats sont possibles pour l'édition de latitude et de longitude :

Quand une latitude ou une longitude est donnée dans le second format, elle est transformée dans le premier format.

INFO:

Vous pouvez utiliser iPhoto'09 d'Apple sur Mac OS ou Picasa 3.5 de Google pour ajouter des informations de localisation sur vos images. Vous pouvez aussi utiliser Google Maps sur internet pour obtenir des localisations GPS. Par exemple, faites un clic droit sur une carte dans Google Maps, sur un point que vous avez choisi, ensuite centrez la carte sur ce point. Après, cliquez sur le lien "link icon Lien" au dessus du coin haut-droite de la carte. Cela affiche un cadre avec deux champs texte contenant la latitude et la longitude (dans cet ordre) du centre de la carte : exemple "...&ll=45.55345736719138889,-3.9283269113888889&spn=...". Copiez et collez séparément la latitude et la longitude dans les parties correspondantes de la table de métadonnées.

Si plusieurs images d'un même type sont sélectionnées, alors les métadonnées communes sont affichées dans la table de propriétés valeurs. Les propriétés ayant des valeurs différentes sont affichées en italique et aucune valeur n'est affichée, comme le montre la copie d'écran ci-dessous.

Meda données communes

L'édition de métadonnées est possible sur une sélection de plusieurs image. L'édition d'une valeur est affectée à chaque image de la sélection. Ainsi, si toute les images on une valeur en commun pour une propriété il est possible de leur affecter par l'édition d'une valeur.

6.9.3 Déplacement d'images

L'organisation des images dans un diaporama est possible par des actions de "drag and drop". Chaque opération de "darg and drop" correspond à un déplacement d'images ou de sections. Plusieurs images et sections peuvent être déplacées en une seule opération de "drag and drop". Une sélection d'images peut être lâchée sur une section, cela déplace les images et les insère en première position dans la section. Une sélection d'images peut être lâchée sur une autre image, cela déplace les images et les insère après l'image cible. Le comportement est similaire avec une sélection de sections (les images associées à une section sont déplacées avec la section): une telle sélection peut être lâchée sur l'élément racine ou sur une autre section. Les possibilités de sélection/désélection multiple s'effectuent par un click ou un CTRL-click ou un SHIFT-click.

Il est aussi possible de déplacer une image d'une section à une autre par son menu contextuel.

6.9.4 Actions

Depuis cet éditeur, vous pouvez avoir un accès direct à la commande de construction pour générer les pages HTML correspondantes au diaporama ou reconstruire une seule page HTML d'une image. Il est aussi possible de voir le diaporama avec l'équivalant de la commande de visualisation. Ainsi après avoir fait des changements (par exemple, l'édition de commentaires) vous pouvez générer rapidement le diaporama et visualiser le résultat. Les actions sur une image sont accessibles par un pop-up menu sur l'image elle-même ou par des raccourcis sur une image sélectionnée : 'B' pour reconstruire et 'S' pour visualiser. Les actions sur le diaporama en son entier sont accessibles depuis le pop up menu de l'onglet du menu ou par les raccourcis : 'CTRL-B' pour construire en entier le diaporama et 'ATL-S' pour voir le résultat.

Menu de l'onglet de l'éditeur de diaporama

6.10 Liens entre diaporamas

Depuis la version 0.10.7, mise à jour à la version 1.6.0.

Cette section présente comment créer, éditer et supprimer facilement des liens entre diaporama et comment contrôler et corriger les incohérences dans des ensembles de diaporamas liés.

6.10.1 Gestion des liens de diaporamas

Une boîte de dialogue aide à la gestion des liens entre diaporama. Pour ouvrir la boîte de dialogue, sélectionnez d'abord des diaporamas dans l'arbre des fichiers de l'IHM. Les diaporamas peuvent être directement sélectionné ou par la sélection de répertoire. La sélection d'un répertoire sélectionne récursivement les diaporamas contenus dans la hiérarchie de sous-répertoires de la sélection. Si plus d'un diaporama est sélectionné alors le bouton Gérer les liens... de l'IHM devient actif. (La gestion des liens ne peut se faire qu'après le semage initial.). Ce bouton ouvre la boîte de dialogue de gestion des liens ci-dessous.

Sélection pour la gestion des liens Boître de dialogue gestion des liens

Une vue arborescente présente l'ensemble des diaporamas sélectionnés et les éventuels liens existants. Par défaut les diaporamas sont triés dans l'ordre alphabétique. L'ordre initial peut être changé par actions de drag and drop. Seuls les nœuds diaporama peuvent être déplacés par drag and drop. Un diaporama lâché sur un nœud insère le diaporama après le nœud cible. Taper sur la touche 'A' trie les diaporamas dans l'ordre alphabétique, et taper sur la touche 'Z' trie les diaporamas dans l'ordre alphabétique inverse. Les actions de drag and drop et de tri peuvent être fait à n'import quel moment.

La partie droite de la boîte de dialogue présente les actions possibles. Ces actions permettent de créer les types de liens voulus. La figure ci-dessous présente le résultat après un clic sur le bouton Suivant seulement.

Gestion des liens, choix suivant seulement

L'option Circulaire permet de lier entre eux le premier et le dernier diaporama. Un clic sur le bouton Suivant seulement avec cette option sélectionnée dont le résultat suivant.

Gestion des liens, choix suivant seulement et circulaire

Les liens peuvent être créés un par un en utilisant des menus contextuels sur les éléments lien et diaporama dans la vue arborescente. Ces menus permettent d'effectuer des actions de création ou suppression en cohérence avec le contexte courant. La figure suivante présente ces deux types de menu.

Gestion des liens, menu lien Gestion des liens, menu diaporama

Le texte représentant chaque lien peut être édité directement depuis l'arbre. D'abord sélectionnez un nœud lien, puis tapez sur la touche ENTRER pour entrer en mode d'édition. Taper à nouveau sur ENTRER, taper sur ECHAP ou sélectionner un autre nœud, termine le mode édition.

Gestion des liens, édition de texte

6.10.2 Contrôle des liens entre diaporamas

Un ensemble de diaporamas liés est incohérent, si des diaporamas dépendent d'un agencement sans animation et, si d'autres diaporamas du même ensemble dépendent d'un agencement avec animation. Les ensembles de diaporamas liés peuvent être visualisés par l'item de menu Consulter les liens du menu Projet.

Menu contrôler les liens Contrôle des diaporamas liés

Un ensemble de diaporamas liés est présenté par rapport à l'agencement dont chaque diaporama dépend. Dans la boîte de dialogue ci-dessus, un seul ensemble de diaporamas liés est présent (élément set of links dans l'arbre). Dans cet ensemble, le premier diaporama dépend d'un agencement, et les deux autres diaporamas dépendent d'un autre agencement. Les noms des diaporamas et des agencements correspondent aux noms de leur répertoire. Deux icones différentes présentent les agencements : layout pour un agencement sans animation et Layout with animation pour un agencement avec animation. Sur la figure ci-dessus, tous les agencements sont cohérents (du même type, ici sans animation).

Si en ensemble de diaporama est inconsistant, alors un message d'avertissement est affiché et l'élément ensemble dans la vue arborescente est marqué avec une icone attention : avertissement ensemble de liens. L'ouverture de la représentation des ensembles de diaporamas liés peut directement se faire depuis le message d'avertissement. L'item correspondant dans le menu Projet est aussi marqué par un icone attention.

Menu contrôler les liens Contrôle des diaporamas liés avec avertissement

Message d'information de liens non cohérents

Sur l'exemple ci-dessus, l'ensemble est inconsistant car le premier diaporama dépend d'un agencement avec animation et les autres diaporamas dépendent d'un agencement sans animation.

Ces actions ci-dessus permettent d'éditer rapidement des liens entre diaporamas d'un même ensemble ou un agencement associé à des diaporamas, et ainsi de résoudre d'éventuels problèmes détectés. Deux façons sont possibles pour corriger un ensemble inconsistant : éditer des agencements pour ajouter ou retirer des animations et ainsi avoir tous les agencements cohérents; supprimer des liens pour obtenir des sous-ensembles consistants.

Si un ensemble de diaporamas sélectionnés est incohérent pour former un ensemble de diaporama lié, alors un message d'avertissement est affiché et une icone attention est affichée sur le bouton et l'item de menu Gérer les liens. Cela n'empêche pas de créer des liens, cela informe seulement sur un problème potentiel lors de la génération des pages HTML.

Attention sélection de diapaoramas

Un clic sur le message d'avertissement ouvre une représentation de l'ensemble des diaporamas sélectionnés comme un ensemble de diaporamas liés.

6.11 Editeur d'agencement (layout.xml)

Depuis la version 0.10.5, mis à jour aux versions 1.1.0, 1.2.0, 1.3.0, 1.3.5, 1.3.6, 1.5.0, 1.6.0, 1.6.6, 1.6.7 et 1.7.0.

Présentation

Un éditeur graphique dédié aux fichiers d'agencement layout.xml permet l'édition de tous les éléments d'agencement :

L'éditeur d'agencement a trois parties :

  1. en haut à gauche : vue arborescente des éléments d'agencement
  2. en bas à gauche : une vue graphique qui montre la position relative des composants présent dans les pages HTML
  3. à droite : une zone d'édition pour éditer les propriétés d'un élément sélectionné

Editeur d'agencemet

Les éléments éditables et leur propriétés sont les suivants :

Le texte HTML pour les décorations de pages doit respecter la syntaxe XML (chaque élément doit être fermé). Dans la zone d'édition de texte, un clic droit fait apparaître un menu pour ajouter rapidement des éléments HTML. Si une partie du texte est sélectionné, l'élément inséré l'encadre (avec un tag de début et de fin).

Sur chaque élément (sauf les informations de vignettes) un menu contextuel est disponible et offre les actions possibles. Ce menu ne rend accessible que les actions autorisées à un instant donné. Il est accessible sur les éléments dans la vue arborescente et dans la vue graphique. Les images ci-dessous montrent le menu contextuel de la zone image principale dans la vue arborescente et dans la vue graphique.

Popup menu dans la vue arborescente Popup menu dans la vue graphic

Les actions d'ajout et de suppression sur les éléments dépendent du type d'élément et de son occurrence possible :

Création

Des fichiers d'agencement peuvent être créés par copier coller disponiblent sur la vue arborescente des fichiers, ou à partir de canevas. Un fichier d'agencement peut aussi être supprimé. La figure suivante présente les menus relatifs à la gestion de fichiers d'agencement.

Layout menu on file Layout menu on directory

Glisser déposer

Il est possible d'organiser les éléments dans les arrangements par drag and drop. Un arrangement est un conteneur de composants : zone image, barre de navigation, vignettes et arrangement. Un arrangement est un conteneur et un composant. Un composant peut être déplacé dans son arrangement ou à l'extérieur vers un autre arrangement. Un composant lâché sur un arrangement déplace le composant depuis sa place de départ vers la première position dans l'arrangement cible. Un composant lâché sur un composant autre qu'un arrangement, déplace le composant depuis sa place de départ vers la position après celle du composant cible. Un arrangement déplacé par drag and drop est déplacé avec son contenu (ses composants). Les composants ne peuvent être que déplacés par drag and drop que un par un.

Par exemple : la première image ci-dessous montre un arrangement avant un drag and drop. La seconde image montre le résultat d'une action de drag and drop de la barre de navigation sur l'arrangement horizontal. Le résultat correspond au déplacement de la barre de navigation à la première position dans un autre arrangement que le sien initialement. La troisième image présente le résultat d'une action de drag and drop de la barre de navigation sur l'élément zone image. Le résultat correspond au déplacement de la barre de navigation dans le même arrangement à une position après la zone image.

Avant darg and drop

Après drag and drop Aprè drag and drop

Google Maps

Les éléments utilisant Google Maps (index local Google Maps et localisation d'image sur une carte) permettent l'édition de paramètres pour la personnalisation de Google Maps dans les diaporamas. La figure ci-après présente la partie édition pour Google Maps.

Partie édition de Google Maps

Chaque action de choix sur les paramètres est représentée sur la représentation de Google Maps au centre. Cela permet d'avoir une vue sur l'aspect de Google Maps tel qu'il sera dans les pages HTML au final.

6.12 Editeur d'habillage (skin) simple

Depuis la version 0.10.8, amélioré et mis à jour en version 1.3.0 et 1.6.5.

L'éditeur d'habillage permet la définition de nouveaux habillages simples associés à un projet de diaporama (voir la partie gestion de l'apparence). L'habillage est appelée simple car l'éditeur met en œuvre des capacités de CSS (feuille de style) limitées. Un habillage éditable est basé sur un canevas similaire à l'habillage "simple" des habillages par défauts de Xiss web.

Pour définir un nouvel habillage, dans un premier temps ajoutez un habillage à partir d'un canevas à votre projet. Un click droit dans la vue arborescente des fichiers ouvre le menu correspondant (click sur le fond ou sur le nœud racine du projet ou sur le nœud "skins").

Ajouter un habillage

Ensuite choisissez un nom pour le nouvel habillage. Le nom doit correspondre à un nom de répertoire valide.

Saisie du nom d'habillage

Un nouvel habillage est alors créé et ajouté dans un répertoire "skins" (lui aussi créé s'il n'existe pas). Ce nouvel habillage est éditable comme un autre fichier de diaporama.

Menu fichier d'un habillage

L'éditeur présente l'habillage comme ci-dessous.

Editor d'habillage

La partie gauche correspond à une partie éditable de ses paramètres. La partie droite montre un rendu graphique dynamiquement mise à jour après chaque modification d'un paramètre.

6.12.1 Partie rendu

Cette partie est un aperçu de tous les éléments possibles qui peuvent être affichés dans un diaporama (même si certains éléments, comme une image principale et l'index local ne sont jamais présents en même temps). Le rendu a son propre agencement pour présenter l'aperçu, sans tenir compte d'un agencement d'un diaporama.

Le rendu de l'index local correspond au rendu de l'index local standard (voir Local index paramétrable). Le texte qui y est affiché est du style commentaire. Pour l'index local Google Maps, cette zone est remplie par une carte (non rendu ici) et, seule la bordure est visible.

6.12.2 Partie édition

Les paramètres sont organisés en trois sections :

  1. Couleurs: Les couleurs globales utilisées dans les classes CSS générées.
  2. Page: paramètres correspondants aux éléments communs : textes et liens.
  3. Composants: paramètres des composants visibles correspondants à des éléments Xiss web :

Tous les paramètres ont des comportements standards pour leur édition, sauf pour les couleurs et les polices de caractères.

6.12.2.1 Couleur

Un double click sur une couleur ouvre un sélecteur de couleurs permettant de choisir la couleur voulue.

Sélecteur de couleurs

Un simple click sur une couleur la sélectionne. La figure ci-dessous montre la première couleur de la seconde ligne dans l'état sélectionnée. Sur une couleur sélectionnée deux actions sont possibles ;

Couleur sélectionnée

WARNING:

Une action d'assombrissement après une action d'éclaircissement ne correspond pas à l'annulation de la première commande. Et respectivement pour une commande d'éclaircissement après une commande d'assombrissement.

6.12.2.2 Police de caractères

Pour modifier une police un simple click sur le nom ouvre un sélecteur de polices. Cette boîte de dialogue présente seulement des familles de police (comme "Times New Roman") organisées par familles génériques (comme "serif").

Séecteur de polices

Les noms en italique représentent des polices qui n'ont pas de correspondance sur la plate-forme courante ou inconnues de l'environnement Java. Le haut de la boîte de dialogue affiche, en guise de prévisualisation, un morceau de texte dans la police correspondant à la sélection courante. Le bas de la boîte de dialogue affiche le nom de la famille de police sélectionnée avec le nom de sa famille générique.

6.13 Ouvrir un projet exemple

Mis à jour en version 1.3.1.

Pour ouvrir un projet exemple, ouvrez le menu d'aide (?), puis choisissez l'item Exemples pour ouvrir le sous-menu des exemples disponibles. Dans cette liste sélectionnez l'exemple désiré. Cela ouvre le projet correspondant comme tout autre projet.

OUvrir un projet exemple.

Si les exemples sont inactivés dans le menu, comme montré ci-dessous, vous devez installer les exemples dans le répertoire (%XISSWEB_HOME%/examples).

Exemples non installé.

L'item Installer les exemples... du menu installe les exemples automatiquement. Il ouvre la boîte de dialogue ci-dessous. L'installation sélectionne la version des exemples correspondant à la version de Xiss web. L'installation se fait à partir du téléchargement l'archive des exemples (le défaut) ou à partir d'une archive déjà téléchargée. Si l'archive locale est choisie, l'archive peut être glissée-déposée dans le champ texte ou sélectionnée par un sélecteur de fichier (bouton "...").

Examples installation dialog.

6.14 Aperçu d'image

Un aperçu d'image est disponible avec les boîtes de dialogue pour la création de nouveaux projets, l'éditeur de contenu de diaporama et, la visulisation d'images depuis la vue arborescente des fichiers. Les images sont affichées dans une zone avec deux modes possibles : taille réelle, ou taille adaptée à la zone. Il est possible de passer d'un mode à l'autre. Un simple clic dans la zone d'affichage de l'image montre un menu pour passer en mode taille réelle si l'image est affichée en mode adaptée ou pour passer en mode adaptée si l'image est affichée en mode taille réelle. Les figures suivantes montrent les deux modes et le menu pour chacun.

Aperçu en mode taille adpatée Aperçu en mode taille réelle

6.15 Résoudre les problèmes

Lorsqu'un problème survient, un message le décrivant s'affiche. Le texte indique l'origine du problème, comme le montre l'image ci-dessous. Un symbole error accompagne le texte. Le même symbole peut aussi être affiché avec l'élément qui pose problème.

Affichage d'un problème.

Une aide peu être obtenue pour le résoudre. Pour cela il suffit de cliquer sur le texte du problème ou sur un symbole error. Un menu s'ouvre et propose plusieurs actions possibles. Il est alors possible d'exécuter directement une action depuis ce menu.

Choix d'une solution. Autre choix d'une solution.

6.16 Edition des préférences

Depuis la version 0.10.6, amélioré en 1.0.4.

Des préférences utilisateur peuvent être directement éditées. Ces préférences éditables correspondent à des paramètres directement accessibles par l'utilisateur. Par exemple, une case à cocher qui représente un paramètre relatif à un comportement de l'IHM. La taille et la position des fenêtres sont gérées comme des préférences utilisateur mais elles ne sont pas directement éditables. La préférence de position d'une fenêtre est changée par le déplacement de la fenêtre, non pas par la saisie de coordonnées.

Les préférences sont indépendantes des projets. Pour chaque projet de diaporama, les mêmes préférences s'appliquent. Pour éditer les préférences choisissez l'item Editer les préférences dans le menu Options.

Menu éditer les préférences.

Cela ouvre l'éditeur de préférences, voir ci-dessous.

Editeur de préférences.

Un simple click sur un élément démarre son édition.

Edit a preference.

Si la valeur courante est différente de celle par défaut, un bouton permet de mettre la valeur par défaut. La sélection d'une nouvelle valeur termine l'édition. Pour annuler l'édition courante, cliquez sur une autre préférence ou appuyez sur ENTREE ou ECHAP.

Edit a preference.

La figure précédente montre un élément en édition dont sa valeur est la valeur par défaut. Dans ce cas le bouton d'affectation de la valeur par défaut est désactivé.

Le navigateur web utilisé pour afficher la documentation et les pages HTML générées, peut être directement saisi ou choisi avec un sélecteur de fichier. La valeur doit être une commande permettant l'ouverture d'un navigateur web : un programme (un fichier '.exe' sur Windows), un chemin complet d'un programme ou juste son nom si son chemin est dans la variable d'environnement PATH. Sur Mac OS X Ce peut être simplement la commande open (valeur par défaut sur cette plate-forme) qui ouvre le navigateur par défaut. La figure ci-après montre la préférence de navigateur web en édition.

Préférence navigateur web.

Tous les changements sont en gras. Pour la prise en compte effective des changements, il suffit de sauvegarder les préférences comme un autre document : par les menus de sauvegarde, par Ctrl-S (voir les capacités d'édition).

Une préférence éditée.

6.17 Ligne de commande xiss-sow

Cette section décrit la façon d'exécuter le processus de semage (d'initialisation) en ligne de commande. Pour en savoir plus sur ce processus allez ici.

Cette commande de semage doit être exécutée dans le répertoire racine de votre projet diaporama. C'est le répertoire qui contient un répertoire src qui contient une hiérarchie de répertoires avec des images. La commande est la suivante :

xiss-sow [-version | -legal | -reverse | -repository | -usage] [-select directories]

L'argument -reverse définie le mode inversion. Ce mode est utilisé comme un semage initial à partir d'un diaporama existant en pages HTML. Pour les semages suivants la commande xiss-sow doit être exécutée sans l'argument.

L'argument -repository indique une importation d'images originales depuis un espace de stockage. Les images sont réduites si elles sont plus grande qu'une taille maximale spécifiée dans le fichier xissweb.properties. Dans ce fichier doit se trouver le chemin vers le répertoire de l'espace de stockage. Une autre exécution du semage avec cet argument est nécessaire si des changements effectués ont besoin d'être importés. Le paramètre import.image dans le fichier xissweb.properties indique si les images sont importées pendant le semage (valeur true) ou pendant le processus de construction (valeur false).

L'argument -version affiche de la version de Xiss web utilisé.

L'argument -legal affiche de la mention légale de copyright.

L'argument -usage affiche les arguments de la commande et leur utilisation.

L'argument -select peut être utilisé pour sélectionner des répertoires à traiter au lieu de traiter le projet dans son ensemble. Les répertoires sont listés à la suite de l'argument. Ils sont séparés par une virgule sans aucun espace. Les répertoires traités sont ceux donnés ainsi que leurs sous-répertoires.

Le semage produit les traces suivantes (sans -reverse ou -repository) :

Semage en cours...
src
   mode......
   sport
         gymnastique....
         handball....
Semage rÚalisÚ en 00:01.188
   5  rÚpertoires parcourus
   0  diaporamas mis Ó jour sur 0 existants
   3  diaporamas crÚÚs
   14  images trouvÚes

Chaque répertoire visité est affiché. Pour un répertoire un point est affiché pour chaque image trouvée. Avec l'argument -repository un 'o' est affiché pour chaque réduction d'image (mode importation). Après le processus de visite des répertoires, des statistiques sont affichées.

La commande utilise le fichier xissweb.properties locale s'il existe ou le fichier par défaut dans le répertoire %XISSWEB_HOME%\rsrc. Ce fichier contient tous les paramètres pour la commande, y compris ceux pour l'inversion.

6.18 Ligne de commande xiss-build

Cette section décrit la façon d'exécuter le processus de construction en ligne de commande. Pour en savoir plus sur ce processus allez ici.

La commande doit être exécutée dans le répertoire racine de votre projet diaporama après au moins une exécution du processu de semage. La commande est la suivante :

xiss-build [-version | -legal | -select répertoires | -usage]

L'argument -select peut être utilisé pour sélectionner des répertoires à traiter au lieu de traiter le projet dans son ensemble. Les répertoires sont listés à la suite de l'argument. Ils sont séparés par une virgule sans aucun espace. Les répertoires traités sont ceux donnés ainsi que leurs sous-répertoires.

L'argument -version permet l'affichage de la version de Xiss web utilisé.

L'argument -legal permet l'affichage de la mention légale de copyright.

L'argument -usage affiche les arguments de la commande et leur utilisation.

La commande de génération produit les traces ci-dessous :

Construction en cours...
s(xissweb)src
   mode =+=+=+=+=+=+i......
   sport
         gymnastique =+=+=+=+i....
         handball =+=+=+=+i....
i
Construction rÚalisÚ en 00:06.219
   5 rÚpertoires visitÚs
   1 habillages (skin) copiÚes
   14 imagettes crÚÚes
   3 fichiers contenu mis Ó jour
   4 pages d'index crÚÚes
   14 pages d'image crÚÚes

Chaque répertoire visité est affiché avec des caractères : un '=' correspond à la copie d'une image ; un '+' correspond à la création d'une vignette ; un '.' correspond à la génération d'une page HTML ; et 'i' à la création d'un index local. La trace du type 's(xissweb)' correspond à la copie d'un habillage (skin) dans l'espace de destination et le texte entre parenthèses est le nom de l'habillage. Le 'i' à la fin de la visite des répertoires correspond à la création d'une page d'index de plu haut niveau (index global). A la suite du parcours des répertoires des statiques sont affichées.

6.19 Commande xiss-web

La commande doit être exécuté dans le répertoire racine d'un projet diaporama. La commande est la suivante :

xiss-web [-reverse]

Cette commande enchaîne les deux commandes xiss-sow et xiss-build . L'argument -reverse est celui pour la commande de semage (sow). Il s'agit d'un raccourcis pour effectuer une enchaînement de semage (sow) et de génération (build).

7 Manuel de référence

7.1 Fichier contenu de diaporama slideshow.xml

Cette partie décrit le langage XML de description de contenu d'un diaporama qui définit la structures des fichiers slideshow.xml. Une grammaire W3C XML Schema slideshow-content.xsd pour ces fichiers de contenu de diaporama est disponible dans le répertoire %XISSWEB_HOME%\rsrc\xml. Un fichier de contenu de diaporama liste les images et les informations relatives au diaporama.

Ci-après ce trouve un exemple du contenu d'un fichier slideshow.xml tel qu'il est généré par un processus de semage. Il est aussi mis à jour par un processus de construction ajoutant les informations des vignettes et d'images principales si elles ont changées :

<?xml version="1.0" encoding="ISO-8859-1"?>
<slideshow-content name="sample">
    <info description="" title=""/>
    <images images="." thumbnails="thumbnails">
        <section title="">
            <image comment="Film picture / Photo argentique" filename="anna005-02" number="1">
                <meta-data aperture="f5,6" date="-" exposure-time="1/125 sec" film="Kodakchrome" flash="no" focal-length="70 mm" iso="ISO 400" maker="Minolta" model="XGM" type="film"/>
                <main-image extention="jpg" height="396" width="607"/>
                <thumbnail extention="jpeg" height="45" width="70"/>
            </image>
            <image filename="MaroccoMarrakechKoutoubia" number="2">
                <htmlComment>Koutoubia, Marrakech, <a href="http://e.collain.free.fr/voyage/maroc">
                        <strong>Marocco</strong>
                    </a>.</htmlComment>
                <meta-data aperture="F7,1" date="2006/03/13 10:32:00" exposure-time="1/320 sec" flash="no" focal-length="8,462 mm" latitude="N 31 37 35.40001" longitude="W 7 59 43.200073" maker="Canon" model="Canon DIGITAL IXUS 40" shutter-speed="1/317 sec" type="digital" white-balance="Auto white balance"/>
                <main-image extention="jpg" height="375" width="500"/>
                <thumbnail extention="jpeg" height="60" width="60"/>
            </image>
           (...)
        </section>
    </images>
</slideshow-content>

Le contenu de la description d'un diaporama peut être édité avec l'éditeur de texte de l'IHM de Xiss web. Les éléments qui peuvent être édités sont : les attributs de info, les liens, les sections, les commentaires des images, et les métadonnées.

7.1.1 Title

Les attributs titre et dscription de l'élément <info> peuvent être édités. Ces informations sont utilisées pour afficher un titre (voir décoration de page). L'attribut description peut être remplacé par le sous-élémént <htmlDescription> de <info>. <htmlDescription> peut contenir un texte avec des éléments HTML. Dans ce cas les éléments HTML doivent respecter la syntaxe XML (chaque élément doit être fermé).

INFO:

Depuis la version 1.0 dans l'élément <info> l'attribut title remplace l'attribut mode, et l'attribut description remplace l'attribut title. Les anciens attributs sont obsolètes (mais compatible). Ils sont remplacés par les nouveaux à l'ouverture d'un fichier de contenu pour édition ou par le processus de semage.

7.1.2 Image

La description d'une image correspond aux éléments entre <image> et </image>. L'élément ouvrant <image> contient le nom de l'image, son numéro et un commentaire. Le commentaire est un l'attribut texte comment ou le sous-élément <htmlComment> de <image> qui peut contenir un texte avec des éléments HTML. Dans ce cas les éléments HTML doivent respecter la syntaxe XML (chaque élément doit être fermé).

Un sous élément optionnel <meta-data> décrit les métadonnées de l'image. Les métadonnées d'une image dépende de son type qui est indiqué dans l'attribut type. Les types d'image et les autres attributs possibles en fonction du type sont :

Les métadonnées pour le type numérique sont extraites de l'imagepar le processus de semage. Les autres types sont créées manuellement. Si aucune métadonnée existe, l'élément <meta-data peut être omis.

Les deux éléments qui suivent (<main-image> et <thumbnail>) décrivent la taille respectivement de l'image principale et de sa vignette. L'élément <thumbnail> est créé pendant le premier processus de construction du diaporama. Si les images viennent d'un espace de stockage, l'élément <original-image> supplémentaire décrit l'image originale.

Vous pouvez changer le texte du commentaire de chaque image (le texte par défaut est "Think to change this comment!" ou le texte par défaut dans le fichier xissweb.properties).

7.1.3 Section

Les éléments de description des images sont organisés en sections. Une section commence par <section> et finit par </section>. Une section peut avoir un titre comme : <section title="Part 2">. Alors le titre est affiché avec les vignettes. La manipulation des sections est une fonctionnalité détaillée ici.

7.1.4 Link

dans le fichier de contenu de diaporama il est possible de préciser des liens avec un diaporama précédent et un diaporama suivant. Cela correspond aux éléments <next-show> et <previous-show> inséré entre les éléments <info> et <images>. Le lien effectif est renseigné dans l'attribut href par le chemin relatif vers le répertoire d'un diaporama. (Pour plus de détails allez voir la fonctionnalité liens entre diaporama.) L'exemple suivant montre un seul lien vers un diaporama suivant :

(...)
<info description="sport gymnastique" title="Sport > Gym"/>
<next-show href="../handball" text="Hand"/>
<images images="." thumbnails="thumbnails">;
(...)

7.2 Fichier agencement layout.xml

Cette partie décrit le langage XML qui définit la structure des fichiers layout.xml. Une grammaire W3C XML Schema slideshow-layout.xsd qui définit cette structure est disponible dans le répertoire %XISSWEB_HOME%\rsrc\xml. Un agencement (layout) décrit l'organisation des constituants d'un diaporama affichés dans une page HTML. Des agencements (layouts) prédéfinis sont disponibles dans le répertoire %XISSWEB_HOME%\rsrc\layouts. Depuis ce répertoire un sous-répertoire contient un fichier layout.xml. Pour utiliser un de ces fichiers vous pouvez indiquer le nom de son répertoire dans un fichier xissweb.properties.

L'agencement par défaut est le suivant :

<?xml version="1.0" encoding="UTF-8"?>
<slideshow-layout comment="default layout: 4 columns of thumbnails, 2 on left side and 2 on right side" page-width="980">
	<thumbnails-info size="70" unit="px" shape="rectangle" quality="high"/>
	<header>
		<div>
			<link-to-home/>
			<br/>
			<title/>
		</div>
	</header>
	<arrangement orientation="vertical" width="980">
		<navigation-bar  type="circular">
			<previous/>
			<backward/>
			<init/>
			<forward/>
			<next/>
		</navigation-bar>
		<arrangement orientation="horizontal">
			<thumbnails range="2"/>
			<image-area width="650" height="650">
				<comment position="bottom" number-format="(@#/%+)"/>
			</image-area>
			<thumbnails range="2"/>
		</arrangement>
	</arrangement>
</slideshow-layout>

Un fichier d'agencement peut être ajouté dans un répertoire. L'agencement est appliqué au répertoire et à ces sous-répertoires si aucun autre agencement ne s'y trouve. Ajouter un nouveau fichier d'agencement peut être fait par les actions de couper/copier/coller ou par copie d'un des trois fichiers d'agencement par défaut (1row, 1column, default). Il est possible d'éditer un agencement avec l'éditeur de texte de l'IHM de Xiss web. Pour plus de détails sur l'édition voir la section Capacités d'édition.

Un agencement (layout) définit l'habillage (skin) à utiliser (optionnel), les informations de vignettes, l'organisation relative des composants affichables et des décorations.

7.2.1 Habillage

L'élément skin identifie l'habillage associé avec l'agencement. Cet élément est optionnel. S'il il est absent, un habillage par défaut est utilisée ou celle indiquée dans le fichier xissweb.properties. Un attribut optionnel path indique le chemin où se trouve l'habillage. Ce chemin peut être un chemin relatif par rapport au répertoire d'installation de Xiss web ou au projet diaporama, ou un chemin absolu. L'attribut chemin remplace pour un agencement particulier le chemin des habillages défini dans les propriétés d'un projet. Pour plus de précisions sur les habillages (skins) allez voir la partie gestion de l'apparence et éditeur d'habillage.

7.2.2 Animation

Après l'élément skin s'il il exists, l'élément optionnel animation indique si les transitions pendant la navigation d'un diaporama sont animées ou non.

L'élément animation possède les 4 attributs suivants :

7.2.3 Vignettes

Les vignettes sont définies par les informations dans les attributs de l'élément thumbnails-info :

7.2.4 Décoration

Les éléments définissant les décorations d'une page doivent se trouver entre l'élément thumbnails-info et le premier élément arrangement. Sur l'exemple précédent du fichier layout.xml un élément header est présent. IL contient des éléments spécifiques de Xiss web et des éléments HTML. Pour plus de détails allez voir la fonctionnalité décoration des pages.

7.2.5 Arrangement

Un arrangement se définit par l'élément arrangement. Il indique comment les composants contenus sont affichés par la valeur de son attribut orientation :

L'agencement (layout) par défaut utilisé comme exemple ici, produit le résultat suivant :

            ------------------------------------------------
            |             header, en-tête                  |
            ------------------------------------------------
            ----arrangement-vertical------------------------
            | -------------------------------------------- |
            | |   navigation bar, barre de navigation    | |
            | -------------------------------------------- |
            | --arrangement-horizontal-------------------- |
            | | -----  --------------------------  ----- | |
            | | | v |  |                        |  | v | | |
            | | | i |  |                        |  | i | | |
            | | | g |  |                        |  | g | | |
            | | | n |  |                        |  | n | | |
            | | | e |  |       image area       |  | e | | |
            | | | t |  |    zone de l'image     |  | t | | |
            | | | t |  |                        |  | t | | |
            | | | e |  |                        |  | e | | |
            | | | s |  |                        |  | s | | |
            | | |   |  |                        |  |   | | |
            | | -----  --------------------------  ----- | |
            | -------------------------------------------- |
            -----------------------------------------------

Les composants qui peuvent être dans un arrangement sont : barre de navigation, conteneur de vignettes, zone d'image et un autre arrangement. Un arrangement inclus doit avoir une orientation différente. Sinon, l'arrangement inclus n'est pas nécessaire. Dans l'exemple ci-dessus, l'arrangement inclus est utilisé pour organiser les vignettes et la zone d'image horizontalement à l'intérieur d'un arrangement vertical.

7.2.6 Barre de navigation

L'élément navigation-bar décrit les parties voulues pour la navigation dans le diaporama. Chaque partie correspond à un sous élément. Ces éléments sont :

Un attribut type dans l'élément navigation-bar indique le comportement de la barre de navigation (voir la fonctionnalité type de navigation). Cinq types sont possibles :

7.2.7 Conteneur de vignettes

L'élément thumbnails définit un conteneur affichant les vignettes. Si plusieurs conteneurs sont utilisés les vignettes sont également réparties parmi eux. Dans un arrangement vertical les vignettes sont rangées par lignes et dans un arrangement horizontal elles sont rangées par colonnes. L'attribut range indique le nombre de lignes ou de colonnes par conteneur suivant le cas.

7.2.8 Zone image

L'élément image-area définit l'affichage de chaque image principale. Un attribut width (largeur) et un attribut height (hauteur) indique la taille de cette zone. Dans cette zone est affichée l'image principale avec un commentaire et éventuellement les métadonnées de l'image. Les images y sont centrées verticalement et horizontalement. La zone d'image est aussi utilisée pour afficher les index de diaporama. Les sous-éléments possibles à l'élément image-area, sont, dans l'ordre suivant :

7.2.9 Index local

Deux types d'index local sont existent (voir la section index local paramétrable). Chaque type d'index local est représenté par un élément spécifique :

Les deux éléments d'index local ont deux attributs communs : width et height qui définissent la zone d'index local dans la zone de l'image principale.

7.2.10 métadonnées

Un sous élément de celui de la zone image décrit quelles métadonnées à afficher et leur position. Cet élément est meta-data. Son attribue position donne la position d'affichages des métadonnées par rapport à l'image principale : en haut (top) ou en bas (bottom). Si le commentaire de l'image a la même position, les métadonnées sont toujours affichées après le commentaire. Chaque élément suivant correspond à l'affichage d'une métadonnée si elle existe dans le fichier de contenu de diaporama :

Les sous éléments à él'ément meta-data-film indiquent les métadonnées à afficher pour les images argentiques. Ces sous éléments sont :

Et les sous éléments à l'élément meta-data-processing indiquent les métadonnées à afficher pour les images création numérique. Ces sous éléments sont :

Seul l'élément meta-data indique la position pour tous les types de métadonnées. Si seules les images argentiques sont affichées avec des métadonnées, alors l'élément meta-data doit être présent pour indiquer la position des métadonnées des images argentiques.

7.3 Habillage, styles CSS

Cette section décrit les styles CSS qui peuvent être utilisés pour définir un habillage. Les styles sont organisés en trois fichiers :

L'organisation des styles en fichier est faite de façon à faciliter l'identification des éléments sur lesquels portent les styles et la définition de nouveaux habillages en gardant certain style générique. C'est notamment le cas avec le fichier layout.css dont une définition partageable existe dans le répertoire skins/common.

La suite décrit les éléments HTML sur lesquels peuvent être associé des styles CSS.

7.3.1 Page

Les éléments de haut niveau d'une page HTLM de diaporama correspondent à :

<body>
    <div id="page">
       (...)
    <div>
<body>

Les styles CSS du fichier "page" est dédié à la définition des éléments ci-dessus. Ce fichier peut aussi contenir tous styles dont vous avez besoin. comme h1. Par exemple si vous ajouter des éléments HTML dans des décorations de pages comme l'en-tête et le pied de page. Il peut contenir la définition de styles pour une apparence par défaut pour des éléments utiles comme les liens (a, a:hover).

WARNING:

Si une largeur de page est spécifiée dans un agencement alors, cette information est ajoutée dans l'élément HTML <div id="page">, par exemple : <div id="page" style="width: 900px">.

7.3.2 Agencement

Le fichier CSS "layout" regroupe les styles pour le contenu de page les décorations et les arrangements. Le contenu de page et les décorations s'organisent comme suit :

<body>
    <div id="page">
        <div id="header">
            (...)
        </div>
        <div id="content">
            <!-- contenu -->
        </div>
        <div id="footer">
            (...)
        </div>
    <div>
<body>

Si une marge gauche et/ou une marge droite sont spécifié dans un agencement, alors le contenu est :

<body>
    <div id="page">
        <div id="header">
            (...)
        </div>
        <div id="content">
            <div id="left-margin">
                (...)
            </div>
            <div id="content-with-margin">
                <!-- contenu -->
            </div>
            <div id="right-margin">
                (...)
            </div>
        </div>
    <div>
<body>

Le fichier CSS "layout" définit aussi les styles pour les arrangements horizontaux et verticaux. Chaque composant (conteneur de vignettes, zone image, ...) dans un arrangement est contenu dans un élément div du type de l'arrangement. Par exemple, un arrangement horizontal avec deux composants, chacun d'eux dans un div avec le style horizontal est présenté ci-dessous. Pour un arrangement vertical la classe du style CSS est vertical. Un composant peut être un arrangement.

<div class="horizontal">
    <!-- composant 1 -->
<div>
<div class="horizontal">
    <!-- composant 2 -->
<div>

7.3.3 Composant

Les composants sont les éléments constituants directement les diaporamas : vignettes, barre de navigation, zone de l'image principale. Les composant comprennent aussi les définitions des styles pour : les indexes locaux, les liens vers une page d'accueil, le texte d'un copyright.

Vignettes

Trois classes CSS défionissent les styles de vignettes : une pour une ligne de vignettes, une pour les liens d'image principale associés aux vignettes, et une pour la vignette correspondant à l'image courante affichée. L'exemple ci-dessous présente les trois styles. Cet exemple montre deux lignes de vignettes contenant chacune une seule vignettes, mais chaque ligne peut en contenir plus (dans un arrangement vertical ou dans un arrangement horizontal avec les rangés > 1, voir les conteneurs de vignettes dans agencements).

<div class="thumbnailsRow">
    <a class="thumbnailLink" title="2. Moret sur Loing, France." href="FranceMoretSurLoing.html">
        <img src="thumbnails/FranceMoretSurLoing.jpeg" title="2" height="46" width="70" style="margin: 13px 1px;"/>
    </a>
</div>
<div class="thumbnailsRow">
    <img class="currentThumbnail" src="thumbnails/EquadorCotopaxi.jpeg" title="3" height="46" width="70" style="margin: 13px 1px;"/>
</div>
Barre de navigation

La barre de navigation est composée de trois éléments div, chacun d'eux avec des styles dédiés : 'h-previous' ou 'v-previous' pour un lien de diaporama précédant, 'h-next' ou 'v-next' pour un lien de diaporama suivant, et 'h-nav-bar' ou 'v-nav-bar' comme conteneur des liens en avant, en arrière et init. Les préfixes 'h' et 'v' correspondent respectivement à un horizontal et un vertical alignement des constituants de la barre de navigation. Les constituants de la barre sont alignés horizontalement quand la barre est dans un arrangement horizontal, et ils sont alignés verticalement quand la barre est dans un arrangement vertical.

<div class="h-previous">< <a href="../gymnastique/GYM-004.html" title="Aller au diaporama précédant">slideshow p</a></div>
<div class="h-next"><a href="../gymnastique/GYM-001.html" title="Aller au diaporama suivant">slideshow n</a> ></div>
<div class="h-navbar-div">
    <ul class="h-nav-bar">
        <li>
            <a class="backward" href="NepalSwayambhunath.html" title="Aller en arrière"><span> < </span></a>
        </li>
        <li>
            <a href="./index.html" class="init" title="Retourner à la première page du diaporama"><span> o </span></a>
        </li>
        <li>
            <a class="forward" href="FranceMoretSurLoing.html" title="Aller en avant"><span> > </span></a>
        </li>
    </ul>
</div>

Les liens en avant, en arrière et init sont des items d'une liste comme montré ci-dessus. La liste et les liens on une classe CSS correspondante. Seule la liste possède deux classes pour les deux types d'alignement (horizontal et vertical).

Zone image principale

Les éléments HTML de la zone d'image principale sont les suivants :

<div style="width: 640px; height: 540px;" id="image-container">
    <div style="padding-top: 85px;">
        <div class="top-comment" id="image-comment">
            <div><span class="image-num">1/4</span>Cotopaxi (5897 m), Equador.</div>
        </div>
        <img height="330" width="500" class="mainImage" src="./EquadorCotopaxi.jpg" title="EquadorCotopaxi"/>
        <div class="bottom-metadata" id="metaData">
            <div>[ 2009:05:23 22:17:47 ]</div>
        </div>
    </div>
</div>

La zone de l'image principale est organisée pour afficher une grande image avec un commentaire et éventuellement les métadonnées de l'image. La zone correspond à un élément div avec l'id 'image-container'. L'élément fils direct div est là pour centrer l'image verticalement.

Dans ces deux éléments div, il y a les trois composants de la zone d'image principale : un élément div 'top-comment' ou 'bottom-comment' pour le conteneur du commentaire de l'image, un élément img 'mainImage' pour l'image rincipale elle-même, et un élément div 'top-metadata' ou 'bottom-metadata' pour le conteneur des métadonnées de l'image. Les deux préfix 'top' et 'bottom' indiquent la position relative du commentaire et des métadonnées avec l'image. Cela permet d'avoir des styles différent en fonction de la position d'affichage du commentaire et des métadonnées. La classe 'image-num' définit le style du numéro de l'image dans le conteneur de son commentaire.

deux éléments div 'map' et 'map-action' peuvent être présent en association avec l'image principale si l'option afficher la positon de l'image a été choisie dans l'agencement.

<div style="z-index:65555; width:200px; height:100px; position:absolute; top:0; left:0; display:none; background:white;" class="" id="map">
    <!-- area for maps -->
</div>
<div style="z-index:65557; position:absolute; top:0; left:0; display:block" id="map-action">
    <a id="open" href="#" title="Montrer/cahcher l'emplacement de l'image sur une carte."><span>Carte</span></a>
</div>

L'élément 'map' est aussi utiliser dans une page d'index local utilisant Google Maps. Il n'est pas nécessaire de définir un style pour cet élément, car son contenu complet (sauf les bordures) est utilisé par Google Maps pour y afficher les cartes.

Des styles pour les éléments 'map-action' et 'open' peuvent être définis. Le positionnement de l'élément 'map-action' est calculé pour correspondre au coin bas-droit de l'image principale.

Index local

Les éléments HTML pour les index locaux sont contenus dans la zone d'image principale pour prendre la place de l'image principale. Trois types d'index local existent : défaut, standard et Google Maps.

L'index défaut est construit comme suit. Il correspond à un élément div 'default-index' contenant un paragraphe 'explanation'. Des styles CSS peuvent être définis pour 'default-index' et la classe 'explanation'.

<div style="width: 640px; height: 540px;" id="image-container">
    <div id="default-index">
        <p class="explanation">Cliquez sur les images ou utilisez les flèches pour passer d'une image à l'autre.
            <br />
            <br />
            <br />
            <a href="anna005-02.html">Cliquez ici pour démarrer.</a>
        </p>
    </div>
</div>

L'index standard est un élément div 'standard-index'. Un style peut être associé à cet élément. Sa position est calculée pour être aligné verticalement avec la hauteur et largeur spécifiées dans un agencement. L'index standard permet l'affichage ou non d'une description du diaporama et de l'explication. L'explication est la même que dans le cas de l'index défaut.

<div style="width: 640px; height: 540px;" id="image-container">
    <div style="position:relative; width:550px; height:450px; top:45px; left:45px" id="standard-index">
        <div class="description">
           (...)
        </div>
        <p class="explanation">
           (...)
        </p>
    </div>
</div>

L'index Google Maps correspond à deux éléments div : 'map-index' pour le conteneur principal de l'index et 'map' pour l'affichage des cartes par Google Maps. Comme pour l'index standard, 'map-index' peut avoir un style CSS. L'élément 'map' est celui décrit dans la zone d'image principale. Ici il a juste une taille fixe définie dans un agencement.

<div style="width: 640px; height: 540px;" id="image-container">
    <div style="position: relative; top:45px; left:95px; width:450px; height:450px;" id="map-index">
        <div style="width:450px; height:450px;" id="map">
            <!-- area for maps -->
        </div>
    </div>
</div>
Animation

Un composant est ajouté dynamiquement quand un diaporama utilise une animation. Ce composant est un écran d'attente affiché seulement pendant le chargement d'une image. Il correspondent à :

<div id="load" style="...."></div>

L'attribut style est modifié dynamiquement pour adapter l'écran d'attente en positon et taille à la zone d'image ou de la page complète. L'élément de style à est essentiellement son arrière plan incluant par exemple une image animée.

Contrôle d'animation

Des éléments sont dynamiquement insérés avant la zone de l'image principale lorsque l'option contrôle de l'animation a été choisie. Les éléments de plus haut niveau sont trois div comme suit :

<div id="ctrl-wrapper">
    <div id="ctrl-action"><a style="cursor: pointer;" onclick="XWtoggleControlPanel()"><span>[+]</span></a></div>
    <div style="display: block;" id="ctrl-panel">
		...
    </div>
</div>

Des styles peuvent être définis pour les div ci-dessus, comprenant aussi les éléments dans l'élément ctrl-action. L'élément ctrl-action permet de montrer et cacher l'élément crtl-panel qui contient les paramètres à modifier.

Les trois paramètres à contrôler sont représentés par trois listes dans l'élément ctrl-panel (voir ci-après). Pour chaque liste, le premier item est le nom du paramètre et les items suivants sont les valeurs ou actions pour changer de valeur. Quand une valeur est choisie, les éléments changent dynamiquement pour prendre en compte cette nouvelle valeur courante. Pour l'affichage de commentaire et de métadonnées (listes comment-disp et mdata-disp) la valeur courante est directement dans un élément span et les autres valeurs possibles un élément a vient l'englober. Pour le paramètre vitesse d'animation, deux actions sont possibles pour augmenter ou diminuer (items increase and decrease) la valeur de la vitesse (item anim-speed-value). Pour tous ces éléments des styles CSS peuvent être définis.

<div style="display: block;" id="ctrl-panel">
    <ul id="comment-disp">
        <li class="title">Comment:</li>
        <li id="disp-cmt-bottom"><a style="cursor: pointer;" onclick="XWchangeCommentDisp()"><span>bottom</span></a></li>
        <li id="disp-cmt-top" class="current-elt"><span>top</span></li>
    </ul>
    <ul id="mdata-disp">
        <li class="title">Meta data:</li>
        <li id="disp-mdata-none" class="current-elt"><span>none</span></li>
        <li id="disp-mdata-bottom"><a style="cursor: pointer;" onclick="XWchangeMetaDataDisp('bottom')"><span>bottom</span></a></li>
        <li id="disp-mdata-top"><a style="cursor: pointer;" onclick="XWchangeMetaDataDisp('top')"><span>top</span></a></li>
    </ul>
    <ul id="anim-speed"><li class="title">Animation speed:</li>
        <li id="decrease"><a style="cursor: pointer;" onclick="XWdecreaseSpeed()"><span>-</span></a></li>
        <li id="anim-speed-value" class="medium"><span>medium</span></li>
        <li id="increase"><a style="cursor: pointer;" onclick="XWincreaseSpeed()"><span>+</span></a></li>
    </ul>
</div>
Diaporama automatique

Les éléments HTML définissant le contrôle automatique de diaporama sont ajoutés dynamiquement si l'option correspondante est choisie (voir la section animation. Ces éléments sont insérés entre le contrôle d'animation et la zone d'image principale. Ils correspondent à une action de jouer/pauser et, deux action incrémenter et décrémenter, comme présenté ci-dessous :

<div id="play-ctrl">
    <ul>
        <li id="play-pause">
            <a id="play-action" onclick="XWplayPause()" style="cursor: pointer"><span>Jouer</span></a>
            <a id="pause-action" onclick="XWplayPause()" style="cursor: pointer"><span>Pause</span></a>
        </li>
        <li id="display-time">
            <a id="display-time-decr" onclick="XWdecrImageDisplayTime()" style="cursor: pointer"><span>-</span></a>
            <span id="display-time-value">3s.</span>
            <a id="display-time-incr" onclick="XWincrImageDisplayTime()" style="cursor: pointer"><span>+</span></a>
        </li>
    </ul>
</div>

Un style CSS peut être définit pour chaque élément HTML ci-dessus. Les éléments play-action et pause-action sont montrés et cachés alternativement en fonction de l'état du diaporama. Si le diaporama est en cours, alors seul pause-action est visible, et si le diaporama n'est pas en cours, alors seul play-action est visible.

Autres composants

Deux autres composants existent : lien vers une page d'accueil et un copyright. Ces deux composants peuvent être utilisés dans les décorations de page. Ils correspondent à :

<a title="Index" class="home" href="../index.html"><span>Index</span></a>

<div class="copyright">Copyright © 2004-2010 Xiss web</div>

Des styles CSS peuvent être définis pour les deux classes home' et 'copyright'.

7.4 Fichier d'habillage simple skin.xml

Il existe un fichier XML pour définir un habillage simple. Ces fichiers peuvent être associés à un projet de diaporamas (voir l'éditeur d'habillage). Ci-après est présenté l'habillage par défaut skin.xml comme un exemple de fichier d'habillage.

<?xml version="1.0" encoding="UTF-8"?>
<skin name="simple-green">
    <colors>
        <body-background b="107" g="107" r="107"/>
        <page-background b="210" g="210" r="210"/>
        <foreground b="0" g="1" r="0"/>
        <link-foreground b="125" g="125" r="125"/>
        <link-hover b="180" g="180" r="180"/>
        <disabled-foreground b="153" g="153" r="153"/>
    </colors>
    <page center="yes">
        <font name="Arial,sans-serif" size="100" style="normal" unit="%" weight="normal"/>
        <link>
            <normal line="dashed" thin="1"/>
            <hover line="solid" thin="1"/>
        </link>
    </page>
    <component>
        <image-area margin="1">
            <color b="190" g="190" r="190"/>
            <background b="255" g="255" r="255"/>
            <font name=""Times New Roman",serif" size="105" style="italic" unit="%" weight="normal"/>
            <meta-data name="Arial,sans-serif" size="80" style="normal" unit="%" weight="normal"/>
            <border line="solid" thin="2"/>
            <local-index>
                <border-color b="153" g="153" r="153"/>
                <background b="107" g="107" r="107"/>
            </local-index>
            <animation background="white" icon-style="default" opacity="0.5"/>
        </image-area>
        <thumbnail>
            <link>
                <normal line="solid" thin="0"/>
                <hover line="solid" thin="3"/>
            </link>
            <current line="solid" thin="3"/>
        </thumbnail>
        <copyright>
            <font name="Times,serif" size="80" style="italic" unit="%" weight="normal"/>
        </copyright>
    </component>
</skin>

Un habillage simple est composé de trois parties : une partie des couleurs définissant les couleurs globales ; une partie page qui définit les styles principaux ; et une partie composant qui définit les styles des éléments que l'on trouve dans un agencement.

7.4.1 Couleurs

Les couleurs (<colors>) globales sont :

7.4.2 Page

L'élément <page> définit les styles globaux. L'attribut center permet de préciser si la page est centrée ou non. Le sous élément <font> définit le style de texte (police, taille, ...). La partie <link> définit le type de soulignage des liens et liens survolés.

7.4.3 Composants

L'élément <component> est réservé aux trois composants qui ont des rendus visuels dans les pages HTML :

8 Les exemples

Cette section présente les exemples disponible avec Xiss web (livré dans un paquetage dédié). C'est une présentation courte sur chaque exemple avec sont objectif les actions que vous avez à mener pour en tirer bénéfice. Les exemples sont faits pour vous aider à mieux maîtriser les fonctionnalités de Xiss web.

Les exemples sont des projets Xiss web. Ils peuvent donc être utilisés avec l'IHM de Xiss web. Il est aussi utile pour chaque projet de naviguer parmi ses répertoires avec un explorateur de fichiers pour découvrir l'organisation des images et fichiers le constituant.

La section Utiliser les exemples détaille les deux premiers exemples.

8.1 projet1-sport-mode

Il s'agit d'un projet simple pour une première utilisation de Xiss web et apprendre les deux processus de base de Xiss web : semage et construction.

Cet exemple illustre une façon simple de créer des diaporamas en utilisant le paramétrage par défaut (sans aucune adaptation).

Voir aussi la section Utiliser les exemples.

8.2 projet2-sport-mode

Ce second exemple est aussi un projet pour une première utilisation de Xiss web. Il utilise les mêmes photos organisées dans les mêmes diaporamas que le premier exemple.

Cet exemple illustre la capacité de Xiss web de paramétrer les diaporamas pour : prendre en compte la façon dont les images sont stockées dans les répertoires de diaporama, changer l'apparence par défaut, choisir le type de navigation and, utiliser la fonctionnalité d'animation.

Voir aussi la section Utiliser les exemples.

Cet exemple illustre la fonctionnalité de liens. Cette fonctionnalité est la possibilité de relier les diaporamas ensemble et permettre une navigation entre eux.

Le projet de cet exemple contient deux diaporamas. Un processus de semage est déjà effectué et les diaporamas sont liés entre eux. Pour voir le résultat vous avez juste à construire les diaporamas et les afficher dans un navigateur web.

Pour cette exemple il est recommandé de : consulter les fichiers de contenu des diaporamas, modifier les liens, changer le type de navigation dans le fichier d'agencement, construire de nouveau les diaporamas pour voir les changements.

INFO:

Cet exemple utilise le type navigation links pour permettre une navigation entre diaporamas.

8.4 features/metadata

Le sujet principale de cet exemple est de montrer la capacité de Xiss web a extraitre des métadonnées d'images et comment ces informations peuvent être utilisées dans des diaporamas. Cet exemple utilise en plus la fonctionnalité d'animation dans un de ses diaporamas.

Le projet correspondant à cet exemple contient deux diaporamas : un appelé sample et l'autre gsp. Le premier est plus dédier à l'extraction de métadonnées : les métadonnées extractibles dépendent de l'origine de l'image (appareil photo numérique ou non) et d'un éventuel enrichissement par un logiciel. Son agencement associé définit une animation et un diaporama automatique. Le second est plus dédié à l'utilisation de métadonnées GPS dans un diaporama.

Si vous ouvrez ce projet exemple, vous pouvez voir un agencement (layout) pour chaque diaporama. Les agencements sont expliqués plus loin. La première action est d'initialiser les contenus des diaporamas avec le processus de semage. Ouvrez le contenu du diaporama sample pour consulter les métadonnées extraites.

Maintenant il est possible de générer les diaporamas avec le processus de construction et de voir le résultat. (Une connexion interner est nécessaire pour le diaporama gps.)

Le diaporama gps utilise les métadonnées GPS pour afficher la localisation d'image avec Google Maps : directement pour toutes les images depuis un index local et pour une image depuis son affichage en grand. Dans les deux diaporamas, les autres métadonnées sont affichées avec le commentaire d'image. Toutes ces possibilités peuvent être sélectionnées dans un agencement.

Vous pouvez ouvrir les agencements, changer des paramètres et construire de nouveau les diaporamas pour voir les différences, notamment pour la fonctionnalité animation présente dans le diaporama sample.

8.5 features/page-decoration

Cet exemple montre une utilisation d'éléments de décoration dans un agencement (en-tête, pied de page, marge gauche et droite).

Le projet de cet exemple est déjà initialisé et contient deux diaporamas, chacun avec un agencement. Dans les contenus des diaporamas, les titres et/ou descriptions sont renseignés et ils sont utilisés dans les agencements pour définir les en-têtes.

Pour cet exemple, vous avez à construire le projet pour généré le diaporama et voir le résultat. Vous êtes libre d'éditer à votre tour les titres et description ainsi que les éléments de décoration de page puis à construire à nouveau le diaporama et voir le résultat.

8.6 features/html-comment

L'objet de cet exemple est de montrer la possibilité d'avoir du code HTML dans des descriptions de diaporamas et des commentaires d'images.

Le projet de cet exemple contient un diaporama déjà initialisé. Dans le contenu du diaporama, la description et les commentaires ont été écrits avec le mode HTML pour la prise en compte des éléments HTML à la phase de construction. Les éléments HTML sont aussi pris en compte avec la fonctionnalité d'animation.

Pour cet exemple, vous avez simplement à construire le projet pour généré le diaporama et voir le résultat. Vous êtes libre d'éditer à votre tour les commentaires et de construire à nouveau le diaporama.

INFO:

L'agencement du diaporama définit un index standard local présentant la description du diaporama.

8.7 features/repository

Cet exemple illustre la possibilité d'importer dans un projet des images depuis un espace de stockage.

Le projet de cet exemple comprend simplement un agencement et ses propriétés. Ce projet n'a encore aucune images (ni de répertoire src). Les images sont dans un espace de stockage (dossier image-repository dans le répertoire des exemples). Nous vous suggérons de consulter les propritétés du projet, et tout particulièrement la partie "Espace d'images originales".

Le projet doit être initialisé avec le processus de semage. Après cette étape, les images dans image-repository sont importées et redimensionnées dans le projet comme spécifié dans ses propriétés. Les contenus de diaporama sont aussi créés et peuvent être enrichis de commentaires.

Pour cette exemple ce n'est pas l'objet, mais le processus de construire peut être exécuté pour obtenir les diaporamas prêts à être affichés.

INFO:

La ligne de commande xiss-web avec l'option -repository permet de construire les diaporamas en un coup.

8.8 features/sections

Cet exemple montre l'utilisation de la foncionnalité des sections. Les sections permettent d'organiser les images dans les diaporamas pour le présentation des vignettes.

Le projet de cet exemple contient deux diaporamas, chacun avec une présentation des vignettes différente : un avec une présentation vertical et l'autre avec une présentation horizontal. Les diaporamas sont déjà initialisés et les contenus des diaporamas ont des sections.

Le projet de cet exemple a besoin de l'exécution du processus de construction pour générer les diaporamas. Une fois générés, vous pouvez voir la présentation des vignettes sur ces diaporamas.

Avec cet exemple, vous pouvez utiliser l'éditeur de contenu de diaporama pour déplacer les image d'une section à l'autre, éditer les titres de sections, ajouter ou supprimer des sections, comme vous voulez. Après, construisez de nouveau les diaporamas pour voir le résultat.

8.9 features/personal-pages

Cet exemple montre l'utilisation de pages HTML personnelles dans un projet (voir la section Web ou non). Les pages personnelles peuvent nécessiter des ressources : images, CSS, etc. Ces pages peuvent être n'importe où dans la hiérarchie des répertoires des diaporamas dans src. Cet exemple utilise des pages d'index personnelles : un index global et deux index locaux.

Le projet de cet exemple contient deux diaporamas, chacun avec un agencement, et trois pages index.html. Les pages d'index ont besoin de ressources qui sont des images (dans le dossier images.

Ouvrez le projet features/personal-pages. Le dossier image est présent mais il n'est pas reconnu comme étant un diaporama, comme c'est précisé dans les propriétés du projet (dans la section 'Répertoire et image'). Il est recommandé de montrer tous les autres fichiers (filtre dans le menu contextuel de la racine de la vue arborescente des fichiers). Vous pouvez maintenant générer les diaporamas (initialisez et construisez) pour voir le résultat.

INFO:

Les pages d'index personnelles utilisent les feuilles de style CSS de l'habillage du projet. Ainsi l'apparence de ces pages et la même que celles des pages des diaporamas.

8.10 features/reverse

Cet exemple illustre la fonctionnalité d'inversion qui permet de remplir des diaporamas dans un projet depuis des images et des commentaires dans un ensemble de pages HTML (de construire une partie du répertoire src).

Le projet de cet exemple est paramétré pour inverser les diaporamas générés par l'exemple projet1-sport-mode . Avant d'ouvrir l'exemple features/reverse , construisez les diaporamas de projet1-sport-mode. Si ce n'est pas le cas, alors une erreur se produira car l'emplacement à inverser n'existe pas. Avant de construire projet1-sport-mode , il est intéressant d'écrire vos propres commentaires d'images (par exemple dans le diaporama gymnastique) pour les retrouver dans le nouveau projet.

Ouvrir l'exemple features/reverse . Nous vous suggérons de consulter les propriétés du projet, et tout particulièrement la partie "Inversion" et de naviguer depuis l'IHM de Xiss web l'emplacement à inverser. Dans cet emplacement, les dossiers pales seront ignorés par le processus d'inversion.

Initialisez le projet avec l'option 'inverser' sélectionnée et poursuivez avec le processus de construction. Maintenant vous pouvez voir les diaporamas générer et les comparer avec les diaporamas d'origine qui ont été inversés.

INFO:

La ligne de commande xiss-web avec l'option -reverse permet de construire les diaporamas en un coup.