Webdesign Passe Present et Present Part2

50 %
50 %
Information about Webdesign Passe Present et Present Part2

Published on February 4, 2008

Author: bduverneuil

Source: slideshare.net

Description

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/

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/

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

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.

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.

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 .

2001 Naziha Mestaoui et Yacine Ait Kaci d’ Electronic Shadow conçoivent, en collaboration avec France Telecom, un vêtement communiquant connecté aux Web.

2001 Le site d’animation Tongsville.com/city/ à scrolling vertical créé l’événement avec ses personnage en pixels et ses interactions .

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…

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

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 sur les contenus textuels , audience très large…

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 É

Flash n’est pas entièrement inaccessible . Un mauvais codage (X)HTML peut rendre l’interface Web complètement inaccessible .

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éponses pour des besoins différents et complémentaires Quels outils pour quels besoins?

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.

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

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

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 …

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.

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.

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

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.

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.

Technical skill is mastery of complexity , while creativity is mastery of simplicity . E. Christopher Zeeman, Mathématicien “ ”

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.

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 Matthew Mullweg Tantek Celik Eric Meyer XHTML Friends Network (XFN). Global Multimedia Protocol Group http://gmpg.org

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 .

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 innovent en utilisant Flash Communication Server et Flash pour distribuer des contenus vidéo .

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…

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

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 .

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 .

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

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 . Thomas Watson Jr, Président d’IBM (1952-1971) “ ”

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.

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

<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 L’agence interactive North Kingdom remporte de multiples récompense pour l’expérience interactive : Vodafone Future Site .

2004 Le tsunami Web 2.0 . Plus qu’un concept marketing, plus qu’une évolution technologique… C’est une révolution des usages.

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

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.

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

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

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

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…

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…

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.

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.

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é’’

Microformats hCard http://webevangelists.net/blog/ Benoit Duverneuil Auteur http://webevangelists.net/ webevangelists .

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>

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>

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.

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.

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.

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 .

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 …

Add a comment

Related presentations

Related pages

Béjaïa passé et présent part-2 .avi - YouTube

Béjaïa passé et présent part-2 .avi ... histoire naturelle et sociale de la region de bejaia , un film qui date de 2006 de thais production ...
Read more

Le participe présent - en + ant - gérondif.mp4 - YouTube

... video is in French and explains how to form the present participle participe présent or en + ant / gérondif / gerund et ... present ...
Read more

Participe/Gérondif (Partizip/Gerundium) - Lingolia ...

Le temps n’ étant pas trop mauvais, Max a pu jouer au foot samedi dernier. Le match fut passionnant et l’équipe adverse était surprenante. En jouant ...
Read more

Present Perfect or Past Simple Tense?

Present Perfect Simple: Past Simple ... We use the past simple for past events or actions which have no connection to the present. We use the present ...
Read more

verbs - PRESENT PERFECT / PAST SIMPLE - exercises

Present perfect - past simple exercises. Present perfect simple and past simple exercises. Learn English online: verbs exercises. ESL.
Read more

Introduction to the French Present Tense - Learn French at ...

The French present tense, called le présent or le présent de l'indicatif, is quite similar in usage to the English present tense. The French ...
Read more

Passé composé – Wikipedia

... dem italienischen Passato prossimo und hat funktionelle Gemeinsamkeiten mit dem englischen Present ... petit déjeuner et ... des passe composé wird ...
Read more

Present Perfect or Past (prétérit) - e-Anglais.com ...

... present perfect ou prétérit ... Répondez aux questions et cliquez sur Correct. Notez qu'il y a aussi une leçon sur le Present Perfect.
Read more