tag:linuxfr.org,2005:/tags/svg/publicLinuxFr.org : les contenus étiquetés avec « svg »2024-03-05T11:43:21+01:00/favicon.pngtag:linuxfr.org,2005:Diary/410792024-02-26T01:13:52+01:002024-02-26T01:13:52+01:00Générer des images vectorielles procédurales avec des technologies des années 2000Licence CC By‑SA http://creativecommons.org/licenses/by-sa/4.0/deed.fr<p>Cher nal, récemment je ré-étudiais pour la n-ième fois le problème de concevoir des schémas <em>simplement</em> par un langage de description graphique (je n'aime pas les éditeurs visuels) avec potentiellement une partie générée procéduralement, pour faciliter certaines constructions. J'avoue que je suis plutôt du style « à l'ancienne », donc j'ai regardé le classique tikz (vraiment trop ésotérique quand on n'est pas un habitué du Latex), xfig (j'aime bien les vieilles interfaces, mais là bof), dia (que j'ai utilisé à ses débuts, mais ici trop spécifique aux diagrammes), mais aucun ne me convenait.</p>
<p>Comme le média de destination de ces schémas est le Web, j'ai essayé de regarder directement le format vectoriel standard pour celui-ci : <a href="https://fr.wikipedia.org/wiki/Scalable_Vector_Graphics">Scalable Vector Graphics</a>, ou SVG. Je l'ai souvent vu comme un format plutôt « bas-niveau », uniquement destiné à être le format final issu de sources plus « haut-niveau ». Mais j'ai eu une expérience il y a quelques années d'écriture directe de SVG qui retranscrivait une courbe de Bézier qui m'a bien plu, au point que je me suis dit que je devrais le regarder de plus près pour voir si ça ne serait pas possible d'écrire du SVG directement pour mon besoin.</p>
<p>Je me suis alors penché sur la très bonne <a href="https://developer.mozilla.org/en-US/docs/Web/SVG">documentation de Mozilla sur SVG</a> et ça m'a permis de me mettre le pieds à l'étrier. J'ai d'abord trouvé un petit projet d'exemple de dessiner un minuteur, avec des formes pas trop compliquée : un cercle, quelques segments, etc. Et finalement, j'ai été supris par la simplicité d'écrire directement du SVG. Mais très vite j'ai eu besoin de générer une partie de ce SVG « procéduralement » (avec des constructions de répétition propres à un langage de programmation).</p>
<p>Comme vous le savez, SVG est basé sur XML, la technologie des années 2000<sup id="fnref1"><a href="#fn1">1</a></sup> par excellence : un langage de balisage issu de HTML et SGML qui respecte un ensemble de règles bien définies, comme le fait d'être une structure arborescente. J'ai l'habitude de travailler sur du XML avec <a href="https://fr.wikipedia.org/wiki/Extensible_Stylesheet_Language_Transformations">XSLT</a>, un langage de transformation que je trouve super utile, même si sa syntaxe horripile tout le monde, moi y compris à certains moments. J'ai essayé d'imaginer comment faire ce que je voulais avec, mais l'orientation algorithmique du problème (générer 60 marques, dont une marque plus grosse toutes les cinq marques) commençait à me faire peur, vu les limitations du langage<sup id="fnref2"><a href="#fn2">2</a></sup>.</p>
<p>J'ai alors pensé à une vieille connaissance que j'avais utilisé il y a deux décennies, à la grande époque de Python comme langage révolutionnaire pour le Web (au début des années 20000 ; ce qui a un peu foiré) : <a href="https://fr.wikipedia.org/wiki/Zope">Zope</a>. Pas pour tout le framework ORM qui l'accompagnait, mais pour son langage de <em>templating</em> (<em>patronnage</em> ça fait bizarre en français)<a href="https://en.wikipedia.org/wiki/Template_Attribute_Language">TAL</a>, qui respecte les principes de XML jusqu'au bout : le langage de template n'est pas invasif et respecte la structure du document (qui reste donc un fichier XML valide) contrairement à de nombreux moteurs de template modernes qui utilisent des syntaxes qui se superposent mal à XML ; il utilise avantageusement un namespace séparé pour ne pas rendre invalide le document ; il est basé sur Python, qui est le langage que je visais tout à fait pour l'écriture de la partie procédurale.</p>
<p>Seul problème : je veux TAL, mais je ne veux pas le reste de Zope. Et de toutes façons, Zope n'est plus disponible sur Debian depuis des lustres. Je regarde alors les alternatives, qui sont listées sur Wikipédia.</p>
<p>Je vois tout d'abord <a href="https://www.owlfish.com/software/simpleTAL/">Simple TAL</a>, qui semble répondre à mes besoins : pas de dépendance, simple, stable, etc. J'essaye, et ça marche plutôt bien : ça fait étrange de retrouver la syntaxe verbeuse de TAL, mais j'aime bien, même si la gestion d'erreur très rudimentaire fait que je me retrouve parfois avec des bouts de message d'erreurs mélangés à mon contenu… Bof bof, mais ça peut passer pour des petits travaux. Ça donne ça :</p>
<pre><code class="xml"><span class="nt"><svg</span> <span class="na">xmlns=</span><span class="s">"http://www.w3.org/2000/svg"</span> <span class="na">version=</span><span class="s">"1.1"</span> <span class="na">width=</span><span class="s">"200"</span> <span class="na">height=</span><span class="s">"200"</span><span class="nt">></span>
<span class="nt"><g</span> <span class="na">id=</span><span class="s">"minutes"</span> <span class="na">z=</span><span class="s">"1"</span><span class="nt">></span>
<span class="nt"><circle</span> <span class="na">cx=</span><span class="s">"100"</span> <span class="na">cy=</span><span class="s">"5"</span> <span class="na">r=</span><span class="s">"2"</span>
<span class="na">tal:repeat=</span><span class="s">"angle python:[i*6 for i in range(60) if i%5]"</span>
<span class="na">tal:attributes=</span><span class="s">"transform string:rotate(${angle}, 100, 100)"</span><span class="nt">/></span>
<span class="nt"></g></span>
<span class="nt"><g</span> <span class="na">id=</span><span class="s">"fives"</span> <span class="na">z=</span><span class="s">"1"</span><span class="nt">></span>
<span class="nt"><rect</span> <span class="na">x=</span><span class="s">"98.5"</span> <span class="na">y=</span><span class="s">"0"</span> <span class="na">width=</span><span class="s">"3"</span> <span class="na">height=</span><span class="s">"10"</span>
<span class="na">tal:repeat=</span><span class="s">"angle python:[i*30 for i in range(12)]"</span>
<span class="na">tal:attributes=</span><span class="s">"transform string:rotate(${angle}, 100, 100)"</span><span class="nt">/></span>
<span class="nt"></g></span>
<span class="nt"><g</span> <span class="na">id=</span><span class="s">"slice"</span> <span class="na">tal:define=</span><span class="s">"timeangle python:int(path('time'))*6"</span><span class="nt">></span>
<span class="c"><!-- XXX fix z --></span>
<span class="c"><!-- XXX if angle is more than 180, 4th and 5th args to A have to change --></span>
<span class="nt"><path</span>
<span class="na">fill=</span><span class="s">"red"</span>
<span class="na">z=</span><span class="s">"0"</span>
<span class="na">tal:define=</span><span class="s">"</span>
<span class="s"> timesegx python:100-95*math.sin(path('timeangle')/360*2*math.pi);</span>
<span class="s"> timesegy python:100-95*math.cos(path('timeangle')/360*2*math.pi)"</span>
<span class="na">tal:attributes=</span><span class="s">"d string:M 100 5 L 100 100 L ${timesegx} ${timesegy} A 95 95 0 0 1 100 5 Z"</span><span class="nt">/></span>
<span class="nt"><rect</span> <span class="na">x=</span><span class="s">"98.5"</span> <span class="na">y=</span><span class="s">"5"</span> <span class="na">width=</span><span class="s">"3"</span> <span class="na">height=</span><span class="s">"95"</span> <span class="nt">/></span>
<span class="nt"><rect</span> <span class="na">x=</span><span class="s">"98.5"</span> <span class="na">y=</span><span class="s">"5"</span> <span class="na">width=</span><span class="s">"3"</span> <span class="na">height=</span><span class="s">"95"</span>
<span class="na">tal:define=</span><span class="s">"angle python:-path('timeangle')"</span>
<span class="na">tal:attributes=</span><span class="s">"transform string:rotate(${angle}, 100, 100)"</span><span class="nt">/></span>
<span class="nt"></g></span>
<span class="nt"></svg></span></code></pre>
<p><img src="//img.linuxfr.org/img/687474703a2f2f646f6c6b612e66722f62617a61722f74616c2d7376672d6578706572696d656e742f74696d65722e737667/timer.svg" alt="Compte à rebours 10 minutes" title="Source : http://dolka.fr/bazar/tal-svg-experiment/timer.svg"></p>
<p>Mais quelques semaines après, pour une seconde utilisation, je trouve cette approche pas encore assez à mon goût. Cette fois-ci, je veux reprendre un SVG existant, et le « génériciser ». Ce fichier c'est une représentation des flottants en informatique <a href="https://en.wikipedia.org/wiki/File:IEEE_754_Double_Floating_Point_Format.svg">https://en.wikipedia.org/wiki/File:IEEE_754_Double_Floating_Point_Format.svg</a></p>
<p>Je reprends la liste des alternatives ZPT, et je regarde de plus près <a href="https://github.com/malthe/chameleon">Chameleon</a> (disponible sur Debian avec le package python3-chameleon) : le projet semble lié à <a href="https://trypyramid.com/">Pyramid</a>, un framework Web que j'aime beaucoup et que j'ai utilisé il y a dix ans, basé sur des idées vraiment bonnes selon moi (allez voir ce que font les mecs du <a href="https://pylonsproject.org/">projet Pylons</a> pour avoir une meilleure idée). Par exemple, il parse la template en bytecode Python directement, pour éviter le jonglage avec des traductions intermédiaires de source, ça me semble bien. Il est fourni uniquement sous forme de bibliothèque, pour faciliter son intégration<sup id="fnref3"><a href="#fn3">3</a></sup>.</p>
<p>Du coup, après avoir passé au départ un gros temps de nettoyage du SVG généré par Inkscape, je commence à tester, et ça marche vraiment bien : assez vite, j'utilise le fait que le type d'expression par défaut est Python, et non les chemins d'objet ZPT (qui sont bien adaptés pour l'ORM de Zope, mais moins quand on a un code Python simple à 100%), ce qui simplifie beaucoup le code. Puis je remplace les très XML-èsque tal:attributes (qui me rappellent les xsl:attribute) par l'utilisation de l'insertion de texte directe sur des attributs, qui sont donc littéralement écrits avec comme valeur une expression utilisant la syntaxe ${…}, issue de Genshi. Elle remplacera même plus tard même les tal:replace ou tal:content pour les contenus d'élément texte. Certes, on se rapproche ainsi plus des moteurs de <em>template</em> classiques, mais ça ne casse au moins pas la structure, qui serait plus amochée si je n'utilisais pas les tal:repeat, ou la définition de variables utiles avec tal:define.</p>
<p>J'ai au début uniquement programmé la répétition des barres de l'image, puis des points sous la barre. Puis je suis allé encore plus loin pour ce cas précis de flottant en informatique, en généricisant pour n'importe quelle taille d'exposant ou de fraction. Enfin j'ai rendu dynamique le positionnement du texte au-dessus, ce qui me permet au passage de le passer en français. Et au final, ça donne ça :</p>
<pre><code class="xml"><span class="cp"><?xml version="1.0" encoding="UTF-8"?></span>
<span class="c"><!-- </span>
<span class="c"> This work is adapted from "IEEE 754 Double Floating Point Format"</span>
<span class="c"> <https://commons.wikimedia.org/wiki/File:IEEE_754_Double_Floating_Point_Format.svg></span>
<span class="c"> by Codekaizen <https://commons.wikimedia.org/wiki/User:Codekaizen>,</span>
<span class="c"> used under CC BY SA 4.0 <https://creativecommons.org/licenses/by-sa/4.0/>.</span>
<span class="c"> This work is licenced under CC BY SA 4.0 <https://creativecommons.org/licenses/by-sa/4.0/></span>
<span class="c"> by Benjamin Cama <benoar@dolka.fr>.</span>
<span class="c"> Date: 2024-02</span>
<span class="c">--></span>
<span class="c"><!--!</span>
<span class="c"> Parameters:</span>
<span class="c"> exponent: The float’s exponent size, in bits.</span>
<span class="c"> fraction: The float’s fraction size, in bits.</span>
<span class="c">--></span>
<span class="cp"><?python</span>
<span class="cp">def nbars(n):</span>
<span class="cp"> "Size of `n` bars."</span>
<span class="cp"> return n * 9</span>
<span class="cp">?></span>
<span class="nt"><svg</span> <span class="na">xmlns=</span><span class="s">"http://www.w3.org/2000/svg"</span>
<span class="na">xmlns:tal=</span><span class="s">"http://xml.zope.org/namespaces/tal"</span>
<span class="na">tal:define=</span><span class="s">"exponent int(exponent); fraction int(fraction); start 28"</span>
<span class="na">width=</span><span class="s">"${ start + nbars(1 + exponent + fraction + 1) }"</span> <span class="na">height=</span><span class="s">"100"</span><span class="nt">></span>
<span class="nt"><defs></span>
<span class="nt"><rect</span> <span class="na">id=</span><span class="s">"bar"</span> <span class="na">width=</span><span class="s">"${nbars(1)}"</span> <span class="na">height=</span><span class="s">"28"</span><span class="nt">/></span>
<span class="nt"></defs></span>
<span class="nt"><style></span>
#bar { stroke: black; }
.above { stroke: black; fill: none; }
text { font-size: 12px; text-align: center; text-anchor: middle; font-family: sans }
circle { stroke: black; fill: black; fill-opacity: 0.25; }
<span class="nt"></style></span>
<span class="nt"><g></span>
<span class="c"><!-- bars --></span>
<span class="nt"><use</span> <span class="na">href=</span><span class="s">"#bar"</span> <span class="na">tal:repeat=</span><span class="s">"i range(1)"</span>
<span class="na">style=</span><span class="s">"fill:#d5ffff"</span> <span class="na">x=</span><span class="s">"${ start + nbars(i) }"</span> <span class="na">y=</span><span class="s">"44"</span><span class="nt">/></span>
<span class="nt"><use</span> <span class="na">href=</span><span class="s">"#bar"</span> <span class="na">tal:repeat=</span><span class="s">"i range(1, 1+exponent)"</span>
<span class="na">style=</span><span class="s">"fill:#a4ffb4"</span> <span class="na">x=</span><span class="s">"${ start + nbars(i) }"</span> <span class="na">y=</span><span class="s">"44"</span><span class="nt">/></span>
<span class="nt"><use</span> <span class="na">href=</span><span class="s">"#bar"</span> <span class="na">tal:repeat=</span><span class="s">"i range(1+exponent, 1+exponent+fraction)"</span>
<span class="na">style=</span><span class="s">"fill:#ffb2b4"</span> <span class="na">x=</span><span class="s">"${ start + nbars(i) }"</span> <span class="na">y=</span><span class="s">"44"</span><span class="nt">/></span>
<span class="c"><!-- sign --></span>
<span class="nt"><g</span> <span class="na">tal:define=</span><span class="s">"x start + nbars(0 + 1/2)"</span><span class="nt">></span>
<span class="nt"><text</span> <span class="na">style=</span><span class="s">"text-anchor: end"</span><span class="nt">></span>
<span class="nt"><tspan</span> <span class="na">x=</span><span class="s">"${ x + 2 }"</span> <span class="na">y=</span><span class="s">"25"</span> <span class="nt">></span>signe<span class="nt"></tspan></span>
<span class="nt"></text></span>
<span class="nt"><path</span> <span class="na">class=</span><span class="s">"above"</span> <span class="na">d=</span><span class="s">"M ${x},31.5 L ${x},41.5"</span><span class="nt">/></span>
<span class="nt"></g></span>
<span class="c"><!-- exponent --></span>
<span class="nt"><text</span> <span class="na">tal:define=</span><span class="s">"x start + nbars(1 + exponent/2)"</span><span class="nt">></span>
<span class="nt"><tspan</span> <span class="na">x=</span><span class="s">"${x}"</span> <span class="na">y=</span><span class="s">"12.5"</span> <span class="nt">></span>exposant<span class="nt"></tspan></span>
<span class="nt"><tspan</span> <span class="na">x=</span><span class="s">"${x}"</span> <span class="na">y=</span><span class="s">"25"</span> <span class="nt">></span>(${exponent} bits)<span class="nt"></tspan></span>
<span class="nt"></text></span>
<span class="nt"><path</span> <span class="na">tal:define=</span><span class="s">"x1 start + nbars(1); x2 start + nbars(1 + exponent)"</span>
<span class="na">class=</span><span class="s">"above"</span> <span class="na">d=</span><span class="s">"M ${x2-1},41.5 L ${x2-1},31.5 L ${x1},31.5 L ${x1},41.5"</span><span class="nt">/></span>
<span class="c"><!-- fraction --></span>
<span class="nt"><text</span> <span class="na">tal:define=</span><span class="s">"x start + nbars(1 + exponent + fraction/2)"</span><span class="nt">></span>
<span class="nt"><tspan</span> <span class="na">x=</span><span class="s">"${x}"</span> <span class="na">y=</span><span class="s">"12.5"</span><span class="nt">></span>fraction<span class="nt"></tspan></span>
<span class="nt"><tspan</span> <span class="na">x=</span><span class="s">"${x}"</span> <span class="na">y=</span><span class="s">"25"</span> <span class="nt">></span>(${fraction} bits)<span class="nt"></tspan></span>
<span class="nt"></text></span>
<span class="nt"><path</span> <span class="na">tal:define=</span><span class="s">"x1 start + nbars(1 + exponent); x2 start + nbars(1 + exponent + fraction)"</span>
<span class="na">class=</span><span class="s">"above"</span> <span class="na">d=</span><span class="s">"M ${x2},41.5 L ${x2},31.5 L ${x1+1},31.5 L ${x1+1},41.5"</span><span class="nt">/></span>
<span class="c"><!-- bit dots --></span>
<span class="nt"><g</span> <span class="na">tal:repeat=</span><span class="s">"b (0, fraction, fraction+exponent)"</span><span class="nt">></span>
<span class="nt"><g</span> <span class="na">tal:omit-tag=</span><span class="s">""</span> <span class="na">tal:define=</span><span class="s">"x start + nbars(1/2+exponent+fraction - b)"</span><span class="nt">></span>
<span class="nt"><circle</span> <span class="na">cx=</span><span class="s">"${x}"</span> <span class="na">cy=</span><span class="s">"79"</span> <span class="na">r=</span><span class="s">"3.7"</span><span class="nt">/></span>
<span class="nt"><text</span> <span class="na">x=</span><span class="s">"${x}"</span> <span class="na">y=</span><span class="s">"93"</span><span class="nt">></span>${b}<span class="nt"></text></span>
<span class="nt"></g></span>
<span class="nt"></g></span>
<span class="nt"></g></span>
<span class="nt"></svg></span></code></pre>
<p>Et je suis vraiment content du résultat. C'est plutôt propre, relativement conforme à ce qu'on attend d'un XML, au point où j'imagine même une chaîne de traitement qui pourrait combiner TAL et XSLT ! Ah, et pour voir le résultat, sur un double par exemple :</p>
<p><img src="//img.linuxfr.org/img/687474703a2f2f646f6c6b612e66722f62617a61722f74616c2d7376672d6578706572696d656e742f646f75626c652d666c6f61742e737667/double-float.svg" alt="Flottant à double précision" title="Source : http://dolka.fr/bazar/tal-svg-experiment/double-float.svg"></p>
<p>Le seul bémol par rapport à la « standardicité » de ce <em>template</em> utilisant TAL, c'est que Chameleon ré-utilise l'espace de nommage (<em>namespace</em>) original de Zope alors qu'ils ont en fait étendu le dialecte pour l'insertion directe par exemple, ou le fait que les expressions soient en Python par défaut (il y a d'autres <a href="https://chameleon.readthedocs.io/en/latest/reference.html#new-features">nouveautés</a> également). Dans un soucis de compatibilité ascendante, idéalement, ils auraient dû définir un nouveau <em>namespace</em> pour ces extensions<sup id="fnref4"><a href="#fn4">4</a></sup>.</p>
<p>Mais justement, rien que le fait d'utiliser un namespace pour intégrer de la « procéduralité » dans un SVG va permettre de montrer une possibilité géniale de XML : de pouvoir être une structure de données mélangeant divers aspects de manière non-intrusive (ou <em>orthogonale</em>), ce qui permet par exemple dans notre cas de <em>modifier le SVG avec Inkscape</em> par exemple, et de <em>continuer à obtenir un template valide</em> ! Ça fonctionne moyennement avec le <em>template</em> ci-dessus, car le dessin ne ressemble à rien vu que par exemple les coordonnées des objets n'ont pas de valeur correcte : on utilise l'insertion directe avec des ${x} par exemple, qui n'est pas une coordonnée valide. C'est pour ce cas où rester avec la syntaxe strictement XML d'origine de TAL peut être utile : ces attributs auront une valeur qui est utile pour présenter ce dessin dans un logiciel d'édition de SVG comme Inkscape, mais seront <em>remplacés</em> lors de l'instanciation du <em>template</em> par TAL ! Essayez avec <a href="http://dolka.fr/bazar/tal-svg-experiment/IEEE_754_Floating_Point_Format-template.svg">cette version du dessin</a>, vous verrez que le <em>template</em> continue d'être utilisable et applique les modifications que vous y avez effectué.</p>
<p>Et ça c'est la puissance de XML qui n'a malheureusement jamais été beaucoup développée : pouvoir intégrer plusieurs <em>dialectes</em> ou <em>formats</em> (avec son propre <em>namespace</em>) au sein d'un même fichier pour qu'il soit « multiforme ». J'avais il y a quelques années ainsi intégré une extension à un diagramme à état en <a href="https://en.wikipedia.org/wiki/SCXML">SCXML</a> qui me permettait de travailler sur un aspect orthogonal au diagramme, en utilisant au passage un <em>namespace</em> que j'avais créé pour l'occasion en utilisant les <a href="https://fr.wikipedia.org/wiki/Tag_URI">Tag URI</a>. Vous voyez d'ailleurs qu'Inkscape intègre lui-même ses propres données au fichier SVG standard à travers le <em>namespace</em> souvent préfixé « sodipodi » (le nom d'origine du projet) pour y stocker ses paramètres. Dans un autre contexte, <a href="https://fr.wikipedia.org/wiki/RDFa">RDFa</a> est une manière d'étendre le HTML pour faire du RDF, en trouvant un entre-deux n'utilisant que des attributs préfixés et non pas des éléments spécifiques, afin de concilier le divorce du HTML moderne avec XML (mais faites du <a href="https://fr.wikipedia.org/wiki/HTML5#XHTML5">XHTML5</a> même s'il n'a pas de schéma !).</p>
<p>Bref, j'espère que ce journal t'auras un peu réconcilié avec XML, et puis donné envie de lier Python et XML pour ton prochain projet. Tu trouveras tous les fichiers de mon expérimentation ici : <a href="http://dolka.fr/bazar/tal-svg-experiment/">http://dolka.fr/bazar/tal-svg-experiment/</a></p>
<div class="footnotes">
<hr>
<ol>
<li id="fn1">
<p>j'ai toujours trouvé ça étrange mais quand on dit « les années XXXX », on parle de la dizaine d'année qui commence par l'année citée ; dans notre cas, les années 2000--2010. <a href="#fnref1">↩</a></p>
</li>
<li id="fn2">
<p>en fait, XSLT n'est <em>vraiment</em> pas fait pour de la génération procédurale, mais pour du traitement de données en flux. Il est idéal pour transformer un document en un autre, mais laissez tomber dès que la part de calcul devient trop importante. À la limite, vous pouvez partir d'un programme dans un langage classique pour la partie calcul, et sortir un document « de base » – en utilisant même des printf() à la barbare avec une structure simple – à transformer plus aval par XSLT. Mais n'essayez pas de tout faire en XSLT. <a href="#fnref2">↩</a></p>
</li>
<li id="fn3">
<p>du coup Chameleon étant une bibliothèque seulement, j'ai créé un petit outil <a href="http://dolka.fr/code/gitweb/?p=dotfiles.git;a=blob;f=bin/talproc;hb=refs/heads/benoar-dotfiles">talproc</a> pour traiter les templates TAL. Il s'utilise à la manière de <code>xsltproc</code> avec les paramètres du template passés en <code>--stringparam</code>. Par exemple, pour générer le fichier du flottant double précision : talproc --stringparam exponent 11 --stringparam fraction 52 IEEE_754_Floating_Point_Format-direct-template.svg <a href="#fnref3">↩</a></p>
</li>
<li id="fn4">
<p>pour troller, je voudrais signaler que Microsoft, pourtant habitué au <a href="https://fr.wikipedia.org/wiki/Embrace,_extend_and_extinguish">EEE</a>, a correctement namespacé ses extensions à OOXML et continue de le faire des années après, cf. <a href="https://learn.microsoft.com/en-us/openspecs/office_standards/ms-docx/d0a2e301-0ff7-4e9e-9bb7-ff47070dce0a">https://learn.microsoft.com/en-us/openspecs/office_standards/ms-docx/d0a2e301-0ff7-4e9e-9bb7-ff47070dce0a</a> issu de <a href="https://learn.microsoft.com/en-us/openspecs/office_standards/ms-docx/b839fe1f-e1ca-4fa6-8c26-5954d0abbccd">https://learn.microsoft.com/en-us/openspecs/office_standards/ms-docx/b839fe1f-e1ca-4fa6-8c26-5954d0abbccd</a>. Après, vous pourrez arguer qu'avoir un « standard » qui continue d'avoir des extensions (à l'utilité discutable, si vous regardez le contenu précisément) tous les deux ans, ça n'est pas vraiment une forme de stabilité qui lui confèrerait un caractère si « standard », mais bon… <a href="#fnref4">↩</a></p>
</li>
</ol>
</div>
<div><a href="https://linuxfr.org/users/benoar/journaux/generer-des-images-vectorielles-procedurales-avec-des-technologies-des-annees-2000.epub">Télécharger ce contenu au format EPUB</a></div> <p>
<strong>Commentaires :</strong>
<a href="//linuxfr.org/nodes/134980/comments.atom">voir le flux Atom</a>
<a href="https://linuxfr.org/users/benoar/journaux/generer-des-images-vectorielles-procedurales-avec-des-technologies-des-annees-2000#comments">ouvrir dans le navigateur</a>
</p>
benoarhttps://linuxfr.org/nodes/134980/comments.atomtag:linuxfr.org,2005:News/414892023-10-16T11:08:46+02:002023-10-16T11:08:46+02:00Une trousse d'écolier à l'écran : SchoolKitLicence CC By‑SA http://creativecommons.org/licenses/by-sa/4.0/deed.fr<div><p>Dans une trousse d’écolier, il y a des crayons, des stylos… Mais aussi <strong>une règle</strong>, <strong>un rapporteur</strong>, <strong>une équerre</strong>. Quand on travaille sur un écran, c’est bien de pouvoir poser ces instruments de mesure et de traçage, dans l’image elle-même, et de les bouger à l’aide de la souris.</p>
<p><strong>SchoolKit</strong> est implémenté comme une bibliothèque JavaScript, sous licence GPL v3+. Vous pouvez donc intégrer un instrument comme un double-décimètre, ou autre outil, <em>par-dessus</em> n’importe quelle partie d’une page web. Comme cette trousse d’écolier est virtuellement dans une page web, l’usage est bien-sûr multi-plateforme.</p>
</div><ul><li>lien nᵒ 1 : <a title="https://packages.debian.org/bookworm/libjs-schoolkit" hreflang="fr" href="https://linuxfr.org/redirect/112080">Paquet Debian</a></li><li>lien nᵒ 2 : <a title="https://packages.ubuntu.com/kinetic/libjs-schoolkit" hreflang="en" href="https://linuxfr.org/redirect/112086">Paquet Ubuntu</a></li><li>lien nᵒ 3 : <a title="https://salsa.debian.org/georgesk/schoolkit" hreflang="en" href="https://linuxfr.org/redirect/112087">Code source</a></li><li>lien nᵒ 4 : <a title="https://www.freeduc.science/schoolkit/index.html" hreflang="fr" href="https://linuxfr.org/redirect/112794">Démonstration interactive</a></li></ul><div><p><img src="//img.linuxfr.org/img/68747470733a2f2f73637265656e73686f74732e64656269616e2e6e65742f736872696e652f73637265656e73686f742f73696d6167652f6c617267652d32366430666564643336313664316437356639656332613765626533303962612e706e67/large-26d0fedd3616d1d75f9ec2a7ebe309ba.png" alt="Quelques outils d'écran" title="Source : https://screenshots.debian.net/shrine/screenshot/simage/large-26d0fedd3616d1d75f9ec2a7ebe309ba.png"></p>
<p>Si vous utilisez <a href="https://packages.debian.org/bookworm/libjs-schoolkit">Debian</a> ou <a href="https://packages.ubuntu.com/kinetic/libjs-schoolkit">Ubuntu</a>, le paquet <code>libjs-schoolkit</code> <em>(qui recommande d’installer un serveur web)</em> vous donne tout le nécessaire, et vous pouvez voir une démonstration locale (après installation), à l’URL <code>localhost/javascript/schoolkit/index-fr.html</code> (si le serveur web est actif).</p>
<p>On peut aussi utiliser Schoolkit sans serveur web ; dans ce cas cependant, la page <code>index-fr.html</code> ne fonctionnerait avec Firefox, que si on modifie les références que cette page fait aux fichiers SVG (pour Firefox, tous les composants d’une page doivent venir de la même provenance : si c’est Internet, tous viennent d’Internet, si c’est un fichier local, tous viennent de fichiers locaux)</p>
</div><div><a href="https://linuxfr.org/news/une-trousse-d-ecolier-a-l-ecran-schoolkit.epub">Télécharger ce contenu au format EPUB</a></div> <p>
<strong>Commentaires :</strong>
<a href="//linuxfr.org/nodes/131106/comments.atom">voir le flux Atom</a>
<a href="https://linuxfr.org/news/une-trousse-d-ecolier-a-l-ecran-schoolkit#comments">ouvrir dans le navigateur</a>
</p>
georgeskNÿcoArkemYsabeau 🧶 🧦palm123bobble bubblehttps://linuxfr.org/nodes/131106/comments.atomtag:linuxfr.org,2005:News/415572023-06-24T21:35:20+02:002023-06-26T10:41:27+02:00Des formats d'imageLicence CC By‑SA http://creativecommons.org/licenses/by-sa/4.0/deed.fr<div><p>Les formats d’image classiques datent des années 1990 : après le format GIF en 1987, sont apparus le JPEG en 1992, le PNG en 1996 et le SVG en 1998. Leur adoption progressive s’est faite dans le contexte de la première guerre des navigateurs.</p>
<p>Ces formats couvrant <em>à peu près</em> tous les usages, les choses en sont restées là pendant plus de dix ans. Mais le paysage a commencé à changer dans les années 2010, avec l’introduction d’un nouveau format d’image moderne, WebP, pensé pour répondre à tous les besoins courants et pouvoir supplanter à la fois JPEG et PNG. Depuis, les nouveautés s’enchaînent, avec HEIF en 2015, AVIF en 2019 et JPEG XL en 2022.</p>
<p>Voici de quoi y voir plus clair.</p>
</div><ul><li>lien nᵒ 1 : <a title="https://developer.mozilla.org/fr/docs/Web/Media/Formats/Image_types" hreflang="fr" href="https://linuxfr.org/redirect/112338">Guide des types et formats d'image, par Mozilla</a></li><li>lien nᵒ 2 : <a title="https://developers.google.com/speed/webp" hreflang="fr" href="https://linuxfr.org/redirect/112339">WebP</a></li><li>lien nᵒ 3 : <a title="https://jpegxl.info/" hreflang="en" href="https://linuxfr.org/redirect/112340">JPEG XL</a></li><li>lien nᵒ 4 : <a title="https://www.w3.org/Graphics/SVG/" hreflang="en" href="https://linuxfr.org/redirect/112341">SVG</a></li><li>lien nᵒ 5 : <a title="https://imagemagick.org/script/formats.php" hreflang="en" href="https://linuxfr.org/redirect/112342">Formats supportés par ImageMagick</a></li><li>lien nᵒ 6 : <a title="http://www.graphicsmagick.org/formats.html" hreflang="en" href="https://linuxfr.org/redirect/112343">Formats supports par GraphicsMagick</a></li></ul><div><h2 class="sommaire">Sommaire</h2>
<ul class="toc">
<li>
<a href="#toc-formats-dimages-matricielles-">Formats d'images matricielles </a><ul>
<li><a href="#toc-gif--graphics-interchange-format-">GIF – Graphics Interchange Format </a></li>
<li><a href="#toc-jpeg--joint-photographic-experts-group-">JPEG – Joint Photographic Experts Group </a></li>
<li><a href="#toc-png--portable-network-graphics-">PNG – Portable Network Graphics </a></li>
<li><a href="#toc-jpeg-2000">JPEG 2000</a></li>
<li><a href="#toc-jbig2--joint-bi-level-image-group-">JBIG2 – Joint Bi-level Image Group </a></li>
<li><a href="#toc-webp-">WebP </a></li>
<li><a href="#toc-heic--hevc-dans-un-conteneur-heif-">HEIC – HEVC dans un conteneur HEIF </a></li>
<li><a href="#toc-avif--av1-image-file-format-">AVIF – AV1 Image File Format </a></li>
<li><a href="#toc-jpeg-xl-">JPEG XL </a></li>
</ul>
</li>
<li>
<a href="#toc-formats-dimages-vectorielles-">Formats d’images vectorielles </a><ul>
<li><a href="#toc-eps--encapsulated-postscript-">EPS – Encapsulated PostScript </a></li>
<li><a href="#toc-pdf--portable-document-format-">PDF – Portable Document Format </a></li>
<li><a href="#toc-svg--scalable-vector-graphics-">SVG – Scalable Vector Graphics </a></li>
</ul>
</li>
<li><a href="#toc-outils-">Outils </a></li>
<li>
<a href="#toc-conclusion-">Conclusion </a><ul>
<li><a href="#toc-photos-">Photos </a></li>
<li><a href="#toc-photos-d%C3%A9tour%C3%A9es-">Photos détourées </a></li>
<li><a href="#toc-dessins-bd--">Dessins, BD, … </a></li>
<li><a href="#toc-dessins-et-sch%C3%A9mas-vectoriels-">Dessins et schémas vectoriels </a></li>
</ul>
</li>
</ul>
<h2 id="toc-formats-dimages-matricielles-">Formats d'images matricielles </h2>
<h3 id="toc-gif--graphics-interchange-format-">GIF – Graphics Interchange Format </h3>
<p>Publié en 1987, avant même l’invention du Web, le format GIF permet de compresser sans perte une image avec une palette comptant au maximum 256 couleur et une transparence tout-ou-rien.</p>
<p>Le format GIF a longtemps été le seul format largement supporté permettant de stocker des animations, et il est resté utilisé pour cela pendant une trentaine d’années. Aujourd’hui, cette fonctionnalité est disponible avec le format WebP, et GIF peut enfin prendre une retraite bien méritée.</p>
<p>GIF est pris en charge par tous les navigateurs et probablement tous les logiciels d’affichage et de traitement d’image. En revanche, ce format ne présente plus aucun intérêt pour un usage courant, puisqu’il a été complètement supplanté par PNG, qui est lui-même ringard.</p>
<h3 id="toc-jpeg--joint-photographic-experts-group-">JPEG – Joint Photographic Experts Group </h3>
<p>Publié en 1992 comme norme ISO, le format JPEG sert à compresser des photos avec pertes. Il permet de représenter des images en niveau de gris sur 8 bits ou en RVB sur 24 bits. Il ne supporte aucun mode de transparence. Ce format peut être utilisé au sein d’un document PDF, ce qui est utile pour la composition de documents avec des images, par exemple en LaTeX compilé directement en PDF.</p>
<p>JPEG est pris en charge par tous les navigateurs et tous les logiciels d’affichage et de traitement d’image. Ceci dit, ce format ne présente plus aucun intérêt pour la plupart des usages courants, et peut être remplacé par WebP pour les nouvelles images.</p>
<h3 id="toc-png--portable-network-graphics-">PNG – Portable Network Graphics </h3>
<p>Publié en 1996 par le W3C, le format PNG a été conçu pour remplacer GIF, qui souffrait de limitations techniques et de problèmes de brevets. Il permet de compresser sans perte une image avec une palette de 8 ou 256 couleurs, en niveau de gris sur 1 à 16 bits ou en RVB sur 8 ou 16 bits par canal, avec une transparence optionnelle par canal alpha sur 8 ou 16 bits.</p>
<p>Comme JPEG, ce format peut être utilisé dans un document PDF.</p>
<p>PNG est une recommandation du W3C, également reprise sous la forme d’une RFC puis d’une norme ISO. Il est pris en charge par tous les navigateurs et tous les logiciels d’affichage et de traitement d’image. Ceci dit, ce format ne présente plus aucun intérêt pour la plupart des usages courants, et peut être remplacé par WebP pour les nouvelles images.</p>
<p>Il a également été étendu par deux formats d’animation qui ont longtemps souffert d’une querelle qui explique l’utilisation persistante de l’antique format GIF :</p>
<ul>
<li>MNG – Multiple-image Network Graphics – initialement supporté par les logiciels Mozilla ; </li>
<li>APNG – Animated PNG – aujourd’hui largement supporté. </li>
</ul>
<h3 id="toc-jpeg-2000">JPEG 2000</h3>
<p>Publié en… 2000, ce format visait à remplacer JPEG, avec une compression plus performante. L’accès payant à sa spécification, ainsi que des soupçons de problèmes de brevets, ont largement contribué à la très faible adoption de ce format.</p>
<p>Ce format a pourtant un intérêt anecdotique, puisqu’à l’instar de JPEG et PNG, il peut être utilisé dans un document PDF.</p>
<p>Le format JPEG 2000 est assez peu connu et donc supporté par peu de logiciels en dehors de ceux spécifiquement conçus avec le souci de pouvoir traiter des images dans un maximum de formats.</p>
<h3 id="toc-jbig2--joint-bi-level-image-group-">JBIG2 – Joint Bi-level Image Group </h3>
<p>Publié également en 2000, ce format sert à compresser avec ou sans pertes des images en noir et blanc. Il s’agit ici de vrai noir et blanc, et non de niveaux de gris.</p>
<p>Ce rôle très spécifique limite beaucoup son utilisation, mais il reste intéressant pour stocker avec une efficacité redoutable des textes numérisés en très haute définition. Il peut également être intégré dans un document PDF, ce qui est très utile pour l’archivage de documents.</p>
<p>Comme JPEG 2000, JBIG2 est assez peu connu et supporté par peu de logiciels.</p>
<h3 id="toc-webp-">WebP </h3>
<p>En 2010, Google est venu bousculer ce paysage à peu près stable, en proposant un format moderne, conçu pour s’imposer comme une solution universelle.</p>
<p>Dérivé du format vidéo VP8, WebP est donc un format ouvert, qui permet de compresser de façon efficace avec ou sans perte, en RVB sur 24 bits, avec un canal alpha optionnel (à noter que ce dernier peut être compressé sans perte même pour une image compressée avec pertes). Il permet également de stocker des animations.</p>
<p>Aujourd’hui, WebP est pris en charge par tous les navigateurs et par la majorité des logiciels d’affichage et de traitement d’image. Il peut déjà être considéré comme un format universel largement utilisable.</p>
<h3 id="toc-heic--hevc-dans-un-conteneur-heif-">HEIC – HEVC dans un conteneur HEIF </h3>
<p>Le format HEIF – High Efficiency Image File Format – est un conteneur, principalement conçu pour le stockage d’images compressées avec HEVC — High Efficiency Video Codec. L’ensemble est publié depuis 2015. Il permet de compresser avec ou sans perte, avec un canal alpha optionnel, et supporte les animations.</p>
<p>Ce format est une norme ISO, issue du travail du groupe MPEG, et souffre de problèmes de brevets. Il n’est pris en charge par aucun navigateur et seulement par certains logiciels d’affichage et de traitement d’image.</p>
<p>Ce format a peu de chance de réellement s’imposer, en dehors du cercle de certains environnements logiciels propriétaires spécifiques comme celui d’Apple.</p>
<h3 id="toc-avif--av1-image-file-format-">AVIF – AV1 Image File Format </h3>
<p>Publié en 2019 par l’Alliance for Open Media fondée par Amazon, Google, Cisco, Microsoft, Mozilla et Netflix, ce format utilise le conteneur HEIF pour stocker des images compressées avec AV1. Comme les autres formats modernes, il permet de compresser avec ou sans pertes les images en niveaux de gris et en couleur, avec un canal alpha optionnel, et supporte les animations. Il permet également l’intégration d’un profil de couleurs et le stockage de grandes gammes de couleurs, jusqu’à 12 bits par couleur.</p>
<p>Ce format est ouvert et disponible sans problème de brevet. Il est pris en charge par tous les navigateurs modernes et par certains logiciels d’affichage et de traitement d’image.</p>
<p>Il est peut-être un peu tôt pour en juger, mais ce format pourrait s’imposer avec une prise en charge assez large.</p>
<h3 id="toc-jpeg-xl-">JPEG XL </h3>
<p>Finalisé en 2022, ce format a été conçu par le groupe JPEG pour remplacer le format JPEG premier du nom. Il supporte l’ensemble des fonctionnalités modernes : niveaux de gris, couleur, alpha optionnel et animations, et apporte des fonctionnalités utiles pour des usages plus avancés, telles que le support des couleurs en CMJN, des espaces de couleurs larges ou encore les grandes gammes dynamiques. Ce format présente également une fonctionnalité qui apparaît particulièrement intéressante pour la compression d’images existantes, puisqu’il permet de recompresser sans nouvelles pertes une image JPEG, avec évidemment un gain d’espace de stockage. </p>
<p>C’est un format ouvert, apparemment disponible sans problème de brevets. Il commence à être pris en charge par des navigateurs, à savoir Firefox nightly et Safari, ainsi que par bon nombre de logiciels d’affichage et de traitement d’image dans leurs versions récentes.</p>
<p>En clair, ce format est un peu trop jeune pour qu’on puisse compter sur une large prise en charge, mais cela viendra sans doute dans les années à venir.</p>
<h2 id="toc-formats-dimages-vectorielles-">Formats d’images vectorielles </h2>
<h3 id="toc-eps--encapsulated-postscript-">EPS – Encapsulated PostScript </h3>
<p>Conçu par Adobe, le format PostScript encapsulé est dérivé du PostScript, qui a connu son heure de gloire il y a une ou deux décennies, pour le stockage d’images destinées à être intégrées dans un flux de production de documents.</p>
<p>Il était notamment utile pour intégrer des images vectorielles (ou non !) dans un document LaTeX. Il est aujourd’hui largement supplanté pour ces usages par le format PDF.</p>
<h3 id="toc-pdf--portable-document-format-">PDF – Portable Document Format </h3>
<p>Inutile de présenter le format PDF, également conçu par Adobe, normalisé et très largement répandu. Je préciserai simplement qu’il permet entre autres de stocker des images vectorielles avec transparence. Il est utile dans cet usage pour stocker des schémas destinés à être intégrés dans un document, par exemple un document LaTeX compilé directement en PDF.</p>
<p>En revanche, son usage habituel étant plutôt celui du stockage de documents de plusieurs pages, il n'est pas utilisable pour intégrer des dessins dans une page Web. Il est bien supporté par tous les navigateurs modernes, mais plutôt dans une optique d’intégration de document externe.</p>
<h3 id="toc-svg--scalable-vector-graphics-">SVG – Scalable Vector Graphics </h3>
<p>Le format SVG a été publié en 1998 par le W3C. C’est le format standard d’images vectorielles, utilisé nativement par nombre de logiciels de dessin. Il est supporté par tous les navigateurs modernes et par la plupart des logiciels d’affichage d’image. Il est supporté par tous les logiciels de dessin vectoriel libre, et probablement également par les logiciels de dessin propriétaire puisqu’il serait assez indécent de fournir un logiciel de dessin qui ne puisse pas au minimum importer ce format standard.</p>
<h2 id="toc-outils-">Outils </h2>
<p>Pour convertir des images d’un format matriciel à un autre, vous pouvez utiliser : </p>
<ul>
<li>
<a href="https://imagemagick.org/">ImageMagick</a> ou <a href="http://www.graphicsmagick.org/">GraphicsMagick</a> ; </li>
<li>les outils spécialisés pour chaque format, par exemple ceux de <a href="https://developers.google.com/speed/webp/">WebP</a>.</li>
</ul>
<p>Pour stocker des images matricielles JPEG, PNG ou JPEG 2000 en PDF, sans recodage, vous pouvez utiliser <a href="https://gitlab.mister-muffin.de/josch/img2pdf">img2pdf</a>. Je ne connais pas de solution simple pour stocker une image JBIG2 dans un document PDF. Pour convertir des dessins vectoriels en PDF, le plus simple est d’utiliser la fonctionnalité d’export PDF de son logiciel de dessin vectoriel. Celle d’Inkscape est utilisable en ligne de commande.</p>
<h2 id="toc-conclusion-">Conclusion </h2>
<h3 id="toc-photos-">Photos </h3>
<p>Pour stocker une photo existante, gardez l’image JPEG existante. Si vous avez des contraintes de stockage, utilisez JPEG XL. Pour publier une photo ou une création, oubliez JPEG et utilisez WebP. Ou, si vous voulez faire moderne, AVIF. <br>
N’utilisez pas HEIC, ce format n’a pas été correctement conçu pour s’imposer et fait déjà partie des perdants.</p>
<h3 id="toc-photos-détourées-">Photos détourées </h3>
<p>Pour stocker et diffuser une photo avec de la transparence (votre visage ?), utilisez WebP. Ou, si vous voulez faire dans la modernité, AVIF. Oubliez PNG, ce format n’est pas adapté et n’était utile dans ce domaine qu’avant l’arrivée de WebP qui a l’avantage d’être vraiment adapté à cet usage.</p>
<h3 id="toc-dessins-bd--">Dessins, BD, … </h3>
<p>Pour stocker une image existante, vous pouvez bien garder le PNG existant. Si vous avez des contraintes de stockage, utilisez JPEG XL. Pour publier une image existante ou une création, utilisez WebP ou AVIF. Oubliez PNG, WebP en mode sans perte est juste mieux.</p>
<h3 id="toc-dessins-et-schémas-vectoriels-">Dessins et schémas vectoriels </h3>
<p>Pour le stockage comme pour la publication d’images vectorielles, le format standard SVG est presque toujours la meilleure option, sinon la seule. Si vous voulez utiliser un schéma dans un document LaTeX, le mieux est de l’exporter en PDF, en conservant le SVG original. Oubliez le PostScript encapsulé, ce format a été complètement supplanté par PDF pour ses cas d’usage.</p>
</div><div><a href="https://linuxfr.org/news/des-formats-d-image.epub">Télécharger ce contenu au format EPUB</a></div> <p>
<strong>Commentaires :</strong>
<a href="//linuxfr.org/nodes/131651/comments.atom">voir le flux Atom</a>
<a href="https://linuxfr.org/news/des-formats-d-image#comments">ouvrir dans le navigateur</a>
</p>
🚲 Tanguy Ortoloorfenorvmagninbobble bubbletedLtrlghttps://linuxfr.org/nodes/131651/comments.atomtag:linuxfr.org,2005:Bookmark/66042023-06-06T23:17:36+02:002023-06-06T23:17:36+02:003D wireframes in SVG<a href="https://prideout.net/blog/svg_wireframes/">https://prideout.net/blog/svg_wireframes/</a> <p>
<strong>Commentaires :</strong>
<a href="//linuxfr.org/nodes/131477/comments.atom">voir le flux Atom</a>
<a href="https://linuxfr.org/users/killruana/liens/3d-wireframes-in-svg#comments">ouvrir dans le navigateur</a>
</p>
jtremesayhttps://linuxfr.org/nodes/131477/comments.atomtag:linuxfr.org,2005:Bookmark/46962022-05-17T12:09:04+02:002022-05-17T12:09:04+02:00Inkscape en version 1.2<a href="https://inkscape.org/release/inkscape-1.2/">https://inkscape.org/release/inkscape-1.2/</a> <p>
<strong>Commentaires :</strong>
<a href="//linuxfr.org/nodes/127772/comments.atom">voir le flux Atom</a>
<a href="https://linuxfr.org/users/deuzene/liens/inkscape-en-version-1-2#comments">ouvrir dans le navigateur</a>
</p>
deuzenehttps://linuxfr.org/nodes/127772/comments.atomtag:linuxfr.org,2005:Bookmark/43322022-02-23T00:28:46+01:002022-02-23T00:28:46+01:00Github est fier de supporter enfin le SVG<a href="https://github.blog/changelog/2022-01-21-allow-to-upload-svg-files-to-markdown/">https://github.blog/changelog/2022-01-21-allow-to-upload-svg-files-to-markdown/</a> <p>
<strong>Commentaires :</strong>
<a href="//linuxfr.org/nodes/126997/comments.atom">voir le flux Atom</a>
<a href="https://linuxfr.org/users/gilcot/liens/github-est-fier-de-supporter-enfin-le-svg#comments">ouvrir dans le navigateur</a>
</p>
Gil Cot ✔https://linuxfr.org/nodes/126997/comments.atomtag:linuxfr.org,2005:News/404952021-05-24T15:12:51+02:002021-05-24T15:12:51+02:00Edit Interactive SVG 1.2Licence CC By‑SA http://creativecommons.org/licenses/by-sa/4.0/deed.fr<div><p>Edit Interactive SVG est un logiciel libre qui permet de créer des illustrations interactives au format SVG. Il était initialement (2018) voué à l’éducation mais peut se destiner à un public bien plus large.</p>
<p>Une <a href="https://mothsart.github.io/editeur-svg-interactif.html">présentation de l’objectif du logiciel</a> et deux exemples <a href="https://mothsart.github.io/labo/frontend/edit_interactive_svg/examples/campement.html">Campement paléolithique</a> et <a href="https://mothsart.github.io/labo/frontend/edit_interactive_svg/examples/organes.html">Organes du corps humain</a> sont visibles pour se faire rapidement une idée. Et la <a href="https://mothsart.github.io/labo/frontend/edit_interactive_svg/">version en ligne</a> permet de tester directement sans installation.</p>
</div><ul><li>lien nᵒ 1 : <a title="https://linuxfr.org/users/mothsart/journaux/edit-interactive-svg-1-2" hreflang="fr" href="https://linuxfr.org/redirect/108587">Journal à l’origine de la dépêche</a></li><li>lien nᵒ 2 : <a title="https://linuxfr.org/users/mothsart/journaux/edit-interactive-svg-1-1" hreflang="fr" href="https://linuxfr.org/redirect/108588">Journal sur la version 1.1</a></li><li>lien nᵒ 3 : <a title="https://linuxfr.org/users/mothsart/journaux/editeur-de-svg-interactif" hreflang="fr" href="https://linuxfr.org/redirect/108589">Journal sur la version 1.0</a></li></ul><div><h3 id="toc-intro">Intro</h3>
<p>L’éditeur de SVG Interactif prenait la poussière et j’ai fini par prendre le temps nécessaire pour lui redonner un petit coup de jeune.</p>
<p>Pour celles et ceux qui suivent un peu le projet, nous arrivons à la version 1.2 qui suit la <a href="//linuxfr.org/users/mothsart/journaux/edit-interactive-svg-1-1">1.1</a>.</p>
<p>Cette version m’a permis de répondre a des besoins exprimés depuis sa <a href="//linuxfr.org/users/mothsart/journaux/editeur-de-svg-interactif">version 1.0</a> donc trois ans d’attente.</p>
<ul>
<li><p>Rajouter des contenus multimédia directement dans les commentaires.<br>
Il était déjà possible de rajouter des images (PNG, GIF, JPG), il est désormais possible de compléter avec des vidéos, des sons ou de la musique.<br>
Néanmoins, j’encourage à utiliser cette fonctionnalité avec parcimonie car elle implique d’encapsuler l’ensemble dans un seul fichier et sous une forme textuelle (base64) et par conséquent un tiers plus volumineux.</p></li>
<li><p>Pouvoir gérer un historique de modification ce qui inclut l’ajout des boutons « annuler/restaurer » et la possibilité de naviguer sur l’ensemble des modifications effectuées.<br>
Cette partie, pas foncièrement la plus demandée, mais nécessaire à mon sens, m’a donné le plus de fil à retordre pour adapter le code actuel et éviter des régressions.<br>
Je mentirais en disant que tout a été testé dans ce domaine et marche parfaitement tellement les cas d’utilisation peuvent être sournois.</p></li>
<li><p>La possibilité de remplacer le fichier SVG source sans perdre les méta-données liées au logiciel : indices, titres, commentaires, zoom, etc.<br>
C’était confus auparavant : j’ai donc distingué « ajout » et « remplacement ».</p></li>
</ul>
<h3 id="toc-sous-le-capot">Sous le capot</h3>
<p><strong>Stabilité et refactoring</strong> : je l’avais exprimé dans la version 1.1, il devenait difficile de retoucher au code sans effet sur sa stabilité.<br>
Des tests automatisés ont été rajoutés et le logiciel a été découpé en une arborescence de fichiers bien plus digeste à la relecture.<br>
Ce dernier oblige désormais un « make build » après toute édition mais c’est un mal pour un bien et une fois mis en place, le logiciel gagne en qualité et en lisibilité.</p>
<p><strong>Correctifs divers</strong> : comme ça cela faisait un moment que je n’avais pas touché au code, j’ai revu pas mal de petits détails sur l’aspect graphique mais aussi des petits bugs subtils.<br>
Je ne me suis pas concentré à les lister, mais je peux juste dire qu’ils étaient nombreux.</p>
<h3 id="toc-vous-souhaitez-lutiliser">Vous souhaitez l’utiliser</h3>
<p>Les sources restent disponibles <a href="https://github.com/mothsART/editInteractiveSVG">sur GitHub</a>.<br>
Pour debian/ubuntu, le <a href="https://launchpad.net/%7Ejerem-ferry/+archive/ubuntu/app-illustration">PPA a été mis à jour</a>.</p>
<p>Pour les plus pressés d’entre vous, j’ai mis à jour également la <a href="https://mothsart.github.io/labo/frontend/edit_interactive_svg/">version en ligne</a>.</p>
<h3 id="toc-que-nous-réserve-une-nouvelle-version">Que nous réserve une nouvelle version</h3>
<p>Ce projet a été initié il y a quatre ans et fait ce qu’on lui demande sans forcément de nouvelles évolutions.<br>
Je suis allé bien plus loin que ce que j’envisageais pour ce soft et en suis donc satisfait.<br>
J’ai d’autres projets en tête (et en cours) et il me parait malhonnête d’annoncer de futures évolutions alors que je sais d’avance que je n’y accorderais que peu de temps.<br>
Pour l’instant, je préfère dire que je vais maintenir le code à son strict nécessaire : corrections de bugs inévitables.</p>
<p>Si vraiment je repartais sur le projet, voici les axes que je donnerais :</p>
<ul>
<li><p>un nouveau nom, de nouvelles technologies et une nouvelle identité graphique : un des objectifs était de me débarrasser de pas mal de bibliothèques telles que jquery, bootstrap, etc. ;<br>
force est de constater que repartir de zéro sera bien plus bénéfique que tendre vers ce point itérativement ;</p></li>
<li><p>une appli serveur avec toutes les améliorations que ça implique : stockage, compte utilisateur, ajax, etc. ;</p></li>
<li><p>réfléchir <a href="https://fr.wikipedia.org/wiki/Progressive_web_app">Progressive Web App</a> : pouvoir installer l’éditeur comme une appli mobile ou tablette ;</p></li>
<li><p>plus de contenus : de nouveaux exemples (toute contribution est bienvenue) ;</p></li>
<li><p>rajouter des images (PNG, JPG) à l’ouverture (ou glissé-déposé) d’un nouveau fichier : <br>
un peu bizarre quand on parle d’éditeur interactif de SVG, mais je pense que le commun des mortels ne fait pas foncièrement la différence. Si son fichier est matriciel mais avec une définition suffisante, l’intérêt d’ajouter une étape pour le convertir en SVG me parait faible ;</p></li>
<li>
<p>l’amélioration de certaines parties techniques :</p>
<ul>
<li>ajout d’une barre de progression sur l’importation de fichiers lourds ;</li>
<li>optimiser davantage le CSS/JS (minification, concaténation) ;</li>
<li>quelques retouches visuelles (checkbox non natives) ;</li>
<li>la possibilité d’utiliser des images au format Avif (voir webp) ;</li>
<li>la possibilité de minifier à la volée les fichiers importés et exportés ;</li>
<li>conserver l’historique des modifications dans le fichier de travail (en HTML) : lié au passage au tout serveur. </li>
</ul>
</li>
</ul>
</div><div><a href="https://linuxfr.org/news/edit-interactive-svg-1-2.epub">Télécharger ce contenu au format EPUB</a></div> <p>
<strong>Commentaires :</strong>
<a href="//linuxfr.org/nodes/124374/comments.atom">voir le flux Atom</a>
<a href="https://linuxfr.org/news/edit-interactive-svg-1-2#comments">ouvrir dans le navigateur</a>
</p>
mothsARTYsabeau 🧶 🧦Benoît SibaudPierre Jarillonhttps://linuxfr.org/nodes/124374/comments.atomtag:linuxfr.org,2005:Diary/397852021-05-22T16:31:06+02:002021-05-22T16:31:06+02:00Pikchr : un langage pour décrire des diagrammes SVGLicence CC By‑SA http://creativecommons.org/licenses/by-sa/4.0/deed.fr<p>Bonjour Nal,</p>
<p>J'ai découvert il y a peu <a href="https://pikchr.org/home/doc/trunk/homepage.md">Pikchr</a>, un petit langage sympa pour décrire des diagrammes. Le langage est inspiré du vénérable <a href="https://en.wikipedia.org/wiki/Pic_language">PIC</a>, sauf qu'avec quelques additions sympas et, surtout, le logiciel produit du SVG et pas une image. Parmi les intérêts du langage, on a sa syntaxe simple à lire, des mots-clés variés qui permettent d'éviter d'avoir à écrire des coordonnées à la main, ainsi que le côté léger de l'outil, facile à intégrer ici ou là avec des langages de balisage légers comme markdown.</p>
<p>Le logiciel a été créé par l'auteur de SQLite et du gestionnaire de version Fossil, donc c'est plutôt du solide et ça m'a l'air bien testé. Le logiciel est néanmoins né il y a moins d'un an : les premiers commits datent d'août de l'an dernier !</p>
<p>Il couvre des besoins similaires à ceux couverts par des logiciels graphiques comme <a href="https://fr.wikipedia.org/wiki/Dia_(logiciel)">Dia</a>, sans spécialisation pour un type de diagramme particulier (UML ou autre). Contrairement à <a href="https://fr.wikipedia.org/wiki/DOT_(langage)">graphviz et son langage dot</a>, l'idée n'est pas de visualiser sous forme de graphe des données, mais de faire un diagramme pédagogique pour illustrer une documentation. C'est donc moins automatique, mais plus flexible pour placer les choses où on veut. L'idée n'est pas non plus de produire, après lecture de centaines de pages de documentation et beaucoup de minutie, des diagrammes très vendeurs comme avec <a href="https://en.wikipedia.org/wiki/PGF/TikZ">Tikz</a> pour LaTeX. Pikchr se situe un peu entre ces deux extrêmes.</p>
<p>Un cas parlant d'utilisation : tous les diagrammes de la documentation SQLite <a href="https://pikchr.org/home/doc/trunk/doc/sqlitesyntax.md">utilisent Pikchr maintenant</a>. Les vieux diagrammes étaient générés par un script fait maison qui produisait des images et non du SVG, ce qui avait quelques inconvénients.</p>
<p>À quoi ça ressemble en pratique ? Par exemple, on écrit des lignes du genre :</p>
<pre><code>line dashed right from 0.3cm below start of previous line
</code></pre>
<p>ou des choses plus compliquées comme:</p>
<pre><code>box; move; circle; move; cylinder
arrow from first box.s \
down 1cm \
then right until even with first cylinder \
then to first cylinder.s
</code></pre>
<p>Le langage est simple à prendre en main et n'a pas beaucoup de fonctionnalités de programmation. On n'y trouvera par exemple pas de boucles, mais juste ce qu'il faut pour simplifier un peu la maintenance : macros avec des arguments et des variables.</p>
<p>Au besoin, il est facile de générer du code pour Pikchr avec un langage de programmation. Un des avantages est que le langage peut s'intégrer facilement à d'autres outils ou langages de balisage et, en particulier, il est conçu pour qu'il soit possible, de façon sûre, de l'utiliser sur un serveur pour produire des diagrammes écrits par les utilisateurs d'un site.</p>
<p>Par exemple, il est possible de tester le logiciel <a href="https://pikchr.org/home/pikchrshow">sur le site lui-même</a> ! Ça permet de jouer un peu avec les exemples.</p>
<p>Je ne sais pas si la version en outil en ligne de commande est déjà dispo sur certaines distributions. Autrement, c'est très facile à compiler. À partir du code décrivant la grammaire (décrite dans un langage similaire à <a href="https://fr.wikipedia.org/wiki/Yacc_(logiciel)">Yacc</a>, mais conçu à l'origine pour SQLite) et le comportement du programme, un seul fichier C contenant l'ensemble du programme <a href="https://pikchr.org/home/file/pikchr.c?ci=trunk">pikchrc.c</a> est mis à disposition pré-généré. On peut donc facilement compiler (avec gcc ou clang) en un exécutable avec la commande :</p>
<pre><code>cc -DPIKCHR_SHELL -o pikchr -lm pikchr.c
</code></pre>
<p>Et hop, le tour est joué !</p>
<div><a href="https://linuxfr.org/users/anaseto/journaux/pikchr-un-langage-pour-decrire-des-diagrammes-svg.epub">Télécharger ce contenu au format EPUB</a></div> <p>
<strong>Commentaires :</strong>
<a href="//linuxfr.org/nodes/124372/comments.atom">voir le flux Atom</a>
<a href="https://linuxfr.org/users/anaseto/journaux/pikchr-un-langage-pour-decrire-des-diagrammes-svg#comments">ouvrir dans le navigateur</a>
</p>
anasetohttps://linuxfr.org/nodes/124372/comments.atomtag:linuxfr.org,2005:Diary/397832021-05-22T15:45:23+02:002021-05-22T15:45:23+02:00Edit Interactive SVG 1.2Licence CC By‑SA http://creativecommons.org/licenses/by-sa/4.0/deed.fr<h3 id="toc-intro">Intro</h3>
<p>L'éditeur de SVG Interactif prenait la poussière et j'ai fini par prendre le temps nécessaire pour lui redonner un petit coup de jeune.</p>
<p>Pour ceux qui suivent un peu le projet, nous arrivons à la version 1.2 qui suit la 1.1 <a href="//linuxfr.org/users/mothsart/journaux/edit-interactive-svg-1-1">https://linuxfr.org/users/mothsart/journaux/edit-interactive-svg-1-1</a></p>
<p>Cette version m'a permis de répondre a des besoins exprimés depuis sa version 1.0 (<a href="//linuxfr.org/users/mothsart/journaux/editeur-de-svg-interactif">https://linuxfr.org/users/mothsart/journaux/editeur-de-svg-interactif</a>) donc 3 ans d'attente :</p>
<ul>
<li><p>rajouter des contenus multimédia directement dans les commentaires : <br>
Il était déjà possible de rajouter des images (png, gif, jpg), il est désormais possible de compléter avec des vidéos, des sons ou de la musique.<br>
Néanmoins, j'encourage à utiliser cette fonctionnalité avec parcimonie car elle implique d'encapsuler l'ensemble dans un seul fichier et sous une forme textuel (base64) et par conséquent 1/3 plus voulumineux.</p></li>
<li><p>pouvoir gérer un historique de modification ce qui inclus l'ajout des boutons "annuler"/"restaurer" et la possibilité de naviguer sur l'ensemble des modifications effectués.<br>
Cette partie, pas foncièrement la plus demandé mais nécessaire à mon sens m'a donné le plus de fil à retordre pour adapter le code actuel et évité des régressions.<br>
Je mentirais en disant que tout a été testé dans ce domaine et marche parfaitement tellement les cas d'utilisation peuvent être sournois.</p></li>
<li><p>La possibilité de remplacé le fichier svg source sans perdre les méta-données liés au soft : indices, titres, commentaires, zoom etc.<br>
C'était confus auparavant : j'ai donc distingué "ajout" et "remplacement".</p></li>
</ul>
<h3 id="toc-sous-le-capot">Sous le capot</h3>
<ul>
<li><p>stabilité et refactoring : Je l'avait exprimé dans la version 1.1 : il devenait difficile de retoucher au soft sans impacter sa stabilité.<br>
Des tests automatisés ont été rajoutés et le soft a été découpé en une arborescence de fichiers bien plus digeste à la relecture.<br>
Ce dernier oblige désormais un "make build" après toute édition mais c'est un mal pour un bien et une fois mis en place, le soft gagne en qualité et en lisibilité.</p></li>
<li><p>correctifs divers : Vu que ça fait un moment que je n'avais pas touché au soft, j'ai revue pas mal de petits détails sur l'aspect graphique mais aussi des petits bugs subtils.<br>
Je ne me suis pas concentré à les lister mais je peux juste dire qu'ils étaient nombreux.</p></li>
</ul>
<h3 id="toc-vous-souhaitez-lutiliser">Vous souhaitez l'utiliser</h3>
<p>Les sources restent disponible ici : <a href="https://github.com/mothsART/editInteractiveSVG">https://github.com/mothsART/editInteractiveSVG</a><br>
Pour debian/ubuntu, le ppa a été maj : <a href="https://launchpad.net/%7Ejerem-ferry/+archive/ubuntu/app-illustration">https://launchpad.net/~jerem-ferry/+archive/ubuntu/app-illustration</a></p>
<p>Pour les plus pressés d'entre vous, j'ai maj également la version on-line : <a href="https://mothsart.github.io/labo/frontend/edit_interactive_svg/">https://mothsart.github.io/labo/frontend/edit_interactive_svg/</a></p>
<h3 id="toc-que-nous-réserves-une-nouvelle-version">Que nous réserves une nouvelle version</h3>
<p>Ce projet a été initié il y a 4 ans et fait ce qu'on lui demande sans forcément de nouvelles évolutions.<br>
Je suis allé bien plus loin que ce que j’envisageais pour ce soft et en suit donc satisfait.<br>
J'ai d'autres projets en tête (et en cours) et il me parait malhonnête d'annoncer de futures évolutions alors que je sais d'avance que je n'y accorderais que peu de temps.<br>
Pour l'instant, je préfère dire que je vais maintenir le soft à son strict nécessaires : corrections de bugs inévitables.</p>
<p>Si vraiment je repartais sur le projet, voici les axes que je donnerais :</p>
<ul>
<li><p>un nouveau nom, de nouvelles technos et une nouvelle identité graphique : un des objectifs étaient de me débarrasser de pas mal de libs tel que jquery, bootstrap etc.<br>
Force est de constaté que repartir de zéro sera bien plus bénéfique que tendre vers ce point itérativement.</p></li>
<li><p>une appli serveur avec toutes les améliorations que ça implique : stockage, compte utilisateur, ajax etc.</p></li>
<li><p>réfléchir PWA : pouvoir installer l'éditeur comme une appli mobile ou tablette.</p></li>
<li><p>plus de contenus : de nouveaux exemples (toute contribution est bienvenue)</p></li>
<li><p>rajouter des images (png, jpg) à l'ouverture (ou glissé-déposé) d'un nouveau fichier : <br>
un peu bizarre quand on parle d'éditeur interactif de "SVG" mais je pense que le commun des mortels ne fait pas foncièrement la différence :<br>
Si son fichier est matriciel mais avec une définition suffisante, l'intérêt d'ajouter une étape pour le convertir en SVG me parait faible.</p></li>
<li>
<p>l'amélioration de certaines parties techniques :</p>
<ul>
<li>ajout d'une barre de progression sur l'importation de fichiers lourds</li>
<li>optimiser d'avantages le css/js (minification, concaténation)</li>
<li>quelques retouches visuels (checkbox non natives)</li>
<li>la possibilité d'utiliser des images au format Avif (voir webp)</li>
<li>la possibilité de minifier à la volée les fichiers importés et exportés</li>
<li>conserver l'historique des modifications dans le fichier de travail (en HTML) : lié au passage full serveur. </li>
</ul>
</li>
</ul>
<div><a href="https://linuxfr.org/users/mothsart/journaux/edit-interactive-svg-1-2.epub">Télécharger ce contenu au format EPUB</a></div> <p>
<strong>Commentaires :</strong>
<a href="//linuxfr.org/nodes/124369/comments.atom">voir le flux Atom</a>
<a href="https://linuxfr.org/users/mothsart/journaux/edit-interactive-svg-1-2#comments">ouvrir dans le navigateur</a>
</p>
mothsARThttps://linuxfr.org/nodes/124369/comments.atomtag:linuxfr.org,2005:Diary/393902020-10-10T13:05:32+02:002020-10-10T13:05:32+02:00Piano Quick & DirtyLicence CC By‑SA http://creativecommons.org/licenses/by-sa/4.0/deed.fr<p>Il y a 5 ans, j'ai voulu apprendre un chant que ma chorale avait fait l'année avant que je les rejoigne. À ma disposition, il y avait la partition, mes souvenirs auditifs et pas d'enregistrement. Ma voix n'était pas la voix principale de ce chant donc ça peut être un peu contre intuitif à apprendre. J'ai donc reproduit la partition sur MuseScore pour la jouer.</p>
<p>Je n'ai pas d'instrument non plus et avoir quelque chose pour jouer des notes rapidement semblait utile. Alors, j'ai pris un peu de temps pour écrire un piano avec les technologies du Web.</p>
<p><img src="//img.linuxfr.org/img/68747470733a2f2f7261706861656c2e6a616b73652e66722f7069616e6f2f7069616e6f2e706e67/piano.png" alt="Le piano" title="Source : https://raphael.jakse.fr/piano/piano.png"></p>
<p>Alors pourquoi ne pas avoir simplement téléchargé un piano sur mon smartphone me demanderez-vous ?</p>
<p>Bah, déjà, parce que je n'avais pas de smartphone. Donc il me fallait quelque chose qui tournait sur ordinateur. Ça devait déjà exister, mais bon, c'est fun aussi de programmer ça.</p>
<p>Et puis, à l'époque, même si j'avais eu un smartphone, <a href="https://f-droid.org/fr/packages/org.esteban.piano/">la seule application de piano sur F-Droid</a> était un peu limitée et basique : deux gammes en largeur. En la retrouvant, je suis par contre tombé sur <a href="https://f-droid.org/fr/packages/net.currit.tonality/">Tonality</a> ajoutée en 2019, ça a l'air bien cool !</p>
<p>Du coup, ce piano, que je n'ai pas pris le temps de nommer, utilise du SVG pour le rendu, une bibliothèque qui simule du MIDI dans le navigateur et peut être utilisé avec les touches du clavier de l'ordinateur. Il y a deux claviers qu'on peut bouger, pour avoir les aigus et les graves l'un en dessous de l'autre si on veut. Le code est principalement crado mais ça fonctionne.</p>
<p>J'ai écrit ça, placé ça dans la rubrique bazar de l'intranet du site de la chorale et je l'ai utilisé occasionnellement sans jamais prendre le temps d'en faire la publicité.</p>
<p>Plus récemment, le mois dernier, j'ai eu à travailler des chants pour les apprendre à d'autres choristes, et il me fallait à nouveau un piano. J'ai amélioré la gestion du clavier de l'ordi pour la rendre à peu près utilisable, et j'en ai profité pour ajouter un début d'embryon de métronome.</p>
<p>Bon, au final c'est difficile de travailler des partitions sur autre chose qu'un vrai instrument et j'ai la chance d'avoir pu me procurer un clavier.</p>
<p>Cela dit, le piano virtuel peut rester utile à l'occasion, fonctionne plutôt bien sur ordinateur et ça peut toujours servir ou susciter des envies de bidouille, alors je l'ai mis sur internet et je vous colle le lien ici :</p>
<ul>
<li>Code source : <a href="https://framagit.org/raphj/piano">https://framagit.org/raphj/piano</a>
</li>
<li>Essayer le piano : <a href="https://raphael.jakse.fr/piano">https://raphael.jakse.fr/piano</a>
</li>
</ul>
<p>N'hésitez pas à bidouiller dessus et à proposer des améliorations, elles seront les bienvenues !</p>
<p>Bon weekend !</p>
<div><a href="https://linuxfr.org/users/raphj/journaux/piano-quick-dirty.epub">Télécharger ce contenu au format EPUB</a></div> <p>
<strong>Commentaires :</strong>
<a href="//linuxfr.org/nodes/121880/comments.atom">voir le flux Atom</a>
<a href="https://linuxfr.org/users/raphj/journaux/piano-quick-dirty#comments">ouvrir dans le navigateur</a>
</p>
raphjhttps://linuxfr.org/nodes/121880/comments.atomtag:linuxfr.org,2005:Bookmark/19442020-09-01T07:49:26+02:002020-09-01T07:49:26+02:00Openclipart est de retour !<a href="https://openclipart.org/">https://openclipart.org/</a> <p>
<strong>Commentaires :</strong>
<a href="//linuxfr.org/nodes/121461/comments.atom">voir le flux Atom</a>
<a href="https://linuxfr.org/users/deuzene/liens/openclipart-est-de-retour#comments">ouvrir dans le navigateur</a>
</p>
deuzenehttps://linuxfr.org/nodes/121461/comments.atomtag:linuxfr.org,2005:Bookmark/10392019-12-26T15:56:48+01:002019-12-26T15:56:48+01:00Openclipart le renouveau ?<a href="https://openclipart.org/">https://openclipart.org/</a> <p>
<strong>Commentaires :</strong>
<a href="//linuxfr.org/nodes/118998/comments.atom">voir le flux Atom</a>
<a href="https://linuxfr.org/users/ysabeau/liens/openclipart-le-renouveau#comments">ouvrir dans le navigateur</a>
</p>
Ysabeau 🧶 🧦https://linuxfr.org/nodes/118998/comments.atomtag:linuxfr.org,2005:Bookmark/10342019-12-23T22:45:21+01:002019-12-23T22:45:21+01:00Une collection d'exemples de présentations réalisées avec Sozi<a href="https://senshu.github.io/Sozi-demos/">https://senshu.github.io/Sozi-demos/</a> <p>
<strong>Commentaires :</strong>
<a href="//linuxfr.org/nodes/118983/comments.atom">voir le flux Atom</a>
<a href="https://linuxfr.org/users/llumeao/liens/une-collection-d-exemples-de-presentations-realisees-avec-sozi#comments">ouvrir dans le navigateur</a>
</p>
Guillaume Savatonhttps://linuxfr.org/nodes/118983/comments.atomtag:linuxfr.org,2005:Bookmark/10222019-12-18T22:00:08+01:002019-12-18T22:00:08+01:00Sozi 19.11 beta est disponible pour les testeurs et les traducteurs<a href="https://github.com/senshu/Sozi/releases">https://github.com/senshu/Sozi/releases</a> <p>
<strong>Commentaires :</strong>
<a href="//linuxfr.org/nodes/118945/comments.atom">voir le flux Atom</a>
<a href="https://linuxfr.org/users/llumeao/liens/sozi-19-11-beta-est-disponible-pour-les-testeurs-et-les-traducteurs#comments">ouvrir dans le navigateur</a>
</p>
Guillaume Savatonhttps://linuxfr.org/nodes/118945/comments.atomtag:linuxfr.org,2005:Diary/384832019-04-28T19:00:12+02:002019-04-28T19:00:12+02:00De Sozi 12 à Sozi 19Licence CC By‑SA http://creativecommons.org/licenses/by-sa/4.0/deed.fr<h2 class="sommaire">Sommaire</h2>
<ul class="toc">
<li><a href="#toc-quest-ce-que-sozi">Qu'est-ce que Sozi ?</a></li>
<li><a href="#toc-qui-d%C3%A9veloppe-sozi-et-pourquoi">Qui développe Sozi et pourquoi ?</a></li>
<li><a href="#toc-sozi-hier-et-aujourdhui">Sozi hier et aujourd'hui</a></li>
<li>
<a href="#toc-que-permet-de-faire-sozi-1904">Que permet de faire Sozi 19.04 ?</a><ul>
<li><a href="#toc-cr%C3%A9er-une-pr%C3%A9sentation-sous-la-forme-dune-s%C3%A9quence-de-vues-sur-un-document-svg">Créer une présentation sous la forme d'une séquence de vues sur un document SVG</a></li>
<li><a href="#toc-jouer-une-pr%C3%A9sentation-en-mode-pr%C3%A9sentateur">Jouer une présentation en mode présentateur</a></li>
<li><a href="#toc-cr%C3%A9er-des-liens-entre-les-vues-dune-pr%C3%A9sentation">Créer des liens entre les vues d'une présentation</a></li>
<li><a href="#toc-ins%C3%A9rer-une-pr%C3%A9sentation-sozi-dans-une-page-web">Insérer une présentation Sozi dans une page web</a></li>
<li><a href="#toc-insertion-de-documents-vid%C3%A9o-et-audio-dans-une-pr%C3%A9sentation">Insertion de documents vidéo et audio dans une présentation</a></li>
<li><a href="#toc-convertir-une-pr%C3%A9sentation-sozi-en-une-vid%C3%A9o-ou-un-document-imprimable">Convertir une présentation Sozi en une vidéo ou un document imprimable</a></li>
</ul>
</li>
<li><a href="#toc-perspectives-et-%C3%A9volutions">Perspectives et évolutions</a></li>
</ul>
<p>En lisant un <a href="//linuxfr.org/users/mothsart/journaux/edit-interactive-svg-1-1">journal récent à propos d'un éditeur de SVG interactif</a>, j'ai réalisé que Sozi n'avait fait l'objet d'aucune publication sur ce site depuis <a href="//linuxfr.org/news/sozi-12-09-est-disponible">l'annonce de la version 12</a>, sortie en… 2012.</p>
<p>Ce journal résume les principaux changements ayant eu lieu depuis cette version, en évitant une fastidieuse concaténation de <em>release notes</em>.</p>
<h2 id="toc-quest-ce-que-sozi">Qu'est-ce que Sozi ?</h2>
<p>Sozi est un logiciel de création de présentations animées.<br>
Il se positionne comme une alternative à Prezi, en se différenciant de ce dernier sur les aspects suivants :</p>
<ul>
<li>Sozi est un logiciel libre.</li>
<li>Sozi repose sur des standards ouverts.</li>
<li>Avec Sozi, l'utilisateur reste maître de ses données.</li>
</ul>
<p>La création d'une présentation s'effectue en deux temps :</p>
<ol>
<li>Créer un document SVG contenant les éléments visuels de la présentation. En théorie, n'importe quel logiciel de dessin vectoriel capable d'enregistrer au format SVG peut être utilisé. En pratique, Inkscape est recommandé et il existe peu de retours d'expérience concernant la compatibilité de Sozi avec d'autres outils.</li>
<li>Importer le document SVG dans l'éditeur de présentation Sozi et définir une séquence de <em>vues</em> ainsi que les transitions entre ces vues.</li>
</ol>
<p>Sozi n'altère pas le document SVG d'origine. Il enregistre la présentation sous la forme d'un document HTML qui contient : une copie du document SVG, les données définissant le déroulement de la présentation, le code JavaScript de visionnage.</p>
<p>Ce document HTML peut être affiché à l'aide de tout navigateur web prenant en charge HTML5, SVG et JavaScript.</p>
<h2 id="toc-qui-développe-sozi-et-pourquoi">Qui développe Sozi et pourquoi ?</h2>
<p>Sozi est un projet personnel que je développe seul sur mon temps libre. La majorité des contributions externes concernent la traduction de l'interface utilisateur et du site web.</p>
<p>Certains utilisateurs croient avoir affaire à une <em>équipe</em> de développeurs qui auraient l'ambition de gagner des <em>parts de marché</em>. Le <a href="http://sozi.baierouge.fr/">site web</a> multilingue et le <a href="http://sozi.baierouge.fr/community/">forum de discussion</a> peuvent donner cette impression.</p>
<p>En réalité, je développe Sozi d'abord pour mon propre usage et parce que ça me fait plaisir. Je le distribue à la communauté en espérant que d'autres le trouveront utile, je donne un coup de main aux utilisateurs en détresse, mais je fais peu d'efforts pour le promouvoir.</p>
<p>Pour ces raisons également, je suis toujours réticent à développer de nouvelles fonctionnalités dont je n'aurais pas besoin, et qui seraient probablement mal testées et mal maintenues,… mais je peux faire une exception si je trouve l'idée amusante et si ça me donne l'occasion d'apprendre quelque chose de nouveau.</p>
<h2 id="toc-sozi-hier-et-aujourdhui">Sozi hier et aujourd'hui</h2>
<p>Les numéros de version de Sozi sont chronologiques : par exemple, la version 19.04 a été publiée en avril 2019.</p>
<p>Jusqu'à la version 13.11, l'éditeur de présentation était une extension pour Inkscape. Le système d'extensions d'Inkscape n'ayant pas été pensé pour ce type d'usage, cela posait tout un tas de problèmes difficiles à contourner (comme par exemple le gel de l'interface d'Inkscape tant que la fenêtre Sozi était ouverte), et il y avait finalement peu d'avantages comparé à un logiciel séparé.</p>
<p>Sozi paie aujourd'hui pour cette erreur de jeunesse : alors que ce n'est plus vrai depuis 2015, on peut encore lire sur le web en 2019 que Sozi est "lié à Inkscape" et est "écrit en Python" :(</p>
<p>Or, en 2014, l'éditeur de présentation a été entièrement réécrit en JavaScript comme une application indépendante. Cela a permis notamment de passer d'une interface utilisateur de type <em>formulaire</em>, peu ergonomique, à une interface permettant une manipulation directe des calques du document SVG et offrant une prévisualisation des vues et des transitions.</p>
<p>Aujourd'hui, l'éditeur de présentation est une application Electron qui fonctionne aussi bien sous GNU/Linux (des paquets Debian sont disponibles) que sous Windows et OS X.</p>
<p>Sozi 19.04 est disponible pour les utilisateurs d'ArchLinux via AUR. Pour les autres distributions, il n'est pas recommandé d'installer Sozi via les dépôts officiels : Fedora fournit toujours Sozi 13.11, et Debian est resté bloqué sur la version 12.</p>
<h2 id="toc-que-permet-de-faire-sozi-1904">Que permet de faire Sozi 19.04 ?</h2>
<p>Voici un aperçu des fonctionnalités offertes par Sozi aujourd'hui :</p>
<h3 id="toc-créer-une-présentation-sous-la-forme-dune-séquence-de-vues-sur-un-document-svg">Créer une présentation sous la forme d'une séquence de vues sur un document SVG</h3>
<p>L'éditeur de présentation permet de construire un parcours dans le plan du document SVG, en définissant à chaque étape la région visible par le spectateur. Les transitions entre ces étapes sont animées et il est possible de configurer leur durée ainsi que la fonction de progression du temps à utiliser.</p>
<p>Si le document est organisé en plusieurs calques, il est possible de créer un parcours et des transitions différentes pour chaque calque. Cela permet de réaliser des effets intéressants comme par exemple :</p>
<ul>
<li>Animer des objets par rapport à un décor, en les plaçant dans des calques séparés. Cet usage n'est pas facile à maîtriser car dans Sozi, les animations sont définies comme des déplacements de la caméra.</li>
<li>Faire apparaître ou disparaître des objets, en contrôlant l'opacité des calques. S'il y a de nombreux objets à gérer, il faudra créer de nombreux calques ou réutiliser intelligemment le même calque pour plusieurs objets.</li>
<li>Réaliser un effet de parallaxe.</li>
</ul>
<h3 id="toc-jouer-une-présentation-en-mode-présentateur">Jouer une présentation en mode présentateur</h3>
<p>Il s'agit d'une nouvelle fonctionnalité dans Sozi 19.04. Plusieurs contributeurs ont proposé des implémentations par le passé mais j'ai mis beaucoup de temps à me décider sur ce qu'il convenait de faire.</p>
<p>Désormais, l'éditeur enregistre deux fichiers HTML pour une même présentation :</p>
<ul>
<li>Un fichier contenant la présentation proprement dite, comme dans les versions précédentes de Sozi.</li>
<li>Un fichier contenant une <em>console présentateur</em> qui affiche les vues précédentes, courante et suivante, ainsi que les notes du présentateur.</li>
</ul>
<p>Le premier fichier s'utilise comme précédemment, lorsque vous souhaitez jouer une présentation sans le mode présentateur. Le second ouvre automatiquement la présentation dans une nouvelle fenêtre et se synchronise avec elle au cours de son déroulement.</p>
<h3 id="toc-créer-des-liens-entre-les-vues-dune-présentation">Créer des liens entre les vues d'une présentation</h3>
<p>Au cours de la lecture d'une présentation Sozi dans un navigateur web, chaque vue peut être adressée par son identifiant ou son numéro : on ajoute pour cela <code>#id</code> ou <code>#numéro</code> à l'URL du document courant.</p>
<p>Comme HTML, SVG prend en charge la balise <code><a></code> qui permet de transformer un élément en lien. On peut faire pointer ce lien soit vers une URL externe, soit vers l'identifiant d'une vue de la présentation. Il est ainsi possible de créer de véritables présentations <em>non linéaires</em>, ou même de réaliser un site web animé dont chaque <em>page</em> serait une vue d'une présentation Sozi.</p>
<h3 id="toc-insérer-une-présentation-sozi-dans-une-page-web">Insérer une présentation Sozi dans une page web</h3>
<p>Comme Sozi produit des documents HTML, ces derniers peuvent être insérés dans d'autres pages web au moyen de la balise <code><iframe></code>. Si nécessaire, l'API de Sozi permet de gérer le déroulement de la présentation depuis un script sur la page principale. Par exemple, on peut ajouter des boutons de navigation comme dans <a href="http://sozi.baierouge.fr/pages/tutorial-embedding-fr.html">l'exemple situé en bas de ce tutoriel</a>.</p>
<p>Depuis Sozi 17.11, il est possible de désactiver les actions au clavier et à la souris dans une présentation.<br>
Certains utilisateurs réalisent ainsi des animations destinées à être insérées dans des pages web, et à être jouées automatiquement sans intervention du spectateur.</p>
<h3 id="toc-insertion-de-documents-vidéo-et-audio-dans-une-présentation">Insertion de documents vidéo et audio dans une présentation</h3>
<p>Par principe, l'éditeur de présentation Sozi ne gère que le déroulement d'une présentation et ne permet pas d'ajouter des éléments visuels (ou auditifs). L'insertion de documents vidéo ou audio a donc été réalisée sous la forme d'une extension pour Inkscape.</p>
<p>Cette extension ajoute au document SVG un rectangle gris à l'emplacement où le media devra s'afficher.<br>
Ce rectangle est remplacé par un éléments HTML <code><video></code> ou <code><audio></code> lorsque la présentation est jouée.</p>
<p>À ce jour, seul Firefox affiche correctement les vidéos en respectant les transformations géométriques appliquées par Sozi.</p>
<h3 id="toc-convertir-une-présentation-sozi-en-une-vidéo-ou-un-document-imprimable">Convertir une présentation Sozi en une vidéo ou un document imprimable</h3>
<p>Le projet <a href="http://sozi.baierouge.fr/pages/tutorial-converting-fr.html">Sozi-export</a> propose un ensemble d'outils en ligne de commande pour convertir une présentation dans différents formats :</p>
<ul>
<li>Séquence d'images.</li>
<li>Vidéo, avec ffmpeg.</li>
<li>PDF, avec pdfjam.</li>
<li>PowerPoint.</li>
</ul>
<p>Sozi-export est distribué comme un package node.js. La version la plus récente a été publiée en octobre 2018.</p>
<p>Malheureusement, <a href="http://sozi.baierouge.fr/community/d/79-sozi-to-pdf-failing-with-file-argument-must-be-of-type-string">ces outils ne fonctionnent plus aujourd'hui sur certaines plates-formes</a> du fait de l'obsolescence de PhantomJS, sur lequel ils reposent. En attendant que ce problème soit résolu, il existe une <a href="https://hub.docker.com/r/escalope/inkscape-sozi">image Docker</a> qui fournit un environnement stable où Sozi-export fonctionne encore.</p>
<h2 id="toc-perspectives-et-évolutions">Perspectives et évolutions</h2>
<p>Les principales fonctionnalités de l'éditeur de présentation sont stabilisées et la plupart des modifications envisagées portent sur l'amélioration de l'ergonomie et des performances.</p>
<p>À moyen terme, les améliorations suivantes sont prévues :</p>
<ul>
<li>Ajouter des vignettes pour chaque vue dans l'éditeur de présentation.</li>
<li>Porter Sozi-export vers Headless Chromium à la place de PhantomJS.</li>
<li>Compléter la <a href="http://sozi.baierouge.fr/pages/ui-fr.html">documentation de l'interface utilisateur</a>.</li>
</ul>
<p>Je réfléchis également à la possibilité de distribuer Sozi sous une forme plus légère qui n'embarque pas une copie de Chromium. Pour une application qui tient en 650 Ko de code JavaScript, on se retrouve avec un paquet Debian de 40 Mo, tandis que le fichier <code>tar.gz</code> pour OS X pèse 133 Mo.</p>
<p>Après tout, Sozi s'exécute très bien dans un navigateur web. La seule raison d'utiliser Electron dans mon cas est la possibilité d'accéder au système de fichiers et de détecter automatiquement les modifications du document SVG. Je suis preneur de toutes idées qui pourraient m'aider à obtenir le même résultat tout en utilisant le navigateur déjà installé sur l'ordinateur de l'utilisateur.</p>
<ul>
<li><a href="http://sozi.baierouge.fr/">Le site web de Sozi</a></li>
<li><a href="http://sozi.baierouge.fr/community/">Le forum de discussion</a></li>
<li><a href="https://github.com/senshu/Sozi">La page du projet Sozi sur GitHub</a></li>
<li><a href="https://github.com/senshu/Sozi-export/">La page du projet Sozi-export sur GitHub</a></li>
</ul>
<div><a href="https://linuxfr.org/users/llumeao/journaux/de-sozi-12-a-sozi-19.epub">Télécharger ce contenu au format EPUB</a></div> <p>
<strong>Commentaires :</strong>
<a href="//linuxfr.org/nodes/117075/comments.atom">voir le flux Atom</a>
<a href="https://linuxfr.org/users/llumeao/journaux/de-sozi-12-a-sozi-19#comments">ouvrir dans le navigateur</a>
</p>
Guillaume Savatonhttps://linuxfr.org/nodes/117075/comments.atom