by loveprit sidhu le 28 janvier 2011 web design1 formation : m2eid² encadré par catherine recanati
TRANSCRIPT
![Page 1: By Loveprit SIDHU Le 28 janvier 2011 Web Design1 Formation : M2EID² Encadré par Catherine RECANATI](https://reader036.vdocuments.mx/reader036/viewer/2022081518/551d9db9497959293b8dd71d/html5/thumbnails/1.jpg)
By Loveprit SIDHULe 28 janvier 2011
Web Design 1
Formation : M2EID²Encadré par Catherine RECANATI
![Page 2: By Loveprit SIDHU Le 28 janvier 2011 Web Design1 Formation : M2EID² Encadré par Catherine RECANATI](https://reader036.vdocuments.mx/reader036/viewer/2022081518/551d9db9497959293b8dd71d/html5/thumbnails/2.jpg)
I. Introduction1. Le web avec HTML2. Le design avec CSS 3. Le W3C
II. Structuration d’un site web1. Différents types de sites2. L’architecture d’un site3. L’arborescence d’un site
III. La navigation avec les élément GUI1. La barre de navigation 2. La fils d’Ariane3. Les liens4. Exemple
Web Design 2
![Page 3: By Loveprit SIDHU Le 28 janvier 2011 Web Design1 Formation : M2EID² Encadré par Catherine RECANATI](https://reader036.vdocuments.mx/reader036/viewer/2022081518/551d9db9497959293b8dd71d/html5/thumbnails/3.jpg)
IV. Ergonomie pour le web design1. La charte graphique2. Les couleurs3. La police de caractère4. Les images
V. Accessibilité/Utilisabilité1. La norme WCAG 2.02. Exemple : les daltoniens
IV. Outils pour le web design1. Photoshop2. Dreamweaver3. CMS
Web Design 3
![Page 4: By Loveprit SIDHU Le 28 janvier 2011 Web Design1 Formation : M2EID² Encadré par Catherine RECANATI](https://reader036.vdocuments.mx/reader036/viewer/2022081518/551d9db9497959293b8dd71d/html5/thumbnails/4.jpg)
- Le web est né dans les années 1990 au CERN(Organisation Européenne pour la Recherche Nucléaire)
- L’inventeur du World Wide Web est Tim Berner-Lee et Rober Cailliau.
Web Design 4
![Page 5: By Loveprit SIDHU Le 28 janvier 2011 Web Design1 Formation : M2EID² Encadré par Catherine RECANATI](https://reader036.vdocuments.mx/reader036/viewer/2022081518/551d9db9497959293b8dd71d/html5/thumbnails/5.jpg)
World Wide Web (Définition) : « système hypertexte public fonctionnant sur Internet qui permet de consulter, avec un navigateur, des pages accessibles sur des sites. » appelé aussi la Toile ou le Web.
Site web (Définition): « C’est un ensemble de pages Web hyperliées entre elles et mises en ligne à une adresse Web. »
En 2010, il existe plus de 233 millions de sites web
Web Design 5
![Page 6: By Loveprit SIDHU Le 28 janvier 2011 Web Design1 Formation : M2EID² Encadré par Catherine RECANATI](https://reader036.vdocuments.mx/reader036/viewer/2022081518/551d9db9497959293b8dd71d/html5/thumbnails/6.jpg)
Web Design 6
« La Toile »
Interaction entre un serveur web et un navigateur
(browser)
![Page 7: By Loveprit SIDHU Le 28 janvier 2011 Web Design1 Formation : M2EID² Encadré par Catherine RECANATI](https://reader036.vdocuments.mx/reader036/viewer/2022081518/551d9db9497959293b8dd71d/html5/thumbnails/7.jpg)
Hypertexte (Définition) : c’est un média textuel contenant des liens entre divers points dans des documents. L'hypertexte permet de naviguer à l'intérieur d'un même document ou d'un document à un autre.
Trois évolutions du web:◦ Web 1.0 : pages statique◦ Web 2.0 : axé sur les personnes◦ Web 3.0 : axé sur les objets
Web Design 7
![Page 8: By Loveprit SIDHU Le 28 janvier 2011 Web Design1 Formation : M2EID² Encadré par Catherine RECANATI](https://reader036.vdocuments.mx/reader036/viewer/2022081518/551d9db9497959293b8dd71d/html5/thumbnails/8.jpg)
Le HTML (Hypertext Markup Language) est un format de données ou langage utilisé pour créer un site web
C’est un langage qui utilise des balises <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head><title>WEB DESIGN</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><link rel="stylesheet" media="screen" type="text/css" title="Defaut"
href="index.css" /></head>
<body> <p> Test pour la présentation orale d’IHM </p> </body></html>indexihm.html index.html indexlee.html
Web Design 8
![Page 9: By Loveprit SIDHU Le 28 janvier 2011 Web Design1 Formation : M2EID² Encadré par Catherine RECANATI](https://reader036.vdocuments.mx/reader036/viewer/2022081518/551d9db9497959293b8dd71d/html5/thumbnails/9.jpg)
CSS (Cascading Style Sheets) : feuille de style en cascade. C’est est un langage informatique qui sert à décrire la présentation des documents HTML et XML
Apparu en 1996
Objectifs:◦ La structure et la présentation sont gérées
séparément◦ Il facilite la portabilité du contenu◦ Le code HTML est réduit en taille et en complexitéPortfolio\index.html
Web Design 9
![Page 10: By Loveprit SIDHU Le 28 janvier 2011 Web Design1 Formation : M2EID² Encadré par Catherine RECANATI](https://reader036.vdocuments.mx/reader036/viewer/2022081518/551d9db9497959293b8dd71d/html5/thumbnails/10.jpg)
On a la norme NF pour les produits, pour le web il y a le W3C.
C’est un organisme de standardisation
Web Design 10
![Page 11: By Loveprit SIDHU Le 28 janvier 2011 Web Design1 Formation : M2EID² Encadré par Catherine RECANATI](https://reader036.vdocuments.mx/reader036/viewer/2022081518/551d9db9497959293b8dd71d/html5/thumbnails/11.jpg)
Site vitrine : site pour promouvoir quelque chose
Site d’information : site avec un contenu utile pour l’internaute
Page de vente (landing page) : site pour vendre un produit comme le ferait un commercial
Page de captation (squeeze page) : site pour attirer l’attention
Site marchand ou e-commerce : site de vente en ligne (Cdiscount, Fnac,…)
Web Design 11
Bien savoir pourquoi on veut créer un site et pour quel public
![Page 12: By Loveprit SIDHU Le 28 janvier 2011 Web Design1 Formation : M2EID² Encadré par Catherine RECANATI](https://reader036.vdocuments.mx/reader036/viewer/2022081518/551d9db9497959293b8dd71d/html5/thumbnails/12.jpg)
A quoi bon présenter de l'information de qualité si les internautes s'y perdent.
A quoi bon avoir un beau site s'il n'est pas attractif
Web Design 12
![Page 13: By Loveprit SIDHU Le 28 janvier 2011 Web Design1 Formation : M2EID² Encadré par Catherine RECANATI](https://reader036.vdocuments.mx/reader036/viewer/2022081518/551d9db9497959293b8dd71d/html5/thumbnails/13.jpg)
Les bénéfices d’un site peuvent être multiples:◦ accroître le chiffre d’affaire
Avec de nouveaux clients Avec de nouveaux partenaires En améliorant les services
◦ diminuer les dépenses Frais de publicités Réduire les coût de fonctionnement
◦ développer sa notoriété En étant visible 24h/24 7j/7
Web Design 13
![Page 14: By Loveprit SIDHU Le 28 janvier 2011 Web Design1 Formation : M2EID² Encadré par Catherine RECANATI](https://reader036.vdocuments.mx/reader036/viewer/2022081518/551d9db9497959293b8dd71d/html5/thumbnails/14.jpg)
L'architecture d'information d'un site doit être conçue d'une façon très rigoureuse.
L’internaute doit pouvoir trouver l’information facilement sinon il pensera que l’information n’existe pas.
Après cette étude on passe à l’organisation visuelle
Web Design 14
![Page 15: By Loveprit SIDHU Le 28 janvier 2011 Web Design1 Formation : M2EID² Encadré par Catherine RECANATI](https://reader036.vdocuments.mx/reader036/viewer/2022081518/551d9db9497959293b8dd71d/html5/thumbnails/15.jpg)
Web Design 15
Zoning web
![Page 16: By Loveprit SIDHU Le 28 janvier 2011 Web Design1 Formation : M2EID² Encadré par Catherine RECANATI](https://reader036.vdocuments.mx/reader036/viewer/2022081518/551d9db9497959293b8dd71d/html5/thumbnails/16.jpg)
Web Design 16
![Page 17: By Loveprit SIDHU Le 28 janvier 2011 Web Design1 Formation : M2EID² Encadré par Catherine RECANATI](https://reader036.vdocuments.mx/reader036/viewer/2022081518/551d9db9497959293b8dd71d/html5/thumbnails/17.jpg)
Le zoning permet de découper la page en autant de zones que nécessaire.
Cela permet de positionner :◦ les zones de navigation, ◦ les contenus, ◦ le logo, ◦ le pied de page, ◦ le moteur de recherche, ou le fil d'Ariane...
Web Design 17
![Page 18: By Loveprit SIDHU Le 28 janvier 2011 Web Design1 Formation : M2EID² Encadré par Catherine RECANATI](https://reader036.vdocuments.mx/reader036/viewer/2022081518/551d9db9497959293b8dd71d/html5/thumbnails/18.jpg)
Définissez vos rubriques principalesChaque thème représentera une rubrique de votre site.Chacune de vos rubriques doit contenir assez d'informations pour pouvoir les présenter en thèmes logiques sur d'autres pages de niveau inférieur.
Hiérarchisez vos informations à l'intérieur de vos rubriques principalesChaque groupe d'informations représentera une sous-rubrique.Pour chaque rubrique, vous pouvez proposer jusqu'à 7 sous-rubriques.
La règle des trois clics Ca suggère que l’utilisateur d’un site web doit pouvoir trouver l’information avec pas plus de 3 clicks de souris. C’est basé sur le fait qu’un utilisateur d’un site deviens frustré et quitte souvent le site s’il ne trouve pas l’information en 3 clicks
Web Design 18
![Page 19: By Loveprit SIDHU Le 28 janvier 2011 Web Design1 Formation : M2EID² Encadré par Catherine RECANATI](https://reader036.vdocuments.mx/reader036/viewer/2022081518/551d9db9497959293b8dd71d/html5/thumbnails/19.jpg)
Niveaux
Descriptions
Niveau 1
Le sommet de votre hiérarchie commence par la page d'accueil.
Niveau 2
Présentation vos rubriques principales d'une manière générale et un sommaire interne à la rubrique. Ce sont des pages d'orientation.
Niveau 3
Présentation détaillée de vos rubriques principales.Ces sous-rubriques sont exclusivement des pages d'informations
Niveau 4
Présentation des sous-sous-rubriques.A prévoir si les pages de niveau 3 sont trop denses en informations.
Web Design 19
![Page 20: By Loveprit SIDHU Le 28 janvier 2011 Web Design1 Formation : M2EID² Encadré par Catherine RECANATI](https://reader036.vdocuments.mx/reader036/viewer/2022081518/551d9db9497959293b8dd71d/html5/thumbnails/20.jpg)
Cas des sites simples
Web Design 20
![Page 21: By Loveprit SIDHU Le 28 janvier 2011 Web Design1 Formation : M2EID² Encadré par Catherine RECANATI](https://reader036.vdocuments.mx/reader036/viewer/2022081518/551d9db9497959293b8dd71d/html5/thumbnails/21.jpg)
Cas des sites élaborés
Web Design 21
![Page 22: By Loveprit SIDHU Le 28 janvier 2011 Web Design1 Formation : M2EID² Encadré par Catherine RECANATI](https://reader036.vdocuments.mx/reader036/viewer/2022081518/551d9db9497959293b8dd71d/html5/thumbnails/22.jpg)
Cas des sites complexes
Web Design 22
![Page 23: By Loveprit SIDHU Le 28 janvier 2011 Web Design1 Formation : M2EID² Encadré par Catherine RECANATI](https://reader036.vdocuments.mx/reader036/viewer/2022081518/551d9db9497959293b8dd71d/html5/thumbnails/23.jpg)
Conseil : dés que le site devient compliqué il est recommandé de mettre sur chaque page un lien vers la page d’accueil. Par exemple utiliser le logo du site comme étant un lien vers la page d’accueil.
« Un visiteur perdu est un visiteur déçu.Un visiteur déçu est un visiteur qui est PERDU à jamais. »
Web Design 23
![Page 24: By Loveprit SIDHU Le 28 janvier 2011 Web Design1 Formation : M2EID² Encadré par Catherine RECANATI](https://reader036.vdocuments.mx/reader036/viewer/2022081518/551d9db9497959293b8dd71d/html5/thumbnails/24.jpg)
Objectifs:◦ L'utilisateur doit savoir :
Où il est Par où il est passé Savoir où il peut aller Avoir une vue globale du contenu du site
◦ Faciliter au maximum la navigation du site pour l’internaute (pas de prise de tête)
◦ La navigation doit intégrer: Logotype zone de navigation primaire (1er niveau du site) zone de navigation secondaire (déplacement à l’intérieur
de la même rubrique)
Web Design 24
![Page 25: By Loveprit SIDHU Le 28 janvier 2011 Web Design1 Formation : M2EID² Encadré par Catherine RECANATI](https://reader036.vdocuments.mx/reader036/viewer/2022081518/551d9db9497959293b8dd71d/html5/thumbnails/25.jpg)
la barre de navigation : ◦ La barre de navigation est en général placée
horizontalement ou verticalement dans le haut de la page et de préférence à gauche.
◦ Cette position lui permet d'être toujours visible et accessible quelque soit la taille de la fenêtre dans le navigateur. Sa position, au dessus de la page, lui donne de l'importance, et c'est un repère toujours présent.
◦ Les utilisateurs d'Internet ont cette habitude. Vouloir changer ce principe reviendrait à perturber les visiteurs.
Web Design 25
![Page 26: By Loveprit SIDHU Le 28 janvier 2011 Web Design1 Formation : M2EID² Encadré par Catherine RECANATI](https://reader036.vdocuments.mx/reader036/viewer/2022081518/551d9db9497959293b8dd71d/html5/thumbnails/26.jpg)
Web Design 26
![Page 27: By Loveprit SIDHU Le 28 janvier 2011 Web Design1 Formation : M2EID² Encadré par Catherine RECANATI](https://reader036.vdocuments.mx/reader036/viewer/2022081518/551d9db9497959293b8dd71d/html5/thumbnails/27.jpg)
Les menus déroulant:◦ Le principe est de faire apparaître au survol de la
souris sur une rubrique, une zone contenant des liens hypertextes vers les sous-rubriques.
◦ L’avantage est le gain d’espace
◦ L’inconvénient est la maitrise de la souris, si la souris sort de la zone le menu disparait
Web Design 27
![Page 28: By Loveprit SIDHU Le 28 janvier 2011 Web Design1 Formation : M2EID² Encadré par Catherine RECANATI](https://reader036.vdocuments.mx/reader036/viewer/2022081518/551d9db9497959293b8dd71d/html5/thumbnails/28.jpg)
Web Design 28
![Page 29: By Loveprit SIDHU Le 28 janvier 2011 Web Design1 Formation : M2EID² Encadré par Catherine RECANATI](https://reader036.vdocuments.mx/reader036/viewer/2022081518/551d9db9497959293b8dd71d/html5/thumbnails/29.jpg)
Les onglets:◦ Les onglets de la barre de navigation font partie
de l'environnement que connaît bien l'internaute. Ils les identifient dès l'ouverture en haut de la page.
◦ C'est devenu un vrai standard de l'ergonomie web et il est rare de trouver un site web qui ne les utilise pas. Ils ont une seule limite. Lorsque le site contient plus de deux niveaux de profondeur, il y a besoin d'utiliser une navigation secondaire.
Web Design 29
![Page 30: By Loveprit SIDHU Le 28 janvier 2011 Web Design1 Formation : M2EID² Encadré par Catherine RECANATI](https://reader036.vdocuments.mx/reader036/viewer/2022081518/551d9db9497959293b8dd71d/html5/thumbnails/30.jpg)
Web Design 30
Pas de visuel sur la sélection
![Page 31: By Loveprit SIDHU Le 28 janvier 2011 Web Design1 Formation : M2EID² Encadré par Catherine RECANATI](https://reader036.vdocuments.mx/reader036/viewer/2022081518/551d9db9497959293b8dd71d/html5/thumbnails/31.jpg)
Les rollovers:
◦ Le rollover est une fonction qui modifie l'aspect d'un élément graphique dans sa forme, sa couleur ou son animation lorsqu'il est survolé par le pointeur de la souris.
◦ L'élément revient dans son état initial lorsque le pointeur quitte l'image.
◦ employé pour donner de l'interractivité à un élément de la barre de navigation, dans le but de le mettre en évidence
◦ source de difficulté pour les internautes (ex: Banque Postale)
Web Design 31
![Page 32: By Loveprit SIDHU Le 28 janvier 2011 Web Design1 Formation : M2EID² Encadré par Catherine RECANATI](https://reader036.vdocuments.mx/reader036/viewer/2022081518/551d9db9497959293b8dd71d/html5/thumbnails/32.jpg)
Web Design 32
![Page 33: By Loveprit SIDHU Le 28 janvier 2011 Web Design1 Formation : M2EID² Encadré par Catherine RECANATI](https://reader036.vdocuments.mx/reader036/viewer/2022081518/551d9db9497959293b8dd71d/html5/thumbnails/33.jpg)
Les boutons de navigations:◦ Les boutons de navigation sont des élément
utilisés comme liens pour naviguer.
◦ Ils se présentent sous plusieurs formes : icône, texte ou parfois les deux associés.
◦ Pour gagner de la place à l'écran, certains concepteurs web préfèrent utiliser des icônes de navigation en guise de menu.
Web Design 33
![Page 34: By Loveprit SIDHU Le 28 janvier 2011 Web Design1 Formation : M2EID² Encadré par Catherine RECANATI](https://reader036.vdocuments.mx/reader036/viewer/2022081518/551d9db9497959293b8dd71d/html5/thumbnails/34.jpg)
Web Design 34
![Page 35: By Loveprit SIDHU Le 28 janvier 2011 Web Design1 Formation : M2EID² Encadré par Catherine RECANATI](https://reader036.vdocuments.mx/reader036/viewer/2022081518/551d9db9497959293b8dd71d/html5/thumbnails/35.jpg)
Le fil d’Ariane c’est le chemin qu’un internaute à emprunté depuis l’accueil de la page jusqu’à la page où il se situe.
Aussi appelé « chemin de progression »
Conseil :◦ à placer en haut de la place, à gauche au dessus de la page
courante◦ mettre le symbole ‘>’ entre chaque rubrique◦ utiliser dans le fil d'Ariane les mêmes dénominations que les
pages parcourues◦ utiliser un petit corps de police pour ne pas gêner la lecture de
la page◦ le titre de la page doit être présent dans le fil d'Ariane et sur la
page. Cette redondance permet à l'internaute de bien se repérer.
Web Design 35
![Page 36: By Loveprit SIDHU Le 28 janvier 2011 Web Design1 Formation : M2EID² Encadré par Catherine RECANATI](https://reader036.vdocuments.mx/reader036/viewer/2022081518/551d9db9497959293b8dd71d/html5/thumbnails/36.jpg)
Web Design 36
![Page 37: By Loveprit SIDHU Le 28 janvier 2011 Web Design1 Formation : M2EID² Encadré par Catherine RECANATI](https://reader036.vdocuments.mx/reader036/viewer/2022081518/551d9db9497959293b8dd71d/html5/thumbnails/37.jpg)
Les liens sont la colonne vertébrale d’un site, sans ça le site est inutile car possédant peu d’information
Reconnaissance des liens: ◦ Un lien peut être un pictogramme, un logo, un texte
d’une couleur différente de celle utilisée pour du texte normal (et généralement souligné).
◦ Lorsque l’utilisateur passe sur un lien avec le pointeur de la souris, le pointeur doit prendre la forme d’une petite main.
◦ Si le lien est une image alors il faut qu’il y est une info bulle.
Web Design 37
![Page 38: By Loveprit SIDHU Le 28 janvier 2011 Web Design1 Formation : M2EID² Encadré par Catherine RECANATI](https://reader036.vdocuments.mx/reader036/viewer/2022081518/551d9db9497959293b8dd71d/html5/thumbnails/38.jpg)
Couleur par défaut des liens :◦ Lien avant activation : bleu.◦ Lien consulté : violet.◦ Lien après activation : rouge.
Les liens bien positionnés sont plus efficaces
Les liens explicites sont mieux compris
Les liens doivent se comporter différemment en fonction de l’action de l’utilisateur
Web Design 38
![Page 39: By Loveprit SIDHU Le 28 janvier 2011 Web Design1 Formation : M2EID² Encadré par Catherine RECANATI](https://reader036.vdocuments.mx/reader036/viewer/2022081518/551d9db9497959293b8dd71d/html5/thumbnails/39.jpg)
Web Design 39
![Page 40: By Loveprit SIDHU Le 28 janvier 2011 Web Design1 Formation : M2EID² Encadré par Catherine RECANATI](https://reader036.vdocuments.mx/reader036/viewer/2022081518/551d9db9497959293b8dd71d/html5/thumbnails/40.jpg)
« La charte graphique ou normes graphiques est un document de travail qui contient l'ensemble des règles fondamentales d'utilisation des signes graphiques qui constituent l'identité graphique d'une organisation, d'un projet, d'une entreprise. »
La charte graphique s'applique à définir :◦ Le logo (couleurs, position dans la page, supports, déclinaisons
et interdits) ◦ Les polices de caractères utilisées ◦ Les jeux de couleurs déclinables sur les différents supports de
communication ◦ L'utilisation des éléments graphiques (filigranes, détail du logo
agrandi, courbes et traits spécifique à l'entreprise) ◦ Les principes du choix des images et des illustrations
Web Design 40
![Page 41: By Loveprit SIDHU Le 28 janvier 2011 Web Design1 Formation : M2EID² Encadré par Catherine RECANATI](https://reader036.vdocuments.mx/reader036/viewer/2022081518/551d9db9497959293b8dd71d/html5/thumbnails/41.jpg)
Le choix des couleurs est subjectif, une personne peut aimer une couleur et une autre peut ne pas l’aimer
Il faut que l’usage des couleurs suit la charte graphique
Utiliser un nombre limité de couleur
Bien choisir les couleurs de fond (background) et les couleurs de « surface » (foreground)
Web Design 41
![Page 42: By Loveprit SIDHU Le 28 janvier 2011 Web Design1 Formation : M2EID² Encadré par Catherine RECANATI](https://reader036.vdocuments.mx/reader036/viewer/2022081518/551d9db9497959293b8dd71d/html5/thumbnails/42.jpg)
couleurs primaires : Il s’agit des couleurs de base, on ne peut pas les obtenir en mélangeant d’autres couleurs. Ce sont les couleurs que nos yeux perçoivent le mieux : le rouge, le jaune et le bleu.
couleurs secondaires : il sont obtenues à partir du mélange des couleurs primaires deux par deux.◦ bleu + jaune = vert◦ jaune + rouge = orange◦ bleu + rouge = violet
couleurs tertiaires: ils sont obtenues en mélangeant deux couleurs secondaires à part égales
Web Design 42
![Page 43: By Loveprit SIDHU Le 28 janvier 2011 Web Design1 Formation : M2EID² Encadré par Catherine RECANATI](https://reader036.vdocuments.mx/reader036/viewer/2022081518/551d9db9497959293b8dd71d/html5/thumbnails/43.jpg)
Rouge : Couleur chaude symbole de l'amour, il ne faut pas en abuser en webdesign car le rouge ressort beaucoup, la dominance du rouge dans une charte graphique n’est pas conseillée.
Orange : Couleur chaude source de tonicité, on l’utilise fréquemment en webdesign, mais avec une teinte plutôt claire.
Jaune : Couleur chaude symbole de la richesse elle représente également l'univers intellectuel.
Vert : Couleur chaude couleur du végétal, elle est synonyme d'espérance et de fertilité mais elle n'est pas source de gaieté ni de stimulation. On s'en lasse vite.
Web Design 43
![Page 44: By Loveprit SIDHU Le 28 janvier 2011 Web Design1 Formation : M2EID² Encadré par Catherine RECANATI](https://reader036.vdocuments.mx/reader036/viewer/2022081518/551d9db9497959293b8dd71d/html5/thumbnails/44.jpg)
Bleu : Couleur froide, elle crée un climat frais, doux, calme, de grande sérénité. Elle agit sur nous en stimulant notre intuition. Une couleur très utilisée en webdesign.
Violet : Couleur froide favorise la méditation et le sommeil, calme les excités, nous apporte un équilibre intérieur.
Blanc : Source de pureté et de transparence, recommandable pour les fonds de page.
Gris : symbolise l'infini , la quiétude, utilisable en fond de page également.
Noir : couleur de l'austérité, en webdesign il faut s’en servir presque uniquement pour les textes.
Web Design 44
![Page 45: By Loveprit SIDHU Le 28 janvier 2011 Web Design1 Formation : M2EID² Encadré par Catherine RECANATI](https://reader036.vdocuments.mx/reader036/viewer/2022081518/551d9db9497959293b8dd71d/html5/thumbnails/45.jpg)
Web Design 45
![Page 46: By Loveprit SIDHU Le 28 janvier 2011 Web Design1 Formation : M2EID² Encadré par Catherine RECANATI](https://reader036.vdocuments.mx/reader036/viewer/2022081518/551d9db9497959293b8dd71d/html5/thumbnails/46.jpg)
Lorsque le navigateur de votre visiteur accède à vos pages Web, il ne peut afficher que les polices qui se trouvent sur son propre système, donc les polices installées par défaut avec Windows.
Si le visiteur ne possède pas la police que vous avez choisie, la police par défaut se chargera. Times New Roman sous Windows et Times pour les MacOS.
Web Design 46
![Page 47: By Loveprit SIDHU Le 28 janvier 2011 Web Design1 Formation : M2EID² Encadré par Catherine RECANATI](https://reader036.vdocuments.mx/reader036/viewer/2022081518/551d9db9497959293b8dd71d/html5/thumbnails/47.jpg)
Il faut utiliser des polices courantes que tout le monde possède comme Times New Roman, Arial, Courrier New ou encore Verdana par exemple
Trois type de police :◦ Courrier et le Courrier New sont des polices à chasse
fixe, tous les caractères ont la même largeur, comme sur une machine à écrire.
◦ Times & Times New Roman : Polices avec shérif (empattement). Elles sont agréables à lire pour un document imprimé mais plus difficiles à comprendre sur un écran d’ordinateur
◦ L'Arial et l'Helvetica sont des polices sans shérif, donc plus faciles à lire sur un moniteur.
Web Design 47
![Page 48: By Loveprit SIDHU Le 28 janvier 2011 Web Design1 Formation : M2EID² Encadré par Catherine RECANATI](https://reader036.vdocuments.mx/reader036/viewer/2022081518/551d9db9497959293b8dd71d/html5/thumbnails/48.jpg)
Possibilité de spécifier une liste de police classée par préférences en HTML avec la balise <FONT> </FONT>
Exemple:<FONT face = "Verdana, Arial, Helvetica, sans serif">Fin du cours de Webdesign </FONT>
Web Design 48
![Page 49: By Loveprit SIDHU Le 28 janvier 2011 Web Design1 Formation : M2EID² Encadré par Catherine RECANATI](https://reader036.vdocuments.mx/reader036/viewer/2022081518/551d9db9497959293b8dd71d/html5/thumbnails/49.jpg)
Il faut utiliser les images de bonne qualité car les internautes préfèrent ce type d’image.
Qui dit bonne qualité dit image de poids important ce qui implique un chargement de la page lente
Pour avoir la qualité et un poids léger il faut compresser l’image
Compression : suppression des pixels jugés inutiles ou mettre moins de couleurs dans l'image.
Web Design 49
![Page 50: By Loveprit SIDHU Le 28 janvier 2011 Web Design1 Formation : M2EID² Encadré par Catherine RECANATI](https://reader036.vdocuments.mx/reader036/viewer/2022081518/551d9db9497959293b8dd71d/html5/thumbnails/50.jpg)
Il existe trois formats de compression:◦ format JPEG : la compression (type destructif) entraine
la disparition de pixels. Plus l'image est compressée plus les pixels seront gros et plus l'image sera dégradée. Il faut donc trouver le bon compromis entre qualité désirée et taille finale de l'image. C’est destiné à la photographie
◦ format GIF: le moins utilisé, l’image convertie (type non destructif) n’est pas dégradé mais limité en terme de couleur(256).
◦ format PNG: la compression (type non destructif) n’est pas limitée à 256 couleur et gère la transparence. Il ne dégrade pas l'image, contrairement au JPEG, au détriment du poids du fichier. Ce format est particulièrement recommandé pour des graphiques, des logos, des icônes, des images représentant du texte.
Web Design 50
![Page 51: By Loveprit SIDHU Le 28 janvier 2011 Web Design1 Formation : M2EID² Encadré par Catherine RECANATI](https://reader036.vdocuments.mx/reader036/viewer/2022081518/551d9db9497959293b8dd71d/html5/thumbnails/51.jpg)
Web Design 51
![Page 52: By Loveprit SIDHU Le 28 janvier 2011 Web Design1 Formation : M2EID² Encadré par Catherine RECANATI](https://reader036.vdocuments.mx/reader036/viewer/2022081518/551d9db9497959293b8dd71d/html5/thumbnails/52.jpg)
WCAG 2.0 (Web Content Accessibility Guideline for web 2.0) : c’est une norme W3C qui a pour but de rendre les contenus web plus accessibles aux personnes en situation d’handicap.
Pour les personnes qui ont un handicaps :◦ Visuel◦ Auditif◦ Physique◦ Cognitif◦ Neurologique◦ Lié à la parole
Web Design 52
![Page 53: By Loveprit SIDHU Le 28 janvier 2011 Web Design1 Formation : M2EID² Encadré par Catherine RECANATI](https://reader036.vdocuments.mx/reader036/viewer/2022081518/551d9db9497959293b8dd71d/html5/thumbnails/53.jpg)
Afin qu'une page Web soit conforme aux WCAG 2.0 il y a certaines exigences à satisfaire.
Niveau de conformité:◦ Niveau A: site qui répond aux exigences d’un
point particulier (niveau de contrôle minimal)◦ Niveau AA: site répond à deux exigences (A et AA)◦ Niveau AAA: site répondant à tous les exigences
Web Design 53
![Page 54: By Loveprit SIDHU Le 28 janvier 2011 Web Design1 Formation : M2EID² Encadré par Catherine RECANATI](https://reader036.vdocuments.mx/reader036/viewer/2022081518/551d9db9497959293b8dd71d/html5/thumbnails/54.jpg)
Il existe 4 principes dans le WCAG◦ perceptible
ex : Règle 1.4 Distinguable : faciliter la perception visuelle et auditive du contenu par l'utilisateur, notamment en séparant le premier plan de l'arrière-plan.
◦ utilisable ex : Règle 2.3 Crises : ne pas concevoir de contenu
susceptible de provoquer des crises.◦ compréhensible
ex : Règle 3.3 Assistance à la saisie : aider l'utilisateur à éviter et à corriger les erreurs de saisie.
◦ robuste ex : Règle 4.1 Compatible : optimiser la compatibilité avec
les agents utilisateurs actuels et futurs, y compris les technologies d'assistance
Web Design 54
![Page 55: By Loveprit SIDHU Le 28 janvier 2011 Web Design1 Formation : M2EID² Encadré par Catherine RECANATI](https://reader036.vdocuments.mx/reader036/viewer/2022081518/551d9db9497959293b8dd71d/html5/thumbnails/55.jpg)
Déficience : Il existe différentes formes de cécité des couleurs : rouge-vert, vert-brun, et ainsi de suite...
Dans le monde : 10% de la population masculine est daltonienne
En France, ◦ 8 % homme◦ 0.45 % femme
La première méthode et la plus simple à mettre en œuvre est l'emploi d'un contraste élevé entre l'arrière plan et les couleurs utilisées pour le contenu de la page.
Web Design 55
![Page 56: By Loveprit SIDHU Le 28 janvier 2011 Web Design1 Formation : M2EID² Encadré par Catherine RECANATI](https://reader036.vdocuments.mx/reader036/viewer/2022081518/551d9db9497959293b8dd71d/html5/thumbnails/56.jpg)
Web Design 56
C et E sont plus facilement lisibles parce que le contraste est assez fort. L'affichage de la page en niveaux de gris peut montrer si oui ou non il y a suffisamment de contraste. Il existe des outils pour tester le constraste.
![Page 57: By Loveprit SIDHU Le 28 janvier 2011 Web Design1 Formation : M2EID² Encadré par Catherine RECANATI](https://reader036.vdocuments.mx/reader036/viewer/2022081518/551d9db9497959293b8dd71d/html5/thumbnails/57.jpg)
Photoshop est un logiciel de retouche, de traitement et de dessin assisté par ordinateur édité par ADOBE. Il est principalement utilisé pour le traitement des images photographique, de création d’image.
Web Design 57
![Page 58: By Loveprit SIDHU Le 28 janvier 2011 Web Design1 Formation : M2EID² Encadré par Catherine RECANATI](https://reader036.vdocuments.mx/reader036/viewer/2022081518/551d9db9497959293b8dd71d/html5/thumbnails/58.jpg)
Web Design 58
![Page 59: By Loveprit SIDHU Le 28 janvier 2011 Web Design1 Formation : M2EID² Encadré par Catherine RECANATI](https://reader036.vdocuments.mx/reader036/viewer/2022081518/551d9db9497959293b8dd71d/html5/thumbnails/59.jpg)
Dreamweaver est un éditeur de site web de type WYSIWYG (« What you see is what you. get »)
Web Design 59
![Page 60: By Loveprit SIDHU Le 28 janvier 2011 Web Design1 Formation : M2EID² Encadré par Catherine RECANATI](https://reader036.vdocuments.mx/reader036/viewer/2022081518/551d9db9497959293b8dd71d/html5/thumbnails/60.jpg)
Content Manager System est une famille de logiciels destinés à la conception et à la mise à jour dynamique de site web ou d'application multimédia. Ex: Joomla
Web Design 60
![Page 61: By Loveprit SIDHU Le 28 janvier 2011 Web Design1 Formation : M2EID² Encadré par Catherine RECANATI](https://reader036.vdocuments.mx/reader036/viewer/2022081518/551d9db9497959293b8dd71d/html5/thumbnails/61.jpg)
Web Design 61
![Page 62: By Loveprit SIDHU Le 28 janvier 2011 Web Design1 Formation : M2EID² Encadré par Catherine RECANATI](https://reader036.vdocuments.mx/reader036/viewer/2022081518/551d9db9497959293b8dd71d/html5/thumbnails/62.jpg)
Web Design 62
![Page 63: By Loveprit SIDHU Le 28 janvier 2011 Web Design1 Formation : M2EID² Encadré par Catherine RECANATI](https://reader036.vdocuments.mx/reader036/viewer/2022081518/551d9db9497959293b8dd71d/html5/thumbnails/63.jpg)
Le web design est indispensable pour la création de site web bien formé.
Il permet d’accéder facilement au contenu d’un site web.
Le web design fait en sorte que chaque personne puisse suivre les règles afin que tous le monde puissent bénéficier sans contraintes du web.
Web Design 63
![Page 64: By Loveprit SIDHU Le 28 janvier 2011 Web Design1 Formation : M2EID² Encadré par Catherine RECANATI](https://reader036.vdocuments.mx/reader036/viewer/2022081518/551d9db9497959293b8dd71d/html5/thumbnails/64.jpg)
http://webdesign.2803.com http://fr.wikipedia.org/wiki/Conception_de_sites_web http://www.comment-gagner-sur-internet.com http://ergonomie-web.studiovitamine.com/ http://www.catapulpe.fr/lafabrik/pourquoi-creer-un-site-internet http://www.alsacreations.com http://www.css-design.fr http://www.commentcamarche.net/contents/html/
htmlintro.php3 http://www.my.epokhe.com/2008/11/04/bonnes-pratiques-liens-
hypertextes/ http://www.ergolab.net/articles/ergonomie-page-accueil.php http://www.w3.org/Translations/WCAG20-fr/ Google video
Web Design 64