Crer un site web en quipe

1
Créer un site web en équipe

• Jean Sébastien Barboteu

2
1. Un site web ?

• Est-ce le média dont jai besoin ..?
• Site vitrine
• site information et communication verticale
• site espace déchanges et de travail collaboratif
• Oui, alors
• Pour quels lecteurs ?
• Quels contenus ? Lister infos et rubriques
• On ne peut pas tout mettre sur un site

3
1. Un site web ?

• Pour chaque article, chaque info, quels usages ?
  Quels format donc choisir ?
• Lecture à lécran html
• Impression (textes longs, formulaires) pdf
• Carte, plan, photo, organigramme gif, jpg, png
• Téléchargement zip
• Infos formatées, volatiles ou abondantes base
  de données

4
2. Construire le site sur le papier

• Simuler le site sur papier
• Organiser les rubriques en fonction des contenus
• Prévoir les rubriques à venir, même si le contenu
  nest pas encore disponible
• Construire un organigramme du site

5
2. Construire le site sur le papier (2)

• Cas 1

?
6
2. Construire le site sur le papier (2)

• Cas 2

?
7
2. Construire le site sur le papier (3)

• 4 clics maximum depuis la page daccueil pour
  arriver à linformation
• Retour à la page daccueil depuis toute page du
  site
