Création de la page html avec figure animée.

Transcription

Création de pages html avec figures de géométrie
pouvant être animées
Ce document regroupe quelques informations concernant l’utilisation de CabriJava et des
ActiveX du CREEM pour créer des figures pouvant être animées dans des pages Html.
Il peut être utile à toute personne souhaitant s’initier à la création de telles pages.
Ce document ne constitue cependant qu’une initiation succinte et le lecteur souhaitant aller
plus loin est invité à consulter les sites des auteurs des outils utilisés :
Gilles Kuntz pour CabriJava et le CREEM pour les ActiveX Géoplan et Géospace.
Ce document comporte deux parties :
!
!
Création de figures animées à l’aide de CabriJava
(figures crées avec Cabri).
Création de figures animées à l’aide des ActiveX du CREEM
(figures Géoplan et Géospace).
[Remarque : pour que les exemples proposés à la fin de cette partie fonctionnent,
les ActiveX doivent avoir été installés sur l’ordinateur local ; (voir chapitre
installation)]
Auteur :Bernard Devineau Collège Gaston Defferre 37290 Preuilly
[email protected]
Sommaire
! Première partie CabriJava
Présentation
Etapes de la création d’une page
L’utilitaire CabriWeb
Quelques exemples CabriJava
! Deuxième partie ActiveX Géoplan et Géospace
Introduction
Installation des ActiveX
Installation des ActiveX sur poste non connecté
Création des pages html
Quelques exemples Géoplan et Géospace
Créer des pages Internet avec figure Cabri interactive.
Outils nécessaires :
•
•
•
•
Un éditeur HTML (FrontPage par exemple).
Un décompresseur genre winzip.
Cabri II windows.
Internet explorer à partir de la version 4. (La machine virtuelle java doit
être installée sur le poste. Elle fait partie de IE4 ou IE5. (Si toutefois elle
n’était pas installée, on peut la télécharger à la même adresse cidessous.)
Ce qu’il faut faire :
•
Télécharger CabriJava.jar (Archive Java qui simulera la présence de
Cabri).
Adresse : http://www.cabri.net/cabrijava/index-f.html
•
Créer la figure Cabri.
•
Créer la page HTML (Titre, Texte, mise en page …).
Inclure dans le code HTML, à l’endroit où on souhaite voir apparaître la
figure Cabri, les lignes suivantes :
<applet CODE="CabriJava.class" WIDTH="500" HEIGHT="250"
ALIGN="bottom" archive="CabriJava.jar">
<param name="lang" value="fr">
<param name="file" value="nomdelafigure.fig">
</applet>
•
Mettre La page HTML, La figure Cabri et Cabrijava.jar dans un même
répertoire.
Explication succincte du code ajouté :
<Applet et </Applet> sont les balises qui indiquent au navigateur qu’il doit utiliser la
machine virtuelle Java pour interpréter les lignes entre ces balises.
Le code Java qui simule Cabri se nomme CabriJava.class et il est situé dans un
fichier compressé nommé CabriJava.jar (.jar pour Java Archive)
Width, height donnent les dimensions de la fenêtre en pixels.
Align donne la position de la fenêtre par rapport au texte précédent.
nomdelafigure.fig est le nom de la figure Cabri que l’on veut inclure.
Les éventuels paramètres ont en Java la syntaxe suivante :
<Param name =’’xxxxx’’ value =’’yyyyy’’>,
où xxxxx est le nom du paramètre et yyyyy sa valeur.
Le tableau de la page suivante indique les paramètres utilisables.
Remarque.
Pour fixer les paramètres voulus de la figure Cabri (taille, position, couleur de fond,
bordure …) il y a deux solutions :
− Ecrire manuellement dans le code :
<param name= ‘’background’’ value= ‘’ Fond.gif’’>.
<param name= ……..
− Ou utiliser un petit programme créé par l’auteur de CabriJava
([email protected]) nommé Cabriweb.
C’est une interface Windows qui permet le choix des paramètres avec
des boîtes de dialogues et crée ensuite le code HTML.
On peut le télécharger à l’adresse indiquée au début .
Création d’une page Cabrijava.
1. Télécharger l’archive Cabrijava.jar.zip à l’adresse :
http://www.cabri.net/cabrijava/index-f.html
Décompresser l’archive CabriJava.jar
2. Créer sur le bureau un répertoire.
3. Copier l’archive Cabrijava.jar dans le répertoire.
4. Créer la figure Cabri et enregistrer le fichier obtenu dans le répertoire.
5. Créer la page HTML. (Lancer FrontPage, ou un éditeur html).
Cliquer sur l’onglet html.
Insérer le code
<applet CODE="CabriJava.class" WIDTH="310" HEIGHT="310"
ALIGN="middle"
ARCHIVE="CabriJava.jar">
<param name="file" value="Remplacer ce texte par le nom de la figure.fig">
</applet>
dans le code source de la page HTML, à l’endroit où la figure Cabri doit
apparaître.
6. Enregistrer le fichier HTML dans le répertoire .
Si tout va bien, un double clic sur la page html crée, doit ouvrir une page interactive.
L’utilitaire Cabriweb (Auteur Gilles Kuntz)
Cet utilitaire se télécharge à l’adresse :
http://www.cabri.net/cabrijava/CabriWeb.jar.zip
Cet utilitaire facilite la création de la page html utilisant l’Applet CabriJava. Il évite d’insérer
manuellement le code <applet code= …………………. /applet> dans le code html de la
page et il se charge des paramètres de la figure (couleur de fond, couleur et épaisseur de la
bordure, gestion des outils de la figures …)
les étapes :
1. Créer la figure Cabri, et placer cette figure dans un répertoire contenant
Cabriweb.jar et Cabriweb.bat
2. Lancer Cabriweb.bat . Une fenêtre vide s’ouvre. Dans le menu Fichier choisir Ouvrir
une figure Cabri puis choisir la figure Cabri voulue dans l’arborescence.
3. Dans le menu Edition, fixer tous les paramètres voulus de la figure.
4. Dans le menu Fichier, choisir Enregistrer le fichier Html.
5. Une fenêtre s’ouvre demandant dans quel répertoire se trouve le fichier cabrijava.jar.
Chercher l’archive Cabrijava.jar et cliquer dessus. Puis Enregistrer (par défaut,
Cabriweb propose pour la page html le même nom que la figure.) Fermer Cabriweb.
6. Editer la page html créée pour finir sa composition.
Remarque :
Si Cabriweb s’ouvre dans une langue qui ne vous convient pas, une option Language du menu
Edit permet d’en changer.
CabriJava – Exemples
Quatre exemples de pages html contenant une figure CabriJava sont présentés ici.
Ces pages sont volontairement sommaires.
Bien qu’elles puissent être utilisées ainsi en classe, ce n’est pas leur vocation.
Elles sont davantage destinées à illustrer la conception de telles pages.
Bissectrice
Thalès
Périmètre
Aires
1. Bissectrice.htm
Cet exemple peut être proposé pour introduire une démonstration.
Il illustre la propriété d’égalité de rapports utilisant les mesures des côtés d’un triangle
et les mesures des segments générés par une bissectrice sur le 3ème côté du triangle.
Situation
En déformant le triangle on constate que les rapports restent égaux.
Ouvrir cette page html
Voir le code de cette page
2. Thales.htm
Cet exemple peut être utilisé en 4ème pour illustrer l’introduction de la propriété de
Thalès dans un triangle.
Situation
En déformant le triangle ou en déplaçant la parallèle, on conjecture l’égalité des
rapports.
3. PeriTri .htm (Périmètre d’un triangle)
C’est une activité évoquée par M Olivier, IPR, lors d’une réunion du groupe math
collège à Orléans.
Cette cativité peut être proposée en 4ème ou en 3ème pour introduire une démonstration.
Situation
d1, d2, d3 sont tangentes respectivement en M, E et F au cercle.
En déplaçant le point M sur l’arc (EF) on constate que le périmètre du triangle ABC
est constant.
4. TriEtPar.htm (triangles et droites parallèles)
Cette activité peut être proposée en 4ème.
Il s’agit de démontrer l’égalité de l’aire de deux triangles.
Situation
Sur cette figure, en déplaçant A, B, C ou D, ou en écartant les parallèles, on constate
l’égalité des aires des deux triangles colorés.
Introduction
Un contrôle ActiveX est un programme pouvant être exécuté dans une fenêtre d’une autre
application, par exemple dans une page html.
Le CREEM (Centre de Recherche et d’Expérimentation pour l’Enseignement des
Mathématiques) a créé des ActiveX permettant d’exécuter GéoplanW ou GéospaceW dans
une fenêtre d’une page html.
La création de pages html contenant des figures GéoplanW ou GéospaceW modifiables
nécessite 3 étapes :
1/ Installer les ActiveX fournis par le CREEM.
2/ Créer avec GéoplanW ou GéospaceW la figure.
3/ Créer la page html qui recevra la figure.
Une fois la page html publiée, le visiteur, pour pouvoir utiliser les figures et les animer,
devra également installer les activeX sur son poste de travail.
Cette installation n’est nécessaire qu’une seule fois lors de la première visite.
[Il est donc utile de prévoir un lien permettant l’installation automatique dans une page de
présentation].
Par contre il n’est pas nécessaire que GéoplanW ou GéospaceW soient installés sur le poste
du visiteur.
ActiveXIntroduction.doc
Installation
Le CREEM propose deux possibilités pour réaliser l’installation.
1/ Directement sur le Web en cliquant sur le lien :
http://www2.cnam.fr/creem/NOVEMBRE2000/CREEM_ActiveX/Installer/CREEM_Page_pour_installation.htm
2/ En local après avoir téléchargé ou copié sur un autre ordinateur, l’archive
autodécompressible contenant les fichiers nécessaires.
Le téléchargement s’effectue en cliquant sur le lien :
http://www2.cnam.fr/creem/NOVEMBRE2000/CREEM_ActiveX/Telecharger/CREEM_Installer.exe
L’archive tient sur une disquette. Elle se décompresse en 4 fichiers dont une page html
nommée CREEM_Page_pour_installation.htm .
Le double-clic sur cette dernière installe les contrôles ActiveX Géoplan, Géospace et
Ecrit_Math et ouvre 3 instances de ces contrôles permettant de vérifier que l’installation s’est
déroulée correctement.
Remarque :
Le CREEM propose également un fichier d’aide pour chaque contrôle.
Ces fichiers peuvent être téléchargés depuis une archive en cliquant sur le lien :
http://www2.cnam.fr/creem/NOVEMBRE2000/CREEM_ActiveX/Telecharger/CREEM_Aide.exe
L’archive tient sur une disquette. Après décompression il faut copier les 3 fichiers .hlp
obtenus dans le dossier c:/Windows/Help. Ce sont ces fichiers qui sont appelés lors de
l’utilisation de l’aide (Menu Aide de la figure ou bouton Aide des boîtes de dialogue) dans
une figure.
Installation depuis une disquette
Après avoir téléchargé le fichier CREEM_Intallation.exe, copier ce fichier sur une disquette.
Pour installer les ActiveX sur un ordinateur non connecté :
1. Insérer la disquette et double cliquer sur CREEM_Installation.exe.
Indiquer le dossier dans lequel les fichiers seront
décompressés puis cliquer sur décompresser.
Après le message de succès, fermer la boîte de
dialogue.
Après décompression le dossier indiqué contient les fichiers suivants :
ECRIMATH.cab
GEO.cab
GPO.cab
CREEM_Page_pour_installation.htm
2. Double cliquer sur ce dernier fichier (CREEM_Page_pour_installation.htm)
Une page html s’ouvre et l’installation des activeX s’exécute.
Un message d’alerte s’ouvre : « Un objet activeX présent sur cette page n’est peut-être
pas sûr. Voulez-vous lui permettre … », répondre OUI.
(Ce n’est qu’une précaution Windows pour filtrer des ActiveX de provenance
douteuse).
La page html ouverte contient une instance de chacun des trois ActiveX installés, permettant
de vérifier que l’installation s’est bien déroulée.
La page demande également de vérifier que la librairie MSVBVM50.dll est bien présente sur
l’ordinateur. C’est une librairie qui est en principe installée d’origine avec Windows 95 et +.
Si toutefois elle n’était pas présente, il suffit de la copier dans le dossier Windows/system
depuis un autre ordinateur.
Fermer la page html d’installation.
L’ordinateur est prêt pour utiliser les ActiveX du CREEM.
Création de la page html avec figure animée.
1. Ouvrir une page vierge avec un éditeur html, par exemple avec FrontPage.
Créer tous les éléments de la page, texte, questions, tableaux, images etc. et placer le
curseur à l’endroit où devra apparaître la figure Géoplan ou Géospace.
- Dans le menu Insertion, amener la souris sur Avancé
puis cliquer sur ContrôleActiveX.
- Dans la boîte de dialogue Propriétés du contrôle,
dérouler Choisissez un Contrôle
puis cliquer sur :
♦ GPO .GPOCtl pour une figure Géoplan.
♦ GEO .GEOCtl pour une figure Géospace
puis cliquer sur OK∗.
Un repère Géoplan ou Géospace apparaît dans la page html.
2. Insertion du texte de la figure.
a) Ouvrir Géoplan ou Géospace et ouvrir ou créer la figure.
b) Dans le menu Editer, cliquer sur Editer Texte Figure puis avec la souris sélectionner
tout le texte de la figure et Copier. Fermer Géoplan ou Géospace et repasser dans
FrontPage.
c) Dans FrontPage, cliquer sur l’onglet html puis chercher le code :
< param name=’’TexteDeLaFigure’’ value=’’> ∗∗
Insérer le curseur juste après value= et bouton droit, coller le texte.
Les guillemets doivent être fermés après le texte et tout ce code doit se trouver à
l’intérieur des balises <object et </object>
3. Enregistrer la page html.
∗ Note 1 : Avec FrontPage 2000 il faut d’abord ‘Personnaliser’ pour que les nouveaux ActiveX figurent dans la
liste.
∗∗ Note 2 : Si le code <param name=’’TexteDeLaFigure’’ value=’’> n’est pas présent, il faut le taper juste après
<object classid="clsid:E29016D7-8E99-11D2-8454-004005195FED" width="300"
height="300">
et juste avant </object>
ActiveXCreationPage.doc
ActiveX Géoplan et Géospace - Exemples
Trois exemples Géoplan et trois exemples Géospace de mise en œuvre des ActiveX du
CREEM sont présentés ici.
Géoplan
Carré et triangles
Trapèze et triangle
Cercle trigonométrique
Géospace
Patron de pyramide
Perpendiculaires et parallèles
Variation d’aire
•
CarEtTri.htm (Carré et Triangles)
C’est une activité qui peut-être proposée en 5ème.
Objectif :faire fonctionner la formule de calcul de l’aire d’un triangle.
Situation
A
B
N
D
M
C
Ouvrir la page html
ABCD est un carré.
N est mobile sur le côté [AD] et M est mobile
sur le côté [DC] .
Où faut-il placer M et N pour obtenir 4 triangles
ayant même aire ?
•
TrapEtTri.htm (Trapèze et triangle)
Cette activité peut-être proposée en 4ème.
Objectif : faire fonctionner les formules d’aires du triangle et du trapèze et introduire
une démonstration.
Situation
B
A
M est mobile sur le segment [DC].
D
M
H
Voir la page html
C
Où faut-il placer M pour que l’aire
du triangle soit égale à la moitié de
l’aire du trapèze ?
•
CerclTri.htm (Cercle trigonométrique)
Il s’agit de découvrir et d’utiliser le quart de cercle trigonométrique.
Cette activité peut-être proposée en 3ème.
Objectif :Une approche « mobile » du sinus et du cosinus d’un angle.
Découverte de la propriété sin2α +cos2α = 1
Situation
B
M est mobile sur le quart de cercle de rayon 1.
La mesure de l’angle MOP et les mesures de [OS] et
de [OP] s’affichent à l’écran.
M
S
Avec la calculatrice, calculer sinus(MOP) et
cosinus(MOP) et comparer avec les affichages.
O
P
A
Voir la page html
Remarque : Cette page montre l’utilisation de la fenêtre de commentaire (touche F3) pour
donner la consigne.
•
PtPyCar.htm (Patron pyramide à base carrée)
Objectif : « voir » s’ouvrir un patron d’une pyramide à base carrée.
La pyramide s’ouvre par
appuis sur les touches
fléchées du clavier.
Voir la page html
•
PerEtPar.htm (Perpendiculaires et parallèles)
C’est une activité que l’on peut proposer en 5ème.
Objectif : apprendre à « voir » dans l’espace et à « abstraire » les intersections qui n’en
sont pas.
Chaque appuis sur une des touches A Z E R
T Y U I O P , affiche deux droites portées
par deux côtés du cube.
Il s’agit d’indiquer si elles sont parallèles,
perpendiculaires ou orthogonales.
Voir la page html
•
VariationAire.htm (variation de l’aire d’une section de pyramide)
Cette activité propose un contenu simplifié pour être abordable en 3ème.
Elle peut facilement être modifiée pour être exploitable en seconde.
Objectif :étudier la variation d’une aire.
Pendant que le point M se déplace, la courbe représentant la variation de l’aire de la
section, en fonction de la distance du plan au sommet, se dessine.
Voir la page html
Code html des pages
Cabri
Bissectrice
Thalès
Périmètre
Aires
Géoplan
Carré
Trapèze
Trigo
Géospace
Patron
Perpendiculaire
Variation
Ce qui suit est le code html de la page Bissectrice.htm .
Couleurs :
En rouge, les mots clefs du langage html et en mauve les balises.
En bleu le contenu des variables.
En vert le nom de la figure Cabri utilisée par cette page.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta http-equiv="Content-Language" content="fr-FX">
<meta name="robots" content="index, follow">
<meta name="keywords" content="Mathématique,Triangle,Bissectrice,Cabrijava">
<meta name="author" content="Bernard Devineau">
<meta name="reply-to" content="[email protected]">
<title>Une propriété de la bissectrice.</title>
</head>
<body>
<big><big>Une propriété dans le
triangle.</big></big>

