Table of Contents

Principes de construction d'un site Web

L'ensemble de la conception doit principalement être centrée sur l'utilisateur et réalisée en concertation étroite avec un panel représentatifs d'usagers, par exemple lors de réunion de « brainstorming » (remue-méninges).

L'objet principal de la phase de conception est d'analyser l'ensemble des besoins, puis d'imaginer des contextes d'utilisation. L'analyse des besoins comporte ainsi deux volets :

d'après http://www.commentcamarche.net/contents/1252-webmastering-conception-d-un-site-web

Nous n'avons pas le temps et ce n'est pas l'objectif de ce module d'établir un cahier des charges. Nous allons cependant sur un exemple très simple, votre page web, aborder la conception d'un site web.

Nous ne prétendons pas en 3h étudier complètement l'ensemble des éléments relatifs à la construction d'un site web (sécurité, accès réseaux, architecture logicielle, persistance, …). Nous aborderons seulement la démarche et mettrons en place quelques principes qui seront approfondis pendant vos études (comme la conception, le réseau), ou qui demanderaient de travailler avec d'autres métiers comme l'ergonomie.
Voici un cours en ligne très bien fait, produit par l'université de Fribourg, vous devez l'utiliser pour la suite de ce TD. Les conseils se trouvent dans ce document.

http://www.unifr.ch/weboffice/assets/files/091110_conception_web_avec_exos.pdf Si non accessible

Planifier

A Faire : Planifier

  • Cette suite de questions doit faire l'objet d'un mini-rapport individuel, explicitant la réponse aux questions :
    • Fixer vos objectifs
      • En quoi ma page web s'insère-t-elle dans l'image globale du département d'informatique?
      • Comment une page web “professionnelle” peut-elle m'aider à me présenter?
      • Quels sont mes points forts?
      • Qu'est-ce que j'aimerais montrer de mes compétences, aspirations, …
    • Identifier votre public cible
      • Quel est le ou les public(s) que je cible par cette page? (moi-même pour retrouver des informations, mes camarades, des amis, des employeurs potentiels, des clients?)
    • Produire un cahier des charges (A ne pas réaliser pendant ce TD)
    • Imaginez des scénarios d'usages
      • Je suis <Role>, je <action> :par exemples, mais à établir en fonction de vos réponses aux question précédentes : Je suis un étudiant, je voudrais voir des exemples de codes html5; Je suis un industriel, je veux voir les compétences de ce candidat (pas je recherche un employé, il faut imaginer les questions que se posent l'employeur), je suis lycéen, je veux savoir ce que fait un étudiant d'IUT.
    • Prévoir d'aller voir ce que d'autres font (A ne pas réaliser pendant ce TD)

Concevoir

Il est indispensable que vous ayez répondu aux questions précédentes pour avancer. En particulier, vous devez avoir précisé :

A Faire : Concevoir

  • Structurer le site : créer une arborescence cohérente
    • La racine de votre site est son point d'entrée
    • Les branches, les différents volets que vous voulez présenter.
    • Dessinez la structure sur papier.
    • Prochaine séance : Mettez en place la structure sous la forme d'une hiérarchie de répertoires
    • Prévoir d'aller voir ce que d'autres font (Non réalisé pendant ce TD)
  • Définir la charte graphique (voir section suivante).
Extrait
  • Les noms des répertoires, fichiers et des différents objets d'une page doivent être évocateurs, sans espace ni caractère accentué.
  • Le nom du fichier correspondant à la page d'accueil sera index.html
  • Les images du site seront dans un sous-dossier Images du dossier des pages Web

Il est important que les parties précédentes aient été bien réfléchies, mais éventuellement la structure non encore créée pour passer à l'étape d'après. Cette dernière peut vous amener à revoir la structure du site.

Charte Graphique

Notre objectif est d'utiliser des conventions homogènes pour toutes les pages de votre site : choix des fonds d'écran, choix des polices, choix des couleurs, choix des icônes, format des tableaux et des listes, couleur des liens.

Partie basée sur l'énoncé de l'IMAG

Définitions

Extrait de La charte graphique

C'est la déclinaison pratique de la conception graphique. Grâce à ce document, l'identité visuelle de l'entreprise se fabrique, la représentation graphique de l'identité d'une entreprise se réalise. L'identité visuelle exprime les valeurs, l'activité et les ambitions de l'entreprise. Elle permet de se faire reconnaitre facilement parmi ses concurrents. Chaque entreprise doit avoir sa propre identité visuelle. L'identité visuelle se traduit par des signes, des couleurs, des formes et un logo immédiatement compréhensible et facilement mémorisable. L'identité visuelle est déclinée sur l'ensemble des supports grâce à la charte graphique. On trouve des informations techniques sous forme de gabarit pour pouvoir ensuite décliner la conception graphique. La charte graphique est ce document que l'on retrouve dans le dossier de liaison ou carnet de liaison.

Extraits de charte graphique Internet/intranet ou multimédia

La charte graphique Internet/intranet est un document papier ou un mini-site qui permet de définir la position des différents éléments qui constituent les principales pages d'un site avant la programmation de celles-ci. Le but, voisin du précédent, est de valider les principes de navigation entre les pages du futur site Internet ou intranet. Il s'y ajoutera des temps de navigation plus courts (les éléments graphiques étant contingentés et présents dans le cache), participant à la bonne perception de l'entreprise par le visiteur. De plus, celle-ci présente des règles fondamentales qui montrent l'identité de l'entreprise.

Exemples de Chartes Graphiques

http://asset.free.fr/IMG/pdf/Modele_charte_graphique2.pdf

http://www.univ-fcomte.fr/download/partage/document/charte-graphique-web.pdf

Un exemple de charte graphique

http://www.cnrs.fr/compratique/savoir/charte-web.pdf

En terme de rendus, vous pouvez vous inspirez des exemples donnés XXX

Définir la structure des écrans types

2 ou 3 écrans types suffisent souvent à couvrir tous les niveaux de votre hiérarchie (écran de page d'accueil, écran de page de deuxième niveau).

Ces écrans-types déterminent les choix concernant :

Les principes de navigation doivent être clairs et intuitifs, afin de :

Ces principes aboutissent à la définition de “constantes de navigation”, présentes sur toutes les pages. Elles concernent par exemple :

A Faire :

  • Définir les écrans types (vous pouvez suivre les exemples des slides 9-11)
  • Faîtes les choix d'images, d'icônes, etc.

Choix des couleurs

On conseille de choisir des harmonies à 2, 3 ou 4 couleurs.

La tonalité de ces couleurs (chaudes/ froides, douces/agressives, saturées/pastelles) dépend bien sûr du contenu.

Il est judicieux de choisir une couleur dominante pour les grandes surfaces, et une tonique (ou interactive) pour les petites surfaces sur lesquelles on veut attirer l'attention (information importante, zones d'interactivité, menus, hyperliens, puces etc.).

Quand il y a beaucoup de texte, il est conseillé de privilégier un fond clair.

En plus des couleurs dominante et tonique, le blanc, le noir et le gris peuvent se combiner avec tous les types de palette.

La dominante peut se subdiviser en plusieurs nuances de teintes voisines (par exemple rose, mauve, rouge), ainsi que la tonique (par exemple bleu ciel et bleu marine pour des hyperliens).

Choix des couleurs

Pour choisir des couleurs qui s'accordent: http://colorschemedesigner.com/ (penser éventuellement à ne pas rester monochrome, en haut à gauche).

A Faire :

  • Choisir les couleurs (vous pouvez faire comme dans la charte ci-jointe en simplifiant)

Choix des polices et des styles

Deux polices sont en général suffisantes pour remplir les deux fonctions suivantes :

Attribuez des styles cohérents concernant les attributs de texte (police, taille, gras, indentation, puces, couleurs, alignement…) en fonction de vos différents types de texte : titres, sous-titre, énumérations, hyperliens, légendes…

Préférez les polices sans-serif, celles avec-serif sont plutôt utilisées pour l'imprimerie.

N'utilisez pas de polices grasses quand la taille est inférieure à 10.

Evitez l'italique difficile à lire sur un ordinateur.

Il est déconseillé d'utiliser plus de deux polices différentes, sinon pour rechercher un effet de surcharge.

Pour choisir la police, vous pouvez utiliser:http://www.typetester.org/

A Faire :

  • Choisir la typographie (vous pouvez faire comme dans la charte ci-jointe en simplifiant, p. 18)

Produire

A Faire : Produire et rédiger

  • Identifier et classifiez les contenus
    • Quel contenu va dans quelle partie du site ou concerne quel public
    • Quel contenu vais-je mettre et dans quel format ? (Exemples de codes, CV en pdf, Images, Pages de tutoriaux, Pages de références, …)
    • Planifiez déjà la mise à jour: quel contenu et à quelle fréquence ?
  • Rédiger pour le web … Regardez les indications et suivez les autant que possible, même si sur nos pages web, il n'y a pas forcément beaucoup de contenus rédigés. Cette partie a été ou sera vue dans la partie document de ce cours.
  • Contrairement à ce qui vous trouvez dans le cours de référence nous passons à présent à une phase de mise en oeuvre.

Réalisation

2 grandes étapes :

Pour construire la page html vous devez choisir sa structure en utilisant les balises : <header>, <section>, <nav>, etc. ou la balise universelle <div> quand aucune balise structurante ne convient. 1)

