Création d'un site web avec XHTML5

INU3051 – Projet final – Rapport technique

Rapport technique Création d'un site web

[Azzeddine Aoulmi [matricule 1042696]]

© 2016 par Azzeddine Aoulmi. Ce travail a été réalisé à l’EBSI, Université de Montréal, dans le cadre du cours INU3051 – Information et sites Web donné au trimestre d’automne 2016 par Dominic Forest (remis le 23 décembre 2016).

Aoulmi Azzeddine – INU3051 – Création d'un site web – Automne 2016 1

INU3051 – Projet final – Rapport technique

Historique des révisions

Version 1.0

1.1

1.2

1.3

1.4

1.5

Date 2016-1201

Description

Auteurs

Mise à jour des sections1.3 et 1.4

A.Aoulmi

2016-12-

Mise à jour du plan du site (section 4.1),

05

4.2 et de l’annexe B

2016-12-

Mise à jour des sections 1.1, 2, 3, 4 et

06

annexe A

2016-1206 2016-1210 2016-1215

A.Aoulmi

A.Aoulmi

Mise à jour de la section 7

A.Aoulmi

Rédaction des sections 5 et 8

A.Aoulmi

Mise à jour de la section 6

A.Aoulmi

Aoulmi Azzeddine – INU3051 – Création d'un site web – Automne 2016 2

INU3051 – Projet final – Rapport technique

Note : Ce document est un outil de travail. Il est inspiré de plusieurs ouvrages, dont les suivants :  Bordage, S. 2006. Conduite de projet Web, 3e éd. Paris : Eyrolles.  Chu, N. 2006. Réussir un projet de site Web, 4e éd. Paris : Eyrolles  Goto, K. et Cotler, E. 2005. Web redesign. Workflow that works, 2nd ed. Indianapolis : New Riders. (cet ouvrage est aussi disponible en français sous le titre Redesign Web 2.0.

Conduite de projet publié chez Eyrolles)

Aoulmi Azzeddine – INU3051 – Création d'un site web – Automne 2016 3

INU3051 – Projet final – Rapport technique

Table des matières HISTORIQUE DES RÉVISIONS -------------------------------------------------------------------------2 1. PRÉSENTATION GÉNÉRALE DU PROJET ------------------------------------------------------5 1.1. BUT -------------------------------------------------------------------------------------------------------5 1.2. PORTÉE---------------------------------------------------------------------------------------------------5 1.3. DÉFINITIONS, ACRONYMES ET ABRÉVIATIONS ------------------------------------------------------6 1.3.1. Définitions------------------------------------------------------------------------------------------6 1.3.2. Acronymes et abréviations -----------------------------------------------------------------------7 1.4. RÉFÉRENCES --------------------------------------------------------------------------------------------7 2. ACTEURS (FONCTION / DESCRIPTION)---------------------------------------------------------8 3. PLANIFICATION -----------------------------------------------------------------------------------------9 4. STRUCTURE DU SITE ET DES PAGES WEB -------------------------------------------------- 10 4.1. PLAN DU SITE ------------------------------------------------------------------------------------------ 10 4.2. TRAME DES PAGES ------------------------------------------------------------------------------------ 18 5. SPÉCIFICATIONS TECHNIQUES ---------------------------------------------------------------- 21 5.1. RÈGLES DE NOMMAGE ET DE CODAGE ------------------------------------------------------------- 21 6. MAQUETTES ET MODÈLES GRAPHIQUES -------------------------------------------------- 22 7. CHARTE GRAPHIQUE ------------------------------------------------------------------------------- 23 7.2. LOGO --------------------------------------------------------------------------------------------------- 27 7.3. POLICES ET JEUX DE CARACTÈRES ----------------------------------------------------------------- 28 7.4. JEUX DE COULEURS ----------------------------------------------------------------------------------- 29 7.5. AUTRES ÉLÉMENTS GRAPHIQUES (INCLUANT LES TRAITEMENTS)------------------------------ 31 8. STRATÉGIES DE RÉFÉRENCEMENT UTILISÉES (OU À RECOMMANDER) ------ 32 ANNEXE A – DIAGRAMME DE GANTT ----------------------------------------------------------- 34 ANNEXE B – LA STRUCTURE DU NOUVEAU SITE WEB D'HÉLÈNE BROUSSEAU 36

Aoulmi Azzeddine – INU3051 – Création d'un site web – Automne 2016 4

INU3051 – Projet final – Rapport technique

1. Présentation générale du projet 1.1. But 1.1.1. Restructurer selon les règles de l'art le site Web d'Hélène Brousseau 1.1.2. Refondre complètement son site Web professionnel 1.1.3. Permettre l'aisance de navigation et d'accessibilité à l'information du site 1.1.4. Diffuser l'information de meilleure qualité

1.2. Portée Au premier abord, il convient d'identifier les principaux utilisateurs du site Web d'Hélène Brousseau. Selon notre analyse, les utilisateurs potentiels d’un site tel que celui d'Hélène Brousseau sont :

a) Individus : Étudiants, artistes, archivistes, spécialistes de l'information, chercheurs, historiens b) Utilisateurs institutionnels : Institutions d’enseignement, organisations de préservation du patrimoine Le site Web d'Hélène est un site personnel, c’est-à-dire qu’il s’agit d’un site présentant l’activité humaine dans es multiples médiums, tels que la peinture, les fibres, la photo et l’installation. À cet égard, le site en question expose un nombre minimal de fonctionnalités, dans la mesure où son objectif principal est bien d’informer les utilisateurs et les internautes.

Aoulmi Azzeddine – INU3051 – Création d'un site web – Automne 2016 5

INU3051 – Projet final – Rapport technique

1.3. Définitions, acronymes et abréviations 1.3.1. Définitions Terme Trame des pages

Définition Ddoivent représenter conceptuellement l’agencement des informations et le positionnement des différents objets : boutons, zone de contenu, images, etc.

En droit, une personne morale est une entité dotée de la

Personne morale1

personnalité juridique, ce qui lui permet d'être directement titulaire de droits et d'obligations en lieu et place des personnes physiques ou morales qui la composent ou qui l'ont créée.

Notation condensée des nombres binaires sur un système à

Code

base 16. Le système hexadécimal « utilise ainsi 16 symboles,

hexadécimal

en général les chiffres arabes pour les dix premiers chiffres et les lettres A à F pour les six suivants. »2 Adaptation ou création des contenus et des fonctionnalités

Ergonomie

d’un site Web, à des fins d'assurer une utilisation facile et efficace par les internautes.

Utilitaire permettant à un utilisateur de se situer dans un site

Fil d’Ariane

Web, « il s’agit d’une série de liens cliquables retraçant tout le chemin parcouru vers un contenu, en partant de la racine du site (accueil). »3

Menu de navigation globale

1

