« STIC:STIC II - exercice 11 (Tetris) » : différence entre les versions

De EduTech Wiki
Aller à la navigation Aller à la recherche
mAucun résumé des modifications
mAucun résumé des modifications
 
(9 versions intermédiaires par le même utilisateur non affichées)
Ligne 1 : Ligne 1 :
{{stic12}}
{{stic_archive}}
<categorytree mode="pages" depth="0" style="float:right; clear:right; margin-left:3px; border:1px solid gray; padding:0.7ex; background-color:#f9f9f9;">STIC</categorytree>
<categorytree mode="pages" depth="0" style="float:right; clear:right; margin-left:3px; border:1px solid gray; padding:0.7ex; background-color:#f9f9f9;">STIC</categorytree>
== Enoncé de l'exercice 11 ==
== Enoncé de l'exercice 11 ==
Ligne 10 : Ligne 10 :
=== Tâche ===
=== Tâche ===


* Créez soit (a) une page HTML5 ou une page XHTML qui contient du SVG (c.f. l'exemple modèle ci-dessous), (b) soit une animation SVG pour device portable, (c) soit une visualisation de données XML->SVG
* Créez soit une page HTML5 qui contient du SVG ou une page SVG "pure"
* Soit:
** la page contient des dessins SVG avec au moins une animation/interaction SVG/SMIL
** le contenu est généré avec XSLT


Navigateurs:
Support navigateurs:
* Pour visualiser un contenu HTML5/SVG ou SVG autonome ou XHTML+SVG, '''Il faut utiliser un navigateur récent (fin 2011)''' pour voir les contenus. IE7/IE8 n'a pas de support SVG, IE9 ne fait pas du SMIL.
* HTML5/SVG ou SVG autonome statique: Tous les navigateurs
* SVG sur portables marche avec les navigateurs de type Opera plus les Smartphones Apple et Android récents (!). A vous de se renseigner.
* IE9/10 ne fait pas du SMIL !
* Ceux qui ont des machines ne permettant pas de mise à jour, peuvent soit faire du XHTML avec Firefox, soit installer Opera.


N'oubliez pas la contribution au wiki ! Suggestions:
N'oubliez pas la contribution au wiki ! Suggestions:
* [[SVG]]
* [[SVG]], [[Tutoriel SVG statique]], [[tutoriel SVG dynamique avec SMIL]], [[tutoriel SVG dynamique avec DOM]]
* [[Tutoriel SVG statique]] et [[:en:Static SVG tutorial]] et [[:en:Using SVG with HTML5 tutorial]]
* [[tutoriel SVG dynamique avec SMIL]] et [[:en:SVG/SMIL animation tutorial]]
* [[tutoriel SVG dynamique avec DOM]] (brouillon)
* [[:en:XSLT to generate SVG tutorial]]
* [[Image vectorielle]]
* [[Image vectorielle]]
; En Anglais
* [[:en:Static SVG tutorial]], [[:en:Using SVG with HTML5 tutorial]], [[:en:SVG/SMIL animation tutorial]], [[:en:Interactive SVG-SMIL animation tutorial]], [[:en:XSLT to generate SVG tutorial]]


=== Outils et clipart ===
=== Outils et clipart ===


* Editeur XML ([[:en:Exchanger_XML_Editor|XML Exchanger]] contient déjà plusieurs variantes de DTDs pour SVG)
* Editeur XML ([[:en:Exchanger_XML_Editor|XML Exchanger]] contient déjà plusieurs variantes de DTDs pour SVG)
* Outils de dessin (à option !): Inkscape, Illustrator, etc.
* Outils de dessin (à option !): [[Inkscape]], Illustrator, etc.
* Outils de dessin en ligne: [http://svg-edit.googlecode.com/svn/tags/stable/editor/svg-editor.html SVG-edit] ('''meilleur choix pour les débutant''')
* Outils de dessin en ligne: [http://svg-edit.googlecode.com/svn/tags/stable/editor/svg-editor.html SVG-edit] ('''meilleur choix pour les débutant''')
* Clipart: Voir [[:en:clipart]] et surtout [http://www.openclipart.org/ Open Clip Art Library]
* Clipart: Voir [[:en:clipart]] et surtout [http://www.openclipart.org/ Open Clip Art Library]


; Attention:  
; 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 les navigateurs n'arrivent pas à afficher tous les dessins comme il faut. Les implémentations de SVG statique ne sont pas totalement complètes.
* 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.). Lire [[:en:Using Inkscape for web animation]]
* Il faut également vérifier la version de SVG ! Certains navigateurs ne font pas du SVG 1.2 Tiny! 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, Chrome et Firefox implémentent SVG dynamique (c.a.d. les balises "[[:en:SMIL|SMIL]]"). Dans les autres navigateurs il faut utiliser JavaScript/DOM pour ajouter de l'interactivité et des animations nécessaires.
* Vous avez aussi l'option de faire une application SVG pour un portable device. Dans ce cas je ne demande pas que le SVG soit imbriqué dans du HTML. Il faut, par contre, explorer un peu plus soi-même ....
* 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. '''Utilisez HTML5''' c'est plus facile. Il suffit de bien réussir l'entête et la déclaration du namespace SVG dans la balise svg.
* 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. '''Utilisez HTML5''' c'est plus facile. Il suffit de bien réussir l'entête et la déclaration du namespace SVG dans la balise svg.


Ligne 42 : Ligne 40 :


* Contenu de la page selon vos envies (mais en rapport avec une thématique MALTT)
* Contenu de la page selon vos envies (mais en rapport avec une thématique MALTT)
* La page doit contenir un élément dynamique (conseillé) et/ou un élément interactif (plutôt déconseillé à ce stade)
* La page doit soit contenir un élément dynamique et élément interactif soit être générée dynamiquement.
* La page doit être bien formée et valide.
* La page doit être bien formée et valide.
* Vous pouvez utiliser du clipart SVG fait par d'autres, mais à condition d'indiquer la source dans votre page XHTML ''et'' dans le rapport.
* Vous pouvez utiliser du clipart SVG fait par d'autres, mais à condition d'indiquer la source dans votre page XHTML ''et'' dans le rapport.
Ligne 48 : Ligne 46 :
'''Le rapport''':
'''Le rapport''':
* Titre, auteur et date
* Titre, auteur et date
* Liens vers le résulat (fichier XHTML/SVG) et indiquez avec '''quelle configuration on peut voir votre contenu'''.
* Liens vers le résultat (fichier HTML/SVG) et indiquez avec '''quelle configuration on peut voir votre contenu'''.
* Objectifs de la page: Elle sert à quoi / quelle population ?
* Objectifs de la page: Elle sert à quoi / quelle population ?
* Discussion du design
* Discussion du design
Ligne 55 : Ligne 53 :
* Ressources utilisées, bibliographie.
* Ressources utilisées, bibliographie.


Emplacement du rapport avec les liens vers le dispositif xhtml/svg:
Emplacement du rapport avec les liens vers le dispositif html/svg:
  /etu-maltt/RD2D/<login>/stic/ex13/
  /etu-maltt/tetris/<login>/stic-2/ex11/


=== Evaluation ===
=== Evaluation ===
 
C.f. la grille dans Moodle (même critères que pour les exercices Flash de STIC-I)
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
* Bonus: Page sans erreur (XHTML doit être bien formé, HTML 5 validé avec http://validator.w3.org/)
* '''Bonus''': Bonne animation ou éléments de scripting
* '''Malus''': Page statique seulement. Si vous n'avez pas le temps pour apprendre du SVG dynamique, faites au moins une page statique intéressante et qui donnera un 5 au moins si le reste est ok (rapport,wiki).
* Contribution au wiki


=== Exemples modèle ===
=== Exemples modèle ===


; Simple (pour avoir une très mauvais note)
; Simple (pour avoir une très très mauvais note)
* http://tecfa.unige.ch/guides/svg/ex/svg-intro/hello-svg-within-xhtml.xhtml
* http://tecfa.unige.ch/guides/svg/ex/svg-intro/hello-svg-within-xhtml.xhtml


; Seulement statique (pour avoir une mauvaise note)
; Exemples du Wiki:  
: Un diagramme SVG fait avec Inkscape (mais exporté en SVG normal)
: http://tecfa.unige.ch/guides/svg/ex/
* http://tecfa.unige.ch/guides/svg/ex/svg-intro/inkscape-drawing/
* http://tecfa.unige.ch/guides/svg/ex/svg-intro/inkscape-drawing/cables_salle_du_fond.xhtml


; Bien
; Travaux d'étudiants STIC II ou STIC I (plusieurs années)
* [http://tecfaetu.unige.ch/etu-maltt/qwerty/marchonl/STIC-2/ex13/illusion.xhtml Illusion optique] (Lucie Marchon)
* [http://tecfaetu.unige.ch/etu-maltt/qwerty/marchonl/STIC-2/ex13/illusion.xhtml Illusion optique] (Lucie Marchon)


Sinon voir:
Sinon voir:
* [[:en:SVG links]] (liste de liens). Notamment: [[:en:SVG_links#Example_sites example sites]]
* [[:en:SVG links]] (liste de liens).  
* Fichiers [http://tecfa.unige.ch/guides/svg/learnSVG/ Learn SVG] (namespaces à réparer)
* Fichiers [http://tecfa.unige.ch/guides/svg/learnSVG/ Learn SVG] (namespaces à réparer)
* Fichiers [http://tecfa.unige.ch/guides/svg/essentialSVG/ Essential SVG] (namespaces à réparer .....)
* Fichiers [http://tecfa.unige.ch/guides/svg/essentialSVG/ Essential SVG] (fichiers du livre ci-dessous, namespaces à réparer .....)
* [http://commons.oreilly.com/wiki/index.php/SVG_Essentials SVG Essentials] On-line SVG textbook. Wiki version of J. David Eisenberg (2002), ''SVG Essentials'', O'Reilly
* [http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html An SVG Primer for Today's Browsers] W3C Working Draft — September 2010. (200+ pages)


== Activités en classe ==
== Activités en classe ==
Ligne 121 : Ligne 111 :
</source>
</source>


=== SVG dans XHTML ===
=== SVG dans XHTML (à option !!) ===
* Copiez/collez le contenu suivant dans Exchanger Lite ou un autre éditeur XML.
* Copiez/collez le contenu suivant dans Exchanger Lite ou un autre éditeur XML.
* Ce contenu est aussi disponible [http://tecfa.unige.ch/guides/svg/ex/svg-intro/hello-svg-within-xhtml.xhtml ici]
* Ce contenu est aussi disponible [http://tecfa.unige.ch/guides/svg/ex/svg-intro/hello-svg-within-xhtml.xhtml ici]
Ligne 165 : Ligne 155 :
</body>
</body>
</html>
</html>
</source>
=== Animation ===
* [http://tecfa.unige.ch/guides/svg/ex/anim-trans/animate-size2.svg http://tecfa.unige.ch/guides/svg/ex/anim-trans/animate-size2.svg]
<source lang="XML">
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">
  <title>Simple animate example avec une référence xLink</title>
  <desc>Rectangle shape will change</desc>
  <rect id="monRect" x="50" y="50" width="10" height="100" style="fill:#CCCCFF;stroke:#000099"/>
  <animate xlink:href="#monRect" attributeName="width" 
  from="10px"  to="100px" begin="0s" dur="10s" />
  <animate xlink:href="#monRect" attributeName="height"
  from="100px" to="10px"  begin="0s" dur="10s" />
  <text x="50" y="170" style="stroke:#000099;fill:#000099;font-size:14;">
  Hello. Admire the dynamic rectangle. Animation defined with targetElement.</text>
</svg>
</source>
=== Simple interactivité ===
* [http://tecfa.unige.ch/guides/svg/ex/mouse-over/mouse-over.svg http://tecfa.unige.ch/guides/svg/ex/mouse-over/mouse-over.svg]
<source lang="XML">
<?xml version="1.0" ?>
<svg height="200" width="500"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns="http://www.w3.org/2000/svg">
  <ellipse stroke-width="2" stroke="black" fill="yellow"
          cx="3cm" cy="2cm" ry="1cm" rx="2cm">
    <animate fill="freeze" dur="0.1s" to="blue" from="yellow"
                  attributeName="fill" begin="mouseover"/>
    <animate fill="freeze" dur="0.1s" to="yellow" from="blue"
                  attributeName="fill" begin="mouseout"/>
  </ellipse>
</svg>
</source>
</source>


Ligne 201 : Ligne 230 :
* Voir aussi: Chapitre 9 du livre LearnSVG
* Voir aussi: Chapitre 9 du livre LearnSVG


; Liens edutechwiki français
; Liens edutechwiki français (les versions Anglaises sont meilleures !!)
: [[tutoriel SVG statique]] (incomplet)
: [[tutoriel SVG statique]] (incomplet)
: [[tutoriel SVG dynamique avec SMIL]] (brouillon)
: [[tutoriel SVG dynamique avec SMIL]] (brouillon)
: [[tutoriel SVG dynamique avec DOM]] (gros brouillon)
: [[tutoriel SVG dynamique avec DOM]] (gros brouillon)
: [[Type MIME]]
: [[Type MIME]]
; Liens techniques edutech wiki anglais
:[[:en:SVG links]] (liste d'outils, tutoriels, sites, etc).
: [[:en:SVG]]
: [[:en:Using SVG with HTML5 tutorial]]
: [[:en:Static SVG tutorial]]
: [[:en:SVG/SMIL animation tutorial]]
: [[:en:Using Inkscape for web animation]]
: [[:en:Interactive SVG-SMIL animation tutorial]]
: [[:en:XSLT to generate SVG tutorial]]
:[[:en:XHTML]] (à option, pour les nostalgiques!!)
:[[:en:XML namespace]]


; Transparents (qualité de type "à refaire")
; Transparents (qualité de type "à refaire")
Ligne 217 : Ligne 258 :
: Surtout: http://tecfa.unige.ch/guides/svg/ex/svg-intro/
: Surtout: http://tecfa.unige.ch/guides/svg/ex/svg-intro/
: [[STIC:STIC I - exercice 5 (Nestor-Pixel)]] (fouillez dans les pages travaux)
: [[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
; Bon site avec des exemples

Dernière version du 19 février 2015 à 17:43

Cette page fait partie des archives des cours Cours STIC (STIC I, STIC II,STIC III,STIC IV)

STIC

Enoncé de l'exercice 11

Cet exercice du cours STIC II vous permet:

  • de vous familiariser avec SVG statique et SVG dynamique avec les balises SMIL
  • (à option!), de vous familiariser avec SVG interactif ou encore SVG dynamique avec le DOM
  • d'apprendre la raison d'être de XHTML (donc comprendre pourquoi XHTML 1.x était plus intéressant qu'HTML 4), mais aussi pourquoi SVG a été finalement intégrée dans HTML5.

Tâche

  • Créez soit une page HTML5 qui contient du SVG ou une page SVG "pure"
  • Soit:
    • la page contient des dessins SVG avec au moins une animation/interaction SVG/SMIL
    • le contenu est généré avec XSLT

Support navigateurs:

  • HTML5/SVG ou SVG autonome statique: Tous les navigateurs
  • IE9/10 ne fait pas du SMIL !

N'oubliez pas la contribution au wiki ! Suggestions:

En Anglais

Outils et clipart

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.). Lire en:Using Inkscape for web animation
  • 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. Utilisez HTML5 c'est plus facile. Il suffit de bien réussir l'entête et la déclaration du namespace SVG dans la balise svg.

Contraintes

  • Contenu de la page selon vos envies (mais en rapport avec une thématique MALTT)
  • La page doit soit contenir un élément dynamique et élément interactif soit être générée dynamiquement.
  • La page doit être bien formée et valide.
  • 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ésultat (fichier HTML/SVG) et indiquez avec quelle configuration on peut voir votre contenu.
  • Objectifs de la page: Elle sert à quoi / quelle population ?
  • Discussion du design
  • La production: bref résumé de la démarche
  • Difficultés, auto-évaluation, remarques
  • Ressources utilisées, bibliographie.

Emplacement du rapport avec les liens vers le dispositif html/svg: 

/etu-maltt/tetris/<login>/stic-2/ex11/

Evaluation

C.f. la grille dans Moodle (même critères que pour les exercices Flash de STIC-I)

Exemples modèle

Simple (pour avoir une très très mauvais note)
Exemples du Wiki
http://tecfa.unige.ch/guides/svg/ex/
Travaux d'étudiants STIC II ou STIC I (plusieurs années)

Sinon voir:

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 (à option !!)

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

Animation

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" 
     xmlns:xlink="http://www.w3.org/1999/xlink">
  <title>Simple animate example avec une référence xLink</title>
  <desc>Rectangle shape will change</desc>
  <rect id="monRect" x="50" y="50" width="10" height="100" style="fill:#CCCCFF;stroke:#000099"/>
  <animate xlink:href="#monRect" attributeName="width"  
	   from="10px"  to="100px" begin="0s" dur="10s" />
  <animate xlink:href="#monRect" attributeName="height"
	   from="100px" to="10px"  begin="0s" dur="10s" />
  <text x="50" y="170" style="stroke:#000099;fill:#000099;font-size:14;">
  Hello. Admire the dynamic rectangle. Animation defined with targetElement.</text>
</svg>

Simple interactivité

<?xml version="1.0" ?>
<svg height="200" width="500"
 xmlns:xlink="http://www.w3.org/1999/xlink"
 xmlns="http://www.w3.org/2000/svg">
 
  <ellipse stroke-width="2" stroke="black" fill="yellow"
           cx="3cm" cy="2cm" ry="1cm" rx="2cm">
    <animate fill="freeze" dur="0.1s" to="blue" from="yellow"
                  attributeName="fill" begin="mouseover"/>
    <animate fill="freeze" dur="0.1s" to="yellow" from="blue"
                  attributeName="fill" begin="mouseout"/>
  </ellipse>
</svg>

Liens

Introduction officielle du W3C
SVG Primer, en Anglais, très bien faite. Seule critique: Il manque HTML 5 (donc on peut simplifier leurs exemples XHTML ...)
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 (les versions Anglaises sont meilleures !!)
tutoriel SVG statique (incomplet)
tutoriel SVG dynamique avec SMIL (brouillon)
tutoriel SVG dynamique avec DOM (gros brouillon)
Type MIME
Liens techniques edutech wiki anglais
en:SVG links (liste d'outils, tutoriels, sites, etc).
en:SVG
en:Using SVG with HTML5 tutorial
en:Static SVG tutorial
en:SVG/SMIL animation tutorial
en:Using Inkscape for web animation
en:Interactive SVG-SMIL animation tutorial
en:XSLT to generate SVG tutorial
en:XHTML (à option, pour les nostalgiques!!)
en:XML namespace
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)
Bon site avec des exemples
Open Clip Art Library. Très large repositoire de clipart (et juste du dessin ...)
liens SVG (Edutechwiki en)
Spécifications et DTDs
Scalable Vector Graphics (SVG) 1.1 Specification
Scalable Vector Graphics (SVG) Tiny 1.2 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_II_-_exercice_11_(Tetris)&oldid=44431 »