Cours au département INFO - IUT - UNS

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.



====== 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.

<note warning> 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. </note>


<note tip>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
{{:2013_2014:s1:docweb:strategies:091110_conception_web_avec_exos.pdf|Si non accessible}}</note>


===== Planifier =====

<box round rgb(185,211,238) rgb(220,226,255) 95%|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)
</box>
===== 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?

<box round rgb(185,211,238) rgb(220,226,255) 95%|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).
</box>

<note tip>
[[http://www-clips.imag.fr/arcade/User/sandra.michelet/MonitoratReseaux_HTML/Partie%20HTML/TD2-CharteGraphique.pdf|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
</note>



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. 

[[http://www-clips.imag.fr/arcade/User/sandra.michelet/MonitoratReseaux_HTML/Partie%20HTML/TD2-CharteGraphique.pdf|Partie basée sur l'énoncé de l'IMAG]] 

==== Définitions ====

<note>[[http://www.tutorials-computer-software.com/2009/11/definition-difference-conception-charte.html|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.</note>


<note>[[http://fr.wikipedia.org/wiki/Charte_graphique|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.</note>


=== 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

[[http://www.univ-bordeaux.fr/espace-telechargement/Identite-visuelle-UBx/charte_UBx.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.


<box round rgb(185,211,238) rgb(220,226,255) 95%|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. 
</box>



==== 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).

[[http://www.dominiqueleweb.com/creation-de-site-blog/graphisme-2/2010-08-choix-couleurs-site-web|Choix des couleurs]]

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

<box round rgb(185,211,238) rgb(220,226,255) 95%|A Faire : >
  * Choisir les couleurs (vous pouvez faire comme dans la [[http://www.univ-bordeaux.fr/espace-telechargement/Identite-visuelle-UBx/charte_UBx.pdf|charte ci-jointe]] en simplifiant)
</box>
==== 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/

<box round rgb(185,211,238) rgb(220,226,255) 95%|A Faire : >
  * Choisir la typographie (vous pouvez faire comme dans la [[http://www.univ-bordeaux.fr/espace-telechargement/Identite-visuelle-UBx/charte_UBx.pdf|charte ci-jointe]] en simplifiant, p. 18)
</box>
===== Produire =====


<box round rgb(185,211,238) rgb(220,226,255) 95%|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.

</box>

==== 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. ((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>.))



<box round rgb(185,211,238) rgb(220,226,255) 95%|A Faire : ** Réaliser **  >
  * **Dans les séances suivantes :** Construire effectivement le site web.

</box>
===== Tester =====

<box round rgb(185,211,238) rgb(220,226,255) 95%|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


</box>
===== Je sais répondre à =====
 
<box round rgb(255,204,153) rgb(255,255,204) 97%|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?
  * 
</box>




===== 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

<html> <img src="http://ecx.images-amazon.com/images/I/51HVH4WEC7L._.jpg" width="100px"/> </html>


==== Construire un site web ====

   * freehtml5templates.com
   * http://www.siteduzero.com/informatique/tutoriels/apprenez-a-creer-votre-site-web-avec-html5-et-css3/maquettage-du-design
   * http://www.commentcamarche.net/contents/1252-webmastering-conception-d-un-site-web
Cours au département INFO - IUT - UNS

User Tools

Site Tools

Page Tools