Série de liens cliquables, généralement placés à l’horizontale, qui permet d’accéder aux différentes rubriques d’un site Web

Wikipédia. Personne morale. < https://fr.wikipedia.org/wiki/Personne_morale> (consultée le 16 décembre 2016).

Wikipédia. Système hexadécimal. <http://fr.wikipedia.org/wiki/Syst%C3%A8me_hexad%C3%A9cimal> (consultée le 15 novembre 2016).

3 Dictionnaire du web. Fil d’Ariane (breadcrumb).<http://www.dictionnaireduweb.com/definitions/fil-dariane-breadcrumb> (consultée le 15 novembre 2016).

Aoulmi Azzeddine – INU3051 – Création d'un site web – Automne 2016 6 2

INU3051 – Projet final – Rapport technique

Menu de

Série de liens cliquables, souvent placés dans la marge

navigation

gauche d’une page, qui permet d’accéder aux différentes

locale

sections composant une rubrique d’un site Web C'est la façon de structurer l'information dans le site, ce qui

Architecture du site

permet de définir les emplacements des différents contenus ainsi que les différentes interactions existantes entre les contenus. afin que l'utilisateur puisse atteindre l'information qu'il souhaite avoir en un minimum d'étapes.

1.3.2. Acronymes et abréviations Acronyme ou abréviation

Signification

CSS

Cascading style sheet (feuille de style en cascade)

W3C

World Wide Web Consortium

XHMTL

Extensible Hypertext Markup Language

HB

Hélène Brousseau

Px

Pixels (unité de mesure)

1.4. Références 

Hélène Brousseau. <http://helenebrousseau.com/artwork/3114856-Normetalmine-et-restaurant.html> (consulté le 15 septembre 2016)



Marc Seguin. <http://marcseguin.com/> (consultée le 15 septembre 2016).



Kate Hampel. <http://www.katehampel.com/> (consultée le 15 septembre 2016).



Kelly Goto et Emily Cotler. Web ReDesign: Workflow that Works, Secondedition.Peachpit Press. 2004. Récupéré de Bibliothèques et Archives nationales du Québec. <http://www.banq.qc.ca/ressources_en_ligne/index.html>

Aoulmi Azzeddine – INU3051 – Création d'un site web – Automne 2016 7

INU3051 – Projet final – Rapport technique



Nicolas Chu. Réussir un projet de site web - 6ème édition. Paris : <http://fr.openclassrooms.com/informatique/cours/le-referencement-de-sonsite-web/la-balise-title> (consultée le 15 septembre 2016).



Vincent Hiard. Gestion d’un projet web – Planification, pilotage et bonnes pratiques. ENI Éditions. 2011.



W3C. W3C Markup Validation Service. <https://validator.w3.org/> (consultée le 15 septembre 2016).



W3C. W3C site map. <https://www.w3.org/Consortium/siteindex> (consultée le 02 octobre 2016).



W3C. W3C Web Content Accessibility Guidelines 1.0. < https://www.w3.org/TR/WCAG10/> (consultée le 15 septembre 2016).



Katy Harrouart. Infographie matricielle – Élaborer une charte graphique. 2012. <file:///C:/Users/Mghendas/Downloads/elaborer_charte_graphique-20130227153114.pdf> (consulté le 25 septembre2016).



Dynamic Drive. Conveyor Belt slideshow script.<http://www.dynamicdrive.com/dynamicindex14/leftrightslide.htm> (consultée le 25 septembre 2016).



Abobe color CC. <https://color.adobe.com/fr/create/color-wheel> (consulté le 20 octobre 2016).



Mono logo perso. < http://www.monlogoperso.be/>. (consulté le (consulté le 05 octobre 2016).

2. Acteurs (fonction / description) Faute des horaires irréguliers de disponibilité à l'UdeM, le travail actuel est réalisé individuellement, par Azzeddine Aoulmi. Je me suis nscrit au programme de la gestion de l'information numérique à l’Université de Montréal, et travaille parallèlement comme bibliotechnicien dans une bibliothèque de la Commission scolaire. Pour ce qui concerne cette troisième partie du projet, le travail a été divisé en huit activités complémentaires, présentées ci-dessous ainsi qu’à l’annexe A. Pour autant, afin de prendre connaissance

Aoulmi Azzeddine – INU3051 – Création d'un site web – Automne 2016 8

INU3051 – Projet final – Rapport technique

de cet échéancier, veuillez consulter le tableau suivant, de même que le diagramme de l'annexe A.

Numéro de l'activité

Description de l'activité

dans le

Responsable

diagramme Activité 14

Activité 15

Activité 16

Activité 17

Réviser le plan du site en tenant compte de la Azzeddine correction des parties 1 et 2

Aoulmi

Coder les pages html en fonction du nouveau

Azzeddine

plan de site

Aoulmi

Intégrer les sélecteurs des divisions dans les

Azzeddine

pages html

Aoulmi

Réviser les parties 1 et 2 du rapport

Azzeddine

technique

Aoulmi

Définir les sélecteurs à utiliser pour les Activité 18

feuilles de style (autres que pour les divisions)

Activité 19

Activité 20 Activité 21

Coder les feuilles de style CSS

Azzeddine Aoulmi Azzeddine Aoulmi

Réviser au besoin les parties 1 et 2 du

Azzeddine

rapport technique

Aoulmi

Rédiger le rapport technique (partie 3)

Azzeddine Aoulmi

3. Planification Le projet entourant le site Web d'Hélène Brousseau sera d’une durée totale de dix semaines s’échelonnant entre le 15 septembre et le 23 décembre 2016. Le travail sera divisé en trois parties distinctes. La première partie du travail sera d’une durée de quatre Aoulmi Azzeddine – INU3051 – Création d'un site web – Automne 2016 9

INU3051 – Projet final – Rapport technique

semaines, soit du 15 septembre au 21 octobre. Et justement, cette partie permettra de compléter huit activités différentes et complémentaires. La deuxième partie est axée sur la réalisation du design et la maquette, y compris le choix des couleurs, des polices, des proportions tout en me référant au logiciel Power Point pour la conception. La présente partie consiste à réaliser le codage CSS en deux feuilles (visionnement et impression), de même que la réalisation du codage HTML et l'intégration du contenu de la première partie. Au final, les sections "nommage" et "référencement" sont précisées à cet effet.

Afin de connaitre les détails de la planification afférente, il suffit de consulter le diagramme de Gantt présenté à l’annexe A. 4. Structure du site et des pages Web 4.1. Plan du site Le système d’organisation qui s'arrime avec les activités de notre cliente est un système thématique avec une connotation chronologique pour la majorité des sousdossiers. De ce fait, le vœu de notre cliente est bien de concevoir son nouveau site web et de mette en valeur l'ensemble de ses activités. Ainsi, ci-après sont les principales rubriques contenant ses activités artistiques et professionnelles :

