STIC:STIC I - exercice 2 (Wall-e)

De EduTech Wiki
Aller à la navigation Aller à la recherche

Cette page fait partie des cours STIC I et STIC II

STIC

Introduction

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

Connaissances/compétences envisagées

À l'issue de cet exercice vous devez avoir acquis les connaissances/compétences suivantes :

  • Savoir reconnaître et définir les différences entre des images vectorielles et matricielles
  • Structure et balises/attributs principaux du langage SVG
  • Savoir créer/adapter/modifier une représentation graphique vectorielle (e.g. avec Inkscape ou alternative)
  • Savoir inclure un langage de type XML ou un fichier de type .svg dans un document de type HTML5
  • Comprendre comment le DOM peut se composer de différents éléments mais maintenir certaines propriétés (e.g. styler avec CSS des balises SVG)
  • Savoir créer/reconnaître un événement simple à la base du concept d'interactivité d'une page web (click, mouse over, ...)

Prérequis

Pour suivre le cours en classe il vous faudra :

  • Un logiciel/application web pour créer/modifier du code ou un fichier .svg

Activités en classe

SVG statique

Création d'un petit contenu SVG avec un éditeur XML

  • 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

Exploration d'outils SVG

Démo SVG statique (éléments de base)

SVG dans HTML5

Voir: Tutoriel SVG avec HTML5

Code à copier/coller 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>

SVG et CSS

Il est possible d'appliquer des propriétés de style aux éléments SVG directement à travers CSS, de la même manière par rapport à des éléments HTML. 

<!doctype html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Use CSS to style SVG elements</title>
    <style>
        svg {
            border: 1px solid #999;
        }
        
        svg circle {
            cx: 50;
            cy: 50;
            r: 30;
            fill: green;
            stroke: black;
        }
        
        .my-svg-rect {
            fill: blue;
            stroke: darkorange;
            stroke-width: 5;
        }
    </style>
</head>

<body>

    <h1>Use CSS to style SVG elements</h1>
    <p>The circle is entirely styled with CSS, whereas the two rectangles share the same class, but have different attributes inside the SVG tag.</p>
    <svg height="400" xmlns="http://www.w3.org/2000/svg">
        <circle />
        <rect x="100" y="100" width="40" height="40" class="my-svg-rect" />
        <rect x="50" y="200" width="60" height="60" class="my-svg-rect" />
    </svg>

</body>

</html>

L'utilisation des CSS peut être utile notamment en ce qui concerne les éléments interactifs (voir plus bas), car le navigateur ne change pas automatiquement le curseur comme c'est le cas pour les liens hypertextuels ou les boutons HTML. Il faudra donc utiliser les propriétés de style pour modifier le curseur :

Animation

Voir: Tutoriel SVG dynamique avec SMIL 

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

Voir: Tutoriel SVG/SMIL animations interactives 

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

Projet 2 / 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 SVG/SMIL et un élément interactif (par exemple un bouton). Vous êtes libres d'ajouter d'autres technologies (par exemple programmation DOM/SVG).
  • 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)
    • Boxy SVG (disponible en tant qu'extension Google Chrome)
  • 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 HTML et dans le rapport.
  • Faites un rapport HTML5

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 mauvaise 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 Wall-e: lundi 31 oct. 2016, à 08h59:59)

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_(Wall-e)&oldid=63313 »