Design web

La cinquième itération d'Interordi.com est venue d'un besoin de mettre à jour la structure de code ainsi que de remettre en état plusieurs des sections. La quantité de travail à faire a justifié le changement complet du design plutôt que d'ajouter du contenu en utilisant un modèle ayant besoin d'amélioration. Le texte des différentes pages avait aussi besoin d'une réécriture partielle.

En regardant rapidement, on dirait que ce site a une apparence très similaire à la quatrième version. Pourtant, plusieurs changements sont présents. La nouvelle barre de liens située au dessus de toutes les pages aide les visiteurs à savoir rapidement sur quel site ils se trouvent et à atteindre rapidement une nouvelle destination. Aussi, le bas de page affiche fièrement les images de validation du W3C afin de démontrer que le code est 100% valide.
Note: Présentement non-disponible.

Ce site en est un autre réalisé dans le cade d'un travail scolaire, le but étant de me décrire et de donner mon expérience face à l'informatique en général. Ce contenu étant très proche de ce qu'Interordi.com représente, une partie du matériel fut intégrée au site principal dans les semaines suivantes. Ce retour sur mes projets passés a été utile pour faire le point et déterminer dans quelle direction je désirais m'orienter par la suite en création web.

Ce site, tout comme la version 5 d'Interordi.com, est complètement valide en XHTML 1.0 et CSS. J'en ai profité pour tenter de créer un style attrayant utilisant le moins d'images possibles, tout en m'assurant que l'ensemble n'ait par l'air vide et sans intérêt. L'animation dans le menu de gauche représente un de mes premiers essais en HTML dynamique.

Un site qui n'a jamais été... Mega Man Battle Network World devait être dédié à la série de jeux Mega Man Battle Network, avec de l'information détaillé sur chaque jeu de la série. Grâce à la date de lancement original que je m'étais donné, ce site aurait été un des premiers en son genre sur le web!

C'est à ce moment que j'ai commencé à utiliser plus de CSS afin de simplifier l'utilisation d'un même design sur plusieurs pages. Par contre, puisque j'en étais toujours à l'apprentissage, il est devenu très difficile de maintenir la même apparence sous Internet Explorer et Netscape. À cause de ces problèmes ainsi que d'un manque de temps général, le projet a été annulé.
Note: le lien offert va vous amener vers une sous-section du site puisque la page principale n'a jamais été complétée. Seulement quelques pages ont été réalisées, certaines étant même incomplètes. Je voulais surtout terminer le design avant de créer le contenu lui-même.

Ce site Internet était un travail effectué pour une classe de programmation que j'ai suivi. Le but: faire un site interactif où les utilisateurs peuvent s'enregistrer, se connecter et accéder à une zone privée avec plus d'information. Un contrôle pour administrateurs était disponible pour contrôler les utilisateurs, entre autres.

Au lieu de créer des tables normales pour séparer les menus du contenu, ce site utilisait plusieurs tables avec des images pour créer les bordures, ce qui donnait un effet plus intéressant. Il y avait aussi une image différente pour faire ressortir le contenu. Ceci a été mon premier site publié à faire une meilleure utilisation de CSS, une base de donnée SQL ainsi que des scripts Perl. Le design a été réutilisé plus tard avec certaines modifications.
Note: ce site a été conçu pour fonctionner avec PostSQL, qui n'est pas supporté par ce serveur. En conséquence, certaines fonctions ne sont pas disponibles.

Tout de suite après avoir complété Travail Pratique 1, j'ai eu à faire ce projet. Maintenant en PHP, ce système était un magasin en ligne tout équippé. Pour les besoins de la démonstration, j'ai créé un site vendant de la monnaie. L'apparence était semblable à TP1, mais avec des couleurs différentes et sans utiliser les images autour des tables afin de rendre le code plus simple à lire.

Ceci a été mon premier vrai projet PHP, et le résultat en a valu la peine. Plusieurs fonctions telles que l'enregistrement, le connexion, la déconnexion et autres étaient pleinement fonctionnels. Le menu de gauche s'adaptait aussi selon le statut de l'utilisateur.
Note: ce site a été conçu pour fonctionner avec PostSQL, qui n'est pas supporté par ce serveur. En conséquence, certaines fonctions ne sont pas disponibles.