o Présenter le parcours multidisciplinaire de la cliente o Diffuser les projets de l'artiste : peintures, photos et exploits o Organiser l'ensemble des ressources et des projets o Créer un pont de liaison entre l'artiste et les internautes o Apporter sa pierre à l'édifice en termes de la contribution dans le domaine des archives, du patrimoine, de l'histoire et des recherches..

Le présent système d’organisation que nous avons développé concorde relativement avec la structure d’activités artistiques et professionnelles d'Hélène Brousseau. Par contre, il convient de noter qu'un système d’organisation pour un site Web de type pur est difficile d'être établi. C'est pourquoi, le site web que nous avons conçu pour notre cliente est d'une connotation plutôt hybride. Or, parmi les six rubriques qui ont Aoulmi Azzeddine – INU3051 – Création d'un site web – Automne 2016 10

INU3051 – Projet final – Rapport technique

été identifiées, nous avons trois seulement qui reflètent les activités de notre cliente, c.-à-d. "Bibliographie", "Curriculum vitae" et "Projets". Les trois qui restent, soit "Biographie", "Accueil" et "Contactez-nous", ont tendance d'être organisés de façon thématique. Cependant, cette structure permettrait à l’utilisateur de naviguer d'une page à une autre et d'avoir accès aux contenus de celles-ci de manière simple et efficace. Et justement, nous avons réparti les six rubriques du site en des niveaux d'information qui respectent adéquatement la règle des trois clics. Dans ce contexte, à des fins d'une navigation qui facilitent les déplacements à travers les différentes sections du site, nous avons opté pour la fonctionnalité "fil d’Ariane" en haut de page : c'est ce qui aide grandement les utilisateurs à se positionner dans le site et à papillonner de façon conviviale d’une information à une autre, ainsi que de rebrousser chemin sans se perdre en cours de route.

À cet égard, ci-après est la page du plan du site web que nous avons conçu en conséquence. Pareillement, il est possible de consulter la version schématique étant disponible à l’annexe B. Ainsi, notre nouveau site Web d'Hélène Brousseau totalise 37 pages XHTML.

Plan du site 

Page d’accueil 

Biographie 

Version français



Version anglaise



Bibliographie



Curriculum vitae





CV en français



CV en anglais

Projets 

Fibres - 2008 - Crevettes

Aoulmi Azzeddine – INU3051 – Création d'un site web – Automne 2016 11

INU3051 – Projet final – Rapport technique

- 2008 - Sois sauvage - 2010 - Delete escape rebuild - 2010 - Tu seras - 2012 - Gaz de schistes - 2012 - Malum Herba 

Installations - 2012 - Être - 2013 - Voyageur - 2014 - Sensibilité tactile



Peinture - 2006 - Compagnie - 2007 - Armes à feu - 2007 - Balles perdues : le lieu - 2008 - Balles perdues : les oiseaux - 2008 - Contraintes - 2008 - Balles perdues : La fille aux fourmis - 2013 - Still going



Photos - 2008 - Je suis - 2008 - Tout est processus - 2014 - Still going



Contact 



Pour ne joindre

Plan du site web

1.1.5. Justification des choix par rubrique du nouveau site Web a) Choix s’appliquant à l’ensemble du site Nous avons constaté qu'il y avait un certain chevauchement au niveau du site web anciennement établi. Une organisation et une répartition inappropriées des contenus et des ressources ayant été adoptées : la rubrique "Portfolio", à titre d'exemple, n'est Aoulmi Azzeddine – INU3051 – Création d'un site web – Automne 2016 12

INU3051 – Projet final – Rapport technique

pas assez visible pour conduire l'utilisateur dans sa navigation à travers les peintures, les photos et les vidéos. De même, les fonctionnalités, les titres, les dimensions et l'écriture associées à chaque document ne sont pas tout à fait claires et lisibles. Cela crée une certaine incompréhension, une désorientation et des embûches dans le parcours visuel de l’internaute, d'autant plus que la maquette choisie n'est pas en mesure de présenter le contenu de façon flexible et fluide.

Ce sont des raisons pour lesquelles, nous avons opté pour la réorganisation des rubriques et de l'ensemble des images du site actuel, de sorte que le tout répond aux critères suivants : 

Servir à créer une identité visuelle uniforme et cohérente en mettant en relief le parcours et les activités de notre cliente.



Prioriser la clarté et la compréhension du message véhiculé à travers les rubriques.

Évidemment, un fil d’Ariane n'est pas intégré initialement dans le site actuel pour permettre à l’utilisateur de savoir exactement où il se trouve. C'est pourquoi le nouveau site d'Hélène Brousseau sera pourvu d’un menu de navigation globale qui sera disponible de n’importe où dans le site, de même que la présence essentielle d’un fil d’Ariane.

De plus, dans le site actuel, il y a une seule version du curriculum vitae de notre cliente. Par conséquent, il est pertinent d'y rajouter une deuxième version anglaise, étant donné que le français et l'anglais sont les deux langues officielles les plus utilisées, notamment en Amérique du Nord. Inéluctablement, la présence d'une biographie bilingue pour l'auteur sera un atout important éclaircissant le parcours.

Aussi, l'absence d'un logo dans le site ancien affecte l'apparence et la signifiance de la raison d'être de ce site. Dès lors qu'il s’agit d’un élément identifiant de façon unique l’artiste, nous pensons qu’il serait indispensable d'en créer un et de le positionner au Aoulmi Azzeddine – INU3051 – Création d'un site web – Automne 2016 13

INU3051 – Projet final – Rapport technique

premier plan du site web, en vue justement de le mettre en valeur et d'en exploiter sa force visuelle. Selon les normes établies, le logo représentant une personne physique ou morale doit être placé dans le coin supérieur gauche d’une page Web. C’est donc à cet endroit, juste au-dessus du menu de navigation globale, qu’apparaîtra le logo interactif de l’Hélène Brousseau sur son futur site. Dans ce contexte, il est maintenant d’usage courant que, lorsqu’il clique sur le logo d’une page web, l’utilisateur soit redirigé automatiquement vers la page d’accueil, et ce, d’où qu’il soit dans le site.

Nous proposons donc de lier le logo interactif de l’Hélène Brousseau vers la page d’accueil de son site Web. Au final, le menu de navigation locale qui s'y trouve habituellement dans la marge gauche de certaines pages d'un quelconque site est entièrement absent. Dans cette optique, mise à part l'adresse courriel qui a été insérée dans la rubrique "Contact" du présent site web, il n'y a pas de liens pertinents menant vers d'autres sources d'informations et guidant l'utilisateur dans ses recherches via le site. Il est donc essentiel de procéder à une révision complète de ces menus. Dans notre nouveau site web, seules les rubriques comprenant plusieurs pages XHTML offriront un menu de navigation locale, soit la rubrique "Projets".

