Le futur de HTML en vidéo...

Deeder — Sun, 16 Mar 2008 14:58:00 +0100

De temps en temps sur ce blog, il arrive que le sujet à l'ordre du jour soit le HTML5, la relève d'un langage (si l'on peut l'appeler ainsi) qui, bien qu'il soit très utilisé, n'a pas été remis à jour depuis près de 10 ans. Il y a un an que le W3C a créé un nouveau groupe de travail pour s'occuper de la rédaction de la recommandation de cette nouvelle mouture. Qu'en est-il ? Que sommes nous en droit d'attendre de cette nouvelle version de HTML5 ? Voici la vidéo de l'intervention de Daniel Glazman à Paris Web 2007, il y a quelques mois de cela, pendant laquelle ce dernier a fait le point sur le futur du HTML.

Pour info, toutes les vidéos de la conférence ont été mises en ligne cette semaine. Vous pouvez ainsi les visionner sur Dailymotion ou les télécharger sans plus attendre. Je n'ai malheureusement pas eu le temps de toutes les regarder, mais le peu que j'ai pu en voir m'a fait regretter de ne pas avoir pu me rendre à cette conférence. Bon visionnage.

Fuller Screen : vos diaporamas en HTML et plein écran complet...

Deeder — Sun, 24 Jun 2007 19:27:00 +0200

On commence les présentations des projets XUL présentés au Mozilla Developer Day de Paris par Fuller Screen, une extension Firefox développée par le fameux Daniel Glazman. Cette extension a été développée pour fournir à Firefox un mode plein écran digne de ce nom, sans aucune barre d'outils, barre d'état ou quoi que ce soit. L'absence de cette fonctionnalité non disponible par défaut dans ce navigateur peut effectivement être handicapant dans certains cas.

En plus d'offrir un véritable mode plein écran à votre panda roux, Fuller Screen peut vous servir de gestionnaire de diaporamas (slideshow en anglais) conçus très simplement en HTML. Comment ça marche ? Il s'agit tout juste de définir des sélecteurs grâce à la balise meta, permettant ainsi de définir les éléments tels que les slides, leur titre, les étapes de visualisation, etc. Voici un exemple de code^[1] donnant naissance à un slide avec ses balises meta associées :

<html>
  <head>
    <meta name="slideselector" content=".slide" />
    <meta name="titleselector" content="h4" />
    <meta name="stepselector" content=".step" />
  </head>
  <body>
    <div class="slide"><h4>Slides</h4>
      <div class="slidecontent">
        <p>Une liste d'items</p>
        <ul>
          <li>Premier item</li>
          <li>Second item</li>
          <li>Et troisième item</li>
        </ul>
      </div>
    </div>
  </body>
</html>

Difficile de faire plus explicite n'est-ce pas ? Il ne reste plus ensuite qu'à styler le tout, grâce notamment à CSS en introduisant dans la feuille de style le sélecteur @media projection {} contenant les propriétés CSS désirées. Pour activer et désactiver le mode plein écran, usez et abusez de la touche f11 jusqu'à en faire disparaître les inscriptions et émerveillez vous du résultat, avec au passage un petit tour du côté du selecteur de diapositive grâce à la combinaison shift+f11. Cette fonctionnalité est vantée par son concepteur comme étant ultra rapide voire instantanée, même avec des présentations constituées de plus de 100 diapositives.

Vous allez me demander les avantages d'une telle solution lorsque l'on peut trouver sur le marché des logiciels comme Powerpoint et consorts. Et bien, inutile de chercher bien loin :

Le fichier présenté sans le mode plein écran est tout de même accessible à la lecture;
Cette solution est multiplateformes, malgré quelques bugs sous Mac OS inhérents à la gestion des fenêtres par ce système;
C'est une solution sémantique et accessible;
Le référencement et l'indexation de l'information par les moteurs de recherche est réellement amélioré en comparaison aux fichier générés par les autres logiciels;
Le bénéfice principal de l'utilisation des CSS est la liberté de mise en forme, ainsi que l'utilisation d'unités de tailles relatives dans le but de s'adapter à la résolution de l'utilisateur;
Toutes les technologies XML implémentées dans Firefox sont disponibles, incluant ainsi la possibilité d'intégrer par exemple des figures en SVG, ou bien d'autres choses encore;

Bref, vous l'aurez compris, cette extension peut paraître banale ou mineure, mais il s'agit en fait d'un véritable outil de diffusion de l'information qui permet de remettre en cause la vision en elle même du document qu'est le slideshow, de nos jours relativement fréquemment utilisé. Pour télécharger l'extension, rendez-vous sur le site de Mozilla et pour effectuer un test sans plus attendre, visionnez le diaporama de démonstration mis en ligne par l'auteur de cet add-on. Je serai heureux d'avoir vos avis sur cette extension : futile ou utile ?

Notes

[1] Ce code est minimaliste et ne contient pas tous les éléments nécessaires à la construction d'une page HTML ou XHTML correcte, excluant notamment le doctype, les directives d'encodage, etc.

LiberT : le blog ! - Tag - Glazman

Le futur de HTML en vidéo...

Fuller Screen : vos diaporamas en HTML et plein écran complet...

Notes