Cette nouvelle apparence du Mega Man PC Website: Dr. Cossack's Lab peut être considérée comme une évolution directe du travail fait sur les deux sites ci-dessus. Le nouveau design réutilisait plusieurs éléments, comme les deux images de fond différentes ainsi que les images pour entourer les tables. Le code HTML lui-même est beaucoup plus clair qu'auparavant.

Ceci est la version actuelle du site, aucun changement de design n'étant prévu dans le futur proche. Par contre, plusieurs sections qui étaient auparavant faites manuellement en HTML sont maintenant gérées par une base de données MySQL. La page de lien est un bon exemple de ce changement.
Note: Présentement non-disponible.

De façon très similaire au Mega Man PC Website, Interordi.com a monté d'une version avec plusieurs améliorations et un code mieux organisé. La plupart des images ont été refaites pour donner un «look» plus récent, et la structure du site elle-même a été refaite. Maintenant, au lieu d'avoir plusieurs sous-sites avec des apparences différentes, le même style revient dans toutes les sections mineures. Les plus grands sous-sites, comme le Mega Man PC Website, on gardé leur propre design.

C'est à ce moment que j'ai commencé à utiliser des images PNG au lieu de GIF. Ce nouveau format, qui est plus versatile et plus simple d'utilisation, est rapidement devenu mon préféré.
Note: les images et liens ne fonctionnent pas puisque le site est dépendant de son emplacement sur le server web.

Un autre site Internet fait comme travail scolaire, Intégration de l'informatique est léger en contenu puisque l'aspect important était de respecter une série de normes de présentation pour améliorer la navigation. Des détails comme une carte du site facilitaient la recherche de contenu.

Au delà de ces normes, un autre point majeur était l'expérimentation pour intégrer des animations en Macromedia Flash. Deux fichiers Flash ont été produits pour ce travail: une bannière d'introduction ainsi que le menu de navigation présent en haut de toutes les pages. Ceci a été ma première utilisation de Flash pour un site.

Un des tous premiers sites à être placé sur Interordi.com, il a reçu certains changements ici et là afin de faciliter la navigation. Le menu de gauche a aussi adopté des "points" imagés pour aider à distinguer les items.

Les cadres ont été gardés, mais pour un cours intervalle seulement: v3.0 a rapidement suivi avec plusieurs améliorations, incluant l'utilisation prévue de SSI.

Plusieurs mois ont passés, mes intérêts ont changés, ce qui a fait qu'une nouvelle mise à jour d'Interordi.com était require. La page principale a été modifiée pour refléter ces changements. Ce fut la fun de la Place de l'Équipe GMC, qui a été remplacée par le Temple sur MTM2.

Le design de la page a été altéré afin que toutes les images de lien aient la même taille et style. Des tables ont aussi été requires afin d'ajouter des bordures. Le résultat final était beaucoup plus agréable à regarder que v2.0, où les différents éléments étaient souvent mal alignés.

Petit et conçu rapidement, ce site était destiné à donner de l'information sur mes projets de modification de ROM passés et présents. À cause de certaines limites de temps, le résultat a été plus petit que voulu originallement.

Les tables ont été utilisées quelque peu pour afficher des statistiques sur chaque projet avec un graphe linéaire. Côté design, peu de choses étaient intéressantes puisque le tout a été fait sans planification majeure. Les versions suivantes de ce sous-site ont utilisées le design général d'Interordi.com, ce qui lui a permi de mieux s'intégrer aux autres sections du domaine.

La troisième version du Mega Man PC Website était une révision MAJEURE comparée aux précédentes. Une couleur de fond plus sombre a rendu le texte plus lisible alors que le menu de gauche avait un peu de JavaScript d'une façon similaire à la Place de l'Équipe GMC.

Ce fut ma première tentative d'utilisation de SSI au lieu des cadres afin d'inclure une barre de menus. Cela m'a permis de pousser la conception plus loin puisque celui-ci n'était plus dépendants des cadres. À la place, une balise de tables a été utilisée pour séparer le menu du contenu.
Note: les images et liens ne fonctionnent pas puisque le site est dépendant de son emplacement sur le server web.

J'ai eu quelques cours en HTML during my secondaire où je devais bâtir un site pour être évalué. J'avais récemment complété un gros travail de recherche, ce qui fait que j'ai décidé de réutiliser le contenu pour en faire une version en ligne.

Une première tentative avec les cadres, le site avait une interface simple avec le menu situé en haut. Les tables étaient utilisées lorsque nécessaire, mais la structure HTML générale restait simple.