Tel qu'exigé pour ce qui concerne le codage (balisage) des pages du site, nous avons opté pour le langage XHTML5 et avons soumis chacune des pages, y compris les deux feuilles de CSS, au validateur du W3C. Nous avons également indenté le code et, pour ce faire, nous avons utilisé une extension ajoutée sur Notepad++. Cette extension, en plus d’indenter le code, a converti certains caractères spéciaux, notamment les apostrophes et les chevrons. C'est ce qui assure une lisibilité sur un plus grand nombre de navigateurs et un affichage sans erreur. b) Page d’accueil Comme pour la plupart des sites Web actuels, notre page d’accueil contient un contenu minimal, précis et concis, dans la mesure où l'objectif majeur de cette page Aoulmi Azzeddine – INU3051 – Création d'un site web – Automne 2016 14

INU3051 – Projet final – Rapport technique

est bien de diriger l’utilisateur dans l’ensemble du site. Au premier abord, celle-ci présente le menu de navigation globale, qui est l'élément central d’un site Web bien conçu. Elle est considérée comme étant la carte visite d'un quelconque site web, ou la clé de voûte qui pourrait intéresser un éventuel auditoire.

Concernant la zone de contenu, nous avons réalisé que l'internaute aime plutôt un accès facile à l'information en passant si peu de temps à lire de longues phrases.

C'est pourquoi nous avons décidé de tirer la vue et l'imagination de l'internaute juste en nous contentant d'y intégrer l'une des peintures artistiques de l'auteur, soit "la fille au fourmis". Visuellement, cela pourrait bien servir d'un pont efficace invitant l'utilisateur à poursuivre la navigation et la lecture et à surfer via les hyperliens du site. Enfin, il s'est avéré très utile de clôturer cette page par le symbole de la propriété intellectuelle "©Hélène Brousseau, Canada - 2016", de même que deux icônes de validation W3C, sans oublier la section "utilitaires".

c) Biographie Il est important de créer cette rubrique, dans le but de retracer le parcours personnel, artistique, scolaire, professionnel et artistique d'Hélène Brousseau. Pour ce faire, il s'est avéré beaucoup plus pratique d'exposer le contenu afférent dans les deux langues officielles et potentielles, soit le français et l'anglais. De cette façon, les gens d'ici ou d'ailleurs vont évidemment prendre connaissance de la vie privée et publique de l'auteur. À la fin, nous nous sommes contentés d'un pied de page indiquant l'auteur du site : ©Hélène Brousseau, Canada - 2016. À noter qu'il n'est pas nécessaire d'y inclure des hyperliens, dès lors que le texte est précis et concis. Par ailleurs, nous avons juste mentionné des sous-titres indiquant respectivement les deux langues de la présentation. En effet, il s'agit alors d'un portrait inévitable qui reflète initialement les différents aspects de notre cliente. Pour des raisons précités, il n'est pas pratique d'associer cette section à la page d'accueil.

Aoulmi Azzeddine – INU3051 – Création d'un site web – Automne 2016 15

INU3051 – Projet final – Rapport technique

d) Bibliographie Nous avons pensé qu'il est beaucoup plus intéressant de faire ressortir cette partie et de lui spécifier une rubrique particulière. Initialement, les sept éléments qu'elle contient se trouvent dans le curriculum vitae externe de l'artiste. Cependant, vu l'importance qu'elle renferme en terme de publications et d'expositions, nous voulons alors qu'elle soit le miroir qui reflète fidèlement le volet médiatique. Cette section est une image typique véhiculant les expériences de l'archiviste avec les médias, d'une façon globale.

En guise de détails, nous avons créé un hyperlien externe, juste au-dessous, pour visualiser le document importé depuis une autre source de l'artiste, de même que le signe de la propriété intellectuelle est consigné au pied de la page .

e) Curriculum vitae Afin de rendre la structure de l’information encore plus claire, nous avons créé deux versions du curriculum vitae représentant l'auteur : en français et en anglais. Ainsi, étant conscient de la meilleure pratique d’y exposer leurs contenus et d'en parvenir simplement, nous avons opté pour le dépôt des fichiers PDF sur le nouveau site web. Évidemment, la fonctionnalité adoptée dans l'ancien site est conservée, sauf que l'on a rajouté une seconde version en anglais, afin de fortifier la compréhension du contenu dans deux langues différentes. À l'accoutumée, le sigle de la propriété intellectuelle y était intégrée.

f) Projets Dans la version actuelle du site web d'Hélène Brousseau, on remarque que le la rubrique "Portfolio" comporte effectivement plusieurs problématiques

d'ordre

ergonomique et de design. Les images, les peintures et les photos sont présentées d'une manière centralisée, mais l'organisation adoptée rend l'affichage et la visualisation très compliquées. On y retrouve deux sections jumelées et disposées côte à côte : la première cible un projet défini avec un titre, et la deuxième nous Aoulmi Azzeddine – INU3051 – Création d'un site web – Automne 2016 16

INU3051 – Projet final – Rapport technique

propose de visualiser des documents additionnels de même catégorie. À maints égards, cela embrouille grandement les pistes de navigation.

Dans la perspective de remédier à cette anomalie et de mieux structurer l'information, il a fallu revisiter chacune des sections et des sous-sections de la rubrique "Projets".

Nous avons choisi, dans le nouveau site, de présenter et d'étaler les images, les peintures et les photos, de telle sorte que cela attribue un ordre thématique et chronologique significatif. L'objectif également et de permettre à l'utilisateur d'accéder en toute aisance et flexibilité aux différents niveaux traitant de ce répertoire d'information de l'archiviste, de même que d'améliorer l'organisation visuelle des images et des descriptions qui s'y rattachent.

Pour cet effet, le répertoire "Projets" est scindé en deux niveaux dans le sous-menu, permettant ainsi une navigation locale fluide, flexible et fructueuse. Évidemment, le dossier père "projets" renferme relativement quatre sous-dossiers, soit "Fibres", "Installations", "Peinture" et "Photos. Et ceux-ci renferment les sous sous-dossiers, avant d'en finir avec les fichiers.

La répartition de ceux-ci dans le nouveau site web est ainsi assez simple, en ayant créé deux niveaux avant d'atteindre l'information cible. Attendu que nous ne détenons pas un grand nombre de fichiers pour chaque sous sous-dossier, il semble beaucoup plus pertinent de les étaler directement et tout simplement sur les pages respectives, et ce, en créant une galerie d'images avec un script. Ensuite, un texte d'introduction se veut l'entête de chaque page : nous avons choisi d'associer les spécifications à leurs images, sous forme de tableaux représentatifs au dessus de la galerie.

L’utilisateur pourra donc facilement identifier les spécifications afférentes à chaque document : titre, année, médiums, dimensions, et crédit photo. et il sera désormais en mesure de les parcourir facilement. Ceci est indispensable aux utilisateurs pour l'économie de temps.

