mmi web design p1

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

1. PRÉSENTATION DU COURSB. Enjeux et contextes

‣Industrialisation du web

‣Globalisation

‣Conseil et vision stratégique

‣Design centré sur l’utilisateur

‣Progression technologique

2. FONDAMENTAUX DU WEB

2. FONDAMENTAUX DU WEBA. (R)évolutions

web 1.0

images

javascript

web 1.0

images

javascripthttp://www.hec.fr

web 1.0

images

javascript

web 1.0

images

javascript

1997 - 98

web dynamique

ASP, PHP

panier, session

transaction, sécurisation

“multimedia”

animation,

Shockwave Flash

QuickTime, son

bannières

web 1.0

images

javascript

1997 - 98

web dynamique

ASP, PHP

panier, session

“multimedia”

animation,

Shockwave Flash

QuickTime, son

bannières

web 1.0

images

javascript

1997 - 98

web dynamique

ASP, PHP

panier, session

“multimedia”

animation,

Shockwave Flash

QuickTime, son

bannières

web 1.0

images

javascript

1997 - 98

web dynamique

ASP, PHP

panier, session

web 1.0

images

javascript

1997 - 98 2000

web dynamique

ASP, PHP

panier, session

BULLE INTERNET

Transaction vs Information

“multimedia”

animation,

Shockwave Flash

QuickTime, son

bannières

web 1.0

images

javascript

1997 - 98 2000 - 2004

web dynamique

ASP, PHP

panier, session

web socialW3C

standards,

web sémantique,

XML, XHTML, CSS,

“multimedia”

animation,

Shockwave Flash

QuickTime, son

bannières

web 1.0

images

javascript

1997 - 98 2004...2008

web dynamique

ASP, PHP

panier, session

web 2.0“multimedia”

animation,

Shockwave Flash

QuickTime, son

bannières

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 1.0

images

javascript

1997 - 98 2004...2008

web dynamique

ASP, PHP

panier, session

web 2.0

W3C, interopérabilité

XHTML, CSS

Blogs, RSS

“multimedia”

animation,

Shockwave Flash

QuickTime, son

bannières

web 1.0

images

javascript

1997 - 98 2004...2008

web dynamique

ASP, PHP

panier, session

web 2.0

XHTML, CSS

Blogs, RSS

“multimedia”

animation,

Shockwave Flash

QuickTime, son

bannières

Ajax, Flex

cartographie,

partage de media

web 1.0

images

javascript

1997 - 98 2004...2008

web dynamique

ASP, PHP

panier, session

web 2.0

XHTML, CSS

Blogs, RSS

“multimedia”

animation,

Shockwave Flash

QuickTime, son

bannières

Ajax, Flex

cartographie,

partage de media

web 1.0

images

javascript

1997 - 98 2004...2008

web dynamique

ASP, PHP

panier, session

web 2.0

XHTML, CSS

Blogs, RSS

“multimedia”

animation,

Shockwave Flash

QuickTime, son

bannières

Ajax, Flex

cartographie,

partage de media

web 1.0

images

javascript

1997 - 98 2004...2008

web dynamique

ASP, PHP

panier, session

web 2.0

XHTML, CSS

Blogs, RSS

“multimedia”

animation,

Shockwave Flash

QuickTime, son

bannières

Ajax, Flex

cartographie,

partage de media

RDA, RMA

Adobe AIR, Flex,

SDK Iphone

Objets web-connectés

web 1.0

images

javascript

1997 - 98 2004...2008

web dynamique

ASP, PHP

panier, session

web 2.0

XHTML, CSS

Blogs, RSS

“multimedia”

animation,

Shockwave Flash

QuickTime, son

bannières

Ajax, Flex

cartographie,

partage de media

RDA, RMA

Adobe AIR, Flex,

SDK Iphone

web 1.0

images

javascript

1997 - 98 2004...2008

web dynamique

ASP, PHP

panier, session

web 2.0

XHTML, CSS

Blogs, RSS

“multimedia”

animation,

Shockwave Flash

QuickTime, son

bannières

Ajax, Flex

cartographie,

partage de media

RDA, RMA

Adobe AIR, Flex,

SDK Iphone

