fr_FR - en to fr translation catalogue (270 entries)

note: type: title{#1}
en: Create HTML5 interactive images
fr: Créer des images interactives au format HTML5

note: type: selectlanguage{#1}
en: english
fr: french

note: type: renewcommand{#2}
en: Figure
fr: Illustration

note: type: renewcommand{#2}
en: Table
fr: Tableau

note: type: renewcommand{#2}
en: List of figures
fr: Liste des illustrations

note: type: section{#2}
en: Introducing Xia
fr: Présentation de Xia

note: type: subsection{#2}
en: What is Xia ?
fr: Qu'est-ce que Xia?

note: type: document
en: Xia is a free software developped by teachers from the french academy of Versailles.  It is released under \href{http://www.gnu.org/copyleft/gpl.html}{GPLv3} license.  Xia converter takes a svg file as input and outputs an interactive image in html5. Xia allows to generate animations and interactive activities : drag and drop games, discrimination, selection, etc.
fr: Xia est un logiciel libre développé par des enseignants de l'académie de Versailles. Il est distribué sous la licence \href{http://www.gnu.org/copyleft/gpl.html}{GPLv3}. Le logiciel xia-converter a pour fonction de transformer un fichier svg en une animation interactive html5. Xia permet de générer des jeux et activités interactives: jeux de glisser-déposer, sélection, discrimination, etc.

note: type: document
en: First sections of this documentation (see section \ref{basic_imageactive}) are dedicated to make a very simple interactive image: cropped details with comments only made of plain text.  Then, you will learn how to create an enriched interactive image (see section \ref{enriched_IA}). Final sections (section \ref{games_IA}) will teach you to create games.
fr: Les premières parties de cette documentation (voir la partie \ref{basic_imageactive}) sont consacrées à la réalisation d'une image interactive simple: détails détourés et commentaires en texte sans mise en forme. Par la suite, vous apprendrez à créer des images interactives enrichies (voir la partie \ref{enriched_IA}). Dans les dernières parties (partie \ref{games_IA}), vous découvrirez comment créer des jeux.

note: type: tip
en: All examples are on line (links and downloads available at the beginning of each section). At the end of each section, a heading "Abstract" presents the essential guide lines to remember when creating an interactive image.
fr: Tous les exemples utilisés sont visibles en ligne (les liens pour visualiser les animations et télécharger les fichiers sources sont indiqués en début de chaque section). À la fin de chaque partie, une rubrique «~En résumé~» rappelle les points essentiels à retenir pour créer une image interactive.

note: type: subsection{#2}
en: General process
fr: Processus général

note: type: document
en: Xia is only needed at the end of the process.  As we can see on figure \ref{workflowxia}, most of the work is done with a vector graphics editor. We recommend using the free open-source and muliplatform software \href{http://www.inkscape.org/}{Inkscape}, which is really easy to use (Inkscape will be used in this document)\footnote{It is also possible to use LibreOffice Draw.}.
fr: Xia n'est nécessaire qu'à la fin du processus. Comme on peut le voir sur l'illustration \ref{workflowxia}, la plus grande partie du travail est réalisée avec un logiciel de dessin vectoriel. Nous recommandons l'utilisation du logiciel libre et multi-plateforme \href{http://www.inkscape.org/}{Inkscape}, très simple à utiliser (c'est ce logiciel qui sera utilisé dans ce tutoriel)\footnote{Il est cependant également possible d'utiliser LibreOffice Draw.}.

note: type: tikzpicture
en: \node[box] (open) {Open an Image in Inkscape}; \node[box,below of=open] (create)  {Create details in image}; \node[box,below of=create] (meta) {For each detail, edit metadata}; \node[box,below of=meta] (save) {Save project}; \node[left of=create,xshift=-.37\textwidth, rotate=90] (scape) {\textbf{Inkscape}};
fr: \node[box] (open) {Ouvrir l'image dans Inkscape}; \node[box,below of=open] (create)  {Créer les détails}; \node[box,below of=create] (meta) {Pour chaque détail, compléter les métadonnées}; \node[box,below of=meta] (save) {Sauvegarder le projet}; \node[left of=create,xshift=-.37\textwidth, rotate=90] (scape) {\textbf{Inkscape}};

note: type: tikzpicture
en: \node[box,below=1cm of save] (createia) {Create an interactive image in html5}; \node[left of=createia,xshift=-.37\textwidth, rotate=90] (xia) {\textbf{Xia}};
fr: \node[box,below=1cm of save] (createia) {Créer une image interactive en html5}; \node[left of=createia,xshift=-.37\textwidth, rotate=90] (xia) {\textbf{Xia}};

note: type: caption{#2}
en: Creation process of an interactive image with Xia
fr: Processus de création d'une image interactive avec Xia

note: type: tip
en: If you have "image active" project files (with a .xia extension), you can change their extension to .zip, unzip them, get the svg file located in the unzipped folder, and open it with Inkscape. If you are using GNU/Linux, just explore the .xia file and extract the svg file.
fr: Si vous possédez des projets créés avec le logiciel ImagesActives (fichiers possédant une extension .xia), vous pouvez changer l'extension de ces fichiers en .zip, les dézipper, récupérer le fichier svg se trouvant dans le répertoire ainsi obtenu et ouvrir celui-ci avec Inkscape. Si vous utilisez GNU/Linux, explorez le .xia et récupérez le fichier svg.

note: type: subsection{#2}
en: Installing Inkscape and Xia
fr: Installer Inkscape et Xia

note: type: document
en: Having Inkscape and Xia installed on your computer is the only thing you need to read this documentation. You will find any relevant information about the installation of Inkscape on its website
fr: L'installation d'Inkscape et de Xia sont les seuls prérequis pour la poursuite de la lecture de cette documentation. Vous trouverez les informations nécessaires à l'installation d'Inkscape sur le site web du projet

note: type: alert
en: Make sure to install Xia after Inkscape. Otherwise you will not be able to access Xia directly in Inkscape.\\ If you work on a Windows system, use the portable version to access Xia outside of Inkscape.
fr: Installez impérativement Inkscape en premier, puis Xia, sous peine de ne pas être en mesure d'accéder à Xia directement dans Inkscape.\\ Si vous travaillez sous Windows, utilisez la version portable de Xia pour accéder au logiciel en dehors d'Inkscape.

note: type: description
en: In a terminal:\\ \texttt{\$ sudo echo "deb http://repository.crdp.ac-versailles.fr/debian xia main" | sudo tee /etc/apt/sources.list.d/xia.list}\\ \texttt{\$ wget -q http://repository.crdp.ac-versailles.fr/crdp.gpg -O - | sudo apt-key add -}\\ \texttt{\$ sudo apt-get update \&\& sudo apt-get install xia}
fr: Dans un terminal:\\ \texttt{\$ sudo echo "deb http://repository.crdp.ac-versailles.fr/debian xia main" | sudo tee /etc/apt/sources.list.d/xia.list}\\ \texttt{\$ wget -q http://repository.crdp.ac-versailles.fr/crdp.gpg -O - | sudo apt-key add -}\\ \texttt{\$ sudo apt-get update \&\& sudo apt-get install xia}

note: type: description
en: [Mac OS X] Download and install the package:\\ \href{http://xia.dane.ac-versailles.fr/download/xia.pkg}{http://xia.dane.ac-versailles.fr/download/xia.pkg}
fr: [Mac OS X] Téléchargez et installez le paquet:\\ \href{http://xia.dane.ac-versailles.fr/download/xia.pkg}{http://xia.dane.ac-versailles.fr/download/xia.pkg}

note: type: description
en: [Windows] Download and install the Inkscape extension (\href{http://xia.dane.ac-versailles.fr/download/setup.exe}{http://xia.dane.ac-versailles.fr/download/setup.exe})  or the portable version (\href{http://xia.dane.ac-versailles.fr/download/xia-windows.zip}{http://xia.dane.ac-versailles.fr/download/xia-windows.zip}).
fr: [Windows] Téléchargez et installez l'extension Inkscape (\href{http://xia.dane.ac-versailles.fr/download/setup.exe}{http://xia.dane.ac-versailles.fr/download/setup.exe}) ou Xia en version portable (\href{http://xia.dane.ac-versailles.fr/download/xia-windows.zip}{http://xia.dane.ac-versailles.fr/download/xia-windows.zip}).

note: type: section{#2}
en: Creating your first interactive image using Inkscape and Xia: \emph{Basic features}
fr: Création d'une première image interactive avec Inkscape et Xia: \emph{Fonctionnalités de base}

note: type: subsection{#2}
en: Building the svg source file to generate an interactive image
fr: Création du fichier source au format svg en vue de la génération de l'image interactive

note: type: links
en: Explore the \href{http://xia.dane.ac-versailles.fr/demo/tuto/xia1}{interactive image} created for this section of the documentation.
fr: Visualisez l'\href{http://xia.dane.ac-versailles.fr/demo/tuto/xia1}{image interactive} créée pour cette partie de la documentation.

note: type: links
en: Download the \href{http://xia.dane.ac-versailles.fr/demo/tuto/xia1/svg/xia1.svg}{svg} source file.
fr: Téléchargez le fichier source au format \href{http://xia.dane.ac-versailles.fr/demo/tuto/xia1/svg/xia1.svg}{svg}.

note: type: document
en: Manipulations described in this section will help you to create a "basic" interactive image featuring:
fr: Les manipulations décrites dans cette partie de la documentation vous permettront de créer une image interactive «~basique~», comprenant:

note: type: itemize
en: Zoom-in enabled details
fr: Détails zoomables

note: type: itemize
en: Comments on details only made of plain text
fr: Commentaires uniquement constitués de texte non mis en forme

note: type: document
en: Once you have chosen the image you will work with, open it with Inkscape:
fr: Une fois l'image choisie, ouvrez-la dans Inkscape

note: type: document
en: \softmenu{File $\rightarrow$ Open}
fr: \softmenu{Fichier $\rightarrow$ Ouvrir}

note: type: document
en: When asked by the software if you wish to "\softmenu{Link}" or "\softmenu{Incorporate image}", choose "\softmenu{Incorporate}".
fr: Quand Inkscape vous demande de choisir entre \softmenu{Lier} ou \softmenu{Incorporer l'image}, choisissez \softmenu{Incorporer}.

note: type: document
en: The information filled in the \softmenu{document Metadata} (\softmenu {File} menu) will be included in the interactive image once generated : title, creator, rights, \ldots. It is highly recommended to type in this information.  You can see what it looks like once generated on the image below\footnote{The fields "author" and "rights" appear in the window "About", symbolized by a clickable button shaped like the letter "i"}:\\
fr: Les informations renseignées dans les \softmenu{Métadonnées du document} (menu \softmenu{Fichier}) seront conservées dans l'animation générée: titre, créateur, droits, \ldots. Il est donc fortement conseillé de renseigner ces informations. Le rendu est visible sur l'image ci-dessous\footnote{Les champs "auteur" et "droits" apparaissent dans la fenêtre "À propos", symbolisée par une icône clicable en forme de lettre "i".}:\\

note: type: document
en: The title entered in the metadata of the document appears above the interactive image and gives its name to the web page. The creator and rights appear in the pop up associated with the "i" button on the right of the title of the interactive image.
fr: Le titre renseigné dans les métadonnées du document apparaissent au-dessus de l'image interactive et donnent son nom à la page web l'affichant. Le créateur et les droits associés apparaissent dans la pop up accessible via l'icône «~i~» située à droite du titre de l'image interactive.

note: type: document
en: You can save the image in svg format in the earlywork, through \softmenu{File $\rightarrow$ Save as\ldots}.
fr: Vous pouvez sauvegarder votre projet au format svg dès le début du travail, en allant dans le menu \softmenu{Fichier $\rightarrow$ Enregistrer sous\ldots}.

note: type: document
en: For more clarity, you should remove the current extension of the image in the field \softmenu{Name} of the dialog window. Finally, in the dropdown menu, choose the Inkscape svg file format:
fr: Vous pouvez, par souci de clarté, supprimer l'extension d'origine de votre image dans le champ \softmenu{Nom} de la fenêtre de dialogue. Enfin, dans le menu déroulant, choisissez le format de fichier Inkscape svg:

note: type: document
en: Several Inkscape tools can be used to clip the details that will become active in the animation generated by Xia. Among these:
fr: De nombreux outils d'Inkscape peuvent être utilisés pour détourer les détails qui deviendront actifs dans l'animation générée par Xia. Parmi ceux-ci:

note: type: itemize
en: \softmenu{Create rectangles and squares}
fr: \softmenu{Créer des rectangles et des carrés}

note: type: itemize
en: \softmenu{Create circles, ellipses and arcs}
fr: \softmenu{Créer des cercles, des ellipses et des arcs}

note: type: itemize
en: \softmenu{Draw freehand lines}
fr: \softmenu{Dessiner des lignes à main levée}

note: type: itemize
en: \includegraphics[scale=0.5]{./images/bezier} \softmenu{Bezier curves and straight lines}
fr: \includegraphics[scale=0.5]{./images/bezier} \softmenu{Tracer des courbes de Bézier et des segments de droite}

note: type: document
en: Without going in the detail of how these tools work\footnote{For this, refer to \href{http://inkscape.org/doc/shapes/tutorial-shapes.fr.html}{Inkscape manual} or \href{http://en.flossmanuals.net/inkscape/}{Floss manual}.} note that the tool "\softmenu{Draw Bezier curves and straight lines}" allows to crop "click by click" (work points are called "nodes").  You close the figure by clicking on the start node.  You can draw "\softmenu{Bezier curves}" by keeping the mouse button pressed after creating a node, then moving the cursor to bring up the control handles to shape the curve segment as desired.
fr: Sans rentrer dans le détail du fonctionnement de ces différents outils\footnote{Pour cela, lire le \href{http://inkscape.org/doc/shapes/tutorial-shapes.fr.html}{manuel d'Inkscape} ou \href{http://en.flossmanuals.net/inkscape/}{le manuel Floss}.}, sachez que l'outil \softmenu{Tracer des courbes de Bézier et des segments de droite} permet de détourer "clic par clic" (les points de construction du polygone sont alors appelés des «~nœuds~»). Vous pouvez refermer votre polygone en cliquant sur le premier nœud de ce même polygone. Vous pouvez dessiner des \softmenu{Courbes de Bézier} en gardant le clic de votre souris enfoncé après avoir créé un nœud, puis en déplaçant le curseur pour faire apparaître les poignées de contrôle afin de modifier la forme de la courbe.

note: type: alert
en: If you set a left open shape in Inkscape (for example a line), Xia will automatically close it by connecting a straight line between the beginning and the end of it.
fr: Si vous laissez une forme ouverte dans Inkscape (une courbe par exemple), Xia refermera automatiquement celle-ci en joignant son point de départ et d'arrivée.

note: type: alert
en: The order of creation of details in Inkscape will be the same in the html5 interactive image (for example: the first created detail in Inkscape will appear at the top of the interactive image).  If you wish to change the sequence without having to create the details once more, see section \ref{XML_layer}.
fr: L'ordre de création des détails dans Inkscape sera respecté dans l'image interactive au format html5 (par exemple, le premier détail détouré dans Inkscape apparaîtra en haut dans le modèle accordéon ou en numéro 1 dans le modèle boutons). Si vous souhaitez changer cet ordre sans avoir à recréer tous les détails, lisez la rubrique \ref{XML_layer}.

note: type: document
en: Once you have cut out a detail\footnote{The colour of the border will be the same in Inkscape and in the animation generated by Xia.}, you can select it with the tool \softmenu{Select and transform object} to resize it, move it\ldots
fr: Une fois les détails détourés\footnote{La couleur du contour des détails dans l'animation générée par Xia sera la même que celle choisie dans Inkscape.}, vous pouvez les sélectionner avec l'outil \softmenu{Sélectionner et transformer des objets} afin de les redimensionner, les déplacer, etc.\ldots

note: type: tip
en: If you have some difficulties to select the details you have drawn, apply a colour background to them. Choose whatever colour you like, except for black and white (see why in section \ref{white_black_background}).
fr: Si vous avez des difficultés pour sélectionner un détail que vous avez détouré, appliquez-lui une couleur de fond. N'importe quelle couleur fera l'affaire, sauf noir et blanc (pour comprendre pourquoi, lisez la rubrique \ref{white_black_background}).

note: type: document
en: You can access to the \softmenu{Object properties} by right-clicking on the cut-out detail.  Thus you also access to the dialog window in which you add the text to be associated with the detail in the interactive image:\\
fr: Vous pouvez accéder aux \softmenu{Propriétés de l'objet} par un clic-droit sur le détail détouré. À partir de là, vous accédez à une fenêtre de dialogue vous permettant d'ajouter le texte qui sera associé au détail dans l'image interactive:\\

note: type: document
en: The two fields to be filled in this window are \softmenu{Title} and \softmenu{Description}.  The title filled in here will be that of the detail, description will be its comment. Do not forget to click on the \softmenu{Define} button before you close the \softmenu {Object Properties} dialog window.
fr: Les deux champs devant nécessairement être renseignés dans cette fenêtre sont les champs \softmenu{Titre} et \softmenu{Description}. Le titre deviendra celui du détail, la description son commentaire. N'oubliez pas de cliquer sur le bouton \softmenu{Définir} avant de fermer la fenêtre des \softmenu{Propriétés de l'objet}.

note: type: document
en: The process described above must also be done with the background image : the title and description indicated here will serve as an introduction to the interactive image (title and comment not related to a particular detail).
fr: Le processus décrit ci-dessus doit également être effectué avec l'image de fond: le titre et la description de celle-ci serviront d'introduction générale à l'image interactive (il s'agit d'un titre et d'un commentaire qui ne sont pas reliés à un détail particulier).

note: type: subsection{#2}
en: Generating the interactive image with Xia
fr: Génération de l'image interactive avec Xia

note: type: document
en: When all the details are clipped and their metadata indicated, Xia can be launched (see figure \ref{xia_interface}).  You must select the svg source file with the top left icon\footnote{When launched as an Inkscape extension, the top left icon has a different look, and can not be selected, since Xia assumes you want to create the html5 animation from the image you are working on in Inkscape.}, choose the export options (see figure \ref{xia_export_options}), and then choose a template and the destination folder of the interactive image.
fr: Quand tous les détails sont détourés et leurs métadonnées renseignées, Xia peut être lancé (voir l'illustration \ref{xia_interface}). Vous devez sélectionner votre fichier svg avec l'icône située en haut à gauche\footnote{Cette icône n'apparaît pas sous cette forme quand Xia est lancé depuis les extensions d'Inkscape. En effet, dans ce cas Xia considère que vous souhaitez générer l'animation depuis l'image actuellement ouverte dans Inkscape. Vous ne pouvez donc pas sélectionner d'image source.}, choisir la qualité de l'export (voir l'illustration \ref{xia_export_options}), et enfin choisir un modèle d'export et un répertoire d'enregistrement de l'image interactive.

note: type: document
en: Clicking on one of the template icons generates a series of files and folders.  Open the \softmenu{index.html} file in a webbrowser to see the html5 interactive image.
fr: En cliquant sur l'une des icônes des modèles d'export, vous générez une série de fichiers et de répertoires. Ouvrez le fichier \softmenu{index.html} dans un navigateur web pour voir votre image interactive au format html5.

note: type: alert
en: This file will not display anything if used alone. All the other files and directories generated during the export process must be stored in the same folder (see figure \ref{xia_files})  as the \texttt{index.html} file so that the animation works properly.  \textbf{It is therefore essential to dedicate a specific directory for each exported image}.
fr: Ce fichier ne peut être séparé des autres pour que l'image interactive fonctionne. Tous les autres fichiers et répertoires générés durant le processus d'exportation doivent obligatoirement être localisés dans le même répertoire (voir l'illustration \ref{xia_files}) pour que le fichier \texttt{index.html} fonctionne correctement. \textbf{Il est donc impératif de dédier un répertoire spécifique à chaque image interactive générée}.

note: comments type: tikzpicture
en: \node[box, text width=2.5cm,above left = 5mm of files] (filesC) {Select the svg source file}; \node[box, above = 5mm of params] (paramsC) {Define the options of the export (see figure \ref{xia_export_options})}; \node[box,above right = 5mm of aCloud.north east] (aBlackC) {\href{http://xia.dane.ac-versailles.fr/demo/tuto/xia1/accordionBlack}{accordionBlack}\\ Large comment zone, suitable for the insertion of multimedia resources; to be used with vertical images (portrait)}; \node[box, right = 5mm of guClic] (aCloudC) {\href{http://xia.dane.ac-versailles.fr/demo/tuto/xia1/accordionCloud}{accordionCloud}\\ Narrow comment zone, with more space for the image itself ; to be used with horizontal images (landscape)}; \node[box, below right = 5mm of pYellow] (pYellowC) {\href{http://xia.dane.ac-versailles.fr/demo/tuto/xia1/popYellow}{popYellow}\\ No lateral comment zone ; a first click on the detail reveals it, and a second one simultaneously unveils the comment and triggers the zoom function}; \node[box, left = 25mm of bBlue] (bBlueC) {\href{http://xia.dane.ac-versailles.fr/demo/tuto/xia1/buttonBlue}{buttonBlue}\\ No lateral comment zone ; comments appear above the image (suitable for long comments) ; the users access the comments through icons placed above the interactive image}; \node[box, below left = 5mm of pBlue] (pBlueC) {\href{http://xia.dane.ac-versailles.fr/demo/tuto/xia1/popBlue}{popBlue}\\ No lateral comment zone; a first click on the detail reveals it, and a second one pops up the comment (no zoom)};
fr: \node[box, text width=2.5cm,above left = 5mm of files] (filesC) {Sélection du fichier source svg}; \node[box, above = 5mm of params] (paramsC) {Définition des options d'exportation (voir l'illustration \ref{xia_export_options})}; \node[box,above right = 5mm of aCloud.north east] (aBlackC) {\href{http://xia.dane.ac-versailles.fr/demo/tuto/xia1/accordionBlack}{accordionBlack}\\ Zone de commentaire large, recommandé pour l'insertion de ressources multimédias; à utiliser avec des images verticales (portrait)}; \node[box, right = 5mm of guClic] (aCloudC) {\href{http://xia.dane.ac-versailles.fr/demo/tuto/xia1/accordionCloud}{accordionCloud}\\ Zone de commentaires étroite, laissant davantage de place à l'image en elle-même ; à utiliser avec des images horizontales (paysage)}; \node[box, below right = 5mm of pYellow] (pYellowC) {\href{http://xia.dane.ac-versailles.fr/demo/tuto/xia1/popYellow}{popYellow}\\ Pas de zone latérale de commentaire ; un premier clic sur le détail le met en évidence, et un second fait apparaître le commentaire et enclenche la fonction zoom}; \node[box, left = 25mm of bBlue] (bBlueC) {\href{http://xia.dane.ac-versailles.fr/demo/tuto/xia1/buttonBlue}{buttonBlue}\\ Pas de zone latérale de commentaire ; les commentaires apparaissent au-dessus de l'image (recommandé pour les commentaires longs) ; les utilisateurs accèdent aux commentaires via des boutons situés au-dessus de l'image interactive}; \node[box, below left = 5mm of pBlue] (pBlueC) {\href{http://xia.dane.ac-versailles.fr/demo/tuto/xia1/popBlue}{popBlue}\\ Pas de zone latérale de commentaire; un premier clic met en évidence le détail, un second fait apparaître le commentaire (pas de zoom)};

note: type: caption{#2}
en: Xia's templates
fr: Les modèles d'export de Xia

note: comments type: tikzpicture
en: \node[box, text width=2.5cm, left = 5mm of exp_qual] (exp_qualC) {Select the quality of the export on a scale from 1 to 4}; \node[box, above = 5mm of exp_firefox] (exp_firefoxC) {Activate or Deactivate the creation of the FirefoxOS files (default: deactivated)}; \node[box, text width=10cm, below = 5mm of exp_1file] (exp_1fileC) {In the unique file configuration, you will need an internet connection to access the resource. The xia engine used in the unique file configuration is hosted on Versailles academy servers and is automatically updated. In this configuration, you can not control the background image and icons (default: deactivated)};
fr: \node[box, text width=2.5cm, left = 5mm of exp_qual] (exp_qualC) {Sélectionner la qualité de l'export sur une échelle de 1 à 4}; \node[box, above = 5mm of exp_firefox] (exp_firefoxC) {Activer ou désactiver la création des fichiers pour l'export FirefoxOS (par défaut: désactivé)}; \node[box, text width=10cm, below = 5mm of exp_1file] (exp_1fileC) {Dans le cas d'un export avec fichier unique, vous aurez besoin d'une connexion internet pour accéder à la ressource. Le moteur de rendu de Xia est hébergé sur les serveurs de l'académie de Versailles, et est mis à jour automatiquement. Avec cette configuration, vous ne pouvez pas personnaliser le fond et les icônes (par défaut: désactivé)};

note: type: caption{#2}
en: Xia's exportation options
fr: Les options d'export de Xia

note: type: figure
en: \tikzstyle{every node}=[draw=black,thick,anchor=west] \tikzstyle{auto}=[draw=reddebian,fill=reddebian!30, text height=2.5mm] \tikzstyle{manual}=[draw=bluedane,fill=bluedane!30, text height=2.5mm] \tikzstyle{firefoxOS}=[draw=orange,fill=orange!30, text height=2.5mm] \tikzstyle{manualT}=[fill=bluedane!30,draw=bluedane, rectangle,text width=5cm, rounded corners] \tikzstyle{autoT}=[fill=reddebian!30,draw=reddebian, rectangle,text width=5cm, rounded corners] \tikzstyle{firefoxOST}=[fill=orange!30,draw=orange, rectangle,text width=5cm, rounded corners]
fr: \tikzstyle{every node}=[draw=black,thick,anchor=west] \tikzstyle{auto}=[draw=reddebian,fill=reddebian!30, text height=2.5mm] \tikzstyle{manual}=[draw=bluedane,fill=bluedane!30, text height=2.5mm] \tikzstyle{firefoxOS}=[draw=orange,fill=orange!30, text height=2.5mm] \tikzstyle{manualT}=[fill=bluedane!30,draw=bluedane, rectangle,text width=5cm, rounded corners] \tikzstyle{autoT}=[fill=reddebian!30,draw=reddebian, rectangle,text width=5cm, rounded corners] \tikzstyle{autoT}=[fill=reddebian!30,draw=reddebian, rectangle,text width=5cm, rounded corners] \tikzstyle{firefoxOST}=[fill=orange!30,draw=orange, rectangle,text width=5cm, rounded corners]

note: type: tikzpicture
en: [grow via three points={one child at (0.5,-0.7) and two children at (0.5,-0.7) and (0.5,-1.4)}, edge from parent path={(\tikzparentnode.south) |- (\tikzchildnode.west)}] \node [manual] {my\_project/} child { node [auto] {index.html}}		 child { node [firefoxOS] {deploy.html}}		 child { node [firefoxOS] {manifest.webapp}}		 child { node [auto] {css/}} child { node [auto] {data/}} child { node [auto] {font/}} child { node [auto] {img/}} child { node [auto] {js/}} child { node [manual] {videos/} child { node [manual] {video.mp4}} child { node [manual] {video.ogv}} child { node [manual] {video.webm}} }; \node[manualT] (textM) at (10,-2) {These files and folders have been manually created by the interactive image designer. The folder \textcolor{bluedane} {videos} was also manually created, in order to host videos inserted in the comments of the interactive image using relative links.}; \node[autoT] (textA) at (10,-8) {Files and folders generated by Xia from the svg source file.}; \node[firefoxOST] (textFOS) at (10,-6) {Files generated with Firefox OS export activated}; \draw[-stealth] (textM.west) -- (4,0); \draw[-stealth] (textM.west) -- (5.5,-7); \draw[-stealth] (textA.west) -- (4,-4); \draw[-stealth] (textFOS.west) -- (5.5,-2);
fr: [grow via three points={one child at (0.5,-0.7) and two children at (0.5,-0.7) and (0.5,-1.4)}, edge from parent path={(\tikzparentnode.south) |- (\tikzchildnode.west)}] \node [manual] {mon\_projet/} child { node [auto] {index.html}}		 child { node [firefoxOS] {deploy.html}}		 child { node [firefoxOS] {manifest.webapp}}		 child { node [auto] {css/}} child { node [auto] {data/}} child { node [auto] {font/}} child { node [auto] {img/}} child { node [auto] {js/}} child { node [manual] {videos/} child { node [manual] {video.mp4}} child { node [manual] {video.ogv}} child { node [manual] {video.webm}} }; \node[manualT] (textM) at (10,-2) {Ces fichiers et répertoires ont été créés manuellement par le créateur de l'image interactive. Le répertoire \textcolor{bluedane} {videos} a également été créé manuellement, dans le but de stocker les vidéos insérées dans les commentaires de l'image interactive, à l'aide de liens relatifs.}; \node[autoT] (textA) at (10,-8) {Ces fichiers et répertoires sont générés par Xia durant le processus d'export.}; \node[firefoxOST] (textFOS) at (10,-6) {Fichiers générés en cas d'activation de l'export Firefox OS};\draw[-stealth] (textM.west) -- (4,0); \draw[-stealth] (textM.west) -- (5.5,-7); \draw[-stealth] (textA.west) -- (4,-4); \draw[-stealth] (textFOS.west) -- (5.5,-2);

note: type: caption{#2}
en: Files of an interactive image with FirefoxOS export activated
fr: Fichiers d'une image interactive avec l'export Firefox OS activé

note: type: document
en: In fact, since Xia is also an Inkscape plugin, you can generate your project directly in Inkscape: just click on \softmenu{Plugins $\rightarrow$ Various $\rightarrow$ Xia Édu}, and choose your template and destination folder.
fr: En réalité, puisque Xia est également une extension d'Inkscape, vous pouvez générez vos projets directement depuis ce logiciel: cliquez sur \softmenu{Extensions $\rightarrow$ Divers $\rightarrow$ Xia Édu}, et choisissez directement la qualité, le modèle d'export, et le répertoire de destination.

note: type: tip
en: If you use GNU/Linux or Mac OS X, you can generate your html5 animation using the terminal with the command \texttt{xia-converter}. The parameters are \texttt{-i} to indicate the input file, \texttt{-o} to indicate the exportation folder, and \texttt{-t} to indicate the template.\\ \emph{GNU/Linux}\\ \texttt{\$ xia-converter -i myfile.svg -o export\_folder/ -t accordionBlack}\\ \emph{Mac OS X}\\ \texttt{\$ cd /Applications/xia.app/Contents/Resources/}\\ \texttt{\$ python xia.py -i myfile.svg -o export\_folder/ -t gameDragAndDrop}\\ The template accordionBlack will be chosen if a syntax error is made in the \texttt{-t} parameter.
fr: Si vous utilisez GNU/Linux ou Mac OS X, vous pouvez générer vos animation html5 en utilisant le terminal avec la commande \texttt{xia-converter}. Les paramètres à utiliser sont \texttt{-i} pour indiquer le fichier en entrée, \texttt{-o} pour indiquer le répertoire d'export, et \texttt{-t} le thème choisi.\\ \emph{Avec GNU/Linux}\\ \texttt{\$ xia-converter -i monfichier.svg -o dossier\_export/ -t accordionBlack}\\ \emph{Avec Mac OS X}\\ \texttt{\$ cd /Applications/xia.app/Contents/Resources/}\\ \texttt{\$ python xia.py -i monfichier.svg -o dossier\_export/ -t gameDragAndDrop}\\ Le thème accordionBlack sera choisi s'il y a une erreur de syntaxe dans le paramre \texttt{-t}.

note: type: subsection{#2}
en: Firefox OS export: how does it work?
fr: L'export Firefox OS: comment ça marche?

note: type: alert
en: If you do not intend to create FirefoxOS applications, skip this section.
fr: Si vous ne comptez pas créer d'applications pour FirefoxOS, vous pouvez sauter cette partie de la documentation.

note: type: document
en: Once you have generated the interactive image with the Firefox OS option (see figure \ref{xia_export_options}), you have to modify the content of \texttt{deploy.html} and \texttt{manifest.webapp}.
fr: Une fois l'image interactive générée avec l'option Firefox OS activée (voir l'illustration \ref{xia_export_options}), vous devez modifier le contenu des fichiers \texttt{deploy.html} et \texttt{manifest.webapp}.

note: type: enumerate
en: In the \textbf{\texttt{deploy.html}} file, modify this line:
fr: Dans le fichier \textbf{\texttt{deploy.html}}, modifiez cette ligne:

note: type: enumerate
en: And indicate the future url of the \texttt{manifest.webapp} file.
fr: Et indiquez l'url future du fichier \texttt{manifest.webapp}

note: type: enumerate
en: In the \textbf{\texttt{manifest.webapp}} file, modify these lines:
fr: Dans le fichier \textbf{\texttt{manifest.webapp}}, modifiez ces lignes:

note: type: enumerate
en: The "name", "size", and "package\_path" lines are mandatory\footnote{The tricky part is the "size" line, where you must indicate the size of the package even before you have zipped it.}.
fr: Les lignes "name", "size", et "package\_path" doivent obligatoirement être modifiées\footnote{La difficulté tient dans la nécessité d'indiquer la taille du fichier zip avant même d'avoir créé ladite archive.}.

note: type: document
en: Once you have made these modifications, zip all the exportation files and upload the archive, the \texttt{deploy.html} and the \texttt{manifest.webapp} files to a web server.
fr: Une fois ces modifications faites, zippez tous les fichiers issus de l'exportation et téléversez l'archive, les fichiers \texttt{deploy.html} et \texttt{manifest.webapp} sur un serveur web.

note: type: document
en: When the user opens the \texttt{deploy.html} file in the Firefox OS browser, their phone will download the interactive image and transform into a html5 application.
fr: L'utilisateur devra se servir du navigateur web de Firefox OS, et accéder à la ressource via le fichier \texttt{deploy.html}. Firefox OS lancera alors un processus dans lequel l'animation sera transformée en application html5.

note: type: tip
en: Applications made with the FirefoxOS export can also be installed on GNU/Linux, Mac OS X and Windows operating systems.
fr: Les applications pour FirefoxOS peuvent également s'installer sur les systèmes d'exploitation GNU/Linux, Mac OS X et Windows.

note: type: subsection{#2}
en: Abstract
fr: En résumé

note: type: enumerate
en: An interactive image is first built in Inkscape (svg format). Xia only converts the svg source file into an html5 animation ;
fr: Une image interactive est construite dans Inkscape (au format svg). Xia ne fait que convertir ce fichier source svg en animation html5;

note: type: enumerate
en: The title of the interactive image must be indicated in the \softmenu{Metadata of the document} ;
fr: Le titre de l'image interactive doit être renseigné dans les \softmenu{Métadonnées du document};

note: type: enumerate
en: The text of the details must be filled in the \softmenu{Object properties}, in the \softmenu{Title} and \softmenu{Description} fields of the cut out details ;
fr: Le texte des détails est renseigné dans les \softmenu{Propriétés de l'objet}, dans les champs \softmenu{Titre} et \softmenu{Description} des détails détourés;

note: type: enumerate
en: The general description of the interactive image must be indicated in the \softmenu {Object properties} of the background image.
fr: La description générale de l'image interactive doit être renseignée dans les \softmenu{Propriétés de l'objet} de l'image de fond.

note: type: section{#2}
en: Enriched interactive image
fr: Images interactives enrichies

note: type: links
en: Explore the \href{http://xia.dane.ac-versailles.fr/demo/tuto/xia2}{interactive image} created for this section of the documentation.
fr: Visualisez l'\href{http://xia.dane.ac-versailles.fr/demo/tuto/xia2}{image interactive} créée pour cette partie de la documentation.

note: type: links
en: Download the \href{http://xia.dane.ac-versailles.fr/demo/tuto/xia2/svg/xia2.svg}{svg} source file.
fr: Téléchargez le fichier source au format \href{http://xia.dane.ac-versailles.fr/demo/tuto/xia2/svg/xia2.svg}{svg}.

note: type: document
en: In this section, the goal is still to create a "traditional" interactive image (ie. in which a detail matches with a comment), but the content of the comments will be enriched with formatted text or multimedia resources.
fr: Dans cette section, l'objectif demeure la création d'une image interactive «~simple~» (autrement dit, dans laquelle un détail fait apparaître un commentaire). Cependant, le texte des commentaires sera enrichi par une mise en forme ou des ressources multimédias.

note: type: subsection{#2}
en: Formatting text
fr: Mise en forme du texte

note: type: document
en: In order to insert formatted text, the tags described in figure \ref{xia_text_tags} should be used.
fr: Afin de mettre en forme le texte, les balises indiquées dans l'illustration \ref{xia_text_tags} seront utilisées.

note: type: tikzpicture
en: \node[anchor=north west] (bold) {\includegraphics[scale=.5]{./images/Description}}; \node[descrip, below = -7mm of bold] (boldT) {This text is ***bold***}; \node[box, right = 3.5cm of bold] (bolR) {This text is in \textbf{bold}}; \node[anchor=north west, below = .2cm of bold] (italic) {\includegraphics[scale=.5]{./images/Description}}; \node[descrip, below = -7mm of italic] (italicT) {This text is in **italics**}; \node[box, right = 3.5cm of italic] (italicR) {This text is in \textit{italics}}; \node[anchor=north west, below = .2cm of italic] (texttt) {\includegraphics[scale=.5]{./images/Description}}; \node[descrip, below = -7mm of texttt] (textttT) {This text is in \verb!{{{typewriter}}}!}; \node[box, right = 3.5cm of texttt] (textttR) {This text is in \texttt{typewriter}}; \node[anchor=north west, below = .2cm of texttt] (link) {\includegraphics[scale=.5]{./images/Description}}; \node[descrip, below = 7mm of link.north] (linkT) {A link to \verb![https://www.wikipedia.org/ Wikipedia]!}; \node[box, right = 3.5cm of link] (linkR) {A link to \href{https://www.wikipedia.org/}{Wikipedia}}; \node[anchor=north west, below = .2cm of link] (relativelinks) {\includegraphics[scale=.5]{./images/Description}}; \node[descrip, below = -7mm of relativelinks] (relativelinksT) {A link to a \verb![./foo/bar.pdf local file]!}; \node[box, right = 3.5cm of relativelinks] (relativelinksR) {A link to a \href{./foo/bar.pdf}{local file\footnote{This will not work on your computer!}}}; \node[anchor=north west, below = .8cm of relativelinks] (bullets) {\includegraphics[scale=.5]{./images/Description}}; \node[descrip, below = -7mm of bullets] (bulletsT) {Making a list \\ $\ast$ of bullets \\ $\ast$ out of \\ ~$\ast$ 2 levels\footnote{Insert a \Spacebar (space) before the $\ast$}}; \node[box, right = 3.5cm of bullets.south east] (bulletsR) {Making a list \begin{itemize} \item of bullets \item out of \begin{itemize} \item2 levels \end{itemize} \end{itemize}}; \node[anchor=north west, below = 3cm of bullets] (line) {\includegraphics[scale=.5]{./images/Description}}; \node[descrip, below = 7mm of line.north] (lineT) {Drawing \\ - - - - \\ a line}; \node[box, right = 3.5cm of line] (lineR) {Drawing \\ \hrulefill \\ a line};
fr: \node[anchor=north west] (bold) {\includegraphics[scale=.5]{./images/Description}}; \node[descrip, below = -7mm of bold] (boldT) {Ce texte est en ***gras***}; \node[box, right = 3.5cm of bold] (bolR) {Ce texte est en \textbf{gras}}; \node[anchor=north west, below = .2cm of bold] (italic) {\includegraphics[scale=.5]{./images/Description}}; \node[descrip, below = -7mm of italic] (italicT) {Ce texte est en **italique**}; \node[box, right = 3.5cm of italic] (italicR) {Ce texte est en \textit{italique}}; \node[anchor=north west, below = .2cm of italic] (texttt) {\includegraphics[scale=.5]{./images/Description}}; \node[descrip, below = -7mm of texttt] (textttT) {Bout de texte \verb!{{{brut}}}!}; \node[box, right = 3.5cm of texttt] (textttR) {Bout de texte \texttt{brut}}; \node[anchor=north west, below = .2cm of texttt] (link) {\includegraphics[scale=.5]{./images/Description}}; \node[descrip, below = 7mm of link.north] (linkT) {Un lien vers \verb![https://www.wikipedia.org/ Wikipedia]!}; \node[box, right = 3.5cm of link] (linkR) {Un lien vers \href{https://www.wikipedia.org/}{Wikipedia}}; \node[anchor=north west, below = .2cm of link] (relativelinks) {\includegraphics[scale=.5]{./images/Description}}; \node[descrip, below = -7mm of relativelinks] (relativelinksT) {Un lien vers un \verb![./foo/bar.pdf fichier local]!}; \node[box, right = 3.5cm of relativelinks] (relativelinksR) {Un lien vers un \href{./foo/bar.pdf}{fichier local\footnote{Qui ne fonctionne pas dans cette documentation, évidemment!}}}; \node[anchor=north west, below = .8cm of relativelinks] (bullets) {\includegraphics[scale=.5]{./images/Description}}; \node[descrip, below = -7mm of bullets] (bulletsT) {Liste de \\ $\ast$ puces \\ $\ast$ sur \\ ~$\ast$ 2 niveaux\footnote{Insérez un \Spacebar (espace) avant le $\ast$}}; \node[box, right = 3.5cm of bullets.south east] (bulletsR) {Une liste \begin{itemize} \item de puces \item sur \begin{itemize} \item 2 niveaux \end{itemize} \end{itemize}}; \node[anchor=north west, below = 3cm of bullets] (line) {\includegraphics[scale=.5]{./images/Description}}; \node[descrip, below = 7mm of line.north] (lineT) {Dessiner \\ - - - - \\ une ligne}; \node[box, right = 3.5cm of line] (lineR) {Dessiner \\ \hrulefill \\ une ligne};

note: type: caption{#2}
en: Tags to format text
fr: Balises de mise en forme du texte

note: type: alert
en: Links to local files must be relative links. Use \verb!./! if the file is contained in the exportation folder, and \verb!../! if the file is somewhere in a parent folder. Two examples:
fr: Les liens vers les fichiers locaux doivent obligatoirement être des liens relatifs. Utilisez \verb!./! pour un fichier contenu dans le répertoire d'export, et \verb!../! pour un fichier pdf contenu dans un répertoire parent. Deux exemples:

note: type: itemize
en: \verb!./folder/file.pdf! means that your file is dropped here:
fr: \verb!./dossier/fichier.pdf! signifie que votre fichier se trouve ici:

note: type: tikzpicture
en: [grow via three points={one child at (0.5,-0.7) and two children at (0.5,-0.7) and (0.5,-1.4)}, edge from parent path={(\tikzparentnode.south) |- (\tikzchildnode.west)}] \node [auto] {exportation\_folder	/} child { node [auto] {index.html}}			 child { node [auto] {css/}} child { node [auto] {data/}} child { node [auto] {font/}} child { node [auto] {img/}} child { node [auto] {js/}} child { node [manual] {folder/} child { node [manual] {file.pdf}} }; \node[autoT] (textA) at (5,-2) {Exportation files and folder}; \node[manualT] (textM) at (5,-4) {Local file}; \draw[-stealth] (textA.west) -- (4,-2); \draw[-stealth] (textM.west) -- (4.5,-5);
fr: [grow via three points={one child at (0.5,-0.7) and two children at (0.5,-0.7) and (0.5,-1.4)}, edge from parent path={(\tikzparentnode.south) |- (\tikzchildnode.west)}] \node [auto] {dossier\_export	/} child { node [auto] {index.html}}			 child { node [auto] {css/}} child { node [auto] {data/}} child { node [auto] {font/}} child { node [auto] {img/}} child { node [auto] {js/}} child { node [manual] {dossier/} child { node [manual] {fichier.pdf}} }; \node[autoT] (textA) at (5,-2) {Dossiers et fichiers d'export}; \node[manualT] (textM) at (5,-4) {Fichier local}; \draw[-stealth] (textA.west) -- (4,-2); \draw[-stealth] (textM.west) -- (4.5,-5);

note: type: itemize
en: \verb!../file.pdf! means that your file is in a parent folder: \tikzstyle{every node}=[draw=black,thick,anchor=west] \tikzstyle{auto}=[draw=reddebian,fill=reddebian!30, text height=2.5mm] \tikzstyle{manual}=[draw=bluedane,fill=bluedane!30, text height=2.5mm] \tikzstyle{manualT}=[fill=bluedane!30,draw=bluedane, rectangle,text width=3cm, rounded corners] \tikzstyle{autoT}=[fill=reddebian!30,draw=reddebian, rectangle,text width=3cm, rounded corners]
fr: \verb!../fichier.pdf! signifie que votre fichier se trouve dans un répertoire parent: \tikzstyle{every node}=[draw=black,thick,anchor=west] \tikzstyle{auto}=[draw=reddebian,fill=reddebian!30, text height=2.5mm] \tikzstyle{manual}=[draw=bluedane,fill=bluedane!30, text height=2.5mm] \tikzstyle{manualT}=[fill=bluedane!30,draw=bluedane, rectangle,text width=3cm, rounded corners] \tikzstyle{autoT}=[fill=reddebian!30,draw=reddebian, rectangle,text width=3cm, rounded corners]

note: type: tikzpicture
en: [grow via three points={one child at (0.5,-0.7) and two children at (0.5,-0.7) and (0.5,-1.4)}, edge from parent path={(\tikzparentnode.south) |- (\tikzchildnode.west)}] \node [manual] {folder/} child { node [manual] {file.pdf} child [missing] {} } child { node [auto] {exportation\_folder/} child { node [auto] {index.html}}			 child { node [auto] {css/}} child { node [auto] {data/}} child { node [auto] {font/}} child { node [auto] {img/}} child { node [auto] {js/}} } ; \node[autoT] (textA) at (6,-4) {Exportation files and folders}; \node[manualT] (textM) at (6,-0.5) {Local file}; \draw[-stealth] (textA.west) -- (5,-4); \draw[-stealth] (textM.west) -- (3,-0.5);
fr: [grow via three points={one child at (0.5,-0.7) and two children at (0.5,-0.7) and (0.5,-1.4)}, edge from parent path={(\tikzparentnode.south) |- (\tikzchildnode.west)}] \node [manual] {folder/} child { node [manual] {fichier.pdf} child [missing] {} } child { node [auto] {dossier\_export/} child { node [auto] {index.html}}			 child { node [auto] {css/}} child { node [auto] {data/}} child { node [auto] {font/}} child { node [auto] {img/}} child { node [auto] {js/}} } ; \node[autoT] (textA) at (6,-4) {Dossiers et fichiers d'export}; \node[manualT] (textM) at (6,-0.5) {Fichier local}; \draw[-stealth] (textA.west) -- (5,-4); \draw[-stealth] (textM.west) -- (4,-0.5);

note: type: subsection{#2}
en: Inserting multimedia resources into details
fr: Insérer des ressources multimédias dans les commentaires

note: type: document
en: Inserting multimedia resources into details comments is quite easy: just paste the resource url (relative or absolute link) or iframe tag of the web service you want to use. Xia will automatically create a multimedia player in the comment as long as the resource (image, sound or video) matches its supported formats:
fr: L'insertion de ressources multimédias dans les commentaires est chose assez aisée: copiez-collez l'url de la ressource (qu'elle soit absolue ou relative) ou le code iframe du service web utilisé pour héberger votre ressource, et Xia créera automatiquement un lecteur multimédia, pour peu que celle-ci (image, son, vidéo) fasse partie des formats supportés:

note: type: document
en: The link has to be inserted into the \softmenu{Description} field of the \softmenu{Object Properties}.
fr: Le lien doit être inséré dans le champ \softmenu{Description} des \softmenu{Propriétés de l'objet}.

note: type: item[#1]
en: Absolute link
fr: Lien absolu

note: type: description
en: If the resource url is
fr: Si l'url de la ressource est

note: type: description
en: just type it in the \softmenu{Description} field of the \softmenu{Object Properties} in Inkscape
fr: il suffit alors d'écrire cette url dans le champ \softmenu{Description} des \softmenu{Propriétés de l'objet} dans Inkscape.

note: type: item[#1]
en: Relative link
fr: Lien relatif

note: type: description
en: If the multimedia file is located in the interactive image folder or in a folder (see figure \ref{xia_files} and section \ref{formattingtext}) within this one, just indicate its location, keeping in mind that the interactive image folder has to be considered as the root folder.  For example, if the \verb|video.ogv| file is located in a \verb|videos| folder located itself in the interactive image exportation folder, just indicate:
fr: Si le fichier de la ressource multimédia se trouve dans le répertoire d'export de l'image interactive, ou dans un répertoire contenu dans celui-ci (voir la rubrique \ref{formattingtext} et l'illustration \ref{xia_files}), indiquez simplement le chemin vers le fichier, en considérant le répertoire d'export comme répertoire racine. Par exemple, si le fichier \verb|video.ogv| se trouve dans le répertoire  \verb|videos| se trouvant lui-même dans le répertoire de l'image interactive, indiquez:

note: type: description
en: in order to create the player.
fr: pour créer le lecteur multimédia.

note: type: tip
en: Since video formats supported by Xia are not natively supported by every web browsers, it is recommanded to export videos into the 3 supported formats, and to upload them into a single folder (from there, the only difference between these files is their extension, ie. .ogv or .mp4 or .webm).  Even if a particular format is indicated in the description (following the previous example : \verb|./videos/video.ogv|), if the browser is unable to read the resource, it will automatically attempt to read the files of the same name possessing a different extension (ie. \verb|video.mp4| then \verb|video.webm|).
fr: Les formats vidéos gérés par Xia ne le sont pas par tous les navigateurs web. Il est donc recommandé d'exporter les vidéos dans les 3 formats supportés, et de les téléverser dans le même répertoire. Ainsi, même si un format spécifique est renseigné dans la description (si l'on suit l'exemple précédent: \verb|videos/video.ogv|), si le navigateur est incapable de lire la ressource, il cherchera automatiquement à lire les fichiers du même nom mais possédant une extension différente (c'est à dire, \verb|video.mp4| et \verb|video.webm|).

note: type: document
en: The last option is to insert an iframe tag.  It will be interpreted and the reader will appear in the comment, giving access to the resource.
fr: La dernière possibilité consiste à insérer un code iframe. Celui-ci sera interprété et le lecteur du service web apparaîtra, donnant accès à la ressource.

note: type: subsection{#2}
en: The "audioBrown" template: sounds instead of text
fr: Le modèle «~audioBrown~»: le son à la place du texte

note: type: links
en: Explore the \href{http://xia.dane.ac-versailles.fr/demo/tuto/xia4}{interactive image} created for this section of the documentation.
fr: Visualisez l'\href{http://xia.dane.ac-versailles.fr/demo/tuto/xia4}{image interactive} créée pour cette partie de la documentation.

note: type: links
en: Download the \href{http://xia.dane.ac-versailles.fr/demo/tuto/xia4/svg/xia4.zip}{svg} source file (zip file containing the svg source file and the sounds).
fr: Téléchargez le fichier source au format \href{http://xia.dane.ac-versailles.fr/demo/tuto/xia4/svg/xia4.zip}{svg} (archive contenant le fichier source au format svg et les sons associés).

note: type: document
en: The "audioBrown" template is specifically dedicated to the creation of interactive images in which details are associated with sounds instead of text.
fr: Le modèle «~audioBrown~» est spécifiquement dédié à la création d'images interactives dans lesquelles les détails sont associés à des sons plutôt qu'à du texte.

note: type: document
en: The method to insert sounds using absolute or relative links is described in section \ref{multimedia_enrichment}. If you wish the sound to play automatically as the user clicks on the comment, just add \verb|autostart| right after the url \footnote{The "\texttt{autostart}" tag also works with the other Xia templates.}:\\
fr: Pour insérer des sons, vous utiliserez des liens absolus ou relatifs en suivant la méthode décrite dans la section \ref{multimedia_enrichment}. Si vous souhaitez que le son soit joué automatiquement à la sélection du détail, ajoutez la balise \verb|autostart| après l'url de la ressource \footnote{La balise \texttt{autostart} fonctionne également avec les autres modèles d'export de Xia.}:\\

note: type: center
en: \verb|./sounds/detail_1_sound.ogg autostart|
fr: \verb|./sons/son_detail_1.ogg autostart|

note: type: subsection{#2}
en: Inserting images into your interactive image
fr: Insérer des images dans votre image interactive

note: type: document
en: Png images can be added to the background. To do so, select \softmenu{File $\rightarrow$ Import} in Inkscape to incorporate your new image.
fr: Des images au format png peuvent être ajoutées à l'image de fond. Pour faire cela, sélectionnez \softmenu{Fichier $\rightarrow$ Importer} dans Inkscape afin d'incorporer votre image.

note: type: document
en: The imported image will only appear in the html5 animation if you have applied white background in Inkscape. Choose white in the horizontal colour palette at the bottom of Inkscape interface:\\
fr: L'image importée n'apparaîtra dans l'animation html5 qu'à une condition: que vous lui ayez appliqué un fond blanc dans Inkscape. Choisissez la couleur blanche dans la palette horizontale en bas de l'interface d'Inkscape:\\

note: type: document
en: By indicating a url in the \softmenu{Title} of \softmenu{Object properties} field, the embedded image becomes a clickable icon linking to a web page.
fr: En indiquant une url dans le champ \softmenu{Titre} des \softmenu{Propriétés de l'objet}, cette image incorporée deviendra un lien cliquable.

note: type: subsection{#2}
en: Displaying a question and unveiling an answer
fr: Faire apparaître une question et dévoiler une réponse

note: type: document
en: You can create clickable icon which will momentarily prevent the user to read the end of the comment.  You can even ask the user to enter a password to read the end of the comment.
fr: Vous pouvez créer une icône cliquable, qui empêche temporairement un utilisateur de lire la suite du commentaire. Vous pouvez même demander à l'utilisateur d'indiquer un mot de passe pour lire la suite du commentaire.

note: type: document
en: To do so, just indicate, in the description, the tags described in figure \ref{xia_answer_tags}.
fr: Pour cela, utilisez dans la description les balises indiquées dans l'illustration \ref{xia_answer_tags}.

note: type: figure
en: \tikzstyle{descrip}=[font=\sffamily, anchor=north west, text width = 4.3cm] \tikzstyle{box}=[draw, text width=6cm, fill=lightgray!50, rounded corners, anchor=north west]
fr: \tikzstyle{descrip}=[font=\sffamily, anchor=north west, text width = 4.3cm] \tikzstyle{box}=[draw, text width=4cm, fill=lightgray!50, rounded corners, anchor=north west]

note: type: tikzpicture
en: \node[anchor=north west] (answer) {\includegraphics[scale=.5]{./images/Description}}; \node[descrip, below = -7mm of answer] (answerT) {[[Can I ask you a question? (code=12345): Yes, indeed I can.]]}; \node[box, right = 3.5cm of answer] (answerI) {\includegraphics[scale=.5]{./images/answer_code}};
fr: \node[anchor=north west] (answer) {\includegraphics[scale=.5]{./images/Description}}; \node[descrip, below = -7mm of answer] (answerT) {[[Puis-je vous poser une question? (code=12345): Bien sûr que c'est possible.]]}; \node[box, right = 3.5cm of answer] (answerI) {\includegraphics[scale=.5]{./images/answer_code}};

note: type: caption{#2}
en: Tags to insert a button which will momentarily prevent the user to read the end of the comment
fr: Balises permettant de créer un bouton empêchant temporairement la lecture de la suite du commentaire.

note: type: document
en: Use the double brackets tag \texttt{[[ (...) ]]} to indicate you wish to create the icon, split the text between the question and the answer with the \texttt{:} tag, and add a code by inserting \texttt{(code=insert\_password)} just before the \texttt{:} tag\footnote{The \texttt{(code={...})} is not mandatory. Remember that you can not insert the \texttt{)} character in the password.}.
fr: Utilisez la balise \texttt{[[ (...) ]]} pour indiquer que vous souhaitez créer une icône, séparez le texte de la question de celui de la réponse avec la balise \texttt{:}, et ajoutez un code en insérant \texttt{(code=mot\_de\_passe)} avant la balise \texttt{:}\footnote{Le code n'est pas obligatoire. Souvenez-vous que vous pouvez utiliser tous les caractères que vous souhaitez dans le code, sauf le \texttt{)}.}.

note: type: subsection{#2}
en: Controlling details behavior : automatic display and disabled zoom
fr: Contrôler le comportement des détails: affichage immédiat et désactivation du zoom

note: type: document
en: Default behavior of details in an interactive image consists in:
fr: Par défaut, le comportement des détails d'une image interactive est le suivant:

note: type: itemize
en: highlighting details only on mouse over or with a click on the comment detail title
fr: mise en valeur des détails au survol de la souris ou par un clic sur son titre dans les commentaires

note: type: itemize
en: zoom in effect when clicking again on the active detail
fr: effet de zoom lors d'un second clic sur le détail actif

note: type: footnote{#2}
en: Except for the popBlue template.
fr: Sauf dans le cas du modèle popBlue.

note: type: document
en: Both of these default behaviors can be modified if you apply a white or black background to cropped details (see section \ref{insertion_images}):
fr: Ces deux comportements par défaut peuvent être modifiés si vous appliquez un fond noir ou blanc aux détails détourés (voir la section \ref{insertion_images}):

note: type: item[#1]
en: Detail with a white background
fr: Détail avec un fond blanc

note: type: description
en: In the generated image, details will be immediately visible as a flat area of opaque color, hiding the background image; once selected, it reveals the background (the zoom effect is still active).
fr: Dans l'image interactive, ces détails seront visibles immédiatement, sous la forme d'un aplat de couleur opaque, cachant l'image de fond; une fois sélectionné, ce fond sera visible (le zoom demeure actif).

note: type: description
en: [Detail with a black background] Users still have to click on the detail to unveil it, but the zoom effect is disabled.
fr: [Détail avec un fond noir] Les utilisateurs devront cliquer pour activer le détail, mais l'effet de zoom est désactivé.

note: type: document
en: Logical consequence : you can not apply a white and a black background all together on the same detail.  A single detail can not be immediately displayed and have the zoom effect disabled.
fr: Conséquence logique: comme un détail ne saurait avoir simultanément un fond noir et un fond blanc, un détail ne peut donc être à la fois immédiatement visible et avoir le zoom désactivé.

note: type: subsection{#2}
en: Controlling order of details display in the lateral comment zone
fr: Contrôler l'ordre d'affichage des détails dans la barre latérale des commentaires

note: type: document
en: By default, in the interactive image, the details appear vertically following the order in which these details have been created (the first detail created in Inkscape corresponding to the detail placed up in the sidebar of the interactive image).
fr: Par défaut dans une image interactive, les détails apparaissent verticalement en suivant l'ordre dans lequel ils ont été créés dans Inkscape (le premier détail créé dans Inkscape correspond à celui placé en haut dans la barre latérale de l'image interactive).

note: type: document
en: We will work with the \softmenu{Edit $\rightarrow$ XML Editor} to change this default order.
fr: Pour changer cet ordre par défaut, nous utiliserons l'\softmenu{Éditeur XML}, situé dans le menu \softmenu{Édition}.

note: type: document
en: A priori complex to manage, this dialogue window is in fact quite easy to use : by selecting the input in the XML editor, the corresponding detail will be highlighted on the image and the only thing left to do is to drag the files to the desired location:\\
fr: A priori complexe, cette fenêtre de dialogue est en réalité assez simple à utiliser: en sélectionnant une entrée de l'éditeur XML, le détail correspondant à celle-ci sera mis en évidence sur l'image. Il ne reste plus qu'à glisser-déposer l'entrée à l'endroit désiré:\\

note: type: document
en: The Inkscape XML editor allows to control the display order of the details in the interactive image. Note the highlighting of an element in the editor and on the background image by a single mouse click.
fr: L'éditeur XML d'Inkscape permet de contrôler l'ordre d'affichage des détails dans l'image interactive. Remarquez la mise en évidence d'un élément sur l'image de fond par simple sélection dans l'éditeur.

note: type: enumerate
en: You can enrich and shaping text using tags
fr: Vous pouvez enrichir et mettre en forme le texte en utilisant des balises

note: type: enumerate
en: A multimedia enrichment is possible through a simple link (relative or absolute) to a file whose format is recognized by Xia
fr: L'enrichissement multimédia est possible par simple lien (relatif ou absolu) vers un fichier dont le format est reconnu par Xia

note: type: enumerate
en: Adding images to the background image is possible by importing them and applying them a white background
fr: On ajoute des images sur l'image de fond en les incorporant et en leur appliquant un fond blanc.

note: type: enumerate
en: It is possible to modify the default behavior of a detail by changing its color background (white, black)
fr: On peut modifier le comportement par défaut des détails en leur appliquant une couleur de fond (blanc ou noir)

note: type: enumerate
en: The order of the details in the interactive image depends on the order of their creation in Inkscape. Nevertheless, the Inkscape XML editor allows to change this order
fr: L'ordre des détails de l'image interactive dépend de l'ordre de leur création dans Inkscape. Cependant, on peut utiliser l'éditeur XML d'Inkscape pour modifier cet ordre

note: type: enumerate
en: It is possible prevent the user to access the comments by inserting a clickable icon and / or a password
fr: Il est possible d'empêcher les utilisateurs d'accéder au commentaire en insérant une icône cliquable et / ou un mot de passe

note: type: section{#2}
en: Creating games with Xia
fr: Créer des jeux avec Xia

note: type: document
en: Until now, this document was only about creation of traditionnal "interactive images": background image enriched with cropped details associated with texts.
fr: Jusqu'à maintenant, cette documentation n'a traité que de la création d'image interactive «~traditionnelle~»: une image de fond, des détails détourés associés à des commentaires.

note: type: document
en: This kind of interactive image can be used in class in various situations (students progressively discovering a document, or creating an interactive image on their own), but Xia introduces new features, such as the creation of games and activities, in which the final user has much more to do than simply clicking on details in order to read the comment.
fr: Ce type d'image interactive peut être utilisé en classe dans des situations très variées (les élèves découvrent progressivement une image, ou créent eux-mêmes une image interactive), mais Xia va plus loin avec de nouvelles fonctionnalités. On peut désormais créer des jeux, des activités, dans lesquelles l'utilisateur final a bien davantage à faire que de simplement cliquer sur des détails et lire du texte.

note: comments type: tikzpicture
en: \node[box, text width=2.5cm,above left = 5mm of files] (filesC) {Select the svg source file}; \node[box, above = 5mm of params] (paramsC) {Define the options of the export (see figure \ref{xia_export_options})}; \node[box, right = 5mm of guClic] (guClicC) {\href{http://xia.dane.ac-versailles.fr/demo/tuto/xia3}{game1clic}\\ selecting details on a background image \\ How-to in section \ref{game1clicsection}}; \node[box, left = 25mm of bBlue] (aBrownC) {\href{http://xia.dane.ac-versailles.fr/demo/tuto/xia4}{audioBrown} \\ creation of interactive images in which details are associated with sounds \\ How-to in section \ref{audioBrownsection}}; \node[box, below left = 5mm of pBlue] (gDDropC) {\href{http://xia.dane.ac-versailles.fr/demo/tuto/xia5}{gameDragAndDrop}\\ drag and drop graphical elements on the background images \\ How-to in section \ref{gameDragAndDropsection}};
fr: \node[box, text width=2.5cm,above left = 5mm of files] (filesC) {Sélection du fichier source au format svg}; \node[box, above = 5mm of params] (paramsC) {Définition des options d'exportation (voir l'illustration \ref{xia_export_options})}; \node[box, right = 5mm of guClic] (guClicC) {\href{http://xia.dane.ac-versailles.fr/demo/tuto/xia3}{game1clic}\\ Sélectionner des détails sur une image de fond \\ Tutoriel dans la rubrique \ref{game1clicsection}}; \node[box, left = 25mm of bBlue] (aBrownC) {\href{http://xia.dane.ac-versailles.fr/demo/tuto/xia4}{audioBrown} \\ Création d'images interactives dans lesquelles des détails sont associés à des sons \\ Tutoriel dans la rubrique \ref{audioBrownsection}}; \node[box, below left = 5mm of pBlue] (gDDropC) {\href{http://xia.dane.ac-versailles.fr/demo/tuto/xia5}{gameDragAndDrop}\\ Glisser et déposer des éléments sur l'image de fond \\ Tutoriel dans la rubrique \ref{gameDragAndDropsection}};

note: arrows type: tikzpicture
en: \draw[-stealth] (guClicC.west) -- (guClic.east); \draw[-stealth] (gDDropC.north) -- (gDDrop.south west); \draw[-stealth] (aBrownC.east) -- (aBrown.west); \draw[-stealth] (filesC.south east) -- (files.north west); \draw[-stealth] (paramsC.south) -- (params.north);
fr: \draw[-stealth] (guClicC.west) -- (guClic.east); \draw[-stealth] (gDDropC.north) -- (gDDrop.south); \draw[-stealth] (aBrownC.north east) -- (aBrown.north); \draw[-stealth] (filesC.south east) -- (files.north west); \draw[-stealth] (paramsC.south) -- (params.north);

note: type: caption{#2}
en: Xia's games and multimedia templates
fr: Les modèles multimédias et ludiques de Xia

note: type: subsection{#2}
en: First game principle: selecting, finding elements in the image
fr: Premier principe ludique: sélectionner, trouver des éléments dans une image

note: type: document
en: \textit{The game principle described in this section consists in selecting details on a background image. When the user has reached the goal described in the instructions, a message appears in a final pop up.}
fr: \textit{Le principe ludique décrit dans cette partie de la documentation est le suivant: le joueur doit sélectionner des détails dans une image, quand il a sélectionné les éléments indiqués dans la consigne, un message de fin apparaît.}

note: type: links
en: Explore the \href{http://xia.dane.ac-versailles.fr/demo/tuto/xia3}{interactive image} created for this section of the documentation.
fr: Visualisez l'\href{http://xia.dane.ac-versailles.fr/demo/tuto/xia3}{image interactive} créée pour cette partie de la documentation.

note: type: links
en: Download the \href{http://xia.dane.ac-versailles.fr/demo/tuto/xia3/svg/xia3.svg}{svg} source file.
fr: Téléchargez le fichier source au format \href{http://xia.dane.ac-versailles.fr/demo/tuto/xia3/svg/xia3.svg}{svg}.

note: type: document
en: This kind of game is almost the easiest way to create an interactive image.  You only have to crop the details that the final user will have to select.
fr: Ce type de jeu est presque le type d'image interactive la plus facile à créer. Vous devez uniquement détourer les détails que le joueur devra sélectionner.

note: type: document
en: The instructions must be completed in the metadata of the document. Xia will look into the informations filled in the \softmenu{Description} field of the metadata of the document (see section \ref{preparation_svg}: \softmenu{File $\rightarrow$ Metadata of the document}), and create an instruction «~pop up~» that will show up at the opening of the game. The player will just have to read the instructions and close the pop up to play the game.
fr: Les consignes doivent être indiquées dans les métadonnées du document. Xia cherchera les informations relatives aux consignes dans le champ \softmenu{Description} des métadonnées du document (voir la section \ref{preparation_svg}: \softmenu{Fichier $\rightarrow$ Métadonnées du document}), et créera une pop up affichant ces consignes à l'ouverture du jeu. Le joueur pourra les lire, fermer la fenêtre puis jouer.

note: type: document
en: When the user completes the game, a message automatically appears.  This message has to be filled in the \softmenu{Description} field of the \softmenu{Object Properties} of the background image.
fr: Quand un joueur termine le jeu, un message apparaît automatiquement. Ce message doit être renseigné dans le champ \softmenu{Description} des \softmenu{Propriétés de l'objet} de l'image de fond.

note: type: document
en: Two informations are needed in order for this message to pop up : the exact number of details that have to be selected\footnote{This number does not have to match the number of details on the image.} and the message itself (see table \ref{tag1_sumup}).
fr: Vous trouverez tous les détails sur l'endroit et la manière d'indiquer ces informations dans le tableau \ref{tag1_sumup}.

note: type: tabular
en: Goal
fr: Objectif

note: type: tabular
en: Enter the number of correct answers needed to complete the game
fr: Renseigner le nombre de réponses correctes permettant de terminer le jeu

note: type: tabular
en: Display a message
fr: Afficher un message

note: type: tabular
en: Tag
fr: Balise

note: type: tabular
en: Example
fr: Exemple

note: type: tabular
en: \multicolumn{2}{|l|}{\texttt{<message>Congratulations!}}
fr: \multicolumn{2}{|l|}{\texttt{<message>Bravo!}}

note: type: tabular
en: \multicolumn{2}{|l|}{\texttt{You have completed the game!</message>}}
fr: \multicolumn{2}{|l|}{\texttt{Vous avez terminé le jeu!</message>}}

note: type: caption{#2}
en: Sum up of tags in a game1clic game
fr: Résumé des balises du jeu game1clic

note: type: tip
en: Text inserted inside the \verb|<message></message>| tag can be enriched. Images, videos or sounds can be inserted.  It is also possible to insert a link, allowing users to play another game, in order to "chain" activities up by degree of difficulty.
fr: Le texte inséré dans la balise \verb|<message></message>| peut être enrichi avec des images, des vidéos, du son. On peut aussi imaginer ajouter un lien vers un autre jeu, ce qui permettrait aux utilisateurs d'enchaîner les jeux par degré de difficulté.

note: type: document
en: Once your svg source file is created, choose the template \softmenu{game1clic} to generate the interactive game.
fr: Une fois votre fichier svg préparé, choisir le modèle d'export \softmenu{game1clic} pour générer le jeu.

note: type: subsection{#2}
en: Second game principle: classyfying, ordering, ranking
fr: Second principe ludique: classer, organiser, hiérarchiser

note: type: document
en: \textit{The second kind of game that can be created with Xia consists in dragging and dropping graphical elements on the background image. If all the elements have been dropped on their corresponding drop zone, a pop up message appears, confirming the achievement of the game.}
fr: Le second type de jeu pouvant être créé avec Xia est basé sur le principe du glisser-déposer. Des étiquettes déplaçables sont déposées sur l'image de fond. Quand tous les éléments ont été placés sur leur zone de dépôt, un message apparaît, annonçant la fin du jeu.

note: type: links
en: Explore the \href{http://xia.dane.ac-versailles.fr/demo/tuto/xia5}{interactive image} created for this section of the documentation.
fr: Visualisez l'\href{http://xia.dane.ac-versailles.fr/demo/tuto/xia5}{image interactive} créée pour cette partie de la documentation.

note: type: links
en: Download the \href {http://xia.dane.ac-versailles.fr/demo/tuto/xia5/svg/xia5.svg}{svg} source file.
fr: Téléchargez le fichier source au format \href{http://xia.dane.ac-versailles.fr/demo/tuto/xia5/svg/xia5.svg}{svg}.

note: type: document
en: This is how you can create a game based on the drag and drop principle :
fr: Voici comment créer un jeu basé sur le principe du glisser-déposer:

note: type: enumerate
en: In Inkscape:
fr: Dans Inkscape:

note: type: itemize
en: Choose and import a background picture
fr: Choisir et importer une image de fond

note: type: itemize
en: Create the graphical elements the users of the interactive image will have to drag and drop (ie. images or group of words: see below for a how-to)
fr: Créer les éléments que les utilisateurs de votre image interactive auront à déplacer et à déposer (autrement dit: des images, des mots ou groupes de mots: voir ci-dessous les explications)

note: type: itemize
en: Create the instruction pop up in \softmenu{File $\rightarrow$ Metadata of the document $\rightarrow$ Description}
fr: Créer la fenêtre surgissante de consignes en éditant les informations du champ \softmenu{Fichier $\rightarrow$ Métadonnées du document $\rightarrow$ Description}

note: type: footnote{#2}
en: Exactly as in the game1clic template.
fr: Exactement comme dans le jeu game1clic

note: type: itemize
en: Using metadata, make each label match its drop zone (actually being cropped details)
fr: En renseignant les métadonnées, faites correspondre chaque élément à une zone de dépôt (ces zones de dépôts étant en réalité des détails détourés)

note: type: enumerate
en: In Xia
fr: Dans Xia

note: type: itemize
en: Export the svg source file using the \softmenu{gameDragAndDrop} template
fr: Exporter le fichier source au format svg avec le modèle \softmenu{gameDragAndDrop}

note: type: document
en: Two methods can be used to create the drag and drop "graphical-elements".  A very simple way is to use a screenshot tool, in order to create png files, and then import them in Inkscape.  It is also possible to create these elements directly in Inkscape, by creating a text, grouping it with a shape, and finally making a bitmap copy of this group (\softmenu{Edition $\rightarrow$ Make a bitmap copy})
fr: Deux méthodes peuvent être utilisées pour créer les éléments que les joueurs auront à glisser et déposer. La première, très simple, consiste à utiliser un utilitaire de capture d'écran capable de créer des petites images au format png, puis d'importer celles-ci dans Inkscape. Il est également possible de créer ces éléments directement dans Inkscape. Par exemple, en créant un texte, en regroupant ce texte avec une forme puis en faisant une copie bitmap de cet ensemble (\softmenu{Édition $\rightarrow$ Créer une copie bitmap}).

note: type: document
en: The graphical elements then have to be associated with their drop zone \footnote{\textbf{One} object can only match \textbf{one} drop zone.}. In order to do that, make the \softmenu{ID} field of the drop zone match the \softmenu{Description} field of the drag and drop graphical element.  The only subtlety consists in the \verb|<target></target>| tags which have to be filled in the \softmenu {Description} field.
fr: Les éléments à déplacer doivent être associés à leur zone de dépôt \footnote{\textbf{Un} objet ne pouvant être associé qu'à \textbf{une} zone de dépôt.}. Pour faire cela, il faut «~jumeler~» les éléments à glisser-déposer avec leur zone de dépôt en faisant correspondre le champ \softmenu{ID} de la zone de dépôt au champ \softmenu{Description} de l'élément à glisser déposer. La seule subtilité tient dans la balise \verb|<target></target>| devant être indiquée dans la \softmenu{Description}.

note: type: document
en: You will find in the table \ref{tag2_sumup} an abstract of the metadata to be filled in the \softmenu{Object Properties} of the drag and drop graphical elements and the corresponding details in order to make them match.
fr: Vous trouverez dans le tableau \ref{tag2_sumup} un résumé des balises à renseigner dans les \softmenu{Propriétés de l'objet} des éléments à déplacer et des zones de dépôts afin de les faire correspondre les unes aux autres.

note: type: tabular
en: Graphical element (drag and drop objects in the game)
fr: Élément à déplacer (objets à glisser et déposer)

note: type: tabular
en: Cropped detail (drop zone)
fr: Détail détouré (zone de dépôt)

note: type: tabular
en: ID Field
fr: Champ ID

note: type: tabular
en: \verb|Detail_Title|
fr: \verb|Titre_du_détail|

note: type: tabular
en: Description Field
fr: Champ description

note: type: tabular
en: \verb|<target>Detail_Title</target>|
fr: \verb|<target>Titre_du_détail</target>|

note: type: caption{#2}
en: Sum up of tags in the gameDragAndDrop template
fr: Résumé des balises à utiliser dans le jeu gameDragAndDrop

note: type: document
en: Once your svg source file is created, choose the template \softmenu{gameDragAndDrop} to generate the interactive game.
fr: Une fois votre fichier svg préparé, choisir le modèle \softmenu{gameDragAndDrop} pour générer le jeu.

note: type: subsection{#2}
en: Third game principle: collisions
fr: Troisième principe ludique: les collisions

note: type: document
en: \textit{The game principle described in this section consists in moving objects within bounds you defined. Typically, the "collisions" game principle can be used to create mazes or gem puzzle.}
fr: \textit{Le principe ludique documenté dans cette section est le suivant: le joueur doit déplacer des éléments vers des zones de dépôt, mais les déplacements de ces éléments ne peuvent avoir lieu que dans certaines limites. Le jeu de type «~collisions~» peut ainsi être utilisé pour créer des labyrinthes, des taquins.}

note: type: links
en: Explore the \href{http://xia.dane.ac-versailles.fr/demo/tuto/xia6/}{interactive image} created for this section of the documentation.
fr: Visualisez l'\href{http://xia.dane.ac-versailles.fr/demo/tuto/xia6}{image interactive} créée pour cette partie de la documentation.

note: type: links
en: Download the \href {http://xia.dane.ac-versailles.fr/demo/tuto/xia6/svg/xia6.svg}{svg} source file.
fr: Téléchargez le fichier source au format \href{http://xia.dane.ac-versailles.fr/demo/tuto/xia6/svg/xia6.svg}{svg}.

note: type: document
en: In order to create this kind of game, add the tag \verb|<collisions>on</collisions>| to the background image. All the details will then become solid and will prevent objects (png imported files or bitmap copies of shapes created in Inkscape) from being moved through them.
fr: Pour créer ce type de jeu, ajoutez la balise \verb|<collisions>on</collisions>| à l'image de fond. Une fois cela fait, tous les détails deviennent «~solides~», et bloquent le déplacement des objets qu'il faut déplacer (images au format png importées, ou copie bitmap de formes dessinées avec Inkscape).

note: type: document
en: The "collision" game is in fact a gameDragAndDrop game, since the goal remains to drag one or several objects and drop them somewhere on the image.  The requisite tags for this template are therefore the same as in the gameDragAndDrop template \footnote{\texttt{<target></target>} on the objects, \texttt{<score></score>} and \texttt{<message></message>} on the background image: see section \ref{gameDragAndDropsection}.}, but you will apply the \verb|<collisions>off</collisions>| tag to the drop zone's \softmenu{Description} field.
fr: Le jeu de type «~collisions~» est en réalité un jeu de type gameDragAndDrop, puisque la résolution passe par le dépôt d'un ou plusieurs éléments à certains endroits de l'image. Les balises nécessaires dans ce type de jeu sont donc les mêmes que dans le jeu gameDragAndDrop \footnote{\texttt{<target></target>} sur les objets, \texttt{<score></score>} et \texttt{<message></message>}  sur l'image de fond: voir la section \ref{gameDragAndDropsection}.}, mais il faudra penser à appliquer la balise \verb|<collisions>off</collisions>| sur les zones de dépôts, dans le champ \softmenu{Description}.

note: type: subsection{#2}
en: \emph{Advanced interactive games creation tips}: Magnet effect, tooltips, double-scoring\ldots
fr: \emph{Astuces pour la création de jeux interactifs}: effet aimant, infobulles, double compteur de score\ldots

note: type: subsubsection{#2}
en: Showing the player's score (game1clic template)
fr: Montrer la progression dans le jeu (thème game1clic)

note: type: document
en: It is possible to display graphical elements automatically when the user selects the correct answer. These elements can be png imported images or shapes directly designed in Inkscape.  But as Xia considers as a clickable detail any shapes designed using Inkscape tools, you will have to transform these shapes in bitmap, using the "bitmap copy" Inkscape tool.  For example :
fr: Il est possible de faire s'afficher des éléments graphiques quand le joueur sélectionne une réponse correcte. Ces éléments peuvent être des png importés ou des formes directement dessinées dans Inkscape. Comme Xia considère qu'une forme dessinée avec les outils d'Inkscape est un détail, il faudra transformer ces formes en utilisant l'outil «~copie bitmap~». Par exemple:

note: type: enumerate
en: Draw a star with yellow sides on a yellow background with the Inkscape tools
fr: Dessinez une étoile aux bords jaunes et au fond jaune avec les outils de dessin d'Inkscape

note: type: enumerate
en: Select this star, and click on the \softmenu{Edition $\rightarrow$ Make a bitmap copy}
fr: Sélectionnez cette étoile, et cliquez sur \softmenu{Édition $\rightarrow$ Créer une copie bitmap}

note: type: enumerate
en: Delete the first star
fr: Supprimer l'étoile créée avec les outils de dessin

note: type: document
en: When the graphical elements are imported (png files) or created (bitmap copy of shapes created manually), just apply the following carasteristics to these elements:
fr: Une fois les éléments importés (format png) ou créés (copie bitmap des formes dessinées manuellement), appliquez-leurs les caractéristiques suivantes:

note: type: center
en: \softmenu{Interactivity > OnClick} = \verb|off|
fr: \softmenu{Interactivité > OnClick} = \verb|off|

note: type: document
en: Then, group the clickable detail to its graphical element (by successively clicking on the detail and the graphical element with the \Shift keystroke on), then select \softmenu{Group} in the Inkscape \softmenu{Object} menu.
fr: Ensuite, groupez le détail cliquable et son élément graphique (en cliquant successivement sur le détail et l'élément en maintenant la touche \Shift enfoncée), puis en sélectionnant \softmenu{Grouper} dans le menu \softmenu{Objet} d'Inkscape.

note: type: subsubsection{#2}
en: Showing the player's mistakes (game1clic template)
fr: Montrer les erreurs du joueur (thème game1clic)

note: type: document
en: Games based on the details selection principle are obviously very interesting educational games\ldots but it is also quite obvious to guess how some students may be tempted to cheat to achieve such games (for example, by frenetically clicking everywhere on the image, until the final message pops up).
fr: On voit clairement l'intérêt pédagogique des jeux basés sur le principe de la sélection\ldots mais on voit également rapidement comment des élèves peuvent être tentés de contourner le dispositif ludique pour terminer les jeux sans avoir à réfléchir (par exemple, en cliquant frénétiquement partout sur l'image, jusqu'à trouver par hasard tous les détails répondant à la consigne).

note: type: document
en: This is why it may be interesting to be able to highlight the user's mistakes during the game.
fr: C'est la raison pour laquelle il peut être intéressant de mettre en valeur les erreurs commises par le joueur.

note: type: document
en: To do so, you will anticipate the user's probable mistakes, and put explicit graphical elements symbolizing these errors on the background image.  This graphical element may be an imported image (png file) or a shape directly designed with the Inkscape tools, then converted into bitmap (see section \ref{playersscore}).. These elements will have to include the following caracteristics:
fr: Pour cela, il faudra prévoir les erreurs pouvant être commises, et placer sur l'image des éléments graphiques symbolisant l'erreur (croix rouge, etc.). Ces éléments pouvant être des images au format png importées ou des formes dessinées dans Inkscape, puis copiées en bitmap (voir la rubrique \ref{playersscore}). Ces éléments devront posséder les caractéristiques suivantes:

note: type: center
en: \softmenu{Interactivity > OnClick} = \verb|disable-score|
fr: \softmenu{Interactivité > OnClick} = \verb|disable-score|

note: type: document
en: When applied with a \verb|disable-score| tag, a detail still remains clickable, but does not add a score to the counter that delivers the final success message pop up.
fr: Une fois la balise \verb|disable-score| appliquée, le détail demeure cliquable, mais sa sélection n'ajoutera pas un point au compteur surveillant le score pour délivrer le message de fin.

note: type: subsubsection{#2}
en: How to add a "magnet" effect (gameDragAndDrop template)
fr: Comment ajouter un effet «~aimant~» (thème gameDragAndDrop)

note: type: document
en: If you indicate \verb|<magnet>on</magnet>| in the \softmenu{Description} field of the drop zone, a magnet effect will then be active when the player drops the graphical element onto its matching drop zone.
fr: Si vous indiquez \verb|<magnet>on</magnet>| dans le champ \softmenu{Description} de la zone de dépôt, un effet aimant sera activé quand le joueur déposera l'élément sur celle-ci.

note: type: subsubsection{#2}
en: Links on drop zones (gameDragAndDrop template)
fr: Liens sur les zones de dépôt (thème gameDragAndDrop)

note: type: document
en: You can insert links in the \softmenu{Title} field of the \softmenu{Object Properties} of the drop zones. The user can then open the link by clicking on it or by dropping its corresponding detail on it.
fr: Vous pouvez insérer un lien dans le champ \softmenu{Titre} des \softmenu{Propriétés de l'objet} de la zone de dépôt. L'utilisateur peut cliquer sur cette zone ou y déposer l'étiquette correspondante pour suivre le lien.

note: type: subsubsection{#2}
en: Tooltips (game1clic and gameDragAndDrop templates)
fr: Infobulles (thèmes game1clic et gameDragAndDrop)

note: type: links
en: Explore the \href{http://xia.dane.ac-versailles.fr/demo/tuto/xia7}{interactive image} created for this section of the documentation.
fr: Visualisez l'\href{http://xia.dane.ac-versailles.fr/demo/tuto/xia7}{image interactive} créée pour cette partie de la documentation.

note: type: links
en: Download the \href{http://xia.dane.ac-versailles.fr/demo/tuto/xia7/svg/xia7.svg}{svg} source file.
fr: Téléchargez le fichier source au format \href{http://xia.dane.ac-versailles.fr/demo/tuto/xia7/svg/xia7.svg}{svg}.

note: type: document
en: It is possible to display tooltips of details on mouse-over. To do so, create the tooltip with a png imported file or a bitmap copy (see section \ref{playersscore})  of a text created in Inkscape\footnote{Or a bitmap copy of a shape grouped with some text\ldots}, and apply to this tooltip a specific \softmenu{ID} in its \softmenu{Object Properties}. Then, just apply the tag \verb|<tooltip>specific_ID_of_the_tooltip</tooltip>| in the \softmenu{Description} field of the \softmenu{Object Properties} of the detail that is supposed to make the tooltip appear (for example, in the image below: on mouse-over, the yellow square makes the tooltip ``Test'' appear):\\
fr: Il est possible de faire s'afficher des infobulles lorsque la souris survole certains détails. Pour cela, créez l'infobulle avec une image au format png importée ou une copie bitmap (voir rubrique \ref{playersscore}) d'un texte créé dans Inkscape\footnote{Ou une copie bitmap d'une forme groupée avec du texte\ldots}, et appliquez à cette infobulle une \softmenu{ID} spéicifique dans les \softmenu{Propriétés de l'objet}. Ensuite, indiquez la balise \verb|<tooltip>ID_de_l_infobulle</tooltip>| dans le champ \softmenu{Description} des \softmenu{Propriétés de l'objet} du détail censé déclencher l'apparition de l'infobulle (par exemple, dans l'image ci-dessous: au survol de la souris, le carré jaune fait apparaître l'infobulle "Test"):\\

note: type: document
en: Note that the tooltip tool is available in the game1clic and in the gameDragAndDrop templates.\\
fr: Notez que cette fonctionnalité est également disponible avec les thèmes game1clic et gameDragAndDrop.\\

note: type: subsubsection{#2}
en: Double scoring (game1clic and gameDragAndDrop templates)
fr: Double compteur de score (thèmes game1clic et gameDragAndDrop)

note: type: document
en: If you indicate \verb|score2| in the \softmenu{onclick} field (\softmenu{Object Properties $\rightarrow$ Interactivity}) of the detail, and if you use \texttt{<score2></score2>} and \texttt{<message2></message2>} in the \softmenu{Object Properties} of the background image, you create a double scoring game. In this kind of game, the user can select two different categories of details, two messages can pop up at the end, depending on the category and number of details the user has selected.
fr: En indiquant \verb|score2| dans le champ \softmenu{onclick} (\softmenu{Propriétés de l'objet $\rightarrow$ Interactivité}) du détail, et en utilisant les balises\\
    \texttt{<score2></score2>} et \texttt{<message2></message2>} dans les \softmenu{Propriétés de l'objet} de l'image de fond, on peut créer un système de double comptage des points, dans lequel l'utilisateur peut sélectionner deux types de détails différents.

note: type: document
en: For example, you can create a game with 3 details tagged with \texttt{score2} (corresponding to mistakes), and indicate in the \softmenu{Object Properties} of the background image:\\ \texttt{<score>4</score>\\ <message>Hurray!</message>\\ <score2>3</score2>\\ <message2>Three mistakes... that is a bit too much... Concentrate more and do it again</message2>}\\
fr: Ainsi, vous pouvez créer un jeu où 3 détails comportent la balise \texttt{score2} (cette balise correspondant à des erreurs), et indiquez dans les \softmenu{Propriétés de l'objet} de l'image de fond:\\ \texttt{<score>4</score>\\ <message>Bravo!</message>\\ <score2>3</score2>\\ <message2>3 erreurs... Ça fait beaucoup...\\
    Concentrez-vous et recommencez!...</message2>}\\

note: type: document
en: These tables sum up the tags that have to be indicated when a game is created:
fr: Ces tableaux résument les balises pouvant être utilisées dans le cadre de la création de jeux avec Xia:

note: type: tabular
en: \multicolumn{3}{|l|}{\softmenu{game1clic} template}
fr: \multicolumn{3}{|l|}{Modèle \softmenu{game1clic}}

note: type: tabular
en: \emph{Role}
fr: \emph{Rôle}

note: type: tabular
en: Sets the amount of correct answers needed to pop up the end message of the game
fr: Permet de régler le nombre de bonnes réponses nécessaires pour faire apparaître le message de fin du jeu

note: type: tabular
en: \emph{Element}
fr: \emph{Élément}

note: type: tabular
en: Background picture
fr: Image de fond

note: type: tabular
en: \emph{Where ?}
fr: \emph{Où?}

note: type: tabular
en: \softmenu{Object properties $\rightarrow$ Description}
fr: \softmenu{Propriétés de l'objet $\rightarrow$ Description}

note: type: tabular
en: \emph{What ?}
fr: \emph{Quoi?}

note: type: tabular
en: A number corresponding to the required score
fr: Le nombre de bonnes réponses nécessaires à la résolution du jeu

note: type: tabular
en: \multicolumn{3}{|l|}{\texttt{<message></message>}}
fr: \multicolumn{3}{|l|}{\texttt{<message></message>} }

note: type: tabular
en: Pops up the end message of the game
fr: Fait apparaître le message de fin du jeu

note: type: tabular
en: A personalized message if necessary enriched with multimedia or html links
fr: Message que vous pouvez enrichir avec des ressources multimédias ou un lien hypertexte

note: type: tabular
en: Makes a cropped detail unclickable
fr: Rend un détail insensible au clic

note: type: tabular
en: Detail
fr: Détail

note: type: tabular
en: \softmenu{Object properties $\rightarrow$ Interactivity $\rightarrow$ Onclick}
fr: \softmenu{Propriétés de l'objet $\rightarrow$ Interactivité $\rightarrow$ Onclick}

note: type: tabular
en: Makes a cropped detail clickable, but when clicked, does not add a point to the score game counter
fr: Rend un détail détouré cliquable, mais sa sélection n'ajoutera pas de point au compteur de score

note: type: tabular
en: Makes a detail add a score to the score2 counter
fr: Ajoute un point au deuxième compteur de score

note: type: tabular
en: Displays a tooltip when moused-over
fr: Affiche une infobulle au survol de la souris

note: type: tabular
en: Make sure to match the ID of the element used as tooltip
fr: Assurez-vous que ce champ est identique à l'ID de l'élément servant d'infobulle

note: type: tabular
en: Sets the amount of correct answers needed to pop up the second end message in a double scoring game
fr: Régler le nombre de bonnes réponses nécessaires à l'apparition du second message (jeu à double score)

note: type: tabular
en: Pops up the second end message in a double scoring game
fr: Fait apparaître le second message de fin du jeu (jeu à double score)

note: type: caption{#2}
en: Complete game1clic tags
fr: Balises à insérer pour un jeu de type game1clic

note: type: tabular
en: \multicolumn{3}{|l|}{\softmenu{gameDragAndDrop} template}
fr: \multicolumn{3}{|l|}{Modèle \softmenu{gameDragAndDrop}}

note: type: tabular
en: Indicates the corresponding drag and drop element and drop zone
fr: Indique la correspondance entre l'élément à déplacer et la zone de dépôt

note: type: tabular
en: Graphical element to move
fr: Élément à déplacer

note: type: tabular
en: \softmenu{Object Properties $\rightarrow$ Description}
fr: \softmenu{Propriétés de l'objet $\rightarrow$ Description}

note: type: tabular
en: Make sure to match the ID field of the drop zone
fr: Assurez-vous que ce champ est identique à l'ID de la zone de dépôt

note: type: tabular
en: Adds a "magnet" effect
fr: Ajoute un effet «~aimant~»

note: type: tabular
en: Drop zone
fr: Zone de dépôt

note: type: tabular
en: Activates the "collisions" game principle
fr: Active le jeu de type "collisions"

note: type: tabular
en: Creates a drop zone in a "collisions" game
fr: Crée une zone de dépôt dans un jeu de type "collisions"

note: type: tabular
en: Drop zone, Graphical element to move
fr: Zone de dépôt, éléments à déplacer

note: type: caption{#2}
en: Complete gameDragAndDrop tags
fr: Balises à insérer en vue d'un export gameDragAndDrop

note: type: section{#2}
en: Frequently asked questions and Inkscape tips
fr: Foire aux questions et trucs et astuces pour le logiciel Inkscape

note: type: subsection{#2}
en: FAQ
fr: Foire aux questions

note: type: document
en: \textbf{I can not see the Xia extension in Inkscape. Why?}\\ $\rightarrow$ Have you installed Inkscape first? If not, you must install Xia. If you use the portable version, Xia does not appear in the extension menu.
fr: \textbf{Je ne vois pas Xia dans le menu extensions d'Inkscape. Pourquoi?}\\ $\rightarrow$ Avez-vous installé Inkscape avant Xia? Si ce n'est pas le cas, ré-installez Xia. Si vous utilisez la version portable de Xia, le fait que rien n'apparaisse dans le menu extension est tout à fait normal.

note: type: document
en: \textbf{The "source file" icon does not appear when I launch Xia from the extension menu of Inkscape. Why?}\\ $\rightarrow$ When you launch Xia as an Inkscape extension, there is no "Source File" button, since Xia assumes you want to create the html5 animation from the image you are working on in Inkscape.  Just choose the exportation options and the template.
fr: \textbf{L'icône «~Fichier source~» n'apparaît pas quand je lance Xia depuis le menu extension d'Inkscape. Pourquoi?}\\ $\rightarrow$ En lançant Xia depuis les extensions d'Inkscape, il n'y a pas d'icône «~Fichier source~», puisque Xia considère que l'animation html5 que vous souhaitez générer est celle sur laquelle vous travaillez dans Inkscape... Choisissez donc uniquement les options d'exportation et le modèle.

note: type: document
en: \textbf{I have installed Xia but I can not find it. How can I launch it?}\\ $\rightarrow$ Xia can be found in the "Applications" of Mac OS X.  On a GNU/Linux system, the Xia package is called "xia-converter".  In Windows, Xia is only an Inkscape extension. If you wish to launch Xia without Inkscape, use the portable version.
fr: \textbf{J'ai installé Inkscape mais je ne le retrouve pas dans mes programmes. Où se cache-t-il?}\\ $\rightarrow$ Xia se trouve dans le dossier des «~Applications~» de Mac OS X.  Sur un sytème GNU/Linux, le paquet Xia porte le nom «~xia-converter~».  Sur Windows, Xia ne fonctionne que comme extension d'Inkscape. Si vous souhaitez utiliser le logiciel seul, utilisez la version portable.

note: type: document
en: \textbf{I have added some text on my image with the Inkscape text tool ("Create and Edit text objects"), but it does not appear on my interactive image. Why?}\\ $\rightarrow$ Unless you make a bitmap copy of the text, Xia will consider the text created with the "Create and Edit text Objects" as a detail, and not an image.
fr: \textbf{J'ai ajouté du texte sur mon image avec l'outil «~Créer et éditer des objets textes~», mais je ne le vois pas apparaître dans mon image interactive. Pourquoi?}\\ $\rightarrow$ Si vous ne faites pas de copie bitmap du texte, Xia considèrera que le texte créé avec l'outil «~Créer et éditer des objets textes~» est un détail, et pas une image à afficher.

note: type: subsection{#2}
en: Inkscape tips
fr: Astuces Inkscape

note: type: itemize
en: Don't hesitate to fill your details with different colours.  The details will be easier to select and modify, and it will not have any consequences on the html5 animation (unless you choose black or white as filling colors)
fr: Ajoutez des couleurs de fond à vos détails. Les détails seront ainsi plus faciles à sélectionner et modifier, et cela n'aura aucune conséquence sur l'animation html5 (sauf si vous choisissez le blanc ou le noir comme couleur de remplissage).

note: type: itemize
en: If you want to create one detail out of several, you can "Group" them (\softmenu{Object} $\rightarrow$ \softmenu{Group}, or \Ctrl + \keystroke{G}) or "Unify" them (\softmenu{Path} $\rightarrow$ \softmenu{Union}, or \Ctrl + \keystroke{+}).
fr: Si vous voulez créer un détail à partir de plusieurs, vous pouvez les «~Grouper~» (\softmenu{Objet} $\rightarrow$ \softmenu{Grouper}, ou \Ctrl + \keystroke{G}) ou les «~Unir~» (\softmenu{Chemin} $\rightarrow$ \softmenu{Union}, or \Ctrl + \keystroke{+}).

note: type: itemize
en: Once a detail is created, it is always possible to modify it: you can add or remove nodes, move them, etc. Just double-click on the detail, and use the modifying tools:\\
fr: Quand un détail est créé, il est toujours possible de les modifier: ajout ou suppression de nœuds, déplacement, etc. Il suffit de double-cliquer sur un détail et d'utiliser les outils de modification:\\

note: type: itemize
en: Some keyboard shortcuts are real time savers!
fr: Certains raccourcis claviers vous feront gagner énormément de temps!

note: type: enumerate
en: to access the \softmenu{Alignment and Distribution} tools
fr: pour accéder aux outils d'\softmenu{Alignement et de distribution}

note: type: enumerate
en: to access the \softmenu{Object Properties}
fr: pour accéder aux \softmenu{Propriétés de l'objet}

note: type: enumerate
en: to create a bitmap copy of a shape designed in Inkscape
fr: pour créer une copie bitmap d'une forme dessinée dans Inkscape

note: type: enumerate
en: \fbox{\Ctrl + \keystroke{g}} to group different objects or details and \fbox{\Ctrl + \Shift + \keystroke{g}} to ungroup them
fr: \fbox{\Ctrl + \keystroke{g}} pour grouper différents objets ou détails et \fbox{\Ctrl + \Shift + \keystroke{g}} pour les dégrouper

note: type: itemize
en: If you create your interactive image directly with the Inkscape drawing tools (with bitmap copies of shapes or imported images), it is highly recommended to group all the objects, make a bitmap copy of them, and use this bitmap copy as a background image. Otherwise, some images or bitmap copies may disappear in the interactive image when details in top of them are selected (since the main purpose of a detail is to let the user see the background image when selected).
fr: Si vous créez votre image interactive uniquement avec les outils de dessin d'Inkscape (en faisant des copies bitmap de formes ou d'images importés), nous vous recommandons fortement de grouper tous les objets (y compris l'image de fond), de faire une copie bitmap de cet ensemble, et d'utiliser cette copie bitmap comme image de fond. Si vous ne le faites pas, certaines images ou copies bitmap risque de disparaître dans l'image interactive lorsque des détails situés au-dessus d'eux seront sélectionnés (ce qui est logique: le rôle principal d'un détail est de permettre à l'utilisateur de voir ce qui se trouve sur l'image de fond).