Aoulmi Azzeddine – INU3051 – Création d'un site web – Automne 2016 17

INU3051 – Projet final – Rapport technique

Par ailleurs, les trois vidéos que contient la sous-section "2013-Voyageur" ont été présentées sous forme de liens externes. Nous les avons préférablement transférées vers la chaîne YouTube, avant d'importer juste les liens afférents dans la page HTML. Cela est compatible avec la finalité de pouvoir les visualiser d'une manière indépendante depuis la source externe qui les héberge.

g) Contactez-nous La présente rubrique est évidemment la pierre angulaire dans tout site Web respectant les bonnes pratiques de conception Web. Au fait, tout site bien conçu prévoit une rubrique "Contactez-nous" incluse dans son menu de navigation globale. Évidemment, l'appellation du titre de la rubrique peut varier dépendamment des choix, étant donné que l'on peut parfois voir aussi "Contact". Certainement, elle est constamment et partout présente, et habituellement elle se trouve à la toute fin du menu de navigation globale. Dans l'ancien site d'Hélène Brousseau, il y a deux possibilités facultatives de communication : un formulaire en anglais et une adresse courriel de l'auteur juste à côté. Dans notre nouveau site, nous préférons soustraire le premier champ, que nous jugeons comme étant un superflu, et de simplifier la rubrique en y gardant juste une adresse courriel avec un bas de page indiquant la propriété intellectuelle de l'auteur et les icônes de validation. Ceci est parce que le recours au courriel est le tremplin le moins complexe et le plus pratique avec les nouvelles technologies de web existants. On a rajouté une carte interactive de localisation (Google Maps) pour accroître la popularité du site.

4.2. Trame des pages Les trames des pages d’un site Web "doivent représenter conceptuellement l’agencement des informations et le positionnement des différents objets : boutons, zone de contenu, images… "4. Cette étape en constitue l'interposition entre le volet de l’élaboration de la structure du site Web et celui de la conception de la charte

4

Nicolas Chu. Réussir un projet de site web. Paris : Groupe Eyrolles, 2003. Page 14.

Aoulmi Azzeddine – INU3051 – Création d'un site web – Automne 2016 18

INU3051 – Projet final – Rapport technique

graphique. De ce fait, les trames des pages permettent au concepteur d'apercevoir une identité visuelle globale de toutes les pages du futur site web.

En conséquence, pour la refonte du site web d'Hélène Brousseau, il convient d'établir trois types de trames de pages différentes et complémentaires: 

La première pour la page d’accueil, index.html, avec un script.



La deuxième pour les pages ne comportant pas de menu de navigation locale.



La troisième pour les pages comportant un menu de navigation locale, avec script

Pour la mise sur pied et la réalisation de notre site Web, voici un portrait visuel des trois trames de pages qui seront utilisées :

Aoulmi Azzeddine – INU3051 – Création d'un site web – Automne 2016 19

INU3051 – Projet final – Rapport technique

Aoulmi Azzeddine – INU3051 – Création d'un site web – Automne 2016 20

INU3051 – Projet final – Rapport technique

5. Spécifications techniques 5.1. Règles de nommage et de codage Des noms de fichiers et de dossiers plus courts sont priorisés afin d’obtenir des adresses URL courtes (stratégie de référencement), tout en privilégiant des noms simples et explicites. Par exemple, les pages traitant de catégories chronologiques portent l'année et le nom significatifs, telle que la page "2012_être.html" étant nommée "2012 - être".

Par contre, dans les balises <h1>à <h3>, on a privilégié des appellations plus longues pour mieux situer l’utilisateur et pour optimiser également le référencement (mots-clés dans les balises des titres).

Aussi, l'approche se veut que les noms des rubriques du menu de navigation globale soient écourtés. Un seul terme a été désigné pour représenter sa catégorie et obtenir, ainsi, des boutons simples à utiliser. Par ailleurs, une fois on est rendu dans les sous divisions du menu local, les titres sont mis significativement en relief avec une combinaison de l'année et du nom : les noms sont maintenus intégralement. Il est possible de citer la catégorie "projet" du menu global qui renferme des sous-sections pertinemment organisées dans la structure classificatoire afférente. C'est pourquoi, associer une date au titre est souvent apprécié par le commun des mortels du web.

Ce qui a trait aux sélecteurs attribués pour les feuilles de styles CSS, que ce soit des identifiants id ou des classes, on a ciblé des noms efficaces. D'ailleurs, on y retrouve clairement une concordance entre les signifiés et les signifiants du site (contenu de signe et sa forme respective). De plus, conformément aux pratiques de l'ergonomie, quasiment aucun style n’a été défini localement dans les pages html. au détriment des deux feuilles de CSS. Sinon, la validation avec W3C y sera négative en conséquence.

Aoulmi Azzeddine – INU3051 – Création d'un site web – Automne 2016 21

INU3051 – Projet final – Rapport technique

6. Maquettes et modèles graphiques Pour le nouveau site Web d'Hélène Brousseau, nous utiliserons deux types de pages différentes : 

un premier type pour la page d’accueil index.html avec un script (galerie d’images JavaScript).



un deuxième type pour les pages comportant un menu de navigation locale (avec un JavaScript); Impression d’écran de la page d’accueil (index.html)

Aoulmi Azzeddine – INU3051 – Création d'un site web – Automne 2016 22

INU3051 – Projet final – Rapport technique

Impression d’écran avec le menu de navigation locale (la rubrique "Projets")

7. Charte graphique Pour notre site web, nous avons opté pour la résolution de 1024x768. Il s'agit de la dimension qui a été recommandée par W3C. Elle permet justement de convenir le maximum possible d'internautes, et ce, à travers une variété de navigateurs web existants. À cet effet, développer notre site sur une largeur de 975 px permet de calculer une marge pour certains éléments qui occupent de l'espace à l'intérieur de cette dimension, tels que les barres de défilement.

Dans ce sens, il est possible de consulter, dans le tableau ci-dessous, les dimensions détaillées optées pour chacune des zones des pages du site : les proportions proposées correspondent relativement aux règles d’ergonomie web. À noter que de telles mesures ne sont pas exactement conformes aux trames réalisées dans la première partie de ce travail, tandis que celles-ci permettent juste de représenter l'aspect visuel et structurel de notre site.

Aoulmi Azzeddine – INU3051 – Création d'un site web – Automne 2016 23

INU3051 – Projet final – Rapport technique

Certaines indications ayant été fournies à la deuxième partie, liées surtout aux dimensions et aux couleurs, sont substituées à la troisième partie, de sorte que cela répond judicieusement aux règles d'ergonomie et d'accessibilité web. Afin d'assurer une meilleure qualité visuelle attendue par les utilisateurs, il est impératif d'opter relativement pour un nouvel ajustement de la maquette en même temps que l'affichage du site web avec les styles.

