141
David Raichman - Senior UX Designer @ OgilvyInteractive WEB DESIGN Master 2 MMI | Université Panthéon - Sorbonne Octobre 2009 : Partie 1/4

MMI Web Design P1

Embed Size (px)

Citation preview

Page 1: MMI Web Design P1

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

Web Design - Master 2 MMI Université Panthéon - Sorbonne

1. PRÉSENTATION DU COURS

Page 3: MMI Web Design P1

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

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

Web Design - Master 2 MMI Université Panthéon - Sorbonne

2. FONDAMENTAUX DU WEB

Page 6: MMI Web Design P1

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne

2. FONDAMENTAUX DU WEBB. Typologie et positionnement

Page 30: MMI Web Design P1

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

Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne

2. FONDAMENTAUX DU WEBB. Typologie et positionnement

Page 32: MMI Web Design P1

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

Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne

2. FONDAMENTAUX DU WEBB. Typologie et positionnement

Page 34: MMI Web Design P1

Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne

2. FONDAMENTAUX DU WEBB. Typologie et positionnement

Page 35: MMI Web Design P1

Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne

2. FONDAMENTAUX DU WEBB. Typologie et positionnement

Page 36: MMI Web Design P1

Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne

2. FONDAMENTAUX DU WEBB. Typologie et positionnement

Page 37: MMI Web Design P1

Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne

2. FONDAMENTAUX DU WEBB. Typologie et positionnement

Page 38: MMI Web Design P1

Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne

2. FONDAMENTAUX DU WEBB. Typologie et positionnement

Page 39: MMI Web Design P1

Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne

2. FONDAMENTAUX DU WEBB. Typologie et positionnement

Page 40: MMI Web Design P1

Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne

2. FONDAMENTAUX DU WEBB. Typologie et positionnement

Page 41: MMI Web Design P1

Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne

2. FONDAMENTAUX DU WEBB. Typologie et positionnement

Page 42: MMI Web Design P1

Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne

2. FONDAMENTAUX DU WEBB. Typologie et positionnement

Page 43: MMI Web Design P1

Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne

2. FONDAMENTAUX DU WEBB. Typologie et positionnement

Page 44: MMI Web Design P1

Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne

2. FONDAMENTAUX DU WEBB. Typologie et positionnement

Page 45: MMI Web Design P1

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

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

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

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

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

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

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

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

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

Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne

2. FONDAMENTAUX DU WEBB. Typologie et positionnement

Page 55: MMI Web Design P1

Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne

2. FONDAMENTAUX DU WEBB. Typologie et positionnement

Page 56: MMI Web Design P1

Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne

2. FONDAMENTAUX DU WEBB. Typologie et positionnement

Page 57: MMI Web Design P1

Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne

2. FONDAMENTAUX DU WEBB. Typologie et positionnement

Page 58: MMI Web Design P1

Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne

2. FONDAMENTAUX DU WEBB. Typologie et positionnement

Page 59: MMI Web Design P1

Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne

2. FONDAMENTAUX DU WEBB. Typologie et positionnement

Page 60: MMI Web Design P1

Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne

2. FONDAMENTAUX DU WEBB. Typologie et positionnement

Page 61: MMI Web Design P1

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

Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne

2. FONDAMENTAUX DU WEBB. Typologie et positionnement

Page 63: MMI Web Design P1

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

Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne

2. FONDAMENTAUX DU WEBB. Typologie et positionnement

Page 65: MMI Web Design P1

Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne

2. FONDAMENTAUX DU WEBB. Typologie et positionnement

Page 66: MMI Web Design P1

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

Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne

2. FONDAMENTAUX DU WEBB. Typologie et positionnement

Page 68: MMI Web Design P1

Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne

2. FONDAMENTAUX DU WEBB. Typologie et positionnement

Page 69: MMI Web Design P1

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

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

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

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

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

Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne

2. FONDAMENTAUX DU WEBC. Mise en perspective...

Page 75: MMI Web Design P1

Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne

2. FONDAMENTAUX DU WEBC. Mise en perspective...

Page 76: MMI Web Design P1

Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne

2. FONDAMENTAUX DU WEBC. Mise en perspective...

Page 77: MMI Web Design P1

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

Web Design - Master 2 MMI Université Panthéon - Sorbonne

3. FORMATS STRUCTURÉS

Page 79: MMI Web Design P1

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne

4. FRONT-END & BACK-END

Page 109: MMI Web Design P1

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne

4. FRONT-END & BACK-ENDC. Site dynamiques

Page 128: MMI Web Design P1

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

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

Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne

5. DESIGN

Page 131: MMI Web Design P1

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

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

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

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

Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne

6. ADOBE DREAMWEAVER

Page 136: MMI Web Design P1

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

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

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

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

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

Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne

http://www.slideshare.net/davethepreacher