« STIC:STIC II - exercice 10 (Xerneas) » : différence entre les versions

De EduTech Wiki
Aller à la navigation Aller à la recherche
(6 versions intermédiaires par 2 utilisateurs non affichées)
Ligne 1 : Ligne 1 :
{{En construction}}
{{stic12}}
{{stic12}}
<categorytree mode="pages" depth="0" style="float:right; clear:right; margin-left:3px; border:1px solid gray; padding:0.7ex; background-color:#f9f9f9;">STIC</categorytree>
<categorytree mode="pages" depth="0" style="float:right; clear:right; margin-left:3px; border:1px solid gray; padding:0.7ex; background-color:#f9f9f9;">STIC</categorytree>
Ligne 5 : Ligne 4 :


Objectifs de ce projet [[STIC:STIC_II|STIC II]]:
Objectifs de ce projet [[STIC:STIC_II|STIC II]]:
* Notion de modèle (patron) de texte
* Concevoir un modèle (patron, grammaire) de texte
* Construire des DTDs pour XML
* Créer des DTDs pour XML
* Faire des transformations simples avec XSLT (affichage et filtrage de données XML)
* Faire des transformations simples avec XSLT (affichage et filtrage de données XML en format HTML)
* Mise en page du résultat HTML
* Mise en page du résultat HTML


Ligne 15 : Ligne 14 :
* La DTD doit aider un auteur '''à rédiger un type de texte pour un public cible''' (apprenant, enseignant, concepteur, etc.).  
* La DTD doit aider un auteur '''à rédiger un type de texte pour un public cible''' (apprenant, enseignant, concepteur, etc.).  
** Ne faites pas une spécification pour un fichier d'échange de données (genre SVG, DocX, etc.), ne faites pas une application administrative, ne faites pas une simple base de données de type tableau, liste, etc.
** Ne faites pas une spécification pour un fichier d'échange de données (genre SVG, DocX, etc.), ne faites pas une application administrative, ne faites pas une simple base de données de type tableau, liste, etc.
* Afficher avec une feuille de style XSLT un contenu XML valide crée avec cette DTD
* Afficher un contenu XML valide crée avec cette DTD avec une feuille de style XSLT
* Bonus:  
* Bonus:  
** associer une CSS au résultat HTML
** associer une CSS au résultat HTML
** créer des graphiques SVG
** créer des graphiques SVG
** Créer 2 variantes du XSLT (utiliser le même fichier XML et afficher autre chose)
** Créer deux variantes du XSLT (utiliser le même fichier XML et afficher d'autres contenus)
* Ecrire un rapport
* Ecrire un rapport
* Participer au Wiki
* Voir aussi: participer au Wiki (exercice séparé)


Emplacement de la page d'accueil / rapport:
Emplacement de la page d'accueil / rapport:
Ligne 35 : Ligne 34 :
* Contenu selon vos envies et possibilités, mais en rapport avec les thématiques de MALTT
* Contenu selon vos envies et possibilités, mais en rapport avec les thématiques de MALTT
* Vous pouvez soit définir une nouvelle DTD, soit adapter une DTD existante (que vous devez citer)
* Vous pouvez soit définir une nouvelle DTD, soit adapter une DTD existante (que vous devez citer)
* La DTD doit être correcte et vos contenus doivent être valides (respecter la DTD)
* La DTD doit être correcte et au moins un document XML (contenu) doit être validé avec la DTD


Il faut donc produire au moins 4 fichiers:
Il faut donc produire au moins 4 fichiers:
Ligne 44 : Ligne 43 :
* En option: Fichiers CSS, images, 2ème XSLT, etc.
* En option: Fichiers CSS, images, 2ème XSLT, etc.


Le rapport doit inclure:
=== Rapport ===
* Titre, auteur et date
 
* Le résultat:  
Faire un rapport selon les guidelines habituelles [[STIC:Rapport STIC I et II]]. En particulier pour cet exercice :
** Lien vers la DTD
 
** Lien vers le fichier XML
* Liens:  
** Lien vers le *.XSLT qui va avec (et la CSS si vous en utilisez)
** Vers la DTD
** Vers le fichier XML
** Vers le *.XSLT qui va avec (et la CSS si vous en utilisez)
* Objectifs DTD: Elle sert à quoi ?
* Objectifs DTD: Elle sert à quoi ?
* Documentation de la DTD (peut aussi être faite dans la DTD)
* Design :
* Objectifs XSLT: Comment avez-vous pensé la mise en page ?
** Documentation de la DTD (peut aussi être faite dans la DTD à travers des commentaires)
* La production: '''bref''' résumé de la démarche
** Objectifs XSLT: Comment avez-vous pensé la mise en page et pourquoi ?
* Contribution Wiki
* Difficultés, auto-évaluation, remarques
* Ressources utilisées, bibliographie.


=== Evaluation ===
=== Evaluation ===
Ligne 71 : Ligne 69 :
# '''Richesse''': Complexité, difficulté, originalité. etc.
# '''Richesse''': Complexité, difficulté, originalité. etc.
# '''Volume''': Fichier XML qui permet de tester la DTD pour de vrai
# '''Volume''': Fichier XML qui permet de tester la DTD pour de vrai
# '''Scenarisation''': Implémentation d'une activité (et pas juste d'un artéfact)
# '''Scenarisation''': Soutien d'une activité (et pas juste d'un artéfact). A documenter dans le rapport.


=== Propositions wiki-writing ===
=== Propositions wiki-writing ===


A vous de choisir, mais on suggère de choisir un sujet en rapport étroit avec une des tâches.
A vous de choisir, mais on suggère de choisir un sujet en rapport étroit avec une des tâches ou l'autre exercice de la période.


# Compléter [[XML]]
# Compléter [[XML]]
Ligne 91 : Ligne 89 :
=== Introduction à STIC II ===
=== Introduction à STIC II ===


==== Inscription à l'espace du cours sur Moodle ====
==== Inscription à l'espace du cours sur Moodle (utilisé pour gérer l'évaluation) ====


