Tutoriels pour Inkscape et Xia
Créez vos images interactives !
Usages du numérique Formation Ressources
mercredi 20 janvier 2016, par
Présentation
Xia est un logiciel libre développé par des enseignants de l’académie de Versailles. Il est distribué sous la licence GPLv3.
XIA est un « outil auteur » qui, couplé à Inkscape, vous permet de réaliser simplement des images interactives, avec des détails zoomables et des jeux sérieux en html5.
Pour bien comprendre :
- Inkscape : logiciel de traitement vectoriel d’images permet d’associer des informations à une image ou des détails d’une image. Ces informations, écrites en format texte dans des onglets, sont intégrées au fichier « *.svg » créé par Inkscape lors de enregistrement de votre travail. Ce fichier « *.svg » se présente comme une image classique et sa taille en kilooctets est très petite. Tel que, le fichier n’a aucune interactivité...
- XIA : ce logiciel est devenu une extension d’Inkscape. Il est donc accessible depuis Inkscape, même si les deux doivent avoir été installés, Inkscape puis XIA, sur votre ordinateur. XIA va « récupérer », « assembler » et compiler en langage html5 toutes les informations embarquées dans l’image « *.svg ». Le tout en quelques secondes.
Mutualisation et partage
Une formidable opportunité vous est offerte avec ce duo magique Inkscape-XIA : travailler seul ou à plusieurs sur un même projet, puis partager ce projet simplement, via le web ou par mail.
Car, même si la quantité d’informations est importante, le fichier *.svg sera très facile à faire circuler grâce à sa taille très faible.
l’exemple ci-dessous est parlant : l’image interactive présente une quantité non négligeable d’informations ; le fichier « Tuto_Xia_Couleurs_Dane_2000_1300_win.svg » « pèse » 429 Koctets.
Si vous avez installé Inkscape et XIA, téléchargez ce fichier, ouvrez-le avec Inkscape et exportez-le avec XIA dans un dossier que vous aurez créé avant pour accueillir votre image interactive : vous obtiendrez, avec des logos et un fond différents, la même image interactive !
- Ouverture dans une fenêtre :
Cliquer sur cette image pour afficher l’image interactive des tutoriels
- Ouverture en plein écran :
Tutoriels pour Inkscape et Xia
Documents source
- Image source du tutoriel (sur base bitmap au format PNG ci-dessous), exportée avec Xia en accordion black :
- Logos (Fond aux couleurs du site HR et logos HR-MA) :
- Image de base créée avec Inkscape (Charte Dane académie de Versailles, couleurs des rectangles et police BPreplay). C’est ce dessin vectoriel qui, exporté en bitmap, me donne l’image de fond « *.png ».
Liens
- Site de XIA
- Site d’Inkscape
- Site de la Dane de l’académie de Versailles
- Scalable Vector Graphics, « SVG »
- HTML5 (HyperText Markup Language 5)
Dans la même rubrique
Les viandes de boucherie. Découpe du veau
Image interactive des morceaux du veau
Morphologie et critères de fraîcheur d’un poisson
Image interactive d'une daurade
Processus de reclyclage des boites de conserve
Création réalisée dans le cadre du partenariat UPPIA - MEN
Cuire du sucre avec XIA
Thermomètre interactif