Sozi en mode expert : construire des présentations pédagogiques vraiment interactives

Sozi en deux minutes : le principe à connaître avant d’aller plus loin

Sozi permet de transformer un document vectoriel au format SVG en une présentation animée que l’on consulte dans un simple navigateur. Contrairement à un logiciel de diaporama classique, il ne découpe pas le contenu en diapositives indépendantes : l’ensemble de la présentation reste disposé sur une même surface, dans laquelle on définit successivement des zones à afficher.

Le travail commence généralement dans Inkscape, où l’on prépare les textes, les figures, les images et les différents calques. Le fichier SVG est ensuite ouvert dans l’éditeur Sozi afin de créer des vues, de régler leurs cadrages et d’organiser les déplacements entre elles. Sozi génère finalement un fichier HTML autonome, utilisable sur le poste d’un TBI ou d’un VPI sans qu’il soit nécessaire d’y installer le logiciel.

Cette logique était déjà au cœur de mon article consacré au choix d’un format durable pour les documents destinés au TBI ou au VPI. Plus récemment, j’ai également proposé un script Bash qui prépare automatiquement un SVG organisé en calques à partir des images et des figures d’une séance.

Dans son usage le plus simple, Sozi permet donc de cadrer une zone, puis une autre, et d’organiser le déplacement entre les deux. Mais l’utiliser réellement en mode expert suppose de ne plus penser en termes de diapositives : il faut apprendre à construire un espace, à y superposer des informations et à proposer plusieurs chemins possibles.

Penser une carte pédagogique plutôt qu’une succession de diapositives

Le premier changement de perspective consiste à oublier, autant que possible, la logique du diaporama classique. Dans PowerPoint ou Impress, le professeur avance généralement d’une diapositive à la suivante. Avec Sozi, tout le contenu peut au contraire être organisé sur une même surface : une vue d’ensemble, plusieurs zones de détail, des documents annexes, des indices, une correction ou encore une synthèse finale.

Cette organisation spatiale n’est pas seulement plus spectaculaire. Elle peut aider les élèves à comprendre les relations entre les informations. Un détail n’est plus isolé sur une nouvelle page : il reste situé à l’intérieur d’un ensemble que l’on peut retrouver à tout moment. Le déplacement de la caméra peut ainsi matérialiser le passage du général au particulier, rapprocher deux éléments à comparer ou replacer une étape dans la structure complète du cours.

• En Histoire, une même surface peut contenir une frise entière, des documents associés à certaines dates et plusieurs zones d’explication.
• En Sciences, elle peut accueillir un schéma global, puis des vues consacrées à chacun de ses composants.
• En Mathématiques, une figure peut être présentée dans son ensemble avant que l’on zoome successivement sur les données, une construction auxiliaire, un calcul ou une étape de démonstration.

Déroulement réel

Cette carte peut également reproduire le déroulement réel d’une séance. On peut placer le problème initial au centre, les aides sur un côté, les productions d’élèves dans une autre zone et la synthèse plus loin. Le parcours suivi pendant la projection raconte alors quelque chose : il rend visible la manière dont la réflexion se construit.

Le canevas Sozi ne doit donc pas être considéré comme une grande feuille sur laquelle on aurait simplement posé plusieurs diapositives. Il devient un espace pédagogique dont la disposition, les distances et les déplacements participent eux aussi à la compréhension.

Cette liberté demande toutefois un minimum de préparation. Des zones trop éloignées provoquent des déplacements longs et inutiles ; des orientations trop différentes peuvent désorienter les élèves ; une accumulation de zooms finit rapidement par transformer la séance en démonstration technique. Le mode expert ne consiste pas à multiplier les mouvements, mais à choisir une organisation spatiale cohérente et à ne déplacer le regard que lorsque ce déplacement apporte du sens.

Pour rendre cette logique immédiatement perceptible, voici une courte présentation interactive. Elle ne développe aucun contenu disciplinaire particulier : son objectif est de montrer comment une séance peut s’organiser autour d’un problème central, avec des zones réservées aux aides, aux productions d’élèves, à la correction et à la synthèse.

Explorez librement les différentes zones. Afficher la présentation dans un nouvel onglet

Cadrer avec précision grâce aux identifiants des éléments SVG

Dans une présentation Sozi simple, chaque vue peut être positionnée directement à la souris. Cette méthode suffit pour quelques déplacements, mais elle devient vite approximative lorsque le document s’enrichit. Pour retrouver précisément une zone, suivre les modifications du SVG ou réutiliser plusieurs fois le même cadrage, il est préférable de s’appuyer sur les identifiants des éléments du document.

Un élément utilisé par Sozi n’est pas nécessairement un rectangle de construction. Il peut s’agir d’une figure, d’un groupe d’objets ou, comme dans mon propre flux de travail, d’un calque Inkscape complet.

Dans le code SVG, un calque Inkscape est en réalité un groupe auquel sont associés un nom visible dans Inkscape et un identifiant technique :

<g
  inkscape:groupmode="layer"
  inkscape:label="Correction progressive"
  id="calque_correction">

Le libellé Correction progressive facilite le travail dans l’interface d’Inkscape. L’identifiant calque_correction, lui, permet à Sozi de retrouver précisément ce groupe dans le document.

Utiliser directement un calque comme élément de référence

Dans Sozi, le champ consacré à l’identifiant de l’élément de référence permet de rattacher une vue à un objet précis du SVG. Lorsque l’identifiant d’un calque est utilisé, la caméra peut être ajustée aux limites occupées par son contenu.

On peut ainsi organiser une séance autour de calques clairement nommés :

calque_vue_generale
calque_probleme
calque_aides
calque_productions
calque_correction
calque_synthese

Pour construire la vue consacrée à la correction, il suffit alors d’indiquer à Sozi que l’élément de référence est calque_correction, puis d’utiliser la fonction d’ajustement à l’élément. Le cadrage est calculé à partir du contenu réel du calque, sans qu’il soit nécessaire de dessiner un cadre supplémentaire.

Cette méthode présente un avantage important : si le contenu du calque est déplacé ou modifié dans Inkscape, la vue peut rester liée à cet ensemble. On ne travaille plus uniquement avec des coordonnées placées approximativement sur une grande page ; on construit une relation entre une vue Sozi et une partie clairement identifiée du document.

Dans cette logique, le calque n’est pas seulement un rangement pratique dans Inkscape : il devient une unité de construction de la présentation.

Attention aux limites réelles du calque

Lorsqu’un calque sert de référence, Sozi tient compte de l’espace occupé par les objets qu’il contient. Un élément oublié loin du contenu principal, une décoration trop grande ou une zone transparente peuvent donc produire un cadrage beaucoup plus large que prévu.

Si une vue semble anormalement éloignée, il faut vérifier :

• qu’aucun objet parasite ne se trouve à l’extérieur de la zone utile ;
• que les décorations sont placées dans le bon calque ;
• qu’une image importée ne possède pas des dimensions disproportionnées ;
• que l’identifiant saisi dans Sozi correspond bien au calque souhaité ;
• que le calque ne contient pas un ancien élément resté invisible dans Inkscape.

Cette vigilance est particulièrement nécessaire lorsque le SVG a été constitué par assemblage de plusieurs ressources. Mon script sozi_conforme.sh crée précisément un calque par image ou par fichier SVG importé. Cette organisation permet ensuite de sélectionner chaque ressource comme un ensemble cohérent, mais elle rend également le nommage et le contrôle du contenu des calques essentiels.

Élément de référence et élément de contour

Sozi distingue l’élément de référence de l’élément de contour. Dans de nombreux cas, les deux peuvent être identiques : le même calque sert à positionner la caméra et à déterminer les limites de la vue.

