Upload
stsire
View
192
Download
2
Embed Size (px)
DESCRIPTION
Présentation donnée le 19 février 2014 aux journées des professionnels du numérique organisée par le CESR de Tours
Citation preview
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
démonstration le jour de la présentation
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
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é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