PICCEL (v 1.2)

Introduction

Dans le cadre du projet Astrophysique Sur Mesure, la réalisation des ressources et des contenus nécessite une succession d'étapes allant de la phase de conception à celle de réalisation. Cette application constitue l'un des derniers maillons de cette chaîne de production : c'est à dire l'outil permettant la génération proprement dîte du contenu web à partir des différentes contributions (documents XML) produites par les auteurs.

Le but de cette application étant de simplifier autant que possible cette étape de transformation en regroupant et automatisant toutes les opérations successives nécessaires pour produire un cours en ligne structuré à partir des différents documents xml (+ les images et animations associées) correspondant aux chapitres, sous-chapitres ou sections du cours.

Installation

Configuration requise

La chaîne de production a été réalisée en Java 1.3 et peut donc être utilisée sur tout ordinateur muni de cette version ou d'une version ultérieure.

Prise en main

Lancement

La chaîne de production se lance différemment selon le système d'exploitation utilisé :

Interface

Cette application peut visuellement se décomposer en trois zones (cf. figure) distinctes :
  • Une liste "Sélection du site" dans la barre de menu (1) permettant l'utilisation de différents sites par l'application
  • Un champ (2) contenant l'historique des principales opérations effectuées par l'application depuis son lancement
  • Une zone (3) permettant à l'utilisateur d'effectuer toutes les opérations successives nécessaires pour la génération du site
interface

Zone 1 : La sélection du site

Plusieurs projets peuvent être gérés conjointement par l'application. La liste « Sélection du site » de la barre de menu permet :

Zone 2 : L'historique des opérations

Les opérations successives effectuées par cette application sont nombreuses. Ce champ permet à l'utilisateur d'avoir l'historique des principales opérations effectuées par l'application depuis son lancement.

Zone 3 : Les étapes de production

Organisation des dossiers

L'arborescence de la chaîne de production et de chaque projets doivent respecter une organisation particulière pour fonctionner correctement.

