Sommaire
- Qu'est-ce que Sozi ?
- Qui développe Sozi et pourquoi ?
- Sozi hier et aujourd'hui
-
Que permet de faire Sozi 19.04 ?
- Créer une présentation sous la forme d'une séquence de vues sur un document SVG
- Jouer une présentation en mode présentateur
- Créer des liens entre les vues d'une présentation
- Insérer une présentation Sozi dans une page web
- Insertion de documents vidéo et audio dans une présentation
- Convertir une présentation Sozi en une vidéo ou un document imprimable
- Perspectives et évolutions
En lisant un journal récent à propos d'un éditeur de SVG interactif, j'ai réalisé que Sozi n'avait fait l'objet d'aucune publication sur ce site depuis l'annonce de la version 12, sortie en… 2012.
Ce journal résume les principaux changements ayant eu lieu depuis cette version, en évitant une fastidieuse concaténation de release notes.
Qu'est-ce que Sozi ?
Sozi est un logiciel de création de présentations animées.
Il se positionne comme une alternative à Prezi, en se différenciant de ce dernier sur les aspects suivants :
- Sozi est un logiciel libre.
- Sozi repose sur des standards ouverts.
- Avec Sozi, l'utilisateur reste maître de ses données.
La création d'une présentation s'effectue en deux temps :
- 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.
- Importer le document SVG dans l'éditeur de présentation Sozi et définir une séquence de vues ainsi que les transitions entre ces vues.
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.
Ce document HTML peut être affiché à l'aide de tout navigateur web prenant en charge HTML5, SVG et JavaScript.
Qui développe Sozi et pourquoi ?
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.
Certains utilisateurs croient avoir affaire à une équipe de développeurs qui auraient l'ambition de gagner des parts de marché. Le site web multilingue et le forum de discussion peuvent donner cette impression.
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.
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.
Sozi hier et aujourd'hui
Les numéros de version de Sozi sont chronologiques : par exemple, la version 19.04 a été publiée en avril 2019.
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é.
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" :(
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 formulaire, peu ergonomique, à une interface permettant une manipulation directe des calques du document SVG et offrant une prévisualisation des vues et des transitions.
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.
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.
Que permet de faire Sozi 19.04 ?
Voici un aperçu des fonctionnalités offertes par Sozi aujourd'hui :
Créer une présentation sous la forme d'une séquence de vues sur un document SVG
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.
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 :
- 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.
- 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.
- Réaliser un effet de parallaxe.
Jouer une présentation en mode présentateur
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.
Désormais, l'éditeur enregistre deux fichiers HTML pour une même présentation :
- Un fichier contenant la présentation proprement dite, comme dans les versions précédentes de Sozi.
- Un fichier contenant une console présentateur qui affiche les vues précédentes, courante et suivante, ainsi que les notes du présentateur.
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.
Créer des liens entre les vues d'une présentation
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 #id ou #numéro à l'URL du document courant.
Comme HTML, SVG prend en charge la balise <a> 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 non linéaires, ou même de réaliser un site web animé dont chaque page serait une vue d'une présentation Sozi.
Insérer une présentation Sozi dans une page web
Comme Sozi produit des documents HTML, ces derniers peuvent être insérés dans d'autres pages web au moyen de la balise <iframe>. 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 l'exemple situé en bas de ce tutoriel.
Depuis Sozi 17.11, il est possible de désactiver les actions au clavier et à la souris dans une présentation.
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.
Insertion de documents vidéo et audio dans une présentation
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.
Cette extension ajoute au document SVG un rectangle gris à l'emplacement où le media devra s'afficher.
Ce rectangle est remplacé par un éléments HTML <video> ou <audio> lorsque la présentation est jouée.
À ce jour, seul Firefox affiche correctement les vidéos en respectant les transformations géométriques appliquées par Sozi.
Convertir une présentation Sozi en une vidéo ou un document imprimable
Le projet Sozi-export propose un ensemble d'outils en ligne de commande pour convertir une présentation dans différents formats :
- Séquence d'images.
- Vidéo, avec ffmpeg.
- PDF, avec pdfjam.
- PowerPoint.
Sozi-export est distribué comme un package node.js. La version la plus récente a été publiée en octobre 2018.
Malheureusement, ces outils ne fonctionnent plus aujourd'hui sur certaines plates-formes du fait de l'obsolescence de PhantomJS, sur lequel ils reposent. En attendant que ce problème soit résolu, il existe une image Docker qui fournit un environnement stable où Sozi-export fonctionne encore.
Perspectives et évolutions
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.
À moyen terme, les améliorations suivantes sont prévues :
- Ajouter des vignettes pour chaque vue dans l'éditeur de présentation.
- Porter Sozi-export vers Headless Chromium à la place de PhantomJS.
- Compléter la documentation de l'interface utilisateur.
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 tar.gz pour OS X pèse 133 Mo.
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.
# Le support du double écran ?
Posté par lejocelyn (site web personnel) . Évalué à 3. Dernière modification le 28 avril 2019 à 22:46.
En lisant ce journal, j'ai crû qu'il s'agissait d'une dépêche :)
Sinon, une fonctionnalité qui pourrait être intéressante, c'est le support du double écran. Lorsqu'on branche son ordi sur un vidéoprojecteur et l'on règle son écran en mode extension d'écran, ça évite d'avoir à se retourner en permanence vers l'écran du fond. Y'a souvent d'autres informations pratiques qui sont intégrées, comme la durée écoulée depuis le début de la présentation, le nombre de pages restantes, un pré affichage de la page suivante, une table des matières, etc
Merci en tout cas pour ce super logiciel.
[^] # Re: Le support du double écran ?
Posté par lejocelyn (site web personnel) . Évalué à 4. Dernière modification le 29 avril 2019 à 07:02.
J'ai honte, j'ai lu trop rapidement ce journal et je n'ai pas vu que c'est la fonctionnalité décrite dans Jouer une présentation en mode présentateur.
# Dépêche?
Posté par azerttyu (site web personnel) . Évalué à 4.
Salut
Merci pour ce journal, je pense que nos gentils modérateurs pourraient le convertir en dépêche :)
Merci
# Vidéos
Posté par freejeff . Évalué à 8.
Il y a plein de manières différentes pour insérer des vidéos dans un document SVG. Je pense que la plus simple est de mettre une iframe sur la page html. Du coup, cela ne serait plus possible depuis inkscape mais il faudrait l'implémenter dans l'éditeur de Sozi, et s'il y a une vidéo avoir forcément la présentation sous la forme d'une page html.
Ceci dit, il faut avoir de vrais compétences en programmation JS (que tu as démontré avoir) pour recalculer la position de la vidéo et sa taille relativement à la taille du document actuel.
C'est pour cette raison que j'ai arrêté d'utiliser Sozi, couplé au fait que les présentations me prenaient 4x plus de temps qu'avec libreoffice. Je trouvais l'idée de créer des pages HTML avec Sozi vraiment séduisante mais j'ai absolument besoin de vidéos et ne pas pouvoir voir une page avec vidéo avec chrome rend la pages inutile.
Un autre moyen simple serait de permettre l'ajout de GIF (ou autre format moderne d'images animées)
C'est dommage j'aimais vraiment l'originalité des présentations que je créais avec Sozi.
Existe il un tutorial pour l'apparition, la disparition d'éléments et les animations avancées ?
Une fonctionnalité qui serait sympa (si elle n'existe pas), serait de pouvoir associer une bande son avec un time-line pour pouvoir avoir une présentation type conférence sur un site. Je me vois bien arriver en conf avec ça et laisser parler Sozi à ma place … Ça serait pas mal ! (ceci est une blague, cela ne passerait pas …)
Je pense que Sozi pourrait avoir un énorme avenir en tant que page web animées si ces quelques points étaient réglés.
En tout cas, je redeviendrais utilisateur et je ferais mon site pro avec.
Ceci, n'est pas un reproche, je sais bien que tu es le seul développeur et que ce n'est pas tes priorités, mais bon, qui ne tente rien, n'a rien !
Bonne continuation.
[^] # Re: Vidéos
Posté par Guillaume Savaton (site web personnel) . Évalué à 5. Dernière modification le 29 avril 2019 à 22:58.
Je pense au contraire qu'on pourrait conserver l'ajout des vidéos à partir d'Inkscape.
Au moment de jouer la présentation, au lieu d'insérer la vidéo dans un
<foreignObject>à l'intérieur du document SVG, on l'insérerait dans le document HTML parent.Le plus difficile, ensuite, est d'appliquer aux vidéos les transformations géométriques des calques qui sont censés les contenir, au fur et à mesure que la présentation se déroule.
Je suppose qu'on peut insérer des images au format GIF directement dans un SVG. J'avoue n'avoir jamais essayé. Ce qui manque ensuite, c'est de déclencher l'animation du GIF au moment voulu.
Le seul tutoriel "avancé" est celui sur l'utilisation des calques. Un jour, j'ajouterai peut-être une page avec de petits exemples pour illustrer certains concepts et montrer les astuces que j'utilise.
On me l'a déjà suggéré. L'ajout d'éléments
<audio>me paraissait suffisant, mais cela pose peut-être des difficultés que je n'ai pas imaginées.Merci pour tes remarques. Même si je n'ai pas prévu d'améliorer le support des vidéos, je ne suis pas opposé à ce que quelqu'un d'autre le fasse :)
[^] # Re: Vidéos
Posté par freejeff . Évalué à 4.
On peut trouver des tutoriels pour permettre d'adapter la vidéo avec des feuilles de style CSS.
Je suis incapable de dire si cela résout le problème ou pas je n'ai jamais travaillé avec HTML/CSS/JS, mais cela peut être une piste. Malheureusement, vu mon incompétence dans ce domaine, je ne pourrais pas le coder … Et de plus, je pense que le travail important que tu as fait sur le JS demande des compétences avancées dans ce langage qui font qu'à part un programmeur expérimenté dans ce langage, probablement personne ne sera en mesure de le faire.
En fait si tu ajoutes un évènement audio, comment tu le synchronise avec le défilement.
Il y a deux possibilités. La première, tu te satisfais d'avoir une bande audio par "slide", ainsi c'est la bande audio qui définie le temps de la slide.
La deuxième, tu veux une narration complète sur la présentation, dans ce cas, il faut pouvoir déclencher l'audio par une action au début de la présentation et ensuite définir manuellement le temps associé à chaque "slide" pour que cela colle avec la bande audio.
Même si la deuxième stratégie est bien plus chronophage, elle permet de simuler une présentation orale totalement, alors que la première permet une base de slides qui pourrait être utilisée dans un site au déroulement non-linéaire. Les deux ont leurs avantages.
Si pour toi la balise audio est suffisante, comment peut on dans Sozi, faire ces deux cas de figure ? Faut il coder ou tout est-ce que tout est disponible dans l'interface ?
C'est toi qui code, tu fais bien ce que tu veux ! Par contre, quels efforts as tu fait pour expliquer tes choix de designs, quelles sont les compétences que tu estimes nécessaires pour rentrer dans ton code, à quel point peux tu aider quelqu'un qui aurait les compétences et souhaiterait le faire ?
J’espère vraiment que cela sera fait, afin que je puisse réutiliser Sozi. Pourquoi ne pas faire une cagnotte pour cette action et la présenter sur LinuxFR et d'autres endroits ou Sozi est connu, je serais prêt à participer.
[^] # Re: Vidéos
Posté par Guillaume Savaton (site web personnel) . Évalué à 2.
Comme pour les vidéos, l'élément audio peut être déclenché automatiquement à l'entrée dans une vue.
On peut également associer à chaque vue une durée au bout de laquelle on passe automatiquement à la suivante.
Je n'ai pas essayé, alors il y a peut-être des problèmes auxquels je n'ai pas pensés.
Ça fait partie des exemples qu'il faudrait ajouter au site web.
Ce n'est effectivement pas documenté et cela peut décourager d'éventuels contributeurs.
Par le passé, les personnes qui ont osé proposer des patches ont réussi à s'y retrouver dans le code source sans mon aide, mais je ne peux pas attendre ça de tout le monde.
[^] # Re: Vidéos
Posté par Guillaume Savaton (site web personnel) . Évalué à 2.
Je retiens l'idée. Je regarde du côté de Bountysource, qui permet aux utilisateurs de financer les fonctionnalités qui les intéressent, et aux développeurs de se porter candidats.
Pour ce qui concerne la vidéo, il y a deux points qui me semblent mériter une attention particulière :
[^] # Re: Vidéos
Posté par freejeff . Évalué à 2.
Super !
Je pense qu'il faut en faire une journal !
Je suis vraiment tombé dessus par hasard en regardant les réponses à mes posts mais la visibilité de cette annonce est insuffisante.
Je vais prendre le temps de regarder comment m'inscrire sur ce site et les modalités de participation.
Je serais un peu occupé la semaine prochaine, mais si tu n'as pas fait un journal d'ici là, j'en écrirais un et j'essayerais de bien illustrer l'intérêt !
Merci pour l'initiative !
[^] # Re: Vidéos
Posté par freejeff . Évalué à 1.
Étonnant de se faire inutiliser sur un tel commentaire, que cela indiffère, je le conçois, mais que quelqu'un moinsse sur un tel post ?
On en découvre tous les jours !
[^] # Re: Vidéos
Posté par Guillaume Savaton (site web personnel) . Évalué à 1.
C'est vrai. C'est parce que ce message t'était personnellement destiné :)
En réalité, j'ai également rédigé une annonce sur le forum de discussion de Sozi et sur Twitter. Je vais aussi ajouter des infos dans la rubrique "Contribuer" sur le site web.
Suivre le flux des commentaires
Note : les commentaires appartiennent à celles et ceux qui les ont postés. Nous n’en sommes pas responsables.