[HTML] S5 : Un Diaporama Dans Votre Navigateur

[Quarky]

S5 : un diaporama dans votre navigateur

Présentation

Hello @ tous.

Ayant plus de temps à passer sur PC INpact, je voulais vous faire partager un petit truc que j'ai utilisé pour toutes mes présentations orales durant l'année scolaire passée. Il s'agit en gros d'un diaporama dans le genre de ceux réalisés sur M$ Powerpoint ou OOo Impress. Sauf que là, vous le faites en codant et cela est utilisable sur votre navigateur.

Qu'importe le navigateur, l'OS, ...

Certains se demanderont peut être quel est l'intérêt ... et bien je dirais que comme tout truc nouveau l'envie de tester est forte. Et puis cela permet de partager des présentations en ligne sans avoir à ouvrir une application qu'il faudrait obligatoirement posséder. En fait on s'affranchit de l'appli.

De toute façon dès que vous testerez, je suis sûr que vous en trouverez

Au passage, S5 est sous licence Creative Commons "Attribution-ShareAlike 2.0".

Démo

Source

Tutoriel ultime : S5 + Presentacular

Plan

- Pourquoi S5 ?

- Présentation technique

- Avantages

- Installation

- Utilisation

- Mes conseils

- L'auteur

- On en parle sur le web

- Aller plus loin avec Presentacular

- Encore plus aboutit : "S5Key"

- Une communauté en devenir ? ...

[Quarky]

Pourquoi S5 ?

Commençons par le nom !

Vous vous demandez sans doute (comme moi auparavant) d'où vient ce "pseudo nom de code" de S5. Et bien l'auteur nous donne la réponse par cette expression :

It's a Simple Standards-based Slide Show System

(Vous aurez pu y compter 5 lettres "S")

Et on traduirait par :

C'est un système simple de diaporama basé sur les standards.

Présentation technique

Cette appli repose principalement sur du XHTML et CSS. En fait S5 respecte même les normes W3C.

Ces langages étant facile à maitriser, vous comprendrez rapidement qu'il ne vous faudra pas longtemps pour pouvoir en faire ce que vous souhaitez.

Il faut tout de même préciser que du Javascript est également employé. Mais vous n'aurez pas à y toucher puisque cela sert entre autres à l'enchainement des "slides". Donc cela touche à la structure même du script ...

En gros si vous savez faire des pages web toutes simples, vous vous en sortirez. D'ailleurs j'irais même plus loin : il vous suffira de répéter des manip' basiques pour réaliser des diaporamas de base mais qui roxent ! ...

Vous pourrez vous en rendre compte un peu plus loin.

Avantages

Voici les principaux points positifs que j'ai pu trouver en utilisant S5. Si vous en voyez d'autres, faites le moi savoir !

- Pas de contraintes logicielles

Plusieurs navigateurs supportés

- Respect des normes du

W3C

- Bonne accessibillté et donc bon référencement !

- Style modifiable

La puissance du CSS vous le démontrera

- Un CSS consacré spécifiquement à l'impression

Pour imprimer au mieux son diaporama

- Effet highlight incrémental

Mise en évidence de texte, image, (...) pour attirer l'attention de l'assistance

- Contrôles claviers pour la navigation

- Contrôles souris cachés sauf au survol

[Quarky]

Installation

Dans un premier temps, il va vous falloir télécharger l'archive contenant S5. En la dézippant, on remarque qu'il y a de nombreux fichiers de documentation ainsi que de des versions de démo de l'appli. Il y a même un tuto en anglais.

A mon avis, vous devriez virer l'ensemble des fichiers mis à part le tuto (primer.html et le dossier primer) et garder l'archive (s5-blank.zip). Et oui toute la doc est dispo sur le site de d'Eric Meyer et elle y est mise en forme, ce qui est plus agréable à consulter ...

Si vous n'êtes pas sur MAC, le dossier _MACOSX vous est inutile ! A supprimer également donc.

En fait pour réaliser un diaporama avec S5, un seul fichier est à modifier : le s5-blank.html (je ne parles pas ici des modif sur le CSS).

Et vous êtes donc parés pour réaliser votre premier diaporama avec S5 !

Utilisation

En cours de rédaction ...

