Elaboration d'un site web

Introduction

Dans le cadre du travail de validation du cours de Réalisation Multimédia, nous présentons la réalisation d’un site web personnel, sous le nom de « Language Solutions ». La création de ce site web a pour but offrir une première approche à la gestion d’un projet professionnel individuelle qui puisse être utilisé et adapté en fonction des besoins qui se présentent dans le futur, tout en démontrant la bonne application des compétences en HTML, CSS et JQuery, acquises pendant le cours.

Tout d’abord, dans le premier chapitre, nous aborderons en quoi a consisté l’architecture de notre site web, y compris les dessins développés de l’arborescence et les gabarits.  Ensuite, dans le deuxième chapitre, nous étalerons l’approche technologique utilisé, c’est-à-dire les outils ou langages de programmation choisis pour la création du site web. En outre, dans le chapitre trois, nous discuterons l’analyse de résultats du site web crée, en repérant les difficultés posées et quelques recommandations pour l’amélioration du site. Finalement dans, le dernier chapitre, nous finaliserons avec un bref conclusion du travail présenté.

1. L’architecture du site

L’architecture du site représente le squelette de notre projet web, par conséquent, il est absolument important de le concevoir d’une façon très rigoureuse et ordonné. Elle sert à créer une mise en page cohérent du site selon les exigences de l’utilisateur ou client. Cela permet la planification et la conception des composants techniques, fonctionnels et visuels d'un site web. Il est utilisé par les Webdesigners et les développeurs comme moyen de concevoir et de développer un site Web^[1].

En outre, parmi les facteurs qui font partie de l'architecture du site Web nous repérons : les contraintes techniques; les aspects fonctionnels, tels que le type de services que le site Web fournira ; l'aspect visuelle, c'est-à-dire l'interface, les couleurs, les boutons et autres éléments de conception visuelle. ; les paramètres de sécurité, c'est-à-dire comment le site Web assurera un contrôle d'accès sécurisé et des transactions^[2].

Dans ce contexte, nous avons parti d’un « Brain storming » pour faire sortir toutes les idées préliminaires à propos du site web désiré. Cette étape de « brain storming » nous a permis de lister et analyser les exigences requises, afin de concevoir une expression précise des besoins. Ce prototype brouillon a marqué le cap pour l’élaboration des différents gabarits et l’arborescence du site.  Dans les sous-chapitres suivants, nous allons présenter le développement de chacune de ces parties conformant le cœur de notre architecture du site web.

1. L’arborescence du site

L’arborescence est un plan d’un site web, qui représente une étape fondamentale dans la réalisation de tout projet de site web. L’arborescence nous donne un vue d’ensemble du site souhaité, présenté généralement sous la forme d’un graphique qui organise les différents pages et les différents niveaux de navigation correspondantes à chaque rubrique ou page.  

Pour notre site web personnel, l’arborescence a été conçue en trois étapes :  1) liste de tous les contenus du site web, 2) organisation des contenus par catégories, et 3) structuration/hiérarchisation de l’information. Comme objectives, nous avons listé : le site doit démontrer les compétences professionnelles aux potentiels clients cherchant des services de traduction, vise à élargir la base des clients, vise à l'essor à l'international à travers la consolidation d’une présence en ligne qui permet de vendre les services de traduction plus facilement hors du territoire.  

Le graphique suivant montre l’arborescence de notre site web personnel :

[pic 1]

Comme nous observons dans le graphique, notre site web est composé de 5 rubriques ou pages : Home page, page du CV, page du Blog, Gallérie des images, et page du contact. Pour la première rubrique Home Page, nous avons placé une barre de navigation principal contenant cinq boutons avec des links pour accéder aux autres pages. Sous la barre de navigation, différents sections ont été mis en place : une section avec infographie, une section aside « about us », une section de complément avec le slideshow, et en bas de la page, un footer. Ensuite, la rubrique du CV est composée uniquement du CV professionnel du client, et un footer en bas de la page. Dans la troisième rubrique, nous avons placé la page du Blog, qui est composée d’une section avec les articles du blog (en anglais et français), une section aside pour les informations supplémentaires du bloggeur, et un footer en bas de page. Après, dans la rubrique des Images, nous avons placé une gallérie des images simple, et un footer. Finalement, la rubrique de contact, contient un box de contact, le plugin GMap, et un footer en bas de page.

1. Le design des Gabarits

Le gabarit, aussi connu comme template ou layout, est une type de mise en page ou maquette pré-formatée, avec des éléments statiques sans contenu, qui sert de modèle pour la structure des différents pages d'un site internet^[3]. Le gabarit peut contenir par exemple : la disposition des zones ou sections de chaque page (header, asides, footer, ect.) ; le zoning des différents menus de navigation, les emplacements des contenus/textes, et les décorations du site (couleurs, icones, fonds, etc.). Le design du gabarit facilite l’image visuelle de notre projet web, surtout si l’on va rendre responsive ou adaptable aux différents tailles d’écrans ^[4].

Dans notre projet web, nous avons dessiné un total de 15 gabarits avec le logiciel WireframePro : pour chaque rubrique nous avons créé une version desktop, une version tablette, et une version mobil. La version desktop a été fixé en 1000px, la version tablette avec min-width:480px et max-width:800px, et la version mobil avec min-width:100px et max-width:480px. Bien que les gabarits suivent le même modèle de base du Home Page, quelques modifications ont été faits pour chaque rubrique afin de les personnaliser. La page d’accueil et le blog sont composés d’une barre de navigation, un aside, la section du contenu, et un footer. Les autres pages maintiennent la même barre de navigation et footer, avec un emplacement diffèrent du contenu et sans asides. Voici, quelques-uns des gabarits décrits :

...