Présentation

  • Nouvelles méthodes de développement web

    avec les technologies centrées document

    du projet européen Palette à la création d'Oppidoc

  • Remerciements :

Partie I

  • Édition des documents

    Le navigateur comme plateforme d'édition

Document structuré

  • Mise en forme de l'information suivant une structure

    • La structure dépend du support ou de l'utilisation
  • Structure(s) Physiques

  • Structure(s) Logiques

Sur le web...

  • Les documents sont représentés au niveau de la typographie et de la mise en forme

    • HTML
    • Pourtant ils contiennent des données structurées
  • Notion de document semi-structuré

Encoder les documents

  • XML

    "XML is about creating documents in which the content is delimited, or set apart, by tags that explain the meaning of each piece of content. With XML, documents can become a source of information as rich as a database, enabling search, processing, and reuse."

  • Jean Paoli, co-éditeur de la recommandation XML 1.0 (source)

Exemple Niveau Physique

  • <html>
      <body>
        <h1>La « neuro-amélioration » passée au crible du comité d’éthique</h1>
        <div class="Subheadline">
          <p>Par Hervé Morin</p>
          <p><i>Mis à jour le 12.02.2014 à 16h59</i></p>
        </div>
        <div>
          <p>Dans son avis n° 122, rendu public mercredi 12 février, le Comité
           consultatif national d’éthique (CCNE) examine les enjeux du « recours
          aux techniques biomédicales en vue de “neuro-amélioration” chez la
          personne non malade ». De quoi s’agit-il ? De l’emploi de médicaments
          (anxiolytiques, antidépresseurs, stimulants cognitifs…) ou de la
          stimulation cérébrale transcrânienne pour améliorer les performances
          cognitives de tout un chacun.</p>
          <p><a href="http://www.lemonde.fr/2011/12/16/dasc.html">Des aimants 
          pour soigner le cerveau</a></p>
        </div>
    </html>

Exemple Niveau Logique

  • <Document>
      <Title>La « neuro-amélioration » passée au crible du comité d’éthique</Title>
      <Author>Hervé Morin</Author>
      <Publication>
        <Date>12/02/2014</Date>
        <Time>16:59</Time>
      </Publication>
      <Article>
        <Para>Dans son avis n° 122, rendu public mercredi 12 février, le Comité
         consultatif national d’éthique (CCNE) examine les enjeux du « recours aux
         techniques biomédicales en vue de “neuro-amélioration” chez la personne
         non malade »...</Para>
      </Article>
      <Link>
        <Target>http://www.lemonde.fr/2011/12/16/dasc.html</Target>
        <Anchor>Des aimants pour soigner le cerveau</Anchor>
      </Link>
    </Document>

Pourquoi structurer ?

  • Recherche

    Ex: retrouver les questions posées au gouvernement à l'assemblée nationale entre mai et décembre 2013 sur la sécurité des données ou le droit à la vie privée

  • Réutilisation

    Ex: créer le rapport final sur le projet en combinant la section sur l'étude de cas de la demande de de financement, le document sur la décision de financement, et la section sur l'analyse des questionnaires de satisfaction sur le document de retour d'expérience, générer un eBook et un PDF

  • Capitalisation

    Ex: analyser l'évolution des menus de la cantine sur ces 3 dernières années, vérifier l'équilibre entre les viandes et les poissons

  • Cas particuliers des documents exécutables

    Certains documents sont de nature à être traité informatiquement pour générer des applications ou piloter des processus :

    • Spécifications de tests, questionnaires, Quiz, etc.
    • Spécifications de logiciels
    • Configurations d'équipements

Notre projet initial

  • Le projet FP6 Palette

    “Développer des services pour l'apprentissage dans les communautés de pratiques”

  • Extrait du site Cordis

    • Strategic objective: Technology-enhanced Learning
    • Start date: 1 February 2006
    • Duration: 36 months
    • EU funding: € 6 000 000
    • Number of partners: 14
    • Project coordinator: GEIE ERCIM, Sophia Antipolis, France
    • Scientific coordinator: Christine Vanoirbeek, EPFL, Suisse

Lien avec l'édition de documents

  • Les communautés de pratique produisent des artefacts

  • En particulier des documents

    Exemple de rapport d'observation d'une classe

Sous-utilisation des documents

  • Les documents sont créés avec Microsoft Word ou autres éditeurs orientés page

  • Les données sont très peu exploitées

    • pas ou peu de réutilisation (copier / coller)
    • pas d'outils de recherche
    • obstacle à la capitalisation des connaissances
  • Objectif : encourager les communautés à structurer leurs documents

    • contraindre la saisie sans l’alourdir
    • avec une solution facile à mettre en oeuvre pour que les communautés puissent créer leurs modèles de documents

La solution de L'INRIA

  • Saisie contrainte par un template de document défini dans un langage XTiger

  • Le langage de spécification est de complexité moindre que XML Schema

  • Fonctionnalité intégrée dans le navigateur Amaya

  • Le navigateur Amaya sert également d'éditeur de template XTiger

Alternative Formulaire

  • Structures de données "plates" (clefs - valeurs)