Je n'ai pas voulu faire dans ce topic une présentation complète de comment utiliser S5. et oui d'autres l'ont déjà fait et de la plus belle manière d'ailleurs ! Je vous renvois donc à la traduction de l'introduction à l'utilisation de S5 mais également au tutoriel de Framasoft (que je qualifies d'ultime )

Ma version ne va décrire que l'essentiel pour créer un diaporama sans vouloir y passer longtemps et en modifiant que l'indispensable.

Ce qu'il vous faut

Afin de pouvoir réaliser les diaporamas, il est recommandé d'utiliser un éditeur de texte. Pour ceux qui ne connaissent pas, il s'agit en gros de bloc-notes améliorés, donc des logiciels qui vous feront taper au clavier pour ajouter et modifier tout élément ! Pour les windowsien, je recommande Notepad++

Lorsque l'on débute, il peut être déroutant de devoir tout faire "à la main" mais vous verrez que cela est bien plus efficace !

Renseigner son document

Avant de s'atteler à la réalisation en elle-même, je préconise de s'occuper du titre, nom d'auteur, (...). Cela permet de ne jamais oublier cette étape.

Pour ca, ouvrez le document "s5-blank.html" avec un éditeur de texte. Vous pouvez voir que de nombreuses lignes de codes sont déjà présentes.

Faire la diapo de titre

S'occuper des diapos de contenu

[Quarky]

Mes conseils de conception

Par habitude de voir des présentations orales, conférences, soutenances, (...), j'ai pu me forger un opinion sur différents points qui rendent un exposé agréable. Je vous propose donc ici de vous les faire partager.

Des mots-clés

La première chose que je dirais est de prohiber tout texte ou paragraphe. Vos messages passeront bien mieux en ne faisant afficher que des mots-clés. Ainsi, votre auditoire se concentrera sur ce que vous dites plutôt que rester à lire votre support !

Une diapo = une idée

Je pense aussi qu'il faut savoir organiser les diapos de façon à avoir une idée ou un thème sur chacune des diapos. Le tout sera alors mieux organisé, plus clair.

Des couleurs claires

Au niveau graphique, il me semble que les couleurs vives ne peuvent que nuire au contenu car elles mettent en avant la forme au détriment du fond. Veillez donc à n'avoir que des couleurs claires, pastels. D'ailleurs pour ce qui est de la couleur de fond de texte, je pense que le mieux est d'avoir du blanc ou du moins une couleur s'y approchant.

Savoir où on en est ...

Pour que tous puissent se rendre compte de l'évolution de votre exposé, je vous conseille vivement de bien laissé visible le décompte des diapos placé par défaut en bas au milieu.

Un diaporama entièrement lisible

Pensez à vérifier que vos illustrations, schémas, (...) soit lisibles du fond. Rien n'est plus frustrant que d'avoir un document sous les yeux que l'on ne peut « déchiffrer ».

Un produit « fini »

Enfin, pensez à faire lire vos notes et votre diaporama par un tiers pour corriger d'éventuelles fautes. Il est également bienvenue de s'entraîner quelques fois avant la présentation pour bien maîtriser votre sujet et éviter les hésitations. Cela dit ce point est peut être plus personnel et dépend de chacun.

Déconseillés

- Les effets sonores

- Trop d'effets visuels

- Les cliparts (préférez des illustrations de qualité, photos ...)

[Quarky]

L'auteur

Son site

Sa bio

Ses publications

On en parle sur le web

S5 ayant rencontré un bon succès, il est normal que plusieurs sites se soient fait l'écho pour en parler. Je vous met ici une partie de ces sites qui pourraient apporter chacun leur vision et des infos ou opinions.

-

Présentation en ligne : la solution d'Eric Meyer

@ les-miettes.net

-

S5 : système de présentation utilisant les standards Web

@ linuxfr.org

-

S5

@ gilles-jobin.org

-

S5: Simple Standards-Based Slide Show System (diaporama)

@ davidtouvet.com

-

S5 en français

@ almaren.ch

-

Test S5

@ bagneris.net

...

[Quarky]

Aller plus loin avec "Presentacular"

Presentacular est une librairie d'effets adaptés pour S5 qui assemble deux autres libraires : prototype et scriptaculous.

On peut donc avoir plus d'effets que de manière classique et de plus, il est possible de définir la durée de ces effets supplémentaires et même de les combiner ! Presentacular a été développé par Juan Manuel Caicedo.

Il y a en tout 11 nouveaux effets :

-

Blinddown

(Le texte est déroulé du haut vers le bas)

Démo

-

Appear

(Le texte apparaît progressivement)

Démo

-

Puff

(Le texte monte vers le haut tout en disparaissant)

Démo

-

Shake

(Le texte est remué de droite à gauche rapidement)

Démo

-

Pulsate

(Le texte clignote)

Démo

-

Slidedown

(Même effet que blinddown ???)

Démo

-

Highlight

(Ne semble pas fonctionner)

Démo

-

Grow

(Le texte grossit jusqu'à sa taille normale)

Démo

-

Fade

(Le texte disparaît lentement)

Démo

-

Fold

(Le texte est enroulé du bas vers le haut puis sur vers la gauche)

Démo

-

Shrink

(Le texte se rétrécit vers le bas et à droite)

Démo

Le problème est que cet ajout d'effets n'est pas aussi bien supporté que l'original S5. Ainsi IE ne peut tolérer tous les effets. Et pour Mozilla, cela varie en fonction de la version ...

Pour en savoir plus sur l'utilisation de Presentacular, reportez vous au Site officiel ou au Tutoriel ultime : S5 + Presentacular.

[Quarky]

Encore plus aboutit : "S5Key"

Cet "add-on" de S5 a été développé par Jonathon Snook. En gros il permet de différencier l'utilisation du diaporama pour l'audience de celle de l'intervenant.

En pratique, l'audience profite du diaporama classique de S5 alors que l'orateur dispose d'une vue complètement remaniée comprenant l'affichage de la diapositive en cours, celle qui va suivre, un chronomètre, l'heure, et vos éventuelles notes ! Que demandez de plus ? !!!!

On peut donc gérer complètement son exposé d'un seul coup d'oeil et cela sans le moindre soupçon de l'auditoire. Et ce qu'il y a de très sympa c'est que même l'affichage incrémental est géré !

Un screen partiel de la "chose"

Pour en savoir plus, je vous renvois directement à la Présentation de l'auteur et plus particulièrement à la Démo : vous allez pouvoir vous rendre compte que ce truc est vraiment terrible !

[Quarky]

Une communauté en devenir ? ...

Depuis sa sortie, S5 a rencontré un grand succès. Beaucoup d'utilisateurs ont donc pu se frotter à la création de ces diaporamas en ligne et très logiquement une part d'entre eux s'est penchée sur le code pour l'améliorer, ajouter des fonctionnalités (cf. licence) ...

Or il fallait bien pouvoir centraliser tout ceci et comme l'a anonncé Eric Meyer, S5 a désormais un site qui lui est propre !!! Il s'agit de S5project.org.

Le but est d'y retrouver un wiki, un espace pour déposer du code et un autre pour les bugs.

On aurait alors une vrai communauté qui se metterait en place. Malheureusement ce S5Project n'est pas véritablement lancé pour l'instant. Ceci reste toutefois compréhensible : l'ouverture s'est faite fin juillet

Un site à surveiller ?! ...

[Quarky]

Voilà j'espère que tout ceci vous a plu !

N'hésitez pas à poster pour demander de l'aide, en proposer ou suggérer vos idées pour ce topic.

Vous pouvez également proposer vos modifications de style.

[Ago]

Superbe présentation ! Je connaissais S5 bien avant la lecture de ce topic, mais par contre je ne connaissais pas S5Key et l'integration de script.aculo.us avec Presentacular. Ce sont 2 projets que je vais surveiller de près, ils sont assez interessants

D'ailleurs à propos de S5, quelques conseils si vous devez faire une présentation sur un pc autre que le votre, mais que vous avez fait votre diapo sur votre pc, avec des logiciels différents :

- Prenez garde à la résolution ! Bien que S5 aie été concu pour adapter le texte au mieux à la résolution, parfois des bouts de texte peuvent se retrouver dans de bizarres postures. Pensez donc à tester ca à chaque changement sur votre diapo.

- Prenez garde au navigateur et aux polices sur ce navigateur : Hé oui, les polices de Firefox sous Linux sont parfois différentes que celles d'IE sous windows. Vous risquez de vous retrouver avec un diapo qui utilise une police beaucoup moins belle que celle que vous aviez prévue, et dont la taille est parfois différente ! (pour cela, retour au point 1 aussi)

- Faites attention avec les caractères accentués et l'encodage de votre fichier. Comme S5 est développé en xhtml, utilisez plutot les codes HTML des caractères plutot que leur version normale (cf. http://www.lookuptables.com/ , catégories HTML codes)

Voila, pour l'instant c'est tout ce que je trouve à dire :)

[Quarky]

Durant toutes mes utilisations et celles de mes collègues, on a parfois été exposé à des problèmes de résolution : tout le texte n'apparraissait pas ...

Mais bon un coup de Ctrl + - et ca va !

On retrouve tout le texte avec une taille moins grande.

Pour le topic, je penses le retrvailler dans les prochains jours pour le rendre plus agréable. Comme ça, cela ne me convient pas

[windu.2b]

Je viens de zyeuter vite fait la démo de S5Key...

'Tin, mais c'est génial ce truc!!! Je sais pas pourquoi, mais je sens que ca va tourner à Caen, pas vrai Quarky?

[jobing]

WikiniMST, une saveur québécoise de WIKINI intègre déjà S5 dans sa version.

Pour une démo, voir ici :

http://recitmst.qc.ca/wikinimst/wakka.php?wiki=FonctionPrez

l'avantage étant qu'on puisse créer le diaporama directement dans un wiki!

[Quarky]

pour ceux n'ayant pas déjà eu occasion de découvrir S5.

[farvardin]

C'est vraiment superbe Presentacular !

Dommage que ces outils ne soient pas plus employés et encouragés, par rapport à "PauvrePoint".

Je viens également de découvrir Slidy, c'est pas super sexy, mais très facile à utiliser, et c'est une initiative du W3C : http://www.w3.org/Talks/Tools/Slidy2/

[theocrite]

S5 est pas mal. Il est déjà fort connu/utilisé dans le milieu du libre.

Dans le même genre (ou presque), il y a http://labs.kompozer.net/timesheets/ qui a l'air bien prometteur. Ou encore sozi, mais ce n'est pas tout à fait le même objectif.

jessyInk est un plugin inkscape qui permet de faire des slides à partir de dessins vectoriés.

Sinon pour les fans de LaTeX, il y a toujours beamer, la référence. Comme tout ce qui est en LaTeX, ça peut se convertir en à peut près tout, dont du HTML.