SlideShare une entreprise Scribd logo
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 du
numérique organisée par le CESR de Tours
Remerciements :

MEDIA research
group

Projet WAM

Centre de
recherche Henri
Tudor
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

“On the left, what browsers see. On the right, what humans see. Can we bridge the
gap 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 mise
en forme
HTML
Pourtant ils contiennent des données structurées

agenda culturel
question au
gouvernement

menu de cantine

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

Projet open source eXist-DB

Livre en cours de parution chez
O'Reilly
Alternatives ...
MarcLogic
BaseX
Zorba
Qizx (aquis récemment par Qualcomm)
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

Sigle du wikibook Web Development with XRX
XRX introduit par Dan McCreary en 2008
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 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
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é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

Contenu connexe

En vedette

Disco De Inicio
Disco De InicioDisco De Inicio
Disco De Inicio
javiraulhector
 
Conclusiones Talis
Conclusiones TalisConclusiones Talis
Conclusiones Talis
Educación
 
Diapositiva
DiapositivaDiapositiva
Diapositiva
sotocerros
 
Presentacion Final
Presentacion FinalPresentacion Final
Presentacion Final
David Leon Bravo
 
LE DICTIONNAIRE DES CHAMPS SÉMANTI-QUES DANS LA TRADITION DE LA LANGUE ESPAG...
LE DICTIONNAIRE DES CHAMPS SÉMANTI-QUES DANS LA TRADITION DE LA  LANGUE ESPAG...LE DICTIONNAIRE DES CHAMPS SÉMANTI-QUES DANS LA TRADITION DE LA  LANGUE ESPAG...
LE DICTIONNAIRE DES CHAMPS SÉMANTI-QUES DANS LA TRADITION DE LA LANGUE ESPAG...
EL ESPAÑOL Y OTRAS LENGUAS
 
Maestro
MaestroMaestro
GuíA Definitiva De Carolina Madrigal
GuíA Definitiva De Carolina MadrigalGuíA Definitiva De Carolina Madrigal
GuíA Definitiva De Carolina Madrigal
MCMDWJFM
 
09 Indicateurs Economie Numerique Ascel Presentation
09 Indicateurs Economie Numerique Ascel Presentation09 Indicateurs Economie Numerique Ascel Presentation
09 Indicateurs Economie Numerique Ascel PresentationEcobiz 37
 
DeArGe Mitteilungen 7/2000
DeArGe Mitteilungen 7/2000DeArGe Mitteilungen 7/2000
Linea Del Tiempo[1]
Linea Del Tiempo[1]Linea Del Tiempo[1]
Linea Del Tiempo[1]
gueste6ea63d
 
DeArGe Mitteilungen 10/2001
DeArGe Mitteilungen 10/2001DeArGe Mitteilungen 10/2001
DeArGe Mitteilungen 10/2001
Deutsche Ararchnologische Gesellschaft e.V.
 
Gratitud De Amigo
Gratitud De AmigoGratitud De Amigo
Gratitud De Amigo
hojitadepapel
 
Portafolio de evaluación
Portafolio de evaluaciónPortafolio de evaluación
Portafolio de evaluación
Ernesto Faerron
 
Tequila Y Sal
Tequila Y SalTequila Y Sal
Tequila Y Sal
hojitadepapel
 
Presentation Back To School2
Presentation Back To School2Presentation Back To School2
Presentation Back To School2
gueste772b91
 
Guía definitva de Carmen Moreno
Guía definitva de Carmen MorenoGuía definitva de Carmen Moreno
Guía definitva de Carmen Moreno
MCMDWJFM
 
Pointdufle site web
Pointdufle site webPointdufle site web
Pointdufle site web
Mademoiselle Williams
 
Einlaufen TSV Kronshagen
Einlaufen TSV KronshagenEinlaufen TSV Kronshagen
Einlaufen TSV Kronshagen
TSVKronshagen
 
la tecnologia
la tecnologiala tecnologia
la tecnologia
kikucha
 
Presentacion Der Informaticoderecho informatico
Presentacion Der Informaticoderecho informaticoPresentacion Der Informaticoderecho informatico
Presentacion Der Informaticoderecho informatico
Marcio Valiente
 

En vedette (20)

Disco De Inicio
Disco De InicioDisco De Inicio
Disco De Inicio
 
