Interordi.com:

Web design

Cette page résume la quasi-totalité de mes créations de sites Internet. Depuis 1998 jusqu'en 2005 et plus, j'ai créé plusieurs sites Internet pour mon utilisation personnelle ainsi que pour supporter différents groupes. J'ai séparé la liste ci-dessous en quatre générations selon la technique de codage utilisée pour chaque site. Ces différentes techniques sont décrites au début de chaque sous-section. Tous les travaux montrés dans cette page ont été codés en utilisant des éditeurs de texte simples puisque je n'ai jamais utilisé d'éditeurs "WYSIWYG" tels que FrontPage ou Dreamweaver.

Note: Sur les sites suivants, on peut me trouver selon mon vrai nom (Stéphane Lemay), ou sous un des surnoms que j'ai déjà employé: IcU_Bureau, GMC_Bureau, Dr. Cossack ou une variation de ceux-ci.


- Première Génération: Premiers Tests -

La première série de sites Internet que j'ai créés constituent mes premières tentatives en HTML. À l'époque, je n'avais reçu aucun cours sur le sujet, ce qui fait que le code est très simple et manque d'organisation. J'ai tout fait depuis le début en utilisant le Bloc-Notes de Windows, sans le support d'outils de génération de sites Internet. La majorité du contenu affiché ici a été perdu dans un crash d'ordinateur en 1999, mais vous ne manquez pas grand chose...

Dragon Quest / Warrior v1.0
Fait vers la fin 1998, Français

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.

Interordi v0.50
Fait vers la fin 1998, Français

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.


- Deuxième Génération: Une Voie Se Trace -

La deuxième génération marque le début sérieux de mes créations de site Internet. L'utilisation de Paint Shop Pro 4.12 pour la génération d'images a définitivement amélioré l'apparence générale de ces sites. Le code HTML n'était pas 100% valide, mais le tout gardait une apparence consistante entre les versions de Netscape et d'Internet Explorer disponibles à l'époque. J'ai maintenu ces standards de codage pendant une longue période. L'utilisation de cadres («frames») rendait les mises à jour globales plus simples et rapides puisqu'une seule page de menu devait être modifiée au lieu d'une série de modifications.

Ici Radio Expo-Sciences v1.0
Fait en mars 1999, Français

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.

Site des IcU / IcU Website v1.0
Fait durant l'été 1999, Français et Anglais

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.

Site des IcU / IcU Website v2.0
Fait en octobre 1999, Français et Anglais

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.

Site Internet des IcU / IcU Team Website v3.0
Fait en décembre 1999, Français et Anglais

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...

Mega Man PC Website v1.0
Fait en mai 2000, Anglais

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.

Place de l'Équipe GMC / GMC Team Place
Fait en mai 2000, Français et Anglais

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.

Interordi.com v2.0
Fait en août 2000, Français et Anglais

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.


- Troisième Génération: Tables Et Meilleur Code -

Les cadres devenant une limitation constante à gérer ainsi qu'un changement de server Internet ouvraient la porte à de nouvelles possibilités. Ce nouveau serveur supportait les «Server Side Includes» (SSI) qui sont vite devenus très utile. Ma première démarche a été de se débarasser des cadres afin que tout le contenu affiché défile ensemble. Cela a aussi aidé à rendre les sites compatibles avec des résolutions d'écrans plus variées.

Mega Man PC Website v2.0
Fait en janvier 2001, Anglais

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.

Interordi.com v3.0
Fait en mars 2001, Français et Anglais

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.

Interordi.com ROM Hacking Domain v1.0
Fait en janvier 2001, Anglais

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.

Mega Man PC Website v3.0
Fait en automne-été 2001, Anglais

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.


- Quatrième Génération: CSS et CGI -

Les navigateurs tels que Internet Explorer 5+ et Netscape 6+ ayant finallement un support CSS décent, j'ai décidé d'explorer cette technique. Le CSS de base permet de simplifier grandement le code d'une page en éléminant les codes <font> répétitifs. J'ai commencé à l'utiliser pour simplifier les mises à jour encore plus: changer une seule ligne de CSS pouvait modifier l'apparence de tous les éléments semblables présents sur une page. La quatrième génération marque le temps où j'ai appris comment programmer en Perl et en PHP. J'ai seulement fait une tentative sous Perl avant de me déplacer vers PHP qui est supérieur à mon avis. Ces nouveaux langages ouvrent un tout nouveau monde de possibilités en création web, ce que j'ai décidé d'exploiter. L'utilisation de Photoshop 5.5 et 6 m'a aussi permis de créer des graphiques supérieurs aux précédents. J'ai aussi été introduit à Macromedia Flash à cette période.

Mega Man Battle Network World v0.20
Fait durant l'été 2001 (jamais complété), Anglais

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.

Travail Pratique 1
Fait en mars 2002, Français

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.

Travail Pratique 2
Fait en mai 2002, Français

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.

Mega Man PC Website v4.0
Fait en mai-juin 2002, Anglais

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: Le lien ci-dessus va vous mener Ă  la version actuellement en ligne du site.

Interordi.com v4.0
Fait en juillet 2002, Français et Anglais

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.

Intégration de l'informatique
Fait au printemps 2003, Français

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.


- Cinquième Génération: XHTML et CSS -

La dernière étape pour le moment: une vraie utilisation de XHTML et CSS pour l'organisation complète de sites. Les tables ont été éliminées partiellement en faveur d'un positionnement pas CSS. Cet ensemble de sites Internet a aussi marqué le point où, plutôt que de simplement m'assurer de l'apparence des pages, j'ai commencé à valider le code grâce à différents outils offerts par le consortium W3. J'ai passé du HTML 4 au XHTML 1 tout en nettoyant encore plus le code afin de faciliter cette validation. Le résultat final est que ces sites évitent toute utilisation de commandes HTML désapprouvées qui sont appelées à disparaître dans le futur.

Interordi.com v5.0
Fait en juillet 2005, Français et Anglais

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: Le lien ci-dessus va vous mener Ă  la version actuellement en ligne du site.

Présentation personnelle
Fait en septembre 2006, Français

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.


- Le Futur -

Avec l'utilisation d'outils avancés tels que Photoshop, et avec des langages de programmations tels que JavaScript, PHP et SQL, j'ai maintenant plus de possibilités que jamais auparavant. Je prévois coder plusieurs scripts PHP dont chacun va avoir besoin d'un design personnalisé. Il y a bien sûr des évolutions possibles à mes sites existants, mais je n'ai pas d'horaire prévu de ce côté.

Si vous désirez avoir plus d'informations ou télécharger certains scripts, visitez la section Zone Prog!