« STIC:STIC I - exercice 5 (Nestor-Pixel) » : différence entre les versions

De EduTech Wiki
Aller à la navigation Aller à la recherche
 
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 ==


* Petit contenu SVG
* 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/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/TR/XHTMLplusMathMLplusSVG/ An XHTML + MathML + SVG Profile]
; [http://www.w3.org/2002/04/xhtml-math-svg/xhtml-math-svg.dtd xhtml-math-svg.dtd]
: [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

Cette page fait partie des cours STIC I et STIC II

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

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)
Récupérée de « https://edutechwiki.unige.ch/fmediawiki/index.php?title=STIC:STIC_I_-_exercice_5_(Nestor-Pixel)&oldid=6547 »