Les deux rôles ne doivent toutefois pas être confondus.

• L’élément de référence permet de rattacher la position de la caméra à un objet ou à un groupe du SVG.
• L’élément de contour définit les limites utilisées pour ajuster et, éventuellement, rogner la vue.

Lorsque le calque contient exactement ce que l’on souhaite montrer, son identifiant peut remplir les deux fonctions. Si l’on veut au contraire imposer des marges particulières ou un format strictement identique pour plusieurs vues, on peut utiliser le calque comme référence et un autre élément comme contour.

Ne pas masquer par erreur le calque qui contient le contenu

Sozi permet de masquer l’élément utilisé comme contour pendant la lecture de la présentation. Cette fonction est très pratique lorsqu’il s’agit d’un rectangle dessiné uniquement pour définir le cadrage.

Elle doit en revanche être utilisée avec prudence lorsque l’élément de contour est un calque complet. Demander à Sozi de masquer cet élément reviendrait à masquer le groupe lui-même, donc potentiellement tout son contenu.

Si le contour est un simple cadre de construction, on peut le masquer. Si le contour est le calque que l’on souhaite montrer, il doit évidemment rester visible.

Cette distinction explique pourquoi certains utilisateurs préfèrent ajouter des rectangles de cadrage, tandis que d’autres utilisent directement leurs calques. Les deux méthodes sont valables, mais elles ne répondent pas exactement aux mêmes besoins.

Quand un rectangle de cadrage reste utile

Dans mon usage courant, les calques constituent la méthode principale. Un rectangle dédié peut néanmoins rendre service dans certaines situations :

• imposer exactement un rapport 16/9 (ou 16/10);
• conserver une marge régulière autour du contenu ;
• donner le même cadrage à plusieurs calques de dimensions différentes ;
• exclure volontairement une partie du contenu du calque ;
• rogner les objets qui dépassent d’une zone déterminée ;
• préparer une fenêtre fixe derrière laquelle un calque pourra se déplacer.

On peut alors conserver une convention simple :

calque_correction
cadre_correction

calque_correction désigne le groupe qui contient réellement les objets à afficher. cadre_correction désigne éventuellement un rectangle technique destiné à définir plus précisément la fenêtre d’affichage.

Des identifiants stables pour des présentations faciles à modifier

La principale difficulté n’est pas de créer un identifiant, mais de le conserver. Lorsqu’un élément déjà utilisé par Sozi est supprimé puis recréé dans Inkscape, le nouvel objet peut recevoir un autre identifiant, même si son apparence et son nom visible restent identiques.

Une vue qui faisait référence à calque_correction risque alors de ne plus retrouver son élément. Il est donc préférable de modifier le calque existant plutôt que de le supprimer, et de contrôler les identifiants après une restructuration importante du SVG.

Il faut également distinguer l’identifiant du calque de celui de la vue Sozi :

Un bouton peut ainsi conduire vers la vue #correction, tandis que cette vue est cadrée grâce au groupe SVG nommé calque_correction.

<a href="#correction">
  Afficher la correction
</a>

Cette organisation rend le document plus lisible, mais surtout beaucoup plus facile à reprendre. En ouvrant le SVG plusieurs mois plus tard, on comprend immédiatement quel calque correspond à quelle partie de la présentation et quelles vues pourront s’y rattacher.

Une fois les calques correctement identifiés et cadrés, ils ne servent plus seulement à délimiter des zones. Sozi peut aussi les déplacer séparément, modifier leur opacité, les faire apparaître progressivement ou maintenir certains éléments fixes pendant que le reste du document évolue. C’est cette indépendance des calques qui constitue le véritable moteur d’une présentation avancée.

Faire des calques le véritable moteur de la présentation

Dans Inkscape, les calques servent d’abord à organiser le document. Dans Sozi, ils acquièrent une fonction supplémentaire : chaque calque peut évoluer indépendamment des autres au fil des vues. Le fond peut rester immobile pendant qu’une figure se déplace ; une légende peut apparaître progressivement ; une correction peut venir se superposer à l’énoncé sans modifier le cadrage général.

Cette indépendance constitue l’une des différences essentielles entre une présentation Sozi élémentaire et un document réellement construit. Au lieu de déplacer toute la caméra sur une grande surface unique, on peut décider, pour chaque vue, de la position, de l’échelle, de l’orientation et de l’opacité de chacun des calques.

Une vue Sozi ne décrit pas seulement l’endroit que regarde la caméra. Elle décrit aussi l’état de chacun des calques à cet instant de la présentation.

Un calque par fonction pédagogique

Il est tentant de multiplier les calques selon la nature technique des objets : un calque pour les textes, un autre pour les images, un autre pour les formes. Pour construire une séance, une organisation par fonction pédagogique est souvent plus efficace.

00_fond
10_navigation
20_enonce
30_figure
40_indice
50_annotations
60_correction
70_synthese
90_decorations

Cette structure permet de comprendre immédiatement ce qui doit rester visible, ce qui doit apparaître plus tard et ce qui pourra se déplacer indépendamment. Elle facilite également la reprise du document plusieurs mois après sa création.

Dans mon propre flux de travail, le script sozi_conforme.sh crée automatiquement un calque Inkscape pour chaque image ou fichier SVG placé dans le dossier de la séance. Les ressources du sous-dossier deco/ sont ajoutées au-dessus des autres. Le document obtenu constitue une base organisée, que l’on peut ensuite réarranger dans Inkscape avant de définir les vues dans Sozi.

Conserver un repère fixe pendant que le contenu évolue

Un premier usage consiste à maintenir certains éléments au même endroit dans toutes les vues. Un bandeau de navigation, le titre de la séance, une consigne courte ou un bouton de retour peuvent rester fixes pendant que le contenu principal se déplace ou change d’échelle.

Sur un TBI, cette stabilité est particulièrement précieuse. Les élèves conservent des repères visuels pendant que l’attention se porte successivement sur plusieurs zones du document. La présentation donne alors moins l’impression de voyager sans cesse dans une immense affiche.

On peut, par exemple, utiliser :

• un calque de fond conservant le même cadrage dans toutes les vues ;
• un calque de navigation contenant des boutons permanents ;
• un calque principal qui se déplace entre plusieurs activités ;
• un calque d’annotations dont le contenu varie selon les étapes.

Pour maintenir un calque fixe, il suffit de lui conserver le même état d’une vue à l’autre, tandis que les autres calques adoptent leurs propres positions. La caméra apparente peut ainsi se déplacer sur le contenu sans entraîner tous les éléments avec elle.

Faire apparaître une information grâce à l’opacité

L’opacité permet de révéler progressivement un calque sans quitter la zone actuellement affichée. Une première vue peut montrer uniquement l’énoncé et la figure. La vue suivante conserve exactement le même cadrage, mais fait apparaître un indice, un codage ou une première étape de correction.

Cette méthode est souvent plus lisible qu’un déplacement de caméra. Lorsque deux vues partagent le même cadrage et que seule l’opacité d’un calque change, l’élève comprend immédiatement qu’une information vient s’ajouter à la situation précédente.

Un enchaînement peut prendre cette forme :

Vue 1 : énoncé + figure
Vue 2 : énoncé + figure + codages
Vue 3 : énoncé + figure + construction auxiliaire
Vue 4 : énoncé + figure + correction
Vue 5 : synthèse seule

Il faut ici distinguer deux réglages qui peuvent sembler proches. L’icône en forme d’œil masque temporairement un calque dans l’éditeur Sozi afin de faciliter le travail sur les autres. Elle ne signifie pas que ce calque sera caché pendant la projection. Pour le rendre réellement invisible dans une vue, il faut régler son opacité à zéro.

Superposer plusieurs états d’un même document

