DAJANA KAPUSOVA
TECFA Education and Technologies
|
DAJANA KAPUSOVA
TECFA Education and Technologies |
|
| [ Accueil ] [ Liens ] [ Travaux ] |
Le but de cet exercice était de concevoir un test ou un autre dispositif en JavaScript. Dans l'exercice précédent sur PHP, j'ai réalisé un questionnaire que j'aurais pu réutiliser en introduisant une partie JavaScirpt qui vérifierait si tous les champs ont bien été remplis. Mais en ce qui me concerne, cela n'aurait pas été très intéressant pour moi, car je voulais apprendre mieux le langage et être capable d'écrire moi même du code pas très compliqué. Jusqu'à présent, je ne comprennais pas grande chose à ces objets javascript, les méthodes et surtout au fait de mettre des points partout si l'on veut accèder à une propriété. Mon but était de dépasser ma "javascriptophobie" et d'apprende sur un petit dispositif que je développerai.
Je voulais rester dans le même concept de l'exercice précédent qui traîtait de la communication dans TecfaMOO et l'utilisation de quelques commandes. J'ai imaginé donc un petit dispositif qui permettrait de se familiariser avec les différentes commandes nécessaires à la communication et de voir ce qu'elles font. Pour cela, je voulais simuler les commandes dans deux fenêtres de visualisation: celle de l'utilisateur et celle d'un autre personnage. Au début, il ne m'était pas encore très clair de ce qui était possible de faire avec javascript et au fur et à mesure j'ai défini les objectifs du dispositif.
Il est à noter également, que pendant la phase de conception et de réalisation, je me suis appuyée sur les connaissances acquises dans les autres cours staf en travaillant sur un scénario, l'interface utilisateur, un système d'aide etc. Ces points seront discutés plus loin.
Le but du dispositif est de familiariser l'utilisateur avec des commandes de base du MOO destinées à la communication aifn qu'il puisse être capable de s'en servir dans TecfaMOO. Il simule dans deux fenêtres ce qui se passerait sur l'écran de l'utilisateur et sur l'écran de son interlocuteur. Ceci s'avère utile, notamment en utilisant des commandes qui n'ont un effet que lorsqu'on se trouve dans la même pièce avec un autre personnage. L'utilisateur découvrira la syntaxe des commandes que j'ai regroupé dans quatre catégories:
L'utilisateur peut aller dans la pièce de son interlocuteur (en occurence c'est daja, mon personnage dans le moo), changer son sexe ( ou "gender") ce qui aura un impact sur ce qui s'affiche dans les fenêtres.
Malgré le fait qu'il ne s'agit que d'un exercice javascript, j'ai concu ce dispositif pour tous les utilisateurs de TecfaMOO, qu'ils soient novices ou pas, car j'ai remarqué que nombreux sont ceux qui ne connaissent pas les raccourcis des commandes (un vrai MOOser = MOO user, n'utilise que ça) ou certaines commandes tout court. Il n'existe pas vraiment un manuel qui donne toutes les possibilités de syntaxe, et donc je les ai regroupées dans les quatre différentes catégories. Je vois une grande utilité pour les futurs Stafiens qui sont lâchés dans la nature ou abandonnés face aux manuels moo; le dispositif leur permettra d'apprendre rapidement pendant la semaine staf 10 à communiquer dans TecfaMOO (toutefois, il sera nécessaire de travailler plus sur la partie d'aide à l'utilisateur et le feedback). Pour aider l'utilisateur à comprendre à quoi servent les différentes commandes, il était nécessaire de leur fournir une aide.
Je résume ci-dessous les points importants de ma réalistation, ainsi que les contraintes que je me suis fixées:
Au niveau technique, la réalisation doit satisfaire aux exigences suivantes:
Dans la partie "Objectifs de la réalistation", j'ai déjà discuté qu'elle est la cible visée par mon dispositif ainsi qu'abordé le besoin de celle-ci. Je vais maintenant brièvement aborder les besoins et possibilités humaines et technologiques.
Je ne possède pas de connaissances en Javascript, mais néanmoins je suis capable de comprendre le fonctionnement de certains scripts et de les adapter. J'ai déjà utilisé javascript pour créer des fenêtres popup ou pour vérifier si un champs a été rempli dans un petit formulaire d'inscription à un cours de licence mis on-line. Ce langage me donne plutôt la chaîr de poule, parce que je ne maîtrise pas la notion d'objets. De ce fait, il était nécessaire de me documenter, en ayant recours à un livre et un site web entièrement consacrés à ce langage (voir références en bas). En m'inspirant de ces exemples, je devrais être capable d'écrire moi-même du code, vu que les instructions ne sont pas très différentes des autres langages de programmation.
Au niveau technologique, je suis suffisamment équipée, je travailli avec le logiciel Dreamweaver. Pour déboguer javascript, j'ai téléchargé un programme pour Internet Explorer (je ne me suis pas rendue compte qu'un débogueur était déjà intégré dans Dreamweaver). Il faudra penser à tester mon dispositif dans plusieurs navigateurs.
L'exercice avec ses objectifs tels que je les ai fixés, est faisable, mais demande un certain temps d'apprentissage du langage javascript. Le temps à disposition à l'apprentissage et à la réalisation du dispositif est fixé sur une semaine, il s'agit de la semaine présentielle staf période 5 (29.3.- 4.4.2004). Le tout (dispositif + rapport) doit être livré au plus tard lundi 5.4., possibilité de faire encore les dernières corrections ce jour-là.
L'utilisateur arrive sur la page du dispositif qui lui explique à quoi le dispositif sert. On l'invite à se connecter dans "coMOOnication" en cliquant sur le bouton "CONNECT". Dans une petite fenêtre, on lui sohaite la bienvenue dans coMOOnication (comme c'est le cas dans TecfaMOO) et on lui demande de saisir le nom de son personnage. Par défaut, on lui propose le nom coMOOn. Il peut abandonner l'action en appuyant sur "Annuler", entrer une chaîne vide a le même effet. Il ne peut pas utiliser le nom daja, si tel est le cas, il en sera averti.
En donnant le nom de son personnage, l'utilisateur entre dans le dispositif. Son nom s'affiche alors en haut de sa fenêtre de visualisation et sur son écran s'affiche qu'il s'est connecté. Il est prêt à utiliser coMOOnication. Plusieurs choix s'offrent à lui.
Consulter l'AIDE: qui lui permet de se familiariser avec l'utilisation de coMOOnication.
Consulter l'aide sur les commandes: qui lui explique à quoi sert la commande, quelle est la syntaxe et éventuellement donne des remarques.
Utiliser les commandes pour communiquer des quatre catégories: page, say, whisper et emote. En cliquant sur une de ces catégories, on lui propose plusieurs commandes qui sont disponibles. Il peut en choisir une en cliquant sur le bouton radio. On lui demande alors le texte qu'il veut envoyer (ce texte sera ajouté à la commande choisie). Il peut interrompre l'action en appuyant sur "Annuler". En confirmant le texte qu'il veut envoyer, un echo de la commande avec le texte s'affiche sur son écran de visualisation, ainsi qu'un autre message qui dépend de la commande qu'il a utilisé où de la pièce où il se trouve. Des messages vont s'afficher également sur l'écran de daja.
Utiliser les commandes pour se déplacer: qui permettent à l'utilisateur de frapper à la porte du MOOlin ROOge avant de s'y rendre et de rentrer chez lui. Cette commande est exécutée directement et affiche des messages sur l'écran de l'utilisateur et de daja. L'utilisateur est prevenu du fait qu'il se trouve dans la même pièce que daja en changeant la couleur des deux écrans de visualisation.
Changer le "gender" de son personnage: l'utilisateur en ai averti. Ce changement aura impact sur la formulation de certains messages qui vont s'afficher sur les écrans.
Quitter le dispositif en appuyant sur le bouton "@QUIT". Il sera alors déconnecté et revient à la page d'accueil du dispositif.
J'ai donné au dispositif le titre "coMOOnication" qui reflète bien l'objectif qu'il vise: communiquer dans le MOO. Avant de lancer l'utilisateur directement dans le dispositif, il me semblait important de lui expliquer à quoi il sert et ce qu'il peut en faire. Il n'y a rien de plus pénible que de se retrouver sur une page et on ne sait pas ce que c'est.
En se connectant, on a accès à l'ensemble. J'ai divisé la page en deux parties:
Cette division tient à la logique d'un client moo: en haut on voit ce qui est écrit et en bas on tape les commandes.
Une fenêtre de visualisation est composée de trois parties:
J'ai longuement réfléchi au fait, dans quel ordre je dois mettre le nom et le home des personnages. Au départ, j'ai mis d'abord le titre "coMOOnication arrival" (sans préciser que c'est le home de l'utilisateur) et après le nom du personnage. D'après la logique, ça voudrait dire que p.ex. dans le MOOlin ROOge, il y a daja; et dans coMOOnication arrival, il y a coMOOn (donnons un nom à l'utilisateur). Le problème se pose, quand coMOOn se déplace dans le MOOlin ROOge. L'utilisateur peut être perturbé car en fait, il se trouve dans le home de daja, mais le titre de sa fenêtre affiche que c'est "coMOOnication arrival". J'ai donc échangé l'ordre des informations et j'ai préscisé pour l'utilisateur qu'il s'agit de: your name, your home, your gender. Une autre question se posait, comment alors savoir dans quelle pièce l'utilisateur se trouve: chez daja ou chez lui? J'aurais pu ajouter une information supplémentaire dans la fenêtre avec: "you are in", mais la fenêtre contenait déjà suffisamment d'info. J'ai donc décidé d'annoncer visuellement que l'utilisateur et daja se trouvent dans la même pièce: la couleur de fond des deux fenêtres change, elles sont violet clair. Dans TecfaMOO ça ne se passe pas comme ça, mais l'utilisateur doit pouvoir se repérer dans l'espace (dans le MOO, il peut le faire avec look ou who).
Il est à noter, que les informations dans cette fenêtre sont liées au personnage, pour cette raison je n'ai pas mis le "gender" de l'utilisateur dans la partie des commandes, malgré le fait que dans un moo, on peut le changer avec la commande @gender.
La fenêtre des commandes contient:
Un bouton CONNECT / @QUIT est toujours disponible pour se connecter/déconnecter, le titre change en fonction de l'état de connexion.
Le choix des couleurs n'est pas arbitraire. J'ai pris les couleurs de mon client TkMOO-light que j'utilise sur mon PC. La couleur de la ligne de commande est toujours la même (rose-violet) et pour cette raison j'ai utilisé la même couleur dans mon dispositif pour la partie "COMMANDES" (mais étrangement la couleur ne s'affiche pas de la même façon sur le web). La couleur marron correspond au style d'affichage sur mon PC et j'ai décidé de la garder dans le dispositif.
Pour la réalisation, j'ai travaillé avec le logiciel Dreamweaver. Pour ce qui est la partie HTML, je me suis mise en wysiwyg et pour ce qui est écrire le code javascript, j'ai travaillé en mode code. L'important était de vérifier au fur et à mesure son fonctionnement, et d'utiliser le débogueur de javascript.
Le dispositif est composé de:
Son fonctionnement a été testé dans les navigateurs suivants: sous Windows: IE 5.5 et 6.0, Mozilla 1.4 et 1.6 et N 7.02 et 7.1; sous Linux: N 7.0.
J'ai crée une page en XHTML où est défini un formulaire <form name="room">. Il contient des éléments de formulaire INPUT, TEXTAREA, SELECT sur lesquels je peux agir dynamiquement avec javascript.
Voici quelques règles que j'ai retenues et utilisées en me documentant sur Javascript:
Pour définir des passages de JavaScript en HTML, il faut écrire:
<script language="JavaScript" type="text/javascript">
<!-- Cacher pour les anciens navigateurs
-->
</script>Il faut écire un commentaire pour que les navigateurs plus anciens qui
ne connaissent pas JavaScript ignorent le code JavaScript et ne l’interprètent
pas par erreur comme du texte faisant partie du fichier HTML. Le code JavaScript
devrait se trouver dans <head>, ainsi il sera déjà lu par
le navigateur et disponible au moment où il doit être exécuté.
On peut aussi appeler un fichier externe.
Une instruction en JavaScript est composée d’une commande qui se
termine par un ";" ou un passage à la ligne. De préférence,
il faut toujours mettre le ";".
Toutes les variables doivent être définies ; avec ou sans affectation
de valeur:
var X; et à l’intérieur
d’une fonction sans le mot clé varvar X; à l’intérieur
d’une fonctionLes objets JavaScript ont des propriétés et des fonctions (méthodes). Hiérarchiquement on a les objets: window –> document –> éléments HTML. Certains objets (date, heure, calculs) ne passent pas dans la hiérarchie.
Pour accéder à la propriété d'un objet, p.ex. si l'on veut écrire un texte dans un TEXTAREA, il faut écrire:
document.nomDuFormulaire.nomDeTextarea.value = "...";
donc p.ex pour que le texte s'affiche dans la fenêtre de visualisation de l'utilisateur:document.room.yourroom.value = "connected";
Pour éviter d'écrire des conditions if- else if- else, il faut utiliser un tableau Array. On peut accéder à un tableau:
tablo[1][2]tablo["page"][0]
- je l'utilise dans mon dispositif pour y stocker les messages qui doivent
s'afficher à l'écranPlusieurs événements sont possibles avec la souris: onclick, onmouseover, onmouseout etc. On écrit le code à l'intérieur d'une balise html.
On peut accéder aussi aux objets qui ont un id défini, avec getElementById('id'). Je l'ai utilisé p.ex. pour cacher et faire apparaître les commandes, il suffit de dire que le "block" doit être soit visible ou pas:
document.getElementById('menu1').style.display = "none";//cacher l' élément menu1
document.getElementById('menu1').style.display = "block";//afficher l'élement menu1
Toute la difficulté en JavaScript consiste en la compréhension de la logique des objets, de leurs propirétés et des méthodes. Quand j'ai compris cela en lisant la documentation, le développement de mon dispositif n'était plus si difficile. Il faut savoir que par rapport à HTML qui même s'il y a des erreurs, les navigateurs sont capables d'afficher la page plus ou moins correctement, mais une erreur dans Javascript est inpardonnable. Si l'on n'utilise pas un débogueur, on peut toujours chercher l'erreur.
Au départ, j'ai imaginé un dispositif avec plusieurs frames et j'ai voulu envoyer le valeurs des variables, mais je ne savais pas du tout comment ça fontionne avec javascript. La plus grande difficulté était d'accéder aux propriétés des objets car je ne comprennais pas très bien la logique d'un objet. Je pense que le fait d'avoir commencé à comprendre la programmation dans le MOO m'a aussi beaucoup aidé.
Une découverte extraordinaire fut pour moi le fait, que je pouvais accéder aux objets qui ont un "id" avec getElementById. Déjà depuis longtemps, je me pose la question à quoi ceci servait dans HTML.
Dans HTML, on définit le style avec style="...". Pour accéder au style avec javascript, c'était pour moi tout un combat et l'ilumination après. Je voulais changer la couleur d'arrière-plan d'un textarea. Avec les styles, on défint: style="background-color:red". Alors j'ai pensé, que dans javascript c'est la même chose, et j'ai écrit: document.room.yourrom.style.background-color = "red"; J'ai perdu au moins deux heures pour comprendre que dans javascript il faut utiliser backgroundColor.
Pour simuler une fenêtre du client moo, j'utilise un textarea où s'insère dynamiquement le texte. Normalement, quand il y a beaucoup de texte, une barre de déroulement s'acitve et on peut scroller dans le texte. Dans un textarea, quand j'insére un texte plus grand que la taille du textarea, j'ai effectivement une barre de déroulement qui s'affiche, mais je vois le début de ce texte alors que j'aimerais voir la fin du texte. Je ne savais pas s'il était possible de définir avec javascript que je veux me positionner sur la dernière ligne qui se trouve dans ce textarea, alors j'ai décidé d'effacer à chaque fois le contenu du textarea.
J'ai défini les deux textareas qui représentent les écrans du moo en readonly, càd que l'utilisateur ne peux pas écrire dedans. Mais par hasard, une fois j'y est cliqué et tapé sur la touche Enter. Le formulaire a été actionné et la page s'est affiché à nouveau en s'initialisant. J'ai donc mis dans la balise <form> onsubmit="return false". Mais une fois à nouveau, comme par hasard, j'ai appuyé sur la touche Backspace en ayant cliqué dans le textarea et mon formulaire a disparu. Ca m'a pris un petit moment pour comprendre que avec cette touche je suis revenu à la page précédente qui se trouvait dans l'historique de mon navigateur. Pour contourner cela, j'ai ajouté dans la balise <form> onkeydown="return false;".
En validant ma page avec le valideur XHTML, j'ai pu corriger certaines erreurs, mais j'ai toujours eu des erreurs pour "onLoad", "onMouseOver", "onKeyDown". D'abord j'ai pensé que ceci n'était pas permis avec XHTML, mais on cherchant sur le web, j'ai appris que tous les attributs doivent être en miniscule.
Travailler avec Javascript demande beaucoup de patiente et en plus il n'est pas du tout sûr que ça marche dans les différents navigateurs. C'est un vrai travail de fourmie, mais l'utiliser pour de petites choses, comme vérifier la validité de formulaires, JavaScript est très utile. Par contre certains en abuse p.ex. en vous "balançant à la figure" (ou plutôt sur votre écran) plein de fenêtres popup.
| © 2004 by D.K., updated April 2004 |
