STIC:STIC II - exercice 10 (Volt)

Enoncé de l'exercice 10

Cet exercice du cours STIC I vous permet:

• d'apprendre comment construire des DTDs pour XML
• d'apprendre les bases de XSLT
• d'apprendre comment associer une feuille de style CSS à une "sortie XHTML"

Tâche

• Créer une DTD simple sur un sujet de votre choix, mais en rapport avec une thématique "MALTT"
• Afficher avec une feuille de style XSLT un contenu valide crée avec cette
• Afficher avec une feuille de style XSLT partiellement un contenu valide crée avec cetteDTD
• Bonus: associer une CSS au résultat HTML
• Ecrire un rapport
• Participer au Wiki

Emplacement de la page d'accueil / rapport:

 /etu-maltt/<promo>/<login>/stic/ex2/

par exemple:

 /etu-maltt/pixel/user1/stic/ex2/

• Donc ex2 et ne pas exercice 2 etc. !!

Contraintes

• Contenu selon vos envies et possibilités, mais en rapport avec les thématiques de MALTT
• Vous pouver soit définir une nouvelle DTD, soit adapter une DTD
• La DTD doit être correcte et vos contenus doivent être valides (respecter la DTD)
• Vous devez créer deux feuilles de style XSLT qui présentent les informations de deux façons différentes. Vous êtes notamment encouragés à présenter des informations partielles dans une des variantes. Cette présentation se fera en XHTML (strict ou transitoire).

Il faut donc produire 6 fichiers:

• Une DTD,
• deux fichiers *.xml qui sont identiques,
• deux fichiers *.xsl associés à ces fichiers xml
• un rapport.

Le rapport:

• Titre, auteur et date
• Le résulat:
  • Lien vers la DTD
  • Lien vers le fichier XML 1
  • Lien vers le *.XSLT qui va avec (et la CSS si vous en utilisez)
  • Lien vers une copie du fichier XML 1 (XML 2)
  • Lien vers le *.XSLT qui va avec (et la CSS si vous en utilisez)
• Objectifs DTD: Elle sert à quoi ?
• Objectifs XSLT: Comment avez-vous pensé la mise en page ?
• La production: bref résumé de la démarche
• Contribution Wiki (il suffit de faire un lien vers votre home page wiki)
• Difficultés, auto-évaluation, remarques
• Ressources utilisées, bibliographie.

Evaluation

• Qualité du rapport (y compris discussion des besoins et du vocabulaire)
• Thématique (pas de recette de cuisine, liste de CDs etc. ! Soyez créatifs ...)
• Ergonomie et qualité de la présentation (X)HTML
• Fonctionalité, originalité. etc.
• Qualité de la DTD par rapport au buts fixés
• Validité des fichiers XML, XSLT et de la DTD
• Bonus: Richesse de la DTD (faire plus qu’une simple structure tabulaire ! Evitez donc les DTD pour gérér vos CD et vos livres ....)
• Participation au wiki (en dehors de la page discussion !)

Propositions wiki-writing pour les experts

1. Compléter XML
2. Compléter Tutoriel XSLT débutant
3. Compléter Tutoriel DTD
4. XML dans l'éducation
5. Décrire un vocabulaire XML qui vous intéresse (regardez ce que publie W3C,, OASIS,....)

Autres exercices de la même période

• Exercice 1
• Exercice 3

Activités en classe

Logiciels

• Java 6 SDK. Il faut installer cet environnement, car plusieurs programmes que nous allons utiliser en ont besoin.

Ensuite, installer / utiliser un éditeur XML. Voici quelques choix:

Editeur XML - Choix 1

Installer sous XP (facile). Il suffit de télécharger la version Windows

• Exchanger XML Editor lite

Installation de Exchanger sous VISTA (plus difficile !)

(1) Télécharger http://www.exchangerxml.com/editor/downloads/xngrliteV32.zip. Puisque vous avez déjà installé Java, il faut prendre une version sans Java (Without Java VM)

(2) Dézipper dans un répertoire (par exemple c:\exchanger)

(3) Dans ce répertoire, créer un fichier exchanger.cmd avec le contenu suivant:

cd c:\exchanger 
start javaw -jar lib\xngr-loader.jar

(4) cliquer sur exchanger.cmd

Editeur XML - Choix 2

• epcEdit
• Le plus convivial à utiliser (mais pas à installer)

XML Copy editor - Choix 3

• XML Copy editor
• Le plus facile à installer ! Assez facile à utiliser.
• Peut valider toutes sortes de schémas.

Editeur XML - autres choix

• C.f. XML editor

Introduction à XML

• Introduction à XML et DOM (slides)
• Introduction technique à XML (HTML) - PDF, (transparents)

Warm-up - éditer une DTD de cuisine

Copiez ces fichiers:

• 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.dtd
• http://tecfa.unige.ch/guides/xml/examples/dtd-examples/cuisine-template.xml

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

Avec votre éditeur XML, ouvrez le document cuisine-template.xml

Entrez une recette ...

Créer une DTD

• Créez une DTD, exemple:

<!ELEMENT addressBook (person)+>
<!ELEMENT person (name,email*)>
<!ELEMENT name (family,given)>
<!ELEMENT family (#PCDATA)>
<!ELEMENT given (#PCDATA)>
<!ELEMENT email (#PCDATA)>

• Faites un fichier XML avec cette DTD

Template XML (remplacez "VOTRE_RACINE" et "VOTRE_DTD")

<?xml version="1.0"?>
<!DOCTYPE VOTRE_RACINE SYSTEM "VOTRE_DTD.dtd">

<VOTRE_RACINE>

</VOTRE_RACINE>

Introduction à XSLT

• Introduction technique à XSLT - PDF file , (transparents)

XSLT

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

Sinon, fouillez par exemple les exemples très 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 chablon 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.

Template XSLT:

<?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_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>

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

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)

Exemples de DTD

http://tecfa.unige.ch/guides/xml/examples/dtd-examples/

http://tecfa.unige.ch/guides/xml/examples/xsl-simple/

Pages wiki fr

XML (survol conceptuel)

Tutoriel DTD

Encodage de caractères

Tutoriel XSLT débutant (contenu similaire aux transparents XSLT)

Pages wiki en

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)