1.1.6. Bandeau Le bandeau constitue l'élément essentiel dans un quelconque site web, dans la mesure où il contient le logo de la personne morale du site : il doit refléter significativement l'identité visuelle de celle-ci. Son positionnement idéal est bien d'occuper un espace approprié, sans que cela nuise à la visibilité et l'affichage du contenu de site et sans que cela oblige l'utilisateur à avoir recours à la barre de défilement au début de chaque page du site.

1.1.7. Menu de navigation globale Il s'agit de la zone cliquable où sont alignés les titres des rubriques de façon horizontale.

C'est un menu essentiel pour la structuration du site web, étant donné qu'il est répétitif dans toutes les pages du site web, au même titre que le bandeau. Pour cette raison, il n'a pas à occuper un grand espace.

1.1.8. Script de la page d’accueil Un script est localisé juste au-dessous du menu de navigation globale. La page d'accueil abrite un script. Par conséquent, la portion de la page réservée au script affichera une série d’images défilant en continu et à l’horizontale.

1.1.9. Corps et zones de contenu Le corps du texte est la zone centrale où le contenu du site apparaîtra. Cette zone servira de contenant à de plus petites zones qui varieront selon la structure des pages.

Dans certains cas, cette zone coïncidera pratiquement avec la zone de contenu à Aoulmi Azzeddine – INU3051 – Création d'un site web – Automne 2016 24

INU3051 – Projet final – Rapport technique

proprement parler, mise à part les marges en haut et de chaque côté. Pour d’autres pages, cette zone centrale sera scindée en deux, où le tiers gauche sera occupé par le menu de navigation locale et les deux tiers doivent être occupés par la zone de contenu.

C’est tout juste dans le haut de la zone de contenu que viendra s’insérer le fil d’Ariane pour signaler les divisions les sous-divisions. Évidemment, une galerie d’images JavaScript est intégrée pour chaque dossier. Certains fichiers sont associés à des liens.

1.1.10. Menus de navigation locale Certaines pages contiennent des sous-sections qui sont affichables dans le menu de navigation locale. Celui-ci occupera le tiers gauche de la zone centrale de l’écran (corps du texte).

1.1.11. Pied de page Enfin, trois éléments essentiels occupent le pied de page. Le premier et le deuxième, les moins larges, suggéreront des liens à l’utilisateur vers les « utilitaires » du site, soit les rubriques "Contactez-nous" et "Plan du site". Le troisième contient le nom du détenteur du site, soit Hélène Brousseau, ainsi que le lieu et l’année de publication, soit Canada - 2016. Cette dernière comprend également les deux icônes de validation : HTML5 et CSS. Le pied de page sera positionné en bas de chaque page avec les trois éléments mentionnés.

Nom de la zone

Nom de l’attribut id dans la feuille de style CSS

Dimensions (en pixels)

Page type – Conteneur

Précisions

La hauteur sera ajustée conteneur

Largeur : 975

principal

automatiquement et variera selon le contexte.

Bandeau

bandeau

Menu de

menuglobal

Largeur : 975 Hauteur : 100 Largeur : 975

Aoulmi Azzeddine – INU3051 – Création d'un site web – Automne 2016 25

INU3051 – Projet final – Rapport technique

navigation

Hauteur : 45

globale Script de la page d'accueil

carrousel

Largeur : 955 Hauteur : 125

Une marge de 3 px est laissée de chaque côté du carrousel de la page d’accueil.

L'image survolée est ajustée à la

conteneur-galerie-

Largeur : 640

largeur de la table des

image

Hauteur : 480

spécifications, positionnée juste

Script de la

au-dessus.

galerie des

Avec un simple clic sur la

images de la

miniature, l'image s'agrandit

page "projet"

miniature-galerie-

Largeur : 70

automatiquement. Sinon, les

image

Hauteur : 42

divisions contenant une ou deux images sont affichables. par un lien, dans une autre fenêtre La hauteur sera ajustée

Corps

corps

Largeur : 975

automatiquement et variera selon le contexte.

Pour la page d’accueil et les autres pages sans menu de

Zone de contenu 1

contenugrand

Largeur : 953

navigation locale.

Une marge de 5 px sera laissée de chaque côté et une marge de 7 px sera laissée en haut.

Menu de navigation

Largeur : 291 menulocal

Hauteur : 400

locale Zone de contenu 2

Une autre marge de 5 px sera laissée du bord gauche de la page et une marge de 7 px sera laissée en haut.

contenupetit

Largeur : 650

Pour les pages avec un menu de navigation locale.

Aoulmi Azzeddine – INU3051 – Création d'un site web – Automne 2016 26

INU3051 – Projet final – Rapport technique

Une marge de 5 px sera laissée du bord droit de la page et une marge de 7 px sera laissée en haut.

Pied de page 1 utilitaires

Pied de page 2 footer

Largeur : 975 Hauteur : 50 Largeur : 975 Hauteur : 60

7.2. Logo Pour le présent site web, nous avons conçu un le logo qui rencontre les dimensions et les spécificités adéquates permettant une meilleure utilisation à l'intérieure de différentes pages. En ce sens, notre logo sera interactif, c.-à-d. un lien relatif a été créé en vue de revenir à la page d'accueil à la suite de chaque clic dessus.

À cet égard, nous avons référé au site web suivant : http://www.monlogoperso.be/ La typographie et les couleurs choisies vont de pair avec les trois couleurs du site web. De plus, la raison d'être de ce logo est très significative : il représente la personne morale du site qui est Hélène Brousseau. Initialement, on a intégré ses initiales, puis on a rajouté une feuille de l'érable à mille et un sens. Celui-ci représente le symbole emblématique du Canada, incluant tout ce qui est identitaire, artistique, archivistique, photographique, etc. de l'auteur du site.

En outre, la trame de fond du logo sera transparente. De cette façon, les internautes ne rencontreront pas les problèmes d'affichage, puis le logo prendra la couleur du fond de la zone où il est inséré, soit "le bandeau" :

Aoulmi Azzeddine – INU3051 – Création d'un site web – Automne 2016 27

INU3051 – Projet final – Rapport technique

Ci-après sont les spécifications techniques du logo de notre site web : 

Largeur : 149 px



Hauteur : 87 px



Position : à 30 px du côté gauche de la page



Le logo est interactif : en cliquant dessus, il mène l'internaute directement à la page d’accueil



Attribut id="logo"

7.3. Polices et jeux de caractères Dans la perspective d'assurer la clarté, la lisibilité et la visibilité de notre site web de point de vue humain et technique, il est nécessaire d'opter pour des polices communes et légères. C'est ce qui permet de véhiculer le message de manière explicite.