Les calques permettent aussi de préparer plusieurs versions d’un même support sans dupliquer tout le document. Une figure initiale peut rester dans un premier calque, ses codages dans un deuxième, la construction auxiliaire dans un troisième et la solution complète dans un quatrième.

• En Mathématiques, cette organisation permet de conserver rigoureusement la même figure tout au long du raisonnement.
• En Sciences, on peut superposer les différentes parties d’un mécanisme.
• En Géographie, plusieurs informations peuvent être ajoutées progressivement sur un même fond de carte.
• En langues, un texte peut recevoir successivement des repérages, une traduction partielle puis des commentaires.

La superposition peut également servir à comparer deux démarches. Deux productions d’élèves sont placées sur des calques différents, mais dans la même zone. On affiche d’abord la première, puis la seconde, avant de les rendre visibles simultanément pour mettre en évidence leurs points communs et leurs différences.

Déplacer séparément le fond, le contenu et les annotations

Lorsque plusieurs calques possèdent des mouvements différents, Sozi peut produire un effet de profondeur. Un arrière-plan se déplace légèrement, le contenu principal davantage, tandis qu’une légende reste fixe. Cet effet de parallaxe peut rendre la structure spatiale plus perceptible.

Son intérêt pédagogique reste cependant limité s’il ne sert qu’à impressionner. Les déplacements indépendants deviennent réellement utiles lorsqu’ils traduisent une relation :

• un détail est extrait d’un schéma global ;
• une légende vient se placer à proximité de l’objet expliqué ;
• deux éléments éloignés sont rapprochés pour être comparés ;
• une construction se développe autour d’une figure fixe ;
• une correction glisse devant un énoncé qui demeure visible en arrière-plan.

Le mouvement doit permettre de suivre une idée, et non obliger les élèves à suivre une démonstration graphique.

Réutiliser le même cadrage avec plusieurs combinaisons de calques

L’un des usages les plus efficaces consiste à créer plusieurs vues partageant le même cadrage, mais présentant des états différents des calques. Cette méthode est particulièrement adaptée à la correction progressive.

Imaginons une activité composée des calques suivants :

calque_enonce
calque_figure
calque_indice
calque_erreur_frequente
calque_correction
calque_synthese

La première vue montre l’énoncé et la figure. Si la classe bloque, une vue fait apparaître le calque d’indice. Si une erreur intéressante est proposée, le professeur peut afficher le calque correspondant. La correction complète ne sera ouverte qu’au moment choisi.

Le document n’impose donc plus une progression unique. Les calques fournissent les différentes ressources ; les boutons et les identifiants de vues permettront ensuite de choisir le chemin réellement suivi.

Ne pas confondre richesse et accumulation

La possibilité de déplacer et de faire apparaître chaque calque peut rapidement conduire à une présentation surchargée. Or le TBI amplifie tous les mouvements : un déplacement élégant sur l’écran de préparation peut devenir fatigant lorsqu’il est projeté sur une grande surface.

Quelques principes permettent de conserver une présentation lisible :

• limiter les calques réellement animés dans une même transition ;
• maintenir au moins un repère stable à l’écran ;
• préférer une apparition simple à un long déplacement lorsque l’espace n’apporte aucune information ;
• éviter les rotations qui ne correspondent pas à un changement réel de point de vue ;
• tester la présentation à la taille du TBI, et non uniquement sur l’écran de l’ordinateur ;
• prévoir des cadrages adaptés au rapport 16/10 du matériel utilisé.

Le bon usage des calques ne consiste pas à tout animer séparément, mais à décider ce qui doit rester stable, ce qui doit évoluer et ce qui ne doit apparaître qu’au moment utile.

À ce stade, la présentation peut déjà s’adapter au déroulement d’une séance. Pour sortir complètement du parcours linéaire, il reste toutefois à transformer certains objets du SVG en véritables boutons : retour à la carte générale, ouverture d’un indice, accès direct à une correction ou choix entre plusieurs prolongements.

Construire de vrais boutons et sortir du parcours linéaire

Une présentation Sozi peut être parcourue avec les flèches du clavier ou par clic, comme un diaporama classique. Mais elle peut aussi proposer plusieurs destinations à partir d’une même vue. Un objet dessiné dans Inkscape peut devenir un bouton conduisant directement vers une aide, une correction, une synthèse ou un retour à la vue générale.

Cette navigation non linéaire est particulièrement intéressante en classe. Le professeur ne prépare plus seulement une suite d’écrans : il prépare plusieurs chemins possibles et choisit celui qui correspond réellement aux réactions des élèves.

Les vues définissent les différentes étapes disponibles ; les boutons permettent de choisir, pendant la séance, lesquelles seront effectivement parcourues.

Attribuer un identifiant stable à chaque vue

Pour devenir la destination d’un bouton, une vue Sozi doit posséder un identifiant explicite. Cet identifiant est différent de son titre visible dans la liste des vues.

Une présentation pédagogique peut, par exemple, utiliser les identifiants suivants :

accueil
probleme
aide_1
aide_2
production
erreur_frequente
correction
synthese
prolongement

Il est préférable d’utiliser des identifiants courts, descriptifs, sans espace et sans caractère accentué. Ils seront plus faciles à reconnaître dans les liens, dans le fichier JSON et dans l’adresse affichée par le navigateur.

Lorsqu’une présentation atteint la vue correction, son adresse se termine par un fragment de ce type :

presentation.sozi.html#correction

Cette adresse peut être utilisée dans un bouton interne, mais aussi être transmise directement à un élève ou intégrée dans une page web. Le document s’ouvrira alors sur la vue concernée plutôt que sur le début de la présentation.

Transformer un objet SVG en bouton

Un bouton peut être constitué d’un rectangle, d’une icône, d’un texte ou d’un groupe réunissant plusieurs objets. Dans le code SVG, cet ensemble est placé à l’intérieur d’un lien dont la destination correspond à l’identifiant d’une vue Sozi.

<a href="#correction" target="_self">
  <g id="bouton_correction">
    <rect
      x="100"
      y="100"
      width="320"
      height="80"
      rx="20" />

    <text
      x="260"
      y="150"
      text-anchor="middle">
      Afficher la correction
    </text>
  </g>
</a>

Le lien #correction ne vise pas un fichier extérieur. Il demande au lecteur Sozi de rejoindre la vue dont l’identifiant est correction.

Dans Inkscape, il n’est pas nécessaire de modifier directement le code SVG. On peut sélectionner l’objet ou le groupe constituant le bouton, puis renseigner son attribut de lien dans les propriétés de l’objet. Une vérification du code reste néanmoins utile lorsque le bouton semble ne rien déclencher.

Pour une navigation interne à la présentation, la cible doit rester dans la même page :

target="_self"

Une cible comme _blank ouvrirait au contraire une nouvelle fenêtre ou un nouvel onglet, ce qui convient davantage à un lien vers une ressource extérieure.

Agrandir la zone réellement cliquable

Sur un écran d’ordinateur, une petite icône peut suffire. Sur un TBI, le bouton doit être utilisable au doigt ou avec un stylet, parfois depuis une position peu confortable. Sa zone active doit donc être sensiblement plus large que le texte ou le pictogramme visible.

Le plus simple consiste à placer derrière le contenu du bouton un rectangle occupant toute la zone cliquable. Ce rectangle peut être presque transparent, mais il vaut mieux éviter fill="none", qui risque de ne rendre cliquable que son contour.

<a href="#aide_1" target="_self">
  <g id="bouton_aide_1">

    <rect
      x="80"
      y="80"
      width="360"
      height="100"
      rx="22"
      fill="#ffffff"
      fill-opacity="0.001" />

    <text
      x="260"
      y="142"
      text-anchor="middle">
      Besoin d’un indice ?
    </text>

  </g>
