Avant de me mettre à coder ma home-page dans le cadre des exercices imposés du STAF 14, j'ai commencé à mettre sur papier les diverses contraintes imposées et les moyens de les concilier avec mes préférences personnelles. Je trouve qu'une page personnelle doit avant tout refléter la personnalité de celui qu'elle représente et le représenter au mieux. Pour mieux organiser mon travail, j'ai regroupé les différentes contraintes et mes ambitions personnelles pour les concilier de manière optimale et éviter les pièges de foncer tête baissée dans la phase de codage qui m'aurais obligé à d'interminable réadaptation par la suite. Voici comment j'ai regrouper les contraintes et les envies personnelles :
Une fois les contraintes et les envies mises au clair, j'ai réfléchis aux conseils que l'on m'a prodigué de façon à les mettre le mieux en œuvre. Etant un adepte des graphismes sophistiqués et souvent lourd, j'ai dû me discipliner au maximum pour ne pas alourdir ma page et la rendre trop lourde au chargement. Je me suis donc mis à la place des possesseurs de connexion lente. La contrainte que je me suis imposé et qui résume les contraintes 4, 5, 8 et 10 fut de ne pas dépasser un total de 20 Ko pour l'ensemble des pages de mon site et de n'avoir aucune page dépassant les 15 Ko au téléchargement ; un vrai supplice pour mon coté graphiste mais qui m'a permis d'apprendre à m'adapter aux contraintes. J'ai donc opté pour un design avec un minimum d'image et des images les moins lourds possible. Par soucis de cohérence mais aussi d'économie, j'ai décidé de n'utilisé que 5 couleurs différentes pour tout le site web, on prenant soin de garder une homogénéité d'ensemble. De plus les couleurs utilisées sont les couleurs de base de façon à ce que la page soit lisible même sur une configuration en 16 couleurs (sur les PC du moins). De plus cela me permet de changer les couleurs à ma guise très rapidement en choisissant 5 autres et en m'adonnant tout simplement à une tache de chercher/remplacer dans le feuillet de style.
La page devait aussi me représenter au mieux, donc être sobre mais élégante et d'un design assez précis pour rendre compte de mon coté cartésien et minutieux. De plus j'ai voulu donner à ma home-page un caractère stable dans l'espace, de façon à la rendre facile à naviguer, parfaitement lisible (quelque soit l'endroit ou on se trouve). Toutes les infos qui sont disponible sur toutes les pages devait se retrouvé aux mêmes emplacement de façon à faciliter la prise en main par les utilisateurs. Ainsi tout le design reste fixe pour ne laisser varier que le contenu d'une page à l'autre. Pour se faire j'ai découpé la page selon la fonction des éléments (barre de navigation, titre de la page, corps, contact, update, vérificateurs) et leur ai assignée un positionnement fixe défini dans le feuillet de style. Il aurait été possible de simplement utilisé des frames mais il m'a semblé plus économique et judicieux d'utilisé le positionnement absolu comme solution pour arriver à mes fins.
La page devait s'adapter au mieux à l'utilisateur, j'ai pris un soin particulier à utiliser, dans la mesure du possible, essentiellement des commandes disponibles sur tout type de navigateurs et système. Il a fallu aussi tenir compte de la taille de la fenêtre de l'utilisateur. Il m'a semblé judicieux de faire en sorte de rendre les éléments important de la page toujours visible à l'utilisateur, et ce quelque soit la taille de sa fenêtre de navigation. Une disposition à été d'éviter des textes trop long. L'attribut " height " m'a permis de faire en sorte que la longueur des lignes s'adapte à la largeur de la fenêtre. Je suis aussi allé encore plus loin avec la fonction overflow en mode automatique qui permet au texte d'être parcouru même pour des fenêtre très petite (correction : j'ai préféré enlever cette commande dans ma dernière mise a jour pour pouvoir adapter ma page travaux au mieux avec le reste du site). De plus la position du menu de navigation a été prévue de façon à ce qu'elle soit toujours visible sur des fenêtres de taille raisonnablement petite.
Pour ce qui est du design, je n'ai pas voulu trop dépayser les utilisateurs et ai donc proposé un menu de navigation horizontal avec un positionnement assez standard en haut a gauche. J'ai joué sur des effets de superposition de texte et d'image pour créer un effet graphique et rendre la page élégante tout en restant sobre. J'ai donc opté pour une solution composée d'une image GIF (faite à l'aide de Paint-shop pro). Avec mon prénom en pseudo-relief en fond d'écran servant de titre général et de support pour le menu de navigation.
Pour améliorer la navigation et la lisibilité de mon interface, j'ai eu recours à plusieurs technique différentes : premièrement j'ai opté pour des liens avec fonction hover qui changent de couleur au passage de la souris. Ce qui permet à l'utilisateur de savoir exactement ou il va cliquer et ou il peut cliquer. Les liens dans le texte sont d'une couleur plus foncée que celle du texte. Pour permettre au sujet de savoir exactement ou il se situe dans le site, j'ai utilisé 2 feed-backs différents : tout d'abord le lien dans le menu correspondant à la page ou le sujet se trouve est désactivé et d'une couleur différente. De plus il y a un grand titre par page permettant au sujet de savoir ou il se trouve. Pour des questions de lisibilité j'ai aussi tenté d'apporter un contraste important entre les couleurs des contenus et celle du fond.
Pour ce qui est des aspects techniques, J'ai porté une attention toute particulière à faire un usage optimal des feuilles de style CSS en séparant au maximum le contenu de la forme. Ce qui me facilitera grandement toutes les mise-à jour futures. J'ai aussi effectué une validation des diverses pages grâce à l'outil du W3C et ai ajouté un lien vers cette outil sur chaque page. Pour savoir le nombre de visiteurs sur ma page, j'ai ajouté un compteur personnalisé assorti au couleur de ma page pour garder la cohérence d'ensemble au niveau des couleurs. Comme je le mentionnais dans mes ambitions personnelles, j'ai aussi fait en sorte d'utiliser les techniques les plus variés (image, texte, table, liste, div, positionnement, etc.) pour maîtriser au mieux toutes les subtilités des diverses balises disponibles et de leur paramétrage.
J'ai dans l'ensemble rencontrer peu de difficultés majeures. Je citerais ici tout de même quelques difficultés rencontrées et les moyens de m'en sortir : tout d'abord le décalage d'affichage entre les navigateurs Microsoft et les navigateurs netscape m'ont créer des soucis. Ce qui m'a permis de me rendre compte que le positionnement absolu peut présenter des problèmes de compatibilité (surtout si l'on utilise des unités pixels). Par exemple mon idée première était de mettre le titre de chaque page juste au dessus des 2 barres qui entour le menu. Mais le positionnement diffère de quelque 10aine de pixels entre Mozilla/Netscape et Internet Explorer. J'ai donc décidé de mettre le titre au dessous des 2 bars de façon à ce que même si sur les navigateurs Mozilla et Netscape le titre apparaît un peu plus bas, cela n'enlève pas grand chose à l'esthétique d'ensemble par rapport à la solution préconisée au départ. J'ai testé l'affichage sur une demi dizaine de navigateur différents (entre autre, IE 4, 5, 5.5, 6, Netscape 6, 7, Mozilla 1.1). J'ai aussi effectué un test d'utilisabilité sur 3 sujets en leur imposant des tâches précises et l'interface à été unanimement jugé conviviale et facile d'utilisation.
Les contraintes imposées pour la réalisation de la page travaux étaient différentes de celle pour la home page. Il ne fallait plus faire une page en XHTML mais une page XML généré par un XSLT. La DTD était préalablement imposé, ce qui simplifiait considérablement le problème. Je me suis donc donnée pour but de faire une page travaux permettant d'indexer efficacement mes travaux dans le cadre du diplômes STAF en utilisant au mieux les possibilités du métalangage XML. J'ai donc consulté la DTD et me suis inspiré de l'exemple proposé pour créer ma page travaux. Il m'a aussi semblé important que la page travaux s'intègre au mieux au reste de la home-page. Il fallait pour cela soit utiliser le fichier XSL pour générer du style, soit adresser la feuille de style CSS utilisée préalablement pour la homepage.
Avant de vraiment commencer la création de la page, j'ai mis un certain temps pour m'informer sur les subtilités du langage XML et des normes XSL. Une fois au point au niveau théorique, j'ai attaqué l'encodage qui ne m'a pas posé un grand problème. J'ai finalement opté pour l'utilisation de le feuille de style CSS que j'avais employé pour ma home page pour les aspects design car cela me paraissait la solution la plus économique et la plus pertinente pour satisfaire mon envie de cohérence d'ensemble.
La principale difficulté rencontré à été de tenter d'adapter la longueur de la page travaux avec la feuille de style CSS. Il a fallu pour cela renoncer à la commande overflow pour la zone prédéfinie pour le contenu textuelle. De plus il a aussi fallu créer une div à part pour le tableau regroupant les informations personnelles sur la page travaux, dans la CSS. Outre cela je n'ai pas rencontré de difficultés majeures pour la réalisation de la page travaux.
Comme pour la homepage je suis satisfait pour l'ensemble de ma page travaux. Elle s'intègre bien au reste du site et j'ai appris énormément de chose sur le fonctionnement du méta-langage XML et ses dérivés et j'espère pouvoir approfondir mes connaissances durant la période 2. Je dois avoué être fasciner par les possibilité proposer par une telle technologie et la révolution que cela implique dans notre manière de concevoir le Web et les échanges d'information.
Déjà un grand adepte du rôle playing et des environnements virtuels, je me suis amusé comme un petit fou dans le MOO. Ne connaissant pas trop le type de langage employé, mes objectifs de base était d'en apprendre le plus possible et d'exploité au mieux toutes les possibilités (ou presque). Pour me représenter au mieux je me suis créer un personnage qui me ressemble physiquement et qui a comme pseudo mon prénom (je sais c'est pas original mais j'ai l'avantage d'avoir un prénom original à la base J. Il me fallait de plus définir un profil en tant qu'utilisateur (commande finger) pour que les autres utilisateurs sache qui je suis.
Puis j'ai créé mon petit chez moi en ayant à l'esprit les consignes et on tentant d'être original et faire ce qui n'existait pas encore dans le MOO. Etant un passionné de musique éléctronique, j'ai donc tout naturellement opté pour la création d'une " Noisy Room " représentant un Night-club que le grand Wisard Kaspar a eu la bonté de relié au Iris_area (l'espace des étudiants de la volée IRIS). Vu que je pense que l'avenir du MOO est sur un client du type http (a mon humble avis), j'ai laisser pleine liberté à ma créativité graphique pour créer des logos et autres images de façon à personnaliser au mieux mon espace virtuel personnel. Mais j'ai aussi pensé aux gens qui utilisent un client ne permettant pas d'afficher les graphismes en faisant par exemple une carte du club en graphisme ASCII. Pour personnaliser encore plus mon night-club, il me fallait un bar et aussi une jolie serveuse c'est 2 objets m'ont permis de me familiariser avec la création d'objet de contenance et des " generic puppet and bot " (il me faudra plus tard donner la parole à ma jolie serveuse pour qu'elle puisse communiquer avec les clients et qu'elle sache les accueillir au mieux :-)
J'ai créé un bureau pour le patron (donc moi) ainsi qu'un " home-studio " qui est l'espace ou je peux recevoir les gens pour des réunion ou simplement donner des cours sur la MAO pour ceux que cela intéresseraient. Selon les contraintes imposées, j'ai aussi créé un tableau ou l'on puisse me laisser des messages.