nouvelles méthodes de développement web avec les technologies centrées document

MEDIA researchgroup

Projet WAM Centre derecherche HenriTudor

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

Par Stéphane Sire

www.oppidoc.fr

Présentation donnée le 19 février 2014 aux journées des professionnels dunumérique organisée par le CESR de Tours

Remerciements :

Partie I

Édition des documents

Le navigateur comme plateforme d'édition

Structure(s) Physiques Structure(s) Logiques

Document structuré

Mise en forme de l'information suivant une structure

La structure dépend du support ou de l'utilisation

“On the left, what browsers see. On the right, what humans see. Can we bridge thegap so browsers see more of what we see?”

Source : RDFa 1.1 Primer Rich Structured Data Markup for Web Documents

Sur le web...

Les documents sont représentés au niveau de la typographie et de la miseen forme

HTML

Pourtant ils contiennent des données structurées

Notion de document semi-structuré

question augouvernement

menu de cantine

agenda culturel

Encoder les documents

XML

"XML is about creating documents in which the content is delimited, or setapart, 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, enablingsearch, processing, and reuse."

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

Extensible Markup Language (XML) 1.0 - Recommendation W3C

1998 : Première édition

2008 : Cinquième édition

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 nationaleentre mai et décembre 2013 sur la sécurité des données ou le droit à la vieprivée

Réutilisation

Ex: créer le rapport final sur le projet en combinant la section sur l'étude de casde 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 deretour 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 pourgé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 depratiques”

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 éditeursorienté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 puissentcréer leurs modèles de documents

La solution de L'INRIA

Saisie contrainte par un template de document défini dans un langageXTiger

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 navigateursweb

Porter XTiger en Javascript dans un navigateur Webpour éviter d'avoir à installer un navigateur spécifique

Premiers prototypes prometteurs avec des stagiaires

Des interprétations divergentes sur la spécification XTiger entrainentl'écriture d'une nouvelle spécification

XTiger XML

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 librairieAXEL

Le langage XTiger XML

Template XTiger XML minimal

Exemples de document généré :

Le voir en action

<?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>

<Document> <Invites> <Nom>Charlie</Nom> <Nom>Oscar<Nom> </Invites></Document>

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 XTigerXML séparé

La page contient un élément iframe qui contient le template XTiger XMLsé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

Manipulation de son contenu XML avec $axel(selecteur)

<div id="editor"> <p> <xt:use types="text" label="Text">Hello</xt:use> <xt:use types="text" label="Text">World</xt:use> </p></div>

>>> $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 pourcontinuer

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

Intégration dans un environnement de production Ruby on Rails

Nouvelles questions soulevées par la pratique (évolution de schémas)

Authoring XML all the Time, Everywhere and by Everyone avec V. Quint, C.Roisin et C. Vanoirbeek, présenté à XML Prague 2010

Démonstrations

Un éditeur de Quizz

Cette présentation a été créée avec un template XTiger XML

Voir sur les sites de diffusion de la librairie

Éditeur de démonstration AXEL : ssire.github.io/axel/editor/editor.xhtml

Éditeur de démonstration AXEL-FORMS : ssire.github.io/axel-forms/editor/editor.xhtml

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 technosdocuments

À 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 dedéveloppement web...

Projet open source eXist-DB

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

Alternatives ...

MarcLogic

BaseX

Zorba

Qizx (aquis récemment par Qualcomm)

Livre en cours de parution chezO'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

XRX introduit par Dan McCreary en 2008

Sigle du wikibook Web Development with XRX

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

RESTXQ

EXPath

Orbeon Forms

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 derendu

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

Sortie de la vue

Sortie de l'épilogue

<Document> <Parag>Hello World</Parag></Document>

<site:view> <site:content> <p>Hello World</p> </site:content></site:view>

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

Édition d'article (lien local)

Une application d'édition en 6pipelines

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 processusmé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


UAP

Site web de l'Union des Artisans du Patrimoine de Belgique

catalogue de membres

gestion de petites annonces modérées réservées aux membres


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ésaux 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) peuventservir à créer une large gamme d'applications

La nouvelle pile de développement XRX est en train de devenir unealternative 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 enjeu