MMI Web Design P1
-
Upload
david-raichman -
Category
Design
-
view
1.201 -
download
1
Transcript of MMI Web Design P1
![Page 1: MMI Web Design P1](https://reader030.fdocument.pub/reader030/viewer/2022012903/55d560f7bb61eb37038b46d4/html5/thumbnails/1.jpg)
David Raichman - Senior UX Designer @ OgilvyInteractive
WEB DESIGNMaster 2 MMI | Université Panthéon - Sorbonne
Octobre 2009 : Partie 1/4
![Page 2: MMI Web Design P1](https://reader030.fdocument.pub/reader030/viewer/2022012903/55d560f7bb61eb37038b46d4/html5/thumbnails/2.jpg)
Web Design - Master 2 MMI Université Panthéon - Sorbonne
1. PRÉSENTATION DU COURS
![Page 3: MMI Web Design P1](https://reader030.fdocument.pub/reader030/viewer/2022012903/55d560f7bb61eb37038b46d4/html5/thumbnails/3.jpg)
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
1. PRÉSENTATION DU COURSA. 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
![Page 4: MMI Web Design P1](https://reader030.fdocument.pub/reader030/viewer/2022012903/55d560f7bb61eb37038b46d4/html5/thumbnails/4.jpg)
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
1. PRÉSENTATION DU COURSB. Enjeux et contextes
‣Industrialisation du web
‣Globalisation
‣Conseil et vision stratégique
‣Design centré sur l’utilisateur
‣Progression technologique
![Page 5: MMI Web Design P1](https://reader030.fdocument.pub/reader030/viewer/2022012903/55d560f7bb61eb37038b46d4/html5/thumbnails/5.jpg)
Web Design - Master 2 MMI Université Panthéon - Sorbonne
2. FONDAMENTAUX DU WEB
![Page 6: MMI Web Design P1](https://reader030.fdocument.pub/reader030/viewer/2022012903/55d560f7bb61eb37038b46d4/html5/thumbnails/6.jpg)
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
2. FONDAMENTAUX DU WEBA. (R)évolutions
1995
web 1.0
HTML
images
javascript
![Page 7: MMI Web Design P1](https://reader030.fdocument.pub/reader030/viewer/2022012903/55d560f7bb61eb37038b46d4/html5/thumbnails/7.jpg)
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
2. FONDAMENTAUX DU WEBA. (R)évolutions
1995
web 1.0
HTML
images
javascripthttp://www.hec.fr
![Page 8: MMI Web Design P1](https://reader030.fdocument.pub/reader030/viewer/2022012903/55d560f7bb61eb37038b46d4/html5/thumbnails/8.jpg)
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
2. FONDAMENTAUX DU WEBA. (R)évolutions
1995
web 1.0
HTML
images
javascript
![Page 9: MMI Web Design P1](https://reader030.fdocument.pub/reader030/viewer/2022012903/55d560f7bb61eb37038b46d4/html5/thumbnails/9.jpg)
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
2. FONDAMENTAUX DU WEBA. (R)évolutions
1995
web 1.0
HTML
images
javascript
1997 - 98
web dynamique
ASP, PHP
panier, session
transaction, sécurisation
![Page 10: MMI Web Design P1](https://reader030.fdocument.pub/reader030/viewer/2022012903/55d560f7bb61eb37038b46d4/html5/thumbnails/10.jpg)
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
2. FONDAMENTAUX DU WEBA. (R)évolutions
“multimedia”
animation,
Shockwave Flash
QuickTime, son
bannières
1995
web 1.0
HTML
images
javascript
1997 - 98
web dynamique
ASP, PHP
panier, session
transaction, sécurisation
![Page 11: MMI Web Design P1](https://reader030.fdocument.pub/reader030/viewer/2022012903/55d560f7bb61eb37038b46d4/html5/thumbnails/11.jpg)
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
2. FONDAMENTAUX DU WEBA. (R)évolutions
“multimedia”
animation,
Shockwave Flash
QuickTime, son
bannières
1995
web 1.0
HTML
images
javascript
1997 - 98
web dynamique
ASP, PHP
panier, session
transaction, sécurisation
![Page 12: MMI Web Design P1](https://reader030.fdocument.pub/reader030/viewer/2022012903/55d560f7bb61eb37038b46d4/html5/thumbnails/12.jpg)
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
2. FONDAMENTAUX DU WEBA. (R)évolutions
“multimedia”
animation,
Shockwave Flash
QuickTime, son
bannières
1995
web 1.0
HTML
images
javascript
1997 - 98
web dynamique
ASP, PHP
panier, session
transaction, sécurisation
![Page 13: MMI Web Design P1](https://reader030.fdocument.pub/reader030/viewer/2022012903/55d560f7bb61eb37038b46d4/html5/thumbnails/13.jpg)
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
2. FONDAMENTAUX DU WEBA. (R)évolutions
1995
web 1.0
HTML
images
javascript
1997 - 98 2000
web dynamique
ASP, PHP
panier, session
transaction, sécurisation
BULLE INTERNET
Transaction vs Information
“multimedia”
animation,
Shockwave Flash
QuickTime, son
bannières
![Page 14: MMI Web Design P1](https://reader030.fdocument.pub/reader030/viewer/2022012903/55d560f7bb61eb37038b46d4/html5/thumbnails/14.jpg)
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
2. FONDAMENTAUX DU WEBA. (R)évolutions
1995
web 1.0
HTML
images
javascript
1997 - 98 2000 - 2004
web dynamique
ASP, PHP
panier, session
transaction, sécurisation
web socialW3C
standards,
web sémantique,
XML, XHTML, CSS,
Blogs
“multimedia”
animation,
Shockwave Flash
QuickTime, son
bannières
![Page 15: MMI Web Design P1](https://reader030.fdocument.pub/reader030/viewer/2022012903/55d560f7bb61eb37038b46d4/html5/thumbnails/15.jpg)
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
2. FONDAMENTAUX DU WEBA. (R)évolutions
1995
web 1.0
HTML
images
javascript
1997 - 98 2004...2008
web dynamique
ASP, PHP
panier, session
transaction, sécurisation
web 2.0“multimedia”
animation,
Shockwave Flash
QuickTime, son
bannières
![Page 16: MMI Web Design P1](https://reader030.fdocument.pub/reader030/viewer/2022012903/55d560f7bb61eb37038b46d4/html5/thumbnails/16.jpg)
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
2. FONDAMENTAUX DU WEBA. (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
![Page 17: MMI Web Design P1](https://reader030.fdocument.pub/reader030/viewer/2022012903/55d560f7bb61eb37038b46d4/html5/thumbnails/17.jpg)
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
1995
web 1.0
HTML
images
javascript
1997 - 98 2004...2008
web dynamique
ASP, PHP
panier, session
transaction, sécurisation
web 2.0
W3C, interopérabilité
XHTML, CSS
Blogs, RSS
“multimedia”
animation,
Shockwave Flash
QuickTime, son
bannières
2. FONDAMENTAUX DU WEBA. (R)évolutions
![Page 18: MMI Web Design P1](https://reader030.fdocument.pub/reader030/viewer/2022012903/55d560f7bb61eb37038b46d4/html5/thumbnails/18.jpg)
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
1995
web 1.0
HTML
images
javascript
1997 - 98 2004...2008
web dynamique
ASP, PHP
panier, session
transaction, sécurisation
web 2.0
W3C, interopérabilité
XHTML, CSS
Blogs, RSS
“multimedia”
animation,
Shockwave Flash
QuickTime, son
bannières
2. FONDAMENTAUX DU WEBA. (R)évolutions
RIA
Ajax, Flex
cartographie,
partage de media
API
![Page 19: MMI Web Design P1](https://reader030.fdocument.pub/reader030/viewer/2022012903/55d560f7bb61eb37038b46d4/html5/thumbnails/19.jpg)
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
1995
web 1.0
HTML
images
javascript
1997 - 98 2004...2008
web dynamique
ASP, PHP
panier, session
transaction, sécurisation
web 2.0
W3C, interopérabilité
XHTML, CSS
Blogs, RSS
“multimedia”
animation,
Shockwave Flash
QuickTime, son
bannières
2. FONDAMENTAUX DU WEBA. (R)évolutions
RIA
Ajax, Flex
cartographie,
partage de media
API
![Page 20: MMI Web Design P1](https://reader030.fdocument.pub/reader030/viewer/2022012903/55d560f7bb61eb37038b46d4/html5/thumbnails/20.jpg)
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
1995
web 1.0
HTML
images
javascript
1997 - 98 2004...2008
web dynamique
ASP, PHP
panier, session
transaction, sécurisation
web 2.0
W3C, interopérabilité
XHTML, CSS
Blogs, RSS
“multimedia”
animation,
Shockwave Flash
QuickTime, son
bannières
2. FONDAMENTAUX DU WEBA. (R)évolutions
RIA
Ajax, Flex
cartographie,
partage de media
API
![Page 21: MMI Web Design P1](https://reader030.fdocument.pub/reader030/viewer/2022012903/55d560f7bb61eb37038b46d4/html5/thumbnails/21.jpg)
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
1995
web 1.0
HTML
images
javascript
1997 - 98 2004...2008
web dynamique
ASP, PHP
panier, session
transaction, sécurisation
web 2.0
W3C, interopérabilité
XHTML, CSS
Blogs, RSS
“multimedia”
animation,
Shockwave Flash
QuickTime, son
bannières
2. FONDAMENTAUX DU WEBA. (R)évolutions
RIA
Ajax, Flex
cartographie,
partage de media
API
RDA, RMA
Adobe AIR, Flex,
SDK Iphone
Objets web-connectés
![Page 22: MMI Web Design P1](https://reader030.fdocument.pub/reader030/viewer/2022012903/55d560f7bb61eb37038b46d4/html5/thumbnails/22.jpg)
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
1995
web 1.0
HTML
images
javascript
1997 - 98 2004...2008
web dynamique
ASP, PHP
panier, session
transaction, sécurisation
web 2.0
W3C, interopérabilité
XHTML, CSS
Blogs, RSS
“multimedia”
animation,
Shockwave Flash
QuickTime, son
bannières
2. FONDAMENTAUX DU WEBA. (R)évolutions
RIA
Ajax, Flex
cartographie,
partage de media
API
RDA, RMA
Adobe AIR, Flex,
SDK Iphone
Objets web-connectés
![Page 23: MMI Web Design P1](https://reader030.fdocument.pub/reader030/viewer/2022012903/55d560f7bb61eb37038b46d4/html5/thumbnails/23.jpg)
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
1995
web 1.0
HTML
images
javascript
1997 - 98 2004...2008
web dynamique
ASP, PHP
panier, session
transaction, sécurisation
web 2.0
W3C, interopérabilité
XHTML, CSS
Blogs, RSS
“multimedia”
animation,
Shockwave Flash
QuickTime, son
bannières
2. FONDAMENTAUX DU WEBA. (R)évolutions
RIA
Ajax, Flex
cartographie,
partage de media
API
RDA, RMA
Adobe AIR, Flex,
SDK Iphone
Objets web-connectés
![Page 24: MMI Web Design P1](https://reader030.fdocument.pub/reader030/viewer/2022012903/55d560f7bb61eb37038b46d4/html5/thumbnails/24.jpg)
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
1995
web 1.0
HTML
images
javascript
1997 - 98 2004...2008
web dynamique
ASP, PHP
panier, session
transaction, sécurisation
web 2.0
W3C, interopérabilité
XHTML, CSS
Blogs, RSS
“multimedia”
animation,
Shockwave Flash
QuickTime, son
bannières
2. FONDAMENTAUX DU WEBA. (R)évolutions
RIA
Ajax, Flex
cartographie,
partage de media
API
RDA, RMA
Adobe AIR, Flex,
SDK Iphone
Objets web-connectés
2009...
web2
monde et environnement
physique
temps-réel
intelligence collective
métadonnées
cloud computing
RSS Cloud
PubSubHubBub
![Page 25: MMI Web Design P1](https://reader030.fdocument.pub/reader030/viewer/2022012903/55d560f7bb61eb37038b46d4/html5/thumbnails/25.jpg)
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
1995
web 1.0
HTML
images
javascript
1997 - 98 2004...2008
web dynamique
ASP, PHP
panier, session
transaction, sécurisation
web 2.0
W3C, interopérabilité
XHTML, CSS
Blogs, RSS
“multimedia”
animation,
Shockwave Flash
QuickTime, son
bannières
2. FONDAMENTAUX DU WEBA. (R)évolutions
RIA
Ajax, Flex
cartographie,
partage de media
API
RDA, RMA
Adobe AIR, Flex,
SDK Iphone
Objets web-connectés
2009...
web2
monde et environnement
physique
temps-réel
intelligence collective
métadonnées
cloud computing
RSS Cloud
PubSubHubBub
![Page 26: MMI Web Design P1](https://reader030.fdocument.pub/reader030/viewer/2022012903/55d560f7bb61eb37038b46d4/html5/thumbnails/26.jpg)
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
1995
web 1.0
HTML
images
javascript
1997 - 98 2004...2008
web dynamique
ASP, PHP
panier, session
transaction, sécurisation
web 2.0
W3C, interopérabilité
XHTML, CSS
Blogs, RSS
“multimedia”
animation,
Shockwave Flash
QuickTime, son
bannières
2. FONDAMENTAUX DU WEBA. (R)évolutions
RIA
Ajax, Flex
cartographie,
partage de media
API
RDA, RMA
Adobe AIR, Flex,
SDK Iphone
Objets web-connectés
2009...
web2
monde et environnement
physique
temps-réel
intelligence collective
métadonnées
cloud computing
RSS Cloud
PubSubHubBub
![Page 27: MMI Web Design P1](https://reader030.fdocument.pub/reader030/viewer/2022012903/55d560f7bb61eb37038b46d4/html5/thumbnails/27.jpg)
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
1995
web 1.0
HTML
images
javascript
1997 - 98 2004...2008
web dynamique
ASP, PHP
panier, session
transaction, sécurisation
web 2.0
W3C, interopérabilité
XHTML, CSS
Blogs, RSS
“multimedia”
animation,
Shockwave Flash
QuickTime, son
bannières
2. FONDAMENTAUX DU WEBA. (R)évolutions
RIA
Ajax, Flex
cartographie,
partage de media
API
RDA, RMA
Adobe AIR, Flex,
SDK Iphone
Objets web-connectés
2009...
web2
monde et environnement
physique
temps-réel
intelligence collective
métadonnées
cloud computing
RSS Cloud
PubSubHubBub
![Page 28: MMI Web Design P1](https://reader030.fdocument.pub/reader030/viewer/2022012903/55d560f7bb61eb37038b46d4/html5/thumbnails/28.jpg)
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
1995
web 1.0
HTML
images
javascript
1997 - 98 2004...2008
web dynamique
ASP, PHP
panier, session
transaction, sécurisation
web 2.0
W3C, interopérabilité
XHTML, CSS
Blogs, RSS
“multimedia”
animation,
Shockwave Flash
QuickTime, son
bannières
2. FONDAMENTAUX DU WEBA. (R)évolutions
RIA
Ajax, Flex
cartographie,
partage de media
API
RDA, RMA
Adobe AIR, Flex,
SDK Iphone
Objets web-connectés
2009...
web2
monde et environnement
physique
temps-réel
intelligence collective
métadonnées
cloud computing
RSS Cloud
PubSubHubBub
![Page 29: MMI Web Design P1](https://reader030.fdocument.pub/reader030/viewer/2022012903/55d560f7bb61eb37038b46d4/html5/thumbnails/29.jpg)
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
2. FONDAMENTAUX DU WEBB. Typologie et positionnement
![Page 30: MMI Web Design P1](https://reader030.fdocument.pub/reader030/viewer/2022012903/55d560f7bb61eb37038b46d4/html5/thumbnails/30.jpg)
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
2. FONDAMENTAUX DU WEBB. Typologie et positionnement
Une perpective
pour comprendre
le web d’aujourd’hui
![Page 31: MMI Web Design P1](https://reader030.fdocument.pub/reader030/viewer/2022012903/55d560f7bb61eb37038b46d4/html5/thumbnails/31.jpg)
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
2. FONDAMENTAUX DU WEBB. Typologie et positionnement
![Page 32: MMI Web Design P1](https://reader030.fdocument.pub/reader030/viewer/2022012903/55d560f7bb61eb37038b46d4/html5/thumbnails/32.jpg)
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
2. FONDAMENTAUX DU WEBB. Typologie et positionnement
Informationnel
vs
Audiovisuel
![Page 33: MMI Web Design P1](https://reader030.fdocument.pub/reader030/viewer/2022012903/55d560f7bb61eb37038b46d4/html5/thumbnails/33.jpg)
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
2. FONDAMENTAUX DU WEBB. Typologie et positionnement
![Page 34: MMI Web Design P1](https://reader030.fdocument.pub/reader030/viewer/2022012903/55d560f7bb61eb37038b46d4/html5/thumbnails/34.jpg)
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
2. FONDAMENTAUX DU WEBB. Typologie et positionnement
![Page 35: MMI Web Design P1](https://reader030.fdocument.pub/reader030/viewer/2022012903/55d560f7bb61eb37038b46d4/html5/thumbnails/35.jpg)
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
2. FONDAMENTAUX DU WEBB. Typologie et positionnement
![Page 36: MMI Web Design P1](https://reader030.fdocument.pub/reader030/viewer/2022012903/55d560f7bb61eb37038b46d4/html5/thumbnails/36.jpg)
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
2. FONDAMENTAUX DU WEBB. Typologie et positionnement
![Page 37: MMI Web Design P1](https://reader030.fdocument.pub/reader030/viewer/2022012903/55d560f7bb61eb37038b46d4/html5/thumbnails/37.jpg)
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
2. FONDAMENTAUX DU WEBB. Typologie et positionnement
![Page 38: MMI Web Design P1](https://reader030.fdocument.pub/reader030/viewer/2022012903/55d560f7bb61eb37038b46d4/html5/thumbnails/38.jpg)
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
2. FONDAMENTAUX DU WEBB. Typologie et positionnement
![Page 39: MMI Web Design P1](https://reader030.fdocument.pub/reader030/viewer/2022012903/55d560f7bb61eb37038b46d4/html5/thumbnails/39.jpg)
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
2. FONDAMENTAUX DU WEBB. Typologie et positionnement
![Page 40: MMI Web Design P1](https://reader030.fdocument.pub/reader030/viewer/2022012903/55d560f7bb61eb37038b46d4/html5/thumbnails/40.jpg)
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
2. FONDAMENTAUX DU WEBB. Typologie et positionnement
![Page 41: MMI Web Design P1](https://reader030.fdocument.pub/reader030/viewer/2022012903/55d560f7bb61eb37038b46d4/html5/thumbnails/41.jpg)
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
2. FONDAMENTAUX DU WEBB. Typologie et positionnement
![Page 42: MMI Web Design P1](https://reader030.fdocument.pub/reader030/viewer/2022012903/55d560f7bb61eb37038b46d4/html5/thumbnails/42.jpg)
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
2. FONDAMENTAUX DU WEBB. Typologie et positionnement
![Page 43: MMI Web Design P1](https://reader030.fdocument.pub/reader030/viewer/2022012903/55d560f7bb61eb37038b46d4/html5/thumbnails/43.jpg)
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
2. FONDAMENTAUX DU WEBB. Typologie et positionnement
![Page 44: MMI Web Design P1](https://reader030.fdocument.pub/reader030/viewer/2022012903/55d560f7bb61eb37038b46d4/html5/thumbnails/44.jpg)
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
2. FONDAMENTAUX DU WEBB. Typologie et positionnement
![Page 45: MMI Web Design P1](https://reader030.fdocument.pub/reader030/viewer/2022012903/55d560f7bb61eb37038b46d4/html5/thumbnails/45.jpg)
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
2. FONDAMENTAUX DU WEBB. Typologie et positionnement
audiovisuel informationnel
applicatif
Desktop Itunes
![Page 46: MMI Web Design P1](https://reader030.fdocument.pub/reader030/viewer/2022012903/55d560f7bb61eb37038b46d4/html5/thumbnails/46.jpg)
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
2. FONDAMENTAUX DU WEBB. Typologie et positionnement
audiovisuel informationnel
applicatif
Desktop Itunes
RIA Rich Internet Application
![Page 47: MMI Web Design P1](https://reader030.fdocument.pub/reader030/viewer/2022012903/55d560f7bb61eb37038b46d4/html5/thumbnails/47.jpg)
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
2. FONDAMENTAUX DU WEBB. Typologie et positionnement
audiovisuel informationnel
applicatif
Desktop Itunes
RIA Rich Internet Application
![Page 48: MMI Web Design P1](https://reader030.fdocument.pub/reader030/viewer/2022012903/55d560f7bb61eb37038b46d4/html5/thumbnails/48.jpg)
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
2. FONDAMENTAUX DU WEBB. Typologie et positionnement
audiovisuel informationnel
applicatif
Desktop Itunes
RIA Rich Internet Application
![Page 49: MMI Web Design P1](https://reader030.fdocument.pub/reader030/viewer/2022012903/55d560f7bb61eb37038b46d4/html5/thumbnails/49.jpg)
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
2. FONDAMENTAUX DU WEBB. Typologie et positionnement
audiovisuel informationnel
applicatif
Desktop Itunes
RIA Rich Internet Application
![Page 50: MMI Web Design P1](https://reader030.fdocument.pub/reader030/viewer/2022012903/55d560f7bb61eb37038b46d4/html5/thumbnails/50.jpg)
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
2. FONDAMENTAUX DU WEBB. Typologie et positionnement
audiovisuel informationnel
applicatif
Desktop Itunes
RIA Rich Internet Application
![Page 51: MMI Web Design P1](https://reader030.fdocument.pub/reader030/viewer/2022012903/55d560f7bb61eb37038b46d4/html5/thumbnails/51.jpg)
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
2. FONDAMENTAUX DU WEBB. Typologie et positionnement
audiovisuel informationnel
applicatif
Desktop Itunes
RIA Rich Internet Application
RDA Rich Desktop Application
![Page 52: MMI Web Design P1](https://reader030.fdocument.pub/reader030/viewer/2022012903/55d560f7bb61eb37038b46d4/html5/thumbnails/52.jpg)
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
2. FONDAMENTAUX DU WEBB. Typologie et positionnement
audiovisuel informationnel
applicatif
Desktop Itunes
RIA Rich Internet Application
RDA Rich Desktop Application
![Page 53: MMI Web Design P1](https://reader030.fdocument.pub/reader030/viewer/2022012903/55d560f7bb61eb37038b46d4/html5/thumbnails/53.jpg)
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
2. FONDAMENTAUX DU WEBB. Typologie et positionnement
audiovisuel informationnel
applicatif
Desktop Itunes
RIA Rich Internet Application
RDA Rich Desktop Application
![Page 54: MMI Web Design P1](https://reader030.fdocument.pub/reader030/viewer/2022012903/55d560f7bb61eb37038b46d4/html5/thumbnails/54.jpg)
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
2. FONDAMENTAUX DU WEBB. Typologie et positionnement
![Page 55: MMI Web Design P1](https://reader030.fdocument.pub/reader030/viewer/2022012903/55d560f7bb61eb37038b46d4/html5/thumbnails/55.jpg)
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
2. FONDAMENTAUX DU WEBB. Typologie et positionnement
![Page 56: MMI Web Design P1](https://reader030.fdocument.pub/reader030/viewer/2022012903/55d560f7bb61eb37038b46d4/html5/thumbnails/56.jpg)
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
2. FONDAMENTAUX DU WEBB. Typologie et positionnement
![Page 57: MMI Web Design P1](https://reader030.fdocument.pub/reader030/viewer/2022012903/55d560f7bb61eb37038b46d4/html5/thumbnails/57.jpg)
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
2. FONDAMENTAUX DU WEBB. Typologie et positionnement
![Page 58: MMI Web Design P1](https://reader030.fdocument.pub/reader030/viewer/2022012903/55d560f7bb61eb37038b46d4/html5/thumbnails/58.jpg)
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
2. FONDAMENTAUX DU WEBB. Typologie et positionnement
![Page 59: MMI Web Design P1](https://reader030.fdocument.pub/reader030/viewer/2022012903/55d560f7bb61eb37038b46d4/html5/thumbnails/59.jpg)
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
2. FONDAMENTAUX DU WEBB. Typologie et positionnement
![Page 60: MMI Web Design P1](https://reader030.fdocument.pub/reader030/viewer/2022012903/55d560f7bb61eb37038b46d4/html5/thumbnails/60.jpg)
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
2. FONDAMENTAUX DU WEBB. Typologie et positionnement
![Page 61: MMI Web Design P1](https://reader030.fdocument.pub/reader030/viewer/2022012903/55d560f7bb61eb37038b46d4/html5/thumbnails/61.jpg)
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
2. FONDAMENTAUX DU WEBB. Typologie et positionnement
t a g s u r f
![Page 62: MMI Web Design P1](https://reader030.fdocument.pub/reader030/viewer/2022012903/55d560f7bb61eb37038b46d4/html5/thumbnails/62.jpg)
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
2. FONDAMENTAUX DU WEBB. Typologie et positionnement
![Page 63: MMI Web Design P1](https://reader030.fdocument.pub/reader030/viewer/2022012903/55d560f7bb61eb37038b46d4/html5/thumbnails/63.jpg)
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
2. FONDAMENTAUX DU WEBB. Typologie et positionnement
V i r t u a l M e
![Page 64: MMI Web Design P1](https://reader030.fdocument.pub/reader030/viewer/2022012903/55d560f7bb61eb37038b46d4/html5/thumbnails/64.jpg)
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
2. FONDAMENTAUX DU WEBB. Typologie et positionnement
![Page 65: MMI Web Design P1](https://reader030.fdocument.pub/reader030/viewer/2022012903/55d560f7bb61eb37038b46d4/html5/thumbnails/65.jpg)
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
2. FONDAMENTAUX DU WEBB. Typologie et positionnement
![Page 66: MMI Web Design P1](https://reader030.fdocument.pub/reader030/viewer/2022012903/55d560f7bb61eb37038b46d4/html5/thumbnails/66.jpg)
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
2. FONDAMENTAUX DU WEBB. Typologie et positionnement
W o r l d o f W a r c r a f t
![Page 67: MMI Web Design P1](https://reader030.fdocument.pub/reader030/viewer/2022012903/55d560f7bb61eb37038b46d4/html5/thumbnails/67.jpg)
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
2. FONDAMENTAUX DU WEBB. Typologie et positionnement
![Page 68: MMI Web Design P1](https://reader030.fdocument.pub/reader030/viewer/2022012903/55d560f7bb61eb37038b46d4/html5/thumbnails/68.jpg)
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
2. FONDAMENTAUX DU WEBB. Typologie et positionnement
![Page 69: MMI Web Design P1](https://reader030.fdocument.pub/reader030/viewer/2022012903/55d560f7bb61eb37038b46d4/html5/thumbnails/69.jpg)
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
2. FONDAMENTAUX DU WEBB. Typologie et positionnement
informationcommunication
![Page 70: MMI Web Design P1](https://reader030.fdocument.pub/reader030/viewer/2022012903/55d560f7bb61eb37038b46d4/html5/thumbnails/70.jpg)
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
2. FONDAMENTAUX DU WEBB. Typologie et positionnement
informationcommunication
temps | horizontal espace|vertical
![Page 71: MMI Web Design P1](https://reader030.fdocument.pub/reader030/viewer/2022012903/55d560f7bb61eb37038b46d4/html5/thumbnails/71.jpg)
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
2. FONDAMENTAUX DU WEBB. Typologie et positionnement
informationcommunication
temps | horizontal espace|vertical
interactivité | immersion trouvabilité | émersion
![Page 72: MMI Web Design P1](https://reader030.fdocument.pub/reader030/viewer/2022012903/55d560f7bb61eb37038b46d4/html5/thumbnails/72.jpg)
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
2. FONDAMENTAUX DU WEBB. Typologie et positionnement
informationcommunication
temps | horizontal espace|vertical
forme ! fond ! fonctionforme = fond = fonction
interactivité | immersion trouvabilité | émersion
![Page 73: MMI Web Design P1](https://reader030.fdocument.pub/reader030/viewer/2022012903/55d560f7bb61eb37038b46d4/html5/thumbnails/73.jpg)
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
2. FONDAMENTAUX DU WEBB. Typologie et positionnement
informationcommunication
temps | horizontal espace|vertical
forme ! fond ! fonctionforme = fond = fonction
concret | pictural abstrait| textuel
interactivité | immersion trouvabilité | émersion
![Page 74: MMI Web Design P1](https://reader030.fdocument.pub/reader030/viewer/2022012903/55d560f7bb61eb37038b46d4/html5/thumbnails/74.jpg)
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
2. FONDAMENTAUX DU WEBC. Mise en perspective...
![Page 75: MMI Web Design P1](https://reader030.fdocument.pub/reader030/viewer/2022012903/55d560f7bb61eb37038b46d4/html5/thumbnails/75.jpg)
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
2. FONDAMENTAUX DU WEBC. Mise en perspective...
![Page 76: MMI Web Design P1](https://reader030.fdocument.pub/reader030/viewer/2022012903/55d560f7bb61eb37038b46d4/html5/thumbnails/76.jpg)
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
2. FONDAMENTAUX DU WEBC. Mise en perspective...
![Page 77: MMI Web Design P1](https://reader030.fdocument.pub/reader030/viewer/2022012903/55d560f7bb61eb37038b46d4/html5/thumbnails/77.jpg)
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
2. FONDAMENTAUX DU WEBD. Domaines technologiques
!"#$%&$'"() *+,%-./0$%++()
!11)$2/0$,
3('40%1567%-+('56/"0-('888
93!6:69$2;63('40%16!11)$2/0$%+
9*!6:69$2;6*+0(-+(06!11)$2/0$%+
<%2$/)
=-/+'/20$%++()
>)%?'@(A'
B"7)$2$0/$-(56C&056B%-0,%)$%888
D$).'56#%26$+0(-/20$,'
E("F6(+6)$?+(
G%+#('6&$-0"()'
9G!6:69$2;6G%7$)(6!11)$2/0$%+
!"#$%&''()*+,-).+,/,012345678,09()'38/:283;95<=:5()>,/,<<<
)78:-%*?@
()<=:5()'
AB<<<
A32:15C
2()>,/,<<<
![Page 78: MMI Web Design P1](https://reader030.fdocument.pub/reader030/viewer/2022012903/55d560f7bb61eb37038b46d4/html5/thumbnails/78.jpg)
Web Design - Master 2 MMI Université Panthéon - Sorbonne
3. FORMATS STRUCTURÉS
![Page 79: MMI Web Design P1](https://reader030.fdocument.pub/reader030/viewer/2022012903/55d560f7bb61eb37038b46d4/html5/thumbnails/79.jpg)
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
3. FORMATS STRUCTURÉSA. Fondements du web informationnel
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.
Format structuré = contenu (texte)
+ structure sémantique + structure hiérarchique
![Page 80: MMI Web Design P1](https://reader030.fdocument.pub/reader030/viewer/2022012903/55d560f7bb61eb37038b46d4/html5/thumbnails/80.jpg)
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
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.
3. FORMATS STRUCTURÉSA. Fondements du web informationnel
![Page 81: MMI Web Design P1](https://reader030.fdocument.pub/reader030/viewer/2022012903/55d560f7bb61eb37038b46d4/html5/thumbnails/81.jpg)
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
SG
ML
HTML
1986
{
3. FORMATS STRUCTURÉSA. Fondements du web informationnel
![Page 82: MMI Web Design P1](https://reader030.fdocument.pub/reader030/viewer/2022012903/55d560f7bb61eb37038b46d4/html5/thumbnails/82.jpg)
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
SG
ML
HTML 2.0
1986 1995
{
3. FORMATS STRUCTURÉSA. Fondements du web informationnel
![Page 83: MMI Web Design P1](https://reader030.fdocument.pub/reader030/viewer/2022012903/55d560f7bb61eb37038b46d4/html5/thumbnails/83.jpg)
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
HTML 2.0
1986 1995 1997
4.0{CSS 1.0
SG
ML
3. FORMATS STRUCTURÉSA. Fondements du web informationnel
![Page 84: MMI Web Design P1](https://reader030.fdocument.pub/reader030/viewer/2022012903/55d560f7bb61eb37038b46d4/html5/thumbnails/84.jpg)
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
HTML
XML 1.0
2.0
1986 1995 1997
4.0
1998
{CSS 1.0 CSS 2.0
SG
ML
3. FORMATS STRUCTURÉSA. Fondements du web informationnel
![Page 85: MMI Web Design P1](https://reader030.fdocument.pub/reader030/viewer/2022012903/55d560f7bb61eb37038b46d4/html5/thumbnails/85.jpg)
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
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.
3. FORMATS STRUCTURÉSB. Les apports du W3C
![Page 86: MMI Web Design P1](https://reader030.fdocument.pub/reader030/viewer/2022012903/55d560f7bb61eb37038b46d4/html5/thumbnails/86.jpg)
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
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>
3. FORMATS STRUCTURÉSB. Les apports du W3C
![Page 87: MMI Web Design P1](https://reader030.fdocument.pub/reader030/viewer/2022012903/55d560f7bb61eb37038b46d4/html5/thumbnails/87.jpg)
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
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>
3. FORMATS STRUCTURÉSB. Les apports du W3C
![Page 88: MMI Web Design P1](https://reader030.fdocument.pub/reader030/viewer/2022012903/55d560f7bb61eb37038b46d4/html5/thumbnails/88.jpg)
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
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.
3. FORMATS STRUCTURÉSB. Les apports du W3C
![Page 89: MMI Web Design P1](https://reader030.fdocument.pub/reader030/viewer/2022012903/55d560f7bb61eb37038b46d4/html5/thumbnails/89.jpg)
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
3. FORMATS STRUCTURÉSB. Les apports du W3C
![Page 90: MMI Web Design P1](https://reader030.fdocument.pub/reader030/viewer/2022012903/55d560f7bb61eb37038b46d4/html5/thumbnails/90.jpg)
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
3. FORMATS STRUCTURÉSB. Les apports du W3C
![Page 91: MMI Web Design P1](https://reader030.fdocument.pub/reader030/viewer/2022012903/55d560f7bb61eb37038b46d4/html5/thumbnails/91.jpg)
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
3. FORMATS STRUCTURÉSB. Les apports du W3C
![Page 92: MMI Web Design P1](https://reader030.fdocument.pub/reader030/viewer/2022012903/55d560f7bb61eb37038b46d4/html5/thumbnails/92.jpg)
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
3. FORMATS STRUCTURÉSB. Les apports du W3C
![Page 93: MMI Web Design P1](https://reader030.fdocument.pub/reader030/viewer/2022012903/55d560f7bb61eb37038b46d4/html5/thumbnails/93.jpg)
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
Plus d’exemples sur http://www.csszengarden.com
3. FORMATS STRUCTURÉSB. Les apports du W3C
![Page 94: MMI Web Design P1](https://reader030.fdocument.pub/reader030/viewer/2022012903/55d560f7bb61eb37038b46d4/html5/thumbnails/94.jpg)
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
HTML
XML 1.0
2.0
1986 1995 1997
4.0
1998
{CSS 1.0 CSS 2.0
SG
ML
3. FORMATS STRUCTURÉSB. Les apports du W3C
![Page 95: MMI Web Design P1](https://reader030.fdocument.pub/reader030/viewer/2022012903/55d560f7bb61eb37038b46d4/html5/thumbnails/95.jpg)
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
HTML
XML 1.0
2.0
1986 1995 1997
4.0
1998
{ {XHTML 1.0
WML
MathML
...
2000 - 2001
CSS 1.0 CSS 2.0
3. FORMATS STRUCTURÉSB. Les apports du W3C
![Page 96: MMI Web Design P1](https://reader030.fdocument.pub/reader030/viewer/2022012903/55d560f7bb61eb37038b46d4/html5/thumbnails/96.jpg)
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
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.
3. FORMATS STRUCTURÉSB. Les apports du W3C
![Page 97: MMI Web Design P1](https://reader030.fdocument.pub/reader030/viewer/2022012903/55d560f7bb61eb37038b46d4/html5/thumbnails/97.jpg)
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
XHTML 1.0 repose sur le fait qu’il existe deux catégories d’éléments structurant un document :
les éléments blocles éléments en ligne
élément bloc
élément en ligne
En-tête (header)
Modèle document XHTML
Corps (body)
3. FORMATS STRUCTURÉSB. Les apports du W3C
![Page 98: MMI Web Design P1](https://reader030.fdocument.pub/reader030/viewer/2022012903/55d560f7bb61eb37038b46d4/html5/thumbnails/98.jpg)
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
SG
ML
HTML
XML 1.0
2.0
1986 1995 1997
4.0
1998
{ {XHTML 1.0
WML
MathML
...
2000 - 2001
CSS 1.0 CSS 2.0
3. FORMATS STRUCTURÉSC. HTML 5 : un format naissant
![Page 99: MMI Web Design P1](https://reader030.fdocument.pub/reader030/viewer/2022012903/55d560f7bb61eb37038b46d4/html5/thumbnails/99.jpg)
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
HTML
XML 1.0
2.0
1986 1995 1997
4.0
1998
{ {XHTML 1.0
WML
MathML
...
2.0
2000 - 2001
CSS 1.0 CSS 2.0
2009...
XHTML 5
CSS 3.0
rétro-compatibilité HTML non assuréeS
GM
L3. FORMATS STRUCTURÉSC. HTML 5 : un format naissant
![Page 100: MMI Web Design P1](https://reader030.fdocument.pub/reader030/viewer/2022012903/55d560f7bb61eb37038b46d4/html5/thumbnails/100.jpg)
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
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étadataCe sont les éléments qui fixent la présentation du document en indiquant l’adresse de la feuille de style par exemple.
3. FORMATS STRUCTURÉSC. HTML 5 : un format naissant
![Page 101: MMI Web Design P1](https://reader030.fdocument.pub/reader030/viewer/2022012903/55d560f7bb61eb37038b46d4/html5/thumbnails/101.jpg)
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
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 contentCe sont les éléments qui sont le plus couramment utilisés dans le corps d’un document, par exemple les titres, les boutons...
3. FORMATS STRUCTURÉSC. HTML 5 : un format naissant
![Page 102: MMI Web Design P1](https://reader030.fdocument.pub/reader030/viewer/2022012903/55d560f7bb61eb37038b46d4/html5/thumbnails/102.jpg)
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
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
SectioningSous-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.
C. HTML 5 : un format naissant
3. FORMATS STRUCTURÉS
![Page 103: MMI Web Design P1](https://reader030.fdocument.pub/reader030/viewer/2022012903/55d560f7bb61eb37038b46d4/html5/thumbnails/103.jpg)
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
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
nav aside
footer
section
article
header
footer
Modèle document HTML 5
C. HTML 5 : un format naissant
3. FORMATS STRUCTURÉS
![Page 104: MMI Web Design P1](https://reader030.fdocument.pub/reader030/viewer/2022012903/55d560f7bb61eb37038b46d4/html5/thumbnails/104.jpg)
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
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
HeadingSous-ensemble des flow contents. Ce sont des contenus qui définissent la titraille d’un document.
C. HTML 5 : un format naissant
3. FORMATS STRUCTURÉS
![Page 105: MMI Web Design P1](https://reader030.fdocument.pub/reader030/viewer/2022012903/55d560f7bb61eb37038b46d4/html5/thumbnails/105.jpg)
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
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
PhrasingSous-ensemble des flow contents. Ce sont les éléments de texte du document ainsi que les éléments qui balisent le texte.
C. HTML 5 : un format naissant
3. FORMATS STRUCTURÉS
![Page 106: MMI Web Design P1](https://reader030.fdocument.pub/reader030/viewer/2022012903/55d560f7bb61eb37038b46d4/html5/thumbnails/106.jpg)
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
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
EmbedSous-ensemble des phrasing content. Ce sont les contenus qui importent des sources externes au document, comme mes vidéos.
C. HTML 5 : un format naissant
3. FORMATS STRUCTURÉS
![Page 107: MMI Web Design P1](https://reader030.fdocument.pub/reader030/viewer/2022012903/55d560f7bb61eb37038b46d4/html5/thumbnails/107.jpg)
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
C. HTML 5 : un format naissant
3. FORMATS STRUCTURÉS
to be continued...
![Page 108: MMI Web Design P1](https://reader030.fdocument.pub/reader030/viewer/2022012903/55d560f7bb61eb37038b46d4/html5/thumbnails/108.jpg)
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
4. FRONT-END & BACK-END
![Page 109: MMI Web Design P1](https://reader030.fdocument.pub/reader030/viewer/2022012903/55d560f7bb61eb37038b46d4/html5/thumbnails/109.jpg)
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
4. FRONT-END & BACK-ENDA. Fond, forme et fonction
FORME
FONCTION
FOND
webfront
![Page 110: MMI Web Design P1](https://reader030.fdocument.pub/reader030/viewer/2022012903/55d560f7bb61eb37038b46d4/html5/thumbnails/110.jpg)
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
4. FRONT-END & BACK-ENDA. Fond, forme et fonction
FORME
FONCTION
FONDCSS
Javascript
HTML
webfront
![Page 111: MMI Web Design P1](https://reader030.fdocument.pub/reader030/viewer/2022012903/55d560f7bb61eb37038b46d4/html5/thumbnails/111.jpg)
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
Un site “statique” = chaque page est codée “à la main” LIEN
LIEN
LIEN
4. FRONT-END & BACK-ENDB. Site statiques
![Page 112: MMI Web Design P1](https://reader030.fdocument.pub/reader030/viewer/2022012903/55d560f7bb61eb37038b46d4/html5/thumbnails/112.jpg)
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
4. FRONT-END & BACK-ENDB. Site statiques
LIEN
LIEN
LIEN
LIEN
LIEN
LIEN
Un site “statique” = chaque page est codée “à la main”
![Page 113: MMI Web Design P1](https://reader030.fdocument.pub/reader030/viewer/2022012903/55d560f7bb61eb37038b46d4/html5/thumbnails/113.jpg)
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
4. FRONT-END & BACK-ENDC. Site dynamiques
Exemple de site dynamique : un BLOG
![Page 114: MMI Web Design P1](https://reader030.fdocument.pub/reader030/viewer/2022012903/55d560f7bb61eb37038b46d4/html5/thumbnails/114.jpg)
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
4. FRONT-END & BACK-ENDC. Site dynamiques
Les coulisses d’un site dynamique
![Page 115: MMI Web Design P1](https://reader030.fdocument.pub/reader030/viewer/2022012903/55d560f7bb61eb37038b46d4/html5/thumbnails/115.jpg)
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
TITRE
TEXTE
IMAGE
AR
TIC
LES
4. FRONT-END & BACK-ENDC. Site dynamiques
![Page 116: MMI Web Design P1](https://reader030.fdocument.pub/reader030/viewer/2022012903/55d560f7bb61eb37038b46d4/html5/thumbnails/116.jpg)
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
4. FRONT-END & BACK-ENDC. Site dynamiques
TITRE
TEXTE
IMAGE
AR
TIC
LES
![Page 117: MMI Web Design P1](https://reader030.fdocument.pub/reader030/viewer/2022012903/55d560f7bb61eb37038b46d4/html5/thumbnails/117.jpg)
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
4. FRONT-END & BACK-ENDC. Site dynamiques
CATEG.
CA
TE
GO
RIE
S
TITRE
TEXTE
IMAGE
AR
TIC
LE
S
CATEG.
![Page 118: MMI Web Design P1](https://reader030.fdocument.pub/reader030/viewer/2022012903/55d560f7bb61eb37038b46d4/html5/thumbnails/118.jpg)
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
CATEG.
CA
TE
GO
RIE
S
TITRE
TEXTE
IMAGE
AR
TIC
LE
S
CMS
CATEG.
4. FRONT-END & BACK-ENDC. Site dynamiques
![Page 119: MMI Web Design P1](https://reader030.fdocument.pub/reader030/viewer/2022012903/55d560f7bb61eb37038b46d4/html5/thumbnails/119.jpg)
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
4. FRONT-END & BACK-ENDC. Site dynamiques
CATEG.
CA
TE
GO
RIE
S
TITRE
TEXTE
IMAGE
AR
TIC
LE
S
CMS
ARTICLE.
ARTICLE.
ARTICLE.
ARTICLE.
ID
ID
ID
ID
techno
entert
desig
n
scien
ce
CATEG.
![Page 120: MMI Web Design P1](https://reader030.fdocument.pub/reader030/viewer/2022012903/55d560f7bb61eb37038b46d4/html5/thumbnails/120.jpg)
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
4. FRONT-END & BACK-ENDC. Site dynamiques
CATEG.
CA
TE
GO
RIE
S
TITRE
TEXTE
IMAGE
AR
TIC
LE
S
CMS
ARTICLE.
ARTICLE.
ARTICLE.
ARTICLE.
ID
ID
ID
ID
techno
entert
desig
n
scien
ce
BDD
CATEG.
![Page 121: MMI Web Design P1](https://reader030.fdocument.pub/reader030/viewer/2022012903/55d560f7bb61eb37038b46d4/html5/thumbnails/121.jpg)
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
4. FRONT-END & BACK-ENDC. Site dynamiques
CATEG.
CA
TE
GO
RIE
S
TITRE
TEXTE
IMAGE
AR
TIC
LE
S
CMS
ARTICLE.
ARTICLE.
ARTICLE.
ARTICLE.
ID
ID
ID
ID
techno
entert
desig
n
science
BDD
CHIFFRESWEB SOCIAL
VIRALPARTICIPATIFCOMM. 2.0
Requêt
e
?
CATEG.
![Page 122: MMI Web Design P1](https://reader030.fdocument.pub/reader030/viewer/2022012903/55d560f7bb61eb37038b46d4/html5/thumbnails/122.jpg)
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
4. FRONT-END & BACK-ENDC. Site dynamiques
CATEG.
CA
TE
GO
RIE
S
TITRE
TEXTE
IMAGE
AR
TIC
LE
S
CMS
ARTICLE.
ARTICLE.
ARTICLE.
ARTICLE.
ID
ID
ID
ID
techno
entert
desig
n
science
BDD
CHIFFRESWEB SOCIAL
VIRALPARTICIPATIFCOMM. 2.0
Requêt
e
?
CATEG.
Exemple de site dynamique : un BLOG
![Page 123: MMI Web Design P1](https://reader030.fdocument.pub/reader030/viewer/2022012903/55d560f7bb61eb37038b46d4/html5/thumbnails/123.jpg)
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
4. FRONT-END & BACK-ENDC. Site dynamiques
CATEG.
CA
TE
GO
RIE
S
TITRE
TEXTE
IMAGE
AR
TIC
LE
S
CMS
ARTICLE.
ARTICLE.
ARTICLE.
ARTICLE.
ID
ID
ID
ID
techno
entert
desig
n
science
BDD
CHIFFRESWEB SOCIAL
VIRALPARTICIPATIFCOMM. 2.0
Requêt
e
?
CATEG.
![Page 124: MMI Web Design P1](https://reader030.fdocument.pub/reader030/viewer/2022012903/55d560f7bb61eb37038b46d4/html5/thumbnails/124.jpg)
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
4. FRONT-END & BACK-ENDC. Site dynamiques
CATEG.
CA
TE
GO
RIE
S
TITRE
TEXTE
IMAGE
AR
TIC
LE
S
CMS
ARTICLE.
ARTICLE.
ARTICLE.
ARTICLE.
ID
ID
ID
ID
techno
entert
desig
n
science
BDD
GABAR
IT
GABAR
IT
CHIFFRESWEB SOCIAL
VIRALPARTICIPATIFCOMM. 2.0
Requêt
e
?
CATEG.
![Page 125: MMI Web Design P1](https://reader030.fdocument.pub/reader030/viewer/2022012903/55d560f7bb61eb37038b46d4/html5/thumbnails/125.jpg)
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
4. FRONT-END & BACK-ENDC. Site dynamiques
CATEG.
CA
TE
GO
RIE
S
TITRE
TEXTE
IMAGE
AR
TIC
LE
S
CMS
ARTICLE.
ARTICLE.
ARTICLE.
ARTICLE.
ID
ID
ID
ID
techno
entert
desig
n
science
BDD
GABAR
IT
GABAR
IT
MOTEUR
CHIFFRESWEB SOCIAL
VIRALPARTICIPATIFCOMM. 2.0
Requêt
e
?
CATEG.
![Page 126: MMI Web Design P1](https://reader030.fdocument.pub/reader030/viewer/2022012903/55d560f7bb61eb37038b46d4/html5/thumbnails/126.jpg)
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
4. FRONT-END & BACK-ENDC. Site dynamiques
CATEG.
CA
TE
GO
RIE
S
TITRE
TEXTE
IMAGE
AR
TIC
LE
S
CMS
ARTICLE.
ARTICLE.
ARTICLE.
ARTICLE.
ID
ID
ID
ID
techno
entert
desig
n
science
BDD
GABAR
IT
GABAR
IT
MOTEURPAG
E W
EB
CHIFFRESWEB SOCIAL
VIRALPARTICIPATIFCOMM. 2.0
Requêt
e
?
Un site “dynamique”
= chaque page est
générée par un moteur
CATEG.
![Page 127: MMI Web Design P1](https://reader030.fdocument.pub/reader030/viewer/2022012903/55d560f7bb61eb37038b46d4/html5/thumbnails/127.jpg)
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
4. FRONT-END & BACK-ENDC. Site dynamiques
![Page 128: MMI Web Design P1](https://reader030.fdocument.pub/reader030/viewer/2022012903/55d560f7bb61eb37038b46d4/html5/thumbnails/128.jpg)
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
4. FRONT-END & BACK-END
Les systèmes de publication permettent un travail collaboratif dont les membres, webmaster inclus, doivent connaître le balisage HTML.
C. Site dynamiques
![Page 129: MMI Web Design P1](https://reader030.fdocument.pub/reader030/viewer/2022012903/55d560f7bb61eb37038b46d4/html5/thumbnails/129.jpg)
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
4. FRONT-END & BACK-END
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...
Les systèmes de publication permettent un travail collaboratif dont les membres, webmaster inclus, doivent connaître le balisage HTML.
C. Site dynamiques
![Page 130: MMI Web Design P1](https://reader030.fdocument.pub/reader030/viewer/2022012903/55d560f7bb61eb37038b46d4/html5/thumbnails/130.jpg)
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
5. DESIGN
![Page 131: MMI Web Design P1](https://reader030.fdocument.pub/reader030/viewer/2022012903/55d560f7bb61eb37038b46d4/html5/thumbnails/131.jpg)
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
5. DESIGNA. 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.
![Page 132: MMI Web Design P1](https://reader030.fdocument.pub/reader030/viewer/2022012903/55d560f7bb61eb37038b46d4/html5/thumbnails/132.jpg)
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
5. DESIGNB. Processus
tactiquestrategie
stratégie
périmètre fonctionnel
structure
squelette
surface
![Page 133: MMI Web Design P1](https://reader030.fdocument.pub/reader030/viewer/2022012903/55d560f7bb61eb37038b46d4/html5/thumbnails/133.jpg)
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
5. DESIGN
Strategie : que voulons-nous retirer du site ? Quel sont les besoins des utilisateurs ?
Périmètre : transformons la stratégie en recommandation. Quelles sont les fonctionnalités ?
Structure : rassemblons les briques. Comment les différents éléments vont-ils se comporter et vivre ensemble ?
Squellette : rendons les choses concrêtes. Quels composants vont être à la disposition des utilisateurs ?
Surface : rassemblons tout. Quelle est l’apparence du produit fini ?
B. Processus
![Page 134: MMI Web Design P1](https://reader030.fdocument.pub/reader030/viewer/2022012903/55d560f7bb61eb37038b46d4/html5/thumbnails/134.jpg)
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
5. DESIGNThe Elements of User ExperienceA basic duality: The Web was originally conceived as a hypertextual information space;but the development of increasingly sophisticated front- and back-end technologies hasfostered 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 beyondthe scope of its original application. The goal of this document is to define some of theseterms within their appropriate contexts, and to clarify the underlying relationships amongthese various elements.
Jesse James [email protected]
Visual Design: graphic treatment of interfaceelements (the "look" in "look-and-feel")
Information Architecture: structural designof the information space to facilitateintuitive access to content
Interaction Design: development ofapplication flows to facilitate user tasks,defining how the user interacts withsite functionality
Navigation Design: design of interfaceelements to facilitate the user's movementthrough the information architectureInformation Design: in the Tuftean sense:designing the presentation of informationto facilitate understanding
Functional Specifications: "feature set":detailed descriptions of functionality the sitemust include in order to meet user needs
User Needs: externally derived goalsfor the site; identified through user research,ethno/techno/psychographics, etc.Site Objectives: business, creative, or otherinternally derived goals for the site
Content Requirements: definition ofcontent elements required in the sitein order to meet user needs
Interface Design: as in traditional HCI:design of interface elements to facilitateuser interaction with functionalityInformation Design: in the Tuftean sense:designing the presentation of informationto facilitate understanding
Web as software interface Web as hypertext system
Visual Design: visual treatment of text,graphic page elements and navigationalcomponents
Concrete
Abstract
time
Conception
Completion
FunctionalSpecifications
ContentRequirements
InteractionDesign
InformationArchitecture
Visual Design
Information DesignInterface Design Navigation Design
Site ObjectivesUser Needs
User Needs: externally derived goalsfor the site; identified through user research,ethno/techno/psychographics, etc.Site Objectives: business, creative, or otherinternally derived goals for the site
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 auser experience development team. Rather, it seeks to define the key considerations that go into the development of user experience on the Web today.
task-oriented information-oriented
30 March 2000
© 2000 Jesse James Garrett http://www.jjg.net/ia/
B. Processus
Interface applicative
Système hypertexte
![Page 135: MMI Web Design P1](https://reader030.fdocument.pub/reader030/viewer/2022012903/55d560f7bb61eb37038b46d4/html5/thumbnails/135.jpg)
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
6. ADOBE DREAMWEAVER
![Page 136: MMI Web Design P1](https://reader030.fdocument.pub/reader030/viewer/2022012903/55d560f7bb61eb37038b46d4/html5/thumbnails/136.jpg)
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
6. ADOBE DREAMWEAVERA. 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
![Page 137: MMI Web Design P1](https://reader030.fdocument.pub/reader030/viewer/2022012903/55d560f7bb61eb37038b46d4/html5/thumbnails/137.jpg)
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
6. ADOBE DREAMWEAVERB. 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.
![Page 138: MMI Web Design P1](https://reader030.fdocument.pub/reader030/viewer/2022012903/55d560f7bb61eb37038b46d4/html5/thumbnails/138.jpg)
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
6. ADOBE DREAMWEAVERC. 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
![Page 139: MMI Web Design P1](https://reader030.fdocument.pub/reader030/viewer/2022012903/55d560f7bb61eb37038b46d4/html5/thumbnails/139.jpg)
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
6. ADOBE DREAMWEAVERC. 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
12% decrease in energy per kilo of coffee for July 2008 against July 2007...Fast facts :
NESCAFÉ LOGO + SUSTAINABILITY
AgricultureHome Manufacturing Packaging
About Sustainability
Local Feature Space
Text to include description of the coffee coming from 4C sourcing areas, how this is supporting farmers & the communities. This would be teaser paragraph leading to a fuller (e.g. 1000 word) article
more
Coffee Sourcing & Benefit to Farmers.
Manufacturing story lorem ipsum
Packaging story lorem ipsum
2nd article (could be about mnfg, packaging or logistics – in contrast to feature article)Teaser paragraph leading to a fuller (e.g. 700 word) article …
more
3nd article (could be about mnfg, packaging or logistics – in contrast to feature & 2nd article)Teaser paragraph leading to a fuller (e.g. 700 word) article
more
A general overview on Sustainability and Nescafé
Nescafé products (contextual)
1. Super Premium Range
2. Nestlé Professional
3. Other product
OKSearch these pages
There will be some small text written here with a link to a page for the local story (s). But can still remain even if there is no link available for the local story (s)
Useful links
Nescafe.com | Nestle.com | Terms of use | About this site | Site Map | Contact us
![Page 140: MMI Web Design P1](https://reader030.fdocument.pub/reader030/viewer/2022012903/55d560f7bb61eb37038b46d4/html5/thumbnails/140.jpg)
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
6. ADOBE DREAMWEAVERC. 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
Il garantie également la faisabilité de la phase en assurant
la mise en place des éléments graphiques et comportements via CSS et javascript
![Page 141: MMI Web Design P1](https://reader030.fdocument.pub/reader030/viewer/2022012903/55d560f7bb61eb37038b46d4/html5/thumbnails/141.jpg)
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
http://www.slideshare.net/davethepreacher