Sozi et SPIP

Waielbi — 2019-12-09T08:41:04Z

Sozi est un outil créé par Guillaume Savaton pour produire des présentations animées à partir de fichiers SVG. Ces présentations sont utilisables lors de cours, conférences, présentations, ... et elles trouveront naturellement leur place sur un site car leur support est fait pour le web. Comment intégrer ces créations sur un site SPIP ?

Sozi

Initialement Sozi était un plugin pour Inkscape qui permet d'animer les fichiers SVG à l'aide de js. Le code js était directement ajouté au fichier SVG. Depuis quelques temps Sozi est une application à part entière qui utilise le fichier SVG et créé l'animation dans un fichier html à côté. Au final on a donc deux types de Sozi selon leur période de création :

des fichiers Sozi-svg créés directement dans Inkscape comme cet exemple, ce n'est plus la bonne façon de procéder...
des fichiers Sozi-html créés par Sozi : exemple.

Le but de cet article n'est pas de montrer comment on créé les animations, pour cela on ira voir ce tutoriel de l'auteur de Sozi, mais plutôt le « comment les intégrer à un article SPIP ».

Certes, Sozi nécessite d'avoir apprivoisé un logiciel de dessin vectoriel comme Inkscape. Mais une fois à l'aise avec Inkscape, Sozi présente plusieurs avantages :

on utilise les présentations sur n'importe quel PC du moment qu'il possède un navigateur ;
la mise en ligne de ces présentations est assez simple ;
c'est très adapté pour des tutoriels car cela prend moins de place sur une page et la navigation d'une diapo à l'autre est facile ;
enfin, on peut aussi créer des documents non linéaires comme avec Impress/PowerPoint ou ajouter du contenu vidéo...

Au départ il y a le fichier SVG...

Le point de départ de notre présentation est le fichier SVG que l'on va créer. C'est lui qui contient tous les éléments graphiques et textuels. Là, Inkscape s'impose comme l'outil le plus adapté. Remarque, il faudra faire attention aux polices utilisées dans le fichier, si elles sont un peu exotiques il y a de fortes chances que le visiteur du site ne les ait pas installées et... qu'elles ne s'affichent pas. On peut utiliser les services de nano [1] pour incorporer nos polices au fichier SVG.

SVG pur ou mix SVG / images matricielles ?

La première chose est de savoir si on va avoir besoin de fichiers graphiques matriciels comme des jpg ou des png. Si on produit du svg pur, tout tiendra dans le futur fichier Sozi-html et les choses seront faciles à intégrer dans notre site SPIP. Par contre si on doit utiliser des images jpg ou png dans notre présentation deux cas se présentent :

les incorporer au fichier svg, on obtient un seul fichier mais son poids peut être élevé... voici un exemple avec deux images de 350 x 350 px« tinifiées » [2], le svg final pèse 133ko et le sozi-html 193ko :

Présentation sozi aves jpg et png incorporés
les lier au fichier svg, le fichier svg reste léger mais pour qu'il affiche les images il faut les déplacer avec lui et conserver le lien relatif, concrètement on a deux méthodes possibles :
- on place les jpg et png dans un dossier img au même niveau, mais on ne peut plus uploader cela comme un document SPIP, il nous faut un accès ftp pour déposer notre présentation sur le serveur ;
- une fois le svg terminé, on charge nos images matricielles dans la médiathèque de SPIP et on modifie les url des images dans Inkscape en les remplaçant par les url absolues des fichiers dans SPIP, exemple :
  
  Avec des images liées importées dans la bibliothèque SPIP

On retrouve les url des images chargées dans SPIP en ajoutant « https://www.son-site-spip.fr/IMG/png/ » devant le nom du fichier en fonction du type de fichier (jpg, png, gif, ...). Par exemple photo_01.jpg une fois chargée dans la médiathèque se trouve à l'adresse https://www.waielbi.net/IMG/jpg/photo_01.jpg... on peut facilement retrouver cette adresse dans la médiathèque :


Url d'une image sans la médiathèque SPIP

Dans Inkscape, un clic-droit → « Propriétés de l'image... » permet d'afficher son url et de la modifier :


Modifier l'url d'une image incorporée dans Inkscape

SPIP et les SVG