Conclusiones Talis
Conclusiones TalisConclusiones Talis
Conclusiones Talis
 
Diapositiva
DiapositivaDiapositiva
Diapositiva
 
Presentacion Final
Presentacion FinalPresentacion Final
Presentacion Final
 
LE DICTIONNAIRE DES CHAMPS SÉMANTI-QUES DANS LA TRADITION DE LA LANGUE ESPAG...
LE DICTIONNAIRE DES CHAMPS SÉMANTI-QUES DANS LA TRADITION DE LA  LANGUE ESPAG...LE DICTIONNAIRE DES CHAMPS SÉMANTI-QUES DANS LA TRADITION DE LA  LANGUE ESPAG...
LE DICTIONNAIRE DES CHAMPS SÉMANTI-QUES DANS LA TRADITION DE LA LANGUE ESPAG...
 
Maestro
MaestroMaestro
Maestro
 
GuíA Definitiva De Carolina Madrigal
GuíA Definitiva De Carolina MadrigalGuíA Definitiva De Carolina Madrigal
GuíA Definitiva De Carolina Madrigal
 
09 Indicateurs Economie Numerique Ascel Presentation
09 Indicateurs Economie Numerique Ascel Presentation09 Indicateurs Economie Numerique Ascel Presentation
09 Indicateurs Economie Numerique Ascel Presentation
 
DeArGe Mitteilungen 7/2000
DeArGe Mitteilungen 7/2000DeArGe Mitteilungen 7/2000
DeArGe Mitteilungen 7/2000
 
Linea Del Tiempo[1]
Linea Del Tiempo[1]Linea Del Tiempo[1]
Linea Del Tiempo[1]
 
DeArGe Mitteilungen 10/2001
DeArGe Mitteilungen 10/2001DeArGe Mitteilungen 10/2001
DeArGe Mitteilungen 10/2001
 
Gratitud De Amigo
Gratitud De AmigoGratitud De Amigo
Gratitud De Amigo
 
Portafolio de evaluación
Portafolio de evaluaciónPortafolio de evaluación
Portafolio de evaluación
 
Tequila Y Sal
Tequila Y SalTequila Y Sal
Tequila Y Sal
 
Presentation Back To School2
Presentation Back To School2Presentation Back To School2
Presentation Back To School2
 
Guía definitva de Carmen Moreno
Guía definitva de Carmen MorenoGuía definitva de Carmen Moreno
Guía definitva de Carmen Moreno
 
Pointdufle site web
Pointdufle site webPointdufle site web
Pointdufle site web
 
Einlaufen TSV Kronshagen
Einlaufen TSV KronshagenEinlaufen TSV Kronshagen
Einlaufen TSV Kronshagen
 
la tecnologia
la tecnologiala tecnologia
la tecnologia
 
Presentacion Der Informaticoderecho informatico
Presentacion Der Informaticoderecho informaticoPresentacion Der Informaticoderecho informatico
Presentacion Der Informaticoderecho informatico
 

Similaire à Nouvelles méthodes de développement web avec les technologies centrées document

Les chaines éditoriales : de la théorie à la pratique
Les chaines éditoriales : de la théorie à la pratiqueLes chaines éditoriales : de la théorie à la pratique
Les chaines éditoriales : de la théorie à la pratique
OumMohssine
 
Mise en place d'archives ouvertes: mesures pratiques
Mise en place d'archives ouvertes: mesures pratiquesMise en place d'archives ouvertes: mesures pratiques
Mise en place d'archives ouvertes: mesures pratiques
Iryna Kuchma
 
PowerPoint sur le Web 2.0
PowerPoint sur le Web 2.0PowerPoint sur le Web 2.0
PowerPoint sur le Web 2.0guest4ca1b
 
Slideshare - Web 2.0
Slideshare - Web 2.0Slideshare - Web 2.0
Slideshare - Web 2.0agirard003
 
Le Web 2.0
Le Web 2.0Le Web 2.0
Le Web 2.0
clemdups
 
Captronic grenoble 01102014 version presentee
Captronic grenoble 01102014 version presenteeCaptronic grenoble 01102014 version presentee
Captronic grenoble 01102014 version presentee
Patrick MOREAU
 
Projet Domurpic
Projet DomurpicProjet Domurpic
Projet Domurpic
Sébastien Letélié
 