</a>

Le rectangle demeure visuellement imperceptible, mais toute sa surface reçoit le clic. Cette précaution améliore nettement le confort d’utilisation sur un grand écran tactile.

Préparer un calque réservé à la navigation

Les boutons peuvent être regroupés dans un calque Inkscape spécifique :

10_navigation
├── bouton_accueil
├── bouton_precedent
├── bouton_aide
├── bouton_correction
└── bouton_synthese

Ce calque peut conserver la même position dans toutes les vues. Le contenu principal se déplace alors derrière une interface stable, comparable à une petite barre de navigation.

Sur un TBI, quelques boutons permanents peuvent être particulièrement utiles :

• un bouton « retour à la carte » ;
• un bouton « activité précédente » ;
• un bouton ouvrant un indice ;
• un bouton donnant accès à la synthèse ;
• un bouton permettant de revenir au problème initial.

Cette stabilité évite au professeur de chercher constamment les commandes du lecteur ou de se souvenir de l’ordre exact des vues. Elle aide aussi les élèves à comprendre qu’ils peuvent revenir à un point de départ commun.

Copier l’état d’un calque d’une vue à l’autre

C’est ici qu’intervient la fonction souvent désignée comme « copier un calque ». L’expression peut prêter à confusion : Sozi ne crée pas une seconde copie des objets présents dans le SVG. Il copie les propriétés du calque dans la présentation.

Selon les réglages concernés, cela permet de reprendre :

• sa position ;
• son niveau de zoom ;
• son angle ;
• son opacité ;
• son cadrage ;
• ses paramètres de transition.

Imaginons que le calque 10_navigation soit correctement placé dans la vue d’accueil. Plutôt que de le repositionner manuellement dans toutes les vues, on peut copier son état vers les autres vues sélectionnées.

Cette fonction est également utile lorsqu’un calque doit conserver exactement le même cadrage pendant plusieurs étapes :

Vue 1 : figure seule
Vue 2 : figure + codages
Vue 3 : figure + construction
Vue 4 : figure + correction

L’état du calque contenant la figure est copié d’une vue à l’autre. Seuls les calques des codages, de la construction ou de la correction sont ensuite modifiés.

Copier l’état d’un calque permet de partir d’une situation rigoureusement identique avant de ne modifier que ce qui doit réellement évoluer.

Copier ou lier : deux logiques proches, mais différentes

Une copie fournit un point de départ identique. Après la copie, chaque vue peut néanmoins être modifiée indépendamment.

La liaison va plus loin : l’état du calque dans une vue dépend de son état dans la vue précédente. Cette solution convient particulièrement à un calque qui doit rester stable pendant toute une séquence, comme une barre de navigation ou un fond permanent.

La différence peut être résumée ainsi :

Une liaison utilisée sans attention peut toutefois produire un effet inattendu : une modification appliquée au calque dans une vue peut se répercuter sur les vues qui lui sont liées. Avant de déplacer un calque, il faut donc vérifier si son état est autonome ou rattaché à une vue précédente.

Créer une carte d’accueil plutôt qu’un menu interminable

Une présentation non linéaire n’a pas besoin d’afficher tous ses boutons en permanence. Une solution simple consiste à préparer une vue d’accueil qui joue le rôle de carte générale.

Elle peut proposer quatre ou cinq grandes destinations :

Le problème
Les aides
Les productions
La correction
La synthèse

Chaque destination contient ensuite un bouton permettant de revenir à cette carte. Le professeur dispose ainsi d’un point de repère central sans encombrer toutes les vues d’un menu complexe.

Cette organisation correspond à celle de la mini-présentation intégrée plus haut. Depuis la carte générale, le lecteur peut choisir une zone. Une fois le détail consulté, un bouton permet de revenir à l’ensemble et d’emprunter un autre chemin.

Adapter réellement le parcours aux réponses des élèves

Les boutons prennent tout leur sens lorsqu’ils correspondent à de véritables décisions pédagogiques.

À partir d’une question initiale, plusieurs chemins peuvent être proposés :

• la classe réussit : accès direct au prolongement ;
• une difficulté technique apparaît : ouverture d’un rappel ciblé ;
• une erreur fréquente est formulée : affichage d’une analyse préparée ;
• deux démarches s’opposent : comparaison de productions ;
• la recherche s’achève : construction progressive de la synthèse.

Le contenu reste préparé à l’avance, mais son ordre d’apparition ne l’est plus complètement. La présentation accompagne la séance au lieu de lui imposer un scénario rigide.

Conserver malgré tout un parcours de secours

Une navigation libre ne doit pas rendre la présentation impossible à utiliser sans les boutons. Il reste prudent de conserver un ordre cohérent dans la liste des vues Sozi.

Les flèches du clavier doivent permettre de parcourir le document selon un chemin acceptable, même si ce chemin n’est pas celui qui sera suivi habituellement. Cette précaution est utile lorsqu’un bouton fonctionne mal, lorsqu’une présentation est exportée dans un autre format ou lorsqu’un collègue la découvre sans connaître sa logique interne.

On peut donc prévoir deux modes complémentaires :

• un parcours linéaire de secours, accessible avec les flèches ;
• un parcours non linéaire, piloté par les boutons et les besoins de la classe.

Le mode expert ne consiste pas à supprimer l’ordre des vues, mais à ne plus en faire l’unique chemin possible.

Cette navigation peut déjà transformer profondément l’usage de Sozi en classe. Elle pose cependant une nouvelle question : comment reprendre une présentation ancienne, modifier ses vues ou récupérer un document lorsque le fichier JSON d’origine a disparu ?

Modifier ou récupérer une présentation Sozi existante

Une présentation Sozi reste rarement figée. On souhaite corriger une coquille, remplacer une figure, adapter une séance à un autre niveau ou reprendre plusieurs années plus tard un document dont on ne se souvient plus très bien de l’organisation. La marche à suivre dépend alors des fichiers qui ont été conservés.

Dans le cas idéal, le dossier contient au moins les deux fichiers sources portant le même nom de base :

proportionnalite.svg
proportionnalite.sozi.json

Le premier contient le document graphique construit avec Inkscape. Le second contient les données propres à Sozi : les vues, leur ordre, les états des calques, les cadrages, les transitions, les notes et différents réglages de l’éditeur.

Le SVG conserve le contenu et son organisation graphique ; le JSON conserve sa mise en scène dans Sozi.

Avec le SVG et le JSON : le cas idéal

Lorsque les deux fichiers sont encore présents dans le même dossier, la présentation peut être reprise normalement. On modifie d’abord le SVG dans Inkscape, puis on l’enregistre sans changer son nom. Dans Sozi, il suffit ensuite de recharger le document graphique pour retrouver les vues déjà construites sur la nouvelle version.

Cette opération fonctionne particulièrement bien lorsque les modifications restent internes aux calques existants :

• corriger ou remplacer un texte ;
• modifier une couleur ;
• déplacer un objet à l’intérieur de son calque ;
• ajouter une annotation ;
• remplacer une image ;
• compléter une figure.

Il faut en revanche être plus prudent lorsqu’on supprime puis recrée un calque, un groupe, un contour ou un bouton. Même si le nouvel élément porte le même libellé visible dans Inkscape, son identifiant SVG peut avoir changé. Les vues Sozi qui utilisaient l’ancien identifiant comme référence ou comme contour risquent alors de perdre leur cible.

Avant une restructuration importante, il est donc préférable de contrôler les identifiants utilisés :

calque_probleme
calque_indice
calque_correction
bouton_accueil
bouton_synthese

Lorsqu’un élément est déjà exploité par Sozi, mieux vaut généralement le modifier que le supprimer pour en recréer un autre visuellement identique.

