Transformation à-la-volée de pages HTML dans un navigateur classique pour les naviguer comme dans un éditeur de documents structurés
(CSS+Javascript based client-side conversion of HTML pages for structured-document-editor like browsing purposes)
Etudiant : Michaël MOREL
Encadrant : Philippe.MARTIN (AT univ-reunion.fr), 0262 48 3330
BUT : faciliter la gestion d'informations.
Tâches principales :
- afficher les éléments de documents (EDs) et, lorsque ceux-ci
n'ont pas d'arrière plan, avec un arrière plan de couleur
claire mais de plus en plus foncé au fur et à mesure de
l'imbrication des EDs, afin de pouvoir les distinguer ;
comme pour les tâches ci-dessous, ceci implique
1) qu'il y ait une "page centrale" demandant à l'utilisateur un URL de
page Web à afficher "comme dans un éditeur de documents
structurés",
2) que cette page centrale ouvre cette page Web dans une autre fenêtre,
insère du code Javascript dans son code, puis re-éxecute ce
code modifié dans cette fenêtre ;
Note : le code inséré devra être visible - et lisible - en
faisant "view source" dans le navigateur affichant la page Web
modifiée (-> l'étudiant devra suivre les exemples donnés
dans les templates ci-dessous, lesquels respectent les "bonnes pratiques
de programmation donnés ci-dessous) ;
- permettre à chaque utilisateur
- de naviguer entre éléments de documents (EDs) via les
flèches du clavier (i.e., comme dans certains éditeurs de
documents structurés),
- d'associer des attributs-valeurs à un ED,
- de visualiser dans un menu déroulant, en cliquant sur un ED,
les attributs-valeurs initiaux (HTML) de cet ED et ceux qu'il a
ajoutés (note : cela implique d'utiliser des cookies, avec des noms
tels que "attrX" ou bien "pageURL_attrX" suivant que le code javascript
inséré est éxécuté depuis la page Web
modifiée ou depuis la page centrale),
- d'utiliser les trois entrées suivantes d'un menu déroulant
associé à un ED : "hide this ED", "collapse this ED"
(-> remplacer par un icône "+") et "expand this ED" (cela remplace
l'icône "+" par l'ED ; cela doit pouvoir aussi se faire directement
en cliquant sur le "+").
L'étudiant est bien-sûr invité à rechercher
et implémenter d'autres fonctionalités intéressantes.
IMPLÉMENTATION : en Javascript + CSS.
RESSOURCES :
- Amaya (éditeur de documents structurés)
- ressources Javascript (2 modèles, un tutoriel, cours W3schools sur DHTML)
- ressources HTML+CSS
- liste de bonnes pratiques (pour la programmation et celles du W3C pour la mobilité, l'universalité et l'accessibilité)
- la page centrale de WebKB (exemples de menus pour changer des paramètres de présentation, et exemples de représentation de connaissances sous forme de liste indentées)
- éditeur HTML en javascript
- Template HTML+Javascript
- Template Windows
- DHTML
- Exos
- Menus