« STIC:STIC I - exercice 2 (Nestor-Pixel) » : différence entre les versions

De EduTech Wiki
Aller à la navigation Aller à la recherche
Ligne 49 : Ligne 49 :
* 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 ....)
* 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 ....)


== Warm-up / exemple ==
== Activités en classe ==
 
=== Warm-up - éditer une DTD de cuisine ===


Copiez ces fichiers:
Copiez ces fichiers:
Ligne 62 : Ligne 64 :


Entrez une recette ...
Entrez une recette ...
=== Créer une DTD ===
* Créez une DTD
* Faites un fichier XML avec cette DTD
=== XSLT ===
* Pour votre XML/DTD faites une simple feuille de style XSLT
Copiez/collez le chablon ci-dessous et remplacez "VOTRE_RACINE, "UN_ELEMENT" par vos éléments.
<pre>
<?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>
</pre>


== Ressources ==
== Ressources ==

Version du 21 septembre 2007 à 12:33

Enoncé de l'exercice 3 - STIC I

Cet exercice du course 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/ex3/

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


XSLT

  • Pour votre XML/DTD faites une simple feuille de style XSLT

Copiez/collez le chablon ci-dessous et remplacez "VOTRE_RACINE, "UN_ELEMENT" par vos éléments. 

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

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=6140 »