Your SlideShare is downloading. ×
0
Webdesign Passe Present et Present Part2
Webdesign Passe Present et Present Part2
Webdesign Passe Present et Present Part2
Webdesign Passe Present et Present Part2
Webdesign Passe Present et Present Part2
Webdesign Passe Present et Present Part2
Webdesign Passe Present et Present Part2
Webdesign Passe Present et Present Part2
Webdesign Passe Present et Present Part2
Webdesign Passe Present et Present Part2
Webdesign Passe Present et Present Part2
Webdesign Passe Present et Present Part2
Webdesign Passe Present et Present Part2
Webdesign Passe Present et Present Part2
Webdesign Passe Present et Present Part2
Webdesign Passe Present et Present Part2
Webdesign Passe Present et Present Part2
Webdesign Passe Present et Present Part2
Webdesign Passe Present et Present Part2
Webdesign Passe Present et Present Part2
Webdesign Passe Present et Present Part2
Webdesign Passe Present et Present Part2
Webdesign Passe Present et Present Part2
Webdesign Passe Present et Present Part2
Webdesign Passe Present et Present Part2
Webdesign Passe Present et Present Part2
Webdesign Passe Present et Present Part2
Webdesign Passe Present et Present Part2
Webdesign Passe Present et Present Part2
Webdesign Passe Present et Present Part2
Webdesign Passe Present et Present Part2
Webdesign Passe Present et Present Part2
Webdesign Passe Present et Present Part2
Webdesign Passe Present et Present Part2
Webdesign Passe Present et Present Part2
Webdesign Passe Present et Present Part2
Webdesign Passe Present et Present Part2
Webdesign Passe Present et Present Part2
Webdesign Passe Present et Present Part2
Webdesign Passe Present et Present Part2
Webdesign Passe Present et Present Part2
Webdesign Passe Present et Present Part2
Webdesign Passe Present et Present Part2
Webdesign Passe Present et Present Part2
Webdesign Passe Present et Present Part2
Webdesign Passe Present et Present Part2
Webdesign Passe Present et Present Part2
Webdesign Passe Present et Present Part2
Webdesign Passe Present et Present Part2
Webdesign Passe Present et Present Part2
Webdesign Passe Present et Present Part2
Webdesign Passe Present et Present Part2
Webdesign Passe Present et Present Part2
Webdesign Passe Present et Present Part2
Webdesign Passe Present et Present Part2
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Webdesign Passe Present et Present Part2

2,994

Published on

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

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/

Published in: Technology
2 Comments
7 Likes
Statistics
Notes
  • Consultez la 1ère partie : http://www.slideshare.net/bduverneuil/webdesign-pass-prsent-et-prsent-part1
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Consultez la troisième partie :
    http://www.slideshare.net/bduverneuil/webdesign-passe-present-et-present-part3/
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
2,994
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
2
Likes
7
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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. La Bulle Internet est à son apogée, le Web à déjà ses superstars …
    • Joshua Davis est un pionnier de la création artistique sur le Web.
    • Il mélange art pictural, théorie du chaos, programmation, graphisme et animation.
    1998 - 2000
  • 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 “ ”
  • 26. Benjamin Fry et Casey Reas inventent Processing
    • Processing
    • est un environnement
    • de programmation Java
    • et un langage simple et complet. Il s'agit d'un logiciel libre, gratuit
    • et multi-plateformes .
    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. 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.
  • 39. Geoff Stearns écrit le SWFobject qui permet d’intégrer des modules Flash dans les pages Html
    • <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>
    2004
  • 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/ “ ”
  • 45.
    • 2004 – O’Reilly ETech
    • Donner du sens aux contenus avec les Microformats
    • Quels Usages?
    • Les microformats sont la base technique du &quot;web 3.0&quot; ?
    • Un outil au service du design
  • 46.
    • Les microformats sont :
    • une façon de penser les données,
    • un concept ancien,
    • des principes de design pour les formats,
    • des ajouts d’information dans le code HTML,
    • 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,
    • adaptés aux comportements actuels et aux modèles d’usages,
    • un ensemble de formats de données standards simples et ouverts…
    • les microformats ne sont pas :
    • un nouveau langage, compatibilité avec HTML 4.01 et le XHTML,
    • une approche complètement nouvelle qui jette ce qui fonctionne aujourd’hui,
    • infiniment extensibles et ouverts sans fins…
  • 47.
    • les principes des microformats :
    • résoudre un problème spécifique,
    • démarrer aussi simple que possible,
    • un design d’abord conçu pour les humains, ensuite pour les machines,
    • réutilisation de briques provenant de standards largement adoptés,
    • modularité, facilité d’insertion,
    • permettre et encourager le développement décentralisé des contenus et services.
    • En ajoutant des microformats à votre HTML, la page elle-même devient l'API .
    • En tordant légèrement un gabarit HTML, beaucoup de sites peuvent créer millions d'instances de microformats en quelques minutes.
    • 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.
  • 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>
  • 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.
    • XFN – réseaux sociaux,
    • rel-license – contenus sous licenses,
    • XOXO - listes et plans,
    • VoteLinks – pour/contre un lien,
    • rel-nofollow - une tentative pour décourager du spam provenant de tiers,
    • rel-tag - contenus tagués,
    • xFolk – liens tagués,
    • adr – adresses postales,
    • geo – géolocalisation,
    • hAtom – syndication,
    • hListing – annonces classées,
    • hResume – CVs,
    • hReview – critiques,
    • rel-directory – création et inclusion de répertoires distribués,
    • … et beaucoup d’autres en cours de développement.
  • 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 …

×