web 1.0

images

javascript

1997 - 98 2004...2008

web dynamique

ASP, PHP

panier, session

web 2.0

XHTML, CSS

Blogs, RSS

“multimedia”

animation,

Shockwave Flash

QuickTime, son

bannières

Ajax, Flex

cartographie,

partage de media

RDA, RMA

Adobe AIR, Flex,

SDK Iphone

2009...

monde et environnement

physique

temps-réel

intelligence collective

métadonnées

cloud computing

RSS Cloud

PubSubHubBub

web 1.0

images

javascript

1997 - 98 2004...2008

web dynamique

ASP, PHP

panier, session

web 2.0

XHTML, CSS

Blogs, RSS

“multimedia”

animation,

Shockwave Flash

QuickTime, son

bannières

Ajax, Flex

cartographie,

partage de media

RDA, RMA

Adobe AIR, Flex,

SDK Iphone

2009...

physique

temps-réel

métadonnées

cloud computing

RSS Cloud

PubSubHubBub

web 1.0

images

javascript

1997 - 98 2004...2008

web dynamique

ASP, PHP

panier, session

web 2.0

XHTML, CSS

Blogs, RSS

“multimedia”

animation,

Shockwave Flash

QuickTime, son

bannières

Ajax, Flex

cartographie,

partage de media

RDA, RMA

Adobe AIR, Flex,

SDK Iphone

2009...

physique

temps-réel

métadonnées

cloud computing

RSS Cloud

PubSubHubBub

web 1.0

images

javascript

1997 - 98 2004...2008

web dynamique

ASP, PHP

panier, session

web 2.0

XHTML, CSS

Blogs, RSS

“multimedia”

animation,

Shockwave Flash

QuickTime, son

bannières

Ajax, Flex

cartographie,

partage de media

RDA, RMA

Adobe AIR, Flex,

SDK Iphone

2009...

physique

temps-réel

métadonnées

cloud computing

RSS Cloud

PubSubHubBub

web 1.0

images

javascript

1997 - 98 2004...2008

web dynamique

ASP, PHP

panier, session

web 2.0

XHTML, CSS

Blogs, RSS

“multimedia”

animation,

Shockwave Flash

QuickTime, son

bannières

Ajax, Flex

cartographie,

partage de media

RDA, RMA

Adobe AIR, Flex,

SDK Iphone

2009...

physique

temps-réel

métadonnées

cloud computing

RSS Cloud

PubSubHubBub

2. FONDAMENTAUX DU WEBB. Typologie et positionnement

Une perpective

pour comprendre

le web d’aujourd’hui

Informationnel

Audiovisuel

audiovisuel informationnel

applicatif

Desktop Itunes

applicatif

Desktop Itunes

RIA Rich Internet Application

applicatif

Desktop Itunes

applicatif

Desktop Itunes

applicatif

Desktop Itunes

applicatif

Desktop Itunes

applicatif

Desktop Itunes

RDA Rich Desktop Application

applicatif

Desktop Itunes

applicatif

Desktop Itunes

t a g s u r f

V i r t u a l M e

W o r l d o f W a r c r a f t

informationcommunication

temps ｜ horizontal espace｜vertical

interactivité ｜ immersion trouvabilité ｜ émersion

forme ! fond ! fonctionforme = fond = fonction

concret ｜ pictural abstrait｜ textuel

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

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()'

A32:15C

2()>,/,<<<

3. FORMATS STRUCTURÉS

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

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.

HTML 2.0

1986 1995

HTML 2.0

1986 1995 1997

