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

De EduTech Wiki
Aller à la navigation Aller à la recherche
mAucun résumé des modifications
Ligne 5 : Ligne 5 :
* d'apprendre à éditer une page XML avec un éditeur XML
* d'apprendre à éditer une page XML avec un éditeur XML
* d'apprendre un peu de XSLT
* d'apprendre un peu de XSLT
* de perfectionner vos connaissances en CSS


=== Tâche ===
=== Tâche ===


* Faites votre page travaux en suivant les [[#Instructions | Instructions]] ci-dessous. (Notamment: <span style="color:red">Ne modifiez pas la DTD qu'on vous impose</span>. L'exercice consiste principalement à améliorer une XSLT !!)
* Faites votre page travaux en suivant les [[#Instructions | Instructions]] ci-dessous. (Notamment: <span style="color:red">Ne modifiez pas la DTD qu'on vous impose</span>. L'exercice consiste principalement à améliorer une XSLT et à styler la sortie HTML !!)


* Elle sera accessible par l’URL  
* La page sera accessible par l’URL  
   http://tecfa.unige.ch/etu-maltt/nestor/''votre login''/welcome.xml
   http://tecfaetu.unige.ch/etu-maltt/pixel/''votre login''/welcome.xml
Par exemple:  
Par exemple:  
   http://tecfa.unige.ch/etu-maltt/maya/wipfli/
   http://tecfaetu.unige.ch/etu-maltt/maya/wipfli/


* Une page d'accueil/rapport pour l'exercice est à placer ici:
* Une page d'accueil/rapport pour l'exercice est à placer ici:
   /etu-maltt/nestor/''login''/stic/ex3/
   /etu-maltt/pixel/''login''/stic/ex3/
Exemple:
Exemple:
   http://tecfa.unige.ch/etu-maltt/oda/dupont/ex3
   http://tecfaetu.unige.ch/etu-maltt/oda/dupont/ex3
   
   
Note: N'oubliez pas de copier aussi la DTD et la XSLT. Donc dans le répetoire ''etu-maltt/oda/''votre login''/'' il faut avoir les fichiers suivants:
Note: N'oubliez pas de copier aussi la DTD et la XSLT. Donc dans le répetoire ''etu-maltt/oda/''votre login''/'' il faut avoir les fichiers suivants:
Ligne 24 : Ligne 25 :
   /etu-maltt/oda/''login''/travaux.dtd
   /etu-maltt/oda/''login''/travaux.dtd
   /etu-maltt/oda/''login''/travaux.xsl
   /etu-maltt/oda/''login''/travaux.xsl
  /etu-maltt/oda/''login''/travaux.css


=== Contraintes ===
=== Contraintes ===
Ligne 29 : Ligne 31 :
* Cette page indexera tous vos travaux
* Cette page indexera tous vos travaux
* Il faut utiliser la DTD XML telle quelle (!) mise à votre disposition
* Il faut utiliser la DTD XML telle quelle (!) mise à votre disposition
* Vous devez adapter la feuille de style (PAS la DTD !),
* Vous devez adapter la feuille XSLT (PAS la DTD !)
* Une fois '''éditée''' votre page travail, je vous conseille de finir d'abord l'exercice 3. Votre DTD à vous sera sans doute plus simple, c.a.d. mieux adapté pour faire les premiers pas avec XSLT.
* Le HTML généré doit être valide
* Une fois '''éditée''' votre page travail, je vous conseille de finir d'abord l'exercice 2. Votre DTD à vous sera sans doute plus simple, c.a.d. mieux adapté pour faire les premiers pas avec XSLT.
* Le HTML généré doit être stylé avec CSS
   
   
Il vous faut donc produire 3 fichiers: la page travail et un fichier qui va avec, finalement aussi un rapport.
Il vous faut donc produire 4 fichiers:  
* la page travail en XML
* un fichier XSLT qui va avec
* un fichier CSS importé par le XSLT
* un rapport.


Le rapport:
Le rapport:
Ligne 46 : Ligne 54 :
* Respect des contraintes + emplacement de fichiers
* Respect des contraintes + emplacement de fichiers
* Qualité du rapport
* Qualité du rapport
* Feuille de style (c.f ex 4). Donc créez d'abord juste le contenu. Revenez plus tard une fois que vous avez compris un peu de XSLT.
* Style, mais créez d'abord juste le contenu. Revenez plus tard une fois que vous avez compris un peu de XSLT.


=== Instructions ===
=== Instructions ===
Ligne 54 : Ligne 62 :
Etapes à suivre:
Etapes à suivre:


# Copiez les 5 fichiers '''"travaux.dtd"''', '''"travaux.xsl"''', '''"ENLEVERwelcome.xml"''', '''"travauxdoc.txt"''' et '''"example.xml"''' depuis http://tecfa.unige.ch/tecfa/teaching/staf14/files/workpage/ (ou /web/tecfa/teaching/staf14/files/workpage/) dans votre espace "Travaux" (/T:). ATTENTION: Ne faites pas "SAVE AS" d'une page XML depuis un navigateur Web. Vous pouvez perdre de l'information ou encore vous retrouver avec du simple HTML !
# Copiez les 5 fichiers '''"travaux.dtd"''', '''"travaux.xsl"''', '''"ENLEVERwelcome.xml"''', '''"travauxdoc.txt"''' et '''"example.xml"''' depuis http://tecfa.unige.ch/tecfa/teaching/staf14/files/workpage/  
# Renommez le fichier ENLEVERwelcome.xml en welcome.xml
#* Dans Firefox: "save link as" ("sauver lien sous")
# Lancez un éditeur XML et ouvrez le fichier "welcome.xml" (drag & drop depuis l'Explorateur ou ''File - Open - <chemin>'').
#* Ne faites pas "SAVE AS" d'une page XML déjà affichée dans le navigateur Web. Vous pouvez perdre de l'information ou encore vous retrouver avec du simple HTML !
# Renommez le fichier '''ENLEVERwelcome.xml''' en '''welcome.xml'''
# Lancez un éditeur XML et ouvrez ce fichier "welcome.xml"
# Remplissez les balises xml d'une façon logique qui puissent décrire votre page Travaux MALTT / STAF et n'oubliez pas de sauver de temps en temps! Vous allez trouver tous les explications que vous aurez besoin dans le fichier travauxdoc.txt.  
# Remplissez les balises xml d'une façon logique qui puissent décrire votre page Travaux MALTT / STAF et n'oubliez pas de sauver de temps en temps! Vous allez trouver tous les explications que vous aurez besoin dans le fichier travauxdoc.txt.  
# Si vous travaillez en local (par ex chez vous), une fois terminé, il faut transférer tous les fichiers avec FTP dans votre espace Travaux.
# Si vous travaillez en local (par ex chez vous), une fois terminé, il faut transférer tous les fichiers avec FTP dans votre espace Travaux.
# Vérifiez les changements que vous avez fait de temps en temps avec votre browser préféré soit en local soit à l'URL suivant:  http://tecfa.unige.ch/etu-maltt/nestor/''votre login''/
# Vérifiez les changements que vous avez fait de temps en temps avec votre browser préféré soit en local soit à l'URL suivant:  http://tecfaetu.unige.ch/etu-maltt/pixel/''votre login''/
# Félicitations!!! Vous avez votre première page en XML! Et si vous la trouvez pas très jolie c'est à vous maintenant de changer sa mise en forme en apprennant XSLT :) (fichier travaux.xsl)
# Félicitations!!! Vous avez votre première page en XML! Et si vous la trouvez pas très jolie c'est à vous maintenant de changer sa mise en forme en apprennant XSLT :) (fichier travaux.xsl)


== Ressources ==
== Ressources ==


Attention: Certains tutoriels que vous pouvez trouver sur le web ne sont pas à jour. D'autres vous engagent dans des mauvaises pistes. Essayez de tout faire avec des simples templates (pas de "if", "for" etc !).
Attention: Certains tutoriels que vous pouvez trouver sur le web ne sont pas à jour. D'autres vous engagent dans des mauvaises pistes. Essayez de '''tout''' faire avec des simples templates (pas de "if", "for" etc !).


;Transparents
C.f. [[STIC:STIC_I_-_exercice_2]]
: [http://tecfa.unige.ch/guides/xml/pointers.html TECFA's XML page]
: [http://tecfa.unige.ch/guides/tie/html/xml-dom/xml-dom.html Introduction à XML et DOM] - [http://tecfa.unige.ch/guides/tie/pdf/files/xml-dom.pdf PDF file] , (transparents)
: [http://tecfa.unige.ch/guides/tie/html/xml-tech/xml-tech.html Introduction technique à XML] - [http://tecfa.unige.ch/guides/tie/pdf/files/xml-tech.pdf PDF file] , (transparents)
: [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)


; Exemples
; Exemples
: [http://tecfa.unige.ch/tecfa-people/tecfa-people.html#stud Exemples étudiants] (Maya, Linus, etc.)
: [http://tecfa.unige.ch/tecfa-people/tecfa-people.html#stud Exemples étudiants] (Maya, Linus, etc.).
 
; Autres
: [[:en:XSLT|XSLT]] (en, liens)
: [[:en:XML|XML]] (en, mini-tutoriel + liens)
: [[:en:XSLT_Tutorial_-_Basics|XSLT Tutorial]] (en, mini-tutoriel)


[[Category: STIC]]
[[Category: STIC]]

Version du 24 septembre 2009 à 22:25

Cette page fait partie des cours STIC I et STIC II

Enoncé de l'exercice 3

Cet exercice du cours STIC I vous permet:

  • d'apprendre à éditer une page XML avec un éditeur XML
  • d'apprendre un peu de XSLT
  • de perfectionner vos connaissances en CSS

Tâche

  • Faites votre page travaux en suivant les Instructions ci-dessous. (Notamment: Ne modifiez pas la DTD qu'on vous impose. L'exercice consiste principalement à améliorer une XSLT et à styler la sortie HTML !!)
  • La page sera accessible par l’URL
  http://tecfaetu.unige.ch/etu-maltt/pixel/votre login/welcome.xml

Par exemple:

  http://tecfaetu.unige.ch/etu-maltt/maya/wipfli/
  • Une page d'accueil/rapport pour l'exercice est à placer ici:
  /etu-maltt/pixel/login/stic/ex3/

Exemple:

 http://tecfaetu.unige.ch/etu-maltt/oda/dupont/ex3

Note: N'oubliez pas de copier aussi la DTD et la XSLT. Donc dans le répetoire etu-maltt/oda/votre login/ il faut avoir les fichiers suivants:

  /etu-maltt/oda/login/welcome.xml
  /etu-maltt/oda/login/travaux.dtd
  /etu-maltt/oda/login/travaux.xsl
  /etu-maltt/oda/login/travaux.css

Contraintes

  • Cette page indexera tous vos travaux
  • Il faut utiliser la DTD XML telle quelle (!) mise à votre disposition
  • Vous devez adapter la feuille XSLT (PAS la DTD !)
  • Le HTML généré doit être valide
  • Une fois éditée votre page travail, je vous conseille de finir d'abord l'exercice 2. Votre DTD à vous sera sans doute plus simple, c.a.d. mieux adapté pour faire les premiers pas avec XSLT.
  • Le HTML généré doit être stylé avec CSS

Il vous faut donc produire 4 fichiers:

  • la page travail en XML
  • un fichier XSLT qui va avec
  • un fichier CSS importé par le XSLT
  • un rapport.

Le rapport:

  • Titre, auteur et date
  • Le résulat: Lien vers la page travail, lien vers le fichier *.xsl utilisé
  • 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

  • Respect des contraintes + emplacement de fichiers
  • Qualité du rapport
  • Style, mais créez d'abord juste le contenu. Revenez plus tard une fois que vous avez compris un peu de XSLT.

Instructions

Vous avez besoin de: Un client SFTP ou l'explorateur Windows, XEmacs et les 4 fichiers "travaux.dtd", "welcome.xml", "travaux.xsl" et "example.xml" d'être présents dans la racine de votre espace Travaux.

Etapes à suivre:

  1. Copiez les 5 fichiers "travaux.dtd", "travaux.xsl", "ENLEVERwelcome.xml", "travauxdoc.txt" et "example.xml" depuis http://tecfa.unige.ch/tecfa/teaching/staf14/files/workpage/
    • Dans Firefox: "save link as" ("sauver lien sous")
    • Ne faites pas "SAVE AS" d'une page XML déjà affichée dans le navigateur Web. Vous pouvez perdre de l'information ou encore vous retrouver avec du simple HTML !
  2. Renommez le fichier ENLEVERwelcome.xml en welcome.xml
  3. Lancez un éditeur XML et ouvrez ce fichier "welcome.xml"
  4. Remplissez les balises xml d'une façon logique qui puissent décrire votre page Travaux MALTT / STAF et n'oubliez pas de sauver de temps en temps! Vous allez trouver tous les explications que vous aurez besoin dans le fichier travauxdoc.txt.
  5. Si vous travaillez en local (par ex chez vous), une fois terminé, il faut transférer tous les fichiers avec FTP dans votre espace Travaux.
  6. Vérifiez les changements que vous avez fait de temps en temps avec votre browser préféré soit en local soit à l'URL suivant: http://tecfaetu.unige.ch/etu-maltt/pixel/votre login/
  7. Félicitations!!! Vous avez votre première page en XML! Et si vous la trouvez pas très jolie c'est à vous maintenant de changer sa mise en forme en apprennant XSLT :) (fichier travaux.xsl)

Ressources

Attention: Certains tutoriels que vous pouvez trouver sur le web ne sont pas à jour. D'autres vous engagent dans des mauvaises pistes. Essayez de tout faire avec des simples templates (pas de "if", "for" etc !).

C.f. STIC:STIC_I_-_exercice_2

Exemples
Exemples étudiants (Maya, Linus, etc.).