SPIP se méfie des fichiers SVG car ils peuvent contenir du code js, et c'est le cas des svg produits par le plugin Sozi pour Inkscape. Les fichiers téléversés dans un article, sont « sanitizés [3] », c'est à dire que SPIP enlève les éléments potentiellement dangereux comme le code javascript à l'affichage (via les balises et . Du coup l'interactivité des Sozi ancienne méthode n'est pas utilisable directement, il faut appeler le fichier manuellement dans une balise html. Une raison de plus pour abandonner le plugin Sozi au profit de l'appli.

Car, les Sozi-html téléversés dans SPIP par le formulaire « Ajouter une image ou un document » peuvent être affichés directement dans une page.

Incorporer un Sozi dans une page SPIP

La méthode de base

On insère la balise document dans le texte de l'article. Une icône html est insérée, le visiteur qui clique dessus et affiche le Sozi dans la fenêtre courante. Facile mais pas très pratique, car à la fin de la présentation le visiteur ne peut revenir sur la page SPIP simplement sauf à cliquer sur la flèche « Précédent » du navigateur autant de fois que nécessaire...


Présentation sozi aves jpg et png incorporés

La méthode embeded

Attention à la version de SPIP ! En effet depuis la version 4, les documents ne sont plus gérés de la même façon et la balise emb a disparu [4]. L'utiliser affichera : mais rien de plus. Ce site est en SPIP 4, il n'affiche donc pas les balise emb.

Sur SPIP 3.x, une fois notre Sozi-html téléversé, on peut l'inclure par la balise
ce qui l'affiche dans la page. Noter que :

si notre fichier svg n'a pas de fond, la couleur de fond est celle du site (gris ici). Cela peut se régler par l'ajout d'un élément rectangulaire coloré en arrière plan ou en ajoutant une couleur de fond dans les propriétés du document Inkscape (Menu « Fichier » → « Propriétés du document ») ;
si on veut scroller la page vers le bas/haut, quand on passe sur le Sozi, ça zoome/dézoome au lieu de scroller. On peut empêcher cela dans Sozi en décochant la flèche du curseur « Autoriser le zoom » dans Sozi :

Options de visionnage de Sozi

La méthode mediabox

Elle consiste à utiliser le plugin MediaBox inclus dans SPIP. Cela suppose de récupérer l'url de notre fichier Sozi-html :


Copier l'url du Sozi téléversé, clic-droit sur l'icône du document

Ensuite on créé un lien sur du texte ou sur une image en utilisant les classes mediabox et boxiframe :

https://www.waielbi.net/IMG/html/sozi_spip_img_incorporees.html" class='mediabox boxIframe boxWidth-900px boxHeight-600px'>image ou texte du lien

Ce qui donne :

Icône ou lien sur lequel on clique pour afficher la présentation Sozi...

On reste sur la page et la présentation Sozi est mise en valeur dans la fenêtre modale que l'on peut paramétrer (SPIP → Configuration → Gestion des plugins → Mediabox). Une fois la fenêtre modale fermée, le visiteur reviens naturellement à la page en cours.

Et pour les présentations importées en ftp?

Pour les présentations avec de nombreuses images jpg, png ou gif et à condition d'avoir un accès ftp sur le site SPIP, le plus simple est de lier les images au lieu de les incorporer dans Inkscape puis de téléverser l'ensemble dans un dossier à la racine du site. Cela permet de créer des présentations qui restent acceptables en terme de poids et de temps de préparation. Ensuite on créer un lien dans notre page SPIP, éventuellement par la méthode Mediabox. Par exemple :

Cette présentation a été uploadée en ftp car elle utilise de nombreuses copies d'écran

Méthode iFrame

Exemple ici avec la présentation de Sozi sur le site de l'auteur, Guillaume Savaton : connaissant l'adresse du fichier (https://sozi.baierouge.fr/presentations/this-is-not-a-slideshow.sozi.html), on créé un iFrame dans la page SPIP avec ce code :

https://sozi.baierouge.fr/presentations/this-is-not-a-slideshow.sozi.html"> ;

Ce qui donne :

[1] Nano - https://vecta.io/nano - est un site qui permet d'optimiser le code svg pour le tinifier mais aussi d'incorporer les polices au fichier svg.

[2] avec le service en ligne tinypng

[3] Ceci est pris en charge par le plugin SafeHtml depuis Spip 4.2 - voir https://www.spip.net/fr_article6806.html

[4] Voir cette page : https://www.spip.net/fr_article6428.html - L'ajout de la variable define ('_COMPORTEMENT_HISTORIQUE_IMG_DOC_EMB', true); dans le fichier mes_options.php ne rétablit pas le comportement des balises emb de SPIP3 dans SPIP4.