De cet angle, on a opté pour deux polices à utiliser dans notre site web. La première c'est "Tahoma" : pour servir les grands titres. La seconde c'est "Calibri" : pour servir le corps de texte. Les deux catégories de polices sont courantes et sans empattement, de même que le nombre rencontre les bonnes pratiques d'ergonomie. Pour le mode d’impression, comme il est recommandé d’utiliser des polices avec empattement, les polices utilisées seront plutôt « Times New Roman » pour les grands titres et « Georgia » pour le corps de texte.

Pour ce qui est des couleurs de polices, nous nous sommes arrêtés également sur deux pour l'ensemble du site : une pour les titres du menu local et une autre pour le texte et l'ensemble des titres. Elles sont toutes les deux simples, aident l'utilisateur à identifier visuellement l'écriture et offrent la meilleure qualité de lisibilité. La première police de caractère est un noir foncé portant le code RGB (0, 0, 0). Pour les titres des rubriques Aoulmi Azzeddine – INU3051 – Création d'un site web – Automne 2016 28

INU3051 – Projet final – Rapport technique

du menu de navigation globale, ainsi que pour le pied de toutes les pages(utilitaires seulement), on a choisi la couleur portant le code RGB (194,133,133)

Sélecteur dans la feuille de

Police

style screen.css

Taille des

Précisions

caractères

#conteneur

Calibri

16 px

#bandeau

Tahoma

32 px

#menuglobal

Calibri

20 px

#breadcrumbs

Calibri

13 px

#corps, #contenugrand,

Calibri

15 px

Éléments address

Calibri

16 px

Élément table

Calibri

16px

Éléments caption et th

Calibri

18 px

#menulocal

Calibri

12 px

#utilitaires

Calibri

18 px

#footer

Calibri

11 px

En italique

#contenupetit En italique

En gras

7.4. Jeux de couleurs Il se trouve un site en ligne, conçu par Adobe, qui offre le cercle chromatique (roue des couleurs) : https://kuler.adobe.com/create/color-wheel/. Celui-ci nous permet d'adopter convenablement pour notre site web le jeu des couleurs, et ce, de sorte que cela créera une harmonie et une homogénéité significatives.

Dans le but de répondre concomitamment aux activités artistiques et photographiques de notre cliente, nous réalisons que le site doit être assez dépouillé et explicite. Pour y réussir, nous avons opté pour la couleur du noir. Ensuite, la roue de couleur d'Adobe nous a permis relativement de définir les trois autres couleurs qui offrent une cohésion avec la couleur de base. C'est pourquoi, nous nous sommes arrêtés sur les choix suivants : Aoulmi Azzeddine – INU3051 – Création d'un site web – Automne 2016 29

INU3051 – Projet final – Rapport technique

Couleurs

Code RGB

Code hexadécimal

De base

(255, 255, 255)

FFFFFF

Couleur1

(239, 239, 239)

EFEFEF

Couleur2

(186, 186, 186)

BABABA

Couleur3

(206, 206, 206)

CECECE

Sélecteur dans la

Couleur

Couleur des

Couleur de la

feuille de style

d’arrière-plan

bordures

police

RGB(255, 255,

s/o

s/o

RGB(0, 0, 0)

s/o

s/o

RGB(0, 0, 0)

RGB(186, 186,

RGB(239, 239,

RGB(0, 0, 0)

186)

239)

#breadcrumbs

s/o

s/o

RGB(0, 0, 0)

#corps

RGB(206, 206,

s/o

RGB(0, 0, 0)

s/o

RGB(0, 0, 0)

CSS Élément body

255) #conteneur

RGB(206, 206, 206)

#bandeau

RGB(239, 239, 239)

#menuglobal

206) #contenugrand,

RGB(239, 239,

#contenupetit

239)

Éléments h1, h2, h3

s/o

s/o

RGB(0, 0, 0)

Élément table

s/o

RGB(239, 239,

RGB(0, 0, 0)

239) Éléments th

s/o

s/o

RGB(0, 0, 0)

Aoulmi Azzeddine – INU3051 – Création d'un site web – Automne 2016 30

INU3051 – Projet final – Rapport technique

#menulocal

RGB(186, 186,

s/o

RGB(194,133,133)

s/o

RGB(0, 0, 0)

186) #footer

RGB(206, 206, 206)

7.5. Autres éléments graphiques (incluant les traitements) 1.1.1. Liens hypertexte Des liens hypertextes sont omniprésents dans le site web. Il s'agit de liens internes destinés pour la navigation à l'intérieur du site web d'Hélène Brousseau, ou bien de liens externes qui mènent directement vers des sources externes. Cette technique constitue un avantage conséquent. Elle permet aux internautes de se situer lors de navigation, en offrant un repère visuel mnémonique. À cet égard, des styles seront codés dans les feuilles de style CSS pour que ces liens changent de couleur dépendamment de chaque consultation des utilisateurs.

Un autre détail additionnel, dans les pages XHTML, est celui de l'affichage et de l'ouverture des liens ciblés et des fichiers PDF dans des nouveaux anglets. Il s'agit d'une indication souvent appréciée qui améliore grandement la navigation, et ce, sans désorienter la position actuelle de l'utilisateur dans le site web. La page consultée précédemment demeure ainsi ouverte et facilement accessible à nouveau.

1.1.2. Menu de navigation globale Pareillement, les boutons du menu de navigation globale seront codés dans les feuilles de style CSS, tel que figuré dans le tableau ci-dessous, de telle sorte que les couleurs de fond changent pour indiquer la rubrique actuelle où se trouve l'utilisateur.

Action

Propriété CSS

Balisage XHTML

Aoulmi Azzeddine – INU3051 – Création d'un site web – Automne 2016 31

INU3051 – Projet final – Rapport technique

Affichage du lien

