« Découvrir le SVG/Le SVG pour l'enseignement des mathématiques et de la programmation » : différence entre les versions

Un livre de Wikilivres.
Contenu supprimé Contenu ajouté
→‎1. Découvrir le SVG et premier exemple : début activité 2 ; mise en sous-sections
Ligne 156 : Ligne 156 :
=== 1. Découvrir le SVG et premier exemple ===
=== 1. Découvrir le SVG et premier exemple ===


'''Introduction'''
==== Introduction ====


Le terme SVG signifie en anglais ''scalable vector graphics'' c'est-à-dire « graphismes vectoriels dont on peut modifier l'échelle ». Ce sont des dessins que l'on peut agrandir (zoomer) sans que cela ne fasse apparaître de « grains », de pixels.
Le terme SVG signifie en anglais ''scalable vector graphics'' c'est-à-dire « graphismes vectoriels dont on peut modifier l'échelle ». Ce sont des dessins que l'on peut agrandir (zoomer) sans que cela ne fasse apparaître de « grains », de pixels.
Ligne 166 : Ligne 166 :
On peut créer un dessin au format SVG avec des logiciels de dessin utilisant la souris, comme par exemple Inkscape. Mais il est aussi possible de créer des dessins en tapant directement les instructions à l'aide d'un éditeur de texte.
On peut créer un dessin au format SVG avec des logiciels de dessin utilisant la souris, comme par exemple Inkscape. Mais il est aussi possible de créer des dessins en tapant directement les instructions à l'aide d'un éditeur de texte.


'''Objectif'''
==== Objectif ====


À la fin de la séance, vous saurez créer une image SVG simple et l'afficher.
À la fin de la séance, vous saurez créer une image SVG simple et l'afficher.


'''Activité 1 : créer une image SVG avec un logiciel graphique et l'afficher dans un explorateur Web'''
==== Activité 1 : créer une image SVG avec un logiciel graphique et l'afficher dans un explorateur Web ====


# Ouvrez le logiciel Inkscape [[fichier:Inkscape Logo.svg|26px|logo Inkscape]].
# Ouvrez le logiciel Inkscape [[fichier:Inkscape Logo.svg|26px|logo Inkscape]].
Ligne 198 : Ligne 198 :
<center>'''Fin de l'activité'''<br />***<br />**<br/>*
<center>'''Fin de l'activité'''<br />***<br />**<br/>*
</center>
</center>

==== Activité 2 : Créer une image SVG avec un éditeur de texte ====