• Pas de page en construction
• Une grammaire de navigation identique pour
  toutes les pages (aspect des liens, items de menu

8
3. Arborescence disque

• Cest laffaire du webmestre
• Doit refléter larborescence de navigation

monsite
logos
rubr 1
rubr 2
rubr 3
Index.htm
9
3. Arborescence disque

• Noms de répertoires, de fichiers, dimages
• Pas despaces (à remplacer par ou _)
• Pas de caractères diacritiques ou spéciaux ç,
  , , , !, , (donc pas daccents)
• Noms courts et explicites

10
3. Arborescence disque

• Dans le cas des web applications (CMS). La
  structure des répertoires est fixe.
  Larborescence est programmée dans une base de
  données.

11
4. Mise en écran et maquette
Les principes simples de mise en écran ne font
que reproduire, pour lessentiel, ceux qui
prévalent pour la mise en page. Toutefois il faut
prendre en compte la spécificité dune lecture
sur écran et non plus sur papier.
12
4. Mise en page et mise en écran, des différences
pourtant...
A4(21 x 29,7 cm)
Écran(1024 x 768 pixels)
13
4. Une lecture qui a un sens...

• Entrée

• Entrée

• Sortie

• Sortie

14
4. Le texte

• Typographie (choix des caractères)
• Attributs des caractères et des paragraphes
• Justification du texte et alignements
• Colonnage, cadres, etc.

15
4. Le texte (1) Typographie et attributs

• Utilisez Arial (Helvetica), verdana ouTimes New
  Roman (Times)
• En roman, en gras ou en italique,mais jamais en
  souligné
• En bas de casse plutôt quen CAPITALES
• Accentuez les capitales É À Ë Ù Î Ö Ç
• Certaines polices (Times) sont difficiles à lire
  en très petites tailles

16
4. Le texte (2)Justification et colonnage

• Évitez les grandes justifs dans les petits corps
• Préférez les alignements à gauche
• Évitez les titres centrés, conventionnels
• Pour les titres enrichis , passez par des
  images
• Utilisez les puces ou lettrines avec parcimonie

17
4. Le texte (3)Justification et colonnage
TMES 8 pts CeciThese requirements apply to the
modified work as a whole. If identifiable
sections of that work are not derived from the
Program, and can be reasonably considered
independent and separate works in themselves,
then this License, and its terms, do not apply to
those sections when you distribute them as
separate works. But when you distribute the same
sections as part of a whole which is a work based
on the Program, the distribution of the whole
must be on the terms of this License, whose
permissions for other licensees extend to the
entire whole, and thus to each and every part
regardless of who wrote it. Thus, it is not the
intent of this section to claim rights or contest
your rights to work written entirely by you
rather, the intent is to exercise the right to
control the distribution of derivative or
collective works based on the Program.
VERDANA 8 pts CeciThese requirements apply to the
modified work as a whole. If identifiable
sections of that work are not derived from the
Program, and can be reasonably considered
independent and separate works in themselves,
then this License, and its terms, do not apply to
those sections when you distribute them as
separate works. But when you distribute the same
sections as part of a whole which is a work based
on the Program, the distribution of the whole
must be on the terms of this License, whose
permissions for other licensees extend to the
entire whole, and thus to each and every part
regardless of who wrote it. ARIAL 8 pts Thus, it
is not the intent of this section to claim rights
or contest your rights to work written entirely
by you rather, the intent is to exercise the
right to control the distribution of derivative
or collective works based on the
Program. CeciThese requirements apply to the
modified work as a whole. If identifiable
sections of that work are not derived from the
Program, and can be reasonably considered
independent and separate works in themselves,
then this License, and its terms, do not apply to
those sections when you distribute them as
separate works. But when you distribute the same
sections as part of a whole which is a work based
on the Program, the distribution of the whole
must be on the terms of this License, whose
permissions for other licensees extend to the
entire whole, and thus to each and every part
regardless of who wrote it.
CeciThese requirements apply to the modified work
as a whole. If identifiable sections of that
work are not derived from the Program, and can be
reasonably considered independent and separate
works in themselves, then this License, and its
terms, do not apply to those sections when you
distribute them as separate works. But when
you distribute the same sections as part of a
whole which is a work based on the Program, the
distribution of the whole must be on the terms of
this License, whose permissions for other
licensees extend to the entire whole, and thus to
each and every part regardless of who wrote it.
Thus, it is not the intent of this section to
claim rights or contest your rights to work
written entirely by you rather, the intent is to
exercise the right to control the distribution of
derivative or collective works based on the
Program. CeciThese requirements apply to the
modified work as a whole. If identifiable
sections of that work are not derived from the
Program, and can be reasonably considered
independent and separate works in themselves,
then this License, and its terms, do not apply to
those sections when you distribute them as
separate works. But when you distribute the same
sections as part of a whole which is a work based
on the Program, the distribution of the whole
must be on the terms of this License, whose
permissions for other licensees extend to the
entire whole, and thus to each and every part
regardless of who wrote it.
18
4. Les éléments graphiques (1)

• Utilisez des images de petit poids, en faible
  nombre, aux formats GIF, JPEG ou PNG
• Utilisez des éléments graphiques pour favoriser
  le rubriquage, des accroches, permettre au
  lecteur de se situer dans le site

19
4. Les éléments graphiques (2)

• Pour positionner images utilisez les feuilles de
  styles
• Nutilisez les animations que rarementet à bon
  escient
• Évitez les images en fonds de page

20
4. Les éléments graphiques (3)

• Prévoyez des espaces pour le repos de lil du
  lecteur (le blanc typo)
• Ne privilégiez jamais la forme au contenu
• Organisez votre texte de manière graphique
  (éléments de titraille, intertitres, légendes,
  pieds de page)

21
4. La maquette

• Cette étape est indispensable à la réalisation
  dun site web
• Construisez le gabarit (grille de mise en écran),
  prévoyez marges et repères

22
4. Cette étape est indispensable à la réalisation
dun site web

• La première pensée est pour le lecteur qui va
   voir  avant de  lire  il faut lui
  faciliter la tâche, à la fois pour sa lecture
  dans le plan et sa lecture en profondeur
• Il faut se mettre à la place du lecteur et
  construire une maquette en fonction de ses
  éventuelles réactions

23
4. La maquette 2

• Placez les éléments fixes (en-tête, pied de page,
  filets, éléments graphiques redondants)
• Choix dune charte graphique (charte
  typographique, couleurs, styles, logos, trames,
  éléments graphiques divers)
• Préparez, éditez, retouchez les éléments de la
  composition

24
4. La maquette 3

• Disposez correctement les éléments de
  navigation - page suivante - page précédente -
  retour au menu - barre de navigation
• N oubliez pas quon entre dans une page en haut
  à gauche et quon en sort en bas à droite

25
4. Construisez le gabarit (grille de mise en
écran)

• Logo

• En-tête

• Sommaire

• Corps

• Pied de page

26
4. La page d accueil à soigner

• Première impression
• Chargement rapide
• Donne votre grammaire de navigation
• Des infos indispensables
• Nom du service, logo, lien vers le service parent
• Identité du ou des responsables (directeur de
  publication, secrétaire de rédaction)
• Coordonnées email

27
4. La page d accueil à soigner

• Des infos recherchées
• Nouveautés du site et dates de mise à jour
• Tout le contenu du site dun coup dil
  (rubriques)

28
4. La navigation

• Pas de pages cul-de-sac
• Pas de pages en construction
• Navigation difficile (où suis-je ?)
• Barre de navigation identique pour toutes les
  pages

29
5. Réalisation

• Cest laffaire du webmestre
• Plus le cahier des charges est précis, plus vite
  le site verra le jour et plus il sera conforme au
  projet

30
5. HTML (Hypertext Markup Language)

• langage de balisage hypertexte
• inventé par Tim Berners Lee au CERN
• principe tous les documents ont des éléments en
  commun DONC il est possible de les étiqueter, de
  les baliser.
• décrit le structure et le contenu d'un document
  ET NON le format et l'apparence d'une page

31
5. La syntaxe

• Balises (ou "tag")
• conteneur de texte gt attribuent une fonction
  spécifique au segment encadré.
• fonctionnent habituellement par paire (balise
  d'ouverture et de fermeture)
• Attributs
• précisent la fonction ou le mode d'application
  des balises.
• sont séparés par un espace
• sont mentionés uniquement dans la balise
  d'ouverture
• leur ordre n'a pas d'importance
• peuvent avoir une valeur (nom, unité de mesure
  ...) inscrite entre guillemets
• Syntaxe
• ltNom de la balise de début Attribut1 "valeur1"
  Attribut2 "valeur2" ... Attribut n "valeur
  n"gt texte mis en forme lt/Nom de la balise de fingt

32
5. La structure minimale

• lthtmlgt
• ltheadgt
• informations générales sur le document
• lt/headgt
• ltbodygt
• texte du document commandes de formatage
• lt/bodygt
• lt/htmlgt

33
5. Les balises fondamentales

• Titres
• lttitlegt ... lt/titlegt
• utilisé comme bookmark
• placé dans l'en-tête ltheadgt du document
• Intertitres
• lth1gt .... lt/h1gt , lth2gt ... lt/h2gt ,
  ....................... lth6gt ... lt/h6gt
  
• Paragraphes
• ltpgtlt/pgt
• Remarques
• penser à indenter le code source pour préserver
  la lisibilité
• ne pas croiser les balises
• lth1gt cours sur les ltstronggt plantes
  lt/h1gtlt/stronggt
• gt code non-interprétable
• lth1gt cours sur les ltstronggt plantes
  lt/stronggtlt/h1gt
• gt code correct

34
5. Créer un lien vers un autre document

• Un lien permet de définir
• une région sensible au clic souris dans un
  document
• l'endroit ou l'on va se retrouver après ce clic.
• Trois étapes
• lta href "nom du fichier"gt
• lien
• lt/agt
• Exemples
• Consultez mon lta href "cvoli.html"gt curriculum
  vitae lt/agt

lien
doc. A
doc. B
35
5. Plusieurs types de liens

• types de liens
• internes (doc. renvoie à une de ses sections)
• externes (doc. renvoie à un autre doc. ou à une
  section d'un autre doc.)
• exécutables (fichiers en téléchargement,
  déclenchement d'animations ou de programmes
  -plug-in)
• IMPORTANT
• on peut imbriquer une ancre dans une balise
• lth1gt lta href"texte.htm"gt Chanson lt/agt lt/h1gt
• mais ne jamais faire l'inverse
• lta href"texte.htm"gt lth1gtChansonlt/h1gt lt/agt

36
5. Traitement des images

• Recommandations
• penser au temps de chargement et d'affichage
• ne jamais afficher d'images situées sur serveur
  extérieur
• astuce préciser attributs  width  et
   height 
• demandez vous si une image est indispensable
• pensez à leur destination
• résolution écran 72 dpi
• résolution impression courante 300 dpi
• une bonne image vaut mieux qu'un long discours,
• MAIS une bonne image est plus longue à charger
  qu'un long discours ...

37
5. Aide technique (tenir compte du handicap)

• Périphériques adaptés
• Afficheur braille
• Synthèse vocale
• Lecteur décran sous Windows
• Jaws For Windows (Henter-Joyce, www.hj.com)
• Slimware Windows Bridge (Synthavoice
  www.syntha-voice.on.ca)
• Virgo (Baum www.baum.fr),...
• Interaction
• Déplacement au moyen du clavier (adapté ou non)

38
5. Comment accéder à linternet ?

• Browser standard couplé à un lecteur décran
• Internet Explorer (Microsoft)
• Netscape Communicator (Netscape corporation)
• Lynx
• Browser spécialisé
• HomePage Reader (IBM www.ibm.com)
• PW-WebSpeak (ProductivityWorks www.prodworks.com)
• BrailleSurf (BrailleNet www.braillenet.jussieu.fr)
  
• ...

39
5. Les problèmes daccès

• Objets graphiques
• Images, images cliquables, cadres, applets
• Objets complexes
• Tableaux, formulaires
• Objets dinteraction
• Boutons, boîtes de dialogue, liens...

40
5. Quelques directives

• Ajouter un commentaire à chaque élément visuel
• Des liens clairs et concis
• Exploiter les feuilles de style
• Utiliser les éléments HTML à bon escient

41
5. Décrire les éléments visuels

• Utilisation de lattribut  ALT 
• Sémantique de la description
• Exemple dune image
• Si limage est un logo gt  logo de  
• Si cest un lien gt  titre du lien 
• Si limage nécessite une description plus
  complète
• Utiliser lattribut  longdesc 
• renvoyer à une page contenant le texte de
  description

42
5. Titre dun lien

• Doit être explicite et concis
• 3 exemples
• Cliquez ici
• pour plus dinformations
• Cliquez ici pour plus dinformations
• Plus dinformations

43
5. Quelques références

• http//www.unice.fr/dnte/nte/dotclear/index.php/20
  05/02/28/67-accessibilite-du-web-quelques-liens-ut
  iles
• http//www.la-grange.net/accessibilite/
• http//www.accessiweb.org/

44
5. On ne sarrête jamais !

• A nouveau des problèmes
• Emergence de nouvelles technologies
• DHTML, XML...
• Flash, Shockwave
• WAP, UMTS
• Systèmes embarqués

45
5. Les outils

• La palette doutils est large
• éditeur de texte,
• éditeur HTML visuel,
• Word et les autres
• Les gestionnaires de contenus dynamiques (C.M.S.)

46
6. Publication

• Cest laffaire du webmestre (FTP)

47
7. Tests

• Vérifier les liens (liens relatifs) et insertions
  dimages
• Vérifier le temps de chargement des pages
• Vérifier le site avec différents navigateurs
  (Internet explorer, Netscape)
• Faire parcourir le site par des lecteurs tests

48
Et après

• Faire connaître le site
• Mises à jour
• Pas dinfos obsolètes ou fausses (dates,
  annonces, liens)
• Animer léquipe

49
Sources

• créer un site web (Michel Guillou, Fabrice
  Lemoine, Marc Février)
• Accessibilité Bernard ORIOLA (équipe IHMPT)
• HTML (ERTZSCHEID Olivier)