<applet CODE="CabriJava.class" WIDTH="500" HEIGHT="250" ALIGN="bottom"
archive="CabriJava.jar">
<param name="file" value="bistri.fig">
</applet>

Sur cette figure, la droite (AK) est la bissectrice de l'angle(BAC).
Change le triangle en déplaçant un des sommets avec la souris.
Que remarques-tu?
</body>
</html>
Ce qui suit est le code html de la page Thales.htm .
Couleurs :
<html>
<head>
<meta name="keywords" content="Mathématique,Thalés,Triangle,Cabrijava">
<title>Thales dans le triangle.</title>
</head>
<body>
<big><big>Une droite parallèle à un côté dans un
triangle.</big></big> 

<table border="1" width="100%">
<tr>
<td width="50%">
archive="CabriJava.jar">
<param name="file" value="thales.fig">
</applet>
</td>
<td width="50%"> Sur cette
figure, 
le segment [MN] est parallèle au côté [BC].
 
Tu peux déplacer la parallèle en bougeant le point P. 
Tu peux changer le triangle en déplaçant un des sommets.</td>
</tr>
</table>
<big>Que remarquestu?</big>
</body>
</html>
Ce qui suit est le code html de la page Peritri.htm .
Couleurs :
<html>
<head>
<meta name="keywords"
content="Mathématique,Cercle,Triangle,Tangente,Périmètre,Cabrijava">
<title>Périmètre d'un triangle</title>
</head>
<body>
<big><big>Périmètre d'un
triangle.</big></big>

