« STIC:STIC II - exercice 13 (Stella) » : différence entre les versions

Version du 26 mars 2011 à 14:35

Cette page fait partie des cours STIC I et STIC II

STIC

Enoncé de l'exercice 13

Cet exercice du cours STIC II 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 (donc comprendre pourquoi XHTML est plus intéressant qu'HTML)

Tâche

Créez une page HTML5 ou une page XHTML qui contient du SVG (c.f. l'exemple modèle ci-dessous).
- Une page XHTML page doit avoir une extension *.xhtml. C'est important, car ces fichiers sont servis par notre serveur en tant que XHTML et non pas en tant que HTML. On ne peut pas inclure du code SVG dans du code HTML 4.x
- Une page HTML5 est plus facile à créer. Il suffit de bien réussir l'entête.

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

/etu-maltt/qwerty/<login>/stic/ex13/

Notes:

Pour visualiser un contenu SVG ou XHTML+SVG, Il faut utiliser soit Opéra, soit Firefox, soit Safari 3x pour voir les contenus. IE7/IE8 n'a pas de support SVG. Notez aussi, qu'actuellement, Opéra et Chrome sont les seuls navigateurs qui implémentent les balises d'animation (une option que vous pouvez explorer ...)
Pour visualiser HTML5+SVG, il faut installer une version Béta, c-a-d Firefox 4, ou Chrome 10 ou IE 9. On conseille Chrome (juste pour changer un peu).

N'oubliez pas la contribution au wiki ! Suggestions:

SVG
Tutoriel SVG statique
tutoriel SVG dynamique avec SMIL (brouillon)
tutoriel SVG dynamique avec DOM (gros brouillon)
Image vectorielle

Outils

Editeur XML (Exchanger contient déjà plusieurs variantes de DTDs SVG)
Outils de dessin (à option !): Inkscape, Illustrator, etc.
Outils de dessin en ligne: SVG-edit
Clipart: Voir en:clipart et surtout Open Clip Art Library

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.
Il faut également vérifier la version de SVG ! Certains navigateurs ne font pas du SVG 1.2 ! Opera et Firefox (aux dernières nouvelles font SVG 1.1. Certains éditeurs XML n'ont peut-être que la DTD pour SVG 1.0. Donc corriger cela au début du fichier si nécessaire !
Seul Opera et Chrome implémentent SVG dynamique (c.a.d. les balises "SMIL"). Dans les autres navigateurs il faut utiliser JavaScript/DOM pour ajouter de l'interactivité et des animations nécessaires.

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

Comme d'habitude (c.f. la grille d'évaluation utilisée pour STIC I). Faites notamment attention aux points suivants:

Qualité du rapport (y compris une discussion des besoins)
Qualité et objectifs de la page (est-ce utile, est-ce un sujet "MALTT", ...)
Richesse de la page (particulièrement important si vous ne faites que du SVG statique; dans ce cas n'hésitez pas à inclure plusieurs dessins)
Bonus: Page sans erreur (XHTML doit être bien formé, HTML 5 validé avec http://validator.w3.org/)
Gros bonus: SVG dynamique (DOM ou balises SMIL)
Contribution au wiki

Exemples modèle

Simple (pour avoir une mauvais note)

http://tecfa.unige.ch/guides/svg/ex/svg-intro/hello-svg-within-xhtml.xhtml

Un diagramme SVG fait avec Inkscape (mais exporté en SVG normal)

Sinon voir

en:SVG links (liste de liens)
Fichiers Learn SVG (namespace à réparer)
Fichiers Essential SVG (namespace à réparer)

Activités en classe

SVG statique

Création 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.
Essayez dde créer un cercle rouge

SVG dans HTML5

<!DOCTYPE html>
<html>
  <head>
    <title>HTML5 SVG demo</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
  </head>

  <body>
    <h1>HTML5 SVG Demo</h1>

A nice green circle:
    <svg id="circle" height="200" xmlns="http://www.w3.org/2000/svg">
      <circle id="greencircle" cx="30" cy="30" r="30" fill="green" />
    </svg>

    <hr>
    <address>Created by DKS. This is free code</address>
  </body>
</html>

SVG dans XHTML

Copiez/collez le contenu suivant dans Exchanger Lite ou un autre éditeur XML.
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

Introduction officielle du W3C: SVG Primer, en Anglais, très bien faite; An SVG Primer for Today's Browsers

Livre LearnSVG en ligne: http://tecfa.unige.ch/guides/svg/learnSVG/ (copie locale protégée de learnsvg.com); Attention, il y a des erreurs dans le code. Les auteurs ont oublié la déclaration namespace pour xlink (3ème line dans le code ci-dessous). Il faut l'ajouter dans la plupart de leurs exemples. Sans doute ils n'ont pas vu que c'est obligatoire étant donné que les anciens plugins SVG marchaient sans .... !! Suivant l'exemple, il faut ajuster, par exemple:

Page simple

<svg height="900" width="900" 
  xmlns="http://www.w3.org/2000/svg">

ou page avec des href

<svg height="900" width="900" 
  xmlns:xlink="http://www.w3.org/1999/xlink"
  xmlns="http://www.w3.org/2000/svg">

ou page avec href et un événement onload

<svg width="100%" height="100%" 
     xmlns="http://www.w3.org/2000/svg" 
     xmlns:xlink="http://www.w3.org/1999/xlink"
     onload="Init(evt);">

Les fichiers exemples sont dans le PDF, par exemple: http://tecfa.unige.ch/guides/svg/learnSVG/fr/pdf/chapitre10_images/

Animation SVG

Animating Your SVG by Charles McCathienevile · 31 OCT, 2006. Bonne intro à l'animation SMIL avec exemples.
Voir aussi: Chapitre 9 du livre LearnSVG

Liens edutechwiki français: tutoriel SVG statique (incomplet); tutoriel SVG dynamique avec SMIL (brouillon); tutoriel SVG dynamique avec DOM (gros brouillon); Type MIME

Transparents (qualité de type "à refaire"): 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/; STIC:STIC I - exercice 5 (Nestor-Pixel) (fouillez dans les pages travaux)

Liens techniques edutech wiki anglais: en:SVG links (liste d'outils, tutoriels, sites, etc).; en:XHTML; en:XML namespace

Bon site avec des exemples: Open Clip Art Library. Très large repositoire de clipart.; Croczilla SVG Samples (mais ignorez ce qui touche à XUL, etc.)

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)

@@ Ligne 161 : / Ligne 161 : @@
 == Liens ==
-; Introduction officille du W3C
+; Introduction officielle du W3C
 : SVG Primer, en Anglais, très bien faite
 : [http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html An SVG Primer for Today's Browsers]

« STIC:STIC II - exercice 13 (Stella) » : différence entre les versions

Version du 26 mars 2011 à 14:35

Sommaire

Enoncé de l'exercice 13

Tâche

Outils

Contraintes

Evaluation

Exemples modèle

Activités en classe

SVG statique

SVG dans HTML5

SVG dans XHTML

Liens

Menu de navigation

« STIC:STIC II - exercice 13 (Stella) » : différence entre les versions

Version du 26 mars 2011 à 14:35

Enoncé de l'exercice 13

Tâche

Outils

Contraintes

Evaluation

Exemples modèle

Activités en classe

SVG statique

SVG dans HTML5

SVG dans XHTML

Liens

Menu de navigation

Rechercher

« STIC:STIC II - exercice 13 (Stella) » : différence entre les versions