Sozi : un système de présentation alternatif
Par Guillaume Savaton le lundi 7 décembre 2009, 21:20 - Lien permanent
La semaine dernière, un collègue m'a fait découvrir Prezi, un nouveau logiciel pour créer des présentations.
L'originalité de ce logiciel, c'est qu'il rompt avec le schéma traditionnel
du diaporama : avec Prezi, toute le contenu de votre présentation est étalé sur une grande page unique que vous allez parcourir en zoomant sur les éléments successifs que vous voulez montrer.
Bien que je n'aie pas eu l'occasion de l'essayer en situation réelle, j'ai trouvé l'idée amusante. Dans ce billet, j'explique pourquoi, et comment, j'en suis arrivé à développer un petit programme que j'ai baptisé Sozi : en gros, une imitation approximative de Prezi, mais libre et reposant sur des formats ouverts. Les impatients peuvent tout de suite cliquer ici pour voir le résultat.
L'offre gratuite de Prezi vous permet de créer des présentations, de les héberger sur leurs serveurs, de les mettre à disposition des autres utilisateurs, de les visionner en ligne ou d'en télécharger une version pour la projeter même en l'absence de connexion internet.
Le principe est séduisant, mais comme pour beaucoup d'autres services d'édition de documents en ligne, vous devez faire confiance au fournisseur du service pour qu'il assure l'intégrité, la disponibilité et, le cas échéant, la confidentialité de vos documents. Dans le cas de Prezi, si vous souhaitez conserver le document original chez vous pour en assurer vous-même le stockage et être sûr qu'il sera disponible à tout moment, vous devez souscrire à la version payante du service.
Pourquoi développer une solution alternative ?
Prezi est une chaîne complète de création et de partage de présentations. Vous pouvez l'imaginer comme un tuyau dans lequel vous faites entrer vos idées par un bout (le logiciel d'édition fourni) et vous visionnez le résultat à l'autre bout (un lecteur Adobe Flash). Entre les deux... mystère.
L'absence d'information sur la manière dont vos informations sont traitées ne permet pas d'envisager d'autre point d'entrée (un autre logiciel d'édition, l'import de documents existants) ou d'autre point de sortie (une page web, une animation SVG, un document PDF imprimable) que ceux prévus par les développeurs de Prezi. En résumé :
- Prezi repose sur des formats de données fermés qui limitent les utilisations possibles de vos présentations.
- Prezi n'est pas un logiciel libre, ce qui limite les possibilités d'ajout de nouvelles fonctionnalités ou de correction de bugs.
Pour ceux qui utilisent le service gratuit, les conditions d'utilisation indiquent clairement que Prezi n'est pas responsable en cas de pertes de données. Mais comme vous ne pouvez pas obtenir une copie de sauvegarde, vous êtes coincé !
À quoi pourrait ressembler un Prezi libre ?
Tout d'abord, il reposerait entièrement sur des formats de données ouverts. Puisque l'idée est de partager des présentations sur le web, le format de dessin vectoriel SVG, associé au langage Javascript, semble un bon candidat.
Pour créer
Aujourd'hui, il existe déjà des éditeurs SVG libres[1] comme Inkscape.
Inkscape a l'avantage d'être disponible sous Linux, Windows et Mac OS X. Un système de greffons permet de lui ajouter de nouvelles fonctionnalités sans avoir à maîtriser les mécanismes internes du logiciel.
Pour visionner
La majorité des navigateurs web prennent en charge le standard SVG : on peut citer les navigateurs de la fondation Mozilla (dont Firefox), les navigateurs basés sur WebKit (dont Konqueror, Safari et Google Chrome), le navigateur Opera.
Moyennant l'utilisation d'un greffon propriétaire (absent de l'installation par défaut et non maintenu depuis début 2009), même Internet Explorer semble pourvoir afficher des documents SVG.
Sozi : un prototype bricolé en une après-midi
Pour le moment, Sozi n'a pas vocation à égaler Prezi. Il s'agit juste d'une petite expérience pour mettre en appétit. Les idées de chacun permettront peut-être de construire un outil plus complet et plus puissant,... ou pas.
Sozi, c'est :
- un document SVG "fond de tarte" avec un petit nombre d'éléments prédéfinis et quelques règles d'utilisation à respecter,
- un script en Javascript d'environ 120 lignes, sous licence GPL.
Pour l'édition, j'utilise une version non modifiée d'Inkscape. L'affichage a été testé avec le navigateur Firefox 3.5.
Cliquez ici pour visionner une présentation de démonstration.
Comment ça marche ?
Le document SVG est organisé en trois calques (techniquement, ce sont trois "groupes" SVG, qui sont considérés comme des calques par Inkscape) :
- Le calque "Controls" contient les boutons de navigation (avancer, reculer, début, fin).
- Le calque "Content" contient les éléments de la présentation, disposés sur une grande page.
- Le calque "Views" définit les points de vue successifs à afficher.
Toute la magie de Sozi réside dans l'utilisation du calque "Views".
Dans ce calque vous dessinerez de simples rectangles pour délimiter les zones sur lesquelles il faudra zoomer. Ces rectangles peuvent avoir n'importe quelle taille et n'importe quelle orientation. Le script d'animation s'occupera d'effectuer les translations, les rotations et les mises à l'échelle nécessaires pour que le contenu de chaque rectangle apparaisse maximisé et sans déformation dans la fenêtre du navigateur.
L'ordre de création des rectangles définit l'ordre de parcours dans la page. En cas d'erreur, l'éditeur XML incorporé à Inkscape permet de les réordonner sans trop d'effort.
Naturellement, vous prendrez soin de rendre le calque "Views" invisible lorsque vous souhaiterez visionner la version définitive de votre présentation.
Remarques finales
Je n'ai pas encore testé Sozi sur un ordinateur récent. Avec mon PC de bureau de 5 ans d'âge (processeur Pentium IV à 2,4 GHz, 512 Mo de mémoire vive, carte graphique NVIDIA FX5200) l'animation est plutôt saccadée et le processeur tourne à 100% de charge. Si vous avez joué l'exemple de démonstration dans un autre navigateur que Firefox 3.5, je suis également intéressé par votre retour d'expérience.
Enfin, si vous êtes un expert dans la manipulation du DOM SVG en Javascript, vous saurez certainement proposer des techniques plus efficaces pour gérer l'animation. Entre autres, j'aurais apprécié de pouvoir utiliser directement les mécanismes d'animation disponibles dans SVG, mais je n'ai pas trouvé de moyen élégant pour exploiter le résultat d'un calcul matriciel dans une animation.
22 octobre 2010 : Depuis plusieurs mois, j'ai repris le développement de Sozi. La structure du programme et le format des données ont été profondément modifiés. J'ai donc choisi de retirer les fichiers qui étaient disponibles en téléchargement sur cette page pour éviter que des utilisateurs ne confondent cette version expérimentale avec la version officielle. Désormais, vous pouvez télécharger Sozi à partir de son dépôt officiel chez GitHub.
Notes
[1] Pour les puristes, il est même possible d'éditer un document SVG avec un simple éditeur de texte !
Évaluer ce billet
4.8/5
- Note : 4.8
- Votes : 25
- Plus haute : 5
- Plus basse : 1

Commentaires
Chapeau bas, vraiment impressionant comme résultat pour un après-midi, en attendant un éditeur tout-en-un useur-friendly...
Évaluer ce commentaire
5/5
Oups, j'oubliais au passage, que sur mon Asus N10 (netbook) et avec chromium 4.0.267.0 (gougueule saymal) la démo tourne sans ramer d'un poil.
Évaluer ce commentaire
5/5
Très beau, très bonne idée.
Assez fluide sous FF 3.5 en tout cas !
C'est tout cassé sur Konqueror, mais ça doit être "normal"...
Bravo, j'espère que le projet continuera à se développer.
Évaluer ce commentaire
4.5/5
Impressionnant. Je viens de voir ton journal sur linuxfr.org et je trouve l'idée de base super intéressante et donc l'implémentation en GPL ce serait le pied.
Pour une apres midi de boulot c'est vraiment intéressant. J'ai testé sur mon eeePC 901 avec chromium. Ca tourne sans pb.
Évaluer ce commentaire
5/5
Salut,
Très intéressant comme concept. Peut-être pourrais-tu expliquer plus en détail comment réaliser une petite présentation (pas à pas, quels sont les éléments à prendre en compte dans la création des éléments svg, comment obtenir une application "standalone" qui fonctionne partout), bref un guide du débutant.
En tout cas bravo et bonne continuation je suivrai de près les évolutions futures (si tu te sens de continuer le dev
Évaluer ce commentaire
5/5
Bonsoir,
J'ai une question très bête: c'est beau mais comment ça fonctionne?
J'ai enregistrer votre démo au format svg en local et ouvert avec mon navigateur. Résultat, pas d'animation. Je dois copier le code source JavaScript quelque part?
Évaluer ce commentaire
5/5
Salut, je suis un des devs de Firefox.
Est-il possible que tu intègres les animations SVG dans ton code et de le faire tourner avec Firefox 3.7 (on supporte les animations) pour voir si les perfs sont meilleurs.
Je peux t'aider si tu veux.
Contacte te moi par email si ça t'intéresse.
Évaluer ce commentaire
5/5
Petit problème : on ne peut pas aller en arrière au-delà des vues de classe "transient". Il retourne sur la vue de transition, et avance à nouveau automatiquement. Il faudrait en fait que les transient, quand on vient de cliquer sur "back", soient remontées à l'envers.
Aucune idée de comment coder ça par contre, désolé.
Évaluer ce commentaire
4/5
Deuxième test pour moi, au boulot.
Sous firefox 3.5 ça roule bien. Faut voir que la machine est plutôt balaise.
Par contre sous Google chrome bizarrement ça marche pas du tout. Ca ressemble plus à rien. Tout ça testé sous W.....s beurk.
Et sinon avec mon eeePC 901 sous firefox 3.5 ça ramait un petit peu, mais ça peut aller.
Évaluer ce commentaire
5/5
Un chapeau bas de plus !
et ça marche pas...
Testé sur Safari 4 (l'ordi de beau-papa
Par contre sur firefox (l'ordi de belle-maman :p) là ça va nickel.
Merci !
Évaluer ce commentaire
5/5
moi aussi je joins mes félicitations au reste de l'assemblée, c'est bizarre que chez certains cela fonctionne avec safari ou chromium, chez moi aucun navigateur webkit ne lit cela correctement (caméra glisse vers le bas), mais peut-être que c'est ma version de webkit qui fait cela (libwebkit 1.1.15.4 sous archlinux).
Pour la question de ju, effectivement, il faut avoir dans le même répertoire le fichier javascript dont le lien est plus haut pour que cela fonctionne.
Bravo, encore une fois, c'est super bien fait.
Évaluer ce commentaire
5/5
Merci farvardin!
Évaluer ce commentaire
5/5
Très sympa. Dans le même ordre d'idée, il faut essayer jessyink (http://www.framasoft.net/article495...), une extension d'Inkscape, qui permet précisément d'intégrer javascript et SVG. Les résultats sont assez sympas et peuvent être exportés en PDF.
Évaluer ce commentaire
5/5
Nice work! I am looking forward to seeing the future development of Sozi. Naturally, I think that SVG and JavaScript have great potential and it's wonderful to see many new ideas popping up. If I can help you in any way, please let me know.
Cheers,
Hannes
Évaluer ce commentaire
5/5
Génial, merci beaucoup !
Je l'ai utilisé pour animer une "lettre" de nouvelle, malheureusement un peu lent donc exporté en jpg... le résultat est quand même sympa, quoi que lisibles correctement par peu de navigateurs
(j'ai aussi rajouté un "slider" pour indiquer l'avancée de la présentation, cf. http://hydromel.ch/nouvelles/2009.s... [pas pour étaler ma vie privée, mais bon...])
Merci encore, et j'espère que le développement continuera ! (si j'avais des compétence, je les joindrai volontier!)
Olivier
Évaluer ce commentaire
5/5
@olivierk: Très joli !
Je retiens aussi l'idée du slider.
Pour le moment, je ne sais pas encore quelle suite donner à ce projet, ni si je trouverai le temps d'y travailler...
Évaluer ce commentaire
5/5
Salut,
très intéressant. On peut facilement inclure tous les fichiers nécessaire (images raster par exemple) avec les uri data:
++
Évaluer ce commentaire
5/5
Ouah, excellent ! Bravo pour ton travail !
Si si allez, c'est tellement bien !
Prezi est assez innovant, et d'avoir d'ores et déjà une alternative libre fait vraiment plaisir !
Si le développement continue, je veux bien participer à sa promotion (documentation etc).
Continues et tiens nous au courant surtout ! Il faudrait d'ailleurs un site dédié à l'outil tu n'crois pas ?
Évaluer ce commentaire
5/5
Je kiffe trop, je voulais trop avoir un outil libre pour faire ce type de presentation.
Faudrait un petit site pour le projet, histoire que l'on partage nos évolutions / documents / retour d'expérience.
Bravo,
To be continued.
Évaluer ce commentaire
5/5
Awilu > Je trouverai ça trop bien aussi !
J'ai fais plusieurs modifications sur le script (décomposition du mouvement de translation pour un effet plus dynamique, possibilité de naviguer à la souris) + correction d'un petit bug (je ne sais pas pourquoi, sur certaines plateforme la multiplication des matrices est inversées, ce qui fait que la présentation déraille complètement avec certains navigateurs; j'ai bricolé une correction qui a l'air de fonctionner...)
Une démo est visionable ici : http://hydromel.ch/sozi/sozi-demo.s...
(et bien sûr : http://hydromel.ch/sozi/sozi.js)
Je ne suis pas un codeur, donc c'est parfaitement pas propre... (désolé)
Si d'autres on fait des améliorations, je suis intéressé !
Évaluer ce commentaire
5/5
Salut,
J'ai utilisé sozi pour présenter rapidement l'April sur le salon Solutions GNU/Linux, et ça a fait fureur
http://wiki.april.org/w/Diaporama_A...
Merci à toi.
Évaluer ce commentaire
5/5
@PoluX
C'est superbe !
Je suis ravi de voir que mon travail ait pu servir de support à de telles réalisations.
J'ai commencé à préparer un site web pour présenter et héberger Sozi. J'ai prévu d'intégrer les améliorations qui m'ont été proposées. J'espère juste trouver du temps pour faire tout ça.
Évaluer ce commentaire
5/5
Après avoir vu les différentes démo, je trouve ça vraiment sympa comme logiciel.
Perso j'ai une préférence pour la "1ère version" qui est plus simple (pourquoi ne pas proposer un SOZI light si jamais le projet continue).
Je me suis aussi amusé sur mon temps libre à faire un logo pour SOZI. Je n'ai malheureusement pas beaucoup de temps pour le moment mais je le mets à la disposition de ceux que ça intéresse. Vous pouvez en faire ce que vous voulez.
Vous le trouverez ici : http://www.zshare.net/download/7471...
PS: C'est un logo simple et surement pas sans reproche. J'en vois déjà deux : je trouve qu'il fait corporate et le "i" n'est pas vraiment visible.
Évaluer ce commentaire
5/5
@OlivierCO
Merci pour la proposition de logo. Il est assez sobre et élégant, mais pour être franc, j'ai du mal à y retrouver "l'esprit" de Sozi, qui serait plutôt en courbes et volutes...
Ce n'est que ma perception très subjective. Je suppose que le mieux serait de lancer un grand sondage pour élire le meilleur logo. Le tiens ferait évidemment partie des candidats.
Évaluer ce commentaire
5/5
@Guillaume Savaton
Pas de problème c'était juste un logo vite fait. Si j'ai plus de temps et plus d'idée, je me pencherais plus sérieusement dessus.
Je te souhaite une bonne continuation pour SOZI
Évaluer ce commentaire
5/5
Hi there, sorry for my lack of french. I have improved sozi.js to work with the keyboard. Any key does forward, and key "1" goes back to the initial status.
It is just a small addition to your code and is at http://gist.github.com/506189
It would be great if you could take that into your version.
Évaluer ce commentaire
5/5
@spaetz Thanks for your contribution.
I have already received several similar proposals. One has already been included in my development version (not released yet) but I will also give a look at yours.
Until now, Sozi was just a toy project. I am currently working on a revised version with significant changes that will break backwards compatibility. Hopefully, I will release it in the next few weeks.
Évaluer ce commentaire
5/5
Le concept est tres intéressant. Je n'ai pas encore pris le temps d'essayer SOZI mais pour l'avoir vu en cours, cela aide grandement a la clarté de la présentation
Évaluer ce commentaire
5/5
Quand on cherche à télécharger avec le lien que tu indiques on obtient "/tmp/DcZo1foy.part ne pourra être enregistré car le fichier source ne peut être lu.
Réessayez plus tard ou contactez l'administrateur du serveur." Peux tu indiquer où récupérer cette application prometteuse pour les enseignants?
Évaluer ce commentaire
5/5
@Ayral
Aucune idée concernant l'erreur de téléchargement. Je n'ai pas pu reproduire le problème.
La dernière version officielle de Sozi est disponible à cette adresse : http://github.com/senshu/Sozi
Elle se présente désormais comme une extension pour Inkscape. Maintenant que ça commence à être utilisable, je vais prendre le temps de rédiger un manuel d'utilisation.
Évaluer ce commentaire
5/5
Bonjour,
J'ai testé sozy il y a plusieurs mois, j'ai aussi essayé de l'intégrer à svg-edit ( http://svg-edit.googlecode.com/svn/... )afin d'avoir un diaporama "full web", de la création au stockage et à la présentation.
J'avais commencé à hacker svg-edit pour qu'il propose les 3 calques au démarrage de l'éditeur, je m'étais arrêter car l'éditeur me nettoyait le code "transform" très utile à sozy...
Si cela intéresse, on peut creuser plus loin...
Et bonne nouvelle/idée pour l'extension Inkscape.
Bonne journée.
Nicolas Villa
Évaluer ce commentaire
5/5
@Boyquotes
J'ai eu la même idée mais je n'ai pas tenté l'expérience.
Désormais, les trois calques ne sont plus obligatoires. Par contre, la nouvelle version de Sozi insère le script "sozi.js" directement dans le document et utilise des attributs XML spécifiques. Il est indispensable que ces attributs soient préservés par le logiciel d'édition SVG.
Évaluer ce commentaire
5/5
J'ai pas les yeux en face des trous ou c'est peut-être normal...
Il y a pas sozi.js dans l'archive prise sur github, pourtant sozi.js est bien évoqué dans le fichier d'installation.
Bon week-end.
Évaluer ce commentaire
5/5
J'ai pris le tar.gz , effectivement le .zip (packagé) est mieux pour tester dans inkscape.
Évaluer ce commentaire
5/5
Bonjour
Je viens juste de découvrir Sozy via linux.fr.
En effet, changer des habituels diaporamas linéaires et introduire du mouvement (même si les liens hypertexte dans une présentation sont pratiques) est très sympa
Dans le même genre d'idée mais avec une approche très différente : http://vue.tufts.edu/index.cfm
avec une approche mind mapping.
Évaluer ce commentaire
5/5
Bonsoir,
j'ai essayé sur mac OSX mais j'ai le message d'erreur suivant ;
Traceback (most recent call last):
File "sozi_edit_frame.py", line 35, in <module>
import pygtk
ImportError: No module named pygtk
Évaluer ce commentaire
5/5
Ce blog n'est pas le lieu approprié pour demander de l'aide ou signaler un dysfonctionnement.
Pour ce qui concerne votre problème, Sozi requiert l'installation de PyGTK (http://www.pygtk.org/).
Évaluer ce commentaire
5/5