WEBDESIGN | Part2 PASS É , PR É SENT ET… PR É SENT Une présentation de Benoit Duverneuil | Tubatomic Worldwide Webdesign F...
La Bulle Internet est à son apogée, le Web à déjà ses  superstars … <ul><li>Joshua Davis  est un pionnier de la  création ...
Praystation   a remporté, en   2001 , le prix   Ars Electronica   Golden Nica, dans la catégorie   ‘’ Net Excellence’’ , l...
Once upon a forest , autre expérimentation de   Joshua Davis   devient célèbre grâce à la technique utilisée, utilisant ou...
2001 Naziha Mestaoui et Yacine Ait Kaci   d’ Electronic Shadow  conçoivent, en collaboration avec France Telecom, un  vête...
2001 Le site d’animation   Tongsville.com/city/   à scrolling vertical créé l’événement avec ses personnage en   pixels   ...
2001 Eric Jordan, Tony Novak et John Caroll, les   3   fondateurs du studio  2advanced  signent un site  all flash  qui ex...
HTML Vs FLASH Contenus Vs Creativité? Idée reçue n°3
Flash est devenue un des programmes les plus populaires pour ajouter des  animations  et des objets interactifs à une page...
Image de la marque  et expérience  immersive  de l’utilisateur, stratégies  virales  et à court-termes,  …
Architecture d’information  complexe ,   Possibilité de copier/coller des contenus,  SEO  important, positionnement fort s...
Aujourd’hui, certains sites  combinent  efficacement les  technologies  et  langages  autrefois opposés. HTML et FLASH pré...
Flash  n’est pas entièrement  inaccessible . Un mauvais codage  (X)HTML  peut rendre l’interface Web complètement  inacces...
Recognizing  the need  is the primary condition to design. Charles Eames, designer américain & architecte   “ ”
HTML / CSS / JAVASCRIPT +  FLASH ,  3D ,  Motion … Un environnement de travail riche avec des outils apportant des réponse...
2000 Le  Team Chman , célèbre agence web française, spécialisée dans la technologie Flash et créatrice de  Banja  organise...
When I am working on a problem, I never think about beauty. I think only of  how to solve the problem . But when I have fi...
2000 - 2002 Les principaux navigateurs supportent   CSS1 Disponible sur IE5 (MAC), IE6 (Windows), Opera & Mozilla Firefox ...
Développement des Standards HTML 3.0 avec le W3C HTML 3.2 HTML 4.0.1 XHTML 1.0 Languages alternatifs (WAP, XHTML BASIC…) C...
2002 Le site d’animation   Tokyoplastic.com   remportent des prix dans le monde entier et devient culte pour toute une gén...
2002 Premiers rassemblements et réseaux d’envergure nationaux et internationaux pour la communauté des Webdesigners Ryan S...
Standford Web Credibility Research  Guide de 10 règles | Crédibilité d’un site   1.  Offrez des moyens simples de vérifier...
2002 Le site  thebanmappingproject.com   est un projet archéologique, ethnographique et géologique qui permet de visiter l...
Avec l’aide d’une technique de  digitalisation  au  laser , l’intérieur des tombes ont été totalement recréés. L’emploi de...
Technical  skill is mastery of  complexity , while  creativity  is mastery of  simplicity . E. Christopher Zeeman, Mathéma...
Benjamin Fry et Casey Reas inventent   Processing <ul><li>Processing   </li></ul><ul><li>est un environnement  </li></ul><...
2002 Matthew Mullweg  Tantek Celik  Eric Meyer XHTML Friends Network  (XFN).  Global Multimedia Protocol Group   http://gm...
2003 CSS Zen Garden Les outils de blogging deviennent plus conformes au Web sémantique en intégrant du (X)HTML Les Webdesi...
Much of the  Web  is like an anthill built by  ants on LSD . Jakob Nielsen, consultant en usabilité du Web   “ ”
2003 Macromedia lance  The Flash Video Gallery , une vitrine technologique qui met en avant les grandes marques qui innove...
2003 La boisson énergétique Red Bull propose une expérience interactive totalement  immersive  avec  redbullcopilot.com.  ...
Dans la foulée de l’explosion des blogs, de MySpace et des Podcasts,   Second Life  et son univers virtuel est annoncé com...
2003 Jeffrey Zeldman  écrit la 1 ère  édition de  ‘ ’Designing with Web Standards ’’ . Il est l’un des plus influents mili...
2003 1 er  écran  conçu pour afficher l’ encre électronique  développé par la société  E-Ink . L’ère de l’écriture électro...
2002 – 2007  Le Motion Design sort de l’ombre Cinéma, Audiovisuel, Internet, Internet mobile… 2002 – Prix Apple –  1 ère  ...
Demo Reel – Kurtz - Pierre Magnol .
Great design will not sell an inferior product, but  it will enable a great product to achieve its maximum potential . Tho...
2004 Flash Lite 1.1  devient disponibles sur les  téléphones portables  de dernière génération et accélère le développemen...
Geoff Stearns   écrit le  SWFobject   qui permet d’intégrer des modules  Flash   dans les pages  Html <ul><li><script type...
2004 L’agence interactive  North Kingdom  remporte de multiples récompense pour l’expérience interactive :  Vodafone Futur...
2004 Le tsunami  Web 2.0 . Plus qu’un concept marketing, plus qu’une évolution technologique… C’est une  révolution des us...
Tendances graphiques ≠ Design 2.0 GRANDES POLICES DE CARACTERES Liens en surbrillance Dégradés Réflexions sur logos Badges...
Design 2.0 Les interfaces persuasives Faciliter et inciter la participation de l’internaute, Donner du sens au design d’in...
I am not schooled in the science of  human factors , but I suspect  surprise  is not an element of a robust  user interfac...
<ul><li>2004  – O’Reilly ETech </li></ul><ul><li>Donner du sens aux contenus avec les  Microformats </li></ul><ul><li>Quel...
<ul><li>Les  microformats   sont : </li></ul><ul><li>une façon de penser les données, </li></ul><ul><li>un concept ancien,...
<ul><li>les  principes  des microformats : </li></ul><ul><li>résoudre un problème spécifique, </li></ul><ul><li>démarrer a...
Résous des problèmes spécifiques Simplicité d’utilisation Modularité Créés d’abord pour les humains,  ensuite pour les mac...
Microformats hCard http://webevangelists.net/blog/    Benoit Duverneuil  Auteur    http://webevangelists.net/  webevangeli...
Microformats hCard <div  > <a   http://webevangelists.net/blog/ >   <span   > Benoit </span> <span  > Duverneuil </span>  ...
Microformats hCard <div  class=“vcard” > <a   class=“url fn n”   href=“ http://webevangelists.net/blog/ ” >   <span   clas...
Autres   Microformats hCard  : modélise les  vCards  et décrit les personnes, les lieux et les organisations,  hCalendar  ...
2004 Marco Wesckamp, aka  Marumushi , Newsmap en Flash des  Google News . Mode de représentation innovant remettant en cau...
2005 The  Zen of CSS Design  est publié par  Dave Shea , le créateur de CSS Zen Garden et la spécialiste de design Web,  M...
2005  Explosion de la vidéo en ligne YouTube, Dailymotion et les autres Des centaines de plateformes de  partages  vidéos,...
Prochain SlideShare
Chargement dans…5
×

