STIC:STIC I - exercice 2 (Utopia)

De EduTech Wiki
Aller à la navigation Aller à la recherche

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:

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)
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 ....)

Sinon voir:

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

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

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.

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)
Récupérée de « https://edutechwiki.unige.ch/fmediawiki/index.php?title=STIC:STIC_I_-_exercice_2_(Utopia)&oldid=48355 »