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
- 2 Utiliser les exemples
- 3 Créer votre premier diaporama
- 3.1 Diaporama en 3 étapes
- 3.2 Façon adaptable
- 4 Processus de Xiss web
- 4.1 Introduction
- 4.2 Semage (initialisation)
- 4.3 Construction
- 5 Fonctionnalités avancées
- 5.1 Import d'images originales
- 5.2 Métadonnées
- 5.3 Index local paramétrable
- 5.4 Gestion de l'apparence
- 5.5 Animation
- 5.6 Numérotation des images
- 5.7 Décoration des pages
- 5.8 Liens entre diaporamas
- 5.9 Type de navigation
- 5.10 Sections
- 5.11 Web ou non
- 5.12 Inverseur
- 6 Manuel utilisateur
- 6.1 Présentation de la fenêtre principale de de Xiss web
- 6.2 Nouveau projet
- 6.3 Ouvrir un projet
- 6.4 Initialisation (semage)
- 6.5 Générer les diaporamas (construction)
- 6.6 Afficher les diaporamas générés
- 6.7 Capacités d'édition
- 6.8 Editer les propriétés d'un projet
- 6.9 Editeur contenu de diaporama (
slideshow.xml
) - 6.10 Liens entre diaporamas
- 6.11 Editeur d'agencement (
layout.xml
) - 6.12 Editeur d'habillage (skin) simple
- 6.13 Ouvrir un projet exemple
- 6.14 Aperçu d'image
- 6.15 Résoudre les problèmes
- 6.16 Edition des préférences
- 6.17 Ligne de commande
xiss-sow
- 6.18 Ligne de commande
xiss-build
- 6.19 Commande
xiss-web
- 7 Manuel de référence
- 8 Les exemples
- 8.1
projet1-sport-mode
- 8.2
projet2-sport-mode
- 8.3
features/links
- 8.4
features/metadata
- 8.5
features/page-decoration
- 8.6
features/html-comment
- 8.7
features/repository
- 8.8
features/sections
- 8.9
features/personal-pages
- 8.10
features/reverse
- 8.1
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.
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 :
-
ligne de commande : Dans le répertoire racine d'un exemple (ici
projet1-sport-mode
ouprojet2-sport-mode
) vous avez juste à exécuter la commandexiss-web
. Des traces sont affichées. - IHM : choisissez un exemple dans le menu aide puis le menu Exemples, après l'ouverture du projet correspondant, cliquez successivement sur les boutons lancer le semage... et lancer la construction... .
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 :
-
projet1-sport-mode
:- cet exemple utilise les paramètres par défaut de Xiss web. Ces paramètres sont dans deux fichiers :
xissweb.properties
dans le répertoire%XISSWEB_HOME%\rsrc
etlayout.xml
dans le répertoire%XISSWEB_HOME%\rsrc\layouts\default
; - les images des diaporamas sont directement dans leurs répertoires respectifs ;
- le mode de génération est web.
- cet exemple utilise les paramètres par défaut de Xiss web. Ces paramètres sont dans deux fichiers :
-
projet2-sport-mode
:- cet exemple surcharge les paramètres par défaut : avec une version du fichier
xissweb.properties
dans répertoire racine du projet, et l'utilisation deux agencements différents (dont un avec une animation) dans deux sous-répertoires ; - ce projet définit un nouvel habillage (skin) ;
- les images de chaque diaporama sont dans un sous-répertoire
"photos"
; - le mode de génération est le système de fichier ;
- le mode de navigation pour la partie sport du diaporama est circulaire.
- cet exemple surcharge les paramètres par défaut : avec une version du fichier
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 :
- La commande
xiss-sow
: génère les fichiersslideshow.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. - La commande
xiss-build
: génère les vignettes et les pages HTML dans le répertoirebuild
en respectant l'organisation en répertoires issue desrc
. Les fichiersslideshow.xml
danssrc
sont aussi modifiés pour prendre en compte les informations sur les vignettes.
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é.
- Créez le répertoire racine de votre projet. Dedans, créez un sous-répertoire
src
. - 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 danssrc
. Le répertoiresrc
ne peut pas être un répertoire de diaporama. - 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 commandexiss-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... .
- ligne de commande : commencez par copier le fichier
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.
-
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. -
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 fichierxissweb.properties
de l'étape 1, les paramètresimage.directory.name
etimage.directory.filter
.
A cette étape vous avez à choisir si vos images sont directement dans des répertoires de votre projet (sous le répertoiresrc
) 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. -
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. -
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épertoiresrc
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. -
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.
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.
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 :
- Un pour inspecter une hiérarchie de répertoire à la recherche d'images à être présentées dans des diaporamas. Ce processus est une passe d'initialisation appelée semage.
- Un autre appelé processus de construction pour générer les diaporamas par rapport à des patrons de présentation.
Entre ces deux processus, il est possible :
- d'éditer les informations des diaporamas et des images.
- d'ajouter des éléments de présentation : agencement et habillage.
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 :
- ajout de nouvelles images (dans des diaporamas existants ou de nouveaux diaporamas),
- suppression d'images existantes.
Les actions de modification suivantes ne nécessitent pas un nouveau semage :
-
édition de fichiers
slideshow.xml
(commentaires d'image, sections, liens) ; - ajout de fichiers
layout.xml
; - mise à jour d'images existantes.
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 :
- une vignette dépend de son image principale et d'un agencement (qui contient les propriétés des vignettes);
- une page HTML de diaporama dépend de l'image principale concernée, de la description de diaporama (
slideshow.xml
) et, d'un agencement.
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.
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 :
-
emplacement d'origine: l'emplacement du répertoire d'images originales doit être spécifié pour être accédé. Un chemin vers ce répertoire doit être affecté au paramètre
espace de stockage (repository.root.dir)
. Le chemin peut être un chemin relatif au répertoire racine d'un projet Xiss web ou un chemin absolu. -
moment de l'import: l'importation effective des images peut être faite durant le processus de semage ou durant le processus de construction. Pour choisir l'import durant le semage, mettre le paramètre
import d'image
àtrue
. Pour choisir l'import durant la construction le paramètreimport d'image
àfalse
. Les images sont importées seulement si elles n'existent pas déjà ou si elles ont été modifiées depuis la dernière importation.WARNING:Point important sur les performances. Si les images dans l'espace de stockage sont très grandes, il est très fortement recommander d'importer (et redimensionner) les images pendant la phase de semage.
Ainsi vous obtenez des images avec une taille raisonnable dans votre projet Xiss web. Ces images sont celles utilisées pour tous les futurs traitements à la place des images volumineuses dans le répertoire d'originales. -
taille d'image: Une taille maximale peut être spécifiée pour obtenir des images à une taille voulue. Les images de l'espace de stockage sont redimensionnées pendant la phase d'import, seulement si elles sont plus grandes que la taille maximale. La taille maximale peut être précisée pour les deux dimensions simultanément dans le paramètre
taille maximale
ou être spécifiée séparément pour chaque dimension dans les deux paramètreslargeur maximale
ethauteur maximale
. La valeur0
ou absence de valeur indique aucun redimensionnement.
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 :
- [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.
- [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.
- [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.
- [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.
-
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 fichiersslideshow.xml
pour ajouter et éditer les métadonnées pour les images argentiques ou de création numérique. -
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. - 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 :
- personnel : vos propres pages HTML (voir aussi la section Web ou non et l'exemple
features/persinal-pages
), - agencement : index standard ou Google Maps généré par Xiss web si spécifié dans un agencement,
- 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 :
- la description d'un diaporama contenu dans le fichier contenu de diaporama,
- une explication (la même explication de celle de l'index local par défaut).
Ci-après un exemple de l'affichage de la description et de l'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 :
- La carte par défaut affichée : plan, satellite, mixte, relief.
- Contrôle de la carte : zoom, types de carte, vue déportée.
- Style de marqueur : marqueur Google Maps par défaut, marqueur avec vignette.
Ci-après un exemple de l'index Google Map avec le résultat mit cote à cote de deux types de paramétrage :
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 :
- Certains appareils photo numériques possèdent un équipement GPS (puce intégrée ou antenne externe), alors lors de la création de l'image les coordonnées GPS sont stockées dans les métadonnées Exif.
- Certains logiciels peuvent ajouter des informations GPS dans les métadonnées Exif d'images existantes (par exemple, iPhoto'09 d'Apple sur Mac OS X ou Picasa 3.5 de Google).
- Avec l'éditeur de contenu de diaporama les coordonnées GPS peuvent être éditées à la main. Dans ce cas les informations GPS ne sont pas stockées dans les métadonnées Exif mais dans le fichier de diaporama.
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.
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 :
- si aucun agencement n'est définit dans votre projet, alors l'agencement
%XISSWEB_HOME%\rsrc\layouts\default\layout.xml
est choisi ; - 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 :
- Un habillage est facile à changer : vous pouvez le changer dans le fichier
xissweb.properties
oud'agencement
, re-générer les pages HTML et voir le résultat ; - Un habillage est facile à définir : vous pouvez utiliser l'éditeur d'abillage ou définir votre propre habillage en suivant les exemples d'habillages existants ou (d'une façon plus avancée) vous pouvez changer le rendu HTML en modifiant les fichiers XSTL après avoir recopiés dans votre espace ceux du répertoire
%XISSWEB_HOME%\rsrc\skins\common\xsl
.
Les styles CSS pour l'habillage se composent de trois fichiers :
-
page.css
: définit les styles principaux de haut niveau, -
layout.css
: définit les styles pour les agencements (voirlayout.xml
), -
component.css
: les styles des composants (vignettes, barre de navigation, image principale, ...) sont définis ici.
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.
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 :
-
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). -
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. -
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 :
- fondu : disparition progressive de l'image courante avant le chargement de la nouvelle image, affichage d'un écran d'attente durant le chargement et apparition progressive de la nouvelle image.
- fondu superposé : ne fait rien avant le chargement, affiche un écran d'attente durant le chargement et, simultanément fait apparaitre progressivement la nouvelle image par dessus la courante, et fait disparaître progressivement l'image courante.
- défilement horizontal : ne fait rien avant le chargement, affiche un écran d'attente durant le chargement et fait défiler l'image courant vers la droite ou la gauche pour faire apparaitre la nouvelle image (à droite si la nouvelle image est une image précédente, à gauche si elle est une image suivante).
- défilement vertical : ne fait rien avant le chargement, affiche un écran d'attente durant le chargement et fait défiler l'image courant en haut ou en bas pour faire apparaitre la nouvelle image (en bas si la nouvelle image est une image précédente, en haut si elle est une image suivante).
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.
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 :
- affichage des commentaires : en haut ou en bas de l'image principale ;
- affichage des métadonnées : aucun affichage, ou en haut ou en bas de l'image principale ;
- vitesse d'animation des transitions.
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 :
- trois modes diaporama :
-
manual
: pas d'automatisme (le défaut), -
automatic
: diaporama automatique et démarrage manuel, -
auto-start
: diaporama et démarrage automatique ;
-
- temps d'affichage : temps d'affichage de chaque image (en secondes).
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 :
-
@#
: code pour afficher le numéro de l'image, -
%+
: code pour afficher le nombre d'images du diaporama en cours.
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 :
-
"@#"
: donne la numérotation "1", "2", "3", ... -
"(@#/%+)"
: donne la numérotation "(1/6)", "(2/6)", "(3/6)", ... -
"@#-%+ :"
: donne la numérotation "1-6 :", "2-6 :", "3-6 :", ...
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 :
-
<link-to-home/>
: génère un lien vers la racine du diaporama qui peut être une page d'accueil (index.html)
). Un lien est généré avec la classeCSS home
associée (cf.component.css
). Cette balise a deux attributs optionnels :-
text
: texte du lien généré, -
title
: titre du lien généré.
-
-
<title/>
: génère un texte de titre avec la valeur detitle
dans l'élémentinfo
du fichierslideshow.xml
(s'il n'y a pas de titre, le nom du diaporama est utilisé). Le texte du titre est aussi utilisé comme titre de la page HTML (avec le nom de l'image courante) ; -
<description/>
: génère un texte avec la valeur dedescription
dans l'élémentinfo
du fichierslideshow.xml
(S'il n'y a pas de description, la valeur du titre est utilisé et s'il n'y a pas de titre, le nom du diaporama est utilisé) -
<built-with type="normal"/>
: génère une icône "built with Xiss web". La valeur de l'attributtype
peut être 'normal
' ou 'negative
' ; -
<copyright/>
: génère un libellé de copyright avec les valeurs suivantes indiquées dans le fichier de propriétésxissweb.properties
:-
copyright.years
: une plage d'années, -
copyright.organisation
: le nom de l'organisation possédant les droits.
-
Le texte utilisé par les deux éléments 'title
' et 'description
' peut être édité avec l'éditeur de contenu de diaporama.
5.8 Liens entre diaporamas
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.
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 :
- lien précédent :
<previous-show href="chemin relatif vers un diaporama" text="texte à afficher"/>
- lien suivant :
<next-show href="chemin relatif vers un diaporama" text="texte à afficher"/>
Il existe deux façons de gérer les liens :
- avec l'l'éditeur de contenu de diaporama, des liens peuvent être ajoutés après l'élément
info
- avec une boîte de dialogue dédiée permettant la création et l'édition de liens entre diaporamas sélectionnés.
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 :
- lien précédent :
<previous/>
- lien suivant :
<next/>
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.
5.9 Type de navigation
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 :
-
basic
: navigation commençant par la première image et finissant par la dernière (le défaut si rien n'est spécifié). -
circular
: la navigation circulaire permet d'aller en arrière de la première image à la dernière et d'aller en avant de la dernière image à la première. -
previous
: ce type permet (avec la flèche arrière de la barre de navigation) la navigation de la première image au diaporama courant à la dernière image du disporama précédent s'il existe un lien. -
next
: ce type permet (avec la flèche avant de la barre de navigation) la navigation de la dernière image au diaporama courant vers la première image du diaporama suivant s'il existe un lien. -
links
: ce type combine les deux typesprevious
etnext
.
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 :
-
projet2-sport-mode
: utilise le typecircular
; -
features/links
: utilise le typelinks
. -
features/metadata
: utilise des linkes avec des diaporamas animés.
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 :
-
Génération web : les liens vers les pages
index.html
sont implicites grâce à l'exploitation du mécanisme de page par défaut des serveurs web. -
Génération fichier : tous les liens vers les pages
index.html
sont explicites car les systèmes de fichier n'ont pas de mécanisme identique aux serveurs web.
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.
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
.
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
- 6.2 Nouveau projet
- 6.3 Ouvrir un projet
- 6.4 Initialisation (semage)
- 6.5 Générer les diaporamas (construction)
- 6.6 Afficher les diaporamas générés
- 6.7 Capacités d'édition
- 6.8 Editer les propriétés d'un projet
- 6.9 Editeur contenu de diaporama (
slideshow.xml
) - 6.10 Liens entre diaporamas
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 :
- Windows :
xiss-web.bat
et un raccourcisxiss-web
. - Mac OS X :
xiss-web-mac.sh
. - Linux :
xiss-web.sh
.
La fenêtre principale de Xiss web s'affiche :
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 :
- Une partie actions en haut qui contient aussi la localisation du projet.
- Une vue arborescente à gauche qui présente l'organisation des diaporamas du projet.
- 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 :
- 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.
- 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.
- 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.
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.
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'.
L'emplacement choisi est d'abord analysé pour vérifier l'organisation des images.
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.
Les deux classes de problèmes qui sont gérées sont les suivants :
- hiérarchie d'images non valide,
- impossibilité d'identifier un unique répertoire en tant que répertoire source ("src").
Pour résoudre ces problèmes des options sont proposées en fonction du problème courant :
- création d'un répertoire "src",
- déplacement de la hiérarchie d'images dan sun répertoire "src",
- choisir le répertoire racine de la hiérarchie d'images à devenir le répertoire "src",
- utiliser l'emplacement pour un projet qui utilise un espace de stockage d'images originales,
- créer un projet avec images originales où l'emplacement choisi devient l'espace de stockage des images originales.
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.
Vous devez choisir deux répertoires :
- un pour l'emplacement du projet. Cet emplacement n'a pas à contenir les images de diaporama. Elle peut correspondre à un répertoire vide.
- un pour l'espace de stockage des images originales. Cet emplacement doit contenir des images organisées dans une hiérarchie de répertoires correspondant à des diaporamas.
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 / 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.
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.
Cette action ouvre un sélecteur de fichier :
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é :
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.
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.
Sélection du l'option originaux
à l'ouverture en correspondance aux propriétés affichées.
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 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.
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.
Quand le traitement est fini, des statistiques 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 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.
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
.
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.
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 , 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
.
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.
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 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.
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.
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
.
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 . 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 . 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).
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é.
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 :
- Sauver: sauvegarde les changements dans le fichier concerné par l'édition.
- Annuler: ignorer tous les changements et réinitialise le contenu l'éditeur avec le fichier concerné par l'édition.
- Fermer: ferme l'éditeur et demande si vous voulez enregistrer les changements s'il y en a.
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 principale: sauvegarder les modifications de l'éditeur courant, sauvegarder tous les fichiers, annuler les changements de l'éditeur courant, fermer l'éditeur courant, fermer tous les éditeurs.
- menu vue arborescente: sauver, annuler et fermer sur le fichier sélectionné.
- menu onglet: sauver, annuler, fermer, fermer les autres éditeurs (relativement à l'éditeur courant), fermer tous les éditeurs.
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 peut directement fermer l'éditeur correspondant.
L'action de fermeture demande une confirmation s'il y a des changements au fichier.
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.
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.
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.
L'éditeur de propriétés s'ouvre et s'affiche comme le montre l'image ci-dessous. L'éditeur deux parties principales :
- à gauche un arbre des propriétés organisées en catégories et,
- à droite une zone d'édition pour la propriété sélectionnée avec une courte explication.
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.
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
:
- textes : édition des éléments de titres ou de commentaire d'images.
- liens : ajout de liens vers d'autres diaporamas.
- organisation des images : gestion des sections, déplacements d'images.
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 :
- une table de propriété valeur présente les métadonnées de l'images si elles existent ;
- une zone affiche l'image elle-même avec les fonctionnalités de l'aperçu d'image;
- en dessous de la zone d'affichage de l'image, un éditeur de texte permet l'édition ditrect des commentaires des images. Il permet aussi l'édition des autres textes d'un contenu d'un diaporama, comme le nom des sections, le titre ou la description du diaporama.
Les éléments éditables sont les suivants :
- : l'élément racine portant le nom du diaporama.
- : informations du diaporama, titre et description.
- : un lien précédant vers un autre diaporama.
- : un lien suivant vers un autre diaporama.
- : une section d'images.
- image : représentée par une vignette tel que celle créée pour les pages HTML (taille et forme). Avec la vignette sont associés les informations sur l'image principale (nom du ficher, numéro, indicateur de métadonnées ([P] photo numérique, [F] film argentique, [C] création numérique, [U] inconnu) et taille) et son commentaire.
Les images manquantes sont représentées par l'image par défaut .
Les textes associés aux éléments sont éditables. Il existe deux façons d'éditer les textes :
- 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).
- 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 toucheENTREE
ouECHAP
, ou sélectionnez un autre élément. La figure ci-après montre un commentaire d'image en édition.
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 :
- élément racine : ajouter des liens (précédant et suivant), ajouter des sections
- élément info: éditer le titre, éditer la description
- élément lien : changer le diaporama pointé, éditer le titre, supprimer, (pour la gestion des liens, aller voir la section suivante)
- section : éditer le titre, supprimer (si vide)
- image en trois parties:
- partie édition de l'image : édition du commentaire, restauration du commentaire par défaut comme le processus de semage le fait (depuis les métadonnées ou dans les propriétés du projet), et déplacement de vers une section.
- partie type d'image : mettre le type d'image photo numérique [P], film argentique [F], création numérique [C] ou inconnu [U], restaure les métadonnées depuis les données Exif.
- partie action : reconstruire la page HTML correspondante, afficher la page HTML correspondante dans un navigateur web (si elle à déjà été construite).
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.
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 :
- [F] film argentique : image venant d'une numérisation d'une photo argentique,
- [C] création numérique: image venant d'une création numérique de d'un traitement de plusieurs images.
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 :
- latitude :
-
[N|S] DD MM SS.SSSS
avecDD dans [0, 90]
,MM dans [0, 59]
etSS.SSSS dans [0, 60[
, par exempleN 45 33 12.446521889
-
(-)DD.DDDD
in[-90, 90]
, par exemple45.55345736719138889
-
- longitude :
-
[E|W] DDD MM SS.SSSS
avecDDD dans [0, 180]
,MM dans [0, 59]
etSS.SSSS dans [0, 60[
, par exempleW 3 55 41.976881
-
(-)DD.DDDD
dans[-180, 180]
, par exemple-3.9283269113888889
-
Quand une latitude ou une longitude est donnée dans le second format, elle est transformée dans le premier format.
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 " 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.
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.
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.
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.
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.
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.
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.
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.
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 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 : pour un agencement sans animation et 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 : . 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.
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.
- Elément ensemble : ouvrir la boîte de dialogue gestion des liens pour cet ensemble.
- Elément agencement ou : ouvrir l'éditeur d'agencement.
- Elément diaporama : ouvrir l'éditeur de contenu de diaporama.
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.
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 :
- information skin (habillage): ajout, suppression, édition
- information animation : ajout, suppression, édition
- information des vignettes : édition des caractéristiques des vignettes
- décorations de page: ajout, suppression, édition
- arrangement et ses composants (vignettes, zone d'image et barre de navigation): ajout, suppression, édition, déplacement
L'éditeur d'agencement a trois parties :
- en haut à gauche : vue arborescente des éléments d'agencement
- en bas à gauche : une vue graphique qui montre la position relative des composants présent dans les pages HTML
- à droite : une zone d'édition pour éditer les propriétés d'un élément sélectionné
Les éléments éditables et leur propriétés sont les suivants :
- représente l'agencement lui-même : un commentaire et une largeur de page
- nom de l'habillage lié à l'agencement (voir éditeur d'habillage)
- type d'animation de transition entre les images, panneau de contrôle et automatisme.
- informations globales des vignettes : taille, qualité de la réduction et forme
- , , , : éléments de décoration de page, respectivement en-tête, marge gauche, marge droite et pied de page
- et : arrangement vertical et arrangement horizontal. Ils contiennent du code HTML.
- composant vignettes : nombre de lignes ou de colonnes (suivant l'agencement)
- composant barre de navigation : type de navigation et ses éléments : diaporama précédant, en arrière, init, en avant et diaporama suivant.
- composant zone image : taille de la zone, position du commentaire, format de la numérotation et les éléments de métadonnées à afficher (un onglet par type d'image : numérique, film argentique et création numérique).
- localisation d'image sur une carte: élément optionnel qui permet de montrer la localisation d'une image avec Google Maps directement depuis l'affichage de l'image.
- élément index local : élément optionnel qui peut être de type standard ou Google Maps (voir la section index local paramétrable).
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.
Les actions d'ajout et de suppression sur les éléments dépendent du type d'élément et de son occurrence possible :
- habillage (skin) : au plus un
- animation : au plus un
- informations de vignettes : exactement un
- décorations de page : au plus un par type : en-tête, marges gauche et droite, pied de page
- arrangement : au moins un
- vignettes : plusieurs dans plusieurs agencements
- barre de navigation : zero, un ou plus dans les arrangements
- zone d'image : au plus un dans un agencement
- localisation d'image sur carte : au plus un associé à la zone d'image
- index local : au plus un associé à la zone d'image
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.
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.
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.
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").
Ensuite choisissez un nom pour le nouvel habillage. Le nom doit correspondre à un nom de répertoire valide.
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.
L'éditeur présente l'habillage comme ci-dessous.
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 :
- Couleurs: Les couleurs globales utilisées dans les classes CSS générées.
- Page: paramètres correspondants aux éléments communs : textes et liens.
-
Composants: paramètres des composants visibles correspondants à des éléments Xiss web :
- zone image : commentaire, métadonnées, index local, animation (écran d'attente) ;
- vignettes ;
- copyright.
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.
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 ;
- Copier-coller : un
CTRL-C
et unCTRL-V
transfère une couleur sélectionnée vers une autre couleur sélectionnée. - Eclaircir et assombrir: la touche "B" éclaircit la couleur sélectionnée et la touche "D" assombrit la couleur sélectionnée.
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").
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.
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
).
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 "...").
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.
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 accompagne le texte. Le même symbole peut aussi être affiché avec l'élément qui pose 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 . Un menu s'ouvre et propose plusieurs actions possibles. Il est alors possible d'exécuter directement une action depuis ce menu.
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.
Cela ouvre l'éditeur de préférences, voir ci-dessous.
Un simple click sur un élément démarre son édition.
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
.
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.
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).
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é).
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 :
-
digital
: maker, model, date, shutter-speed, exposure-time, aperture, iso, focal-length, flash, white-balance, latitude, longitude, altitude. -
film
: maker, model, date, film, iso, exposure-time, aperture, focal-length, flash, latitude, longitude, altitude. -
création umérique
: logiciel, date, latitude, longitude, altitude. -
inconnu
: date, latitude, longitude, altitude.
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 :
- le type d'animation :
kind
avec les valeurs suivantes :fade
,superimposed fade
,scroll
,horizontal scroll
etvertical scroll
(scroll
correspond à un défillement horizontal) ; - la vitess de transition avec l'attribut
transition
et les valeurs:slow
,medium
,fast
,immediat
; - la taille de l'écran d'attente de chargement d'image est préciser dan l'attribut
wait-screen-size
avec les valeurs possibles :none
,image area
etfull screen
; - la présence d'un panneau de control de l'animation : attribut
control-panel
(true
orfalse
).
7.2.3 Vignettes
Les vignettes sont définies par les informations dans les attributs de l'élément thumbnails-info
:
-
size
: taille dans la plus grande dimension : largeur ou hauteur ; -
unit
: unité de la taille :px
taille absolue en pixels,%
taille relative par rapport aux images principales ; -
shape
: forme des vignettes :rectangle
respecte les proportions originales de l'image principale,square
force la vignette à être un carré ; -
quality
: qualité de la réduction pour construire les vignettes :high
(élevée) orlow
(basse).
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
:
-
vertical
: les composants sont affichés verticalement de haut en bas ; -
horizontal
: les composants sont affichés horizontalement de gauche à droite.
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 :
-
previous
: permet d'aller au diaporama précédent s'il est indiqué dans le fichierslideshow.xml
, -
next
: idem pour le diaporama suivant, -
backward
: flèche arrière qui affiche l'image précédente, -
forward
: flèche avant qui affiche l'image suivante, -
init
: permet d'aller à la première image ou à la page index si elle existe.
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 :
-
basic
: navigation commençant par la première image et finissant par la dernière (le défaut si rien n'est spécifié). -
circular
: la navigation circulaire permet d'aller en arrière de la première image à la dernière et d'aller en avant de la dernière image à la première. -
previous
: ce type permet avec la flèche arrière la navigation de la première image au diaporama précédent s'il est indiqué dans le fichierslideshow.xml
. -
next
: ce type permet la navigation avec la flèche avant d'aller de la dernière image au diaporama suivant est indiqué dans le fichierslideshow.xml
. -
links
: ce type combine les deux typesprevious
etnext
.
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 :
-
comment
, caractéristiques du commentaire définies par deux attributs :-
position
: indique le positionnement relatif du commentaire par rapport à l'image suivant les deux valeurstop
(en haut) etbottom
(en bas). -
number-formart
: définit l'affichage de la numérotation associé avec le commentaire de l'image (voir la fonctionnalité numérotation des images pour plus de détailles).
-
-
image-location-on-map
, élément optionnel permettant l'afficher la localisation de l'image principale avec Google Maps, si l'image possède des métadonnées GPS (latitude et longitude). Cet élément a trois attributes :-
map-type
: le type de carte affiché par défaut : plan (0
), satellite (1
), mixte (2
) -
map-control
:true
orfalse
pour afficher ou non les contrôles permettant de changer de carte. -
zoom-control
:true
orfalse
pour afficher ou non les contrôles permettant de zoomer la carte. -
fading
:none
,slow
orfast
indique le comportement de la transition entre l'image principale et carte. -
zoom-level
:2
,5
,10
,15
,18
facteurs de zoom par défaut à l'affichage de la carte (2
est le niveau le plus proche et18
le plus éloigné).
-
- Un élément optionnel pour définir index local paramétrable.
- Quatre éléments optionnels (
meta-data
,meta-data-film
,meta-data-processing
,meta-data-unknown
) correspondant à l'affichage de métadonnées.
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 :
-
local-index-standard
: permet l'affichage de la description du diaporama (attributdescription
) et l'afficage d'une explication (attributexplanation
). Les valeurs possibles sonttrue
oufalse
. -
local-index-google-maps
: décrit les paramètres pour afficher sur une carte à l'aide de Google Maps API la localisation des images d'un diaporama ayant des données GPS. Les paramètres sont :-
map-type
: le type de carte affiché par défaut : plan (0
), satellite (1
), mixte (2
) -
map-control
:true
orfalse
pour afficher ou non les contrôles permettant de changer de carte. -
zoom-control
:true
orfalse
pour afficher ou non les contrôles permettant de zoomer la carte.
-
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 :
-
maker
,model
,date
,shutter-speed
,exposure-time
,aperture
,iso
,focal-length
,flash
,white-balance
.
Les sous éléments à él'ément meta-data-film
indiquent les métadonnées à afficher pour les images argentiques. Ces sous éléments sont :
-
maker
,model
,date
,film
,iso
,exposure-time
,aperture
,focal-length
,flash
.
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 :
-
software
,date
.
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 :
-
page.css
: styles des éléments HTML de plus haut niveau et définition de styles globaux (pour les liens par exemple) ; -
layout.css
: styles associées aux éléments de bases pour l'organisation des pages ; éléments de décoration et arrangements. -
component.css
: styles pour tous les composants de diaporama comme la barre de navigation, les vignettes, l'image principale, ...
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
).
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 :
- la couleur du fond :
<body-background>
- la couleur du fond de page :
<page-background>
- couleur des textes et lignes :
<foreground>
- couleur des liens hypertextess :
<link-foreground
- couleur des liens hypertextes survolés :
<link-hover>
- couleur des éléments désactivés :
<disabled-foreground>
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 :
-
zone image (
<image-area>
) : la couleur (color
) peut être redéfinit pour les textes et ligne ainsi que pour la couleur de fond (background
). Il y a un style de bordure (border
) permettant de délimiter la zone d'image. Cette partie définit aussi le style de texte pour les commentaires d'image (font
) et pour les métadonnées (meta-data
). Associé à la zone d'image, l'élémentlocal-index
définit le style de la zone index local par deux couleurs : couleur du bord (border-color
) couleur du fond (background
). Associé à l'élémentimage-area
, un élémentanimation
définit le style d'un écran d'attente pour la fonctionnalité d'animation. -
vignettes (
<thumbnail>
) : les vignettes constituent un élément de la navigation des diaporamas. Le style de bordure des vignettes peut être défini : bordure lien (<normal>
) et bordure lien survolé (<hover>
). La couleur des bordures (lien et lien survolé) sont celles définies dans la sectioncolors
. Cette partie vignettes définit aussi un style de bordure pour la vignette correspondante à l'image courante (<current>
). -
copyright (
<copyright>
) : style de texte pour l'affichage d'un copyright.
8 Les exemples
- 8.1
projet1-sport-mode
- 8.2
projet2-sport-mode
- 8.3
features/links
- 8.4
features/metadata
- 8.8
features/sections
- 8.9
features/personal-pages
- 8.10
features/reverse
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.
8.3 features/links
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.
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.
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.
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.
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.
La ligne de commande
xiss-web
avec l'option -reverse
permet de construire les diaporamas en un coup.