this is (not) my idea …

J’ai eu l’ocassion de passer un bout de mon samedi après midi aux mozilla developpers days, à Paris, où certains developpeurs nous ont présenté leurs logiciels / extensions basées sur les technologies mozilla, et plus spécialement XUL.

FullerScreener ?

FullerScreener, est une extension pour Firefox écrite par Daniel Glazman.

Non seulement fullerScreener dote firefox d’un “vrai” mode plein écran, avec seulement le contenu de la page, et rien d’autre! (contrairement au mode plein écran par défaut de firefox), mais il permet aussi d’implémenter une fonctionnalité de “Slide Manager” (à la powerpoint), directement depuis une page web. C’est ce que je décrirais plus en détail ici.

Installons la bête

Premièrement, installons l’extension depuis le site de mozilla:

• Installez le plugin depuis sa page sur mozilla.org
• Redemarrez votre navigateur
• passez en mode plein écran avec la touche F11
• testez Le diaproama mis à disposition par l’auteur

Ca vous à plu ? creusons un peu ..

Un peu de sémentique XHTML et de regles CSS

La “force” de ce “slide manager” est de s’appuyer sur les normes XHTML et CSS pour la gestion de la forme du diaporama, il devient donc aisé pour un developpeur XHTML/CSS de mettre en place un diaporama sur son site Web, de manière totalement transparente pour l’utilisateur.

Fuller Screener utilise les sélecteurs CSS pour définir le rôle des elements de la page.

Mise en place des selecteurs

Dans la partie de la page HTML, des balises régissent le fonctionnement du slideshow. Trois éléments sont présents :

• “slideselector” qui définit quel element DOM doit annoncer qu’il s’agit d’une vignette (ici la classe “slide”):

• “titleselector” , idem mais pour le titre de la vignette (les h2 seront donc des titres de vignette)

• “stepselector”, définissant quel élément doit etre affiché à chaque étape du diaporama (ici les elements li n’ayant pas la classe “nostep”)

Création du diaporama

Les regles du diaporama sont mises en place, reste maintenant à le créer. Ca se passe encore du coté du HTML:

Les vignettes

Une vignette est définie par la classe “slide”, en mode diaporama, FullerScreen n’affiche qu’une vignette à la fois (plutot logique).

Une vignette est définie par une div avec la classe “slide” :

A l’intérieur de laquelle trouve:

• le titre de la vignette (h2)
• son contenu (div .slidecontent)

Un diaporama peux contenir des images, graphiques SVG, sites Web, vidéos etc.

Ce qui nous donne (pour une vignette):

 
Titre de la vignette
 

élément 1
élément 2
…

Et c’est tout ! Vous pouvez faire F11 et visualiser votre diaporama.

Mise en Forme du diaporama

Nous bénéficions dores et déjà d’un diaporama en bonnes et dues formes, mais qui manque un peu de panache. Il est possible d’améliorer tout ça grace au language CSS.

FullerScreener utilise les regles de projection pour votre diaporama. Ainsi il est possible de spécifier une mise en forme complétement differente pour notre document HTML affiché par défaut par le navigateur et la meme page en mode “Slideshow” .

Voici le selecteur CSS en question :

@media projection {
	/* Regles propres au diaporama */
}

Il suffit donc de spécifier quelques regles pour obtenir un document plus agréable visuellement :

@media projection {
	.__FSstep { color: #2C8F04; } /* propriétés de l'element actif */

	div.slide {
		position: fixed;
		left: 5cm;
		right: 2cm;
		top: 2cm;
		bottom: 1cm;
		border-left: 1px #eaeaea solid;
	}

	ul li {
		padding-left:1.5em;
		list-style-type:none;
	}

	div.slide h2 {	float: right; }

	div.slide .slidecontent {
		font-size: 1.2em;
		padding-top: 50px;
		margin: 1cm;
	}

      div.footer {
	        position: fixed;
		color: #cacaca;
	        bottom: 0.1cm;
	        left: 5cm;
	        right: 2cm;
	        text-align: right;
	        font-family: sans-serif;
		padding-bottom: 5px;
      }
}

On obtiens donc au final un diaporama un peu plus estethique et le tout en respectant les normes W3C !

Constats

FullerScren est un outil très puissant, qui, non seulement utilise les technologies mozilla, permet de donner une autre dimension à vos pages Web, et ce en respectant les normes du W3C.

On notera au passage la possibilité de visionner l’esnemble des diapositives en pressant shift + F11. Le resultat est du plus bel effet.

Essayez, vous ne serrez pas déçu !

Tags: firefox, planet-libre, Web