<applet CODE="CabriJava.class" WIDTH="510" HEIGHT="310" ALIGN="middle"
<param name="file" value="peritri.fig">
</applet>

Déplace le point M entre E et F. 
Que remarques-tu pour le périmètre du triangle
ABC
</body>
</html>
Ce qui suit est le code html de la page TriEtPar.htm .
Couleurs :
<html>
<head>
<meta name="keywords" content="Mathématique,Aire du triangle,Parallèles,Cabrijava">
<title>Deux triangles entre deux droites parallèles.</title>
</head>
<body>
Droites parallèles et
triangles. 

<param name="file" value="TriEtpar.fig">
<param name="border" value="2">
<param name="bordercolor" value="#993300">
<param name="xposition" value="9">
<param name="yposition" value="-9">
</applet>

 
Déplace les points A, B, C, ou D ou éloigne une parallèle de l'autre (en prenant le point près du nom de la droite). 
Que constate-t-on pour les aires des deux triangles colorés? Peux-tu démontrer cela
?
</body>
</html>
Ce qui suit est le code html de la page CarEtTri.html.
Couleurs :
En vert le texte de la figure Géoplan.
<html>
<head>
<title>Clique sur la figure</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="GENERATOR" content="Microsoft FrontPage 3.0">
<meta name="keywords" content="Mathématique,Carré,Triangle,Aires,ActiveX">
</head>
<body>
<tr>
<td width="50%">
<object classid="clsid:DA6462AC-9024-11D2-8454-004005195FED" width="390"
height="400">
<param name="TexteDeLaFigure"
value="Figure Géoplan
Numéro de version: 1
Position de Roxy: Xmin: -5, Xmax: 5, Ymax: 5
Objet dessinable Roxy, particularités: rouge, non dessiné
A point libre
Objet libre A, paramètres: -3.3078393881, 2.8202676864
B point libre
Objet libre B, paramètres: 1.0325047801, 2.8202676864
Droite (AB)
Objet dessinable (AB), particularités: non dessiné
d2 droite perpendiculaire à (AB) passant par A
Objet dessinable d2, particularités: non dessiné
d3 droite perpendiculaire à (AB) passant par B
C image de A par la rotation de centre B et d'angle 90 (degré)
d4 droite perpendiculaire à d3 passant par C
D point d'intersection des droites d4 et d2
P polygone ABCD
Objet dessinable P, particularités: rempli avec la couleur du fond
N point libre sur le segment [AD]
Objet libre N, paramètre: 0.2422907489
Objet dessinable N, particularités: rouge
M point libre sur le segment [DC]
Objet libre M, paramètre: 0.39647577092
Objet dessinable M, particularités: rouge
Segment [BN]
Segment [BD]
Segment [BM]
T1 polygone ABN
Objet dessinable T1, particularités: ciel, hachures diagonales
T2 polygone BND
Objet dessinable T2, particularités: vert, hachures diagonales inverses
T3 polygone BDM
Objet dessinable T3, particularités: bleu, hachures croisées
T4 polygone BMC
Objet dessinable T4, particularités: rose, hachures croisées en diagonales
ABAN aire du triangle BAN (unité de longueur Uoxy)
ABND aire du triangle BND (unité de longueur Uoxy)
ABDM aire du triangle BDM (unité de longueur Uoxy)
ABMC aire du triangle BMC (unité de longueur Uoxy)
Hauteur de la zone des affichages: 50
Af0 affichage du scalaire ABAN (1 décimales)
Objet dessinable Af0, particularités: non dessiné
Position de l'affichage Af0: (19,13)
Af1 affichage du scalaire ABND (1 décimales)
Af2 affichage du scalaire ABDM (1 décimales)
Af3 affichage du scalaire ABMC (1 décimales)
Cm0 (touche A) dessin en bloc de Af0, Af1, Af2, Af3
Objets libres bloqués: A, B
Angles en degrés par défaut
Commentaire
Le point N est mobile sur le segment [AD].
Le point M est mobile sur le segment [DC].
Quelles doivent être les positions respectives des points N et M
pour que les quatre triangles aient même aire ?
Définis géométriquement ces positions.
Place les points N et M aux positions qui te semblent convenir.
Puis appuis sur la touche A pour vérifier l'égalité des aires des triangles.
Démontre ce résultat.">
</object>
</td>
<td width="50%">Clique sur la figure.Déplace ensuite
les points
N et M pour obtenir quatre triangles ayant même aire. 
 
