User Tools
Sidebar
2013_2014:s1:docweb:strategies:start
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 :
- Les besoins de l'organisation, correspondant à une stratégie d'objectifs ;
- Les besoins des utilisateurs, correspondant à une stratégie de cible.
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é :
- quel est votre public cible?
- que cherche-t-il sur mon site?
- que trouvera-t-il?
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.
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 :
- la structuration
- la position des titres, sous-titres, etc.
- l'organisation des menus : barre de menu, menu déroulant, onglets, menu principal/secondaire
- la présence du chemin qui indique à l'internaute dans quelle rubrique il se trouve.
Les principes de navigation doivent être clairs et intuitifs, afin de :
- permettre une perception rapide de l'organisation d'ensemble
- permettre à l'utilisateur de savoir où se situe la page courante par rapport à cette organisation.
- permettre à l'utilisateur de retrouver l'accueil
Ces principes aboutissent à la définition de “constantes de navigation”, présentes sur toutes les pages. Elles concernent par exemple :
- Le titre de la page
- Un menu fixe ou une arborescence avec développement/contraction
- La visualisation du chemin (fil d'Ariane)
- Des boutons ou icônes : arrière, retour à la page d'accueil, plan du site, contact.
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).
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 :
- une police pour faire ressortir les textes courts : titres, menu, etc.
- une police utilitaire classique (verdana, helvetica, arial, etc…) pour les zones de texte.
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 :
- construire le squelette HTML de la page.
- le mettre en forme et le mettre en page avec CSS.
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
Construire un site web
- freehtml5templates.com
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>.
2013_2014/s1/docweb/strategies/start.txt · Last modified: 2013/11/27 15:52 by blay
Except where otherwise noted, content on this wiki is licensed under the following license: CC Attribution-Noncommercial-Share Alike 4.0 International
