« STIC:STIC I - exercice 5 (Nestor-Pixel) » : différence entre les versions
Aller à la navigation
Aller à la recherche
m (using an external editor) |
m (using an external editor) |
||
Ligne 1 : | Ligne 1 : | ||
{{stic12}} | {{stic12}} | ||
== Enoncé de l'exercice 5 == | == Enoncé de l'exercice 5 == | ||
Ligne 5 : | Ligne 4 : | ||
Cet exercice du cours [[STIC I]] vous permet: | Cet exercice du cours [[STIC I]] vous permet: | ||
* de vous familiariser avec SVG (statique) | * de vous familiariser avec SVG (statique) | ||
* (à option!), de vous familiariser avec SVG/DOM ou SVG/SMIL | |||
* d'apprendre à intégrer d'autres formats dans XHTML | * d'apprendre à intégrer d'autres formats dans XHTML | ||
=== Tâche === | === Tâche === | ||
* Créez une page XHTML | * Créez une page XHTML qui contient du SVG | ||
Emplacement du rapport et du fichier xhtml/svg: | Emplacement du rapport et du fichier xhtml/svg: | ||
/etu-maltt/nestor/<login>/stic/ex5/ | /etu-maltt/nestor/<login>/stic/ex5/ | ||
Note: '''Il faut utiliser soit Opéra, soit Firefox''' pour voir les contenus. Cela ne marchera pas avec IE7 (Si vous avez encore IE 6, vous | |||
pouvez installer le plugin SVG de Adobe). | |||
Actuellement, Opéra est le seul navigateur qui implémente les balises d'animation. | |||
=== Outils === | === Outils === | ||
Ligne 24 : | Ligne 28 : | ||
* Contenu de la page selon vos envies (mais en rapport avec une thématique MALTT) | * Contenu de la page selon vos envies (mais en rapport avec une thématique MALTT) | ||
* La page doit être bien formée. Bonus si elle est valide aussi. | * La page doit être bien formée. Bonus si elle est valide aussi (mais n'essayez pas ...) | ||
* Vous pouvez utiliser du clipart SVG fait par d'autres, mais à condition d'indiquer la source dans votre page XHTML ''et'' dans le rapport. | * 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''': | '''Le rapport''': | ||
* Titre, auteur et date | * Titre, auteur et date | ||
* Liens vers le résulat (fichier XHTML/SVG) | * Liens vers le résulat (fichier XHTML/SVG) et indiquez avec '''quelle configuration on peut voir votre contenu'''. | ||
* Objectifs de la page: Elle sert à quoi / quelle population ? | * Objectifs de la page: Elle sert à quoi / quelle population ? | ||
* Quelques notes sur le design | * Quelques notes sur le design | ||
Ligne 41 : | Ligne 45 : | ||
* Qualité de la page | * Qualité de la page | ||
* Richesse de la page | * Richesse de la page | ||
* Bonus: Page validé (pour une fois, je demande juste du bien formé...) | * Bonus: Page validé (pour une fois, je demande juste du bien XHTML bien formé...) | ||
* Bonus: Eléments MathML en plus | * Bonus: Eléments MathML en plus, SVG dynamique (DOM ou balises SMIL) | ||
== Activités en classe == | == Activités en classe == | ||
* Modification d'un petit contenu SVG | * Modification d'un petit contenu SVG | ||
* Copiez/collez le contenu suivant dans Exchanger Lite). | |||
<pre> | <pre> | ||
<?xml version="1.0" ?> | <?xml version="1.0" ?> | ||
Ligne 88 : | Ligne 93 : | ||
: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-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/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). | |||
; Liens techniques edutech wiki anglais | ; Liens techniques edutech wiki anglais | ||
:[[:en:XHTML]] | :[[:en:XHTML]] | ||
:[[:en:XML namespace]] | :[[:en:XML namespace]] | ||
:[[:en:SVG links]] (liste d'outils, tutoriels, sites, etc). | |||
; Autres liens | ; Autres liens |
Version du 24 octobre 2007 à 15:57
Enoncé de l'exercice 5
Cet exercice du cours STIC I vous permet:
- de vous familiariser avec SVG (statique)
- (à option!), de vous familiariser avec SVG/DOM ou SVG/SMIL
- d'apprendre à intégrer d'autres formats dans XHTML
Tâche
- Créez une page XHTML qui contient du SVG
Emplacement du rapport et du fichier xhtml/svg:
/etu-maltt/nestor/<login>/stic/ex5/
Note: Il faut utiliser soit Opéra, soit Firefox pour voir les contenus. Cela ne marchera pas avec IE7 (Si vous avez encore IE 6, vous pouvez installer le plugin SVG de Adobe). Actuellement, Opéra est le seul navigateur qui implémente les balises d'animation.
Outils
- Editeur XML
- A option: Inkscape, Illustrator, etc.
- Clipart: Voir Open Clip Art Library
Contraintes
- Contenu de la page selon vos envies (mais en rapport avec une thématique MALTT)
- La page doit être bien formée. Bonus si elle est valide aussi (mais n'essayez pas ...)
- 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ésulat (fichier XHTML/SVG) et indiquez avec quelle configuration on peut voir votre contenu.
- Objectifs de la page: Elle sert à quoi / quelle population ?
- Quelques notes sur le design
- La production: bref résumé de la démarche
- Difficultés, auto-évaluation, remarques
- Ressources utilisées, bibliographie.
Evaluation
- Qualité du rapport (y compris discussion des besoins et du vocabulaire)
- Qualité de la page
- Richesse de la page
- Bonus: Page validé (pour une fois, je demande juste du bien XHTML bien formé...)
- Bonus: Eléments MathML en plus, SVG dynamique (DOM ou balises SMIL)
Activités en classe
- Modification d'un petit contenu SVG
- Copiez/collez le contenu suivant dans Exchanger Lite).
<?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, IE 6/7 n'implémente ni XHTML ni SVG </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> </body> </html>
Liens
- Transparents
- 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).
- Liens techniques edutech wiki anglais
- en:XHTML
- en:XML namespace
- en:SVG links (liste d'outils, tutoriels, sites, etc).
- Autres liens
- Mozilla SVG Project
- SVG in Firefox (Table des balises implémentées)
- Croczilla SVG Samples
- Spécifications et DTDs
- Scalable Vector Graphics (SVG) 1.1 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)