Alternative Wiki

  • Modèle de sortie limité à HTML

  • Syntaxe wiki rébarbative

Alternative Éditeur d'arbre

  • Pour utilisateurs avertis

    Exemple Oxygen Editor

Alternative WYSIWYG

  • Saisie contrainte par un schéma XML

    • Nécessite des compétences pointues pour créer un éditeur
  • Exemple Xopus vue WYSIWYG

    Vue source XML

Barrières d'adoption à Amaya

  • L'installation d'une nouvelle application

  • La concurrence avec les navigateurs récents

  • La concurrence avec les outils bureautiques WYSISYG

  • La surexposition de concepts trop bas niveau

    • <balise>
    • @attribut

L'idée germe...

  • Contexte 2008 : montée en puissance de Javascript dans les navigateurs web

  • Porter XTiger en Javascript dans un navigateur Web

    • pour éviter d'avoir à installer un navigateur spécifique
  • Premiers prototypes prometteurs avec des stagiaires

  • Des interprétations divergentes sur la spécification XTiger entrainent l'écriture d'une nouvelle spécification

  • La librairie s'appellera AXEL (Adaptable XML Editing Library)

La librairie AXEL

  • Tout en Javascript sans utiliser d'autres librairies (Prototype, jQuery, etc.)

  • éditeur de démonstration pour tester les templates de documents

Fonctionnement de la librairie AXEL

Le langage XTiger XML

Template XTiger XML minimal

  • <?xml version="1.0" encoding="UTF-8"?>
    <html xmlns="http://www.w3.org/1999/xhtml"
          xmlns:xt="http://ns.inria.org/xtiger">
    <head>
     <xt:head label="Document">
       <xt:component name="t_friend"> 
         <li><xt:use types="text">nom</xt:use><xt:menu-marker/></li>
       </xt:component>
     </xt:head> 
    </head>
    <body>
     <h1>Liste des invités :</h1>
     <ul> 
       <xt:repeat minOccurs="0" maxOccurs="*" label="Invites">
         <xt:use types="t_friend" label="Nom"/>
       </xt:repeat>
     </ul>
    </body> 
    </html>
  • Exemples de document généré :

    <Document>
      <Invites>
        <Nom>Charlie</Nom>
        <Nom>Oscar<Nom>
      </Invites>
    </Document>
  • Le voir en action

Utilisation de AXEL

  • 1 fichier Javascript (axel.js) et 1 fichier css à inclure (axel.css)

    • + 1 répertoire de resources (bundles) à mettre à disposition
  • 3 cas pour éditer un document dans une page

    • La page est déjà un template XTiger XML
    • La page contient un élément div dans lequel on va charger un template XTiger XML séparé
    • La page contient un élément iframe qui contient le template XTiger XML séparé
  • Fonctions pour

    • Lire un document XML et de le charger dans l'éditeur
    • Linéariser le contenu en cours d'édition pour l'envoyer sur un serveur
  • Opérations accessibles via un objet $axel

    • Familier pour les développeurs habitués à jQuery

API Javascript

  • Extrait de template

    <div id="editor">
      <p>
        <xt:use types="text" label="Text">Hello</xt:use>
        <xt:use types="text" label="Text">World</xt:use>
      </p>
    </div>
  • Manipulation de son contenu XML avec $axel(selecteur)

    >>> $axel('#editor').transform()
    >>> $axel('#editor').xml()
    "<data>
      <Text>Hello</Text>
      <Text>World</Text>
    </data>
    "
    >>> $axel('#editor').text()
    "Hello World"

L'idée se développe...

  • 2009 : à l'issue du projet l'un des partenaires propose un défi pour continuer

    • Reproduire un document Word de spécification de questionnaires
    • Épargner la phase de conversion en XML
  • 2010 : projet CTI (~ ANR) pour travailler 1 an avec la startup Madeinlocal

Démonstrations

Notes

  • Importance de la license open source

    • Condition pour faire vivre le projet
  • Très nombreuses licences

    • GPL, BSD, MIT, Apache, etc.
    • Se distinguent par le degré de contagion
  • Gestion d'une communauté open source

    • Dépots de code
    • Listes de diffusion

Partie II

  • Développement complet d'applications web

    La pile XML

Transformation des technos documents

  • À l'origine du texte mis en forme (XML) pour

    • servir de source unique (single source)
    • pour publier sur plusieurs canaux (cross-media publishing)
    • avec l'aide de langages de transformation (CSS, XSLT)
  • Puis les documents textuels deviennent de véritables bases de données

    • pour supporter des traitements sémantiques
    • avec l'aide de langages d'interrogation (XPath, XQuery)
    • les catalogues de données deviennent des collections de documents
  • Finalement les bases de données XML deviennent des plateformes de développement web...

Plateformes de développement

  • Suivant les cas

    • Bases de données natives XML
    • Moteurs XQuery avec des connecteurs pour différents systèmes de stockage
  • Livre en cours de parution chez O'Reilly