[[Fichier:Modele vide pour document SVG.svg|vignette|upright=2.5|Squelette d'un fichier SVG.]]

Une image SVG est un fichier de texte. L'image ci-contre présente le squelette d'un fichier SVG. Il est composé de trois pavés :
# Un pavé d'en-tête qui indique au navigateur Web qu'il s'agit d'une image SVG et qui lui indique des informations complémentaires permettant l'affichage correct de l'image.
# Un pavé contenant les instructions servant à tracer le dessin. Pour l'instant, ce pavé est vide.
# Un pavé de fin de fichier.
Nous pouvons déjà remarquer trois choses :
* les instructions sont mises entre crochets <code>&lt;…&gt;</code> ;
* le pavé (pour l'instant vide) contenant les instructions de dessin est compris entre une balise d'ouverture <code style="color:#0000FF">&lt;svg …&gt;</code> et une balise de fermeture <code style="color:#0000FF">&lt;/svg&gt;</code> ;
* le fichier contient des commentaires, c'est-à-dire du texte facilitant la lecture par un humain mais n'ayant aucune action sur le dessin ; ces commentaires sont inclus dans des balises <code style="color:#008800">&lt;!--…--&gt;</code>.


== Notes ==
== Notes ==

Version du 13 avril 2017 à 13:25

Introduction

Le SVG est un outil de dessin vectoriel, il utilise donc la géométrie. On peut donc s'en servir dans le cadre d'un enseignement de géométrie analytique, pour aborder les notions de coordonnées, vecteurs, transformations du plan et matrices de changement de base par exemple.

C'est également un langage de programmation qui présente l'avantage d'avoir un effet visuel et immédiat (moyennant le rafraîchissement de la page du navigateur affichant l'image) ; il est en cela assez proche du Logo. Il permet d'introduire des notions telles que la rigueur de la syntaxe (en-têtes normalisé, respect de l'orthographe et de la grammaire propre au langage) ou l'organisation arborescente des données.


Pour plus de détails voir : Programmation Logo.

Généralités

Fiche enseignant

  • Objectifs généraux :
    1. Consolider les notions apprises en géométrie.
    2. Découvrir la démarche de programmation.
    3. Comprendre la fonctionnement de l'Internet : notion de codage et de décodage des données, notion de standard.
  • Prérequis pour l'élève :
    • Savoir se servir d'un éditeur de texte.
    • Savoir se servir d'un navigateur Web.
    • Savoir se servir du gestionnaire de fichiers (Explorateur Windows, Finder MacOs, GNOME Commander…).
    • Notion de géométrie analytique.
  • Matériel et logiciel :
    • Un ordinateur pour deux apprenants, voire un ordinateur par apprenant.
    • Un éditeur de texte, de préférence avec coloration syntaxique comme par exemple Notepad++ pour Microsoft Windows[1] ou bien gedit[2].
    • Un navigateur Web supportant le SVG et de préférence le CSS comme par exemple Mozilla Firefox[3].
    • Inkscape[4].
  • Préparation :
    • S'assurer que les apprenant peuvent ouvrir une session. Le cas échéant, créer ou faire créer des comptes individuels (identifiants et des mots de passe) ou bien des comptes « invités ».
    • S'assurer que les outils sont facilement accessibles, par exemple par des icônes sur le bureau.
    • Définir le répertoire (dossier) de travail et s'assurer qu'il est facilement accessible, par exemple par un raccourci sur le bureau.
    • Dans le répertoire de travail, créer les fichiers suivants en lecture seule (les préfixes 0_ et z_ assurent qu'avec le classement alphabétique, les fichiers seront toujours respectivement en tête et en queue de liste) :
      • un fichier z_styleSVG.css indiquant que par défaut, la largeur du trait vaut 0,06, sa couleur est noire et que le remplissage est vide ;
      • un fichier z_sgrille.svg traçant un cadre et une grille régulière 10 × 10, le tout en gris clair et avec une épaisseur de trait de 0,03 ;
      • un fichier 00_modele.svg contenant le cadre de travail vide, c'est-à-dire l'en-tête et l'élément <svg …> … </svg> vide. Mettre ce fichier en lecture seule.

Progression didactique

1. Découvrir le SVG et premier exemple

Introduction

Le terme SVG signifie en anglais scalable vector graphics c'est-à-dire « graphismes vectoriels dont on peut modifier l'échelle ». Ce sont des dessins que l'on peut agrandir (zoomer) sans que cela ne fasse apparaître de « grains », de pixels.

Le SVG est un standard Internet permettant de créer des images et de les diffuser.

Une image SVG se présente comme un fichier portant l'extension .svg. C'est un fichier contenant du texte « lisible » par un humain : le texte décrit ce que doit dessiner l'ordinateur avec des mots anglais. Les ordres donnés à l'ordinateur sont appelés « instructions ».

On peut créer un dessin au format SVG avec des logiciels de dessin utilisant la souris, comme par exemple Inkscape. Mais il est aussi possible de créer des dessins en tapant directement les instructions à l'aide d'un éditeur de texte.

Objectif

À la fin de la séance, vous saurez créer une image SVG simple et l'afficher.

Activité 1 : créer une image SVG avec un logiciel graphique et l'afficher dans un explorateur Web

  1. Ouvrez le logiciel Inkscape logo Inkscape.
    Détailler la procédure selon le système d'exploitation et l'installation, par exemple : double-cliquez sur l'icône Inkscape sur le bureau.
  2. Cliquez sur le « stylo » Bouton « stylo ». Le pointeur prend la forme d'une croix avec un stylo-plume.
  3. Placez le pointeur à un endroit de la fenêtre et cliquez puis relâchez le clic. Recommencez plusieurs fois à plusieurs endroits : cela crée une ligne brisée (avec éventuellement des arcs courbes si la souris bouge pendant que le bouton de clic est enfoncé).
  4. Appuyez sur le touche « Entrée » du clavier : cela termine le tracé.
  5. Cliquez sur le bouton « Sélection » Bouton « Sélection ».
  6. Appuyez sur la touche « Ctrl » du clavier, puis faites bouger la molette de la souris en maintenant la touche enfoncer. Selon la direction de rotation de la molette, cela agrandit (zoom) ou rapetisse (dé-zoom) l'image ; si vous n'y arrivez pas, utilisez la boîte de zoom située en bas à droite de la fenêtre. Vérifiez que même si on agrandit fortement l'image, les traits restent lisses.
  7. Enregistrez l'image sous le nom premierEssai :
    1. Cliquez sur le bouton « Enregistrer » . Cela ouvre la boîte de dialogue « Enregistrer sous ».
    2. Allez dans le dossier de travail.
      Détailler la procédure selon la manière dont est organisé le disque dur.
    3. Dans la zone de texte « nom du fichier », tapez « premierEssai ».
    4. Cliquez sur le bouton « Enregistrer ».
    5. Fermez Inkscape Icônes « fermer ».
  8. Ouvrez le navigateur Web logo Firefox.
    Détailler la procédure selon le système d'exploitation et l'installation, par exemple : double-cliquez sur l'icône Firefox sur le bureau.
  9. Ouvrez le répertoire de travail. Positionnez la fenêtre du répertoire de travail à côté de celle du navigateur Web.
    Détailler la procédure selon le système d'exploitation et l'installation, par exemple : double-cliquez sur l'icône Fichiers SVG sur le bureau.
  10. Faite un « glisser-lâcher » du fichier premierEssai.svg que vous venez de créer du répertoire de travail ans la fenêtre du navigateur Web :
    1. Dans la fenêtre du répertoire de travail, cliquez sur le fichier premierEssai.svg.
    2. En maintenant le bouton de la souris enfoncé, déplacez le pointeur dans la fenêtre du navigateur Web et relâchez le clic.
  11. Vérifiez que le dessin qui s'affiche est identique à ce que vous avez dessiné.
  12. Faite un agrandissement (zoom : touche « Ctrl » du clavier et molette de la souris) pour vérifier que les traits restent lisses.
Fin de l'activité
***
**
*

Activité 2 : Créer une image SVG avec un éditeur de texte

Squelette d'un fichier SVG.

Une image SVG est un fichier de texte. L'image ci-contre présente le squelette d'un fichier SVG. Il est composé de trois pavés :

  1. Un pavé d'en-tête qui indique au navigateur Web qu'il s'agit d'une image SVG et qui lui indique des informations complémentaires permettant l'affichage correct de l'image.
  2. Un pavé contenant les instructions servant à tracer le dessin. Pour l'instant, ce pavé est vide.
  3. Un pavé de fin de fichier.

Nous pouvons déjà remarquer trois choses :

  • les instructions sont mises entre crochets <…> ;
  • le pavé (pour l'instant vide) contenant les instructions de dessin est compris entre une balise d'ouverture <svg …> et une balise de fermeture </svg> ;
  • le fichier contient des commentaires, c'est-à-dire du texte facilitant la lecture par un humain mais n'ayant aucune action sur le dessin ; ces commentaires sont inclus dans des balises <!--…-->.

Notes


Manipulations avancées < > …