STIC:STIC I - exercice 2 (Nestor-Pixel)

De EduTech Wiki
Aller à la navigation Aller à la recherche

Cette page fait partie des cours STIC I et STIC II

Enoncé de l'exercice 2

Cet exercice du cours STIC I vous permet:

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

Tâche

  • Faire une DTD de votre choix.
  • Afficher avec une feuille de style XSLT un contenu fait avec cette DTD
  • Bonus: associer une CSS au résultat HTML

Emplacement de la page d'accueil / rapport: 

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

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 présenter le contenu d’un fichier test et de présenter son contenu au moins 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 au moins: Une DTD, deux fichiers *.xml qui sont identiques, deux fichiers *.xsl et finalement 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
  • 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. !)
  • Ergonomie et qualité de la présentation
  • 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 ....)

Activités en classe

Warm-up - éditer une DTD de cuisine

Copiez ces fichiers:

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

XSLT

  • 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/

Autres
XSLT (en, liens)
XML (en, mini-tutoriel + liens)
XSLT Tutorial (en, mini-tutoriel)
Encodage de caractères
Character encoding (en, liens encodage)
Récupérée de « https://edutechwiki.unige.ch/fmediawiki/index.php?title=STIC:STIC_I_-_exercice_2_(Nestor-Pixel)&oldid=6175 »