Créer une variante sans reconstruire toutes les vues

Une présentation existante peut servir de modèle pour une nouvelle séance. Il faut alors dupliquer ensemble le SVG et son JSON, en conservant le même nom de base pour les deux copies.

cp fractions-5e.svg fractions-4e.svg
cp fractions-5e.sozi.json fractions-4e.sozi.json

Le nouveau dossier contient alors :

fractions-4e.svg
fractions-4e.sozi.json

En ouvrant fractions-4e.svg dans Sozi, le logiciel retrouve le fichier JSON correspondant. Les vues, les transitions et l’organisation des calques constituent déjà une base de travail.

Cette méthode est particulièrement utile pour produire :

• une version élève et une version corrigée ;
• plusieurs séances fondées sur la même architecture ;
• une adaptation pour un autre niveau ;
• une variante allégée pour un groupe ayant besoin de davantage de guidage ;
• une nouvelle présentation utilisant les mêmes boutons et la même navigation.

Il faut néanmoins conserver une structure SVG compatible. Si tous les calques sont supprimés et recréés avec de nouveaux identifiants, le JSON continuera à rechercher les anciens éléments. La présentation pourra s’ouvrir, mais certaines vues devront être réparées.

Avec le SVG mais sans le JSON : le contenu subsiste, pas le parcours

La situation devient plus délicate lorsque le SVG a été conservé, mais que le fichier .sozi.json a disparu. Le document reste entièrement modifiable dans Inkscape : les textes, figures, images, calques et liens SVG sont toujours présents.

En revanche, les informations créées dans l’éditeur Sozi ne sont plus disponibles :

• l’ordre des vues ;
• leurs identifiants ;
• les états successifs des calques ;
• les niveaux d’opacité ;
• les durées et les fonctions de transition ;
• les réglages de rognage ;
• les notes du présentateur.

À l’ouverture du SVG, Sozi crée alors un nouveau fichier JSON et propose une présentation vierge. Le document graphique est sauvé, mais le parcours doit être reconstruit.

Les très anciennes présentations constituent un cas particulier. Dans les versions historiques de Sozi, les informations de présentation pouvaient être directement enregistrées dans le SVG. L’éditeur actuel tente encore de reconnaître et d’importer ce format ancien. Pour un document récent, il ne faut toutefois pas compter sur cette possibilité.

Conserver seulement le SVG revient à conserver le décor après avoir perdu le découpage, les mouvements de caméra et le scénario.

Utiliser le HTML comme modèle pour reconstruire les vues

Si le fichier JSON est perdu, mais que la présentation HTML fonctionne encore, la reconstruction devient déjà plus facile. On peut ouvrir simultanément :

• le HTML dans un navigateur pour observer la présentation originale ;
• le SVG dans Sozi pour recréer les vues.

Le HTML permet alors de retrouver visuellement :

• l’ordre général du parcours ;
• les différentes zones cadrées ;
• les éléments qui apparaissent ou disparaissent ;
• les mouvements entre les vues ;
• les boutons et les bifurcations ;
• la durée approximative des transitions.

Cette méthode reste manuelle, mais elle évite de travailler uniquement de mémoire. Pour une présentation courte, elle est souvent plus rapide qu’une tentative de récupération technique complexe.

Avec seulement le HTML : le fichier final contient encore beaucoup d’informations

Le fichier .sozi.html est autonome. Pour pouvoir fonctionner sans le SVG et le JSON placés à ses côtés, il contient notamment :

• une copie du document SVG ;
• les données nécessaires à la lecture des vues ;
• le programme JavaScript du lecteur Sozi ;
• les éventuels styles ou scripts personnalisés intégrés à l’export.

Le HTML final peut donc parfois servir de fichier de sauvetage. Il est possible d’en extraire le bloc SVG pour recréer un document graphique modifiable.

Dans un éditeur de texte, on recherche la balise d’ouverture :

<svg

puis sa balise de fermeture :

</svg>

L’ensemble du bloc peut être copié dans un nouveau fichier nommé, par exemple :

presentation-recuperee.svg

Après vérification dans Inkscape, on retrouve généralement l’essentiel du contenu graphique, y compris les groupes, les calques et de nombreux identifiants.

Le HTML ne contient pas nécessairement le JSON complet de l’éditeur

Le fichier HTML embarque les données dont le lecteur a besoin pour jouer la présentation. Ces données comprennent notamment les vues, les états des caméras, les propriétés nécessaires aux transitions et la liste des éléments à masquer.

Elles ne correspondent cependant pas forcément, octet pour octet, au fichier .sozi.json original. Le JSON source contient aussi des informations utiles à l’éditeur : sélections, références aux éléments SVG, états de travail et autres paramètres qui ne sont pas tous nécessaires lors de la simple lecture.

Une extraction depuis le HTML permet donc souvent de récupérer une grande partie de la mise en scène, mais elle ne garantit pas une restauration parfaite du fichier source.

Une extraction experte à automatiser avec prudence

Lorsque seule la présentation HTML subsiste, un script peut automatiser une partie du sauvetage :

1. lire le fichier HTML ;
2. extraire le bloc <svg>...</svg> ;
3. repérer les données de présentation intégrées au JavaScript ;
4. les convertir en une base de fichier .sozi.json ;
5. placer le SVG et le JSON reconstitués sous le même nom ;
6. tester le résultat dans Sozi ;
7. corriger manuellement les éléments qui n’ont pas pu être restaurés.

Cette démarche ne doit pas être présentée comme une fonction officielle d’importation d’un HTML dans Sozi. C’est une opération de récupération qui dépend de la version ayant généré le fichier et de la structure exacte de son code.

Avant toute intervention, il faut donc conserver une copie intacte du HTML original. Le fichier fonctionnel constitue la dernière sauvegarde de la présentation : une modification directe et malheureuse pourrait rendre sa lecture impossible.

Ne pas confondre le fichier de diffusion et les fichiers de travail

Le fichier HTML est particulièrement pratique pour la classe. Il est autonome, s’ouvre dans un navigateur et peut être placé sur un espace partagé ou intégré dans une page WordPress. Mais cette facilité peut donner l’impression qu’il suffit de conserver ce seul fichier.

Pour assurer la maintenance de la présentation, il faut au contraire archiver au minimum :

ma-seance.svg
ma-seance.sozi.json
ma-seance.sozi.html

On peut aussi conserver la console du présentateur :

ma-seance-presenter.sozi.html

Le plus sûr est de ranger tous ces éléments dans le même dossier, avec les éventuels médias et fichiers personnalisés, puis d’archiver l’ensemble.

ma-seance/
├── ma-seance.svg
├── ma-seance.sozi.json
├── ma-seance.sozi.html
├── ma-seance-presenter.sozi.html
├── medias/
└── sources/

Le HTML est le fichier que l’on montre ; le SVG et le JSON sont les fichiers qui permettent de continuer à travailler.

Cette organisation devient d’autant plus importante lorsque les présentations sont partagées entre collègues. Transmettre uniquement le HTML permet de projeter le document, mais pas de l’adapter facilement. Transmettre le dossier complet transforme au contraire la présentation en ressource réellement réutilisable.

Une fois cette logique de sauvegarde comprise, on peut aller plus loin : intégrer du son ou de la vidéo, automatiser certaines transitions et exploiter la console du présentateur sans fragiliser les fichiers sources.

Faire des calques le véritable moteur de la présentation

Dans Inkscape, les calques servent d’abord à organiser le document. Dans Sozi, ils acquièrent une fonction supplémentaire : chaque calque peut évoluer indépendamment des autres au fil des vues. Le fond peut rester immobile pendant qu’une figure se déplace ; une légende peut apparaître progressivement ; une correction peut venir se superposer à l’énoncé sans modifier le cadrage général.