Projets collaboratifs : faites la difference avec Confluence !
Projets collaboratifs : faites la difference avec Confluence !Projets collaboratifs : faites la difference avec Confluence !
Projets collaboratifs : faites la difference avec Confluence !
Ideo - Groupe Netapsys
 
Arte utilise Acquia Cloud pour héberger ses plateformes web
Arte utilise Acquia Cloud pour héberger ses plateformes webArte utilise Acquia Cloud pour héberger ses plateformes web
Arte utilise Acquia Cloud pour héberger ses plateformes web
Acquia
 
Scenari4 fabienne droullours eleanring expo
Scenari4 fabienne droullours eleanring expoScenari4 fabienne droullours eleanring expo
Scenari4 fabienne droullours eleanring expoHusson Anne-Marie
 
Scenari4 fabienne droullours eleanring expo
Scenari4 fabienne droullours eleanring expoScenari4 fabienne droullours eleanring expo
Scenari4 fabienne droullours eleanring expoHusson Anne-Marie
 
Structures hybrides : l'apport des infrastructures libres aux moteurs de rech...
Structures hybrides : l'apport des infrastructures libres aux moteurs de rech...Structures hybrides : l'apport des infrastructures libres aux moteurs de rech...
Structures hybrides : l'apport des infrastructures libres aux moteurs de rech...Aref Jdey
 
Drupal et les Systèmes de gestion de contenu
Drupal et les Systèmes de gestion de contenuDrupal et les Systèmes de gestion de contenu
Drupal et les Systèmes de gestion de contenuMario Marcello Verona
 
WEB 2.0 pour le jumelage tunisie
WEB 2.0 pour le jumelage tunisieWEB 2.0 pour le jumelage tunisie
WEB 2.0 pour le jumelage tunisie
Salvatore Marras
 
25emes journées du_rndh_atelier_ff19-10-2012
25emes journées du_rndh_atelier_ff19-10-201225emes journées du_rndh_atelier_ff19-10-2012
25emes journées du_rndh_atelier_ff19-10-2012URFIST de Paris
 
Production logicielle, outils et pratiques
Production logicielle, outils et pratiquesProduction logicielle, outils et pratiques
Production logicielle, outils et pratiques
Johan Moreau
 
Atelier documentaire du chercheur à l'INRIA
Atelier documentaire du chercheur à l'INRIAAtelier documentaire du chercheur à l'INRIA
Atelier documentaire du chercheur à l'INRIAADBSAquidoc
 

Similaire à Nouvelles méthodes de développement web avec les technologies centrées document (20)

Les chaines éditoriales : de la théorie à la pratique
Les chaines éditoriales : de la théorie à la pratiqueLes chaines éditoriales : de la théorie à la pratique
Les chaines éditoriales : de la théorie à la pratique
 
Mise en place d'archives ouvertes: mesures pratiques
Mise en place d'archives ouvertes: mesures pratiquesMise en place d'archives ouvertes: mesures pratiques
Mise en place d'archives ouvertes: mesures pratiques
 
PowerPoint sur le Web 2.0
PowerPoint sur le Web 2.0PowerPoint sur le Web 2.0
PowerPoint sur le Web 2.0
 
Slideshare - Web 2.0
Slideshare - Web 2.0Slideshare - Web 2.0
Slideshare - Web 2.0
 
Le Web 2.0
Le Web 2.0Le Web 2.0
Le Web 2.0
 
Web 2.0
Web 2.0Web 2.0
Web 2.0
 
Captronic grenoble 01102014 version presentee
Captronic grenoble 01102014 version presenteeCaptronic grenoble 01102014 version presentee
Captronic grenoble 01102014 version presentee
 
Projet Domurpic
Projet DomurpicProjet Domurpic
Projet Domurpic
 
Projets collaboratifs : faites la difference avec Confluence !
Projets collaboratifs : faites la difference avec Confluence !Projets collaboratifs : faites la difference avec Confluence !
Projets collaboratifs : faites la difference avec Confluence !
 
Arte utilise Acquia Cloud pour héberger ses plateformes web
Arte utilise Acquia Cloud pour héberger ses plateformes webArte utilise Acquia Cloud pour héberger ses plateformes web
Arte utilise Acquia Cloud pour héberger ses plateformes web
 
Scenari4 fabienne droullours eleanring expo
Scenari4 fabienne droullours eleanring expoScenari4 fabienne droullours eleanring expo
Scenari4 fabienne droullours eleanring expo
 