4.0{CSS 1.0

XML 1.0

1986 1995 1997

{CSS 1.0 CSS 2.0

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

<racine>... suite du document XML ...</racine>

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.

Plus d’exemples sur http://www.csszengarden.com

XML 1.0

1986 1995 1997

{CSS 1.0 CSS 2.0

XML 1.0

1986 1995 1997

{ {XHTML 1.0

MathML

2000 - 2001

CSS 1.0 CSS 2.0

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.

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)

XML 1.0

1986 1995 1997

{ {XHTML 1.0

MathML

2000 - 2001

CSS 1.0 CSS 2.0

3. FORMATS STRUCTURÉSC. HTML 5 : un format naissant

XML 1.0

1986 1995 1997

{ {XHTML 1.0

MathML

2000 - 2001

CSS 1.0 CSS 2.0

2009...

XHTML 5

CSS 3.0

rétro-compatibilité HTML non assuréeS

L3. FORMATS STRUCTURÉSC. HTML 5 : un format naissant

HTML 5 remet en cause le modèle du document structuré à partir d’éléments bloc et en ligne, et propose de nouvelles catégories

MétadataCe sont les éléments qui fixent la présentation du document en indiquant l’adresse de la feuille de style par exemple.

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...

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

header

nav aside

footer

section

article

header

footer

Modèle document HTML 5

HeadingSous-ensemble des flow contents. Ce sont des contenus qui définissent la titraille d’un document.

PhrasingSous-ensemble des flow contents. Ce sont les éléments de texte du document ainsi que les éléments qui balisent le texte.

EmbedSous-ensemble des phrasing content. Ce sont les contenus qui importent des sources externes au document, comme mes vidéos.

to be continued...

4. FRONT-END & BACK-END

4. FRONT-END & BACK-ENDA. Fond, forme et fonction

FONCTION

webfront

4. FRONT-END & BACK-ENDA. Fond, forme et fonction

FONCTION

FONDCSS

Javascript

webfront

Un site “statique” = chaque page est codée “à la main” LIEN

4. FRONT-END & BACK-ENDB. Site statiques

Un site “statique” = chaque page est codée “à la main”

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

Exemple de site dynamique : un BLOG

Les coulisses d’un site dynamique

CATEG.

ARTICLE.

techno

entert

CATEG.

ARTICLE.

techno

entert

CATEG.

ARTICLE.

techno

entert

science

CHIFFRESWEB SOCIAL

VIRALPARTICIPATIFCOMM. 2.0

Requêt

CATEG.

ARTICLE.

techno

entert

science

CHIFFRESWEB SOCIAL

Requêt

CATEG.

Exemple de site dynamique : un BLOG

CATEG.

ARTICLE.

techno

entert

science

CHIFFRESWEB SOCIAL

Requêt

CATEG.

ARTICLE.

techno

entert

science

CHIFFRESWEB SOCIAL

Requêt

CATEG.

ARTICLE.

techno

entert

science

MOTEUR

CHIFFRESWEB SOCIAL

Requêt

CATEG.

ARTICLE.

techno

entert

science

MOTEURPAG

CHIFFRESWEB SOCIAL

Requêt

Un site “dynamique”

= chaque page est

générée par un moteur

CATEG.

Les systèmes de publication permettent un travail collaboratif dont les membres, webmaster inclus, doivent connaître le balisage HTML.

C. Site dynamiques

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

5. DESIGN

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.

5. DESIGNB. Processus

tactiquestrategie

stratégie

périmètre fonctionnel

structure

squelette

surface

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

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

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

B. Processus

Interface applicative

Système hypertexte

6. ADOBE DREAMWEAVER

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

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.

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

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 …

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

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

Il garantie également la faisabilité de la phase en assurant

la mise en place des éléments graphiques et comportements via CSS et javascript

http://www.slideshare.net/davethepreacher

mmi web design p1

Design

brochure p1 couleurdefinitif

montage photo p1

audi q7etron 833-1151 79 46franzoesischwelt in · l audi q7...

mmi croix des bouquets, clinique sif dr.pierre yves decastro

ici/itd p1

book mmi 14/15

résultats - p1

formation autocad niveau 1 - mmi deco · 2019. 4. 21. ·...

chapitre p1 (mécanique)

cpn ic / mmi - spécialité dut mmi s'appuyant sur...

gestion de projet en mmi - jpp.iut.fr

methodes de design ux ed1 v1 -...

calcul de fiabilité mmi/s2 tdn°1- fiabilite exercice 1

mmi ecole d'été

infographie sur orangina réalisée par kevin moles- mmi-iut...

dtu 61.1 p1

mmi c7 splashscreen 01 - idevx · 2020-02-01 · ensuite...

soutenance de stage mmi, 1 ère année ( ex serecom )

support icpe_igi p1

manuel de management intégré -...