A Faire : Réaliser

  • Dans les séances suivantes : Construire effectivement le site web.

Tester

A Faire : Tester et mettre en ligne (voir slide 16)

  • Dans les séances suivantes : Tester
    • Commencez par valider votre site web si ce n'est pas déjà fait : respect des normes; absences de liens cassés; …
    • Mettez vous à la place d'un internaute et jouer les scénarios que vous avez imaginé dans la première phase
  • Faîtes tester (très important, nous ne sommes jamais de bons testeurs pour nos propres applications)
    • Tester la navigation (et la compréhension) par un tiers externe
    • Faire relire le site avant de le lancer en publication
  • Prévoir une page d’erreur dans le site qui permette à l’internaute de remonter

Je sais répondre à

Je sais répondre à :

  • Quelles sont les grandes étapes de construction “initiale” d'un site Web?
  • Dans la gestion des contenus, qu'est-il important d'éviter? Pourquoi?
  • Quelles sont les erreurs à éviter lorsque l'on définit l'arborescence ?
  • Pourquoi une structure de site doit-elle être stable?

Références

Charte graphique

http://www-clips.imag.fr/arcade/User/sandra.michelet/MonitoratReseaux_HTML/Partie%20HTML/TD2-CharteGraphique.pdf

http://www-lemm.univ-lille1.fr/divers/siteweb/html/concept/comment/charte/charte.htm

Construire un site web

1)
De préférence, utilisez une balise qui a du sens (comme les balises structurantes <header>, <section>, <nav>) mais, si aucune balise ne vous semble mieux convenir, optez pour la balise générique <div>.