Webdesign Passe Present et Present Part2

3 382 vues

Publié le

2ème partie "Webdesign Passé, Présent et... Présent" une présentation de Benoit Duverneuil lors de la 3ème édition du Festival de Webdesign de Rouyn-Noranda (Québec).
Consultez la première partie : http://www.slideshare.net/bduverneuil/webdesign-pass-prsent-et-prsent-part1/

Publié dans : Technologie
2 commentaires
7 j’aime
Statistiques
Remarques
  • Consultez la 1ère partie : http://www.slideshare.net/bduverneuil/webdesign-pass-prsent-et-prsent-part1
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
  • Consultez la troisième partie :
    http://www.slideshare.net/bduverneuil/webdesign-passe-present-et-present-part3/
       Répondre 
    Voulez-vous vraiment ?  Oui  Non
    Votre message apparaîtra ici
Aucun téléchargement
Vues
Nombre de vues
3 382
Sur SlideShare
0
Issues des intégrations
0
Intégrations
143
Actions
Partages
0
Téléchargements
0
Commentaires
2
J’aime
7
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Webdesign Passe Present et Present Part2

  1. 1. WEBDESIGN | Part2 PASS É , PR É SENT ET… PR É SENT Une présentation de Benoit Duverneuil | Tubatomic Worldwide Webdesign Festival | Rouyn-Noranda | Novembre 2007 http://creativecommons.org/licenses/by-sa/3.0/
  2. 2. La Bulle Internet est à son apogée, le Web à déjà ses superstars … <ul><li>Joshua Davis est un pionnier de la création artistique sur le Web. </li></ul><ul><li>Il mélange art pictural, théorie du chaos, programmation, graphisme et animation. </li></ul>1998 - 2000
  3. 3. Praystation a remporté, en 2001 , le prix Ars Electronica Golden Nica, dans la catégorie ‘’ Net Excellence’’ , la plus haute distinction internationale en art et design pour le Web.
  4. 4. Once upon a forest , autre expérimentation de Joshua Davis devient célèbre grâce à la technique utilisée, utilisant outils graphiques et programmation .
  5. 5. 2001 Naziha Mestaoui et Yacine Ait Kaci d’ Electronic Shadow conçoivent, en collaboration avec France Telecom, un vêtement communiquant connecté aux Web.
  6. 6. 2001 Le site d’animation Tongsville.com/city/ à scrolling vertical créé l’événement avec ses personnage en pixels et ses interactions .
  7. 7. 2001 Eric Jordan, Tony Novak et John Caroll, les 3 fondateurs du studio 2advanced signent un site all flash qui exploitent toutes les possibilités offertes par le soft de Macromedia…
  8. 8. HTML Vs FLASH Contenus Vs Creativité? Idée reçue n°3
  9. 9. Flash est devenue un des programmes les plus populaires pour ajouter des animations et des objets interactifs à une page Web. Flash est généralement utilisé pour créer des animations, des publicités ou des jeux vidéo. Flash Peu de contraintes et de développement pour obtenir les premiers résultats – Flash = La créativité d’abord! Les Action Scripts offrent de nombreuses possibilités mais difficiles à maîtriser.
  10. 10. Image de la marque et expérience immersive de l’utilisateur, stratégies virales et à court-termes, …
  11. 11. Architecture d’information complexe , Possibilité de copier/coller des contenus, SEO important, positionnement fort sur les contenus textuels , audience très large…
  12. 12. Aujourd’hui, certains sites combinent efficacement les technologies et langages autrefois opposés. HTML et FLASH présentent chacun des forces et des faiblesses . Le concept, les idées et l’audience doivent déterminer le projet et les contenus et enfin les outils et langages. HTML+FLASH CONTENUS+CR É ATIVIT É
  13. 13. Flash n’est pas entièrement inaccessible . Un mauvais codage (X)HTML peut rendre l’interface Web complètement inaccessible .
  14. 14. Recognizing the need is the primary condition to design. Charles Eames, designer américain & architecte “ ”
  15. 15. HTML / CSS / JAVASCRIPT + FLASH , 3D , Motion … Un environnement de travail riche avec des outils apportant des réponses pour des besoins différents et complémentaires Quels outils pour quels besoins?
  16. 16. 2000 Le Team Chman , célèbre agence web française, spécialisée dans la technologie Flash et créatrice de Banja organise le Web Daysigner . Première Webjam , suivies de nombreuses autres manifestations, les VECTORLOUNGE qui regroupent des milliers de Web Designers en France et à l’étranger.
  17. 17. When I am working on a problem, I never think about beauty. I think only of how to solve the problem . But when I have finished, if the solution is not beautiful , I know it is wrong . R Buckminster Fuller, visionnaire, designer, architecte & poète “ ”
  18. 18. 2000 - 2002 Les principaux navigateurs supportent CSS1 Disponible sur IE5 (MAC), IE6 (Windows), Opera & Mozilla Firefox Les notions d’ accessibilité et d’ usabilité commencent à apparaitre. CSS = Cascading Style Sheet Le CSS permet de styliser les contenus HTML
  19. 19. Développement des Standards HTML 3.0 avec le W3C HTML 3.2 HTML 4.0.1 XHTML 1.0 Languages alternatifs (WAP, XHTML BASIC…) CSS 1 CSS 2 ECMAScript (JavaScript / JScript) Nouvelles approches conflictuelles: tables et stylesheets font tags et stylesheets …
  20. 20. 2002 Le site d’animation Tokyoplastic.com remportent des prix dans le monde entier et devient culte pour toute une génération de créatifs Web.
  21. 21. 2002 Premiers rassemblements et réseaux d’envergure nationaux et internationaux pour la communauté des Webdesigners Ryan Shelton et Ryan Carson lancent à Londres les soirées BD4D Très vite ces soirées sont reprises dans le monde entier.
  22. 22. Standford Web Credibility Research Guide de 10 règles | Crédibilité d’un site 1. Offrez des moyens simples de vérifier l'information sur votre site. 2. Montrez qu'il existe une organisation réelle derrière votre site. 3. Mettez l'expertise de votre organisation en valeur. 4. Montrez que derrière votre site, il y a des personnes honnêtes et fiables. 5. Faites en sorte qu'il soit facile de vous contacter. 6. Privilégiez un design professionnel ou approprié aux objectifs du site. 7. Rendez votre site facile d'utilisation -- et utile. 8. Mettez régulièrement votre site à jour. 9. Faites un usage restreint de tout contenu promotionnel. 10. Évitez les erreurs en tous genres si petites soient-elles. 2002 Web-Credibility
  23. 23. 2002 Le site thebanmappingproject.com est un projet archéologique, ethnographique et géologique qui permet de visiter la Vallée des Rois de manière très innovante.
  24. 24. Avec l’aide d’une technique de digitalisation au laser , l’intérieur des tombes ont été totalement recréés. L’emploi de Javascript et Flash permet de visiter les lieux de manière réaliste et instructive.
  25. 25. Technical skill is mastery of complexity , while creativity is mastery of simplicity . E. Christopher Zeeman, Mathématicien “ ”
  26. 26. Benjamin Fry et Casey Reas inventent Processing <ul><li>Processing </li></ul><ul><li>est un environnement </li></ul><ul><li>de programmation Java </li></ul><ul><li>et un langage simple et complet. Il s'agit d'un logiciel libre, gratuit </li></ul><ul><li>et multi-plateformes . </li></ul>2002 Processing a été conçu pour des artistes, par des artistes . Il permet d’apprendre rapidement à générer des images sur ordinateur.
  27. 27. 2002 Matthew Mullweg Tantek Celik Eric Meyer XHTML Friends Network (XFN). Global Multimedia Protocol Group http://gmpg.org
  28. 28. 2003 CSS Zen Garden Les outils de blogging deviennent plus conformes au Web sémantique en intégrant du (X)HTML Les Webdesigners s’approprient les CSS et redécouvrent le web sémantique avec le (X)HTML Compréhension plus pertinentes des feuilles de styles par les Moteurs de recherches .
  29. 29. Much of the Web is like an anthill built by ants on LSD . Jakob Nielsen, consultant en usabilité du Web “ ”
  30. 30. 2003 Macromedia lance The Flash Video Gallery , une vitrine technologique qui met en avant les grandes marques qui innovent en utilisant Flash Communication Server et Flash pour distribuer des contenus vidéo .
  31. 31. 2003 La boisson énergétique Red Bull propose une expérience interactive totalement immersive avec redbullcopilot.com. Multiples possibilités de paramétrage, 9 angles de caméra, animation vectorielle, contrôles audio…
  32. 32. Dans la foulée de l’explosion des blogs, de MySpace et des Podcasts, Second Life et son univers virtuel est annoncé comme un Web dans le Web. 2003
  33. 33. 2003 Jeffrey Zeldman écrit la 1 ère édition de ‘ ’Designing with Web Standards ’’ . Il est l’un des plus influents militant pour la reconnaissance et l’application des standards .
  34. 34. 2003 1 er écran conçu pour afficher l’ encre électronique développé par la société E-Ink . L’ère de l’écriture électronique débute enfin alors que la technologie existe depuis 1970 .
  35. 35. 2002 – 2007 Le Motion Design sort de l’ombre Cinéma, Audiovisuel, Internet, Internet mobile… 2002 – Prix Apple – 1 ère Série animée pour le Web Marché en pleine croissance - Multisectorielle
  36. 36. Demo Reel – Kurtz - Pierre Magnol .
  37. 37. Great design will not sell an inferior product, but it will enable a great product to achieve its maximum potential . Thomas Watson Jr, Président d’IBM (1952-1971) “ ”
  38. 38. 2004 Flash Lite 1.1 devient disponibles sur les téléphones portables de dernière génération et accélère le développement des contenus interactifs sur mobiles.
  39. 39. Geoff Stearns écrit le SWFobject qui permet d’intégrer des modules Flash dans les pages Html <ul><li><script type=&quot;text/javascript&quot; src=&quot;swfobject.js&quot;></script>   <div id=&quot;flashcontent&quot;>   Ce texte sera remplacé par votre swf. </div>   <script type=&quot;text/javascript&quot;> var so = new SWFObject(&quot;movie.swf&quot;, &quot;mymovie&quot;, &quot;200&quot;, &quot;100&quot;, &quot;7&quot;, &quot;#336699&quot;); so.write(&quot;flashcontent&quot;); </script> </li></ul>2004
  40. 40. 2004 L’agence interactive North Kingdom remporte de multiples récompense pour l’expérience interactive : Vodafone Future Site .
  41. 41. 2004 Le tsunami Web 2.0 . Plus qu’un concept marketing, plus qu’une évolution technologique… C’est une révolution des usages.
  42. 42. Tendances graphiques ≠ Design 2.0 GRANDES POLICES DE CARACTERES Liens en surbrillance Dégradés Réflexions sur logos Badges Ajax inside Rayures Couleurs acidulées Boutons clairs et simples
  43. 43. Design 2.0 Les interfaces persuasives Faciliter et inciter la participation de l’internaute, Donner du sens au design d’interfaces, Une place privilégié pour les contenus. Un Design et des services centrés utilisateurs ! De nouvelles formes d ’interfaces Web adaptées aux nouveaux services. Un regain d’ intérêt pour le Webdesign.
  44. 44. I am not schooled in the science of human factors , but I suspect surprise is not an element of a robust user interface . Chip Rosenthal, Unicom System, spécialiste en solutions opensource Unicom.com/ “ ”
  45. 45. <ul><li>2004 – O’Reilly ETech </li></ul><ul><li>Donner du sens aux contenus avec les Microformats </li></ul><ul><li>Quels Usages? </li></ul><ul><li>Les microformats sont la base technique du &quot;web 3.0&quot; ? </li></ul><ul><li>Un outil au service du design </li></ul>
  46. 46. <ul><li>Les microformats sont : </li></ul><ul><li>une façon de penser les données, </li></ul><ul><li>un concept ancien, </li></ul><ul><li>des principes de design pour les formats, </li></ul><ul><li>des ajouts d’information dans le code HTML, </li></ul><ul><li>ce sont des attributs de classe comme le CSS mais ils s’agit de créer des métadonnées, pas de styliser le contenu, </li></ul><ul><li>adaptés aux comportements actuels et aux modèles d’usages, </li></ul><ul><li>un ensemble de formats de données standards simples et ouverts… </li></ul><ul><li>les microformats ne sont pas : </li></ul><ul><li>un nouveau langage, compatibilité avec HTML 4.01 et le XHTML, </li></ul><ul><li>une approche complètement nouvelle qui jette ce qui fonctionne aujourd’hui, </li></ul><ul><li>infiniment extensibles et ouverts sans fins… </li></ul>
  47. 47. <ul><li>les principes des microformats : </li></ul><ul><li>résoudre un problème spécifique, </li></ul><ul><li>démarrer aussi simple que possible, </li></ul><ul><li>un design d’abord conçu pour les humains, ensuite pour les machines, </li></ul><ul><li>réutilisation de briques provenant de standards largement adoptés, </li></ul><ul><li>modularité, facilité d’insertion, </li></ul><ul><li>permettre et encourager le développement décentralisé des contenus et services. </li></ul><ul><li>En ajoutant des microformats à votre HTML, la page elle-même devient l'API . </li></ul><ul><li>En tordant légèrement un gabarit HTML, beaucoup de sites peuvent créer millions d'instances de microformats en quelques minutes. </li></ul><ul><li>Des sites comme Yahoo Local , Flickr , Meet-up , Upcoming , Eventful , Edgeio , Technorati , Ice Rocket , le .Mac mail d'Apple et bien d’autres utilisent de nombreux microformats. </li></ul>
  48. 48. Résous des problèmes spécifiques Simplicité d’utilisation Modularité Créés d’abord pour les humains, ensuite pour les machines Encourage le développement décentralisé de contenus, de services, etc. diagramme microformats Tags (x)HTML et attributs: Comme <ol>, <ul>, <p>, <table>, <div>, <h1>, <h2>, <dt>… Composants Microformats: hCard, hCalendar, XOXO, geo, hReview, hResume etc. Eléments Microformats: Rel-tag, rel et rev, rel-license, rel-nofollow, XFN, vote-links. Principes Microformats PAGE (X)HTML Diagramme d’une simple page en (X)HTML avec du contenu ‘’microformaté’’
  49. 49. Microformats hCard http://webevangelists.net/blog/ Benoit Duverneuil Auteur http://webevangelists.net/ webevangelists .
  50. 50. Microformats hCard <div > <a http://webevangelists.net/blog/ > <span > Benoit </span> <span > Duverneuil </span> </a> <span > Auteur </span> <a href= http://webevangelists.net/ > webevangelists . </a> </div>
  51. 51. Microformats hCard <div class=“vcard” > <a class=“url fn n” href=“ http://webevangelists.net/blog/ ” > <span class=“given-name” > Benoit </span> <span class=“family-name” > Duverneuil </span> </a> <span class=“title” > Auteur </span> <a class=“org”href=“ http://webevangelists.net/ ” > webevangelists . </a> </div>
  52. 52. Autres Microformats hCard : modélise les vCards et décrit les personnes, les lieux et les organisations, hCalendar : modélise iCalendar et s'utilise pour décrire des événements. <ul><li>XFN – réseaux sociaux, </li></ul><ul><li>rel-license – contenus sous licenses, </li></ul><ul><li>XOXO - listes et plans, </li></ul><ul><li>VoteLinks – pour/contre un lien, </li></ul><ul><li>rel-nofollow - une tentative pour décourager du spam provenant de tiers, </li></ul><ul><li>rel-tag - contenus tagués, </li></ul><ul><li>xFolk – liens tagués, </li></ul><ul><li>adr – adresses postales, </li></ul><ul><li>geo – géolocalisation, </li></ul><ul><li>hAtom – syndication, </li></ul><ul><li>hListing – annonces classées, </li></ul><ul><li>hResume – CVs, </li></ul><ul><li>hReview – critiques, </li></ul><ul><li>rel-directory – création et inclusion de répertoires distribués, </li></ul><ul><li>… et beaucoup d’autres en cours de développement. </li></ul>
  53. 53. 2004 Marco Wesckamp, aka Marumushi , Newsmap en Flash des Google News . Mode de représentation innovant remettant en cause les principes d’ergonomie pour le Web.
  54. 54. 2005 The Zen of CSS Design est publié par Dave Shea , le créateur de CSS Zen Garden et la spécialiste de design Web, Molly Holzschlag .
  55. 55. 2005 Explosion de la vidéo en ligne YouTube, Dailymotion et les autres Des centaines de plateformes de partages vidéos, La vidéo devient portable , Apparition des Vlogs …

×