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/

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/

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. 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. 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. 2001 Le site d’animation Tongsville.com/city/ à scrolling vertical créé l’événement avec ses personnage en pixels et ses interactions .

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. HTML Vs FLASH Contenus Vs Creativité? Idée reçue n°3

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. Image de la marque et expérience immersive de l’utilisateur, stratégies virales et à court-termes, …

11. Architecture d’information complexe , Possibilité de copier/coller des contenus, SEO important, positionnement fort sur les contenus textuels , audience très large…

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. Flash n’est pas entièrement inaccessible . Un mauvais codage (X)HTML peut rendre l’interface Web complètement inaccessible .

14. Recognizing the need is the primary condition to design. Charles Eames, designer américain & architecte “ ”

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. 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. 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. 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. 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. 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. 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. 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. 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. 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. Technical skill is mastery of complexity , while creativity is mastery of simplicity . E. Christopher Zeeman, Mathématicien “ ”

27. 2002 Matthew Mullweg Tantek Celik Eric Meyer XHTML Friends Network (XFN). Global Multimedia Protocol Group http://gmpg.org

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. Much of the Web is like an anthill built by ants on LSD . Jakob Nielsen, consultant en usabilité du Web “ ”

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. 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. 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. 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. 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. 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. Demo Reel – Kurtz - Pierre Magnol .

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

40. 2004 L’agence interactive North Kingdom remporte de multiples récompense pour l’expérience interactive : Vodafone Future Site .

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. 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. 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. 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/ “ ”

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. Microformats hCard http://webevangelists.net/blog/ Benoit Duverneuil Auteur http://webevangelists.net/ webevangelists .

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

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