Scenari4 fabienne droullours eleanring expo
Scenari4 fabienne droullours eleanring expoScenari4 fabienne droullours eleanring expo
Scenari4 fabienne droullours eleanring expo
 
Structures hybrides : l'apport des infrastructures libres aux moteurs de rech...
Structures hybrides : l'apport des infrastructures libres aux moteurs de rech...Structures hybrides : l'apport des infrastructures libres aux moteurs de rech...
Structures hybrides : l'apport des infrastructures libres aux moteurs de rech...
 
Présentation cice telos
Présentation cice   telosPrésentation cice   telos
Présentation cice telos
 
Drupal et les Systèmes de gestion de contenu
Drupal et les Systèmes de gestion de contenuDrupal et les Systèmes de gestion de contenu
Drupal et les Systèmes de gestion de contenu
 
WEB 2.0 pour le jumelage tunisie
WEB 2.0 pour le jumelage tunisieWEB 2.0 pour le jumelage tunisie
WEB 2.0 pour le jumelage tunisie
 
Le projet NEEO
Le projet NEEOLe projet NEEO
Le projet NEEO
 
25emes journées du_rndh_atelier_ff19-10-2012
25emes journées du_rndh_atelier_ff19-10-201225emes journées du_rndh_atelier_ff19-10-2012
25emes journées du_rndh_atelier_ff19-10-2012
 
Production logicielle, outils et pratiques
Production logicielle, outils et pratiquesProduction logicielle, outils et pratiques
Production logicielle, outils et pratiques
 
Atelier documentaire du chercheur à l'INRIA
Atelier documentaire du chercheur à l'INRIAAtelier documentaire du chercheur à l'INRIA
Atelier documentaire du chercheur à l'INRIA
 

Nouvelles méthodes de développement web avec les technologies centrées document

  • 1. 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 du numérique organisée par le CESR de Tours Remerciements : MEDIA research group Projet WAM Centre de recherche Henri Tudor
  • 2. Partie I Édition des documents Le navigateur comme plateforme d'édition
  • 3. 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 “On the left, what browsers see. On the right, what humans see. Can we bridge the gap so browsers see more of what we see?” Source : RDFa 1.1 Primer Rich Structured Data Markup for Web Documents
  • 4. 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 agenda culturel question au gouvernement menu de cantine Notion de document semi-structuré
  • 5. 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) Extensible Markup Language (XML) 1.0 - Recommendation W3C 1998 : Première édition 2008 : Cinquième édition
  • 6. 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>
  • 7. 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>
  • 8. 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
  • 9. 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
  • 10. 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
  • 11. 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
  • 12. 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
  • 13. Alternative Formulaire Structures de données "plates" (clefs - valeurs)
  • 14. Alternative Wiki Modèle de sortie limité à HTML Syntaxe wiki rébarbative
  • 15. Alternative Éditeur d'arbre Pour utilisateurs avertis Exemple Oxygen Editor
  • 16. 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
  • 17. 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
  • 18. 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 XTiger XML La librairie s'appellera AXEL (Adaptable XML Editing Library)
  • 19. La librairie AXEL Tout en Javascript sans utiliser d'autres librairies (Prototype, jQuery, etc.) éditeur de démonstration pour tester les templates de documents
  • 20. Fonctionnement de la librairie AXEL
  • 22. 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
  • 23. 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
  • 24. 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"
  • 25. 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 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
  • 26. 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
  • 27. 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
  • 28. Partie II Développement complet d'applications web La pile XML
  • 29. 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...
  • 30. 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 Projet open source eXist-DB Livre en cours de parution chez O'Reilly Alternatives ... MarcLogic BaseX Zorba Qizx (aquis récemment par Qualcomm)
  • 31. 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 Sigle du wikibook Web Development with XRX XRX introduit par Dan McCreary en 2008
  • 32. 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)
  • 33. 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
  • 34. 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
  • 35. 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
  • 36. Oppidum : Modèle d'exécution moteur d'exécution "2-temps"
  • 37. 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>
  • 38. 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>
  • 39. Une application d'édition en 6 pipelines Édition d'article (lien local)
  • 40. 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
  • 41. 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
  • 42. 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
  • 43. 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
  • 44. 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
  • 45. 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 :
  • 46. 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