Différences

Ci-dessous, les différences entre deux révisions de la page.

--- editeur-svg-interactif [2018/05/08 13:11] – [Objectifs techniques] ideefixe
+++ editeur-svg-interactif [2019/04/20 12:02] (Version actuelle) – supprimée ideefixe
@@ Ligne 1: / Ligne 1: @@
-======Editeur SVG interactif======
-[[https://mothsart.github.io/editeur-svg-interactif.html|Source]]
-L'objectif est simple : éditer un fichier SVG statique afin de le présenter comme un contenu interactif. Permettre l'ajout de zones cliquables pouvant être zoomés et enrichies d'une explication.
-Les fichiers générés (page Html contenant le svg) peuvent servir à divers usages :
-  * contenus éducatifs
-  * support de présentation
------
-{{ :mothsart:editeur_svg_exemple.png?direct&600 |}}
------
-=====Objectifs techniques=====
-  * Créer des illustrations interactives avec toujours le même gabarit : une légende contenant des indices titrés et un descriptif pour une zone de l'illustration.
-  * Permettre des zooms sur les zones décrites
-  * Avoir un contenu responsive (vu que le contenu est pleinement vectoriel, pourquoi s'en priver)
-  * Etre et rester simple d'utilisation (KISS et philosophie Unix) et productif pour enrichir une illustration à vocation pédagogique.
-  * Rester simple à développer et maintenir : un mode Debug permet justement d'étendre le logiciel afin de mieux le tester.
-  * Utilisation hors ligne et intégré dans une distribution Linux via un paquet .deb
------
-=====Utilisation=====
-On glisse et on dépose (ou on choisi via son explorateur de fichiers) son fichier svg statique. (si possible sans animation et javascript) On arrive sur une interface nous permettant d'éditer ce fichier.
-On ajoute des indices dans la légende. Ces derniers s'affichent également sur notre illustration si l'on clique sur les icones d'affichages (des yeux).
-On les positionne au gré de nos envies (en restant appuyé sur le clic gauche) sur l'indice à déplacer.
-Un menu déroulant sur l'indice est disponible afin de l'éditer : Il est possible de changer la couleur, de zoomer mais également d'ajouter/editer le titre et la description de notre indice.
-L'accès au mode de visualisation nous permet d'avoir un apperçu du rendu final. (avec les animations sur les indices si le zoom a été paramètré).
-Il est possible de changer l'odre de nos indices (en les sélectionnant et les glissants) et d'en supprimer ainsi que de les afficher ou non. (pratique si l'on ne veut se concentrer que sur un éventail précis)
-Le bouton Enregistrer son travail permet de convertir notre illustration interactive en un fichier html. (équivalent au mode de visualisation)
-Si l'on veut repartir d'une feuille blanche, il suffit de cliquer sur Supprimer.
------