RAPPORT SUR LA DEMARCHE DE L'EXERCICE 1, STAF14
PRESENCE DANS LE CYBERSPACE

Rappel de l'énoncé

Consigne

1. Faire une home page personnelle (en se fixant des objectifs quant à sa fonction et son design avant de la réaliser, sans y passer des journées : simple, c'est souvent mieux).
2. Se contruire une identité sur le TecfaMoo (qui doit nous représenter) avec un bureau personnel (qui doit permettre des réunions) et apprendre à naviguer/communiquer sur le Moo.
3. Réaliser une page qui indexe nos travaux. Cette dernière doit renvoyer sur notre page personnelle, être simple (interdiction d'utiliser les frames, images map, gifs animés, "blinding tags", etc.) et se montrer conforme à HTML 3.2. Elle doit pointer sur les autres sous-exercices de Staf14 (inclus dans le répertoire staf14/ex1/), qui sont en l'occurrence : la home page (via une copie dans le répertoire cité), les objets créés dans le Moo, et la page travaux (via une copie dans le répertoire cité), qui pointe donc "symboliquement" sur elle-même,
4. Puis rédiger un rapport [cette page] qui décrit et discute notre démarche, en séparant bien les différentes dimensions. Par exemple :
   • Aspects conceptuels
   • Démarche personnelle
   • Aspects techniques
   Remarque : produire quelque chose de lisible (au lieu de lister par exemple point par point comment vous avez procédé ou comment faire du HTML).

But pédagogique

Stimulation de réflexions méta-cognitif [je rajoute "donc, dire qu'on a réfléchi sur la manière dont on dit avoir réfléchi"].

Evaluation

Aspects conceptuels

[J'ai beaucoup réfléchi]

• En ce qui concerne le Moo, j'ai voulu donner une description minimale de moi-même, en essayant tout de même de faire en sorte que mon avatar me "fit" correctement dans cette communauté [je crois m'apercevoir qu'on a le droit de mélanger français et anglais ici]. Assez irritée par les dialogues type IRC, je dois avouer être entrée dans le Moo avec un préconçu plutôt négatif. Mais j'ai vite été convertie ! J'ai trouvé très intéressant de pouvoir toujours compter sur quelqu'un (en l'occurrence "Surfer") pour les indications nécessaires aux premiers pas. De plus, l'ambiance y est rigolotte et conviviale (dommage cependant que les accents ne passent pas, et que l'éditeur de texte soit réduit à une ligne... mais je crois savoir qu'on peut faire mieux avec emacs en parallèle, il faudra que j'essaie dès que j'aurai trouvé quelqu'un pour m'en dire plus). Tout ceci pour dire que j'ai trouvé un intérêt à créer mon personnage en y mettant assez d'informations personnelles pour me permettre d'interagir (dans l'avenir ?) avec des gens sur des sujets qui m'intéressent (et pas uniquement sur le fonctionnement du Moo !). Pour le bureau, je ne sais pas encore à quoi cela va servir réellement, mais j'imagine qu'un TP de cours virtuel où l'on serait le prof se prépare... Enfin, j'ai pensé nécessaire de me faire mon home (CaroFarm), pour ne plus rester dans les limbes et héberger ma chèvre, objet de base pour mes expériences de programmation future [c'est fou toutes les fonctionnalités de cet animal !].
• En ce qui concerne le Web, j'ai voulu faire une présentation fonctionnelle, donc relativement exhaustive (pour susciter d'éventuels contacts internautiques), mais qui soit cependant la plus synthétique possible (ne pas encombrer le visiteur avec des détails qui n'intéresse que celui qui les écrit). Afin de donner à voir une unité subjective, j'ai tenu à maintenir une cohérence d'ensemble dans le design de mon home site, qui incluerait par la même ma page travaux [supposant que mes travaux font partie intégrante de moi]. Même si la page travaux ne se trouve pas physiquement au même endroit sur le serveur, je considère que l'internaute n'a pas à le savoir : pour lui, c'est toujours de sujets relatifs à moi qu'il s'agit. Dans l'ensemble, j'ai voulu faire quelque chose de simple, rapide, léger, sans trop d'images mais en essayant de donner un look "graphique" à ma présentation. J'ai donc essayé de jouer toujours sur les trois mêmes couleurs, avec des formes simples mais encastrées, pour donner une impression de dynamisme. De même, pour faciliter la navigation (je trouve très énervant de ne pas savoir où l'on est quand on navigue, d'être obligé de passer par la fonction "Back" pour revenir d'où l'on vient, etc.), j'ai créé un menu gauche qui est présent sur chaque page de niveau supérieur, et qui non seulement indique dans quel chapitre on se trouve, mais aussi permet constamment de passer aux autres chapitres. Dans chaque page, il y a aussi possibilité de revenir vers la home page du Tecfa et de m'envoyer un mail : ce sont les deux fonctionnalités extra home site omni-présentes, qui ont pour fonction de relier ce travail à son contexte de production et à son auteur. Toujours pour donner un côté dynamique, ce menu gauche possède des rollovers en javascript 1.1 (il s'agit de ma seule "fioriture").

En résumé, que ce soit pour le Moo ou le Web, je me suis dit que la fonction de mon travail était de permettre (voir d'inciter) la communication avec d'autres... ce qui m'a donné assez de motivation pour y consacrer un temps, finalement, non négligeable. Il faut toujours avoir l'impression (illusion ?) que son travail va être utile à quelque chose qui le dépasse...

Démarche personnelle

• Pour le Moo, la démarche a été simple : se connecter le soir, tester différentes fonctions help, demander des trucs à "Surfer" (comme par exemple les références de la generic class room, puisque je ne connais pas de fonction "search" qui permettrait de trouver les classes d'objets disponibles), et appliquer par essai erreur... Parfois lire un peu le manuel de référence, mais plus rarement.
• Pour le Web, j'ai d'abord découpé le sujet en six chapitres de base :
• Accueil (que j'ai dénommé aujourd'hui), dont la fonction est de résumer le reste de manière à donner envie de cliquer, d'en savoir plus.
• Parcours, qui présente un succint abstract des différentes étapes me conduisant à aujourd'hui.
• Travaux Tecfa (au moins pour les promotions ultérieures... et de toute manière, c'était dans la règle à respecter).
• Réalisations multimédia (un peu de pub pour mes travaux antérieurs et actuels, on ne sait jamais, ça peut intéresser quelqu'un ? De plus, j'ai déjà construit un site personnel utilisant la technologie Flash, que j'ai rapatrié au Tecfa et sur lequel je fais pointer d'ici car il appelle des retours du "lecteur" qui me sont utiles pour écrire).
• Réalisations papier (car toute ma vie n'est pas multimédia, et que ceci me donne l'occasion d'indiquer mes dadas de recherche antérieurs au sujet desquels je ne refuse jamais un petite discussion, ainsi que mon hobby d'écriture).
• Coin du liseur (qui est certainement la partie la plus intime, comme il doit toujours y en avoir une... mais au lieu de dire j'aime ceci ou cela, ce dont tout le monde se bat l'oeil, j'ai trouvé plus intéressant pour le voyageur de connaître des références de livres qui m'ont plu ces derniers temps). En fait, on parle souvent dans la vraie vie du dernier film ou livre qui nous a touché, et c'est peut-être un bon lieu, le web, pour échanger sur ce type de sujet ?

Suite à cette découpe du contenu, j'ai décidé de faire tenir chaque chapitre en un fichier (car j'ai horreur d'être obligée de loader plusieurs pages pour lire ou imprimer une unité conceptuelle). Nous avons donc une arborescence toute simple : six entrées de niveau supérieur en parallèle, avec une navigation totale entre les entrées. Le fait de mettre ces six points au même niveau évite une navigation plus complexe, avec chapitre et sous chapitre imbriqués (imbrication qui n'était vraiment pas justifiée vu la petitesse du home site).

Bien sûr, il y a une exception à cela : les pages de travaux Tecfa. Dans ce cas, ne maîtrisant pas à l'avance le contenu (et de toute manière, ce contenu étant trop important), j'ai décidé de ne mettre que la page d'indexation au niveau supérieur de mon site personnel, chacun des travaux particuliers étant ensuite considéré comme une sous unité indépendante. Cette branche du site est donc plus profonde que les autres, et les feuilles terminales (donc les travaux eux-mêmes) n'ont plus de menu gauche : ceci permet de gagner de la place (et les liens de remontée sont seulement indiqués en début et fin de chaque travail, de manière textuelle, comme sur cette page par exemple). Chaque page travail est néanmoins contruite de la même façon, à partir du même fichier de base, de manière à harmoniser la présentation des travaux.

Aspects techniques

Ayant un vieux fond obsessionnel, toutes les pages de mon site ont été fabriquées à la main, avec NotePad, puis testées sous IE 4, IE 3, Netcape 4 et 3. J'ai en effet un mauvais souvenir de PageMill 2.0, qui interprétait n'importe comment les frames et le Javascript, et j'ai donc pris dès le début l'habitude de taper le code avec mes petits doigts. J'ai essayé de déroger à cette règle pour la présente page (ne serait-ce que pour me mettre à la page... web) en utilisant Dreamweaver 1.2. Mais les mauvais plis sont durs à perdre, et je passe plus de temps à enlever mes "etacutepointvirgule" de ce texte que j'en gagne à taper ensuite le "é" ! Et de toute manière, je retourne consulter (et modifier) régulièrement la version HTML. Bon, je suppose que ça ne va pas durer toute la vie (et il est vrai que manifestement Dreamweaver produit du code HTML correct).

Sinon, pour des choix techniques ponctuels, voilà ce que j'ai à dire (pour ma défense) :

• Le Javascript 1.1. introduit dans le menu gauche est normalement blindé pour ne pas provoquer d'erreur sur les anciens navigateurs (qui n'auront donc pas simplement l'animation graphique, mais bénéficieront tout de même de l'indication du chapitre en cours car cette indication est introduite en dur dans chaque page). Cette introduction de JS viole la contrainte de simplicité de la page d'indexation des travaux, mais il m'a semblé plus important de conserver une "intégration" de cette page dans l'ensemble du site (l'internaute n'a pas besoin de sentir qu'elle se trouve ailleurs, et surtout n'a aucune raison de croire qu'elle ne fait pas partie de l'arborescence de niveau supérieur).
• J'ai décidé de faire une fausse frame en raison des problèmes de bookmarquage et pour éviter les accès directs qui tombent sur les pages dénudées de leur cadre. En revanche, dès qu'une page est relativement longue, j'ai dupliqué ce menu en bas, pour ne pas obliger l'internaute à remonter pour changer de chapitre (voir par exemple la page réalisations multimédia).
• Cette fausse frame contient 6 images (de 4 à 5 ko chacune, plus leur alter ego en position ON pour les rollovers), images qui ne sont de toutes façon censées être chargées qu'une fois pour l'ensemble de la consultation. Ces images sont en palette adaptative (pour leur donner un aspect de tube 3D), ce qui rend, je le concède, moins bien sur un écran en 256 couleurs...
• La taille minimum de l'écran pour une consultation "aisée" du site est de 15 pouces (180 pixels pour le menu plus 500-550 pixels environ pour le contenu), ce qui ne devrait pas poser de problèmes majeurs aujourd'hui.
• Les accès permis vers des pages externes au home site (par exemple, l'accès à mon ancien site personnel ou celui vers l'iufm de grenoble) se font via l'ouverture d'une nouvelle page du navigateur.
• La légèreté des fichiers (tout en donnant un aspect graphique) a été possible par la truchement de fond de couleur pour les cellules de tableau. Je suis consciente que tous les browsers ne le supporte pas, et c'est pourquoi on ne retrouve généralement pas les informations importantes dans ces cellules (car le texte étant écrit en blanc, il n'apparaît bien sûr pas sur un fond blanc).
• Le fond de page est blanc. Il me semble que c'est le plus lisible, et le moins lourd esthétiquement.
• Toujours pour apporter une mise en page un peu "graphique", certaines polices ont été forcées à "Verdana" (police sans empattement créée spécialement pour le multimédia, que l'on peut télécharger gratuitement chez Microsoft), avec en secours Helvetica et Arial. De même, le corps des polices est parfois modifié par "size=-1". Sur un PC, c'est lisible, mais je sais que sur un Mac, c'est limite (les paramètres par défaut des navigateurs sont-ils configurés différemment ? Ne possédant pas de Mac, je n'ai pu faire le test). Je fais donc l'hypothèse que les possesseurs de Mac (moins nombreux) auront la bonne idée de grossir leur police de base s'ils le souhaitent. De plus, j'ai remarqué que les polices des titres "agrandies" (+1 ou H3) ne sont pas lissées sous Netscape alors qu'elles sont "belles" sous IE (mais je ne sais pas pourquoi ?).
• Pour tous les textes importants et longs à lire, j'ai décidé de laisser la police et la taille par défaut du client car les internautes sont censés avoir choisi pour eux-mêmes ce qui leur convient le mieux.