a : link {text-decoration : none;

hypertexte de base

color : #0000FF;}

Affichage du lien

a : hover {text-decoration:

hypertexte survolé

underline; color: #0000FF; }

Affichage du lien

a : visited {text-decoration: none;

hypertexte visité

color : #800080;}

Changer la couleur du

Couleur de police: #000000

bouton du menu de

Couleur de fond : #EFEFEF

navigation de la rubrique active (sur clic) Ouvrir un lien externe ou

<a

un fichier PDF dans un

href="adresse_lien_ABC"

nouvel onglet

onclick="window.open(thi s.href,'_blank');return false;">adresse_lien_AB C</a>

8. Stratégies de référencement utilisées (ou à recommander)  La structure classificatoire des dossiers du site a été simplifiée pour y contenir seulement deux niveaux, ce qui donne des adresses URL courtes.  Les noms des fichiers ont été abrégés, de même qu.ils sont significatifs.  Encodage en UTF-8.  Une balise <meta name="author" a été intégré.  Une balise <metaname="description"> de 119 mots est présente sur chaque page html.  13

mots-clés

pertinents

sur

chaque

page

html

dans

la

balise

<metaname="keywords">, en minuscules et sans accents ni caractères spéciaux.  Une icône de validation XHTML dans le pied de chaque page.  Une icône de validation CSS dans le pied de chaque page.  Tous les documents xhtml sont validés par le validateur du W3C. Aoulmi Azzeddine – INU3051 – Création d'un site web – Automne 2016 32

INU3051 – Projet final – Rapport technique

 Les images de la galerie détiennent des liens.  La couleur du texte en noire, en vue d'optimiser la qualité de visibilité et d'accessibilité.  Une balise <title> apparaît sur chaque page html au début de la balise <head>. Le fait de la placer avant la balise <meta> optimise le référencement. Nous avons choisi de donner « un titre explicite à chaque page : cela permet à l’internaute d’accéder directement à une page visitée à partir de la fonction Historique de son navigateur. »5 Tant pour optimiser le référencement que pour faciliter le repérage par les utilisateurs, « la balise <title> doit être différente pour chacune [des] pages.

Le titre d'une page est propre à chaque page. »6  Les éléments <h1> à <h3> contiennent plusieurs mots-clés.  Chaque image ou vidéo possède une balise <alt> avec une description pertinente à l’image.  Une attention particulière a été accordée au poids des pages, et surtout des images, qui ont été rapetissées pour atteindre un poids toujours inférieur à 100 Ko. C'est le cas des dossiers "photos", "peinture". Pour ce faire, le logiciel Light Image Resizer 5 est gratuit et efficace dans ce sens.  Un plan du site a été ajouté. Comme les robots s’y fient, cil s'agit alors d'une autre stratégie de référencement.  Le site est composé de 30 pages html, ce qui donne un nombre important de liens internes qui vont retenir les robots plus longtemps sur le site.

5

Nicolas Chu. Réussir un projet de site web - 6ème édition. Paris : Groupe Eyrolles, 2010. Page 44.

Openclassrooms. La balise <title>. <http://fr.openclassrooms.com/informatique/cours/le-referencement-de-son-site-web/labalise-title> (consultée le 13 avril 2014).

Aoulmi Azzeddine – INU3051 – Création d'un site web – Automne 2016 33

6

INU3051 – Projet final – Rapport technique

Annexe A – Diagramme de Gantt 1 – Planification

Planificateur de projet

Surlignage de la période :

8

Plan

Réel

% achevé

Actuel (après le plan) ACTIVITÉ

PLAN DÉBUT

PLAN DURÉE

RÉEL DÉBUT

RÉEL DURÉE

POURCENTAGE ACHEVÉ

Période 1: 15 s15-09-2016

1

Activité 01 Activité 02 Activité 03 Activité 04 Activité 05 Activité 06 Activité 07 Activité 08 Activité 09 Activité 10 Activité 11 Activité 12 Activité 13 Activité 14 Activité 15 Activité 16 Activité 17 Activité 18 Activité 19 Activité 20 Activité 21

1

1

1

2

1

1

1

1

1

1

1

1

2

2

2

3

2

2

2

3

2

3

2

3

3

2

3

2

3

2

3

2

5

1

5

2

5

1

5

2

5

2

6

2

5

2

6

2

6

2

7

1

8

2

8

2

8

2

8

3

8

2

8

3

9

2

10

1

10

1

10

1

10

2

10

2

11

1

11

1

11

1

11

1

2

Échéance partie 1

3

4

5

Échéance partie 2

6

7

8

100% 100% 100% 100% 100% 100% 100% 100% 100% 100% 100% 100% 100% 100% 100% 100% 100% 100% 100% 100% 100%

Aoulmi Azzeddine – INU3051 – Création d'un site web – Automne 2016 34

% achevé (après le plan) 11)

Échéance du projet : 09 décembre 2016 (période 10)

9

10

11

12

13

14

15

16

17

18

19

20

21

INU3051 – Projet final – Rapport technique

2 – Activités et responsables Numéro de l'activité dans Description de l'activité le diagramme Activité 01 Analyser les besoins

Responsable Azzeddine Aoulmi

Activité 02

Déterminer les objectifs

Azzeddine Aoulmi

Activité 03

Définir la portée

Azzeddine Aoulmi

Activité 04

Établir l'échéancier (planification)

Azzeddine Aoulmi

Activité 05

Développer la structure du nouveau site web

Azzeddine Aoulmi

Activité 06

Rédiger le rapport technique (la partie 01)

Azzeddine Aoulmi

Activité 07

Coder les pages du site web en XHTML

Azzeddine Aoulmi

Activité 08

Réaliser les trames des pages

Azzeddine Aoulmi

Activité 09

Choisir le jeu de couleurs

Azzeddine Aoulmi

Activité 10

Azzeddine Aoulmi

Activité 12

Concevoir un nouveau logo Déterminer les autres éléments de la charte graphique : dimensions, polices, autres éléments graphiques Réaliser les maquettes

Activité 13

Rédiger le rapport technique (partie 02)

Azzeddine Aoulmi

Activité 11

Activité 14 Activité 15 Activité 16 Activité 17 Activité 18 Activité 19 Activité 20 Activité 21

Réviser le plan du site en tenant compte de la correction des parties 1 et 2 Coder les pages html en fonction du nouveau plan de site Intégrer les sélecteurs des divisions dans les pages html Réviser les parties 1 et 2 du rapport technique Définir les sélecteurs à utiliser pour les feuilles de style (autres que pour les divisions) Coder les feuilles de style CSS Réviser au besoin les parties 1 et 2 du rapport technique Rédiger le rapport technique (partie 3)

Azzeddine Aoulmi Azzeddine Aoulmi

Azzeddine Aoulmi Azzeddine Aoulmi Azzeddine Aoulmi Azzeddine Aoulmi Azzeddine Aoulmi Azzeddine Aoulmi Azzeddine Aoulmi Azzeddine Aoulmi

Aoulmi Azzeddine – INU3051 – Création d'un site web – Automne 2016 35

INU3051 – Projet final – Rapport technique

Annexe B – La structure du nouveau site Web d'Hélène Brousseau

Page d'accueil Biographie Version française

Version anglaise

Bibliographie

Curriculum vitae CV en français

CV en français

Projets Fibres

Installation 2008 Crevettes

Contact Peinture

2012 - Être

Photos 2006Compagnie

2008 - Je suis

2008 - Sois sauvage

2013 - Voyageur

2007 - Armes à feu

2008 - Tout est processus

2010 - Delete escape rebuild

2014 Sensibilité Tactile

2007 - Balles perdues : le lieu

2014 - Still going

2010 - Tu seras

2008 - Balles perdues : les oiseaux

2012 - Gaz de Schistes

2008 Contraintes

2012 - Malum Herba

2008 - Balles perdues : La fille aux fourmis 2013 - Still going

Aoulmi Azzeddine – INU3051 – Création d'un site web – Automne 2016 36