Architecture XRX

  • Saisie et présentation des données avec XForms

    • dans notre cas remplacé par AXEL
  • Intégration du serveur web avec la base de données

    • architecture 2/3
    • système de routage des URLs pour créer des architectures REST
    • modules XQuery pour interagir avec les requêtes et les réponses HTTP
  • Développement des applications en XQuery

Bénéfices

  • Pas de perte dans la chaine de développement

    • Plus de conversion entre XML et d'autres formats (JSON, etc.)
  • Approche orientée modèle implicite

    • XML très facile pour produire des langages de haut niveau (DSL)
    • Génération automatique de code
  • Avec ou sans validation des données

    • Possiblité de travailler sans validation (schema-less)

Limitations actuelles

  • Complexité de la mise en oeuvre de XForms

    • N'a jamais été directement intégré dans les navigateurs web
    • Conçu pour les formulaires et moins à l'aise avec les données moins régulières
  • Interopérabilité partielle entre les différentes plateformes

    • Le groupe de travail W3C EXPath Community Group y pourvoit
    • Publication de recommandations pour les modules XQuery
  • Peu de framework de développement d'application

  • Nous avons décidé de créer notre propre framework : Oppidum

    et de remplacer XForms par AXEL

Oppidum : Principes

  • L'application web est modélisée dans un unique fichier XML

    le mapping associe chaque ressource REST de l'application avec un pipeline de rendu

Oppidum : le Pipeline

  • Maximum de 3 étapes

    • le modèle est un script XQuery
    • la vue est une transformation XSLT
    • l'épilogue est un script XQuery
  • Exemple

Oppidum : Modèle d'exécution

  • moteur d'exécution "2-temps"

Oppidum : Gabarit de page

  • Application du modèle de pipeline en 3 étages

  • Exemple de Gabarit

    <html xmlns="http://www.w3.org/1999/xhtml"
         xmlns:site="http://oppidoc.com/oppidum/site">
      <body>
        <div id="article">
          <site:content/>
        </div>
      </body>
    </html>

Exemple de flux

  • Sortie du modèle

    <Document>
      <Parag>Hello World</Parag>
    </Document>
  • Sortie de la vue

    <site:view>
      <site:content>
        <p>Hello World</p>
      </site:content>
    </site:view>
  • Sortie de l'épilogue

    <html xmlns="http://www.w3.org/1999/xhtml">
      <body>
        <div id="article">
          <p>Hello World</p>
        </div>
      </body>
    </html>

Une application d'édition en 6 pipelines

  • Édition d'article (lien local)

Réalisations

  • Édition / publication

    • chaine de traitement XML complète sur le Web (Web2Print)
    • réduction du coût de production d'une newsletter papier / digitale
  • Catalogues / annuaires

    • saisie contrôlée pour respecter une charte graphique
    • fonctionnalités additionnelles standards ou sur-mesure suivant les besoins (formulaires d'inscription et génération des badges ou des listes d'émargement, gestion de petites annonces modérées, etc.)
  • Dématérialisation de processus

    • exploitation complète de la valeur du contenu des documents pour des processus métiers dans une entreprise

Focus

  • Éditeur de la newsletter Focus de la plateforme innovation platinn

    • chaine éditoriale complète pour l'impression (diffusion papier 2000 exemplaires)
    • conversion HTML + CSS vers PDF avec Prince pour tirage offset 2 couleurs
  • démonstration le jour de la présentation

Alliance

  • Site web de l'Association Alliance

    • catalogue de programmes de manifestations et de fiches projets
    • chaine éditoriale avec gestion des inscriptions jusqu'à l'impression des badges
  • démonstration le jour de la présentation

UAP

  • démonstration le jour de la présentation

PSE

  • Anuaire du Parc Scientifique de l'EPFL

    • catalogue de startups
    • site et contenu multilingues et moteur de recherche (Apache Lucene)
    • génération de courriers de relance pour inciter les entreprises à rédiger
    • exportation JSON vers un réseau d'écrans d'affichage dans les batiments

Dématérialisation de processus

  • Applications métiers

    • Nombreux modèles de documents
    • Documents hybrides texte et formulaires
    • Champs calculés et champs contraints
    • Formulaires purs (ex: masque de recherche)
  • Modèles de données semi-structurées parfaitement adaptés

    • Attention à la duplication des données
    • Notion de transclusion (copies mortes ou vivantes)
  • L'extension de la librairie AXEL est en cours pour couvrir les besoins liés aux formulaires

    Exemple :

Conclusion

  • Oppidoc : de la recherche académique aux produits

    • 3 ans pour innover dans la cadre de projets université - industrie (2008 - 2010)
    • 3 ans pour industrialiser avec l'aide de clients pioneers (2011 - 2013)
  • XML n'a jamais été aussi simple à mettre en oeuvre

    • La saisie de documents structurés n'est plus un verrou
    • Les technologies de l'ingénierie documentaire (XSLT, XPath, XQuery) peuvent servir à créer une large gamme d'applications
  • La nouvelle pile de développement XRX est en train de devenir une alternative aux langages procéduraux

    • Poussée par la vague noSQL et le Big Data (schema-less database)
    • Idéale partout où un mélange de données structurées et semi-structurées est en jeu