mmi web design p1
Post on 20-Aug-2015
1.201 Views
Preview:
TRANSCRIPT
David Raichman - Senior UX Designer @ OgilvyInteractive
WEB DESIGNMaster 2 MMI | Université Panthéon - Sorbonne
Octobre 2009 : Partie 1/4
Web Design - Master 2 MMI Université Panthéon - Sorbonne
1. PRÉSENTATION DU COURS
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
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
Web Design - Master 2 MMI Université Panthéon - Sorbonne
2. FONDAMENTAUX DU WEB
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
2. FONDAMENTAUX DU WEBA. (R)évolutions
1995
web 1.0
HTML
images
javascript
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
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
2. FONDAMENTAUX DU WEBA. (R)évolutions
1995
web 1.0
HTML
images
javascript
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
2. FONDAMENTAUX DU WEBB. Typologie et positionnement
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
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
2. FONDAMENTAUX DU WEBB. Typologie et positionnement
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
2. FONDAMENTAUX DU WEBB. Typologie et positionnement
Informationnel
vs
Audiovisuel
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
2. FONDAMENTAUX DU WEBB. Typologie et positionnement
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
2. FONDAMENTAUX DU WEBB. Typologie et positionnement
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
2. FONDAMENTAUX DU WEBB. Typologie et positionnement
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
2. FONDAMENTAUX DU WEBB. Typologie et positionnement
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
2. FONDAMENTAUX DU WEBB. Typologie et positionnement
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
2. FONDAMENTAUX DU WEBB. Typologie et positionnement
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
2. FONDAMENTAUX DU WEBB. Typologie et positionnement
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
2. FONDAMENTAUX DU WEBB. Typologie et positionnement
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
2. FONDAMENTAUX DU WEBB. Typologie et positionnement
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
2. FONDAMENTAUX DU WEBB. Typologie et positionnement
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
2. FONDAMENTAUX DU WEBB. Typologie et positionnement
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
2. FONDAMENTAUX DU WEBB. Typologie et positionnement
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
2. FONDAMENTAUX DU WEBB. Typologie et positionnement
audiovisuel informationnel
applicatif
Desktop Itunes
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
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
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
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
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
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
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
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
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
2. FONDAMENTAUX DU WEBB. Typologie et positionnement
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
2. FONDAMENTAUX DU WEBB. Typologie et positionnement
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
2. FONDAMENTAUX DU WEBB. Typologie et positionnement
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
2. FONDAMENTAUX DU WEBB. Typologie et positionnement
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
2. FONDAMENTAUX DU WEBB. Typologie et positionnement
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
2. FONDAMENTAUX DU WEBB. Typologie et positionnement
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
2. FONDAMENTAUX DU WEBB. Typologie et positionnement
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
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
2. FONDAMENTAUX DU WEBB. Typologie et positionnement
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
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
2. FONDAMENTAUX DU WEBB. Typologie et positionnement
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
2. FONDAMENTAUX DU WEBB. Typologie et positionnement
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
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
2. FONDAMENTAUX DU WEBB. Typologie et positionnement
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
2. FONDAMENTAUX DU WEBB. Typologie et positionnement
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
2. FONDAMENTAUX DU WEBB. Typologie et positionnement
informationcommunication
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
2. FONDAMENTAUX DU WEBB. Typologie et positionnement
informationcommunication
temps | horizontal espace|vertical
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
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
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
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
2. FONDAMENTAUX DU WEBC. Mise en perspective...
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
2. FONDAMENTAUX DU WEBC. Mise en perspective...
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
2. FONDAMENTAUX DU WEBC. Mise en perspective...
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()>,/,<<<
Web Design - Master 2 MMI Université Panthéon - Sorbonne
3. FORMATS STRUCTURÉS
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
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
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
SG
ML
HTML
1986
{
3. FORMATS STRUCTURÉSA. Fondements du web informationnel
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
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
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
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
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
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
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
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
3. FORMATS STRUCTURÉSB. Les apports du W3C
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
3. FORMATS STRUCTURÉSB. Les apports du W3C
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
3. FORMATS STRUCTURÉSB. Les apports du W3C
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
3. FORMATS STRUCTURÉSB. Les apports du W3C
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
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
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
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
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
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
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
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
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
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
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
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
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
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
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
C. HTML 5 : un format naissant
3. FORMATS STRUCTURÉS
to be continued...
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
4. FRONT-END & BACK-END
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
4. FRONT-END & BACK-ENDA. Fond, forme et fonction
FORME
FONCTION
FOND
webfront
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
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
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”
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
4. FRONT-END & BACK-ENDC. Site dynamiques
Exemple de site dynamique : un BLOG
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
4. FRONT-END & BACK-ENDC. Site dynamiques
Les coulisses d’un site dynamique
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
TITRE
TEXTE
IMAGE
AR
TIC
LES
4. FRONT-END & BACK-ENDC. Site dynamiques
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
4. FRONT-END & BACK-ENDC. Site dynamiques
TITRE
TEXTE
IMAGE
AR
TIC
LES
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.
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
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.
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.
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.
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
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.
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.
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.
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.
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
4. FRONT-END & BACK-ENDC. Site dynamiques
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
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
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
5. DESIGN
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.
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
5. DESIGNB. Processus
tactiquestrategie
stratégie
périmètre fonctionnel
structure
squelette
surface
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
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 Garrettjjg@jjg.net
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
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
6. ADOBE DREAMWEAVER
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
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.
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
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
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
Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
http://www.slideshare.net/davethepreacher
top related