MMI Web Design P1

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

1. PRÉSENTATION DU COURS Web Design - Master 2 MMI Université Panthéon - Sorbonne

1. PRÉSENTATION DU COURS A. Objectifs ‣Acquérir une vision globale du web (design, technologie...) ‣Comprendre la chaîne des processus de la conception à la réalisation ‣Apprendre les langages front-end (XHTML, CSS, Javascript/DOM) ‣Utiliser DW comme outil de web authoring et de prototypage Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne

1. PRÉSENTATION DU COURS B. Enjeux et contextes ‣Industrialisation du web ‣Globalisation ‣Conseil et vision stratégique ‣Design centré sur l’utilisateur ‣Progression technologique Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne

2. FONDAMENTAUX DU WEB Web Design - Master 2 MMI Université Panthéon - Sorbonne

2. FONDAMENTAUX DU WEB A. (R)évolutions 1995 web 1.0 HTML images javascript Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne

2. FONDAMENTAUX DU WEB A. (R)évolutions 1995 web 1.0 HTML images http://www.hec.fr javascript Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne

2. FONDAMENTAUX DU WEB A. (R)évolutions 1995 web 1.0 HTML images javascript Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne

2. FONDAMENTAUX DU WEB A. (R)évolutions 1995 1997 - 98 web 1.0 web dynamique HTML ASP, PHP images panier, session javascript transaction, sécurisation Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne

2. FONDAMENTAUX DU WEB A. (R)évolutions 1995 1997 - 98 web 1.0 web dynamique HTML ASP, PHP images panier, session javascript transaction, sécurisation “multimedia” animation, Shockwave Flash QuickTime, son bannières Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne

2. FONDAMENTAUX DU WEB A. (R)évolutions 1995 1997 - 98 2000 web 1.0 web dynamique HTML ASP, PHP Transaction vs images panier, session Information javascript transaction, sécurisation “multimedia” BULLE INTERNET animation, Shockwave Flash QuickTime, son bannières Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne

2. FONDAMENTAUX DU WEB A. (R)évolutions 1995 1997 - 98 2000 - 2004 web 1.0 web dynamique web social W3C HTML ASP, PHP standards, web sémantique, images panier, session XML, XHTML, CSS, javascript transaction, sécurisation Blogs “multimedia” animation, Shockwave Flash QuickTime, son bannières Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne

2. FONDAMENTAUX DU WEB A. (R)évolutions 1995 1997 - 98 2004...2008 web 1.0 web dynamique HTML ASP, PHP images panier, session javascript transaction, sécurisation “multimedia” animation, Shockwave Flash web 2.0 QuickTime, son bannières Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne

2. FONDAMENTAUX DU WEB A. (R)évolutions Les mutations induites par la standardisation (W3C) : le comportement des utilisateurs comme créateurs de contenus, la socialisation du web… ‣ XML standard de diffusions de l’information RSS, ATOM… ‣ Phase d’expansion de l’open source (dont LAMP) et créations de CMS gratuits qui faciliterons la naissance des blogs ‣ Ajax : le navigateur devient un lecteur d’application (google documents, googlemap,…) ‣ Programmes collaboratifs (wiki) ‣ Agrégateurs (Netvibes, iGoogle...) ‣ Widgets Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne

2. FONDAMENTAUX DU WEB A. (R)évolutions 1995 1997 - 98 2004...2008 web 1.0 web dynamique web 2.0 HTML ASP, PHP W3C, interopérabilité images panier, session XHTML, CSS javascript transaction, sécurisation Blogs, RSS “multimedia” animation, Shockwave Flash QuickTime, son bannières Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne

2. FONDAMENTAUX DU WEB A. (R)évolutions 1995 1997 - 98 2004...2008 web 1.0 web dynamique web 2.0 HTML ASP, PHP W3C, interopérabilité images panier, session XHTML, CSS javascript transaction, sécurisation Blogs, RSS “multimedia” RIA animation, Ajax, Flex Shockwave Flash cartographie, QuickTime, son partage de media bannières API Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne

2. FONDAMENTAUX DU WEB A. (R)évolutions 1995 1997 - 98 2004...2008 web 1.0 web dynamique web 2.0 HTML ASP, PHP W3C, interopérabilité images panier, session XHTML, CSS javascript transaction, sécurisation Blogs, RSS “multimedia” RIA animation, Ajax, Flex Shockwave Flash cartographie, QuickTime, son partage de media bannières API RDA, RMA Adobe AIR, Flex, SDK Iphone Objets web-connectés Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne

