« 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 19 : | Ligne 19 : | ||
* Editeur XML | * Editeur XML | ||
* A option: Inkscape, Illustrator, etc. | * A option: Inkscape, Illustrator, etc. | ||
* Clipart: Voir | * Clipart: Voir [http://www.openclipart.org/ Open Clip Art Library] | ||
=== Contraintes === | === Contraintes === | ||
Ligne 44 : | Ligne 44 : | ||
== Activités en classe == | == Activités en classe == | ||
* | * Modification d'un petit contenu SVG | ||
<pre> | |||
<?xml version="1.0" encoding="ISO-8859-1" ?> | |||
<!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> You can embed SVG into XHTML, provided that your browser natively implements | |||
SVG. E.g. Firefox 1.5 supports most of static SVG. | |||
</p> | |||
The SVG part starts below <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 /> | |||
The SVG part ended above | |||
</body> | |||
</html> | |||
</pre> | |||
== Liens == | == Liens == | ||
Ligne 64 : | Ligne 99 : | ||
: [http://www.w3.org/TR/SVG/index.html Scalable Vector Graphics (SVG) 1.1 Specification] | : [http://www.w3.org/TR/SVG/index.html Scalable Vector Graphics (SVG) 1.1 Specification] | ||
: [http://www.yoyodesign.org/doc/w3c/svg1/ La spécification sur les Graphiques Vectoriels Adaptables (SVG), version 1.0] (en français) | : [http://www.yoyodesign.org/doc/w3c/svg1/ La spécification sur les Graphiques Vectoriels Adaptables (SVG), version 1.0] (en français) | ||
: [http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-flat-20030114.dtd SVG 1.1 DTD] | |||
: [http://www.w3.org/TR/XHTMLplusMathMLplusSVG/ An XHTML + MathML + SVG Profile] | |||
: [http://www.w3.org/2002/04/xhtml-math-svg/xhtml-math-svg.dtd xhtml-math-svg.dtd] (juste le driver) | |||
[[Category: STIC]] | [[Category: STIC]] |
Version du 18 octobre 2007 à 19:55
Enoncé de l'exercice 5
Cet exercice du cours STIC I vous permet:
- de vous familiariser avec quelques normes e-learning
- d'apprendre à créer des "paquets e-learning" selon la norme IMS Content Packaging et/ou SCORM 1.2)
Tâche
- Créer une page XHTML/SVG
Emplacement du rapport et du fichier xhtml/svg:
/etu-maltt/nestor/<login>/stic/ex5/
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.
Le rapport:
- Titre, auteur et date
- Liens vers le résulat (fichier XHTML/SVG)
- 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
- Mega Bonus: Page générée avec XSLT (déconseillé pour la plupart)
Activités en classe
- Modification d'un petit contenu SVG
<?xml version="1.0" encoding="ISO-8859-1" ?> <!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> You can embed SVG into XHTML, provided that your browser natively implements SVG. E.g. Firefox 1.5 supports most of static SVG. </p> The SVG part starts below <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 /> The SVG part ended above </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)
- Liens techniques edutech wiki anglais
- en:XHTML
- en:XML namespace
- Autres liens
- Mozilla SVG Project
- SVG in Firefox (Table des balises implémentées)
- 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)