Quand tu penses avoir trouvé les bonnes positions de N et de  M, appuis
sur la
touche A du clavier pour obtenir l'affichage des quatre
aires.
 
(<a
href="#Définis">Suite</a>)
 </td>
</tr>
</table>
        <a
name="Définis">Définis</a> géométriquement la position de chacun des points N et
M. 
        Vérifie en construisant éventuellement
deux
points particuliers bien choisis. 
        (Un double clic
sur la
figure fait apparaître les menus de Géoplan).
<div align="center"><center>
<table border="1" width="70%" bordercolor="#008080" cellspacing="0"
cellpadding="0">
<tr>
<td width="100%"><big>Démontre
que dans ce cas les triangles ont bien même aire.</big></td>
</tr>
</table>
</center></div>
 
</body>
</html>
Ce qui suit est le code html de la page TrapEtTri.html.
Couleurs :
<html>
<head>
<title>Trapèze et triangle</title>
<meta name="keywords" content="Mathématique,Trapèze,Triangle,Aires,ActiveX">
</head>
<body>
<tr>
<td width="50%">
height="400">
Position de Roxy: Xmin: -5, Xmax: 5, Ymax: 5
Objet dessinable Roxy, particularités: ciel, non dessiné
A point libre
Objet libre A, paramètres: -4.3212237094, 2.4187380497
B point libre
Objet libre B, paramètres: 0.82217973231, 2.4187380497
Droite (AB)
Objet dessinable (AB), particularités: non dessiné
d1 droite perpendiculaire à (AB) passant par A
Objet dessinable d1, particularités: ciel, non dessiné
D point libre sur la droite d1
Objet libre D, paramètre: -3.1166560178
d2 droite perpendiculaire à d1 passant par D
C point libre sur la droite d2
Objet libre C, paramètre: -7.6673040153
P polygone ABCD
d3 droite perpendiculaire à (AB) passant par B
H point d'intersection des droites d3 et d2
Segment [BH]
Objet dessinable [BH], particularités: tireté
M point libre sur le segment [DC]
Objet dessinable M, particularités: rouge
Segment [AM]
Objet dessinable [AM], particularités: ciel
T polygone AMD
Objet dessinable T, particularités: ciel, hachures croisées en diagonales
AP = (DC+AB)*BH/2 (unité de longueur Uoxy)
AT aire du triangle AMD (unité de longueur Uoxy)
Af0 affichage du scalaire AP (1 décimales)
Af1 affichage du scalaire AT (1 décimales)
Cm0 (touche A) dessin en bloc de Af0, Af1
Objets libres bloqués: A, B, D, C
Objet libre actif au clavier: M
Commentaire
Question:
Où faut-il placer le point M pour que l'aire du triangle hachuré
soit égale à la moitié de l'aire du trapèze ABCD?
Place le point M à la position qui te semble convenir.
Appuis ensuite sur la touche A.
Ap est l'aire du trapèze et At est l'aire du triangle.
Précise géométriquement la position du point M.
Démontre cette observation.">
</object>
</td>
<td width="50%">Clique sur la figure.Où faut-il placer
le point M pour que l'aire du triangle soit égale à la moitié de l'aire du
trapèze?
Lorsque tu pense savoir trouvé la bonne position de M,
appuis sur la touche A du clavier. 
Ap est l'aire du trapèze, 
At est l'aire du triangle.
(<a href="#Définis">Suite</a>)
 </td>
