User Tools

Site Tools


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 revision Previous revision
Next revision
Previous revision
2013_2014:s1:docweb:strategies:start [2013/09/27 23:39]
blay [Choix des polices et des styles]
2013_2014:s1:docweb:strategies:start [2013/11/27 15:52] (current)
blay [Concevoir]
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 19: Line 26:
  
  
-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>​ 
 ===== Planifier ===== ===== Planifier =====
  
Line 35: 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 53: 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 165: Line 166:
  
 Préférez les polices sans-serif, celles avec-serif sont plutôt utilisées pour l'​imprimerie. 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 197: Line 203:
  
 <box round rgb(185,​211,​238) rgb(220,​226,​255) 95%|A Faire : ** Réaliser **  > <box round rgb(185,​211,​238) rgb(220,​226,​255) 95%|A Faire : ** Réaliser **  >
-  * Construire effectivement le site web.+  ​* **Dans les séances suivantes :** Construire effectivement le site web.
  
 </​box>​ </​box>​
Line 203: Line 209:
  
 <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 235: 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>​
  
  
2013_2014/s1/docweb/strategies/start.1380317955.txt.gz · Last modified: 2013/09/27 23:39 by blay