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

m
typo
m (<source> -> <syntaxhighlight> (phab:T237267))
m (typo)
 
{{loupe|Programmation Logo}}
 
Pour estimer la difficulté des activitéactivités, nous utilisons la [[wikiversity:fr:Aide:Niveaux|cotation de la Wikiversité]].
{| class="wikitable"
|+ Niveau de difficulté
*# Consolider les notions apprises en géométrie.
*# Découvrir la démarche de programmation.
*# Comprendre lale 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.
* 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<ref>https://notepad-plus-plus.org/ ou en version « portable » (sans installation, ne nécessite pas d'avoir les droits administrateur) http://portableapps.com/apps/development/notepadpp_portable</ref> ou bien gedit<ref>https://wiki.gnome.org/Apps/Gedit</ref>.
** Un navigateur Web supportant le SVG et de préférence le CSS comme par exemple Mozilla Firefox<ref>https://www.mozilla.org/fr/firefox/new/</ref>.
** 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 apprenantapprenants 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.
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 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 ====
# 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 lela touche « Entrée » du clavier : cela termine le tracé.
# 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.
* Les instructions SVG sont entre crochets <code>&lt;…&gt;</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>&lt;line … /&gt;</code>, <code>&lt;circle … /&gt;</code>, <code>&lt;rect … /&gt;</code>.
* D'autres éléments sont sont des « conteneurs » : ils contiennent d'autres éléments et sont faits de deux balises, une balise ouvrante et une balise fermante ; c'est alors la balise fermante qui contient la barre oblique par exemple :
** l'élément <code>svg</code>, qui contient toutes les instructions de tracé : <code>&lt;svg … &gt; … &lt;/svg&gt;</code>,
** les éléments <code>&lt;title&gt; … &lt;/title&gt;</code> et <code>&lt;desc&gt; … &lt;/desc&gt;</code> qui contiennent du texte.
 
# Étudiez le formulaire ci-dessous.
# Reproduisez les figurefigures qu'il contient. Pour cela, créez un fichier SVG avec un éditeur de texte en utilisant le modèle vu précédemment.
 
{{boîte déroulante|titre=Formulaire SVG|contenu=[[Fichier:Formulaire SVG.svg|vignette|Formulaire SVG.]]
** l'élément ''path'' a pour attribut ''d''.
Notez que :
* les virgulevirgules ne sont pas obligatoires ;
* on peut revenir à la ligne à l'intérieur d'un élément (comme dans l'image ci-contre).
}}
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 possibilitépossibilités du langage, comme par exemple une fonction trigonométrique.
 
Dans la formulation, nous restons volontairement flouflous en ce qui concerne la « vingtaine de valeurs bien réparties ». La valeur 0 faisant partie de l'intervalle, il paraît évident qu'elle doit faire partie de l'échantillon, le plus simple étant alors d'avoir un nombre impair de valeurs — 19 ou 21 — réparties de manière uniforme.
 
'''Objectifs'''
240

modifications