</tr>
</table>
        <a
name="Définis">Définis</a> géométriquement la position du  point M. 
        Vérifie en construisant éventuellement
un point particulier dans la figure. 
        (Un double clic
sur la
figure fait apparaître les menus de Géoplan).
<table border="1" borderColor="#008080" cellPadding="0" cellSpacing="0" width="80%"
height="26">
<TBODY>
<tr>
<td width="100%" height="24"><big>Démontre que dans ce cas les aires ont bien la propriété
énoncée.</big></td>
</tr>
</TBODY>
</table>
</center></div>
</body>
</html>
Ce qui suit est le code html de la page CerclTri.htm .
Couleurs :
<html>
<head>
<title>Quart de cercle trigonométrique</title>
content="Mathématique,Sinus,Cosinus,Trigonométrie,Géoplan,ActiveX">
</head>
<body>
<tr>
<td width="55%">
height="420">
Position de Roxy: Xmin: -4.3690248566, Xmax: 5.6309751434, Ymax: 5.5353728489
Objet dessinable Roxy, particularités: rouge, non dessiné
O point libre
Objet libre O, paramètres: -2.5239005736, -1.5009560229
A point libre
Objet libre A, paramètres: 2.6959847036, -1.5009560229
c1 cercle de centre O et de rayon OA (unité Uoxy)
Droite (OA)
d droite perpendiculaire à (OA) passant par O
B point d'intersection 1 de la droite d et du cercle c1
B' point d'intersection 2 de la droite d et du cercle c1
A1 arc d'origine A et d'extrémité B sur le cercle c1
M point libre sur l'arc A1
Objet dessinable M, particularités: rouge, marque épaisse
Segment [OM]
Objet dessinable [OM], particularités: rouge
d2 droite perpendiculaire à (OA) passant par M
d3 droite perpendiculaire à d passant par M
S point d'intersection des droites d3 et d
P point d'intersection des droites d2 et (OA)
LOP = OP/OA (unité de longueur Uoxy)
LOS = OS/OB (unité de longueur Uoxy)
Segment [SM]
Objet dessinable [SM], particularités: tireté
Segment [MP]
Objet dessinable [MP], particularités: tireté
Segment [OS]
Objet dessinable [OS], particularités: vert foncé, trait épais
Segment [OP]
Objet dessinable [OP], particularités: bleu, trait épais
MAOM mesure de l'angle géométrique AOM en degré
Af0 affichage du scalaire LOP (3 décimales)
Af1 affichage du scalaire LOS (3 décimales)
Af2 affichage du scalaire MAOM (1 décimales)
Objets libres bloqués: O, A
Commentaire
Le cercle a pour rayon 1.
M(AOM) est la mesure de l'angle [AOM].
L(OP) est la mesure du segment [OP].
L(OS) est la mesure du segment [OS].
1/ Avec ta calculatrice, calcule le cosinus puis le sinus de l'angle (AOM).
Recommence plusieurs fois, après avoir déplacé le point M.
Que remarques-tu ?
Exprime cette remarque avec une phrase.
2/ Avec ta calculatrice, calcule la somme des carrés de L(OP) et de L(OS).
Recommence plusieurs fois, après avoir déplacé le point M.
Que remarques-tu ?
Cette propriété dépend-t-elle de la mesure de l'angle (AOM)?
Démontre cette observation en utilisant une propriété des triangles rectangles.
Ecris une propriété avec cosinus et sinus d'un angle alpha.">
</object>
</td>
<td width="45%">Clique sur la figure.
Puis pour avoir les
instructions, 
appuis sur la touche <big>F3</big> du clavier. 
 
