« Découvrir le SVG/Le SVG pour l'enseignement des mathématiques et de la programmation » : différence entre les versions
Contenu supprimé Contenu ajouté
m <source> -> <syntaxhighlight> (phab:T237267) |
m typo |
||
Ligne 9 :
{{loupe|Programmation Logo}}
Pour estimer la difficulté des
{| class="wikitable"
|+ Niveau de difficulté
Ligne 41 :
*# Consolider les notions apprises en géométrie.
*# Découvrir la démarche de programmation.
*# Comprendre
* Prérequis pour l'élève :
** Savoir se servir d'un éditeur de texte.
Ligne 49 :
* 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
** Un navigateur Web supportant le SVG et de préférence le CSS comme
** Inkscape<ref>https://inkscape.org/fr/ ou en version « portable » http://portableapps.com/apps/graphics_pictures/inkscape_portable</ref>.
* Préparation :
** S'assurer que les
** 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.
Ligne 201 :
Une image SVG se présente comme un fichier portant l'extension <code>.svg</code>. 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
==== Objectif ====
Ligne 213 :
# Cliquez sur le « stylo » [[Fichier:Inkscape icons draw path.svg|Bouton « stylo »]]. Le pointeur prend la forme d'une croix avec un stylo-plume.
# 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é).
# Appuyez sur
# Cliquez sur le bouton « Sélection » [[Fichier:Inkscape icons tool pointer.svg|Bouton « Sélection »]].
# 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.
Ligne 297 :
* Les instructions SVG sont entre crochets <code><…></code> ; elles sont appelées « éléments ».
* Certains éléments consistent en une seule balise, le crochet fermant est alors précédé d'une barre oblique, par exemple : <code><line … /></code>, <code><circle … /></code>, <code><rect … /></code>.
* D'autres éléments
** l'élément <code>svg</code>, qui contient toutes les instructions de tracé : <code><svg … > … </svg></code>,
** les éléments <code><title> … </title></code> et <code><desc> … </desc></code> qui contiennent du texte.
Ligne 319 :
# Étudiez le formulaire ci-dessous.
# Reproduisez les
{{boîte déroulante|titre=Formulaire SVG|contenu=[[Fichier:Formulaire SVG.svg|vignette|Formulaire SVG.]]
Ligne 338 :
** l'élément ''path'' a pour attribut ''d''.
Notez que :
* les
* on peut revenir à la ligne à l'intérieur d'un élément (comme dans l'image ci-contre).
}}
Ligne 355 :
Cela correspond globalement à un niveau de difficulté de 14 ou 15.
Nous choisissons ici de créer une courbe représentative d'une fonction mathématique simple. Pour l'exemple, nous choisissons la fonction ƒ(''x'') = ''x''² car tous les langages de programmation possèdent la fonction multiplié. On peut bien entendu utiliser une autre fonction selon les
Dans la formulation, nous restons volontairement
'''Objectifs'''
|