MMI Web Design P1

1 599 vues

Publié le

Cours Master 2 Multimedia Interactif Paris I

Publié dans : Design, Business
0 commentaire
5 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
1 599
Sur SlideShare
0
Issues des intégrations
0
Intégrations
27
Actions
Partages
0
Téléchargements
173
Commentaires
0
J’aime
5
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

MMI Web Design P1

  1. 1. WEB DESIGN Master 2 MMI | Université Panthéon - Sorbonne Octobre 2009 : Partie 1/4 David Raichman - Senior UX Designer @ OgilvyInteractive
  2. 2. 1. PRÉSENTATION DU COURS Web Design - Master 2 MMI Université Panthéon - Sorbonne
  3. 3. 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
  4. 4. 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
  5. 5. 2. FONDAMENTAUX DU WEB Web Design - Master 2 MMI Université Panthéon - Sorbonne
  6. 6. 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
  7. 7. 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
  8. 8. 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
  9. 9. 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
  10. 10. 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
  11. 11. 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
  12. 12. 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
  13. 13. 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
  14. 14. 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
  15. 15. 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
  16. 16. 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
  17. 17. 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
  18. 18. 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
  19. 19. 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
  20. 20. 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
  21. 21. 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
  22. 22. 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
  23. 23. 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
  24. 24. 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
  25. 25. 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
  26. 26. 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
  27. 27. 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
  28. 28. 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
  29. 29. 2. FONDAMENTAUX DU WEB B. Typologie et positionnement Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
  30. 30. 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
  31. 31. 2. FONDAMENTAUX DU WEB B. Typologie et positionnement Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
  32. 32. 2. FONDAMENTAUX DU WEB B. Typologie et positionnement Informationnel vs Audiovisuel Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
  33. 33. 2. FONDAMENTAUX DU WEB B. Typologie et positionnement Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
  34. 34. 2. FONDAMENTAUX DU WEB B. Typologie et positionnement Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
  35. 35. 2. FONDAMENTAUX DU WEB B. Typologie et positionnement Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
  36. 36. 2. FONDAMENTAUX DU WEB B. Typologie et positionnement Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
  37. 37. 2. FONDAMENTAUX DU WEB B. Typologie et positionnement Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
  38. 38. 2. FONDAMENTAUX DU WEB B. Typologie et positionnement Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
  39. 39. 2. FONDAMENTAUX DU WEB B. Typologie et positionnement Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
  40. 40. 2. FONDAMENTAUX DU WEB B. Typologie et positionnement Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
  41. 41. 2. FONDAMENTAUX DU WEB B. Typologie et positionnement Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
  42. 42. 2. FONDAMENTAUX DU WEB B. Typologie et positionnement Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
  43. 43. 2. FONDAMENTAUX DU WEB B. Typologie et positionnement Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
  44. 44. 2. FONDAMENTAUX DU WEB B. Typologie et positionnement Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
  45. 45. 2. FONDAMENTAUX DU WEB B. Typologie et positionnement applicatif Desktop Itunes audiovisuel informationnel Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
  46. 46. 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
  47. 47. 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
  48. 48. 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
  49. 49. 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
  50. 50. 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
  51. 51. 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
  52. 52. 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
  53. 53. 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
  54. 54. 2. FONDAMENTAUX DU WEB B. Typologie et positionnement Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
  55. 55. 2. FONDAMENTAUX DU WEB B. Typologie et positionnement Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
  56. 56. 2. FONDAMENTAUX DU WEB B. Typologie et positionnement Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
  57. 57. 2. FONDAMENTAUX DU WEB B. Typologie et positionnement Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
  58. 58. 2. FONDAMENTAUX DU WEB B. Typologie et positionnement Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
  59. 59. 2. FONDAMENTAUX DU WEB B. Typologie et positionnement Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
  60. 60. 2. FONDAMENTAUX DU WEB B. Typologie et positionnement Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
  61. 61. 2. FONDAMENTAUX DU WEB B. Typologie et positionnement tag surf Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
  62. 62. 2. FONDAMENTAUX DU WEB B. Typologie et positionnement Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
  63. 63. 2. FONDAMENTAUX DU WEB B. Typologie et positionnement Virtual Me Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
  64. 64. 2. FONDAMENTAUX DU WEB B. Typologie et positionnement Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
  65. 65. 2. FONDAMENTAUX DU WEB B. Typologie et positionnement Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
  66. 66. 2. FONDAMENTAUX DU WEB B. Typologie et positionnement World of Warcraft Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
  67. 67. 2. FONDAMENTAUX DU WEB B. Typologie et positionnement Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
  68. 68. 2. FONDAMENTAUX DU WEB B. Typologie et positionnement Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
  69. 69. 2. FONDAMENTAUX DU WEB B. Typologie et positionnement communication information Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
  70. 70. 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
  71. 71. 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
  72. 72. 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
  73. 73. 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
  74. 74. 2. FONDAMENTAUX DU WEB C. Mise en perspective... Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
  75. 75. 2. FONDAMENTAUX DU WEB C. Mise en perspective... Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
  76. 76. 2. FONDAMENTAUX DU WEB C. Mise en perspective... Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
  77. 77. 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
  78. 78. 3. FORMATS STRUCTURÉS Web Design - Master 2 MMI Université Panthéon - Sorbonne
  79. 79. 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éfini pour être un langage d'échange de documents scientifiques et techniques. Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
  80. 80. 3. FORMATS STRUCTURÉS A. Fondements du web informationnel 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. Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
  81. 81. 3. FORMATS STRUCTURÉS A. Fondements du web informationnel 1986 { HTML SGML Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
  82. 82. 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
  83. 83. 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
  84. 84. 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
  85. 85. 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
  86. 86. 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
  87. 87. 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
  88. 88. 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
  89. 89. 3. FORMATS STRUCTURÉS B. Les apports du W3C Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
  90. 90. 3. FORMATS STRUCTURÉS B. Les apports du W3C Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
  91. 91. 3. FORMATS STRUCTURÉS B. Les apports du W3C Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
  92. 92. 3. FORMATS STRUCTURÉS B. Les apports du W3C Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
  93. 93. 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
  94. 94. 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
  95. 95. 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
  96. 96. 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
  97. 97. 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
  98. 98. 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
  99. 99. 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
  100. 100. 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 fixent 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
  101. 101. 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
  102. 102. 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 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. Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
  103. 103. 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
  104. 104. 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 flow contents. Ce sont des contenus qui définissent la titraille d’un document. Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
  105. 105. 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 flow 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
  106. 106. 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
  107. 107. 3. FORMATS STRUCTURÉS C. HTML 5 : un format naissant to be continued... Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
  108. 108. 4. FRONT-END & BACK-END Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
  109. 109. 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
  110. 110. 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
  111. 111. 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
  112. 112. 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
  113. 113. 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
  114. 114. 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
  115. 115. 4. FRONT-END & BACK-END C. Site dynamiques ARTICLES TITRE TEXTE IMAGE Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
  116. 116. 4. FRONT-END & BACK-END C. Site dynamiques ARTICLES TITRE TEXTE IMAGE Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
  117. 117. 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
  118. 118. 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
  119. 119. 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
  120. 120. 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
  121. 121. 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
  122. 122. 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
  123. 123. 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
  124. 124. 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
  125. 125. 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
  126. 126. 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
  127. 127. 4. FRONT-END & BACK-END C. Site dynamiques Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
  128. 128. 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
  129. 129. 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
  130. 130. 5. DESIGN Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
  131. 131. 5. DESIGN A. Définition Le design pour le web (web design au sens large) est un processus qui suit une méthodologie pour assurer une expérience utilisateur optimale. Il amène les designers à développer une esthétique nouvelle de l’information, des opérations de pensée et de l’interaction. Au sens restreint, le web design n’est que l’opération d’intégration visant à implémenter un ensemble de spécifications (techniques, graphiques et d’interaction). On parle dans ce cas de web authoring. Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
  132. 132. 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
  133. 133. 5. DESIGN B. Processus Surface : rassemblons tout. Quelle est l’apparence du produit fini ? 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
  134. 134. 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
  135. 135. 6. ADOBE DREAMWEAVER Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
  136. 136. 6. ADOBE DREAMWEAVER A. Précautions DW ne peut être un outil de mise en page efficace (HTML visuel) pour novice : la séparation Développeur/Designer est trompeuse Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
  137. 137. 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 efficace pour XHTML et CSS Outil de validation XHTML, Outil de transition HTML>XHTML En back : Outil de développement pour PHP, ASP, Coldfusion, JSP,... Simplification de l’accès aux bases de données. Web Design - Master 2 MMI - Université Paris 1 Panthéon - Sorbonne
  138. 138. 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

×