(Tu peux tirer  avec la
souris, le
coin inférieur droit de l'écran contenant les instructions pour l'agrandir
.)
 </td>
</tr>
</table>
</body>
</html>
Ce qui suit est le code html de la page PtpyCar.htm .
Couleurs :
En vert le texte de la figure Géospace.
<html>
<head>
<title>Patron d'une pyramide à base carrée</title>
<meta name="keywords" content="Mathématique,Patron de
solide,Pyramide,Géospace,ActiveX">
</head>
<body>
<tr>
<td width="50%">
height="392">
value="Figure Géospace
Uxyz par rapport à la petite dimension de la fenêtre: 0.1157625
Rotations de Rxyz: verticale: 30.339365474 horizontale: -25.470881913 frontale: 81.568993587
z1 point libre dans l'espace
Objet libre z1, paramètres: 2.8928593583, -0.0850005392, -0.77591860294
Dessin de z1: non dessiné
Objet libre z2, paramètres: -3.5212374348, 1.9561888501, -1.3455892559
Objet libre z3, paramètres: 0.06279701393, 0.89426732307, 1.0325822272
p1 plan défini par le point z1 et la droite (z3z2)
A point libre dans le plan p1
Objet libre A, paramètres: -4.227965078, -2.9340063075
B point libre dans le plan p1
Objet libre B, paramètres: 0.49904901463, -3.5228207695
d1 droite perpendiculaire au plan p1 passant par A
Dessin de d1: non dessiné
d2 droite perpendiculaire au plan p1 passant par B
A' point libre sur la droite d1
Objet libre A', paramètre: -11.811180164
Dessin de A': non dessiné
B' point libre sur la droite d2
Objet libre B', paramètre: -11.960258353
Dessin de B': non dessiné
D image de B par la rotation d'axe (A'A) et d'angle 90 (degré)
C image de A par la rotation d'axe (B'B) et d'angle -90 (degré)
l1 polygone convexe de sommets ABCD
Dessin de l1: opaque
Segment [AC]
Segment [BD]
H point d'intersection des droites (AC) et (BD)
d droite perpendiculaire au plan p1 passant par H
Dessin de d: non dessiné
S point libre sur la droite d
Objet libre S, paramètre: -4.2751566646
s1 polyèdre convexe de sommets SABCD
Dessin de s1: opaque, non dessiné
s2 polyèdre convexe de sommets ABCDS
Dessin de s2: non dessiné
a réel libre de [0,1]
Objet libre a, paramètre: 0
ptr1 patron du polyèdre s2, coefficient d'ouverture a
Dessin de ptr1: opaque
Objet libre actif au clavier: a
Parties cachées en pointillé
Plan ABD isolé par défaut
Commentaire
Utilise les flèches du clavier pour ouvrir le patron de la pyramide.
Fin de la figure">
</object>
</td>
<td width="50%">Clique sur la pyramide.
Puis utilise les flèches
 
gauche-droite du clavier pour ouvrir le patron du
solide.
Pour changer l'angle de vue,
bouge
la souris sur la figure en maintenant clic droit
enfoncé.</td>
</tr>
</table>
 
