STIC:STIC I - exercice 2 (Utopia)

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

STIC

Enoncé de l'exercice 2

Cet exercice du cours STIC I vous permet:

• de vous familiariser avec SVG statique et SVG dynamique utilisant les balises SMIL
• de vous familiariser un petit peu avec SVG interactif
• (optional !) d'explorer le SVG dynamique avec le DOM

Tâche

Imaginez un design pédagogique qui nécessite un graphisme animé ....

• Créez une page HTML5 qui contient au moins un graphisme SVG.
• Le SVG doit inclure au moins une animation/interaction SVG/SMIL
• Le tout doit servir à un objectif (pas juste votre objectif d'apprentissage !!)

Support navigateurs:

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

N'oubliez pas la contribution au wiki ! Suggestions:

• SVG, Tutoriel SVG avec HTML5, Tutoriel SVG statique, tutoriel SVG dynamique avec SMIL, tutoriel SVG dynamique avec DOM
• Image vectorielle
• en:Static SVG tutorial, en:Using SVG with HTML5 tutorial, en:SVG/SMIL animation tutorial, en:Interactive SVG-SMIL animation tutorial
• traduire (partiellement) en:XSLT to generate SVG tutorial, en:Using Inkscape for web animation => La traduction a été commencée ICI

Outils et clipart

• Editeur XML (XML Exchanger contient déjà plusieurs variantes de DTDs pour SVG), utile pour "coder un long document à la main"
• Outils de dessin: Inkscape, Illustrator, etc.
• Outils de dessin en ligne: SVG-edit (SVG-edit se retrouve aussi dans l'éditeur BlueGriffon) (meilleur choix pour les débutants)
• Clipart: Voir en:clipart et surtout Open Clip Art Library

Attention

• Si vous travaillez avec Inkscape, vous avez intérêt à enregistrer 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
• Dans la page HTML5, fait attention à 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 ? (Evitez de parler de vos objectifs d'apprentissage....)
• 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/utopia/<login>/stic-1/ex2/

Evaluation

C.f. la grille dans Moodle, notamment la présense d'un objectif en rapport avec le domaine MALTT (qqn. doit apprendre ....)

Exemples modèle

Simple (pour avoir une très très mauvais note)

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

Exemples du Wiki

http://tecfa.unige.ch/guides/svg/ex/

Travaux d'étudiants STIC II ou STIC I (plusieurs années, enfin vous pouvez faire qc. de moins ambitieux ....)

• Illusion optique (Lucie Marchon)
• Un peu de géométrie (V. Follonier)
• Basic Ice Hockey Rules (M. Fritz)

Sinon voir:

• en:SVG links (liste de liens) ou le web ...
• Fichiers Learn SVG (namespaces à réparer)
• Fichiers Essential SVG (fichiers du livre ci-dessous, namespaces à réparer .....)
• SVG Essentials On-line SVG textbook. Wiki version of J. David Eisenberg (2002), SVG Essentials, O'Reilly. Il existe une nouvelle édition de ce livre.
• An SVG Primer for Today's Browsers W3C Working Draft — September 2010. (200+ pages)

A rendre

• Avant la semaine de cours de la période 2 (pour la promotion Utopia: lundi 3 nov. 2014, à 08h59:59)

Activités en classe

SVG statique

• Création d'un petit contenu SVG
• Faites un petit fichier SVG avec un éditeur XML (par exemple ExChanger):
  • Menu File-New->Type->SVG
  • Pour visualiser, soit ouvrir dans Firefox/Chrome/Opera/Safari, soit Menu Tools->Show SVG.
• Essayez de créer un cercle rouge

SVG dans HTML5

Code à copier/collier dans un éditeur... Code live: http://tecfa.unige.ch/guides/svg/ex/html5/circle.html

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

Animation

• http://tecfa.unige.ch/guides/svg/ex/anim-trans/animate-size2.svg

<?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é

• http://tecfa.unige.ch/guides/svg/ex/mouse-over/mouse-over.svg

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

Utiliser un dessin fait avec Inkscape

• Inkscape est un logiel de dessin open source et puissant qui utilise SVG comme format interne. Mais l'outil n'est pas fait pour le web et surtout pas pour créer des animations.

• Voir en:Using Inkscape for web animation pour les divers opérations à faire.

Pour optimiser un fichier:

Fichier -> Propriétés du document... -> dans l'encadré 'Dimensions personnalisées', cliquez sur le petit "+" à côté de 'Redimensionner la page au contenu...' -> cliquez sur le gros bouton 'Ajuster la page au dessin ou à la sélection'.

Fichier -> Sauvegarder sous ... -> Optimized SVG (sélectionnez "enable viewboxing")

Fichier -> Sauvegarder sous .-..-> SVG simple

Liens

Liens edutechwiki français (les versions Anglaises sont meilleures !!)

tutoriel SVG statique

Tutoriel SVG avec HTML5

tutoriel SVG dynamique avec SMIL

Tutoriel SVG/SMIL animations interactives

tutoriel SVG dynamique avec DOM (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

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/

Livre SVG essentials en ligne.

• SVG Essentials On-line SVG textbook. Wiki version of J. David Eisenberg (2002), SVG Essentials, O'Reilly. Il existe une nouvelle édition de ce livre.

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

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)