Environnement - Géologie - Photos nature...
Ma sélection // Me présenter // M'écrire // Retour Menu
Voici l'adresse des questionnaires :
Rapport de stage
Juin 2000
Responsable de stage :
M. Ronan HEBERT.
Tuteur de stage :
M. Bertrand MAILLOT.
Lieu de stage :
Université de Cergy-Pontoise
Département des Sciences de la Terre
8, Avenue du Parc
95031 Cergy-Pontoise Cedex
Sujet de stage : Nouvelles technologies de l'information et de la communication dans l'enseignement des Sciences de la Terre de l'Université de Cergy-Pontoise.
Le but de ce stage est de créer des questionnaires d'auto-évaluation des connaissances en pétrologie magmatique pour les filières STU (Sciences de la Terre et de l'Univers) et SVN (Sciences de la Vie de la Nature) et de les mettre en ligne sur le site Internet du département des Sciences de la Terre de l'Université de Cergy-Pontoise. Ce rapport est une sorte de "mode d’emploi" pour créer ces tests.
Mais nous devons passer par plusieurs étapes. Tout d’abord, nous allons voir comment créer un formulaire et les différentes possibilités qui s’offrent à nous dans ce cadre. Dans un deuxième temps, nous allons étudier le traitement des images qui sont utilisées dans ces pages et enfin nous verrons comment faire pour comptabiliser le nombre de points de l’utilisateur et lui afficher son résultat à l'écran.
Le département des Sciences de la Terre de l'Université de Cergy-Pontoise :
Ce département est composé de trois professeurs (MM. Dominique Frizon de Lamotte, Siegfried Lallemant et Christian David), cinq maîtres de conférences (MM. Ronan Hébert, Bertrand Maillot, Charles Aubourg, Philippe Robion et Mme Pascale Leturmy), un chercheur CNRS (M. Jean-Claude Guézou) ainsi que quatre thésards.
La recherche est axée sur la tectonique des plaques et les déformations des chaînes d'avant pays impliquant des plis et des chevauchements. Le but est de comprendre leur formation et les relations entre macrostructures et microstructures avec des outils de sismique, magnétisme et pétrologie.
Les lieux de recherche sont situés au Japon, au Moyen Orient, en Afrique du Nord et en Europe (en France).
Ce département possède aussi des partenaires industriels : Institut Français du Pétrole (IFP) et autres compagnies pétrolières.
La création de formulaires HTML
Préparation et insertion d'images.
Les langages de programmation au sein des pages HTML (les scripts).
I.La création de formulaires HTML
Toute page web est enregistrée au format HTML (Hypertext Markup Language) pour que les navigateurs (browser en anglais) puissent traduire le code source en affichage écran. Il n'y a pas d'autre format possible pour ces pages.
La méthode la plus simple pour créer des pages web est de passer par un éditeur de texte de type Microsoft Word (nous avons utilisé la version 97 de Word pour Windows). Dans ce cas, il n’est pas nécessaire de connaître le langage du code source bien que des notions permettent de résoudre certains problèmes. (Pour accéder à ce code source, il suffit de choisir Afficher le code source dans le menu Affichage de Word.) On peut aussi utiliser des logiciels de type Web Expert ou Netscape Composer. Ce dernier fait parti de Netscape communicator qui permet de naviguer sur Internet, recevoir des email en plus de créer ces pages. Pour consulter les pages créées, il faut un navigateur : Netscape Navigator et Microsoft Internet Explorer sont les plus connus. Tout au long de ce rapport, nous allons voir les instructions pour créer des pages avec Microsoft Word 97.
Pour commencer, il faut enregistrer la nouvelle page (nouveau document) au format HTML. Pour cela, dans le menu fichier, choisir Enregistrer au format HTML. Le nouveau document est maintenant une page web.
1° Les tableaux.
Le mise en page des pages web n'est pas aussi simple qu'un document courant. Pour résoudre les problèmes d'alignement, de tabulations (qui n'existent pas en HTML), on utilise des tableaux composés de lignes et de colonnes dont on peut fusionner et fractionner les cellules. On insère donc toute forme de texte et toute image dans les cellules (seuls les paragraphes sont positionnés dans une même cellule).
Le fractionnement et la fusion de cellules permettent d’organiser la structure globale de la page : comment mettre tel paragraphe ou telle image l’un par rapport à l’autre ? Toutes les commandes les plus courantes appliquées aux tableaux sont disponibles dans le menu Tableau. On peut donc centrer, aligner à gauche, à droite, en bas ou en haut dans chaque cellule (Tableau puis Propriété des cellules).
Après cette organisation globale de votre page, vous pouvez taper votre texte à votre guise. Les commandes habituelles de Word (copier, coller, déplacer, gras, taille supérieure…) sont disponibles. Vous pouvez aussi mettre en place un fond à votre page web (Format puis Arrière-plan).
2° Les commandes de formulaires.
Le formulaire est le moyen de générer à l'écran des zones de dialogue avec l'utilisateur. Ces "forms" sont à la base de l'interaction serveur/internaute. Les questionnaires d'auto-évaluation que nous allons créer sont des formulaires et nous allons voir dans ce paragraphe comment les créer et les différentes commandes disponibles dans les formulaires.
La barre d'outil de Conception de formulaire est disponible dans le menu Affichage dès que le document est sous forme de page web (en langage HTML). Une nouvelle barre de commande apparaît. Les différentes possibilités du formulaire y sont regroupées (ce sont des contrôles) :
|
case à cocher |
|
|
Ex : Quel fruit préférez-vous ? |
Pomme Pêche Banane |
Pour compléter les formulaires, il faut que celui-ci puisse être envoyé (au créateur du formulaire ou pour calcul des résultats dans notre cas) et réinitialisé (effacement des données pour une nouvelle saisie sans pour autant recharger la page web). Nous devons donc ajouter les boutons suivants à la fin de la page :
|
soumettre (envoyer les informations) |
réinitialiser (effacer les réponses et recommencer) |
Après avoir organisé votre tableau, il faut insérer les contrôles de votre formulaire dans les cellules. Cette insertion se fait en mode Création de formulaire. Pour activer ce mode, vous devez cliquer sur l'icône correspondante (elle est composée d'un crayon, d'une règle et d'une équerre sous Word pour Windows voir en annexes). Mettre le curseur dans une cellule de tableau, puis cliquer sur le contrôle voulu dans la barre d'outil du formulaire. Vous pouvez taper du texte dans cette même cellule. La limite du formulaire apparaît automatiquement à l'insertion du premier contrôle : haut du formulaire et bas du formulaire. Faîtes de même pour tous les contrôles de formulaire que vous désirez. Dans notre questionnaire d'évaluation, nous avons utilisé les zones de texte, les boutons d'option et surtout les listes déroulantes.
Une fois la structure de votre formulaire mise en place, il reste à compléter les listes des diverses propositions et donner une valeur à chacune de ces réponses. Toutes ces manipulations se font en mode Création de formulaire.
Il faut remplir les listes déroulantes avec les différentes propositions. Pour cela, en mode Création de formulaire, double cliquez sur la liste voulue : vous obtenez la fenêtre de Propriétés (voir en annexes) du contrôle correspondant. Dans cette fenêtre des Propriétés de la liste entrez les valeurs désirées dans la case Display Values (c'est ce qui va s'afficher dans la liste). Les valeurs des différentes lignes sont séparées par des points virgules et il peut y avoir autant de ligne que l'on veut. En validant (par la touche Entrée du clavier), la case Values se complète automatiquement (c'est ce que l'ordinateur va interpréter, la valeur de la réponse sélectionnée par l'utilisateur). Les valeurs doivent être séparées par des points virgules pour apparaître sur des lignes différentes. Votre liste est donc complète. Pour la modifier, il faut faire les mêmes manipulations.
Un problème se pose pour les boutons d'option. S'il y a plusieurs questions qui comportent ce type de bouton, il faudra donner des noms différents à chaque série (on appelle une série un ensemble de boutons qui correspondent à la même question) de bouton d'option. En effet, si vous ne nommez pas différemment les boutons d'option de votre formulaire, une seule réponse sur vos 10 questions (par exemple) sera cochée. Pour résoudre ce problème, dans la fenêtre des Propriétés, entrez un nom dans la case HTLM name : entrez le même nom pour tous les boutons d'une même série.
Cette manipulation d'identification des contrôles doit être faite pour tous les contrôles qui seront utilisés dans le comptage des points (tous les contrôles d'une même série doivent porter le même nom). En effet, ces noms utilisés forment l'adresse des valeurs que l'utilisateur saisira.
A la fin du formulaire, dans les deux dernières cellules, vous devez insérer un bouton soumettre (ou submit) et initialiser (ou reset, cette commande n'est pas obligatoire). Ce sont ces boutons qui vont permettre à l'utilisateur d'envoyer des données (vers le créateur du formulaire ou vers le programme (script) qui calculera la somme des points : les deux envois en même temps posent un problème de définition même du formulaire créé) ou d'effacer les réponses qu'il vient de sélectionner (en cas d'erreur). Comme nous avons vu précédemment, c'est à partir de la barre de commande du formulaire que vous avez accès à ces contrôles. Pour changer le texte qui apparaît sur ces boutons, vous devez activer le mode Création du formulaire, et double cliquer sur le contrôle pour obtenir la fenêtre de Propriétés. Modifier ensuite la valeur Caption et validez. Fermez la fenêtre : votre bouton possède la nouvelle valeur.
La création d'un formulaire sous Word fait que votre formulaire est enregistré en modèle de document. Les choix sélectionnés lors de la création du formulaire seront reportés à la publication de celui-ci (et réapparaîtront lorsque l'utilisateur choisira de soumettre ou de réinitialiser son formulaire).
3° Les liens.
Un lien hypertexte permet de renvoyer à un emplacement de la page web en cours, à une autre page web. Pour insérer un lien, il faut sélectionner le texte (ou l'image) qui renverra vers l'autre page. Puis, dans le menu Insertion choisir Lien Hypertexte. Dans la fenêtre qui s'ouvre, vous devez saisir l'adresse de la page d'arrivée dans le cadre fichier ou URL (il s'agira pour une page web d'une URL). Après validation, le lien est actif. Pour modifier un lien, un clic droit sur celui-ci vous permet d'accéder à la fenêtre d'insertion du lien à modifier.
Nous avons utilisé des liens hypertexte à partir de notre page d'accueil vers les questionnaires et de ces derniers pour retourner vers la page d'accueil. Pour compléter ces liens, nous avons aussi fait comme une "visite guidée" des questionnaires : après avoir rempli votre premier questionnaire, vous pouvez accéder directement au questionnaire suivant sans repasser par le menu. La combinaison de ces deux types de liens laisse l'utilisateur libre de ses choix.
II.Préparation et insertion d'images.
Pour agrémenter les pages web, il est recommandé d'y inclure des images. Dans notre cas, les images sont mêmes à la base des questions posées.
Le plus simple dans le traitement des images est d'utiliser un logiciel de type Adobe Photoshop. Vous pouvez ainsi numériser votre image, la modifier et la convertir aux deux seuls formats utilisés par les navigateurs : Compuserve (.gif) et JPEG (.jpg). Bien entendu, il existe d'autres logiciels de traitement d'images. Il est aussi possible d'acquérir des images directement à partir d'un microscope optique polarisant et de les enregistrer en JPEG.
1° Le format des images.
Plusieurs méthodes sont disponibles selon la source des images. Les images numérisées (scannées) peuvent être en noir et blanc ou en couleur. Dans celles qui sont en noir et blanc (ou niveaux de gris), il vaut mieux les enregistrer au format Compuserve (.gif) alors que les autres (en couleur) doivent être enregistrées au format JPEG (.jpg). En effet, les fichiers avec l'extension .gif en noir et blanc ou niveau de gris sont plus petits que ceux au format JPEG. Choisissez toujours le fichier qui possède la plus petite taille pour une qualité identique : le téléchargement est plus rapide. Une image ne doit pas excéder 50 Ko (Kilo-octets). Mais pour les images utilisées dans nos questionnaires Systèmes Cristallins et Indexation, la plus volumineuse a une taille de 5 Ko. Les images des diagrammes binaires sont de 25 Ko.
Vous pouvez aussi insérer des images obtenues dans des bibliothèques d'images disponibles sur le réseau Internet. Ces images sont en général difficilement modifiables du fait de leur faible qualité mais agrémentent vos pages.
2° La taille et la qualité des images.
Une image numérisée n'est jamais parfaite. Il faut donc la retravailler. Pour cela, gommez les parties indésirables et rajouter les informations voulues sur cette image (le numéro des faces dont il faut donner l'indexation par exemple).
L'autre problème des images numérisées est la taille. En effet, vous ne pouvez pas insérer une image qui prend la moitié de votre page web. Il faut donc réduire cette image. Dans Photoshop, dans le menu Image, choisir Taille de l'image… vous pouvez ainsi réduire l'image en modifiant le nombre de pixels. La méthode la plus simple pour bien choisir la taille d'une image est de l'insérer dans la page web pour voir si la taille correspond à votre exigence. Pour ne pas perdre la qualité de votre image, évitez de l'agrandir : partez plutôt d'une image trop grande et réduisez là. Un conseil important est d'enregistrer une version de l'image initiale et ensuite de la réduire progressivement.
Pour un bon rapport qualité/compression, il vaut mieux numériser à faible résolution et peu compresser à l'enregistrement en JPEG (le format Compuserve n'est pas un format de compression).
3° Insertion dans la page web.
Sous Word, positionnez le curseur dans une cellule du tableau de votre page web, choisir Image dans le menu Insertion. Sélectionnez ensuite A partir d'un fichier… et recherchez votre fichier dans l'arborescence de votre ordinateur. Cliquez sur Insérer et votre fichier image sera lié à votre page.
Dans la création de page web, les fichiers image ne sont pas enregistrés avec la page (simplement pour réduire le temps de téléchargement). Un fichier inséré est lié à cette page : il est par défaut copié dans le même répertoire que votre page. Si vous déplacez votre page, vous devez aussi déplacer les fichiers qui y sont liés. Vous avez accès à la liste de ces liaisons dans le menu Edition (puis Liaisons…). Quand vous téléchargez votre page sur le serveur, vous devez faire de même avec les fichiers liés. Il est donc utile de choisir des noms simples (faciles à retenir) et sans accent (en effet, les accents ne sont pas interprétés par tous les navigateurs : les images risquent de ne pas être affichées). Dans le cas où une image ne s'afficherait pas, essayez de la supprimer et de la réinsérer (c'est le cas où vous avez modifié le nom du fichier).
III.Les langages de programmation au sein des pages HTML (les scripts).
Nous entrons maintenant dans le domaine de la programmation. Les scripts sont issus du langage Java Script (initialement Livescript) créé par Netscape au début des années 90. Un script est un programme inclue dans le corps d'un document HTML et qui est exécuté par le navigateur. Cette exécution peut être lancée dès le chargement du document par le navigateur, après que l'utilisateur ait cliqué sur un bouton particulier (c'est notre cas), ou que le pointeur de la souris soit passé sur un endroit précis de la page. Les possibilités d'utilisation d'un script sont très variées et permettent de rendre une page HTML dynamique, c'est à dire dont le contenu varie en fonction des interactions de l'utilisateur.
Les scripts sont exécutés sur le poste de l'internaute. C'est la différence avec les programmes en Java Script qui, eux, sont exécutés sur le serveur. Le problème est que tous les navigateurs n'interprètent pas ce langage. Il est donc limité aux navigateurs les plus récents.
1° Le programme : script.
Pour créer les scripts, il est conseillé d'utiliser un éditeur de texte "bas de gamme" comme Wordpad. En effet, Word modifie les scripts et il est donc impossible de les programmer correctement. Il faut donc que votre formulaire soit totalement fini pour vous lancer dans la programmation des scripts (il faut même ne plus ouvrir votre document avec Word).
Chaque section de script est encadré par les balises
<SCRIPT LANGUAGE="Javascript"> et </SCRIPT>. On les appelle des balises de début et de fin de script. Celles-ci sont elles-mêmes situées dans la tête du programme délimitée par les balises <HEAD> et </HEAD> que vous retrouvez dans le code source qui s'affiche sur votre éditeur "bas de gamme". Chaque bloc de commande du script est délimité par des accolades ({…}). On peut noter cette présentation dans l'exemple suivant où le langage script est en majuscule.Exemple :
<HTML>
<HEAD>
<TITLE>Javascript dans les documents HTML</TITLE>
<SCRIPT LANGUAGE="Javascript">
FUNCTION Alerte()
{
ALERT("exemple d'un source Javascript")
}
</SCRIPT>
</HEAD>
Dans cet exemple, on peut noter la présence de la fonction
ALERT qui correspond à l'affichage à l'écran d'une nouvelle fenêtre comportant le texte "exemple d'un source Javascript". L'affichage d'une fenêtre à l'écran est souvent le but final d'un script. Le langage Java Script fait la différence entre les majuscules et les minuscules.Dans nos questionnaires, le but est de faire le calcul des réponses justes sélectionnées par l'utilisateur. Le principe est de formuler dans le script : "Si la réponse sélectionnée par l'utilisateur est celle que j'ai moi aussi sélectionnée, on ajoute un point à partir d'un total de zéro point au départ". Il nous reste donc à transcrire ce langage français en langage Java Script. Pour cela, nous allons utiliser le principe des tests logiques
IF…ELSE (Si…Alors) disponibles dans toutes sortes de programme (Turbo Pascal, Fortran…). Ces instructions permettent de réaliser des aiguillages conditionnels. L'instruction de condition IF permet d'effectuer une séquence si la condition exprimée est vraie. La partie ELSE qui est optionnelle permet d'effectuer la séquence suivante si la condition est fausse. La syntaxe est donc :if (Condition)
{
Traitement 1
}
else
{
Traitement 2
}
Si la condition est réalisée, le traitement 1 sera exécuté, si ce n'est pas le cas, c'est le traitement 2 qui le sera.
Dans notre cas, nous n'allons pas utiliser la partie
ELSE. En effet, en partant d'une somme nulle, on peut rajouter un point à cette somme si (IF) la condition est vérifiée. La condition que nous allons utiliser est simplement le fait que l'utilisateur a sélectionné la bonne réponse. La réponse sélectionnée par l'utilisateur sera la même que celle sélectionnée par le créateur du script. Nous arrivons donc au problème suivant qui est l'affectation des valeurs sélectionnées.2° La condition et le traitement.
Le modèle se compose d'une hiérarchie d'objets uniques. L'objet de plus haut niveau s'appelle
WINDOW. Cet objet représente la fenêtre principale du navigateur. Tous les autres objets découlent directement ou non de cet objet. C'est pour cela que nous ne l'utiliserons pas. Nous allons travailler sur une seule fenêtre (nous pouvons comparer cela aux chemins absolus et relatifs des liens).Prenons, à titre d'exemple, une forme définie de la façon suivante : (cet exemple correspond à une zone de texte, la compréhension est plus facile sur ce type de contrôle).
<FORM NAME="nom">
<INPUT TYPE="text" NAME="saisie">
</FORM>
La valeur du texte entré est accessible par la variable :
window.document.nom.saisie.value.
Le formulaire dans un document est stocké dans un tableau appelé
forms, le premier formulaire est noté forms[0], le deuxième est forms[1] etc... Ainsi la valeur du texte entré qui était document.nom.saisie.value peut être aussi appelé : document.forms[0].saisie.value.Nous avons "
nom" qui correspond au nom du formulaire (il n'y en a qu'un dans chacun de nos questionnaires), "saisie" qui correspond au nom du champ (ce sont les différentes questions dans notre cas, il y en a 10 que nous appellerons par des noms simples) et dans chaque liste, il y a plusieurs propositions. Elles sont automatiquement numérotées à partir de 0 (saisie[0], saisie[1],…). Dans ce cas, saisie[0] correspond à la première proposition de notre question, saisie[1] correspond à la deuxième et ainsi de suite.Pour un bouton d'option coché, on utilisera
checked à la place de value pour définir la réponse cochée et selected pour un objet sélectionné dans une liste. C'est là que résidait le plus gros problème rencontré au cours de ce stage. Nous pouvons donc par cette méthode affecter une adresse à chaque réponse sélectionnée par l'utilisateur. Donc systemecristallin.rhonite[1].selected correspond à la seconde proposition de la question nommée rhonite du formulaire systemecristallin. Ceci représente notre condition.Le traitement correspondant à cette condition est d'ajouter 1 à la somme (on appelle ici la somme :
reponse). Nous représentons donc ceci par :If (systemecristallin.rhonite[1].selected==1)
reponse++
Ce qui signifie en langage français : si la seconde proposition de la question
rhonite du formulaire systemecristallin est sélectionnée, on affecte 1 à cette réponse et on ajoute celle-ci à la somme reponse (traduit par reponse++).Mais il reste encore quelques petits problèmes. Nous devons en effet faire la somme à partir de zéro et remettre cette somme à zéro à la fin du calcul afin que l'utilisateur ne retrouve pas la somme du questionnaire précédent dans son calcul de point. Pour cela, il faut ajouter au script
reponse=0 au début et à la fin de celui-ci.Le but final du script est aussi d'afficher le résultat à l'écran (voir annexes). Nous avons vu que la fonction
ALERT était chargée de cela. Il faut donc ajouter cette commande au script. De la même manière que précédemment, nous allons utiliser les tests logiques : la fonction ALERT devient donc un traitement. En effet, nous allons traduire "si la somme reponse est nulle, nous affichons "Vous n'avez aucune réponse juste", si cette somme est de 1, nous afficherons "Vous avez une bonne réponse" et si cette somme est supérieure à un, nous afficherons " Vous avez nombre de réponse juste réponses justes"". (nombre de réponse juste équivaut à la somme reponse). La syntaxe est donc la suivante :if (reponse==0)
alert("Vous n'avez aucune bonne réponse")
if (reponse==1)
alert("Vous avez " + reponse + " réponse juste")
if (reponse>1)
alert("Vous avez " + reponse + " réponses justes)
Dans cet exemple, nous pouvons bien voir que c'est le texte situé dans la parenthèse de la fonction
ALERT qui sera affiché dans une fenêtre. Pour afficher le nombre de points, nous positionnons "+ reponse +" où nous voulons dans la parenthèse. Le nombre de point s'affichera donc avec à l'endroit voulu.3° Le lancement du programme.
Pour que le calcul se fasse, il faut que les condition et traitement soient regroupés dans une fonction que le navigateur va exécuter (comme dans le premier exemple de cette partie). Nous appellerons cette fonction
tester. Il faut ensuite que le navigateur comprenne qu'il faut tester le formulaire :tester(systemecristallin)
{ if(condition)
traitement 1 }
dans notre cas. Avec ceci, nous avons le script qui est complet. Il reste maintenant à le lancer quand l'utilisateur clique sur le bouton "Quelle est ma note ?".
Depuis que vous avez inséré le bouton soumettre, le code source contient à la fin du document HTML la ligne :
<INPUT TYPE="SUBMIT" VALUE=" Quelle est ma note?" >
Il faut maintenant modifier cette ligne en :
<INPUT TYPE="BUTTON" VALUE=" Quelle est ma note ?"
onClick="tester(systemecristallin)">
La partie
BUTTON signifie que le script sera la cible de cette action (nous ne pouvons pas cumuler SUBMIT et BUTTON : le formulaire est soit envoyé vers le script pour calcul soit vers le créateur). L'action est définie par onClick (l'utilisateur clique une fois sur le bouton qui prend la valeur à l'écran "Quelle est ma note ?") et le résultat de cette action sera de lancer le script (la fonction) qui s'appelle tester(systemecristallin).Le formulaire est donc complet par cette action. En effet, il vous reste à enregistrer votre document et à le tester sur un navigateur (sur plusieurs si vous pouvez). Le nombre de réponse juste est alors compté et votre résultat s'affiche à l'écran après avoir cliqué sur le bouton "Quelle est la note ?".
Nous avons vu toutes les étapes essentielles pour créer nos questionnaires d'autoévaluation. Nous savons donc maintenant comment créer des formulaires et nous avons acquis des notions de programmation Javascript., bien que certains problèmes ne soient pas encore résolus (la modification du code source lors de l'ouverture d'un fichier HTML avec Word et l'envoi combiné des informations vers le script pour le calcul et vers l'email de son créateur).
Cette méthode du HTML dynamique (DHTML) est intéressante puisque c'est la seule qui permette de mettre en relation un internaute avec les créateurs de pages web. En effet, les applications, dans notre cas pédagogique, sont diverses. Que ce soit pour acheter des objets par Internet, remplir des formulaires d'admission ou pour s'inscrire sur un serveur en ligne, le HTML dynamique est la base des nouvelles technologies de l'information.
Sources.
Les livres :
Les sites Web :