{{ bloc important | '''Attention''' : espace différent de STIC I !!! }}
{{bloc important | '''Attention''' : espace différent de STIC I !!! }}


* http://tecfalms.unige.ch/moodle/course/view.php?id=312
* http://tecfalms.unige.ch/moodle/course/view.php?id=312
'''Inscription à l'espace projets étudiant-e-s sur Moodle (il faut juste vérifier que vous avez un accès enseignant)'''
* http://tecfalms.unige.ch/moodle/course/view.php?id=313


==== Nouveauté pour les contributions wiki obligatoires ====
==== Nouveauté pour les contributions wiki obligatoires ====


{{ bloc important | Les modalités de rendu et d'évaluation pour les contributions wiki ont changées par rapport à STIC I. }}
{{bloc important | Les modalités de rendu et d'évaluation pour les contributions wiki ont changées par rapport à STIC I. }}


Pour les détails, voir :
Pour les détails, voir :
Ligne 105 : Ligne 105 :
* {{Goblock | [[STIC:Contribution Wiki]] }}
* {{Goblock | [[STIC:Contribution Wiki]] }}


=== Tour de logiciels ===
=== Tour d'éditeurs XML ===


* On vous rappelle que c'est utile d'avoir [http://java.sun.com/ Java] si ce n'est pas déjà fait. Plusieurs programmes que nous allons utiliser en ont besoin.
* On vous rappelle que c'est utile d'avoir [http://java.sun.com/ Java] si ce n'est pas déjà fait. Plusieurs programmes que nous allons utiliser en ont besoin.
Ligne 140 : Ligne 140 :
'''Warm-up - éditer une DTD de cuisine''' (pour ceux/celles qui veulent s'exercer un peu ...)
'''Warm-up - éditer une DTD de cuisine''' (pour ceux/celles qui veulent s'exercer un peu ...)


Copiez ces fichiers:
Copiez ces '''cinq''' fichiers:
* http://tecfa.unige.ch/guides/xml/examples/dtd-examples/cuisine.xsl
* http://tecfa.unige.ch/guides/xml/examples/dtd-examples/cuisine.xsl
* http://tecfa.unige.ch/guides/xml/examples/dtd-examples/cuisine.css
* http://tecfa.unige.ch/guides/xml/examples/dtd-examples/cuisine.css
* http://tecfa.unige.ch/guides/xml/examples/dtd-examples/cuisine.dtd
* http://tecfa.unige.ch/guides/xml/examples/dtd-examples/cuisine.dtd
* http://tecfa.unige.ch/guides/xml/examples/dtd-examples/cuisine-template.xml
* http://tecfa.unige.ch/guides/xml/examples/dtd-examples/cuisine-template.xml
* http://tecfa.unige.ch/guides/xml/examples/dtd-examples/cuisine.xml


'''ATTENTION''': il faut "enregistrer les lien sous" / "save link as" ! Pas afficher dans le navigateur et sauver ensuite ...
'''ATTENTION''': il faut "enregistrer les lien sous" / "save link as" ! Pas afficher dans le navigateur et sauver ensuite ...


Avec votre éditeur XML, ouvrez le document ''cuisine-template.xml''
Avec votre éditeur XML, ouvrez le document ''cuisine-template.xml''. Essayez de compléter ce document. Que faut-il faire pour comprendre la logique du modèle ?


Entrez une recette ...
Entrez une recette ...
Ligne 244 : Ligne 245 :


* Lire [[Exchanger XML Editor]] ou [[:en:Exchanger XML Editor]]. Au moins regarder les images dans les sections qui concernent XSLT.
* Lire [[Exchanger XML Editor]] ou [[:en:Exchanger XML Editor]]. Au moins regarder les images dans les sections qui concernent XSLT.
* Il est impératif de choisir Saxon (XSLT 2.0) comme engin. Les autres ont disparu dans l'installation ..... (file->Preferences; XML Tab)
* Il est '''impératif de choisir Saxon (XSLT 2.0)''' comme engin XSLT. Les autres ont disparu dans l'installation ..... . Configurez l'éditeur: File->Preferences; XML Tab; Choisir Saxon 2.


== Environement de travail/test en local ==
== Environement de travail/test en local ==
Ligne 252 : Ligne 253 :
=== Pour Windows ===
=== Pour Windows ===


Normalement il n'y a pas de problème si vous utilisez Microsoft Edge ou Microsoft Explorer.
Normalement il n'y a pas de problème si vous utilisez  
 
* Microsoft Edge ou Microsoft Explorer.
* Firefox
 
Chrome a un bug (voulu, et ne marchera pas avec un fichier en local)


=== Utiliser le serveur/live preview de Brackets ===
=== Utiliser le serveur/live preview de Brackets ===

Version du 22 février 2018 à 19:50

Cette page fait partie des cours STIC I et STIC II

Enoncé de l'exercice 10

Objectifs de ce projet STIC II:

  • Concevoir un modèle (patron, grammaire) de texte
  • Créer des DTDs pour XML
  • Faire des transformations simples avec XSLT (affichage et filtrage de données XML en format HTML)
  • Mise en page du résultat HTML

Tâche

  • Créer une DTD simple sur un sujet de votre choix, mais en rapport avec une thématique "MALTT"
  • La DTD doit aider un auteur à rédiger un type de texte pour un public cible (apprenant, enseignant, concepteur, etc.).
    • Ne faites pas une spécification pour un fichier d'échange de données (genre SVG, DocX, etc.), ne faites pas une application administrative, ne faites pas une simple base de données de type tableau, liste, etc.
  • Afficher un contenu XML valide crée avec cette DTD avec une feuille de style XSLT
  • Bonus:
    • associer une CSS au résultat HTML
    • créer des graphiques SVG
    • Créer deux variantes du XSLT (utiliser le même fichier XML et afficher d'autres contenus)
  • Ecrire un rapport
  • Voir aussi: participer au Wiki (exercice séparé)

Emplacement de la page d'accueil / rapport:

 /etu-maltt/<promo>/<login>/stic-2/ex10/

par exemple:

 /etu-maltt/qwerty/user1/stic-2/ex10/
  • Donc ex10 et ne pas exercice 10 etc. !!

Contraintes

  • Contenu selon vos envies et possibilités, mais en rapport avec les thématiques de MALTT
  • Vous pouvez soit définir une nouvelle DTD, soit adapter une DTD existante (que vous devez citer)
  • La DTD doit être correcte et au moins un document XML (contenu) doit être validé avec la DTD

Il faut donc produire au moins 4 fichiers:

  • Une DTD,
  • un fichier *.xml
  • un fichier *.xsl associés à ce fichier xml
  • un rapport
  • En option: Fichiers CSS, images, 2ème XSLT, etc.

Rapport

Faire un rapport selon les guidelines habituelles STIC:Rapport STIC I et II. En particulier pour cet exercice :

  • Liens:
    • Vers la DTD
    • Vers le fichier XML
    • Vers le *.XSLT qui va avec (et la CSS si vous en utilisez)
  • Objectifs DTD: Elle sert à quoi ?
  • Design :
    • Documentation de la DTD (peut aussi être faite dans la DTD à travers des commentaires)
    • Objectifs XSLT: Comment avez-vous pensé la mise en page et pourquoi ?

Evaluation

Voici la liste des critères d'évaluation. Chaque donne entre 0 et 0.6 points.

  1. Qualité du rapport Y compris discussion des besoins et du vocabulaire, références, réflexions.
  2. Qualité technique: Validité des fichiers XML, XSLT et de la DTD
  3. Respect des contraintes: Y compris noms de répertoires, etc.
  4. Documentation technique: Interne (notamment dans la DTD) et/ou externe
  5. Respect de délais
  6. Thématique et formulation d'objectifs en rapport avec vos études: Soyez créatifs, faites plus qu’une simple structure tabulaire ! Evitez donc les DTD pour gérer vos CD et vos livres ....
  7. User experience: Ergonomie et qualité de la présentation (X)HTML
  8. Richesse: Complexité, difficulté, originalité. etc.
  9. Volume: Fichier XML qui permet de tester la DTD pour de vrai
  10. Scenarisation: Soutien d'une activité (et pas juste d'un artéfact). A documenter dans le rapport.

Propositions wiki-writing

A vous de choisir, mais on suggère de choisir un sujet en rapport étroit avec une des tâches ou l'autre exercice de la période.

  1. Compléter XML
  2. Compléter/améliorer Tutoriel XSLT débutant
  3. Traduire (au moins une partie de) en:XSLT to generate SVG tutorial. Déjà traduit => Tutoriel pour générer du SVG avec du XSLT
  4. Compléter/améliorer Tutoriel DTD
  5. XML dans l'éducation
  6. Documenter un éditeur XML, ou améliorer Exchanger_XML_Editor
  7. Faire un article en rapport avec un autre exercice, par exemple eXe
  8. Décrire un vocabulaire XML qui vous intéresse (regardez ce que publie W3C,, OASIS,....)
  9. Voir aussi la catégorie en:XML (possibilité de faire un bout de traduction par exemple)

Activités en classe

Introduction à STIC II

Inscription à l'espace du cours sur Moodle (utilisé pour gérer l'évaluation)

Attention : espace différent de STIC I !!!

Inscription à l'espace projets étudiant-e-s sur Moodle (il faut juste vérifier que vous avez un accès enseignant)

Nouveauté pour les contributions wiki obligatoires

Les modalités de rendu et d'évaluation pour les contributions wiki ont changées par rapport à STIC I.

Pour les détails, voir :

Tour d'éditeurs XML

  • On vous rappelle que c'est utile d'avoir Java si ce n'est pas déjà fait. Plusieurs programmes que nous allons utiliser en ont besoin.
  • Installez / utilisez un éditeur XML si c'est pas déjà fait. Voici quelques choix (signalez d'autres solutions intéressantes SVP):
Éditeur XML - Choix 1
Éditeur XML - Choix 2
  • epcEdit (Linux, Windows). Lien original cassé, mais peut-être on peut retrouver ce logiciel ailleurs
  • Le plus convivial à utiliser (mais pas à installer)
XML Copy editor - Choix 3
  • XML Copy Editor
  • Download: XML Copy editor (Linux, windows)
  • Le plus facile à installer ! Assez facile à utiliser, mais moins puissant !.
  • Peut valider toutes sortes de schémas.
Editeur XML - autres choix
  • C.f. XML editor
  • Il est impératif que l'éditeur puisse valider des DTDs et des schémas
  • Il est important qu'il puisse assister à l'édition, valider et exécuter XSLT avec un débogage.

Introduction à XML

Déjà faite dans le séminaire d'initiation. Pour rappel:

Warm-up - éditer une DTD de cuisine (pour ceux/celles qui veulent s'exercer un peu ...)

Copiez ces cinq fichiers:

ATTENTION: il faut "enregistrer les lien sous" / "save link as" ! Pas afficher dans le navigateur et sauver ensuite ...

Avec votre éditeur XML, ouvrez le document cuisine-template.xml. Essayez de compléter ce document. Que faut-il faire pour comprendre la logique du modèle ?

Entrez une recette ...

Créer une DTD

  • Tutoriel DTD (exposé)
  • Démo XML Exchanger lite: en:Exchanger XML Editor
    • Attention (petit bug): une fois introduit le doctype plus l'élément racine, il faut fermer/ouvrir le fichier XML !
  • Créez une DTD
    1. Imaginez un domaine à modéliser
    2. Esquissez ses éléments sur papier
    3. Créez le fichier DocType.

Exemple que vous pouvez copier/coller si vous sentez le besoin de vous exercer avec qc. qui a déjà été fait.

 <!ELEMENT addressBook (person)+>
 <!ELEMENT person (name,email*)>
 <!ELEMENT name (family,given)>
 <!ELEMENT family (#PCDATA)>
 <!ELEMENT given (#PCDATA)>
 <!ELEMENT email (#PCDATA)>
  • Enregistrez la DTD dans un fichier qui s'appelle addressBook.dtd ou un autre nom de votre choix.
  • Faites un fichier XML avec cette DTD en partant du patron suivant:
<?xml version="1.0"?>
<!DOCTYPE addressBook SYSTEM "addressBook.dtd">

<addressBook>

</addressBook>

Explications:

  • "addressBook" est le nom de l'élément racine. La DTD ne l'indique pas, il faut donc l'indiquer à XML dans la ligne qui définit le Doctype. C'est pareil pour XHTML ou SVG ...
  • Remplacez "addressBook" et "addressBook.dtd" avec votre élément racine et votre nom de fichier.

Introduction à XSLT (exposé)

Activité XSLT

(1) Regardez d'abord des exemples, notamment la recette de cuisine ci-dessus !

Sinon, fouillez par exemple ces exemples simples: http://tecfa.unige.ch/guides/xml/examples/xsl-simple/

(2) Pour votre XML/DTD faites une simple feuille de style XSLT

Copiez/collez le patron ci-dessous si vous voulez et remplacez "VOTRE_RACINE, "UN_ELEMENT" par vos éléments. Sinon, la plupart des éditeurs XML offrent une assistance XSLT.

Chablon XSLT à copier dans un nouveau fichier *.xsl

<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">

  <xsl:output method="html"/>

  <xsl:template match="VOTRE_ELEMENT_RACINE">
    <html>
      <body bgcolor="#FFFFFF">
        <xsl:apply-templates/>
      </body>
    </html>
  </xsl:template>

  <xsl:template match="UN_ELEMENT">
    
  </xsl:template>

  <xsl:template match="UN_ELEMENT">
    
  </xsl:template>
</xsl:stylesheet>

Patron fichier XML avec XSLT

<?xml version="1.0" ?>
<!DOCTYPE VOTRE_RACINE SYSTEM "VOTRE_DTD.dtd">
<?xml-stylesheet href="VOTRE_STYLE.xsl" type="text/xsl"?>

<VOTRE_RACINE>

</VOTRE_RACINE>

Utilisation de Exchanger

  • Lire Exchanger XML Editor ou en:Exchanger XML Editor. Au moins regarder les images dans les sections qui concernent XSLT.
  • Il est impératif de choisir Saxon (XSLT 2.0) comme engin XSLT. Les autres ont disparu dans l'installation ..... . Configurez l'éditeur: File->Preferences; XML Tab; Choisir Saxon 2.

Environement de travail/test en local

Le développement de cet exercice peut soulever quelques difficultés dans l'environnement de travail en local, car les browser ne gèrent pas tous la transformation automatique XML+XSLT en HTML de la même manière lorsqu'on ouvre le fichier (e.g. C://user/documents/etc/welcome.xml) et on utilise pas un serveur web. Voici quelques solutions :

Pour Windows

Normalement il n'y a pas de problème si vous utilisez

  • Microsoft Edge ou Microsoft Explorer.
  • Firefox

Chrome a un bug (voulu, et ne marchera pas avec un fichier en local)

Utiliser le serveur/live preview de Brackets

Une alternative un peu brouillon est de :

  • Utilisez Exchanger pour coder/valider le XML et la DTD
  • Ouvrir le dossier de votre projet comme un projet Brackets
  • Ajouter une page qui ne sert à rien, style page.html
  • L'ouvrir en live preview (symbole du tonnerre)
  • Le browser qui s'ouvre pointe vers quelque chose de similaire à http://127.0.0.1:55152/page.html
  • Remplacez dans l'URL page.html par le nom de votre fichier XML, normalement welcome.xml
  • Laissez Brackets en arrière plan et modifier le XML/XLST avec Exchanger. Attention : il faudra mettre à jour la page du browser (F5 ou bouton update) pour voir les changements
  • À la limite vous pouvez utiliser Brackets pour le CSS, c'est mieux que Exchanger pour ça, mais faites attention que avoir ouvert les mêmes fichiers avec deux logiciels différents requièrent une certaine attention pour éviter d'écraser des changements d'une parte ou de l'autre

Lancer un serveur en local avec Node.js

Si vous avez installé Node.js, vous pouvez installer un module globalement qui vous sert de server web. Depuis la ligne de commande :

npm install -g live-server

Puis pointer au dossier de votre projets, e.g. :

cd /ma/grammaire/xml/

Lancez le serveur avec :

live-server .

Pointer vers le nom de votre fichier .xml pour voir le résultat.

Normalement ce type de serveur met à jour le navigatuer après les changements, mais j'ai testé et cela n'a pas l'air de le faire avec XML+XSLT. Il faudra mettre à jour manuellement.

Ressources

Transparents
TECFA's XML page
Introduction à XML et DOM - PDF file , (transparents)
Introduction technique à XML - PDF file , (transparents)
Introduction technique à XSLT - PDF file , (transparents)
Manuels électroniques (PDF et dPUB sur XML)
[docs protégés]
Exemples de DTD
http://tecfa.unige.ch/guides/xml/examples/dtd-examples/
http://tecfa.unige.ch/guides/xml/examples/xsl-simple/
Informations sur les DTD
Structurez vos données avec XML (Open Classroom)
Pages wiki fr
XML (survol conceptuel)
Tutoriel DTD (important, comprend les éléments pour réussir l'exercice)
Encodage de caractères
Tutoriel XSLT débutant
XML Schema
Exchanger XML Editor
Pages wiki en anglais
en:Editing XML tutorial (tutoriel pour utiliser un schéma XML)
en:DTD tutorial
XML (en, mini-tutoriel + liens)
XML editor (on conseille Exchanger light, si vous n'arrivez pas à l'installer, essayez d'autres comme epcedit)
XSLT (en, liens)
XSLT Tutorial (en, mini-tutoriel)
Character encoding (en, liens encodage)
Cours COAP
La catégorie XML
en:Exchanger XML Editor