Amaya : un éditeur de pages Web

Les principes fondamentaux du Web

• Interopérabilité :
  Les langages et protocoles du Web doivent permettre aux matériels et logiciels utilisés pour accéder le Web de fonctionner ensemble.
• Adaptabilité :
  Le Web doit pouvoir s'adapter aux futures technologies (mobiles, la télévision numérique, etc.).
• Universalité :
  Le Web doit être accessible à tous quelque soit la culture ou l'handicap.
• Evolution :
  Le Web doit être un espace vivant facile à mettre à jour.
• Décentralisation :
  L'architecture du Web comme l'Internet ne dépend pas d'une structure centralisée

Caractéristiques des pages Web

• Langages spécifiés par des recommandations du W3C
• Plusieurs implémentations de serveurs et de clients Web
• Liens hypertexte
• HTML est un langage simple avec une présentation par défaut
• Séparation du contenu (HTML) de la forme (CSS) pour permettre l'adaptation aux handicaps et aux contraintes matérielles
• Support de l'internationalisation pour s'adapter aux différentes langues

Avantages sur les autres formats

Le protocole HTTP permet d'échanger d'autres formats (PDF, Java, Flash), mais ces formats n'ont pas les caractéristiques requises

• Exemple PDF :

  PDF fixe la formatage du document.
  Comment le restituer sur un écran de téléphone ou sur un terminal braille ?

• Avec HTML :

  La présentation peut être adaptée sans changer le contenu du document
  La structure définie peut être utilisée pour découper l'information en plus petits modules

Evolution du format HTML

• La structure de présentation (center, font, color, background) est remplacée par des propriétés CSS
• Nécessité de filtrer et transformer de façon automatique des documents
  -> structuration plus contrainte avec XHTML
• Besoin d'enrichissement et de modularisation
  • MathML pour représenter les formules mathématiques
  • SVG (Scalable Vector Graphics) pour le graphique vectoriel
  • SMIL pour le multimédia et l'animation
  • RDF pour les méta-données
  • XML pour d'autres espaces de noms

Un document Web devient un document composite
(SVG, lion, logo, XHTML+MathML+SVG, XHTML+SVG, XML+...)

Créer des pages Web

• Produire des documents valides
  "Il vaut mieux du HTML 4 correct que du XHTML mal formé"
• Caractériser correctement le document : DOCTYPE, espace de nom, codage
• Rendre la présentation optionnelle
• Ne pas utiliser du JavaScript pour naviguer
• Rendre ses documents accessibles en n'utilsant pas les frames
• Fournir des textes alternés pour les images, les graphiques, les vidéos

Intérêt d'un éditeur structuré

HTML comme les autres langages XML définissent une structure

• Elements : Définition de sémantique (rôle) même si cette sémantique est proche du niveau de la présentation

  Par exemple les éléments H1 et H2 ont un effet de présentation mais donnent aussi une information sémantique

  De même un lien (ancre + href) définit plus qu'un simple texte coloré/souligné

• Attributs : Caractérisation sémantique

  Division avec un attribut class="section", la cible d'un lien href="http://www.w3.org/"

Comment est né Amaya ?

Projet de recherche Opéra (Inria Rhône-Alpes - IRISA)

Modèles de documents et l'utilisation des modèles pour manipuler les documents

Editeur expérimental : Grif puis Thot

1994 : Intégration d'une librairie de navigation à l'éditeur expérimental

1996 : Développement d'Amaya comme démonstrateur et base expérimentation pour le W3C

Depuis : Evolution vers un outil auteur pour le Web

Principales caractéristiques

• A la fois éditeur et navigateur
• Open Source et multi plates-formes (Linux, Windows, MacOS X)
• Plusieurs vues synchronisées
• Fonctions d'édition avancées
• Prend en charge l'édition des liens
• Aide à la mise au point des CSS
• Support de MathML et SVG
• Système d'annotation

Navigation et publication

Possibilité d'aller chercher d'autres pages pendant l'édition

Possibilité de publier directement sur un serveur HTTP

• Prise en compte des images
• Réévaluation des liens
• Possibilité de changer l'encodage

Les vues

Plusieurs points de vue sur le document

• La vue structure
• La vue alternée
• La vue des liens
• La vue table des matières

Edition de la structure

• Structuration « a priori »
• Structuration « a posteriori »
• La sélection structurée et le copier/coller
• Les transformations de structure
• Strong, Emphasis, etc.

Exemple

Edition des liens

Les liens jouent un rôle important dans le Web

• Vérification des liens entre pages Web
• Génération automatique des cibles (attributs name et id)
• Création et mise à jour des liens
• Calcul automatique des URLs relatives

Edition des feuilles de style CSS

• Quelques menus d'aide (Style des caractères, Couleurs, Formats0
• Identification des règles appliquées
• Ajout, retrait
• Edition textuelle
• Synchronisation

all.htm talk.css

Edition de formules mathématiques

• Palette de constructions et de symboles
• Restructuration du texte saisi « a posteriori »
• Transformations

Autres outils

• Correcteur orthographique
• Date de mis à jour
• Numérotation des sections
• Création d'une table des matières
• Système d'annotations

Futurs travaux

• Performances
• Version MacOS X native
• Support complet de CSS 2.1
• Edition des graphiques SVG

http://www.w3.org/Amaya