Cette indépendance constitue l’une des différences essentielles entre une présentation Sozi élémentaire et un document réellement construit. Au lieu de déplacer toute la caméra sur une grande surface unique, on peut décider, pour chaque vue, de la position, de l’échelle, de l’orientation et de l’opacité de chacun des calques.

Une vue Sozi ne décrit pas seulement l’endroit que regarde la caméra. Elle décrit aussi l’état de chacun des calques à cet instant de la présentation.

Un calque par fonction pédagogique

Il est tentant de multiplier les calques selon la nature technique des objets : un calque pour les textes, un autre pour les images, un autre pour les formes. Pour construire une séance, une organisation par fonction pédagogique est souvent plus efficace.

00_fond
10_navigation
20_enonce
30_figure
40_indice
50_annotations
60_correction
70_synthese
90_decorations

Cette structure permet de comprendre immédiatement ce qui doit rester visible, ce qui doit apparaître plus tard et ce qui pourra se déplacer indépendamment. Elle facilite également la reprise du document plusieurs mois après sa création.

Dans mon propre flux de travail, le script sozi_conforme.sh crée automatiquement un calque Inkscape pour chaque image ou fichier SVG placé dans le dossier de la séance. Les ressources du sous-dossier deco/ sont ajoutées au-dessus des autres. Le document obtenu constitue une base organisée, que l’on peut ensuite réarranger dans Inkscape avant de définir les vues dans Sozi.

Conserver un repère fixe pendant que le contenu évolue

Un premier usage consiste à maintenir certains éléments au même endroit dans toutes les vues. Un bandeau de navigation, le titre de la séance, une consigne courte ou un bouton de retour peuvent rester fixes pendant que le contenu principal se déplace ou change d’échelle.

Sur un TBI, cette stabilité est particulièrement précieuse. Les élèves conservent des repères visuels pendant que l’attention se porte successivement sur plusieurs zones du document. La présentation donne alors moins l’impression de voyager sans cesse dans une immense affiche.

On peut, par exemple, utiliser :

• un calque de fond conservant le même cadrage dans toutes les vues ;
• un calque de navigation contenant des boutons permanents ;
• un calque principal qui se déplace entre plusieurs activités ;
• un calque d’annotations dont le contenu varie selon les étapes.

Pour maintenir un calque fixe, il suffit de lui conserver le même état d’une vue à l’autre, tandis que les autres calques adoptent leurs propres positions. La caméra apparente peut ainsi se déplacer sur le contenu sans entraîner tous les éléments avec elle.

Faire apparaître une information grâce à l’opacité

L’opacité permet de révéler progressivement un calque sans quitter la zone actuellement affichée. Une première vue peut montrer uniquement l’énoncé et la figure. La vue suivante conserve exactement le même cadrage, mais fait apparaître un indice, un codage ou une première étape de correction.

Cette méthode est souvent plus lisible qu’un déplacement de caméra. Lorsque deux vues partagent le même cadrage et que seule l’opacité d’un calque change, l’élève comprend immédiatement qu’une information vient s’ajouter à la situation précédente.

Un enchaînement peut prendre cette forme :

Vue 1 : énoncé + figure
Vue 2 : énoncé + figure + codages
Vue 3 : énoncé + figure + construction auxiliaire
Vue 4 : énoncé + figure + correction
Vue 5 : synthèse seule

Il faut ici distinguer deux réglages qui peuvent sembler proches. L’icône en forme d’œil masque temporairement un calque dans l’éditeur Sozi afin de faciliter le travail sur les autres. Elle ne signifie pas que ce calque sera caché pendant la projection. Pour le rendre réellement invisible dans une vue, il faut régler son opacité à zéro.

Superposer plusieurs états d’un même document

Les calques permettent aussi de préparer plusieurs versions d’un même support sans dupliquer tout le document. Une figure initiale peut rester dans un premier calque, ses codages dans un deuxième, la construction auxiliaire dans un troisième et la solution complète dans un quatrième.

• En Mathématiques, cette organisation permet de conserver rigoureusement la même figure tout au long du raisonnement.
• En Sciences, on peut superposer les différentes parties d’un mécanisme.
• En Géographie, plusieurs informations peuvent être ajoutées progressivement sur un même fond de carte.
• En langues, un texte peut recevoir successivement des repérages, une traduction partielle puis des commentaires.

La superposition peut également servir à comparer deux démarches. Deux productions d’élèves sont placées sur des calques différents, mais dans la même zone. On affiche d’abord la première, puis la seconde, avant de les rendre visibles simultanément pour mettre en évidence leurs points communs et leurs différences.

Déplacer séparément le fond, le contenu et les annotations

Lorsque plusieurs calques possèdent des mouvements différents, Sozi peut produire un effet de profondeur. Un arrière-plan se déplace légèrement, le contenu principal davantage, tandis qu’une légende reste fixe. Cet effet de parallaxe peut rendre la structure spatiale plus perceptible.

Son intérêt pédagogique reste cependant limité s’il ne sert qu’à impressionner. Les déplacements indépendants deviennent réellement utiles lorsqu’ils traduisent une relation :

• un détail est extrait d’un schéma global ;
• une légende vient se placer à proximité de l’objet expliqué ;
• deux éléments éloignés sont rapprochés pour être comparés ;
• une construction se développe autour d’une figure fixe ;
• une correction glisse devant un énoncé qui demeure visible en arrière-plan.

Le mouvement doit permettre de suivre une idée, et non obliger les élèves à suivre une démonstration graphique.

Réutiliser le même cadrage avec plusieurs combinaisons de calques

L’un des usages les plus efficaces consiste à créer plusieurs vues partageant le même cadrage, mais présentant des états différents des calques. Cette méthode est particulièrement adaptée à la correction progressive.

Imaginons une activité composée des calques suivants :

calque_enonce
calque_figure
calque_indice
calque_erreur_frequente
calque_correction
calque_synthese

La première vue montre l’énoncé et la figure. Si la classe bloque, une vue fait apparaître le calque d’indice. Si une erreur intéressante est proposée, le professeur peut afficher le calque correspondant. La correction complète ne sera ouverte qu’au moment choisi.

Le document n’impose donc plus une progression unique. Les calques fournissent les différentes ressources ; les boutons et les identifiants de vues permettront ensuite de choisir le chemin réellement suivi.

Ne pas confondre richesse et accumulation

La possibilité de déplacer et de faire apparaître chaque calque peut rapidement conduire à une présentation surchargée. Or le TBI amplifie tous les mouvements : un déplacement élégant sur l’écran de préparation peut devenir fatigant lorsqu’il est projeté sur une grande surface.

Quelques principes permettent de conserver une présentation lisible :

• limiter les calques réellement animés dans une même transition ;
• maintenir au moins un repère stable à l’écran ;
• préférer une apparition simple à un long déplacement lorsque l’espace n’apporte aucune information ;
• éviter les rotations qui ne correspondent pas à un changement réel de point de vue ;
• tester la présentation à la taille du TBI, et non uniquement sur l’écran de l’ordinateur ;
• prévoir des cadrages adaptés au rapport 16/10 du matériel utilisé.

Le bon usage des calques ne consiste pas à tout animer séparément, mais à décider ce qui doit rester stable, ce qui doit évoluer et ce qui ne doit apparaître qu’au moment utile.

À ce stade, la présentation peut déjà s’adapter au déroulement d’une séance. Pour sortir complètement du parcours linéaire, il reste toutefois à transformer certains objets du SVG en véritables boutons : retour à la carte générale, ouverture d’un indice, accès direct à une correction ou choix entre plusieurs prolongements.