2. FONDAMENTAUX DU WEB A. (R)évolutions 1995 1997 - 98 2004...2008 2009... web 1.0 web dynamique web 2.0 web2 HTML ASP, PHP W3C, interopérabilité monde et images panier, session XHTML, CSS environnement javascript transaction, sécurisation Blogs, RSS physique temps-réel “multimedia” RIA intelligence collective animation, Ajax, Flex métadonnées Shockwave Flash cartographie, QuickTime, son partage de media cloud computing bannières API RSS Cloud PubSubHubBub RDA, RMA Adobe AIR, Flex, SDK Iphone Objets web-connectés Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne

2. FONDAMENTAUX DU WEB B. Typologie et positionnement Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne

2. FONDAMENTAUX DU WEB B. Typologie et positionnement Une perpective pour comprendre le web d’aujourd’hui Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne

2. FONDAMENTAUX DU WEB B. Typologie et positionnement Informationnel vs Audiovisuel Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne

2. FONDAMENTAUX DU WEB B. Typologie et positionnement applicatif Desktop Itunes audiovisuel informationnel Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne

2. FONDAMENTAUX DU WEB B. Typologie et positionnement applicatif Desktop Itunes audiovisuel informationnel RIA Rich Internet Application Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne

2. FONDAMENTAUX DU WEB B. Typologie et positionnement applicatif Desktop Itunes audiovisuel RDA Rich Desktop Application informationnel RIA Rich Internet Application Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne

2. FONDAMENTAUX DU WEB B. Typologie et positionnement tag surf Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne

2. FONDAMENTAUX DU WEB B. Typologie et positionnement Virtual Me Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne

2. FONDAMENTAUX DU WEB B. Typologie et positionnement World of Warcraft Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne

2. FONDAMENTAUX DU WEB B. Typologie et positionnement communication information Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne

2. FONDAMENTAUX DU WEB B. Typologie et positionnement communication information temps horizontal espace vertical Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne

2. FONDAMENTAUX DU WEB B. Typologie et positionnement communication information temps horizontal espace vertical interactivité immersion trouvabilité émersion Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne

2. FONDAMENTAUX DU WEB B. Typologie et positionnement communication information temps horizontal espace vertical interactivité immersion trouvabilité émersion forme = fond = fonction forme ! fond ! fonction Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne

2. FONDAMENTAUX DU WEB B. Typologie et positionnement communication information temps horizontal espace vertical interactivité immersion trouvabilité émersion forme = fond = fonction forme ! fond ! fonction concret pictural abstrait textuel Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne

2. FONDAMENTAUX DU WEB C. Mise en perspective... Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne

