STIC:STIC I - exercice 5 (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 5

Cet exercice du cours STIC I vous permet:

  • de vous familiariser avec SVG (statique)
  • (à option!), de vous familiariser avec SVG/DOM ou SVG/SMIL
  • d'apprendre à intégrer d'autres formats dans XHTML

Tâche

  • Créez une page XHTML qui contient du SVG. Cette page doit avoir une extension *.xhtml. C'est important, car ces fichiers sont servis par notre serveur comme XHTML et non pas html...

Emplacement du rapport et du fichier *.xhtml qui contient du xhtml/svg: 

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

Note: Il faut utiliser soit Opéra, soit Firefox, soit Safari 3x pour voir les contenus. Cela ne marchera pas avec IE7 (Si vous avez encore IE 6, vous pouvez installer le plugin SVG de Adobe). Actuellement, Opéra est le seul navigateur qui implémente les balises d'animation.

Outils

  • Editeur XML (Exchanger contient déjà plusieurs variantes de DTDs SVG)
  • Outils de dessing (à option !): Inkscape, Illustrator, etc.
    • Attention: Si vous travaillez avec Inkscape, vous avez intérêt à sauver le résultat en SVG pur (plain SVG, pas Inkscape SVG). Inkscape ajoute dans son propre namespace des informations utiles pour rééditer (calques, etc.). Enlever ces infos réduit considérablement la taille du fichier. Finalement sachez que Firefox n'arrive pas à afficher tous les dessins comme il faut. L'implémentation SVG statique n'est pas totalement complète.
  • Clipart: Voir Open Clip Art Library

Contraintes

  • Contenu de la page selon vos envies (mais en rapport avec une thématique MALTT)
  • La page doit être bien formée. Bonus si elle est valide aussi (mais n'essayez pas ...)
  • Vous pouvez utiliser du clipart SVG fait par d'autres, mais à condition d'indiquer la source dans votre page XHTML et dans le rapport.

Le rapport:

  • Titre, auteur et date
  • Liens vers le résulat (fichier XHTML/SVG) et indiquez avec quelle configuration on peut voir votre contenu.
  • Objectifs de la page: Elle sert à quoi / quelle population ?
  • Quelques notes sur le design
  • 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)
  • Qualité de la page
  • Richesse de la page
  • Bonus: Page validé (pour une fois, je demande juste du bien XHTML bien formé...)
  • Bonus: Eléments MathML en plus, SVG dynamique (DOM ou balises SMIL)


Exemple modèle

Simple (fait à la main)
SVG fait avec Inkscape (mais exporté en SVG normal)

Activités en classe

SVG statique

  • Modification d'un petit contenu SVG
  • Faites un petit fichier SVG avec Exchanger Lite:
    • Menu File-New->Type->SVG
    • Pour visualiser, soit ouvrir dans Firefox/Opera/Safari, soit Menu Tools->Show SVG.
  • Essayer d'ajouter un cercle rouge

SVG dans XHTML

  • Copiez/collez le contenu suivant dans Exchanger Lite).
  • Ce contenu est aussi disponible ici
  • Important: Votre fichier doit s'appeler XXX.xhtml (pas *.svg ou *.html ou *.htm).
<?xml version="1.0" ?>
<!DOCTYPE html 
      PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >

<html xmlns="http://www.w3.org/1999/xhtml"  
      xmlns:svg="http://www.w3.org/2000/svg">
 <head>
  <title>SVG within XHTML Demo</title>
 </head>
 <body>

  <p> On peut imbriquer SVG dans XHTML. Utiliser Firefox ou Opera, IE 6/7 n'implémente ni XHTML ni SVG. A tester
  avec Safari.
  </p>

  Ci-dessous du SVG <hr />

  <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="400" height="300">

   <!-- un petit rectangle avec des coins arroundis  -->
   <rect x="50" y="50" rx="5" ry="5" width="300" height="100" style="fill:#CCCCFF;stroke:#000099"/>
   
   <!-- un texte au meme endroit -->
   <text x="55" y="90" style="stroke:#000099;fill:#000099;font-size:24;">
    HELLO cher visiteur 
   </text>

  </svg>
  <hr />
  Retour au <strong>HTML</strong>
  <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100" height="100">

     <!-- copier / coller d'autres éléments SVG -->

  </svg>
</body>
</html>

Liens

Transparents
http://tecfa.unige.ch/guides/tie/html/svg-intro/svg-intro.html
http://tecfa.unige.ch/guides/tie/html/svg-dyn/svg-dyn.html (A option, surtout la partie DOM)
http://tecfa.unige.ch/guides/tie/html/svg-xslt/svg-xslt.html (A option)
http://tecfa.unige.ch/guides/tie/html/visu-gen/visu-gen.html (A option, pour ceux qui connaissent PHP).
Dossier exemples TECFA
http://tecfa.unige.ch/guides/svg/ex/
Surtout: http://tecfa.unige.ch/guides/svg/ex/svg-intro/
Liens techniques edutech wiki anglais
en:XHTML
en:XML namespace
en:SVG links (liste d'outils, tutoriels, sites, etc).
Autres liens
Mozilla SVG Project
SVG in Firefox (Table des balises implémentées)
Croczilla SVG Samples
Spécifications et DTDs
Scalable Vector Graphics (SVG) 1.1 Specification
La spécification sur les Graphiques Vectoriels Adaptables (SVG), version 1.0 (en français)
SVG 1.1 DTD
An XHTML + MathML + SVG Profile
xhtml-math-svg.dtd (juste le driver)
Récupérée de « https://edutechwiki.unige.ch/fmediawiki/index.php?title=STIC:STIC_I_-_exercice_5_(Nestor-Pixel)&oldid=6711 »