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

Version du 19 février 2015 à 16:42

Cette page fait partie des cours STIC I et STIC II

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

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

Editeur XML (XML Exchanger contient déjà plusieurs variantes de DTDs pour SVG)
Outils de dessin (à option !): Inkscape, Illustrator, etc.
Outils de dessin en ligne: SVG-edit (meilleur choix pour les débutant)
Clipart: Voir en:clipart et surtout Open Clip Art Library

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)

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)

Illusion optique (Lucie Marchon)

Sinon voir:

en:SVG links (liste de liens).
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
An SVG Primer for Today's Browsers W3C Working Draft — September 2010. (200+ pages)

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

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>

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)

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

Version du 19 février 2015 à 16:42

Sommaire

Enoncé de l'exercice 11

Tâche

Outils et clipart

Contraintes

Evaluation

Exemples modèle

Activités en classe

SVG statique

SVG dans HTML5

SVG dans XHTML (à option !!)

Animation

Simple interactivité

Liens

Menu de navigation

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

Version du 19 février 2015 à 16:42

Enoncé de l'exercice 11

Tâche

Outils et clipart

Contraintes

Evaluation

Exemples modèle

Activités en classe

SVG statique

SVG dans HTML5

SVG dans XHTML (à option !!)

Animation

Simple interactivité

Liens

Menu de navigation

Rechercher

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