1. WEB DESIGN
Master 2 MMI | Université Panthéon - Sorbonne
Octobre 2009 : Partie 1/4 David Raichman - Senior UX Designer @ OgilvyInteractive
2. 1. PRÉSENTATION DU COURS
Web Design - Master 2 MMI Université Panthéon - Sorbonne
3. 1. PRÉSENTATION DU COURS
A. Objectifs
‣Acquérir une vision globale du web (design, technologie...)
‣Comprendre la chaîne des processus de la conception à la
réalisation
‣Apprendre les langages front-end (XHTML, CSS,
Javascript/DOM)
‣Utiliser DW comme outil de web authoring et de
prototypage
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
4. 1. PRÉSENTATION DU COURS
B. Enjeux et contextes
‣Industrialisation du web
‣Globalisation
‣Conseil et vision stratégique
‣Design centré sur l’utilisateur
‣Progression technologique
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
5. 2. FONDAMENTAUX DU WEB
Web Design - Master 2 MMI Université Panthéon - Sorbonne
6. 2. FONDAMENTAUX DU WEB
A. (R)évolutions
1995
web 1.0
HTML
images
javascript
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
7. 2. FONDAMENTAUX DU WEB
A. (R)évolutions
1995
web 1.0
HTML
images
http://www.hec.fr
javascript
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
8. 2. FONDAMENTAUX DU WEB
A. (R)évolutions
1995
web 1.0
HTML
images
javascript
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
9. 2. FONDAMENTAUX DU WEB
A. (R)évolutions
1995 1997 - 98
web 1.0 web dynamique
HTML ASP, PHP
images panier, session
javascript transaction, sécurisation
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
10. 2. FONDAMENTAUX DU WEB
A. (R)évolutions
1995 1997 - 98
web 1.0 web dynamique
HTML ASP, PHP
images panier, session
javascript transaction, sécurisation
“multimedia”
animation,
Shockwave Flash
QuickTime, son
bannières
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
11. 2. FONDAMENTAUX DU WEB
A. (R)évolutions
1995 1997 - 98
web 1.0 web dynamique
HTML ASP, PHP
images panier, session
javascript transaction, sécurisation
“multimedia”
animation,
Shockwave Flash
QuickTime, son
bannières
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
12. 2. FONDAMENTAUX DU WEB
A. (R)évolutions
1995 1997 - 98
web 1.0 web dynamique
HTML ASP, PHP
images panier, session
javascript transaction, sécurisation
“multimedia”
animation,
Shockwave Flash
QuickTime, son
bannières
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
13. 2. FONDAMENTAUX DU WEB
A. (R)évolutions
1995 1997 - 98 2000
web 1.0 web dynamique
HTML ASP, PHP
Transaction vs
images panier, session Information
javascript transaction, sécurisation
“multimedia” BULLE
INTERNET
animation,
Shockwave Flash
QuickTime, son
bannières
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
14. 2. FONDAMENTAUX DU WEB
A. (R)évolutions
1995 1997 - 98 2000 - 2004
web 1.0 web dynamique web social
W3C
HTML ASP, PHP standards,
web sémantique,
images panier, session XML, XHTML, CSS,
javascript transaction, sécurisation Blogs
“multimedia”
animation,
Shockwave Flash
QuickTime, son
bannières
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
15. 2. FONDAMENTAUX DU WEB
A. (R)évolutions
1995 1997 - 98 2004...2008
web 1.0 web dynamique
HTML ASP, PHP
images panier, session
javascript transaction, sécurisation
“multimedia”
animation,
Shockwave Flash
web 2.0
QuickTime, son
bannières
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
16. 2. FONDAMENTAUX DU WEB
A. (R)évolutions
Les mutations induites par la standardisation (W3C) : le
comportement des utilisateurs comme créateurs de contenus,
la socialisation du web…
‣ XML standard de diffusions de l’information RSS, ATOM…
‣ Phase d’expansion de l’open source (dont LAMP) et créations de
CMS gratuits qui faciliterons la naissance des blogs
‣ Ajax : le navigateur devient un lecteur d’application (google
documents, googlemap,…)
‣ Programmes collaboratifs (wiki)
‣ Agrégateurs (Netvibes, iGoogle...)
‣ Widgets
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
17. 2. FONDAMENTAUX DU WEB
A. (R)évolutions
1995 1997 - 98 2004...2008
web 1.0 web dynamique web 2.0
HTML ASP, PHP W3C, interopérabilité
images panier, session XHTML, CSS
javascript transaction, sécurisation Blogs, RSS
“multimedia”
animation,
Shockwave Flash
QuickTime, son
bannières
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
18. 2. FONDAMENTAUX DU WEB
A. (R)évolutions
1995 1997 - 98 2004...2008
web 1.0 web dynamique web 2.0
HTML ASP, PHP W3C, interopérabilité
images panier, session XHTML, CSS
javascript transaction, sécurisation Blogs, RSS
“multimedia” RIA
animation, Ajax, Flex
Shockwave Flash cartographie,
QuickTime, son partage de media
bannières API
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
19. 2. FONDAMENTAUX DU WEB
A. (R)évolutions
1995 1997 - 98 2004...2008
web 1.0 web dynamique web 2.0
HTML ASP, PHP W3C, interopérabilité
images panier, session XHTML, CSS
javascript transaction, sécurisation Blogs, RSS
“multimedia” RIA
animation, Ajax, Flex
Shockwave Flash cartographie,
QuickTime, son partage de media
bannières API
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
20. 2. FONDAMENTAUX DU WEB
A. (R)évolutions
1995 1997 - 98 2004...2008
web 1.0 web dynamique web 2.0
HTML ASP, PHP W3C, interopérabilité
images panier, session XHTML, CSS
javascript transaction, sécurisation Blogs, RSS
“multimedia” RIA
animation, Ajax, Flex
Shockwave Flash cartographie,
QuickTime, son partage de media
bannières API
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
21. 2. FONDAMENTAUX DU WEB
A. (R)évolutions
1995 1997 - 98 2004...2008
web 1.0 web dynamique web 2.0
HTML ASP, PHP W3C, interopérabilité
images panier, session XHTML, CSS
javascript transaction, sécurisation Blogs, RSS
“multimedia” RIA
animation, Ajax, Flex
Shockwave Flash cartographie,
QuickTime, son partage de media
bannières API
RDA, RMA
Adobe AIR, Flex,
SDK Iphone
Objets web-connectés
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
22. 2. FONDAMENTAUX DU WEB
A. (R)évolutions
1995 1997 - 98 2004...2008
web 1.0 web dynamique web 2.0
HTML ASP, PHP W3C, interopérabilité
images panier, session XHTML, CSS
javascript transaction, sécurisation Blogs, RSS
“multimedia” RIA
animation, Ajax, Flex
Shockwave Flash cartographie,
QuickTime, son partage de media
bannières API
RDA, RMA
Adobe AIR, Flex,
SDK Iphone
Objets web-connectés
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
23. 2. FONDAMENTAUX DU WEB
A. (R)évolutions
1995 1997 - 98 2004...2008
web 1.0 web dynamique web 2.0
HTML ASP, PHP W3C, interopérabilité
images panier, session XHTML, CSS
javascript transaction, sécurisation Blogs, RSS
“multimedia” RIA
animation, Ajax, Flex
Shockwave Flash cartographie,
QuickTime, son partage de media
bannières API
RDA, RMA
Adobe AIR, Flex,
SDK Iphone
Objets web-connectés
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
24. 2. FONDAMENTAUX DU WEB
A. (R)évolutions
1995 1997 - 98 2004...2008 2009...
web 1.0 web dynamique web 2.0 web2
HTML ASP, PHP W3C, interopérabilité monde et
images panier, session XHTML, CSS environnement
javascript transaction, sécurisation Blogs, RSS physique
temps-réel
“multimedia” RIA intelligence collective
animation, Ajax, Flex métadonnées
Shockwave Flash cartographie,
QuickTime, son partage de media cloud computing
bannières API
RSS Cloud
PubSubHubBub
RDA, RMA
Adobe AIR, Flex,
SDK Iphone
Objets web-connectés
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
25. 2. FONDAMENTAUX DU WEB
A. (R)évolutions
1995 1997 - 98 2004...2008 2009...
web 1.0 web dynamique web 2.0 web2
HTML ASP, PHP W3C, interopérabilité monde et
images panier, session XHTML, CSS environnement
javascript transaction, sécurisation Blogs, RSS physique
temps-réel
“multimedia” RIA intelligence collective
animation, Ajax, Flex métadonnées
Shockwave Flash cartographie,
QuickTime, son partage de media cloud computing
bannières API
RSS Cloud
PubSubHubBub
RDA, RMA
Adobe AIR, Flex,
SDK Iphone
Objets web-connectés
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
26. 2. FONDAMENTAUX DU WEB
A. (R)évolutions
1995 1997 - 98 2004...2008 2009...
web 1.0 web dynamique web 2.0 web2
HTML ASP, PHP W3C, interopérabilité monde et
images panier, session XHTML, CSS environnement
javascript transaction, sécurisation Blogs, RSS physique
temps-réel
“multimedia” RIA intelligence collective
animation, Ajax, Flex métadonnées
Shockwave Flash cartographie,
QuickTime, son partage de media cloud computing
bannières API
RSS Cloud
PubSubHubBub
RDA, RMA
Adobe AIR, Flex,
SDK Iphone
Objets web-connectés
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
27. 2. FONDAMENTAUX DU WEB
A. (R)évolutions
1995 1997 - 98 2004...2008 2009...
web 1.0 web dynamique web 2.0 web2
HTML ASP, PHP W3C, interopérabilité monde et
images panier, session XHTML, CSS environnement
javascript transaction, sécurisation Blogs, RSS physique
temps-réel
“multimedia” RIA intelligence collective
animation, Ajax, Flex métadonnées
Shockwave Flash cartographie,
QuickTime, son partage de media cloud computing
bannières API
RSS Cloud
PubSubHubBub
RDA, RMA
Adobe AIR, Flex,
SDK Iphone
Objets web-connectés
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
28. 2. FONDAMENTAUX DU WEB
A. (R)évolutions
1995 1997 - 98 2004...2008 2009...
web 1.0 web dynamique web 2.0 web2
HTML ASP, PHP W3C, interopérabilité monde et
images panier, session XHTML, CSS environnement
javascript transaction, sécurisation Blogs, RSS physique
temps-réel
“multimedia” RIA intelligence collective
animation, Ajax, Flex métadonnées
Shockwave Flash cartographie,
QuickTime, son partage de media cloud computing
bannières API
RSS Cloud
PubSubHubBub
RDA, RMA
Adobe AIR, Flex,
SDK Iphone
Objets web-connectés
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
29. 2. FONDAMENTAUX DU WEB
B. Typologie et positionnement
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
30. 2. FONDAMENTAUX DU WEB
B. Typologie et positionnement
Une perpective
pour comprendre
le web d’aujourd’hui
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
31. 2. FONDAMENTAUX DU WEB
B. Typologie et positionnement
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
32. 2. FONDAMENTAUX DU WEB
B. Typologie et positionnement
Informationnel
vs
Audiovisuel
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
33. 2. FONDAMENTAUX DU WEB
B. Typologie et positionnement
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
34. 2. FONDAMENTAUX DU WEB
B. Typologie et positionnement
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
35. 2. FONDAMENTAUX DU WEB
B. Typologie et positionnement
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
36. 2. FONDAMENTAUX DU WEB
B. Typologie et positionnement
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
37. 2. FONDAMENTAUX DU WEB
B. Typologie et positionnement
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
38. 2. FONDAMENTAUX DU WEB
B. Typologie et positionnement
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
39. 2. FONDAMENTAUX DU WEB
B. Typologie et positionnement
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
40. 2. FONDAMENTAUX DU WEB
B. Typologie et positionnement
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
41. 2. FONDAMENTAUX DU WEB
B. Typologie et positionnement
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
42. 2. FONDAMENTAUX DU WEB
B. Typologie et positionnement
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
43. 2. FONDAMENTAUX DU WEB
B. Typologie et positionnement
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
44. 2. FONDAMENTAUX DU WEB
B. Typologie et positionnement
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
45. 2. FONDAMENTAUX DU WEB
B. Typologie et positionnement
applicatif
Desktop Itunes
audiovisuel informationnel
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
46. 2. FONDAMENTAUX DU WEB
B. Typologie et positionnement
applicatif
Desktop Itunes
audiovisuel informationnel
RIA Rich Internet Application
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
47. 2. FONDAMENTAUX DU WEB
B. Typologie et positionnement
applicatif
Desktop Itunes
audiovisuel informationnel
RIA Rich Internet Application
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
48. 2. FONDAMENTAUX DU WEB
B. Typologie et positionnement
applicatif
Desktop Itunes
audiovisuel informationnel
RIA Rich Internet Application
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
49. 2. FONDAMENTAUX DU WEB
B. Typologie et positionnement
applicatif
Desktop Itunes
audiovisuel informationnel
RIA Rich Internet Application
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
50. 2. FONDAMENTAUX DU WEB
B. Typologie et positionnement
applicatif
Desktop Itunes
audiovisuel informationnel
RIA Rich Internet Application
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
51. 2. FONDAMENTAUX DU WEB
B. Typologie et positionnement
applicatif
Desktop Itunes
audiovisuel RDA Rich Desktop Application informationnel
RIA Rich Internet Application
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
52. 2. FONDAMENTAUX DU WEB
B. Typologie et positionnement
applicatif
Desktop Itunes
audiovisuel RDA Rich Desktop Application informationnel
RIA Rich Internet Application
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
53. 2. FONDAMENTAUX DU WEB
B. Typologie et positionnement
applicatif
Desktop Itunes
audiovisuel RDA Rich Desktop Application informationnel
RIA Rich Internet Application
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
54. 2. FONDAMENTAUX DU WEB
B. Typologie et positionnement
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
55. 2. FONDAMENTAUX DU WEB
B. Typologie et positionnement
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
56. 2. FONDAMENTAUX DU WEB
B. Typologie et positionnement
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
57. 2. FONDAMENTAUX DU WEB
B. Typologie et positionnement
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
58. 2. FONDAMENTAUX DU WEB
B. Typologie et positionnement
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
59. 2. FONDAMENTAUX DU WEB
B. Typologie et positionnement
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
60. 2. FONDAMENTAUX DU WEB
B. Typologie et positionnement
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
61. 2. FONDAMENTAUX DU WEB
B. Typologie et positionnement
tag surf
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
62. 2. FONDAMENTAUX DU WEB
B. Typologie et positionnement
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
63. 2. FONDAMENTAUX DU WEB
B. Typologie et positionnement
Virtual Me
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
64. 2. FONDAMENTAUX DU WEB
B. Typologie et positionnement
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
65. 2. FONDAMENTAUX DU WEB
B. Typologie et positionnement
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
66. 2. FONDAMENTAUX DU WEB
B. Typologie et positionnement
World of Warcraft
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
67. 2. FONDAMENTAUX DU WEB
B. Typologie et positionnement
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
68. 2. FONDAMENTAUX DU WEB
B. Typologie et positionnement
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
69. 2. FONDAMENTAUX DU WEB
B. Typologie et positionnement
communication information
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
70. 2. FONDAMENTAUX DU WEB
B. Typologie et positionnement
communication information
temps horizontal espace vertical
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
71. 2. FONDAMENTAUX DU WEB
B. Typologie et positionnement
communication information
temps horizontal espace vertical
interactivité immersion trouvabilité émersion
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
72. 2. FONDAMENTAUX DU WEB
B. Typologie et positionnement
communication information
temps horizontal espace vertical
interactivité immersion trouvabilité émersion
forme = fond = fonction forme ! fond ! fonction
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
73. 2. FONDAMENTAUX DU WEB
B. Typologie et positionnement
communication information
temps horizontal espace vertical
interactivité immersion trouvabilité émersion
forme = fond = fonction forme ! fond ! fonction
concret pictural abstrait textuel
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
74. 2. FONDAMENTAUX DU WEB
C. Mise en perspective...
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
75. 2. FONDAMENTAUX DU WEB
C. Mise en perspective...
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
76. 2. FONDAMENTAUX DU WEB
C. Mise en perspective...
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
79. 3. FORMATS STRUCTURÉS
A. Fondements du web informationnel
Format structuré = contenu (texte)
+ structure sémantique + structure hiérarchique
SGML (Standard Generalized Markup Language) – 1986
Balisage, DTD, head et body
HTML (Hyper Text Markup Language) a été défini pour être
un langage d'échange de documents scientifiques et
techniques.
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
80. 3. FORMATS STRUCTURÉS
A. Fondements du web informationnel
HTML a résolu le problème de la complexité SGML en
spécifiant un petit ensemble de balises sémantiques et
structurelles, facilement utilisable pour l'écriture de
documents relativement simples. De même, pour simplifier la
structure du document, HTML a ajouté la possibilité de
l'hypertexte.
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
81. 3. FORMATS STRUCTURÉS
A. Fondements du web informationnel
1986
{
HTML
SGML
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
82. 3. FORMATS STRUCTURÉS
A. Fondements du web informationnel
1986 1995
{
HTML 2.0
SGML
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
83. 3. FORMATS STRUCTURÉS
A. Fondements du web informationnel
1986 1995 1997
{
HTML 2.0 4.0
SGML
CSS 1.0
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
84. 3. FORMATS STRUCTURÉS
A. Fondements du web informationnel
1986 1995 1997 1998
{
HTML 2.0 4.0
SGML
XML 1.0
CSS 1.0 CSS 2.0
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
85. 3. FORMATS STRUCTURÉS
B. Les apports du W3C
XML (eXtended Markup Language) – 1998
XML, langage à balisage structuré, est une forme restreinte de
SGML, et préserve pratiquement toute la puissance et la richesse
de SGML.
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
86. 3. FORMATS STRUCTURÉS
B. Les apports du W3C
XML (eXtended Markup Language) – 1998
XML, langage à balisage structuré, est une forme restreinte de
SGML, et préserve pratiquement toute la puissance et la richesse
de SGML.
<racine>
... suite du document XML ...
</racine>
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
87. 3. FORMATS STRUCTURÉS
B. Les apports du W3C
XML (eXtended Markup Language) – 1998
XML, langage à balisage structuré, est une forme restreinte de
SGML, et préserve pratiquement toute la puissance et la richesse
de SGML.
<parents>
""""" <enfants>
"""""""""" <petits_enfants> ... </petits_enfants>
""""" </enfants>
</parents>
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
88. 3. FORMATS STRUCTURÉS
B. Les apports du W3C
Un document XML est structuré de telle sorte qu’il puisse être
matérialisé par plusieurs médias avec un effort minimum :
papier, web, base de données, synthèse vocales, etc…
A une matérialisation donnée correspond une feuille de style.
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
89. 3. FORMATS STRUCTURÉS
B. Les apports du W3C
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
90. 3. FORMATS STRUCTURÉS
B. Les apports du W3C
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
91. 3. FORMATS STRUCTURÉS
B. Les apports du W3C
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
92. 3. FORMATS STRUCTURÉS
B. Les apports du W3C
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
93. 3. FORMATS STRUCTURÉS
B. Les apports du W3C
Plus d’exemples sur http://www.csszengarden.com
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
94. 3. FORMATS STRUCTURÉS
B. Les apports du W3C
1986 1995 1997 1998
{
HTML 2.0 4.0
SGML
XML 1.0
CSS 1.0 CSS 2.0
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
95. 3. FORMATS STRUCTURÉS
B. Les apports du W3C
1986 1995 1997 1998 2000 - 2001
{
HTML 2.0 4.0
{
XHTML 1.0
WML
XML 1.0
MathML
...
CSS 1.0 CSS 2.0
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
96. 3. FORMATS STRUCTURÉS
B. Les apports du W3C
XHTML (eXtended Hypertext Markup Language)
XHTML est une reformulation de HTML mais respecte les normes
du XML.
Les documents XHTML sont conformes à XML. Ainsi,
ils sont directement lisibles, éditables, et validables avec
les outils XML standards.
Les documents XHTML peuvent être écrits pour fonctionner aussi
bien ou mieux qu'ils ne le faisaient précédemment dans les agents
utilisateurs compatibles HTML!4.0 (rétro-compatibilité) ainsi que
dans les nouveaux agents utilisateurs compatibles XHTML 1.0.
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
97. 3. FORMATS STRUCTURÉS
B. Les apports du W3C
XHTML 1.0 repose sur le fait qu’il existe deux catégories
d’éléments structurant un document :
les éléments bloc
les éléments en ligne
En-tête (header)
élément bloc
Corps (body)
élément en ligne
Modèle document XHTML
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
98. 3. FORMATS STRUCTURÉS
C. HTML 5 : un format naissant
1986 1995 1997 1998 2000 - 2001
{
HTML 2.0 4.0
{
SGML
XHTML 1.0
WML
XML 1.0
MathML
...
CSS 1.0 CSS 2.0
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
99. 3. FORMATS STRUCTURÉS
C. HTML 5 : un format naissant
1986 1995 1997 1998 2000 - 2001 2009...
{
HTML 2.0 4.0 HTML 5
{
X
SGML
XHTML 1.0 2.0
rétro-compatibilité HTML
non assurée
WML
XML 1.0
MathML
...
CSS 1.0 CSS 2.0 CSS 3.0
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
100. 3. FORMATS STRUCTURÉS
C. HTML 5 : un format naissant
HTML 5 remet en cause le modèle du document structuré à
partir d’éléments bloc et en ligne, et propose de nouvelles
catégories
Métadata
Ce sont les éléments qui
fixent la présentation du
document en indiquant
l’adresse de la feuille de style
par exemple.
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
101. 3. FORMATS STRUCTURÉS
C. HTML 5 : un format naissant
HTML 5 remet en cause le modèle du document structuré à
partir d’éléments bloc et en ligne, et propose de nouvelles
catégories
Flow content
Ce sont les éléments qui sont
le plus couramment utilisés
dans le corps d’un
document, par exemple les
titres, les boutons...
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
102. 3. FORMATS STRUCTURÉS
C. HTML 5 : un format naissant
HTML 5 remet en cause le modèle du document structuré à
partir d’éléments bloc et en ligne, et propose de nouvelles
catégories
Sectioning
Sous-ensemble des flow
contents. Ce sont des
contenus qui définissent le
périmètre d’une en-tête et
d’un pied de page. Par
exemple un article ou la
navigation.
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
103. 3. FORMATS STRUCTURÉS
C. HTML 5 : un format naissant
HTML 5 remet en cause le modèle du document structuré à
partir d’éléments bloc et en ligne, et propose de nouvelles
catégories
header
section
header
nav aside
article
footer
footer
Modèle document HTML 5
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
104. 3. FORMATS STRUCTURÉS
C. HTML 5 : un format naissant
HTML 5 remet en cause le modèle du document structuré à
partir d’éléments bloc et en ligne, et propose de nouvelles
catégories
Heading
Sous-ensemble des flow
contents. Ce sont des
contenus qui définissent la
titraille d’un document.
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
105. 3. FORMATS STRUCTURÉS
C. HTML 5 : un format naissant
HTML 5 remet en cause le modèle du document structuré à
partir d’éléments bloc et en ligne, et propose de nouvelles
catégories
Phrasing
Sous-ensemble des flow
contents. Ce sont les
éléments de texte du
document ainsi que les
éléments qui balisent le texte.
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
106. 3. FORMATS STRUCTURÉS
C. HTML 5 : un format naissant
HTML 5 remet en cause le modèle du document structuré à
partir d’éléments bloc et en ligne, et propose de nouvelles
catégories
Embed
Sous-ensemble des phrasing
content. Ce sont les
contenus qui importent des
sources externes au
document, comme mes
vidéos.
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
107. 3. FORMATS STRUCTURÉS
C. HTML 5 : un format naissant
to be continued...
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
108. 4. FRONT-END & BACK-END
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
109. 4. FRONT-END & BACK-END
A. Fond, forme et fonction
FONCTION
web
front
FORME FOND
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
110. 4. FRONT-END & BACK-END
A. Fond, forme et fonction
Javascript
FONCTION
web
front
FORME
CSS FOND
HTML
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
111. 4. FRONT-END & BACK-END
B. Site statiques
Un site “statique”
= chaque page est codée “à la main” LIEN
LIEN
LIEN
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
112. 4. FRONT-END & BACK-END
B. Site statiques
Un site “statique”
= chaque page est codée “à la main” LIEN
LIEN
LIEN
LIEN
LIEN
LIEN
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
113. 4. FRONT-END & BACK-END
C. Site dynamiques
Exemple de site dynamique : un BLOG
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
114. 4. FRONT-END & BACK-END
C. Site dynamiques
Les coulisses d’un site dynamique
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
115. 4. FRONT-END & BACK-END
C. Site dynamiques
ARTICLES
TITRE
TEXTE
IMAGE
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
116. 4. FRONT-END & BACK-END
C. Site dynamiques
ARTICLES
TITRE
TEXTE
IMAGE
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
117. 4. FRONT-END & BACK-END
C. Site dynamiques
CATEGORIES
CATEG.
CATEG.
ARTICLES
TITRE
TEXTE
IMAGE
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
118. 4. FRONT-END & BACK-END
C. Site dynamiques
CATEGORIES
CATEG.
CATEG.
ARTICLES
TITRE
TEXTE
IMAGE
CM
S
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
119. 4. FRONT-END & BACK-END
C. Site dynamiques
CATEGORIES
CATEG.
CATEG.
ARTICLES
TITRE
TEXTE no
ch
te
rt
IMAGE te
ID en
ARTICLE. n
sig
ID de
ARTICLE. ce
ien
ID sc
ARTICLE.
ID
ARTICLE.
CM
S
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
120. 4. FRONT-END & BACK-END
C. Site dynamiques
CATEGORIES
CATEG.
CATEG.
ARTICLES
TITRE
TEXTE no
ch
te
rt
IMAGE te
ID en
ARTICLE. n
sig
ID de
ARTICLE. ce
ien
ID sc
ARTICLE.
ID
ARTICLE.
CM
S
BD
D
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
121. 4. FRONT-END & BACK-END
C. Site dynamiques
CATEGORIES
CATEG.
CATEG.
e
êt
ARTICLES
TITRE
u
no
Req CH
?
TEXTE ch IFF
RE
te WE S
BS
OC
rt IAL
IMAGE te
ID en VIR
PA AL
ARTICLE. RT
n IC
ig IPA
es CO
TIF
ID d MM
. 2.
ARTICLE. ce 0
n
ID s cie
ARTICLE.
ID
ARTICLE.
CM
S
BD
D
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
122. 4. FRONT-END & BACK-END
C. Site dynamiques
Exemple de site dynamique : un BLOG
CATEGORIES
CATEG.
CATEG.
e
êt
ARTICLES
TITRE
u
no
Req CH
?
TEXTE ch IFF
RE
te WE S
BS
OC
rt IAL
IMAGE te
ID en VIR
PA AL
ARTICLE. RT
n IC
ig IPA
es CO
TIF
ID d MM
. 2.
ARTICLE. ce 0
n
ID s cie
ARTICLE.
ID
ARTICLE.
CM
S
BD
D
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
123. 4. FRONT-END & BACK-END
C. Site dynamiques
CATEGORIES
CATEG.
CATEG.
e
êt
ARTICLES
TITRE
u
no
Req CH
?
TEXTE ch IFF
RE
te WE S
BS
OC
rt IAL
IMAGE te
ID en VIR
PA AL
ARTICLE. RT
n IC
ig IPA
es CO
TIF
ID d MM
. 2.
ARTICLE. ce 0
n
ID s cie
ARTICLE.
ID
ARTICLE.
CM
S
BD
D
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
124. 4. FRONT-END & BACK-END
C. Site dynamiques
CATEGORIES
CATEG.
CATEG.
e
êt
ARTICLES
TITRE
u
no
Req CH
?
TEXTE ch IFF
RE
te WE S
BS
OC
rt IAL
IMAGE te
ID en VIR
PA AL
ARTICLE. RT
n IC
ig IPA
es CO
TIF
ID d MM
. 2.
ARTICLE. ce 0
n
ID s cie
ARTICLE.
ID
ARTICLE.
CM AR
IT
S B
GA
IT
BAR
GA
BD
D
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
125. 4. FRONT-END & BACK-END
C. Site dynamiques
CATEGORIES
CATEG.
CATEG.
e
êt
ARTICLES
TITRE
u
no
Req CH
?
TEXTE ch IFF
RE
te WE S
BS
OC
rt IAL
IMAGE te
ID en VIR
PA AL
ARTICLE. RT
n IC
ig IPA
es CO
TIF
ID d MM
. 2.
ARTICLE. ce 0
n
ID s cie
ARTICLE.
ID
ARTICLE.
CM AR
IT
S B
GA
IT
BAR
GA
BD
D
MO
TE
UR
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
126. 4. FRONT-END & BACK-END
C. Site dynamiques
CATEGORIES
Un site “dynamique”
= chaque page est CATEG.
générée par un moteur
CATEG.
e
êt
ARTICLES
TITRE
u
no
Req CH
?
TEXTE ch IFF
RE
te WE S
BS
OC
rt IAL
IMAGE te
ID en VIR
PA AL
ARTICLE. RT
n IC
ig IPA
es CO
TIF
ID d MM
. 2.
ARTICLE. ce 0
n
ID s cie
ARTICLE.
ID
ARTICLE.
CM AR
IT
S B
GA
IT
BAR
GA
BD
D
EB
MO W
TE E
UR G
PA
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
127. 4. FRONT-END & BACK-END
C. Site dynamiques
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
128. 4. FRONT-END & BACK-END
C. Site dynamiques
Les systèmes de publication permettent un travail collaboratif
dont les membres, webmaster inclus, doivent connaître le
balisage HTML.
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
129. 4. FRONT-END & BACK-END
C. Site dynamiques
Les systèmes de publication permettent un travail collaboratif
dont les membres, webmaster inclus, doivent connaître le
balisage HTML.
Les systèmes de CMS. sont variés et utilisent des technologies
différentes (PHP/MySQL, .Net, J2EE, etc.)
Quelques exemples : Typo3, SPIP, Joomla, Drupal, WordPress...
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
130. 5. DESIGN
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
131. 5. DESIGN
A. Définition
Le design pour le web (web design au sens large) est un
processus qui suit une méthodologie pour assurer une
expérience utilisateur optimale. Il amène les designers à
développer une esthétique nouvelle de l’information, des
opérations de pensée et de l’interaction.
Au sens restreint, le web design n’est que l’opération
d’intégration visant à implémenter un ensemble de spécifications
(techniques, graphiques et d’interaction). On parle dans ce cas de
web authoring.
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
132. 5. DESIGN
B. Processus
surface
squelette
tactique
structure
strategie
périmètre fonctionnel
stratégie
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
133. 5. DESIGN
B. Processus
Surface : rassemblons tout. Quelle
est l’apparence du produit fini ?
Squellette : rendons les choses
concrêtes. Quels composants vont
être à la disposition des
utilisateurs ?
Structure : rassemblons les
briques. Comment les différents
éléments vont-ils se comporter et
vivre ensemble ?
Périmètre : transformons la
stratégie en recommandation.
Quelles sont les fonctionnalités ?
Strategie : que voulons-nous
retirer du site ? Quel sont les
besoins des utilisateurs ?
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
134. The Elements of User Experience Jesse James G
jjg@j
A basic duality: The Web was originally conceived as a hypertextual information space; 30 March
5. DESIGN
but the development of increasingly sophisticated front- and back-end technologies has
fostered its use as a remote software interface. This dual nature has led to much confusion,
as user experience practitioners have attempted to adapt their terminology to cases beyond
B. Processus
the scope of its original application. The goal of this document is to define some of these
terms within their appropriate contexts, and to clarify the underlying relationships among
these various elements.
Web as software interface Concrete Completion Web as hypertext s
Visual Design: visual treatment of text
Visual Design: graphic treatment of interface
elements (the "look" in "look-and-feel") Visual Design graphic page elements and navigation
components
Interface Design: as in traditional HCI: Navigation Design: design of interface
design of interface elements to facilitate elements to facilitate the user's movem
user interaction with functionality
Interface Design Navigation Design through the information architecture
Information Design: in the Tuftean sense:
designing the presentation of information Information Design Information Design: in the Tuftean sen
designing the presentation of informat
to facilitate understanding Interface Système
to facilitate understanding
applicative
Interaction Design: development of Interaction Information hypertexte
Information Architecture: structural de
time
application flows to facilitate user tasks,
defining how the user interacts with
Design Architecture of the information space to facilitate
intuitive access to content
site functionality
Functional Specifications: "feature set":
detailed descriptions of functionality the site
Functional Content Content Requirements: definition of
content elements required in the site
must include in order to meet user needs Specifications Requirements in order to meet user needs
User Needs: externally derived goals User Needs: externally derived goals
for the site; identified through user research,
ethno/techno/psychographics, etc. User Needs for the site; identified through user res
ethno/techno/psychographics, etc.
Site Objectives: business, creative, or other
internally derived goals for the site Site Objectives Site Objectives: business, creative, or
internally derived goals for the site
task-oriented Abstract Conception information-ori
This picture is incomplete: The model outlined here does not account for secondary considerations (such as those arising during technical or content development)
that may influence decisions during user experience development. Also, this model does not describe a development process, nor does it define roles within a
user experience development team. Rather, it seeks to define the key considerations that go into the development of user experience on the Web today.
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
135. 6. ADOBE DREAMWEAVER
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
136. 6. ADOBE DREAMWEAVER
A. Précautions
DW ne peut être un outil de mise en page efficace (HTML
visuel) pour novice : la séparation Développeur/Designer
est trompeuse
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
137. 6. ADOBE DREAMWEAVER
B. Web authoring
DW peut être utilisé dans les contexte d’authoring web front et back
En front :
Outil de développement de gabarits HTML/CSS/Javascript en vue d’une
exploitation dynamique : autocomplétion efficace pour XHTML et
CSS
Outil de validation XHTML, Outil de transition HTML>XHTML
En back :
Outil de développement pour PHP, ASP, Coldfusion, JSP,...
Simplification de l’accès aux bases de données.
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
138. 6. ADOBE DREAMWEAVER
C. Prototypage
DW peut être utilisé dans les contextes de prototypage à
base de wireframes.
Nativement, il garantie la faisabilité de la phase
via le XHTML et l’utilisation de wireframe comme base
visuelle
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne