SlideShare a Scribd company logo
1 of 46
Download to read offline
Le futur de 

l’industrialisation du Web: 

l’ingénierie dirigée 

par les modèles
alain.vagner@tudor.lu / Apéro Web Nancy 2014
Complexité
Diversité
Braille
Qualité
Utilisabilité
Marketing
Perform
ance
Design émotionnel
UX
Sécurité
Robustesse
Design graphique
Référencement
Maintenabilité
Accessibilité
Rédactionnel
Industrialisation
Industrialisation du Web
Standards
Bonnes pratiques
Processus
Automatisation
Abstraction
Le futur !
2024
Ingénierie dirigée par les modèles
Modèles
Relations
Transformations
Ingénierie dirigée par les modèles
Modèles
Est représentée par
Conforme à
© Openstreetmap
Système étudié Modèle
Méta-modèle
CC Calmansi on Flick
“La trahison des images” - René Magritte
1948
Photo du
tableau
Tableau
représente
Une pipe
représente
“Tout est modèle”
2014
Ingénierie dirigée par les modèles
Modèles
Relations
Transformations
Ingénierie dirigée par les modèles
Relations
Transformations
JSON HTML5
ECMA 404
HTML5
W3C Spec
Conforme à Conforme à
Langage de
transfo.
Transformation
Conforme à
Transformations
Accueil
Affichage
Produit
Panier
Page Accueil
Navigation Wireframes
Page Produit
Page Panier
Relations
Zoning Wireframes Prototype
MoodBoard Style Tiles MockupsStyle
Structure
Comportement
Modèle Transfo. Relation
Schéma de
navigation
Inspiré de http://romy.tetue.net/990
Workflow de conception
Zoning Wireframes Prototype
MoodBoard Style Tiles MockupsStyle
Structure
Comportement
Schéma de
navigation
Design
patterns
Modèle Transfo. Relation
Références Schéma de
données
Style
Structure
Comportement
HTML
CSS
Images
JavaScript
Sitemap
Prototype
Mockups
Modèle Transfo. Relation
Génération de code
Schéma de
navigation
Zoning
Style
Structure
Comportement
Schéma de
navigation
Modèle Transfo. Relation
User
Stories
Existant Amont
Ingénierie dirigée par les modèles
Modèles
Relations
Transformations
La prophétie
Denis & Sloïm :
« L’intégrateur va enfin devoir aller au-delà de
la technique. […] Il aura rarement à produire du
code  : le cœur de son métier sera de choisir
des solutions. »
Intégration web, Les bonnes pratiques, Corinne Schillinger, 2012, Eyrolles.
http://openweb.eu.org/articles/integration-web-les-bonnes-pratiques
2012
Comment mettre en œuvre
l’ingénierie dirigée par les modèles ?
2014
Standardisation
Ubiquitous Application
Design Community Group
Model-Based User
Interfaces Working Group
Interaction Flow
Modeling Language
2014
Outils
http://www.eclipse.org/modeling/
2014
Eclipse Modeling Project
Éditeurs
2014
Graphiques
Textuels
Éditeurs
2014
Moteurs de Transformations
2014
Modèle à Modèle
Modèle vers Code
Moteurs de Transformations
2014
En conclusion
Prenez de la
hauteur !
Modélisez !
Vers des
modèles
productifs !
Les outils du futur,
la recherche du présent
Merci !
http://InteractionEngineering.github.io
Démo
51
Scénario
Génération d’interfaces Web à partir de modèles
Interfaces simples, formulaires CRUD / Mobile
Générer des variantes
Instance : Interface de recherche d’infos sur les
acteurs d’un film donné
52
Processus
53
Modèles
d'entrée
Modèles
d'entrée
Modèles
d'entrée
Modèles
intermédiaires
Appli Web
Archi de l’appli en sortie
54
BDD
graph
HTML,
CSS, JS
Neo4jJqueryMobile
http://localhost:7474
Ajax
Processus
55
1.Domaine
2.StateChart
3.Configuration
4.Layout
Interface
concrète
jQuery
Mobile
Code
56
La suite dans Eclipse…

More Related Content

Viewers also liked (12)

Portland, OR area Real Estate Summary Sept 2013
Portland, OR area Real Estate Summary Sept 2013Portland, OR area Real Estate Summary Sept 2013
Portland, OR area Real Estate Summary Sept 2013
 
Rules For Radicals Slide Summary For Afp Final
Rules For Radicals Slide Summary For Afp FinalRules For Radicals Slide Summary For Afp Final
Rules For Radicals Slide Summary For Afp Final
 
Attribuzione Causale1
Attribuzione Causale1Attribuzione Causale1
Attribuzione Causale1
 
Attribuzione Causale2
Attribuzione Causale2Attribuzione Causale2
Attribuzione Causale2
 
Literacy
LiteracyLiteracy
Literacy
 
Platform Description
Platform DescriptionPlatform Description
Platform Description
 
Tatsuo Nakajima
Tatsuo NakajimaTatsuo Nakajima
Tatsuo Nakajima
 
Concepts I Teach
Concepts I TeachConcepts I Teach
Concepts I Teach
 
Ichiro Satoh
Ichiro SatohIchiro Satoh
Ichiro Satoh
 
E Learning @ Qite
E Learning @ QiteE Learning @ Qite
E Learning @ Qite
 