Maîtriser le temps, les médias et la console du présentateur

Les déplacements entre les vues ne constituent qu’une partie de la mise en scène. Sozi permet également de régler leur durée, leur rythme, le délai passé sur chaque étape et, dans certains cas, le déclenchement automatique d’un contenu sonore ou vidéo.

Ces réglages ne doivent pas servir à transformer la séance en spectacle. Ils permettent surtout de distinguer clairement plusieurs situations : un déplacement qui montre une relation spatiale, une apparition presque instantanée, un temps d’observation laissé aux élèves ou un support destiné à fonctionner sans intervention humaine.

Le temps d’une transition fait partie du sens de la présentation : il indique si l’on change de sujet, si l’on ajoute une information ou si l’on observe le déplacement d’un même objet.

Choisir la durée en fonction de ce que le mouvement doit montrer

Dans Sozi, la durée d’une transition est associée à la vue d’arrivée. Elle détermine le temps nécessaire pour passer de la vue précédente à cette nouvelle situation.

Une transition très courte convient lorsque les deux vues présentent presque le même cadrage. Elle peut simplement faire apparaître un calque, un codage ou une ligne de correction. À l’inverse, un déplacement entre deux zones éloignées du canevas doit être suffisamment progressif pour que les élèves comprennent où leur regard est conduit.

On peut retenir quelques ordres de grandeur, à adapter au contenu et au matériel :

Il ne s’agit pas de valeurs obligatoires. Le véritable test consiste à projeter la présentation dans les conditions de la classe. Un mouvement qui paraît rapide sur l’écran de préparation peut sembler beaucoup plus ample sur un TBI.

Choisir une fonction de progression

La durée ne suffit pas à décrire un mouvement. Sozi permet également de sélectionner une fonction de progression, qui détermine la manière dont la caméra accélère ou ralentit pendant la transition.

Une progression linéaire conserve une vitesse régulière. Une progression de type ease ou ease-in-out produit un départ et une arrivée plus souples. Une transition instantanée permet de passer directement d’un état à l’autre.

Dans un usage pédagogique, quelques choix simples suffisent généralement :

• une transition instantanée pour révéler une correction sans déplacer le regard ;
• une transition linéaire pour suivre un déplacement régulier ;
• une transition avec accélération puis ralentissement pour rejoindre une nouvelle zone sans arrêt brutal ;
• une durée nulle lorsque deux vues ne diffèrent que par l’opacité d’un calque.

Multiplier les fonctions de progression n’apporte pas nécessairement davantage de sens. Une présentation gagne souvent en cohérence lorsque les mêmes types de mouvements utilisent les mêmes réglages.

Faire apparaître une information sans déplacer la caméra

La transition la plus efficace est parfois celle que l’on ne remarque presque pas. Lorsque plusieurs vues utilisent le même cadrage, il est possible de ne modifier que l’opacité d’un calque.

Vue 1 : figure
Vue 2 : figure + codages
Vue 3 : figure + construction auxiliaire
Vue 4 : figure + première étape de correction
Vue 5 : figure + correction complète

La position du calque principal est copiée ou liée entre les différentes vues. Les calques supplémentaires passent progressivement d’une opacité nulle à une opacité complète.

Cette méthode évite les zooms inutiles et maintient l’attention sur le contenu qui vient d’apparaître. Elle est particulièrement adaptée aux démonstrations, aux cartes annotées, aux schémas scientifiques et aux corrections progressives.

Déclencher automatiquement la vue suivante

Une vue Sozi peut être configurée pour avancer automatiquement après un délai déterminé. La présentation reste consultable manuellement, mais le passage à la vue suivante se produit si aucune action n’est effectuée avant la fin du temps prévu.

Ce fonctionnement est intéressant pour :

• un écran d’accueil lors d’une réunion ou d’une journée portes ouvertes ;
• une présentation installée dans une exposition ;
• une consigne autonome projetée au début d’une activité ;
• une succession de questions chronométrées ;
• une courte démonstration destinée à tourner en boucle.

Lorsque la dernière vue possède elle aussi un passage automatique, la présentation peut recommencer depuis le début. Cette boucle est pratique pour un affichage autonome, mais rarement adaptée à une séance ordinaire : elle risque de faire disparaître une information avant que la classe ait terminé de l’exploiter.

L’automatisation convient bien à un affichage ; l’interaction reste généralement préférable pour conduire une séance.

Utiliser le délai comme un temps pédagogique

Le délai automatique ne doit pas nécessairement correspondre à un simple temps d’attente. Il peut matérialiser une courte phase de réflexion.

Une vue peut, par exemple, afficher une question pendant quelques secondes avant de faire apparaître un indice. Une autre peut laisser le temps d’observer un graphique avant d’en révéler l’interprétation.

Cette pratique exige néanmoins de la prudence. Les élèves ne travaillent pas tous au même rythme, et un délai fixé lors de la préparation peut se révéler trop court ou trop long devant la classe. Il faut donc conserver la possibilité d’avancer manuellement et réserver les enchaînements strictement chronométrés aux situations qui le justifient réellement.

Ajouter un extrait audio ou une vidéo

Sozi peut exploiter des éléments audio et vidéo intégrés au document SVG. Une extension complémentaire pour Inkscape, appelée Add video or audio, permet de créer ces éléments et de définir les vues dans lesquelles leur lecture doit commencer ou s’arrêter.

Lors de l’insertion, plusieurs paramètres peuvent être renseignés :

• le type de média, audio ou vidéo ;
• ses dimensions ;
• son format MIME, par exemple video/mp4 ou audio/ogg ;
• l’adresse ou le chemin du fichier ;
• l’identifiant de la vue qui déclenche la lecture ;
• l’identifiant de la vue qui l’interrompt.

On peut ainsi préparer un fichier sonore qui commence lorsque la présentation atteint la vue ecoute et s’arrête lors de l’arrivée dans la vue questions.

Vue de démarrage : ecoute
Vue d’arrêt : questions

Les usages pédagogiques possibles sont nombreux :

• faire entendre une prononciation ou un dialogue en langues ;
• associer une archive sonore à un document historique ;
• intégrer une consigne orale à un travail autonome ;
• faire écouter une lecture expressive ;
• illustrer un phénomène scientifique par une courte vidéo ;
• commenter un schéma ou une construction animée.

La documentation consacrée à l’intégration des médias est utile pour comprendre le mécanisme, mais certains de ses avertissements sur les navigateurs datent de versions anciennes. Il faut donc vérifier le résultat avec le navigateur réellement utilisé dans l’établissement.

Choisir entre fichier local et ressource distante

Un média peut être chargé depuis un fichier local ou depuis une adresse en ligne. La seconde solution allège éventuellement le dossier, mais elle rend la présentation dépendante de la connexion internet et de la disponibilité du serveur extérieur.

Pour un usage en classe, un fichier conservé avec la présentation est souvent plus fiable :

ma-seance/
├── ma-seance.svg
├── ma-seance.sozi.json
├── ma-seance.sozi.html
├── extrait-audio.ogg
└── video-explication.mp4

Il faut ensuite vérifier que le chemin enregistré dans le SVG reste valable lorsque le dossier est déplacé sur un autre ordinateur. L’utilisation de chemins relatifs et le transport du dossier complet limitent les risques de média introuvable.

Le fichier HTML Sozi est autonome pour le SVG et les données de présentation, mais il ne faut pas supposer que tous les médias externes seront systématiquement incorporés à l’intérieur. Un test hors connexion constitue donc une précaution indispensable.

Prévoir un plan de secours pour les médias

L’audio et la vidéo ajoutent plusieurs sources de fragilité : format non reconnu, chemin incorrect, lecture automatique bloquée, absence de son sur le poste ou comportement différent selon le navigateur.

