Page principale

Un éditeur de diaporama

L'édition de fichiers de configuration à l´aide d'un éditeur de textes n'est certainement pas l'affaire du commun des mortels. De ce fait une interface graphique utilisant le navigateur à été réalisée. Elle permet de produire le fichier de configuration de diashow.html et la création des fichiers contenant les textes utilisés pour le diaporama.

Le navigateur n'autorise l'enregistrement de fichiers. Il en découle qu'un serveur WEB est nécessaire pour la réalisation de l'interface.

Le serveur mongoose (http://code.google.com/p/mongoose/) correspond parfaitement aux impératifs. Il ne nécessite pas d'installation, il peu être lancé directement dans le répertoire du diaporama et une configuration compliquée n'est pas nécessaire.

L'utilisation d'un serveur comme Apache est possible mais cela entraîne des complications en ce qui concerne les droits de lecture et d'écriture et les chemins d'accès.

Installation de PHP

Unixoide (Linux,...)

Php fait partie des paquetages offerts par les distributions. L'installation est de ce fait aisée et a effectuer avec les utilitaires du système.

Avec Ubuntu 11.04 les paquets à installer sont: php-cgi et php-gd. Les paquets à installer pour Fedora sont: php-cli et php-gd.

Il faut passer des arguments lors du lancement de mongoose:

./mongoose -I `which php-cgi`

Un script permettant le démarrage en arrière plan du serveur et le lancement du navigateur est une chose très simple:

#!bin/sh
./mongoose -I `which php-cgi` &
firefox http://localhost:8080/edit.php
pkill mongoose
Le script peu, directement, être lancer à partir du gestionnaire de fichiers. Le serveur est lancé en arrière plan et ensuite le navigateur (ici Firefox) est démarré. Après l'extinction du navigateur le serveur reçoit un ordre de terminaison.

Windows

Sous Windows, ils est nécessaire d'installer 4 fichiers de l'archive téléchargeable sous: http://windows.php.net/download. Choisir le lien Zip et non le lien Installer.

4 fichiers de l'archive sont requis et doivent être copier sous le répertoire du diaporama:

Le fichier php.ini-production doit être renommé en php.ini et une ligne doit être introduite après la ligne:
[PHP]
Le texte suivant est à ajouter:
extension=.\php_gd2.dll

Le démarrage est effectué avec la commande:

mongoose-3.0.exe -I php-cgi.exe
Cette commande peu être placée dans un fichier mongoose.cmd permettant, ainsi, le lancement à partir du gestionnaire de fichier.

Répertoires et fichiers

Le fichier principal edit.php doit être placé dans le répertoire du diaporama

Les fichiers nécessaires au fonctionnement de edit.php sont situés dans le dossier data qui doit être également copier.

Le fichiers texte (html) seront placés dans le dossier textes. Le dossier textes de l'archive contient déjà 2 polices et devrait être copier dans le répertoire du diaporama.

Si vous avez des polices de caractère (format woff), celles ci doivent être copiées dans le répertoire textes/fonts.

Les photos numériques du diaporama doivent être présentes dans un sous dossier, la dénomination de celui ci est libre mais ne doit pas être "data", "music" ou "textes". Les fichiers photo doivent être au format jpeg.

Les fichiers audio sont à placer sous le dossier music et doivent être aux format ogg.

Utilisation de edit.php

L'adresse: http://localhost:8080/edit.php est celle de l'éditeur de diaporama.

L'espace de travail comprend 3 aires principales. L'espace supérieur autorise l'affichage des images et textes des sous-répertoires sélectionnés.

L'aire du milieu comprend une corbeille à papier et une zone permettant le placement temporaire de photos ou de textes.

L'aire inférieure contient les éléments formant le diaporama. Des paramètres supplémentaires (Musique/commentaires, temporisation, fichier texte pour les images) peuvent être ajoutés après avoir effectuer un double clic sur l'image ou le texte concerné.

Les photos et textes sont placés dans l'espacement désiré en appuyant sur la touche gauche de la souris et en glissant l'élément au dessus de l'emplacement choisi.

Dans l'aire "diaporama" les éléments sont inserée avant l'élément réceptacle. Il est ainsi possible de modifier facilement l'ordre des photos et textes. L'insertion en fin du diaporama est à effectuer dans la plage grisée qui est toujours placée en fin de celui ci.

Les textes déjà présents peuvent être modifiés après un clic avec le bouton droite de la souris.

Les données supplémentaires du diaporama sont accessibles par double clic.

De nouveaux fichiers texte peuvent être créer en cliquant le bouton de commande, situé à gauche, en dessous de l'aire du diaporama.

Le bouton d'enregistrement est également situé en dessous de l'aire du diaporama.

Compatibilité des navigateurs et leurs problèmes

La compatibilité des navigateurs avec les "normes" du W3C et également leurs caractéristiques propres posent certains problèmes qui ont été résolu grâce à un code permettant l'élimination des défauts (mise en mémoire tampon trop agressive (Opera), limitation de la largeur utilisable (Opera)) et l'utilisation de fichiers javascript operaDragAndDrop.js (gitHub.com), fd-slider.js (gitHub.com) et jscolor.js (jscolor.com). Les fichiers du site gitHub.com ont du être légèrement modifiés.

Page principale