DS Expo2009 Bfdv6
DS Expo2009 Bfdv6DS Expo2009 Bfdv6
DS Expo2009 Bfdv6
 
Atteggiamenti
AtteggiamentiAtteggiamenti
Atteggiamenti
 

Similar to Le Futur de l'industrialisation du Web: l'ingénierie dirigée par les modèles

AgileTour Toulouse 2012 : agilité, innovation utile au business !
AgileTour Toulouse 2012 : agilité, innovation utile au business !AgileTour Toulouse 2012 : agilité, innovation utile au business !
AgileTour Toulouse 2012 : agilité, innovation utile au business !
Agile Toulouse
 

Similar to Le Futur de l'industrialisation du Web: l'ingénierie dirigée par les modèles (20)

ACCEDE WEB, LES GUIDES D’ACCESSIBILITE POUR PROJETS WEB
ACCEDE WEB, LES GUIDES D’ACCESSIBILITE POUR PROJETS WEB ACCEDE WEB, LES GUIDES D’ACCESSIBILITE POUR PROJETS WEB
ACCEDE WEB, LES GUIDES D’ACCESSIBILITE POUR PROJETS WEB
 
Iafactory presentation 2019-v1.0
Iafactory presentation 2019-v1.0Iafactory presentation 2019-v1.0
Iafactory presentation 2019-v1.0
 
Qualité Web : hier, aujourd'hui, demain par Elie SloÏm Confoo Montreal Mars 2010
Qualité Web : hier, aujourd'hui, demain par Elie SloÏm Confoo Montreal Mars 2010Qualité Web : hier, aujourd'hui, demain par Elie SloÏm Confoo Montreal Mars 2010
Qualité Web : hier, aujourd'hui, demain par Elie SloÏm Confoo Montreal Mars 2010
 
Yannick DUPUIS
Yannick DUPUISYannick DUPUIS
Yannick DUPUIS
 
Le cycle projet (support de formation)
Le cycle projet (support de formation)Le cycle projet (support de formation)
Le cycle projet (support de formation)
 
Quels services Azure pour mon application Web ?
Quels services Azure pour mon application Web ?Quels services Azure pour mon application Web ?
Quels services Azure pour mon application Web ?
 
Drupal 7 : un CMS polymorphe recommandé par Linagora
Drupal 7 : un CMS polymorphe recommandé par LinagoraDrupal 7 : un CMS polymorphe recommandé par Linagora
Drupal 7 : un CMS polymorphe recommandé par Linagora
 
Metiers Design Numerique 2009
Metiers Design Numerique 2009Metiers Design Numerique 2009
Metiers Design Numerique 2009
 
AgileTour Toulouse 2012 : agilité, innovation utile au business !
AgileTour Toulouse 2012 : agilité, innovation utile au business !AgileTour Toulouse 2012 : agilité, innovation utile au business !
AgileTour Toulouse 2012 : agilité, innovation utile au business !
 
GestionAIR
GestionAIRGestionAIR
GestionAIR
 
Integration Summit 16 - Keynote Integration Trends
Integration Summit 16 - Keynote Integration TrendsIntegration Summit 16 - Keynote Integration Trends
Integration Summit 16 - Keynote Integration Trends
 
Conseil formation Web et accessibilité numérique
Conseil formation Web et accessibilité numériqueConseil formation Web et accessibilité numérique
Conseil formation Web et accessibilité numérique
 
Optimiser son workflow frontend
Optimiser son workflow frontendOptimiser son workflow frontend
Optimiser son workflow frontend
 
L'intervention de Damien Melich
L'intervention de Damien MelichL'intervention de Damien Melich
L'intervention de Damien Melich
 
Exemple d'intégration d'une architecture Visio et Microsoft SharePoint : Visi...
Exemple d'intégration d'une architecture Visio et Microsoft SharePoint : Visi...Exemple d'intégration d'une architecture Visio et Microsoft SharePoint : Visi...
Exemple d'intégration d'une architecture Visio et Microsoft SharePoint : Visi...
 
Exemple d'intégration d'une architecture Visio et Microsoft SharePoint : Visi...
Exemple d'intégration d'une architecture Visio et Microsoft SharePoint : Visi...Exemple d'intégration d'une architecture Visio et Microsoft SharePoint : Visi...
Exemple d'intégration d'une architecture Visio et Microsoft SharePoint : Visi...
 
Formation : "Concevoir et promouvoir votre site internet" V3
Formation : "Concevoir et promouvoir votre site internet" V3Formation : "Concevoir et promouvoir votre site internet" V3
Formation : "Concevoir et promouvoir votre site internet" V3
 
Le CMS Rubedo en bref
Le CMS Rubedo en brefLe CMS Rubedo en bref
Le CMS Rubedo en bref
 
A la découverte du Responsive Web Design par Mathieu Parisot - Soat
A la découverte du Responsive Web Design par Mathieu Parisot - SoatA la découverte du Responsive Web Design par Mathieu Parisot - Soat
A la découverte du Responsive Web Design par Mathieu Parisot - Soat
 
OnMap Visual Design pour modéliser les processus
OnMap Visual Design pour modéliser les processusOnMap Visual Design pour modéliser les processus
OnMap Visual Design pour modéliser les processus
 

Le Futur de l'industrialisation du Web: l'ingénierie dirigée par les modèles