Avant la séance, il est prudent de :

• tester le fichier sur l’ordinateur réellement relié au TBI ;
• vérifier le son et le plein écran ;
• ouvrir la présentation dans le navigateur prévu ;
• tester la présentation sans connexion internet ;
• conserver le média original séparément ;
• prévoir un lien ou un lecteur de secours.

Une courte vidéo qui ne démarre pas ne doit pas bloquer toute la séance. Le bouton qui ouvre le média peut donc être accompagné d’un lien classique permettant de lancer directement le fichier.

Exploiter la console du présentateur

Lorsqu’une présentation est enregistrée, Sozi peut produire, en plus du fichier principal, un second fichier destiné au présentateur :

ma-seance-presenter.sozi.html

Cette console affiche notamment les vues précédente, actuelle et suivante. Elle permet également de consulter les notes associées aux vues et de piloter la présentation ouverte dans une autre fenêtre.

Elle devient particulièrement utile lorsque le document contient :

• de nombreuses bifurcations ;
• des médias à déclencher ;
• des transitions automatiques ;
• des remarques réservées au professeur ;
• des questions à poser avant l’affichage de la suite ;
• des variantes selon les réactions de la classe.

Les notes peuvent rappeler une consigne, une relance ou une erreur à surveiller :

Ne pas afficher immédiatement l’indice.
Demander d’abord aux élèves de comparer les deux procédures.
Revenir à la vue « problème » avant la synthèse.

Le fichier de la console ouvre généralement la présentation dans une fenêtre séparée. Le navigateur peut demander l’autorisation d’ouvrir cette nouvelle fenêtre ; il est donc préférable de tester le dispositif avant le début du cours. La présentation d’introduction du guide Sozi décrit les fichiers produits et les principaux réglages de transition.

Ne pas automatiser ce qui doit rester une décision pédagogique

Sozi permet de préparer précisément la durée des mouvements, le moment d’apparition des calques et le déclenchement de certains médias. Mais une séance ne se déroule jamais exactement comme prévu.

Un échange intéressant peut nécessiter de rester plus longtemps sur une vue. Une difficulté imprévue peut conduire à ouvrir un indice. Une vidéo prévue peut finalement ne pas être utile. Une classe peut avoir besoin de revenir à une étape précédente.

Le réglage expert du temps ne consiste pas à tout programmer : il consiste à préparer plusieurs rythmes possibles tout en conservant la maîtrise du déroulement.

Le fichier Sozi peut maintenant être projeté, piloté et enrichi. Il peut également être intégré dans une page web ou dans un article WordPress, avec ses boutons, ses fragments d’adresse et, si nécessaire, une interface de navigation construite autour de lui.

Conclusion : utiliser Sozi en expert, ce n’est pas multiplier les effets

À première vue, Sozi peut sembler être un outil de présentation fondé sur le zoom et les déplacements de caméra. Ce serait pourtant passer à côté de ce qui fait sa véritable richesse. Une présentation avancée repose moins sur la virtuosité des transitions que sur la manière dont le document a été pensé, structuré et préparé.

Les calques permettent d’organiser les ressources et de faire évoluer séparément le fond, les figures, les annotations ou la correction. Les identifiants SVG assurent des cadrages fiables et facilitent les modifications ultérieures. Les boutons transforment une succession imposée de vues en un parcours capable de s’adapter aux réponses des élèves. Le couple formé par le SVG et le fichier JSON permet enfin de conserver un document réellement modifiable, bien au-delà du seul fichier HTML projeté en classe.

Utiliser Sozi en mode expert, ce n’est pas connaître tous ses effets : c’est savoir ce qui doit rester stable, ce qui doit apparaître, ce qui peut être choisi et ce qui doit rester modifiable.

Cette approche demande davantage de préparation qu’un diaporama rapidement assemblé. Elle offre en contrepartie un support durable, ouvert et réutilisable. Une même architecture peut être adaptée à plusieurs classes, enrichie au fil des années ou transmise à un collègue, à condition de partager les fichiers sources et de conserver des identifiants cohérents.

Sozi ne remplacera pas tous les outils de présentation, et il ne doit pas chercher à le faire. Il devient particulièrement intéressant lorsque l’organisation spatiale porte du sens : explorer une carte, dévoiler progressivement une figure, comparer plusieurs démarches, revenir à une vue générale ou choisir un parcours en fonction de la situation rencontrée en classe.

Le mode expert commence donc peut-être par une forme de sobriété : une transition seulement lorsqu’elle aide à comprendre, un calque seulement lorsqu’il possède une fonction identifiable et un bouton seulement lorsqu’il correspond à une véritable décision pédagogique.

Pour aller plus loin avec Sozi

Les ressources suivantes permettent de reprendre les bases, puis d’approfondir les différents mécanismes abordés dans cet article.

Installer Sozi et comprendre son fonctionnement

• Le guide de Sozi en français
  Le point d’entrée le plus clair pour comprendre la philosophie du logiciel et suivre les nouveaux chapitres de sa documentation.
• Installer Sozi sous Windows, macOS ou GNU/Linux
  La procédure officielle d’installation, avec un lien vers la version la plus récente du logiciel.
• Télécharger la dernière version officielle de Sozi
  La page GitHub regroupant les fichiers d’installation pour les différents systèmes.
• Créer une première présentation
  Un parcours guidé pour découvrir les vues, la chronologie, les transitions et les fichiers générés par Sozi.

Approfondir les fonctions avancées

• Utiliser les calques indépendants
  Le tutoriel officiel consacré au déplacement séparé des calques, à leur opacité et aux éléments de contour.
• Créer des boutons et des liens vers les vues
  Une présentation détaillée des identifiants de vues, des fragments d’adresse et des liens SVG.
• Intégrer une présentation Sozi dans une page HTML
  La méthode officielle utilisant une iframe, ainsi que des exemples permettant de piloter le lecteur depuis la page qui l’héberge.
• Ajouter de l’audio ou de la vidéo
  Le tutoriel sur l’extension Inkscape prévue pour intégrer des médias et déclencher leur lecture à partir des identifiants de vues.
• Exporter une présentation en PDF ou en vidéo
  Les possibilités de conversion intégrées à Sozi, utiles notamment pour préparer une version de secours.
• Améliorer les performances d’une présentation complexe
  Des pistes pour limiter les animations saccadées lorsque le SVG devient particulièrement chargé.

Une partie de la documentation avancée appartient à l’ancien site officiel de Sozi. Elle reste accessible et utile, mais certaines remarques concernant les navigateurs ou les formats multimédias peuvent dater : un test sur le poste réellement utilisé en classe reste indispensable.

Les ressources proposées sur site2wouf.fr

• Quel est le meilleur format de documents pour un TBI ou un VPI ?
  Une réflexion sur le choix du SVG et du HTML pour construire des supports ouverts et durables.
• Sozi et TBI : un script Bash pour créer vos visuels SVG en un clin d’œil
  Une méthode permettant de regrouper automatiquement les images et les figures d’une séance dans des calques Inkscape.
• Le dépôt GitHub de sozi_conforme.sh
  Le script, ses instructions d’installation, ses options et son code source librement consultable.

Conseil de sauvegarde

Pour chaque présentation destinée à être conservée ou partagée, archivez ensemble le SVG, le fichier .sozi.json, le HTML final, la console du présentateur et les éventuels médias. Le HTML suffit pour projeter ; le dossier complet permet de continuer à travailler.

Et vous, utilisez-vous Sozi comme un simple support de projection ou avez-vous développé vos propres calques, boutons, modèles et outils d’automatisation ? Vos méthodes et vos exemples pourront utilement enrichir cette exploration.