« STIC:STIC I - exercice 2 (Wall-e) » : différence entre les versions

Dernière version du 13 septembre 2017 à 17:04

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

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

Voir Outils et clipart

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

Voir aussi: Tutoriel SVG statique

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.

http://codepen.io/mafritz/pen/EgmAqx

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

Voir http://www.w3schools.com/cssref/pr_class_cursor.asp

Animation

Voir: Tutoriel SVG dynamique avec SMIL

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é

Voir: Tutoriel SVG/SMIL animations interactives

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

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:

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 => La traduction a été commencée ICI, 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)
- 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, faites 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
- Voir STIC:Rapport STIC I et II

Evaluation

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

Exemples modèle

Simple (pour avoir une très très mauvaise 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)
Ebullition de l'eau dans des conditions normales de pression (A. Ricci)
Soleil des voyelles (L. Batilly)

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 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.(Attention : ce lien n'était plus disponible le 30 octobre 2016)
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)

« STIC:STIC I - exercice 2 (Wall-e) » : différence entre les versions

Dernière version du 13 septembre 2017 à 17:04

Sommaire

Introduction

Connaissances/compétences envisagées

Prérequis

Activités en classe

SVG statique

SVG dans HTML5

SVG et CSS

Animation

Simple interactivité

Utiliser un dessin fait avec Inkscape

Projet 2 / Tâche

Outils et clipart

Contraintes

Evaluation

Exemples modèle

A rendre

Liens

Menu de navigation

« STIC:STIC I - exercice 2 (Wall-e) » : différence entre les versions

Dernière version du 13 septembre 2017 à 17:04

Introduction

Connaissances/compétences envisagées

Prérequis

Activités en classe

SVG statique

SVG dans HTML5

SVG et CSS

Animation

Simple interactivité

Utiliser un dessin fait avec Inkscape

Projet 2 / Tâche

Outils et clipart

Contraintes

Evaluation

Exemples modèle

A rendre

Liens

Menu de navigation

Rechercher

« STIC:STIC I - exercice 2 (Wall-e) » : différence entre les versions