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

De EduTech Wiki
Aller à la navigation Aller à la recherche
mAucun résumé des modifications
Ligne 54 : Ligne 54 :


== Activités en classe ==
== Activités en classe ==
=== Introduction à XML ===
* [http://tecfa.unige.ch/guides/tie/html/xml-dom/xml-dom.html Introduction à XML et DOM] (slides)
* [http://tecfa.unige.ch/guides/tie/html/xml-tech/xml-tech.html Introduction technique à XML] (HTML) - [http://tecfa.unige.ch/guides/tie/pdf/files/xml-tech.pdf PDF], (transparents)


=== Warm-up - éditer une DTD de cuisine ===
=== Warm-up - éditer une DTD de cuisine ===
Ligne 83 : Ligne 88 :
</VOTRE_RACINE>
</VOTRE_RACINE>
</pre>
</pre>
=== Introduction à XSLT ===
* [http://tecfa.unige.ch/guides/tie/html/xml-xslt/xml-xslt.html Introduction technique à XSLT] - [http://tecfa.unige.ch/guides/tie/pdf/files/xml-xslt.pdf PDF file] , (transparents)


=== XSLT ===
=== XSLT ===

Version du 24 septembre 2009 à 15:22

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/<promo>/<login>/stic/ex2/

par exemple: 

 /etu-maltt/oda/user1/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 ....)
  • Bonus: Participation au wiki (en dehors de la page discussion)

Activités en classe

Introduction à XML

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>

Introduction à XSLT

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