organisation des fichiers     L'arborescence des principaux fichiers de l'application est la suivante :
  • Les fichiers permettant de lancer l'application : piccel.exe (Windows), run.sh (Unix) et Piccel (MacOS)
  • Le répertoire lib contenant les archives java utilisées pour l'exécution de l'application.
  • Le répertoire XSL contenant toutes les feuilles de style utilisées par l'application. C'est à dire principalement :
    • ASM_0.xsl, ASM_1.xsl, ASM_2.xsl, ASM_TP.xsl pour la transformation des documents XML en pages HTML.
    • credits_tri.xsl, labels.xsl, labelsfigures.xsl, liste_credits.xsl pour générer les pages html du même nom (cf. ci-dessous)
  • Le répertoire "permanent" contient l'ensemble générique des fichiers nécessaires à un projet, c'est à dire :
    • un répertoire "applets" contenant toutes les applets utilisées par les pages du site, comme par exemple mngplay.jar pour les animations ou TabloGraphe.jar pour l'applet de tableur/tracé de graphes
    • un répertoire "feuilledestyle" contenant la feuille de style CSS du site.
    • un répertoire "interface" contenant les différentes images de l'interface. Plusieurs images (logo.gif et intro.png notamment) doivent donc être personnalisées (en conservant les dimensions) au site.
    • un répertoire "symbole" contenant les représentations en images de différents symboles grecs et mathématiques utilisés pour les équations.
  • Un répertoire pour chacun des projets gérés par l'application. Considérons par exemple le contenu d'un projet "Francophonie" (finalisé) :
    • Le répertoire "contribXML" contient toutes les contributions des auteurs (documents XML + images/animations).
    • Le répertoire "permanent" est une copie du répertoire générique "piccel/permanent" effectuée à la création du nouveau projet. Il doit ensuite être manuellement personnalisé (applets utilisées, logos, etc.) pour chaque projets.
    • Le répertoire "site" contient l'intégralité du site lorsque les 4 étapes de transformations ont été effectuées, c'est à dire :
      • Les répertoire du site web (hiérarchisés par chapitre / souschapitre / section) générés à l'étape 4 par l'application.
      • Les répertoire applets, feuilledestyle, interface, symbole (précedemment décrits) qui sont copiés du répertoire "permanent" dans le "site" lorsque le site est (Ré)initialisé.
      • Les répertoire "images * " contiennent (sous diverses résolutions et formes après traitement à l'étape 3) les images et animations du site.
      • Quelques fichiers informatifs générés à la fin de l'étape 2 :
        • "credits.html" : un récapitulatif trié par page des informations (crédit, propriétaire, page, etc.) liés aux images du site.
        • "credits_tri.html" : un récapitulatif trié par crédit des informations (crédit, propriétaire, page, etc.) liés aux images du site.
        • "labels.html" : un récapitulatif des labels (qui ont un rôle d'identificateur) utilisés pour les différentes parties (chapitre, pages, etc.) du site.
        • "labelsfigures.html" : un récapitulatif des labels (qui ont un rôle d'identificateur) utilisés pour les différentes images du site.
    • Le fichier "coursvirtuel.xml" qui correspond au plan du cours utilisé par l'étape 1 de l'application. (cf. étapes de production)
    • Un fichier "infoProjet" (fichier de données utilisé par l'application et propre à chaque projet)

Utilisation

Première utilisation

Au lancement de l'application, vous accéderez directement au projet "DOCUMENTATION" intégré à PICCEL. Il constitue un exemple simple (sans applets, animations, ni QCM) du type de structure web qui peut être obtenue après traitement des contributions par cet outil. Toute l'interface pouvant être remaniée d'un projet à l'autre.

Les étapes successives classiques (hors paramétrages) pour générer puis accéder à un projet sont :

Pour votre première utilisation de cet outil, effectuez ces différentes étapes sur le projet "DOCUMENTATION".

Commencer un nouveau projet

Il suffit d'ajouter le nouveau projet ("Francophonie" par exemple) depuis la barre de menu. L'application se charge alors :

Les étapes de production

Lorsque les documents XML ont été rédigés ...

Première étape : Rassemblement des Documents XML

La première étape de la chaîne de production consiste à utiliser le plan du cours ("coursvirtuel.xml") pour rassembler tous les documents XML dans un seul document XML contenant tout le cours. Cette étape utilise le fichier "coursvirtuel.xml", les documents XML des contributions et la feuille de style "ASM_0.xsl", pour produire le fichier "toutlecours.xml".

La structure du site doit être défini dans le document coursvirtuel.xml, fichier qu'il faut donc actualiser à cette étape en respectant les règles suivantes:

Pour simplifier la construction du document coursvirtuel.xml, l'application permet de construire ce document depuis une structure sous forme d'arbre (un éditeur de texte simple pouvant aussi être utilisé en l'activant dans les options de la barre de menu). Les différentes actions possibles sur l'arbre XML sont les suivantes :

arbre
  • a) Enregistre le document courant.
  • b) Annule toutes les modifications effectuées depuis la dernière sauvegarde.
  • c) Active ou désactive ce noeud (ainsi que ces éventuels descendants) pour que celui-ci soit ou non pris en compte pour la génération du site. Il est ainsi par exemple facile de laisser temporairement un chapitre ou un sous-chapitre de côté si on le souhaite.
  • d) Modifie les attributs (titre, label, etc.) du noeud sélectionné.
  • e) Ajoute à la suite un noeud au même niveau (un chapitre à la suite d'un autre chapitre par exemple).
  • f) Ajoute à la suite un noeud au niveau inférieur (un sous-chapitre à un chapitre par exemple)
  • g) Supprime le noeud courant (et donc tout ces éventuels descendants)

Lorsque la structure du document coursvirtuel.xml correspond au plan que l'on souhaite établir pour le cours, l'étape 1 peut alors être lancée.

Seconde étape : Mise en Page

La deuxième étape consiste à mettre en page le cours, c'est à dire découper les différentes parties du cours en pages. L'utilisateur doit, avant de lancer l'étape, choisir dans les options le type de sortie qu'il souhaite obtenir : « web » pour un résultat sous forme de site web classique , ou « impression » pour générer l'ensemble du site sur une même page html et en faciliter ainsi son impression. Le sommaire est défini pour chaque page, et les liens entre les différentes parties du cours sont transformés (via l'attribut label) en liens entre pages. Cette étape utilise le fichier "toutlecours.xml" et génère le fichier "inter.xml", à l'aide de la feuille de style "ASM_1.xsl".

