Diashow.html permet la projection de diaporama à l'aide des navigateurs récents.
Les logiciels de visualisation offrent généralement un mode de fonctionnement en diaporama, mais les possibilités sont restreintes. Il n'est pas possible d'influer sur l'ordre des images. L'ajout de titres et sous-titre n'est pas possible, un accompagnement sonore est impossible. Diashow.html permet tout ceci et les titres peuvent être affiché seul ou en surimpression d'une image. Le lancement de l'accompagnement sonore est synchronisé sur les photos ou textes affichés.
Ainsi il n'est pas nécessaire d'utiliser d'un logiciel spécial ou de produire un film, bien sur à l'aide d'un logiciel adéquat. Il est cependant possible d'utiliser un éditeur graphique basé sur HTML (éditeur graphique), ceci nécessite l'installation de certains composants.
Google-chrome et Firefox 4
fonctionnent parfaitement. Opera 11 fonctionne
également, cependant au début du diaporama, des scintillements
peuvent être produits lors du changement des images ou des textes.
Safari devrait fonctionner, Le fichiers sonores
doivent être au format mp3. Firefox et Opera ne traitent
que les fichiers ogg. D'après des recherches sur le réseau,
il doit être possible d'installer les codecs nécessaires pour le
traitement des fichiers ogg.
Internet Explorer 9 fonctionne, cependant, comme
Safari, il n'est pas apte à reproduire les fichiers
ogg si le plugin WebM de Google n'est pas installé. De plus
certaines choses comme les ombres pour les textes manquent.
Les photos sont automatiquement misent à l'échelle si leur dimensions
dépassent celle de la fenêtre d'affichage. Les photos
de taille réduite sont automatiquement centrées.
Les Textes peuvent être superposés aux images, ils sont également
centrés sur l'écran.
Le changement de photos ou de textes est effectué automatiquement
toutes les 5 secondes. Il est possible de modifier la temporisation
dans le fichier diashow.html.
var waitTime=5000; // delay between changes 5 seconds
La synchronisation de l'accompagnement sonore est géré par les changements d'image ou de texte.
opera -fullscreen diashow.html
Opera est lancé em Mode plein écran. Google-chrome , und Firefox ne connaissent pas d'option équivalentes. La touche [F11] permet de passer en mode plein écran.
Certaines combinaisons de touches sont reservée par le navigateur et ne peuvent pas toujours être utilisées. Au lieu de la touche [Alt] utiliser les touches [Ctrl] ou [Maj].
Pour que diashow.html fasse son travail, un petit fichier JavaScript doit être créé. Ce fichier list.js est structuré comme suit:
// Photos Texte-HTML Musique Temps var fileList = [ [ '', 'html/titre-1.html', 'musique/morceau-1.ogg', '' ], [ 'images/image-1.jpg', '', '', '.5' ], [ 'images/image-2.jpg', 'html/titre-2.html', '', '2' ], [ 'images/image-3.jpg' '', 'audio/commentaire-3.ogg', '' ], ];
Chaque ligne commençant par '[' et se terminant '].' indique quelle
image (champs 1) ou document HTML (champ 2 est affiché et quel fichier
audio doit être jouer (champ 3). Les fichiers audio doivent être au format ogg.
Les lignes sont traitées consécutivement. Si dans le contenu d'un champ est
- ('-') aucune image n'apparaît, respectivement le son est interrompu.
Le dernier paramètre contrôle la temporisation, c*est un multiplicateur: '.5' donne 4 x 0,5 = 2 secondes, '2' donne 8 secondes de temps de pause pour l'avancement sur la ligne suivante.
Une ligne contenant ['reload','','',''], autorise la relance du diaporama.
Ces fichiers peuvent être facilement créés, d'autant plus que peu de choses différentes.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<style type="text/css">
<!-- Bind own font for standard complient browser -->
<!-- The font file must reside in the folder fonts -->
<!-- which shall be an folder within the html file -->
<!-- direcrory. The fonts must be free fonts! -->
@font-face {
font-family: YanoneKaffeesatz;
font-weight:normal;
src: url("fonts/YanoneKaffeesatz-Regular.woff") format("woff");
}
@font-face {
font-family: YanoneKaffeesatz;
font-weight:bold;
src: url("fonts/YanoneKaffeesatz-Bold.woff") format("woff");
}
</style>
<style type="text/css">
/* Declare some css values foe the used elements */
body { margin:0; border:0; padding:0; background-color:transparent;
text-align: center; font-size:100%; line-height:1.3;
font-family:YanoneKaffeesatz, Verdana, sans-serif;
overflow:hidden; text-align: center;
}
/* Set font-size, color,... here */
h1 {
color:red; font-size:9em;
/* make text shadows, dont'T work for IE 9! */
text-shadow: .05em .05em .05em #ffaa66;
/* rotate the text */
-webkit-transform: rotate(-15deg);
-moz-transform: rotate(-15deg);
-o-transform: rotate(-15deg);
-ms-transform: rotate(-15deg);
transform: rotate(-15deg);
}
h2 {
color:lime;
font-size:5em;
margin-top: .5em;
}
</style>
<script>
// center vertically
function setValues() {
var container = document.getElementById("container");
var marginTop = document.getElementById("marginTop");
var h = window.innerHeight;
var i = marginTop.offsetHeight;
container.height = h+'px';
marginTop.style.marginTop = ((h-i)/2)+'px';
marginTop.style.visibility = 'visible';
}
</script>
</head>
<body onload="setValues();">
<div id="container">
<div id="marginTop" style="margin-top:0px;visibility:hidden;">
<h1>Titre</h1>
<h2>Sous-titre</h2>
</div>
</div>
</body>
</html>
En règle générale il est possible de copier le si dessus et de modifier les titres <h1>Titre</h1> et sous-titres <h2>Sous-titre</h2>. Supprimer le sous-titre correspondant simplement à l'écrasement de la ligne décrivant celui ci.
diashow.html et list.js doit résider dans le même dossier.
Les images peuvent être dans le même dossier ou dans un sous-dossier.
Un chemin absolu peut également être placé dans le fichier list.js
('/media/cdrom/diashow/photos/image.jpg').
Google-chrome peu jouer les fichiers ogg et mp3. Firefox et Opera imposent de fichiers au format ogg.
Internet Explorer 9 et Safari ne connaissent pas le format ogg.Il esr cependant possible d'installer des codec leurs permettant d'opérer avec les fichiers ogg. Si les Plugins requis ne sont pas présents, FOggPlayer.swf permet la reproduction sonores des fichiers au format ogg. Ceci impose des restrictions de la fonctionnalité.
Internet Explorer 9 ne semble pas accepter les fichiers
comme le font ses collègues. Il est nécessaire de passer par un serveur
http! Heureusement le serveur mongoose
(http://code.google.com/p/mongoose/) permet sans installation de
créer l'environnement requis. Un simple clic sur le logiciel qui
doit résider dans le répertoire contenant diashow.html permet de
lancer ce serveur. Après ceci ils suffit de lancer Internet Explorer 9
et d'entrer http://localhost:8080/diashow.html dans
le champs des adresses et le diaporama tourne!
Il est nécessaire d' arrêter le serveur http après le diaporama et
surtout avant d'éjecter le disque ou la clef USB.
Une rotation automatique des photos n'est pas réalisée. De ce fait il est nécessaire de faire ceci manuellement.
La conversion des fichiers mp3, ... au format ogg peu être effectuée par exemple à l'aide de fre:ac (http://www.freac.org). Fre:ac est disponible pour Linux, Windows et Mac OS X.
L'auteur, Jean-Jacques Sarton, autorise, sans aucune restrictions, l' utilisation et la distribution de diashow.html.