2. FONDAMENTAUX DU WEB D. Domaines technologiques !11)$2/0$, 3('40%1567%-+('56/"0-('888 A32:15C2()>,/,<<< 93!6:69$2;63('40%16!11)$2/0$%+ )78:-%*?@()<=:5()'AB<<< 9G!6:69$2;6G%7$)(6!11)$2/0$%+ !"#$%&$'"() *+,%-./0$%++() 9*!6:69$2;6*+0(-+(06!11)$2/0$%+ <=:5()>,/,<<< 78,09()'38/:283;95 !"#$%&''()*+,-).+,/,0123456 =- >) @ <% E( D$ B" / G (A %? ). +' "F 2$ 7) %+ ' ' '5 /) / $2 6( #( 20 6# $ +6 0/ $% %2 '6 )$? $-( ++ &$ 6$+ +( 56C -0" () 0( &0 () -/ 56B ' 20 %- $,' 0,% )$% 888 Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne

3. FORMATS STRUCTURÉS Web Design - Master 2 MMI Université Panthéon - Sorbonne

3. FORMATS STRUCTURÉS A. Fondements du web informationnel Format structuré = contenu (texte) + structure sémantique + structure hiérarchique SGML (Standard Generalized Markup Language) – 1986 Balisage, DTD, head et body HTML (Hyper Text Markup Language) a été déﬁni pour être un langage d'échange de documents scientiﬁques et techniques. Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne

3. FORMATS STRUCTURÉS A. Fondements du web informationnel HTML a résolu le problème de la complexité SGML en spéciﬁant un petit ensemble de balises sémantiques et structurelles, facilement utilisable pour l'écriture de documents relativement simples. De même, pour simpliﬁer la structure du document, HTML a ajouté la possibilité de l'hypertexte. Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne

3. FORMATS STRUCTURÉS A. Fondements du web informationnel 1986 { HTML SGML Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne

3. FORMATS STRUCTURÉS A. Fondements du web informationnel 1986 1995 { HTML 2.0 SGML Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne

3. FORMATS STRUCTURÉS A. Fondements du web informationnel 1986 1995 1997 { HTML 2.0 4.0 SGML CSS 1.0 Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne

3. FORMATS STRUCTURÉS A. Fondements du web informationnel 1986 1995 1997 1998 { HTML 2.0 4.0 SGML XML 1.0 CSS 1.0 CSS 2.0 Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne

3. FORMATS STRUCTURÉS B. Les apports du W3C XML (eXtended Markup Language) – 1998 XML, langage à balisage structuré, est une forme restreinte de SGML, et préserve pratiquement toute la puissance et la richesse de SGML. Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne

3. FORMATS STRUCTURÉS B. Les apports du W3C XML (eXtended Markup Language) – 1998 XML, langage à balisage structuré, est une forme restreinte de SGML, et préserve pratiquement toute la puissance et la richesse de SGML. <racine> ... suite du document XML ... </racine> Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne

3. FORMATS STRUCTURÉS B. Les apports du W3C XML (eXtended Markup Language) – 1998 XML, langage à balisage structuré, est une forme restreinte de SGML, et préserve pratiquement toute la puissance et la richesse de SGML. <parents> """"" <enfants> """""""""" <petits_enfants> ... </petits_enfants> """"" </enfants> </parents> Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne

3. FORMATS STRUCTURÉS B. Les apports du W3C Un document XML est structuré de telle sorte qu’il puisse être matérialisé par plusieurs médias avec un effort minimum : papier, web, base de données, synthèse vocales, etc… A une matérialisation donnée correspond une feuille de style. Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne

3. FORMATS STRUCTURÉS B. Les apports du W3C Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne

3. FORMATS STRUCTURÉS B. Les apports du W3C Plus d’exemples sur http://www.csszengarden.com Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne

3. FORMATS STRUCTURÉS B. Les apports du W3C 1986 1995 1997 1998 { HTML 2.0 4.0 SGML XML 1.0 CSS 1.0 CSS 2.0 Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne

3. FORMATS STRUCTURÉS B. Les apports du W3C 1986 1995 1997 1998 2000 - 2001 { HTML 2.0 4.0 { XHTML 1.0 WML XML 1.0 MathML ... CSS 1.0 CSS 2.0 Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne

3. FORMATS STRUCTURÉS B. Les apports du W3C XHTML (eXtended Hypertext Markup Language) XHTML est une reformulation de HTML mais respecte les normes du XML. Les documents XHTML sont conformes à XML. Ainsi, ils sont directement lisibles, éditables, et validables avec les outils XML standards. Les documents XHTML peuvent être écrits pour fonctionner aussi bien ou mieux qu'ils ne le faisaient précédemment dans les agents utilisateurs compatibles HTML!4.0 (rétro-compatibilité) ainsi que dans les nouveaux agents utilisateurs compatibles XHTML 1.0. Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne

3. FORMATS STRUCTURÉS B. Les apports du W3C XHTML 1.0 repose sur le fait qu’il existe deux catégories d’éléments structurant un document : les éléments bloc les éléments en ligne En-tête (header) élément bloc Corps (body) élément en ligne Modèle document XHTML Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne

3. FORMATS STRUCTURÉS C. HTML 5 : un format naissant 1986 1995 1997 1998 2000 - 2001 { HTML 2.0 4.0 { SGML XHTML 1.0 WML XML 1.0 MathML ... CSS 1.0 CSS 2.0 Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne

3. FORMATS STRUCTURÉS C. HTML 5 : un format naissant 1986 1995 1997 1998 2000 - 2001 2009... { HTML 2.0 4.0 HTML 5 { X SGML XHTML 1.0 2.0 rétro-compatibilité HTML non assurée WML XML 1.0 MathML ... CSS 1.0 CSS 2.0 CSS 3.0 Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne

3. FORMATS STRUCTURÉS C. HTML 5 : un format naissant HTML 5 remet en cause le modèle du document structuré à partir d’éléments bloc et en ligne, et propose de nouvelles catégories Métadata Ce sont les éléments qui ﬁxent la présentation du document en indiquant l’adresse de la feuille de style par exemple. Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne

3. FORMATS STRUCTURÉS C. HTML 5 : un format naissant HTML 5 remet en cause le modèle du document structuré à partir d’éléments bloc et en ligne, et propose de nouvelles catégories Flow content Ce sont les éléments qui sont le plus couramment utilisés dans le corps d’un document, par exemple les titres, les boutons... Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne

3. FORMATS STRUCTURÉS C. HTML 5 : un format naissant HTML 5 remet en cause le modèle du document structuré à partir d’éléments bloc et en ligne, et propose de nouvelles catégories Sectioning Sous-ensemble des ﬂow contents. Ce sont des contenus qui déﬁnissent le périmètre d’une en-tête et d’un pied de page. Par exemple un article ou la navigation. Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne

3. FORMATS STRUCTURÉS C. HTML 5 : un format naissant HTML 5 remet en cause le modèle du document structuré à partir d’éléments bloc et en ligne, et propose de nouvelles catégories header section header nav aside article footer footer Modèle document HTML 5 Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne

3. FORMATS STRUCTURÉS C. HTML 5 : un format naissant HTML 5 remet en cause le modèle du document structuré à partir d’éléments bloc et en ligne, et propose de nouvelles catégories Heading Sous-ensemble des ﬂow contents. Ce sont des contenus qui déﬁnissent la titraille d’un document. Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne

3. FORMATS STRUCTURÉS C. HTML 5 : un format naissant HTML 5 remet en cause le modèle du document structuré à partir d’éléments bloc et en ligne, et propose de nouvelles catégories Phrasing Sous-ensemble des ﬂow contents. Ce sont les éléments de texte du document ainsi que les éléments qui balisent le texte. Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne

3. FORMATS STRUCTURÉS C. HTML 5 : un format naissant HTML 5 remet en cause le modèle du document structuré à partir d’éléments bloc et en ligne, et propose de nouvelles catégories Embed Sous-ensemble des phrasing content. Ce sont les contenus qui importent des sources externes au document, comme mes vidéos. Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne

3. FORMATS STRUCTURÉS C. HTML 5 : un format naissant 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-END A. Fond, forme et fonction FONCTION web front FORME FOND Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne

4. FRONT-END & BACK-END A. Fond, forme et fonction Javascript FONCTION web front FORME CSS FOND HTML Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne

4. FRONT-END & BACK-END B. Site statiques Un site “statique” = chaque page est codée “à la main” LIEN LIEN LIEN Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne

4. FRONT-END & BACK-END B. Site statiques Un site “statique” = chaque page est codée “à la main” LIEN LIEN LIEN LIEN LIEN LIEN Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne

4. FRONT-END & BACK-END C. Site dynamiques Exemple de site dynamique : un BLOG Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne

4. FRONT-END & BACK-END C. Site dynamiques Les coulisses d’un site dynamique Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne

4. FRONT-END & BACK-END C. Site dynamiques ARTICLES TITRE TEXTE IMAGE Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne

4. FRONT-END & BACK-END C. Site dynamiques CATEGORIES CATEG. CATEG. ARTICLES TITRE TEXTE IMAGE Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne

4. FRONT-END & BACK-END C. Site dynamiques CATEGORIES CATEG. CATEG. ARTICLES TITRE TEXTE IMAGE CM S Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne

4. FRONT-END & BACK-END C. Site dynamiques CATEGORIES CATEG. CATEG. ARTICLES TITRE TEXTE no ch te rt IMAGE te ID en ARTICLE. n sig ID de ARTICLE. ce ien ID sc ARTICLE. ID ARTICLE. CM S Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne

4. FRONT-END & BACK-END C. Site dynamiques CATEGORIES CATEG. CATEG. ARTICLES TITRE TEXTE no ch te rt IMAGE te ID en ARTICLE. n sig ID de ARTICLE. ce ien ID sc ARTICLE. ID ARTICLE. CM S BD D Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne

4. FRONT-END & BACK-END C. Site dynamiques CATEGORIES CATEG. CATEG. e êt ARTICLES TITRE u no Req CH ? TEXTE ch IFF RE te WE S BS OC rt IAL IMAGE te ID en VIR PA AL ARTICLE. RT n IC ig IPA es CO TIF ID d MM . 2. ARTICLE. ce 0 n ID s cie ARTICLE. ID ARTICLE. CM S BD D Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne

4. FRONT-END & BACK-END C. Site dynamiques Exemple de site dynamique : un BLOG CATEGORIES CATEG. CATEG. e êt ARTICLES TITRE u no Req CH ? TEXTE ch IFF RE te WE S BS OC rt IAL IMAGE te ID en VIR PA AL ARTICLE. RT n IC ig IPA es CO TIF ID d MM . 2. ARTICLE. ce 0 n ID s cie ARTICLE. ID ARTICLE. CM S BD D Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne

4. FRONT-END & BACK-END C. Site dynamiques CATEGORIES CATEG. CATEG. e êt ARTICLES TITRE u no Req CH ? TEXTE ch IFF RE te WE S BS OC rt IAL IMAGE te ID en VIR PA AL ARTICLE. RT n IC ig IPA es CO TIF ID d MM . 2. ARTICLE. ce 0 n ID s cie ARTICLE. ID ARTICLE. CM S BD D Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne

4. FRONT-END & BACK-END C. Site dynamiques CATEGORIES CATEG. CATEG. e êt ARTICLES TITRE u no Req CH ? TEXTE ch IFF RE te WE S BS OC rt IAL IMAGE te ID en VIR PA AL ARTICLE. RT n IC ig IPA es CO TIF ID d MM . 2. ARTICLE. ce 0 n ID s cie ARTICLE. ID ARTICLE. CM AR IT S B GA IT BAR GA BD D Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne

4. FRONT-END & BACK-END C. Site dynamiques CATEGORIES CATEG. CATEG. e êt ARTICLES TITRE u no Req CH ? TEXTE ch IFF RE te WE S BS OC rt IAL IMAGE te ID en VIR PA AL ARTICLE. RT n IC ig IPA es CO TIF ID d MM . 2. ARTICLE. ce 0 n ID s cie ARTICLE. ID ARTICLE. CM AR IT S B GA IT BAR GA BD D MO TE UR Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne

4. FRONT-END & BACK-END C. Site dynamiques CATEGORIES Un site “dynamique” = chaque page est CATEG. générée par un moteur CATEG. e êt ARTICLES TITRE u no Req CH ? TEXTE ch IFF RE te WE S BS OC rt IAL IMAGE te ID en VIR PA AL ARTICLE. RT n IC ig IPA es CO TIF ID d MM . 2. ARTICLE. ce 0 n ID s cie ARTICLE. ID ARTICLE. CM AR IT S B GA IT BAR GA BD D EB MO W TE E UR G PA Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne

4. FRONT-END & BACK-END C. Site dynamiques Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne

4. FRONT-END & BACK-END C. Site dynamiques Les systèmes de publication permettent un travail collaboratif dont les membres, webmaster inclus, doivent connaître le balisage HTML. Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne

4. FRONT-END & BACK-END C. Site dynamiques Les systèmes de publication permettent un travail collaboratif dont les membres, webmaster inclus, doivent connaître le balisage HTML. Les systèmes de CMS. sont variés et utilisent des technologies différentes (PHP/MySQL, .Net, J2EE, etc.) Quelques exemples : Typo3, SPIP, Joomla, Drupal, WordPress... Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne

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

5. DESIGN A. Déﬁnition 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éciﬁcations (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. DESIGN B. Processus surface squelette tactique structure strategie périmètre fonctionnel stratégie Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne

5. DESIGN B. Processus Surface : rassemblons tout. Quelle est l’apparence du produit ﬁni ? Squellette : rendons les choses concrêtes. Quels composants vont être à la disposition des utilisateurs ? Structure : rassemblons les briques. Comment les différents éléments vont-ils se comporter et vivre ensemble ? Périmètre : transformons la stratégie en recommandation. Quelles sont les fonctionnalités ? Strategie : que voulons-nous retirer du site ? Quel sont les besoins des utilisateurs ? Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne

The Elements of User Experience Jesse James G jjg@j A basic duality: The Web was originally conceived as a hypertextual information space; 30 March 5. DESIGN but the development of increasingly sophisticated front- and back-end technologies has fostered its use as a remote software interface. This dual nature has led to much confusion, as user experience practitioners have attempted to adapt their terminology to cases beyond B. Processus the scope of its original application. The goal of this document is to define some of these terms within their appropriate contexts, and to clarify the underlying relationships among these various elements. Web as software interface Concrete Completion Web as hypertext s Visual Design: visual treatment of text Visual Design: graphic treatment of interface elements (the "look" in "look-and-feel") Visual Design graphic page elements and navigation components Interface Design: as in traditional HCI: Navigation Design: design of interface design of interface elements to facilitate elements to facilitate the user's movem user interaction with functionality Interface Design Navigation Design through the information architecture Information Design: in the Tuftean sense: designing the presentation of information Information Design Information Design: in the Tuftean sen designing the presentation of informat to facilitate understanding Interface Système to facilitate understanding applicative Interaction Design: development of Interaction Information hypertexte Information Architecture: structural de time application flows to facilitate user tasks, defining how the user interacts with Design Architecture of the information space to facilitate intuitive access to content site functionality Functional Specifications: "feature set": detailed descriptions of functionality the site Functional Content Content Requirements: definition of content elements required in the site must include in order to meet user needs Specifications Requirements in order to meet user needs User Needs: externally derived goals User Needs: externally derived goals for the site; identified through user research, ethno/techno/psychographics, etc. User Needs for the site; identified through user res ethno/techno/psychographics, etc. Site Objectives: business, creative, or other internally derived goals for the site Site Objectives Site Objectives: business, creative, or internally derived goals for the site task-oriented Abstract Conception information-ori This picture is incomplete: The model outlined here does not account for secondary considerations (such as those arising during technical or content development) that may influence decisions during user experience development. Also, this model does not describe a development process, nor does it define roles within a user experience development team. Rather, it seeks to define the key considerations that go into the development of user experience on the Web today. Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne

6. ADOBE DREAMWEAVER Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne

6. ADOBE DREAMWEAVER A. Précautions DW ne peut être un outil de mise en page efﬁcace (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 DREAMWEAVER B. Web authoring DW peut être utilisé dans les contexte d’authoring web front et back En front : Outil de développement de gabarits HTML/CSS/Javascript en vue d’une exploitation dynamique : autocomplétion efﬁcace pour XHTML et CSS Outil de validation XHTML, Outil de transition HTML>XHTML En back : Outil de développement pour PHP, ASP, Coldfusion, JSP,... Simpliﬁcation de l’accès aux bases de données. Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne

6. ADOBE DREAMWEAVER C. Prototypage DW peut être utilisé dans les contextes de prototypage à base de wireframes. Nativement, il garantie la faisabilité de la phase via le XHTML et l’utilisation de wireframe comme base visuelle Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne

6. ADOBE DREAMWEAVER C. Prototypage Fast facts : 12% decrease in energy per kilo of coffee for July 2008 against July 2007... DW peut être utilisé dans les contextes de prototypage à NESCAFÉ LOGO + SUSTAINABILITY Search these pages OK base de wireframes. Home Agriculture Manufacturing Packaging Useful links About Sustainability Nativement, il garantie la faisabilité de la phase A general overview on Sustainability and Nescafé Nescafé products (contextual) via le XHTML et l’utilisation de wireframe comme base 1. Super Premium Range 2. Nestlé Professional 3. Other product visuelle Coffee Sourcing & Manufacturing story lorem ipsum Benefit to Farmers. 2nd article (could be about mnfg, packaging or logistics – in contrast to feature article) Teaser paragraph leading Local Feature Space to a fuller (e.g. 700 word) article … more Packaging story lorem ipsum 3nd article (could be about mnfg, packaging or Text to include description of the coffee coming logistics – in contrast to feature & 2nd article) from 4C sourcing areas, how this is supporting Teaser paragraph leading There will be some small text farmers & the communities. This would be teaser to a fuller (e.g. 700 word) written here with a link to a page paragraph leading to a fuller (e.g. 1000 word) article article for the local story (s). But can still remain even if there is no link available more more for the local story (s) 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 DREAMWEAVER C. Prototypage DW peut être utilisé dans les contextes de prototypage à base de wireframes. Nativement, il garantie la faisabilité de la phase via le XHTML et l’utilisation de wireframe comme base visuelle 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 Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne

MMI Web Design P1

0 comments

Notes on slide 1

2 Favorites

MMI Web Design P1 - Presentation Transcript

More by user

More info about this document

Categories

Tags

MMI Web Design P1

0 comments

Notes on slide 1

2 Favorites

MMI Web Design P1 - Presentation Transcript

Related Presentations

More by user

More info about this document

Categories

Tags