Projet universitaire : Codecats

Description

Le projet consistait en la création d'un site web dynamique sur base d'un moteur PHP fourni par les professeurs. Le site devait proposer plusieurs feuilles de styles, dont au moins une responsive, auxquelles il est possible d'accéder en un seul clic: une feuille de style principale, une secondaire, une feuille de style destinée à l'impression ainsi qu'une version vierge de tout style afin de visualiser la page sans mise en forme.

En plus de créer plusieurs feuilles de styles, il fallait s'assurer de la compatibilité du site envers tous les navigateurs modernes, et garantir sa bonne consultation même sur Internet Explorer 7 & 8. Dans la liste des fonctionnaltés à mettre en place figurait aussi l'inclusion d'un formulaire de soumission de liens via lequel le visiteur peut ajouter un lien vers le site de son choix, accompagné d'un commentaire. Tout caractère HTML est echappé lors de la soumission de lien afin d'éviter l'exécution de script non désiré sur la page.

Le plus grand défi de ce projet résidait dans le design de la navigation responsive, composée de sous-menus. Je voulais que la navigation puisse accompagner le visiteur sans le gêner dans sa visite en obstruant une partie de son écran. À cet effet, je me suis tourné vers un script qui permet de cacher la navigation aussitôt le scroll amorcé. De plus, il fallait qu'au toucher, la navigation révèle ses onglets principaux depuis lesquels on pourrait accéder facilement aux sous-menus. À nouveau, j'ai utilisé un script très léger, assurant le côté fonctionnel de la navigation. À partir d'une certaine largeur d'écran, la navigation s'adapte et est, dès lors, embellie par des animations complexes qui dévoilent les sous-catégories au survol, réalisées en CSS pur.

J'ai développé le site selon la méthode dite mobile first, c'est-à-dire en commençant par un design fait pour le plus petit écran possible, pour ensuite en adapter l'interface selon le support. Le site est résolument flat dans ses couleurs et icônes avec un design minimaliste qui laisse place au contenu. Les nouvelles balises HTML5 structurent le site pour un HTML plus sémantique et plus facilement interprétable par les moteurs de recherche.