</body>
</html>
Ce qui suit est le code html de la page PerEtPar.htm .
Couleurs :
En vert le texte de la figure Géospace.
<html>
<head>
<title>Parallèles,perpendiculaires,orthogonales.</title>
content="Mathématique,Parallèles,Perpendiculaires,Espace,Géospace,ActiveX">
</head>
<body>
<tr>
<td width="43%">
height="400">
Rotations de Rxyz: verticale: -27.04594484 horizontale: 11.340520999 frontale:
2.6603398692
a = 2
A point de coordonnées (a,-a,-a) dans le repère Rxyz
Dessin de A: marque non dessinée
B point de coordonnées (a,a,-a) dans le repère Rxyz
Dessin de B: marque non dessinée
C point de coordonnées (-a,a,-a) dans le repère Rxyz
Dessin de C: nom au-dessus, nom à droite, marque non dessinée
D point de coordonnées (-a,-a,-a) dans le repère Rxyz
Dessin de D: nom au-dessus, nom à gauche, marque non dessinée
E image de A par la translation de vecteur 2avec(k)
Dessin de E: marque non dessinée
F image de B par la translation de vecteur 2avec(k)
Dessin de F: nom au-dessus, nom à gauche, marque non dessinée
G image de C par la translation de vecteur 2avec(k)
Dessin de G: marque non dessinée
H image de D par la translation de vecteur 2avec(k)
Dessin de H: marque non dessinée
cube polyèdre convexe de sommets ABCDEFGH
Dessin de cube: bleu foncé, opaque
Droite (AB)
Dessin de (AB): non dessiné
Droite (AD)
Dessin de (AD): non dessiné
Droite (AE)
Dessin de (AE): non dessiné
Droite (FB)
Dessin de (FB): non dessiné
Droite (FE)
Dessin de (FE): non dessiné
Droite (FG)
Dessin de
Droite (HG)
Dessin de
Droite (HE)
Dessin de
Droite (HD)
Dessin de
Droite (CD)
Dessin de
Droite (CG)
Dessin de
Droite (BC)
Dessin de
(FG): non dessiné
(HG): non dessiné
(HE): non dessiné
(HD): non dessiné
(CD): non dessiné
(CG): non dessiné
(BC): non dessiné
Cm0 (touche A) dessin en bloc
Cm1 (touche Z) dessin en bloc
Cm2 (touche E) dessin en bloc
Cm3 (touche R) dessin en bloc
Cm4 (touche T) dessin en bloc
Cm5 (touche Y) dessin en bloc
Cm6 (touche U) dessin en bloc
Cm7 (touche I) dessin en bloc
Cm8 (touche O) dessin en bloc
Cm9 (touche P) dessin en bloc
de
de
de
de
de
de
de
de
de
de
(AB),
(AB),
(AB),
(HE),
(HE),
(HG),
(FB),
(FB),
(HD),
(AB),
(AD)
(CD)
(HG)
(HG)
(CG)
(FB)
(CG)
(AD)
(CD)
(HD)
Commentaire
Définitions:
Deux droites parallèles sont deux droites d'un même plan n'ayant aucun
point commun.
Deux droites perpendiculaires sont deux droites sécantes formant quatre
angles droits.
Deux droites orthogonales sont deux droites non sécantes telles que les
parallèles à ces droites passant par un même point soient perpendiculaires.
ABCDEFGH est un cube.
Chaque appuis sur une des touches AZERTYUIOP fait apparaître deux droites
portées par deux arrêtes du cube.
Tu dois chaque fois dire si les deux droites sont perpendiculaires, parallèles
ou orthogonales.
Pour mieux voir, tu peux éventuellement bouger le cube dans l'espace
en déplaçant la souris bouton droit enfoncé.
Après chaque réponse, réappuis sur la même touche pour faire disparaître
les deux droites.
Fin de la figure ">
</object>
</td>
<td width="57%">Clique sur la figure puis appuis sur la
touche F3
pour obtenir les définitions et les instructions.Lis bien
ces instructions jusqu'au bout pour éviter que l'affichage ne devienne
illisible.
Avant de répondre, pense à bouger la figure pour mieux
''voir''. 
Ecris chaque réponse sur ton brouillon. 
</td>
</tr>
</table>
</body>
</html>
Ce qui suit est le
Couleurs :
En rouge, les mots
En bleu le contenu
En vert les textes
code html de la page VariationAire.htm .
clefs du langage html et en mauve les balises.
des variables.
de la figure Géospace et de la représentation graphique.
<html>
<head>
<title>Variation de l'aire d'une section de pyramide</title>
<meta name="keywords" content="Mathématique,Section,Pyramide,Géospace,ActiveX">
</head>
<body>
<big>Variation de l'aire de la section
d'une pyramide</big>
<table border="1" width="85%" cellspacing="0" style="border: 1px solid rgb(0,64,128)"
bordercolor="#004080" cellpadding="0">
<tr>
<td width="100%">Il s'agit d'étudier
comment varie l'aire de la section  d'une pyramide à base carrée par un plan
parallèle à la base, en fonction de la distance de ce plan au sommet S de cette
pyramide.</td>
</tr>
</table>
</center></div>
<table border="1" width="759">
<tr>
<td width="398">
height="400">
Rotations de Rxyz: verticale: 26.040381142 horizontale: -5.1095662097 frontale: 84.500473641
Objet libre z1, paramètres: 2.8928593583, -0.0850005392, -0.77591860294
Objet libre z2, paramètres: -3.5212374348, 1.9561888501, -1.3455892559
Objet libre z3, paramètres: 0.06279701393, 0.89426732307, 1.0325822272
p1 plan défini par le point z1 et la droite (z3z2)
A point libre dans le plan p1
Objet libre A, paramètres: -5.6428003296, -1.7678292642
B point libre dans le plan p1
Objet libre B, paramètres: -2.3621760541, -2.1497656293
d1 droite perpendiculaire au plan p1 passant par A
d2 droite perpendiculaire au plan p1 passant par B
A' point libre sur la droite d1
Objet libre A', paramètre: -11.811180164
B' point libre sur la droite d2
Objet libre B', paramètre: -11.960258353
D image de B par la rotation d'axe (A'A) et d'angle 90 (degré)
C image de A par la rotation d'axe (B'B) et d'angle -90 (degré)
l1 polygone convexe de sommets ABCD
Segment [AC]
Dessin de [AC]: gris foncé
Segment [BD]
Dessin de [BD]: gris foncé
H point d'intersection des droites (AC) et (BD)
Dessin de H: gris foncé
d droite perpendiculaire au plan p1 passant par H
Dessin de d: non dessiné
S point libre sur la droite d
Objet libre S, paramètre: -3.8757790963
s1 polyèdre convexe de sommets SABCD
Dessin de s1: opaque
Segment [SH]
M point libre sur le segment [SH]
Dessin de M: rouge, marque épaisse
p plan passant par M et perpendiculaire à la droite d
a point d'intersection de la droite (SA) et du plan p
Dessin de a: non dessiné
b point d'intersection de la droite (SB) et du plan p
Dessin de b: non dessiné
c point d'intersection de la droite (SC) et du plan p
Dessin de c: non dessiné
d' point d'intersection de la droite (SD) et du plan p
Dessin de d': non dessiné
l3 polygone convexe de sommets abcd'
Dessin de l3: ciel foncé, hachures diagonales
t1 point libre dans le plan p
Objet libre t1, paramètres: -8.3384470771, 2.5777591041
Dessin de t1: non dessiné
Objet libre t2, paramètres: 1.6693122628, 1.946244806
Objet libre t3, paramètres: 1.3308294575, -3.4131279776
Objet libre t4, paramètres: -8.843590438, -2.7420737524
l4 polygone convexe de sommets t1t2t3t4
Dessin de l4: gris
P point libre dans le plan p
Objet libre P, paramètres: -0.52349711218, -3.153070084
Dessin de P: marque non dessinée
LSM distance du point S au plan p (unité de longueur Uxyz)
ASEC aire du convexe l3 (unité de longueur Uxyz)
x10 = LSM*2.3
s10 = ASEC/1.4
Plan p isolé par défaut
Commentaire
Section d'une pyramide de base carrée par un plan
perpendiculaire à son axe.
La figure hachurée est la section de la pyramide par le plan.
Tu peux déplacer le point M pour monter ou descendre le plan.
Tu peux déplacer A ou B pour varier la taille du carré de base.
Tu peux déplacer S pour varier la hauteur de la pyramide
Affiche une vue sur le plan isolé p pour vérifier la nature de la section.
Quelle est la nature de la section?
Fin de la figure">
</object>
</td>
<td width="349">
height="324">
Rotations de Rxyz: verticale: 90 horizontale: 90 frontale: 0
Paramètres de position de Rxyz: 0.3376, 0.6754
O' point de coordonnées (-4,-2,0) dans le repère Rxyz
R' repère (O',vec(i),vec(j),vec(k))
x10 réel libre
Objet libre x10, paramètre: 6.1261573043
s10 réel libre
Objet libre s10, paramètre: 2.603849246
d1 droite munie du repère (O',vec(i)) graduation 1 sur [-1,12]
d2 droite munie du repère (O',vec(j)) graduation 1 sur [-1,10]
M point de coordonnées (x10,s10,0) dans le repère R'
Dessin de M: rouge, marque épaisse
A point libre dans l'espace
Objet libre A, paramètres: -3.5905107477, 7.8514758001, 3.3206120711
Dessin de A: marque non dessinée
I point libre dans l'espace
Objet libre I, paramètres: -3.3931883045, 7.8514758001, -0.62831301987
Dessin de I: marque non dessinée
R point libre dans l'espace
Objet libre R, paramètres: -3.1564013727, 7.8514758001, -2.2109511604
Dessin de R: marque non dessinée
E point libre dans l'espace
Objet libre E, paramètres: -2.8801499523, 7.8514758001, -6.479395833
Dessin de E: marque non dessinée
X point libre dans l'espace
Objet libre X, paramètres: 8.095894157, -1.9892827496, -2.2004231584
Dessin de X: marque non dessinée
LSM réel libre
Objet libre LSM, paramètre: 3.2242933181
ASEC réel libre
Objet libre ASEC, paramètre: 13.01924623
Af0 affichage du scalaire LSM (2 décimales)
Af1 affichage du scalaire ASEC (2 décimales)
Dessin de Af1: rouge
Objet libre actif au clavier: LSM
Sélection pour trace: M
Double cadre limitant l'image (impression ou copie) : (0.28 , 0.13) >> (0.89 ,
0.72) par rapport à la fenêtre
Paramètres de copie ajustée : couleur, largeur de l'image égale à 50 mm
Importation active
Plan de face maintenu de face
Fin de la figure">> (0.89 , 0.72) par rapport à la fenêtre Paramètres de copie
ajustée : couleur, largeur
de l'image égale à 50 mm Importation active Plan de face maintenu de face Fin de la
figure">
</object>
</td>
</tr>
</table>
Quelle est la nature de la section ? 
Bouge le point M et observe comment varie la section.
L'aire de la section et la mesure SM sont-elles deux
grandeurs proportionnelles? 
Dessine sur ton cahier, à main levée, l'allure générale qu'aura la représentation
graphique de la variation de l'aire de la section en fonction de
SM.
Pour vérifier: 
Clique sur le repère puis double clic pour faire apparaître le menu. 
Dans le menu choisis Afficher puis Mode
Trace. 
Clique ensuite sur la pyramide puis bouge le point M.
</body>
</html>

Création de la page html avec figure animée.

Transcription

Documents pareils

Comment connaître son adresse IP publique

creation de site

Latvia / Lettonie Riga 64,589 km² Latvian / Letton Andris Berzins

Anibal Cavaco Silva Tower of Belem/Tour de Bélem

SCHWEIZERISCHER BEARDED - COLLIE

cours d`initiation a la creation de pages internet en html plan

Fiche de l`AWT Promotion d`un site web

Premier dessin : la jeune fille âgée de 16 ans présente

Sacambaya - Villeneuve de Marsan

Queen Margrethe II / Reine Margrethe II The Little Mermaid / La