Troisième étape : Transformation des Images

Les auteurs peuvent demander à afficher des figures en page, c'est à dire à gauche du texte, ou sous forme d'icône, c'est à dire réduit en petit et dans le texte. Les images en page doivent aussi être réduites pour que la présentation reste uniforme entre les pages. On souhaire ensuite pouvoir cliquer sur ces images réduites et obtenir la version originale, en grand. Cette étape de transformation des images consiste donc principalement à réduire les images et les animations qui doivent l'être, et à les placer dans les répertoires correspondant du site web.

Quatrième étape : Affichage / Génération du site

Pendant cette dernière étape, selon le type de sortie choisi l'application va générer : soit l'ensemble des fichiers HTML du site (dans le répertoire « site ») en mode web, soit un unique fichier HTML (« impression.html ») si l'on souhaite effectuer une impression du cours. Cette étape utilise le fichier "inter.xml" et la feuille de style "ASM_2.xsl", pour génèrer le(s) fichier(s) HTML du répertoire "site".

Rmq : Pour un même cycle de traitement, cette étape doit être lancée avec le même mode que celui utilisé à l'étape 2.

L'utilisateur doit, avant de lancer l'étape, choisir dans les options d'activer (ou non) l'affichage des commentaires pour les auteurs, et ce, afin de se rappeler d'améliorer telle ou telle partie du cours. L'option commentaires devant être désactivée dans la version finale pour les étudiants.

Lorsque cette étape est terminée, le site est désormais créé et son organisation doit être semblable à celle explicitée au paragraphe "Organisation des dossiers".

Lancement d'étapes multiples

L'application permet également de lancer successivement plusieurs étapes du traitement : soit par le biais du menu contextuel, soit par le biais d'une fenêtre accessible par l'item "Traitement/Traitement Multiple" de la barre de menu. Ainsi lorsque tout est paramétré (cad le plan du cours, l'activation ou non des commentaires et le type de sortie), il suffit depuis cette fenêtre de cliquer sur le bouton "LANCEMENT" pour effectuer l'ensemble du traitement.

Le site

Lorsque les quatre étapes précedemment citées ont été effectuées, il est alors possible de consulter le site résultat en utilisant le bouton visualiser. Ce qui a pour effet de lancer le navigateur web de votre choix (à définir au préalable) : soit sur la racine ("site/index.html") du site en mode web, soit sur la page "site/impression.html" en mode impression.

Vous pouvez également, si vous le souhaitez, personnaliser la page d'accueil en créant une page "index.html" (adaptée à votre plan) dans le répertoire "permanent" (ce que nous avons fait pour notre exemple "DOCUMENTATION"). Cette page Web viendra alors automatiquement remplacer celle générée par l'application dans le répertoire "site" à la fin de l'étape 4.

Le bouton Réinitialiser : Efface tous les fichiers générés de l'étape 1 à l'étape 4 ; Puis copie les fichiers (interface, style, ...) du répertoire "permanent" dans le répertoire "site".

La réinitialisation doit être effectuée lorsque toutes les étapes sont a relancer pour actualiser un site web existant (après certaines modifications). Dans ce cas précis, une réinitialisation n'est en soit pas indispensable mais elle permet d'éviter de laisser des fichiers (images,pages HTML,...) inutiles si un paragraphe a, par exemple, été supprimé (ou simplement désactivé temporairement dans l'arbre XML à l'étape 1) par rapport à la version précedente.

Résultat

Le site généré se situe physiquement dans le répertoire "site" du projet concerné. Il comporte d'une façon générale pour chaque page, outre le contenu informatif, une table des matières sur la gauche ainsi que des flêches pour passer d'une page à l'autre.

Exemple de site web généré avec la chaîne de production

Bibliothèques utilisées

Les bibliothèques utilisées dans le cadre de ce projet sont :

Les auteurs

Piccel a été réalisé dans le cadre du projet Astrophysique sur Mesure par Damien GUILLAUME, Cyril DEDIEU et Gilles BESSOU.

Pour tout renseignement, contacter Damien<point/>Guillaume<at/>obspm<point/>fr