Taodyne a délibérément choisi de ne pas utiliser de langage à balise (markup) pour son logiciel de présentation en 3D, Tao Presentations. En cela, ce logiciel se distingue des systèmes basés sur HTML5. À l'inverse, notre approche est de créer un langage de description de document spécialement adapté aux besoins de présentations 3D.

Il y a de bonnes raisons pour ce choix. Une discussion récente sur Hacker News m'amène à exposer ces raisons.

Outils de présentation basés sur HTML5

Il y a plusieurs outils de présentation basés sur HTML5, un langage à balises. Grâce à ces outils, on peut créer des présentations pour le web, qui s'affichent dans un navigateur Internet.

Les plus avancés, comme reveal.js ou impress.js, utilisent Javascript et CSS3D pour créer des effets 3D intéressants dans le navigateur. A première vue, cela peut sembler très similaire à Tao Presentations: un outil permettant de définir des présentations 3D sous forme de texte. Mais il y a des différences importantes.

Avantage des outils basés sur HTML5

Le principal avantage d'un outil de présentation utilisant des technologies web est que... vous pouvez montrer les présentations sur le web. Eh. De plus, ces outils utilisent la bonne vieille syntaxe à balises que nous avons fini par "apprécier".

À l'inverse, les présentations réalisées avec Tao et les liens tao:// tels que tao://www.taodyne.com/examples/TEDx, exigent l'installation d'un logiciel spécifique (même s'il est disponible en téléchargement gratuit). Cela dit, un logiciel dédié offre aussi de nombreux avantages en terme de performance ou de fonctionnalité.

Exemples de codes à balises

A quoi ressemble une présentation réalisée avec Impress.js ou Reveal.js? Commençons par Impress.js:

<div class="step slide" data-x="0" data-y="-1500">
    <q>Don't you think that presentations given <strong>in modern browsers</strong> 
    shouldn't <strong>copy the limits</strong> of 'classic'
    slide decks?</q> 
</div>

<div class="step slide" data-x="1000" data-y="-1500">
    <q>Would you like to <strong>impress your audience</strong>
    with <strong>stunning visualization</strong> of your talk?</q>
</div>

Voici un exemple similaire pour Reveal.js:

<section>
        <h2>Heads Up</h2>
        <p>
                reveal.js is an easy to use, HTML based, presentation tool.
                You'll need a modern browser with support for CSS 3D transforms
                to see it in its full glory.
        </p>
</section>

Balises standard, mais quand même un nouveau langage

À première vue, la structure de ces documents est bien connue, ce qui vous permet de tirer parti de ce que vous savez déjà sur HTML.

Mais vous remarquerez que les deux exemples ci-dessus n'utilisent pas vraiment la même syntaxe. Il y a une raison pour ces différences : dans les deux cas, la puissance du code se trouve en réalité dans des définitions supplémentaires qui utilisent Javascript et CSS 3D. Donc en réalité, nous n'utilisons plus vraiment un langage standard, mais un dialecte. Il faut quand même apprendre ce dialecte avant de pouvoir créer des présentations.

Ce n'est pas que le code soit vraiment gros. Pour Impress.js, il faut compter 700 lignes de CSS et 800 lignes de Javascript. Reveal.js est un peu plus imposant, avec 1238 lignes de CSS et 1039 lines de Javascript, sans compter quelques librairies.

Cependant, même si le code n'est pas très complexe, cela veut quand même dire qu'il faut en apprendre la sémantique ou comment construire des animations, ce qui réduit beaucoup l'avantage d'utiliser un langage "standard". Mais surtout, cela veut dire que ce qui rend ce type de présentations vraiment intéressantes, à savoir les transitions et animations 3D, ne se trouve pas dans le document lui même.

La Description de Documents Dynamiques dans Tao Presentations

Dans Tao Presentations, nous avons décidé d'utiliser un langage de programmation appelé XL, qui n'est pas un langage à balises. Décrire un document à l'aide d'un langage de programmation n'est pas un cas complètement isolé.

