Cours au département INFO - IUT - UNS

User Tools

Site Tools

Trace:
2013_2014:s1:docweb:strategies:start

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revisionPrevious revision
Next revision		Previous revision
2013_2014:s1:docweb:strategies:start [2013/09/24 20:30] – [Maquette] blay2013_2014:s1:docweb:strategies:start [2013/11/27 14:52] (current) – [Concevoir] blay
Line 11: Line 11:
 d'après http://www.commentcamarche.net/contents/1252-webmastering-conception-d-un-site-web 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>
  
  
Line 17: Line 24:
 http://www.unifr.ch/weboffice/assets/files/091110_conception_web_avec_exos.pdf 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> {{:2013_2014:s1:docweb:strategies:091110_conception_web_avec_exos.pdf|Si non accessible}}</note>
- 
- 
-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. 
  
  
Line 34: Line 37:
       * Identifier votre public cible       * 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?)           * 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// (Non réalisé pendant ce TD)+      * //Produire un cahier des charges// (A ne pas réaliser pendant ce TD)
       * Imaginez des scénarios d'usages       * 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, je suis lycéen, je veux savoir ce que fait un étudiant d'IUT. +          * 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// (Non réalisé pendant ce TD)+      * //Prévoir d'aller voir ce que d'autres font// (A ne pas réaliser pendant ce TD)
 </box> </box>
- 
 ===== Concevoir ===== ===== Concevoir =====
  
Line 52: Line 54:
       * Les branches, les différents volets que vous voulez présenter.       * Les branches, les différents volets que vous voulez présenter.
       * Dessinez la structure sur papier.       * Dessinez la structure sur papier.
-      * Mettez en place la structure sous la forme d'une hiérarchie de répertoires +      * **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)       * //Prévoir d'aller voir ce que d'autres font// (Non réalisé pendant ce TD)
   * Définir la charte graphique (voir section suivante).   * Définir la charte graphique (voir section suivante).
Line 113: Line 115:
    * la position des titres, sous-titres, etc.    * la position des titres, sous-titres, etc.
    * l'organisation des menus : barre de menu, menu déroulant, onglets, menu principal/secondaire    * 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.
  
  
Line 128: Line 131:
 <box round rgb(185,211,238) rgb(220,226,255) 95%|A Faire :  > <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)   * 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> </box>
  
Line 147: Line 151:
  
 [[http://www.dominiqueleweb.com/creation-de-site-blog/graphisme-2/2010-08-choix-couleurs-site-web|Choix des couleurs]] [[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 : > <box round rgb(185,211,238) rgb(220,226,255) 95%|A Faire : >
Line 154: Line 160:
  
 Deux polices sont en général suffisantes pour remplir les deux fonctions suivantes :  Deux polices sont en général suffisantes pour remplir les deux fonctions suivantes : 
-    * une police décorative pour faire ressortir les textes courts : titres, menu, etc.+    * une police pour faire ressortir les textes courts : titres, menu, etc.
     * une police utilitaire classique (verdana, helvetica, arial, etc...) pour les zones de texte.     * 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...  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. 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 : > <box round rgb(185,211,238) rgb(220,226,255) 95%|A Faire : >
Line 178: Line 191:
 </box> </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 ===== ===== Tester =====
  
 <box round rgb(185,211,238) rgb(220,226,255) 95%|A Faire : **Tester et mettre en ligne (voir slide 16) **  > <box round rgb(185,211,238) rgb(220,226,255) 95%|A Faire : **Tester et mettre en ligne (voir slide 16) **  >
-  * Tester+  *** 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; ...       * 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       * Mettez vous à la place d'un internaute et jouer les scénarios que vous avez imaginé dans la première phase
Line 188: Line 216:
       * Faire relire le site avant de le lancer en publication       * 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   * Prévoir une page d’erreur dans le site qui permette à l’internaute de remonter
-dans la hiérarchie des informations s’il vient d’un lien cassé +
-• Vérifiez les outils comme les flux RSS etc.. +
-• Formez les rédacteurs web, désignez les responsables des différentes pages +
-      * 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> </box>
Line 209: Line 231:
  
  
-==== 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>.)) 
  
-Regardez par exemple la construction réalisée dans la figure :  http://uploads.siteduzero.com/files/344001_345000/344140.png 
 ===== Références ===== ===== Références =====
  
Line 229: Line 241:
 http://www-lemm.univ-lille1.fr/divers/siteweb/html/concept/comment/charte/charte.htm 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>
  
  
-==== Constuire un site web ====+==== Construire un site web ====
  
-freehtml5templates.com +   * freehtml5templates.com 
-http://www.siteduzero.com/informatique/tutoriels/apprenez-a-creer-votre-site-web-avec-html5-et-css3/maquettage-du-design +   * 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+   * http://www.commentcamarche.net/contents/1252-webmastering-conception-d-un-site-web
2013_2014/s1/docweb/strategies/start.1380054614.txt.gz · Last modified: 2013/09/24 20:30 by blay