Présentation de mon papier au XXXIIe congrès INFORSID, 20-23 mai 2014 (http://inforsid.fr/Lyon2014/).
URL du papier : http://inforsid.fr/Lyon2014/wp-content/uploads/papiers/17_paper_4.pdf
1. INFORSID, Lyon, 20-23 mai 2014
Une représentation
en graphe pour
l'enseignement de XML
E. Desmontils!
Université de Nantes
emmanuel.desmontils@univ-nantes.fr
1. Contexte & objectifs!
2. L'existant
3. Le modèle!
4. Bilan
2. INFORSID, Lyon, 20-23 mai 2014
Contexte & Objectifs
❖ Enseignements sur XML depuis de nombreuses années!
❖ Master Info (ATAL, ALMA), MIAGE, Bio-info, CCI!
❖ Approche pédagogique!
❖ Schémas XML (DTD, XSD, Relax NG)!
❖ XPath, XQuery!
❖ XSLT, SAX, DOM!
❖ Nécessité d'une représentation graphique des structures
hiérarchiques XML.
2
Contexte & objectifs - L'existant - Le modèle - Bilan
3. INFORSID, Lyon, 20-23 mai 2014
Contexte & Objectifs
❖ Contraintes "techniques"!
❖ Sujets de TD, TP,
examen...
en noir et blanc!
❖ Vidéo-projecteur !
❖ rythme soutenu,
nécessite de pouvoir
prendre connaissance
rapidement d'un
exemple!
❖ parfois un peu
"fatigué"!
❖ Utilisation papier-crayon
3
Contexte & objectifs - L'existant - Le modèle - Bilan
4. INFORSID, Lyon, 20-23 mai 2014
Contexte & Objectifs
❖ Contraintes "techniques"!
❖ Sujets de TD, TP,
examen...
en noir et blanc!
❖ Vidéo-projecteur !
❖ rythme soutenu,
nécessite de pouvoir
prendre connaissance
rapidement d'un
exemple!
❖ parfois un peu
"fatigué"!
❖ Utilisation papier-crayon
3
Contexte & objectifs - L'existant - Le modèle - Bilan
5. INFORSID, Lyon, 20-23 mai 2014
Contexte & Objectifs
❖ Contraintes "techniques"!
❖ Sujets de TD, TP,
examen...
en noir et blanc!
❖ Vidéo-projecteur !
❖ rythme soutenu,
nécessite de pouvoir
prendre connaissance
rapidement d'un
exemple!
❖ parfois un peu
"fatigué"!
❖ Utilisation papier-crayon
3
Contexte & objectifs - L'existant - Le modèle - Bilan
6. INFORSID, Lyon, 20-23 mai 2014
Modélisations graphiques existantes
❖ UML, Merise…
4
Contexte & objectifs - L'existant - Le modèle - Bilan
7. INFORSID, Lyon, 20-23 mai 2014
Modélisations graphiques existantes
❖ Les « feature models »!
❖ (Kang et al., 90)
(Schonnens et al., 06)!
!
❖ Dédiées à XML!
❖ Forêt d'arbres!
❖ Fortement liées
au schéma XSD
Oxygen XML editor
5
Contexte & objectifs - L'existant - Le modèle - Bilan
11. INFORSID, Lyon, 20-23 mai 2014
Motivations graphiques
❖ Recherche d'une représentation graphique pour donner "l'idée" de
l'arbre résultant!
❖ Utilisation des "Crow's Foot Diagrams" (CFD)!
❖ (Everest, 76) !
!
!
❖ Évaluations visuelles favorables!
❖ Complexité graphique!
❖ Couleur, Noir & Blanc!
❖ (Bertin, 83) (Moody, 09)
noetu
nom
prénom
login
mdp
Étudiant
noetu
codemat
nnoteex
notecc
Note
codemat
titre
responsable
diplôme
Matière
7
Contexte & objectifs - L'existant - Le modèle - Bilan
12. INFORSID, Lyon, 20-23 mai 2014
Représentation des éléments XML
❖ Forme graphique : !
❖ élément : rectangle vert!
❖ contenu textuel : "listing" blanc!
❖ Exemples :!
❖ <!ELEMENT like EMPTY>!
❖ <!ELEMENT like (#PCDATA)>
8
like
mot-clé
txt
Contexte & objectifs - L'existant - Le modèle - Bilan
13. INFORSID, Lyon, 20-23 mai 2014
Représentation des attributs XML
❖ Forme graphique :!
❖ conteneur : rectangle arrondi jaune!
❖ Codage textuel pour le statut des attributs
client
pseudo
nom-cl
prénom-cl
like
#client
{stars}/'0'
9
forme DTD
1 nom-cl nom-cl CDATA #REQUIRED
2 %date-modif date-modif CDATA #IMPLIED
3 pseudo pseudo ID #REQUIRED
4 #client client IDREF #REQUIRED
5 #(clients) clients IDREFS #REQUIRED
6 {stars} stars (0|1|2|3|4|5)
#REQUIRED7 stars/'0' stars CDATA '0'
… … …
Contexte & objectifs - L'existant - Le modèle - Bilan
14. INFORSID, Lyon, 20-23 mai 2014
Une extension : liens ID/IDREF
❖ Forme graphique :!
❖ IDREF : flèche pointillée
bleue claire vers l'attribut ID
correspondant!
❖ IDREFS : flèche pointillée
bleue avec départ CFD!
❖ Attention :
absent des langages de schéma
client
pseudo
nom-cl
prénom-cl
like
#client
{stars}/'0'
txt
acteur
pseudo
nom-a
prénom-a
film
titre-f
#(acteurs)
10
Contexte & objectifs - L'existant - Le modèle - Bilan
15. INFORSID, Lyon, 20-23 mai 2014
Composition d'éléments XML
❖ Répétition d'éléments !
❖ Inspiration directe des
CFD utilisés en
modélisation de schémas
relationnels!
❖ Utilisation asymétrique
11
Contexte & objectifs - L'existant - Le modèle - Bilan
A1
B1
A2
B2
A3
B3
A4
B4
<!ELEMENT A1 (B1)>
<!ELEMENT A2 (B2?)>
<!ELEMENT A3 (B3*)>
<!ELEMENT A4 (B4+)>
16. INFORSID, Lyon, 20-23 mai 2014
Composition d'éléments XML
❖ Structuration hiérarchique!
❖ Forme graphique :!
❖ séquence : point!
❖ alternative : fourche!
❖ importance de la topographie!
❖ variables planaires (Bertin, 83) !
❖ ↓ : descendance!
❖ → : ordre de la fratrie (séquence)
& attributs
A
B1 B2 B3 B4
<!ELEMENT A (B1, B2, B3, B4)>
A
B1 B2 B3 B4
<!ELEMENT A (B1 | B2 | B3 | B4)>
12
Contexte & objectifs - L'existant - Le modèle - Bilan
17. INFORSID, Lyon, 20-23 mai 2014
Composition d'éléments XML
❖ Structuration hiérarchique!
❖ Forme graphique :!
❖ séquence : point!
❖ alternative : fourche!
❖ importance de la topographie!
❖ variables planaires (Bertin, 83) !
❖ ↓ : descendance!
❖ → : ordre de la fratrie (séquence)
& attributs
A
B1 B2 B3 B4
<!ELEMENT A (B1, B2, B3, B4)>
A
B1 B2 B3 B4
<!ELEMENT A (B1 | B2 | B3 | B4)>
12
Contexte & objectifs - L'existant - Le modèle - Bilan
18. INFORSID, Lyon, 20-23 mai 2014
Groupe et sous-groupe
❖ Forme graphique :!
❖ pentagone beige!
❖ Exemple : !
❖ <!ELEMENT artiste (joue|réalise|compose)+>
joue
#dans
rôle
réalise#le-film compose #la-bo-de
artiste
13
Contexte & objectifs - L'existant - Le modèle - Bilan
19. INFORSID, Lyon, 20-23 mai 2014
Modélisation hiérarchique
❖ Objectif : limitation de la complexité
graphique !
❖ utilisation de schémas connus!
❖ limitation du nombre d’éléments du
graphe (référence à un autre graphe)!
❖ Forme graphique :!
❖ nuage blanc
biographie
<body>
XHTML
liste-
films
film+
14
Contexte & objectifs - L'existant - Le modèle - Bilan
20. INFORSID, Lyon, 20-23 mai 2014
Bilan
❖ Mise en œuvre depuis plusieurs années,
avec amélioration continue...!
❖ Pas complet au regard des schémas!
❖ Mon impression :!
❖ Utile pour la compréhension
des schémas!
❖ Pratique pour XPath et
les API de développement !
❖ Encore un peu lourd graphiquement
15
Contexte & objectifs - L'existant - Le modèle - Bilan
21. INFORSID, Lyon, 20-23 mai 2014
Évaluation graphique
❖ Clarté sémiotique : relation entre l'objet graphique et le concept!
❖ Idéal → bijection!
❖ Discrimination perceptive : discrimination visuelle entre deux
objets graphiques!
❖ Dépend de variables graphiques!
❖ Transparence sémantique : compréhension par les experts,
mais aussi les autres!
❖ L'aspect suggère le concept!
❖ Gestion de la complexité : charge visuelle, superpositions, etc.
16
(Moody, 09)
Contexte & objectifs - L'existant - Le modèle - Bilan
22. INFORSID, Lyon, 20-23 mai 2014
Évaluation graphique
❖ Intégration cognitive : navigation sur plusieurs
diagrammes!
❖ Expressivité visuelle : multiplication des variables
visuelles!
❖ Double codage : texte + variables visuelles!
❖ Économie graphique : pas trop de symboles
graphiques!
❖ Adaptation cognitive : adaptation au(x) support(s)
17
Contexte & objectifs - L'existant - Le modèle - Bilan
(Moody, 09)
23. INFORSID, Lyon, 20-23 mai 2014
Bilan : mini-sondage
❖ Année 2013-2014!
❖ 52 étudiants, 35 répondants!
❖ M1 MIAGE (Cl., Al.), M1 ATAL, M2 CCI!
❖ Utilité (0 à 4) : !
❖ 77% à 3 et 4!
❖ moyenne : 3,02!
❖ Complexité!
❖ 68% facile, très facile!
❖ 60% ATAL, !
❖ 54% MIAGE Cl.!
❖ 85% MIAGE Al., !
❖ 67% CCI
18
Utilité
0
2
4
6
8
10
12
14
16
0 1 2 3 4
11,4 %
57,1 %
31,4 %
Très complexe
Complexe
Facile
Très facile
Utilisé en CM,
TD, TP, CC
Contexte & objectifs - L'existant - Le modèle - Bilan
25. INFORSID, Lyon, 20-23 mai 2014
Perspectives
❖ Faut-il étendre le modèle ?!
❖ Types XSD !
❖ Types DTD (NMTOKEN, NOTATION)!
!
❖ Mesures de graphes pour l'aide à la
pédagogie !
❖ (Moody, 09) (Le Pallec et al., 13)!
❖ Et en 3D ?
station-
référence
station-
observation
type-
station
altitude
nom
txt
20
Contexte & objectifs - L'existant - Le modèle - Bilan
26. INFORSID, Lyon, 20-23 mai 2014
Merci pour votre attention.
Avez vous des questions ?
21