Un langage conçu pour les présentations

La vraie difficulté est de définir un langage spécifiquement adapté pour décrire des présentations. Voici par exemple le code utilisé pour créer une présentation simple:

// Main title slide
main_title_slide "Automatic formatting saves time"

// A simple text slide
slide "Describe slides as simple text",
    * "Automatic slide layout "
    - "Focus on the story, not the appearance"
    - "Changing the theme globally is easy"

Ce type de syntaxe suit le principe de la Programmation par concepts, à savoir que le code source et le problème original doivent se ressembler. Si vous pensez à une slide, alors la structure d'une slide doit se retrouver dans votre code source.

Avantages d'un vrai langage de programmation

Utiliser un vrai langage de programmation offre un certain nombre d'avantages. Un d'entre eux est la possibilité de créer des définitions réutilisables. Voici par exemple la façon dont slide est défini dans le theme.xl de la présentation:

slide Title:text, Body ->
// ------------------------------------------------------------
//   Draw a default story slide
// ------------------------------------------------------------
    base_slide Title,
        slide_default_title
        story Body

Utiliser un vrai langage de programmation offre un certain nombre d'avantages. Un d'entre eux est la possibilité de créer des définitions réutilisables. Voici par exemple la façon dont slide est défini dans le theme.xl de la présentation:

slide Title:text, Body ->
// ------------------------------------------------------------
//   Draw a default story slide
// ------------------------------------------------------------
    base_slide Title,
        slide_default_title
        story Body

Cette définition prend un paramètre appelé Body, ce qui fait qu'il est très facile de spécifier le contenu de la diapositive. À la différence des langages à balise, le même langage est utilisé d'un bout à l'autre, et il est possible d'ajouter vos propres définitions dans un document.

Garder le langage simple et dense

Les définitions ne sont pas nécessairement des fonctions ou des procédures. Par exemple, le même fichier theme.xl définit aussi la forme que nous utilisons pour les "bullet points", les points:

* T:text ->
// ------------------------------------------------------------
//   Draw a bullet point with a given text
// ------------------------------------------------------------
    margins 100, 0
    paragraph_space 30, 30
    paragraph_break 
    anchor
        light 0
        light_position 100, 100, 100
        translate -30, 20, 5
        color theme_color "red"
        sphere 0, 0, 0, 25, 25, 10, 10, 10
    text T

Cette définition nous permet ensuite d'écrire nos points de la façon suivante :

    * "Automatic slide layout"
    * "Some other bullet point here"
    * "Third bullet point"

Boucles et répétitions

Avoir à disposition un véritable langage de programmation permet aussi d'effectuer des calculs relativement sophistiqués directement dans le document:

Cette présentation montre comment montrer facilement une courbe paramétrique animée, d'une façon plus simple et directe que ce qu'il faudrait faire en utilisant Javascript et HTML5. 

slide "Drawing in a document",
    * "We can draw something directly:"
    line_break
    align 0.5
    anchor
        A -> 1 + seconds / 5
        B -> 1 + seconds / 6
        C -> 1 + seconds / 7
        translate 0, -230, 200
        rotatey 20 * time
        scale 200, 200, 200
        line_color "green"
        color "transparent"
        path
            curve with 0..200
            curve N:integer ->
                line_to cos(A*N*pi/100 + page_time), sin(B*N*pi/100 + 2 * page_time), sin(C*N*pi/100)

Dans ce code, anchor indique que nous ancrons un élément graphique à la position actuelle du texte. Dans ce cas, la position du texte est au centre du bloc de texte parce que nous avons utilisé align 0.5.

Suivre le bon chemin

Quand Taodyne a créé Tao Presentations, nous avons décidé de prendre un chemin loin de la grand route des XML, HTML et navigateurs web. C'était une décision difficile. Mais elle apporte un bon nombre d'avantages, en particulier la possibilité de créer des présentations très avancées en assez peu de temps.

Nous vous invitons à vous joindre à nous. Dites nous quels sujets vous souhaiteriez voir traités sur ce blog!