Le premier de mes sites Internet qui a vraiment reçu des visiteurs affichait des couleurs... assez brillantes. Ce site était la page d'information en ligne de l'équipe IcU, qui était une équipe de jeu sur la MSN Gaming Zone. Le site est resté assez actif sur une bonne période puisqu'il était un point de rencontre pour toute l'équipe.

Un détail qui rend se site particulièrement intéressant est le fait que le text était disponible en français et en anglais. Ceci a été fait en utilisant deux colonnes de textes générées par des tables. Le design a rapidement été remplacé par quelque chose plus agréable à l'oeil et plus facile à faire correspondre avec différentes couleurs de textes et images.

La deuxième version du site des IcU. Presque toutes les images ont été refaites, avec en particulier de nouveaux fonds de page. Coté contenu, il n'y avait pas beaucoup de différences, mais c'était tout de même une mise à jour nécessaire.

Autre évolution du design original, ceci a été la dernière version du site avant qu'il soit fermé en mai 2000. La décision a été prise de fermer le site puisque l'équipe tombait en morceaux. Certains d'entre nous ont passés dans l'équipe GMC (voir ci-dessous), mais celle-ci n'a jamais été très populaire non plus. À son sommet, ce site recevait environ 30-40 visites par jour.

Cette nouvelle version avait une différence majeure sur les précédentes: les versions anglaises et françaises ont été séparées en deux sections définies. Malgré le fait que celà nécessitait le double du travail lors des mises à jour, il était plus facile pour les anglophones de remarquer que le site était aussi fait pour leur langue. Pour une raison inconnue, lorsque les deux langues étaient affichées sur la même page, plusieurs ne remarquaient par la version anglaise du texte...

Ce site a tout d'abord été créé comme support pour un jeu que je codais à l'époque, mais il s'est graduellement transformé pour devenir un site d'intérêt général sur la série de jeux vidéo Mega Man. Malgré le fait qu'à ses début le site n'a pas eu beaucoup de visiteurs, les résultats étaient assez bon pour me pousser à poursuivre le travail. La version v2.0 a bientôt suivie avec plusieurs améliorations et additions.

Ce site avait un design simple et efficace d'utilisation en utilisant des cadres. Inutile de passer plusieurs minutes à rechercher la page voulue: tout était disponible directement sur le menu de gauche.

Peu après la mort de l'équipe IcU, j'ai créé une nouvelle équipe de jeu où j'étais le chef. La création de ce site a suivie, toujours dans le but de former un lieu central pour tous les membres. Ceci n'a pas duré longtemps, par contre...

Les textes français et anglais ont été conservés, mais avec une nouvelle approche: cette fois, les paragraphes de textes des deux langues alternaient. Les deux colonnes de texte du début demandaient trop de code inutile, et maintenir un ensemble de pages doubles prenaient trop de temps vu que j'étais le seul à faire la maintenance du site. Ce site démontre ma première tentative en Javascript avec les boutons du menu gauche qui s'illuminaient lorsque le curseur de la souris était placé au dessus.

Ce site a été créé peu après mon acquisition du nom de domaine http://www.interordi.com. J'avais besoin d'une page d'entrée pour lier toutes les sous-sections ensemble. Ceci a mené à ce mini-site qui pointait vers le vrai contenu disponible dans les autres sites.

Ceci est ma première vraie tentative à faire un site avec un fond blanc. Le seul autre élément présent dans le fond est une barre de couleur pour indiquer le sujet général de la page. Une expansion pour couvrir d'autres sujets était prévue, mais ne s'est pas réalisé à cause d'un manque de temps. Finalement, les textes français et anglais étaient disponibles de la même façon que sur la Place de l'Équipe GMC.

Le tout premier. Le code HTML général est très simple, mais des tables ont déjà été utilisées pour aider à centrer le tout. Le site avait des images et des informations sur la série de jeu Dragon Warrior / Quest. Une seule page a été sauvée du crash.

Une autre tentative qui n'a jamais été complétée. Ce site était destiné à devenir ma page personnelle sur Internet, une place pour afficher la majorité de mon travail fait à l'aide d'ordinateurs (logiciels, sites Internet, etc.). L'idée a été récupérée quelques années plus tard sous la forme d'Interordi.com

Le code est encore très simple, avec des balises HTML limitées. Les images ainsi que certaines pages ont été perdues dans le crash de 1999, ce qui fait que ce qui est affiché ici ressemble peu à la version initiale.