Abonnement

S'abonner à WebEvangelists.net.

http://www.wikio.fr

Posts Tagged ‘ CSS ’

fév 09
Samedi

Webdesign Passé, Présent et… Présent

Filed under Planète Web/Canada, Dossiers, Evènements, Evènements/Festival Webdesign Rouyn, Design Interactif/Web Design

Au mois de Novembre dernier, j’étais invité au Québec lors de la 3ème édition du Festival de Webdesign de Rouyn-Noranda. Ce fut l’occasion de créer un échange autour de ce qu’est le Webdesign. Pour ceux qui n’ont pas pu assister à la conférence, vous en trouverez une transcription ci-dessous.
Sur demande le document Powerpoint peut aussi être disponible au téléchargement.

WEBDESIGN, PASSE, PRESENT ET… PRESENT

SlideShare | View

Bonjour,

Je m’appelle Benoit Duverneuil. Je suis ce qu’on appelle dans le jargon Internet un évangéliste Web et consultant. J’interviens donc régulièrement auprès de professionnels, d’entreprises et de grandes marques, d’Universités et de centres de formations, ainsi qu’auprès de collectivités pour expliquer les enjeux, les usages, les technologies, et les services utilisant l’Internet et les nouvelles technologies. J’accompagne donc différents types d’organisations dans leur stratégie Internet. J’interviens plus particulièrement dans le domaine des usages Web et Multimédia depuis 1998. Je suis aussi passionné par tout ce qui touche à la création numérique quelle qu’elle soit. J’ai notamment, depuis 1997, largement prêché en faveur du WebDesign, du Net Art et du Multimédia.

Cette présentation est la version longue issue d’une conférence, en Novembre 2007, que j’ai donnée à l’occasion du 3ème Festival de Webdesign de Rouyn-Noranda. Si vous vous posez la question, Rouyn est une ville d’Abitibi-Temiscamingue, située au Québec. Comme de nombreux territoires souffrant d’un faible nombre d’infrastructures de transport, Rouyn-Noranda a parié sur les Nouvelles Technologies pour accélérer son développement économique. Ce pari se matérialise par un certain nombre d’initiatives et d’organisations comme le département multimédia de l’UQAT, l’Université du Québec en Abitibi-Temiscamingue qui accueillait ce troisième Festival International de Webdesign.

Cette présentation est diffusée sous une licence Creative Commons qui vous autorise à la télécharger, à la modifier à votre guise et à la re-diffuser aux tiers de votre choix.

La présentation est titrée Webdesign, Passé, Présent et Présent. On m’a effectivement demandé de faire une présentation générale de ce qu’est le Webdesign. J’ai choisi de traiter ce sujet sous un angle chronologique. Cependant, comme vous le verrez plus tard dans la présentation, je m’attarde essentiellement sur les 10 dernières années et cela pour plusieurs raisons.

D’abord parce que les 10 dernières années, à travers la création du Web, ont été un formidable terrain d’expérimentations tous azimuts et qu’il y a déjà énormément de choses à dire sans se projeter dans le futur.
Ensuite, comme beaucoup de technologies, d’usages innovants, voir même de pratiques artistiques, il est commun de voir qu’il s’écoule souvent plusieurs années entre la découverte, les premières expérimentations et la reconnaissance, la vulgarisation et l’appropriation. On est donc face à des cycles récurrents pendant lesquels plusieurs années peuvent s’écouler. Sur une courte histoire comme celle de l’Internet et du Webdesign, le phénomène prend encore plus d’importance.

Enfin, en tant qu’entrepreneur, de consultant et passionné par les nouvelles technologies, on me demande très souvent quel est mon avis sur les tendances à venir, sur les usages et technologies qui feront la une demain. Pour être très honnête, je considère que ce genre de prédictions sont plutôt risquées et inutiles. Risquées car l’évolution de l’Internet et telle qu’il est presque impossible de dire de quoi demain sera fait. Si c’était le cas, nous ne serions pas en train de nous interroger sur les définitions de l’existant, nous serions plutôt en train d’investir ou de créer des organisations pour anticiper un futur retour sur investissement. Inutile car l’histoire récente des nouvelles technologies, son cycle extrêmement court de transformation et de développement rendent le présent et le passé bien plus intéressant à explorer. Lors d’un évènement international consacré au Webdesign, un journaliste a posé la fameuse question à Joshua Davis, Webdesigner et artiste reconnu de la petite planète du Web créatif. Il a répondu que le futur ne l’intéressai absolument pas, parce qu’il y a tant de champs des possibles inexplorés aujourd’hui avec les technologies et services Web et multimédia à notre disposition. Je me range totalement du même avis.

Qu’est-ce qu’un Webdesigner?
Difficile encore aujourd’hui de répondre à cela. Plus de questions que de réponses.
D’ailleurs dès que l’on touche à question du design et de sa définition, tout se complique. Ce n’est pas une difficulté spécifique au Webdesign.

In a room full of top software designers, if any two of them agree, that’s a majority. (Bill Curtis)

Webdesigners ?
La définition est d’autant plus compliquée que les contours du Webdesign restent très flous, que les métiers et les techniques qui sont censés s’y rapporter sont en permanente évolution. Par exemple, aujourd’hui, des architectes de l’nformation, des Flasheurs, ou encore des directeurs artistiques vont se considérer et s’auto-proclamer Webdesigners. Pour autant, cela est sujet à débat puisque les uns ne considèrent pas forcément les autres en tant que tels. De plus, on observe un certain phénomène d’acculturation. Par exemple, les webmasters d’hier se font parfois aujourd’hui appeler Webdesigners ou Directeurs Artistiques Interactifs car comme nous sommes face à un marché où l’innovation et la compétition sont des éléments très importants, où les cycles de renouvellement sont très forts, on essaye de se donner un titre plus en phase avec les modes et les tendances.
Enfin, il y a une typologie de professionnels qui se sont approprier le titre de Webdesigners mais qui ne sont ni capables d’en définir les rôles et responsabilités, ni d’en préciser les critères de différenciation. Ils font de la création Web et sont donc Webdesigners.
Tout cela ne facilite donc pas les tentatives de définition du Webdesign et de ses métiers.

Wikipédia France
Etant moi-même bien en peine de pouvoir donner du sens à ces pratiques que je pense pourtant connaître et côtoyer au quotidien depuis déjà quelques années, je me suis dit que la meilleure chose à faire était de comparer les différentes définitions du Webdesign. Par exemple, je me suis attardé sur Wikipédia puisque via l’écriture collaborative, on pouvait espérer y trouver une définition qui propose une certaine représentativité. Et pourtant les résultats furent très surprenants. D’abord, la définition française introduit le Webdesign comme l’une des étapes de la conception d’un site Web. Pire, le Webdesign est réduit à une forme visuelle qu’on rajoute à un site Web. On est clairement face à une définition qui s’inspire du design print et pas de l’expérience et de l’environnement si particulier dans lequel s’inscrit le Webdesign. En Anglais, la définition est toute autre, mais n’en est pas plus claire pour autant. D’abord, on nous parle de process de création et d’exécution pour ensuite glisser vers les contenus et les langages d’écriture pour le Web.
Cela n’est ni évident, ni satisfaisant. C’est également troublant puisque non-seulement c’est un nouvel exemple de la faiblesse d’un outil collaboratif comme Wikipédia mais surtout on nous fournit des explications autant farfelues que différentes du Webdesign.

Une preuve supplémentaire avec les définitions du Webdesign via les pages non-francophones de Wikipédia.
Par exemple, en Espagne, on nous explique justement que le Webdesign n’est pas un modèle de conception, mais au contraire que le Webdesign est beaucoup plus riche puisqu’il prend en compte de très nombreux facteurs comme la navigation, l’interactivité…

En Allemagne, l’approche est différente puisqu’elle se concentre d’abord sur de la conception et du développement. Elle se focalise également sur les utilisateurs. Deuxième élément intéressant, il est question de conception d’interfaces. Enfin, on en fait rapidement une histoire de langages informatiques avec HTML et XHTML mais en rajoutant toutefois CSS et les fameuses feuilles de style qui est sont très utilisés par les Webdesigners aujourd’hui.

En Italie, on a une vision à la fois pragmatique et mercantile de la chose. D’abord, il s’agit simplement du design du Web, et ensuite du business de la création de sites Web.

Au Portugal, la définition est un peu plus intéressante. C’est une des rares qui présente le Webdesign comme une extension du design traditionnel. On fait enfin le lien entre design pour le Web et design au sens connu du terme. La définition réduit par contre le Webdesign à la création de sites et de brochures électroniques. Enfin, et cela rejoint ce qu’on disait au début, c’est-à-dire la multiplication des métiers et des compétences qui peuvent se ranger dans le large tiroir du Webdesign. On nous parle donc de multidisciplinarité.

Enfin, la plus surprenante définition est celle de Wikipédia Russie puisque le Webdesign s’arrête à la réalisation de sites Web et à la configuration de serveur.

Si toutes ces définitions ajoutaient les unes aux autres confirment qu’il est aujourd’hui bien difficile et audacieux de vouloir donner une définition du Webdesign, on peut approximativement identifier les multiples éléments qui composent son environnement. Il est donc question de programmation, de conception, d’interfaces, de contenus multimédia, d’expérience utilisateur… etc.

Pour tenter d’aller plus loin dans la définition du Webdesign, je vous propose de garder ces éléments à l’esprit, et de vous embarquer avec moi dans un petit voyage dans le passé. Un voyage qui n’est autre qu’une expérience personnelle du Webdesign. Vous avez donc le droit de ne pas être d’accord avec mes observations, notamment parce que vous pouvez avoir une expérience du design Web totalement différente. Ce que je mets en avant également dans ce récit, ce sont toutes ces technologies, usages et services, inventés il y a déjà quelques années et qui ne deviennent réalité qu’aujourd’hui ou qui le seront peut-être demain. Tout n’est finalement qu’une histoire de cycles et une fois encore, il est intéressant d’observer combien le futur est déjà présent dans notre actuel espace-temps ou même dans notre passé. C’est donc une sorte de retour vers le futur que je vous propose.

1963 - IVAN SUTHERLAND
SketchPad, développé par Ivan Sutherland au début des années 60 et publié dans sa thèse de doctorat en 1963, est considéré comme la première interface graphique. Développé au MIT Lincoln Laboratory, c’est le premier système à utiliser un écran cathodique et un crayon optique pour permettre l’édition graphique de dessins techniques. Bien plus tard, en 1983, Ben Shneiderman appellera ce type d’interactions avec des objets représentés à l’écran “manipulations directes“, par contraste avec l’utilisation systématique, jusqu’au début des années 80, de langages de commandes obligeant à mémoriser les noms des commandes et objets.
De nombreux concepts fondamentaux des interfaces graphiques ont pour origine SketchPad: Désignation directe des objets à l’écran, retour d’information immédiat sous forme de lignes élastiques, placement des segments d’une figure par contraintes (parallèle, angle droit…), zoom avant et arrière sur le dessin avec un facteur de 2000, etc. Même au niveau de la mise en œuvre, les concepts sont étonnamment modernes: représentation des objets graphiques en mémoire, résolution de contraintes, système de rendu graphique.
Sutherland développe SketchPad sur le TX-2, l’un des rares ordinateurs de l’époque utilisable en ligne: Jusqu’à la fin des années 70, la grande majorité des ordinateurs sont utilisés de façon non interactive, en traitement par lots (”batch“).
Pour moi, c’est une date importante car c’est vraiment à partir de là que le graphique design sur écran connecté commence à se développer. Bien-sûr, il n’est pas encore question de Webdesign mais c’est un évènement précurseur de ce qui se développera quelques années plus tard.

1973 - XEROX ALTO ET SUPERPAINT
Mars 1973. Le premier prototype de la station de travail Xerox Alto démarre pour la première fois. La station de travail conçue au XEROX PARC utilise le langage orienté objet SmallTalk, une interface graphique, une souris et peut être mise en réseau via Ethernet. Bien qu’on le cite comme étant le premier ordinateur personnel, il y a d’autres machines qui sont aussi candidates au titre, et le Xerox Alto fut un outil de recherche de Xerox, pas un produit commercial.
Le Xerox-Alto contient le programme Superpaint qui est à la fois un logiciel de dessin en couleur et aussi le premier logiciel d’effets vidéo numériques !
Là encore, c’est un ancêtre du Webdesign moderne, les fondamentaux, les outils et le concept existent déjà.

Photoshop n’est pas, loin s’en faut, le plus ancien logiciel d’imagerie numérique. Auparavant il y eut, entre autres, SuperPaint qui, comme son nom l’indique, permettait la création d’images complexes, associant, comme le fera Photoshop, des éléments en mode point (pixels) et d’autres en mode courbe, c’est-à-dire, en jargon d’images 3D, des splines. Il est amusant de voir que finalement l’interface de logiciels comme Photoshop qu’on utilise beaucoup aujourd’hui en Webdesign est très proche des premières versions de Superpaint comme ici avec cette capture d’écran sur un Macintosh.

1973 – MURIEL COOPER
Muriel Cooper est sans nul doute l’une des personnalités les plus importantes et les plus influentes de l’histoire du design et du design interactif. A la fois, enseignante-chercheuse et designer, son travaille influença le design interactif et le design d’information moderne.
Elle est aussi l’une des co-fondatrice du MIT Media Lab où elle enseigna le design média interactif en qualité de directrice du Visible Language Workshop. Je ne saurais que trop peu vous conseiller ses écrits, ils sont fondamentaux dans l’histoire de la création Web et numérique.

1982 - MINITEL
Entre 1970 et 1978 la France met au point le protocole de communication du minitel qui anticipe dans les années 80 sur le réseau Web. C’est aussi la naissance du modèle économique Kiosque qui marquera durablement son empreinte sur les modèles économiques de services en ligne. Le Minitel, ce fut jusqu’à 6 millions de terminaux et 20.000 services actifs en 1990.
Malheureusement, le minitel restera quasi-exclusivement franco-français et disparaitra avec l’avènement de l’Internet.

Basé sur l’échange de données analogiques via le téléphone, celui-ci n’autorise aucune nuance pour l’affichage des images. 120 caractères par seconde et 960 cases dont chacune ne peut contenir qu’un seul caractère, une seule « couleur » ou plutôt nuance de gris, et un seul fond.
Nous sommes loin du PostScript et du WYSIWYG qui va déferler à la fin des années 80. L’expression télématique va donner lieu à un style graphique minimaliste qui n’est pas sans rappeler l’expression des jeux vidéos de l’époque (Pong, Atari etc.) mais aussi bien la typographie russe des années 20. Le signe bitmap vient de naître et nous rappelle une fois de plus que bien souvent la technologie est à l’origine des inventions du design graphique. De nombreux graphistes et typographes vont trouver là un mode d’expression des plus intéressants…

1988
Introduit par Bell Canada en 1988, Alextel, contrairement à l’expérience française du Minitel, n’a pas connu le succès escompté: seulement 20000 appareils furent distribués dans la région de Montréal avant que la compagnie ne déclare forfait. Néanmoins, ce terminal offrait avant l’heure un intéressant aperçu de quelques-unes des possibilités qui assureront, quelques années plus tard (vers 1994), le succès phénoménal de l’Internet: forums de discussion (bbs), clavardage (chat)…

80’s - Compuserve
Compuserve est un prestataire fondé en 1976 qui utilise son propre réseau. Il était au départ incompatible avec le protocole TCP / IP. En 1979, CompuServe est devenue la première entreprise à proposer le courrier électronique et le support technique pour les utilisateurs de PC. La société a battu de nouveaux records en 1980 en devenant le premier service en ligne à proposer le chat en temps réel grâce à son logiciel CB Simulator. Il n’était pas inhabituel au début des années 80 de devoir débourser 30$ par heure pour se connecter à CompuServe. En conséquence, la société était surnommée CompuSpend (spend signifie dépenser) ou Compu$erve. Au milieu des années 80, CompuServe était le service en ligne le plus important. Des comptes pouvaient être achetés dans la plupart des magasins informatiques américains (une boîte avec un guide d’instruction et un compte d’essai) ; la notoriété de ce service était très importante. Au début des années 90, CompuServe compte des centaines de milliers d’utilisateurs qui visitent ses milliers de forums modérés, ancêtres de Usenet, puis des forums de discussions d’aujourd’hui. Parmi ces forums, certains dédiés au support client de sociétés de matériel ou de logiciels informatiques. En 1992, CompuServe héberge le premier dispositif de courrier électronique WYSIWYG connu et les posts de forums. Des polices d’écritures, des couleurs et des émoticônes étaient codés sur du texte 7 bits basé sur les messages via les logiciels de navigation de CompuServe NavCIS, utilisables avec les systèmes DOS et le premier Windows 3.1. Une petite révolution dans le monde du design Web.

1984 – MACINTOSH
Pour la plupart des MacFans, le Macintosh est né en 1984. Pour d’autres, il a en fait était créé en 1979 par Jef Raskin.
Courant 1979, un peu plus d’un an après son arrivée chez Apple, il se voit confier le projet “Annie“, visant à créer une machine bon-marché destinée à concurrencer les consoles de jeu. A la même époque, le désormais célébrissime et incontournable Steve Jobs et son équipe travaillent sur le Lisa, un autre projet plutôt orienté sur le marché des entreprises.

Raskin préfère se tourner vers le grand public sans toutefois négliger les capacités techniques de la machine avec 64 ko de mémoire vive, un port pour le modem et un pour l’imprimante, un lecteur de disquettes 200 ko, les langages Basic et Forth en mémoire morte… Ce qui à l’époque est une véritable petite machine de guerre. Et surtout, Raskin implémente des logiciels très simples à utiliser!
L’idée du projet Macintosh, dont le nom officiel aurait bien pu être Apple V, n’est pas franchement du goût de Steve Jobs. Il dénigre le Macintosh à chaque réunion et devient l’un des principaux opposants de Raskin… jusqu’au moment où il découvre le vrai potentiel de la machine et change complètement d’avis. Il finit donc même par en revendiquer la paternité !
Pour créer les premiers prototypes de Macintosh, Jef Raskin fait appel à Bill Atkinson de l’équipe Lisa. Peu de temps après, Steve Jobs rejoint l’équipe Macintosh après son éviction de la tête du projet Lisa. Peu à peu, Steve Jobs récupère la direction du projet, ce qui provoquera la démission de Raskin le 1 mars 1982.
Finalement, avec deux ans de retard, Apple présente le Macintosh le 24 janvier 1984.
Le lancement du Macintosh est annoncé par le spot “1984“, basé sur le roman du même nom, écrit par Georges Orwell.

Le Macintosh a tout pour plaire aux utilisateurs : un design innovant, très compact, un écran de haute qualité, et deux logiciels de qualité inclus avec la machine dont McPaint. Programmeur hors pair, Bill Atkinson a conçu la partie graphique du système MacOS du Macintosh d’Apple, baptisée QuickDraw. Pour en démontrer les possibilités, Bill Atkinson a écrit un programme de dessin, MacPaint, qui était fourni gratuitement lors de l’achat des premiers Macintosh. MacPaint est un outil de dessin, extrêmement facile à utiliser, et dont tous les logiciels modernes comportant des fonctions de dessin ou d’illustration sont les héritiers. Aujourd’hui Bill Atkinson a complètement arrêté l’informatique pour se consacrer pleinement à sa seconde passion, la photographie.

Autre grande nouveauté pour le grand-public, la souris qui permet de commander l’ordinateur en cliquant ou en déplaçant des icônes à l’écran. Toute l’utilisation reposant sur des métaphores (la corbeille, les dossiers, le bureau…), le Macintosh révolutionne l’utilisation de l’ordinateur et permet enfin à n’importe qui de comprendre en quelques minutes toutes les bases de l’utilisation de l’ordinateur.

1989 - INTERNET
En 1989, il travaille au CERN, qui est alors connecté à Internet. Berners-Lee vit là l’opportunité de lier le principe d’hypertexte avec Internet. Il déclara plus tard : « Je n’eu qu’à prendre le principe d’hypertexte et à le lier avec le principe du TCP et du DNS et alors – boum ! – ce fut le World Wide Web ! ».
À partir de 1990, il développe les trois principales technologies du Web : les adresses Web, le Hypertext Transfer Protocol (HTTP) et l’Hypertext Markup Language (HTML).

Il développe le premier navigateur Web et éditeur Web (dénommé WorldWideWeb et développé sur NeXTSTEP) et le premier serveur HTTP, le CERN httpd. Il travaille avec Robert Cailliau et quelques autres personnes du CERN qu’on a malheureusement tendance à oublier quand on présente la création de l’Internet.

1990 – PREMIER NAVIGATEUR
Le premier navigateur-éditeur date de 1990. Développé en deux mois, il s’appelait WorldWideWeb (plus tard rebaptisé Nexus), et fut développé en Objective C sur NeXT. On pouvait complètement indiquer les contenus, les liens hypertextes prenaient donc du sens, c’était le début du Web sémantique. En quelque sorte, le Web 2.0, voir le Web 3.0 sont inventés en 1990.

1987 - 1990 - PHOTOSHOP
Le logiciel incontournable des Webdesigners, Photoshop, a été imaginé en 1987 par un étudiant de l’université de Michigan: Thomas Knoll. Thomas Knoll préparait à l’époque un doctorat en “Computer vision“. Pendant son temps libre, il programmait une petite application d’affichage d’images en niveaux de gris sur son Mac Plus, le “Display“. Après quelques mois de travail, l’application finit par accepter la couleur. Rapidement, John Knoll, son frère, se joint au projet. John travaille à ILM (Industrial Light and Magic, la société de George Lucas spécialisée dans les effets spéciaux), et comprend rapidement le potentiel commercial de l’application pour le marché professionnel. Après quelques temps, ils baptisent enfin le programme du nom de “Photoshop“. Pour rentabiliser rapidement l’application et la diffuser sur le marché, ils vont ensuite se rapprocher de différents investisseurs, dont la société Adobe qui signe un accord avec les frères Knoll en Avril 1989.

Au début, le programme était considéré comme un outil de manipulation et de retouche d’images numérisées à partir d’un scanner. A l’époque, un scanner était un investissement relativement couteux plutôt réservé aux professionnels. La première version, même si dans la forme n’a pas beaucoup évolué possède moins d’un quart des fonctionnalités disponibles sur les versions d’aujourd’hui. Les menus déroulants, la barre d’outils, les fenêtres flottantes sont déjà là. Les outils sont ceux que nous connaissons aujourd’hui, et toutes leurs icônes nous sont familières.

The most powerful designs are always the result of a continuous process of simplification and refinement. (Kevin Mullet)

Parmi les pionniers qui ont marqué l’histoire du design graphique pour le Web, on trouve plusieurs enseignants-chercheurs du MIT, dont la simplicité et l’utilisation de la programmation pour faciliter la compréhension et l’intégration avec les contenus est le thème favori.

1991 - JOHN MAEDA
C’est le cas notamment avec John Madea, qui dirige le département Aesthetics and Computing Group du MIT. Il est lui-même un ancien élève de Muriel Cooper. On va le voir, il y a en fait tout une lignée de spécialistes et d’experts de très haut-niveau dans le sillon de Muriel Cooper.
L’approche de John Maeda est autant intéressante que révolutionnaire. Pour lui, l’ordinateur est à considérer comme un outil quelconque, comme un médium à part entière, un « matériau d’expression » pour reprendre ses mots.
A partir de 1994, ses expériences font la part belle à la typographie ; un système de représentation plus familier et donc apte à séduire un public élargi. John Maeda utilise le Web pour enrichir et dynamiser la lecture. Le résultat est souvent saisissant, les lettres s’animent au gré du sens qui s’en dégage et l’internaute est souvent associer via les actions de ses mains sur le clavier ou en utilisant la souris.
Il a également mis au point une méthode d’apprentissage de la programmation nommée design by numbers qui est le titre d’un livre, ainsi que d’un programme éponyme. Cette méthode s’adresse particulièrement aux non-informaticiens que sont souvent les designers graphiques. Par ses théories et ses travaux en matière de programmation, il invente les bases de ce qui sera plus tard le Processing.

John Maeda est l’auteur de plusieurs ouvrages incontournables sur le design interactif comme Creative Code, Maeda@Media, et Design by Numbers.
Dans son ouvrage The Laws of Simplicity, il développe 10 règles fondamentales de la simplicité qui trouvent évidemment tout leur sens dans le design Web.
Réduire, organiser, économiser le temps, apprendre, accentuer la différence, cerner le contexte, stimuler l’émotion, gagner la confiance, accepter l’échec et viser l’unité.
Son étude actuelle, “Simplicity” (lancée en janvier 2005), découle d’une prise de conscience : la technologie doit s’adapter à l’humain, et non l’inverse. Il se concentre donc sur la simplification à outrance des interfaces. Son objectif est de développer des technologies plus proches des sensations humaines afin d’éviter toute frustration et de générer une meilleure compréhension et interaction avec les contenus.

Pour illustrer son travail de création graphique et de simplification, j’ai choisit la couverture du numéro du 9 septembre de Key, le supplément immobilier du New York Times, qu’il a réalisé. Le résultat final va certainement vous paraître très complexe et aller à l’encontre de ce que je viens d’exposer, pourtant sa méthodologie et les outils employés pour parvenir à cette représentation de la crise américaine des subprimes vont dans le sens de la simplification. En effet, à partir de représentation graphique simple et à l’aide de logiciels de programmation, il a pu compiler les couches graphiques et matérialiser les connexions entre les villes de la carte en quelques clics. Sans cette approche, il aurait été presque impossible ou en tous cas très fastidieux de créer une œuvre semblable. L’ensemble du processus est d’ailleurs décortiqué sur le site du New-York Times.

1993 – VIRTOOLS
En 1993, apparaît sur le marché une start-up française prometteuse qui propose une solution de création 3D temps réel pour le Web: Virtools. Le soft permet de prototyper, développer et déployer des applications 3D interactives sur Internet. Virtools est aujourd’hui une filiale du Groupe Dassault Systèmes avec près de 5700 collaborateurs et possède des bureaux à Paris et Montréal. Virtools Dev est un logiciel facile d’utilisation qui permet de réduire considérablement les temps de développement d’applications 3D temps réel. Il est très utilisé dans le milieu du jeu vidéo, de la réalité virtuelle et du multimédia en général. Editeur indépendant de logiciels depuis 1999, Virtools est devenu le leader des solutions de développement de contenu interactif riche en 3D.
Après deux ans de travail, les ingénieurs de Dassault System ont réalisé une impressionnante démo, proposant différentes hypothèses quant à la construction des pyramides égyptiennes. La démo diffusée en 2007 tourne en temps réel sous Virtools avec des rendus très impressionnants. Cela ouvre de belles perspectives quant à l’avenir de la 3D pour le Web.

1993 – 1994 – MARC ANDREESSEN, MOSAIC ET NETSCAPE NAVIGATOR
Marc Andreessen est tout just diplomé qu’il déménage en Californie pour travailler pour une entreprise Hi-Tech où il rencontre Jim Clark, le fondateur de l’entreprise Silicon Graphics. A l’époque, Marc Andreessen vient de terminer une nouvelle version de son navigateur Web “Mosaïc“, avec l’aide de son collègue Eric Bina. Jim Clarck comprend rapidement les capacités commerciales de Mosaïc et propose de développer une société autour du produit. Rapidement, Mosaic Communication Corporation voit le jour à Mountain View en Californie. L’Université d’Illinois dans laquelle Mosaïc a été développé par Andreessen contraint la jeune entreprise à changer de nom. Ainsi va donc naître Netscape Communications avec son produit phare, le navigateur Netscape Navigator.
A l’époque, le navigateur est disponible gratuitement sur le Web et remporte rapidement un succès gigantesque.
En 1995, c’est l’explosion. Le monde de la finance découvre le Web et les mécanismes de valorisation qui seront synonymes de l’un des plus importants crash boursier de l’histoire quelques années plus tard. Marc Andreessen devient célèbre et fait même la couverture du Time Magazine. Il est l’image même de la bulle Internet et de cette nouvelle génération de gamins de vingt ans, jeunes, high-tech, ambitieux et pesant déjà plusieurs millions ou milliards de dollars.
Le succès de Netscape attire l’attention de Microsoft qui achète le code source de Mosaïc de la société Spyglass sponsorisée par l’Université d’Illinois pour le modifier et sortir son propre navigateur, Internet Explorer. En 1999, Netscape est acheté par AOL. Depuis, Marc Andreessen n’a pas quitté le devant de la scène Web. Il est devenu CEO d’AOL avant de créer de nouvelles entreprises et services Web innovants. Il est par exemple derrière les succès de Digg.com, Twitter et Ning.

Netscape Navigator après avoir disparu de la surface avec la concurrence acharnée d’Internet Explorer et plus tard de Mozilla Firefox est à nouveau disponible gratuitement pour les nostalgiques comme moi. En fait, le navigateur est une sorte d’add-on sur une base de Mozilla Firefox. Ce qui est passionnant avec Mosaïc et Netscape Navigator, c’est que le grand public et les designers Web de l’époque ont enfin accès à des navigateurs permettant d’afficher facilement du texte et des images.
Quand on regarde ces copies d’écrans des deux navigateurs, c’est assez fascinant de voir qu’encore une fois, les outils n’ont pas tellement changés depuis leur création.

LES DEBUTS DE LA CREATION WEB
Après les expérimentations, l’apparition du Web, et la démocratisation des outils, on assiste véritablement à la naissance du graphisme Web. Et dès le début, nous sommes face à des approches très conflictuelles. D’abord entre deux mondes qui ne se comprennent pas, celui du print et celui du Web. Puis entre des métiers, les développeurs et informaticiens d’un côté, les artistes et graphistes de l’autre. Et enfin, entre les tenants de telles ou telles technologies ou méthodologies de conception. Et malheureusement ces conflits perdurent encore aujourd’hui et nuisent au développement de l’industrie, à sa reconnaissance et sa compréhension.

Idée reçue n°1 Webdesign = Print pour le Web
Par exemple, dans la famille des idées reçues, de nombreux Webdesigners ont débuté avec l’idée que le design web consistait à simplement transposer le design print sur un écran d’ordinateur et plus particulièrement sur un canal de diffusion comme le Web. Donc, dans ce schéma, le webdesigner n’est ni plus ni moins considéré que comme un infographiste.
Aujourd’hui, les choses sont un peu différentes. L’univers, les méthodes et les outils des designers se sont considérablement enrichis avec l’apport de l’animation, de la programmation…

Idéé reçue n°2 Les webdesigners travaillent seulement sur Photoshop
Souvent les designers reçoivent les wireframes déjà prêts. C’est encore un process identique à celui de la presse.
Brand values, mood, essences…. Impossibles de donner du sens et de développer une expérience utilisateur avec des wireframes.
Il y a actuellement un plébiscite pour permettre aux Webdesigners de travailler avec Xhtml plutot qu’avec Photoshop pour tout de suite créer dans le navigateur. Cela peut permettre rapidement de créer un prototype en CSS. Cela peut aider les clients et les spécialistes d’intelligence artificielle à comprendre l’interaction et les plus-values que le design peut apporter et de mieux communiquer avec les techniciens et donc aussi de gagner un temps précieux.
Il est donc urgent et nécessaire de définir des process dédiés au design web.
Il est également important d’intégrer le langage de la programmation dans le travail des designers. Au moins en rajoutant des markups qui vont guider les développeurs. Ces incompréhensions sont essentiellement dûs à l’influence des process du print et de la guerre des clans qu’entretiennent certains développeurs et graphistes.

1994 – W3C
Depuis les premières heures du Web, les principaux fabricants de navigateurs ont tenté de se créer un public captif en créant des extensions HTML propriétaires, restituées uniquement par leurs produits respectifs. Le Web s’est ainsi divisé en deux camps : MSIE et Netscape. Pour que leurs sites soient accessibles aux deux principaux navigateurs, les développeurs Web ne pouvaient opter que pour des choix aussi insatisfaisants les uns que les autres. Comme par exemple n’utiliser qu’une syntaxe commune aux deux navigateurs, et se retrouver avec un site très pauvre, se démarquant peu de la concurrence. Ou encore, ne s’adresser qu’à l’une des deux entreprises et sacrifier ainsi une grande partie de son audience et de sa clientèle potentielle. Et enfin, faire deux versions du même site, au prix d’un travail bien plus important et forcément plus coûteux.
La concurrence entre Netscape et Microsoft a donc mené à une balkanisation du Web, allant complètement à l’encontre de son ambition initiale.

Le World Wide Web Consortium, abrégé W3C, est un consortium fondé en octobre 1994 pour promouvoir la compatibilité des technologies du World Wide Web telles que HTML, XHTML, XML, RDF, CSS, PNG, SVG et SOAP.
Le Word Wide Web Consortium est fondé par Tim Berners-Lee après avoir quitté l’organisme européen pour la recherche nucléaire, le CERN en octobre 1991. Il a été fondé au MIT/LCS (Massachusets Institute of Technology/ Laboratory for Computer Science) avec l’aide de l’organisme de défense américain DARPA - qui est pionnier de l’Internet - et la Commission Européenne. En octobre 2007 on compte 16 bureaux du W3C dans les différentes régions du monde.

Les standards du Web sont un ensemble de technologies et de protocoles utilisés sur le Web définis par le W3C sous forme de recommandations.
La tâche de proposition, définition et d’acceptation de nouveaux standards du Web (ou d’amélioration de standards déjà existants) est confiée au W3C.

On considère souvent à juste titre que nous n’en sommes qu’aux premiers balbutiements de l’Internet. L’avènement de XML, les Web services, l’apparition de nouveaux terminaux d’Accès au Web (PDA, téléphones mobiles, etc), le Web sémantique sont autant de micro-révolutions qui promettent de nouveaux usages. Mais tout cela ne sera rendu possible que si les fondations du Web sont solides. Après un démarrage chaotique, voire anarchique du Web, les normes du W3C autorisent désormais une vision à long terme de son développement.

Principalement, les standards du Web favorisent une accessibilité universelle aux contenus, la production de contenus Web à moindre coût, de tirer profit de la technologie XML, un contrôle qualité optimisé du travail fourni par les prestataires, une réduction considérable du volume des documents, un référencement plus efficace dans les moteurs de recherche, la pérennité des documents et une rétro-compatibilité avec les anciens navigateurs.

Les standards du Web et le W3C sont aujourd’hui pleinement identifiés et reconnus par les Webdesigners. Cela dit, ils peuvent dans certains cas présenter des contraintes fortes à la réalisation d’interfaces innovantes ou hors-normes.

1994 - CSS
CSS = Cascading Style Sheet
Le CSS permet de styliser les contenus HTML
1994, différentes expérimentations de développement de langages pour feuilles de styles sont menées.
- “Stylesheet Proposal” de Pei Wei,
- “Stylesheets for HTML” de Robert Raisch (O’Reilly)
- “Cascading HTML Style Sheets” (CHSS) d’Håkon Wium Lie.
En octobre 1994, le premier véritable brouillon est publié.
En 1996, le Cascading Style Sheets est né de la collaboration entre Håkon Lie et Bert Bos.

1994 - LE DEUXIEME MONDE
Le Deuxième Monde est un jeu vidéo qui a été créée par Canal+ Multimedia et paru en 1994.
Il permettait aux joueurs d’évoluer, par le biais de leur avatar, dans une reconstitution de Paris en 3D ; formant ainsi une communauté virtuelle. D’abord présenté sur un CD payant avec un moteur réalisé par Cryo, le jeu a été fin 1997 converti en VRML.
La première version du 2ème Monde, sur cd-rom, a connu environ 20.000 inscrits. Quand à la seconde, elle fonctionnait en tant que service offert aux internautes du site web de CANAL+. Il y avait plus de 200.000 inscrits dans cette base. Cette première tentative offrait et offre toujours des perspectives intéressantes pour le développement du Webdesign au-delà de la manière classique dont on imagine la navigation sur le Web.

1994 – QR CODE
L’Asie a quelques années d’avance. Le Japon, où cette technologie innovante est née à la fin 2000, compte aujourd’hui plus de 50 millions de téléphones portables équipés.
Ces codes figurent dans toutes sortes de publications, sur tous les sites web, et de plus en plus sur les cartes de visite de professionnels. On en est presque à ne plus utiliser un service portable (avec adresse URL) s’il n’y a pas de QRcode immédiatement disponible.
Le développement du phénomène ne va pas s’arrêter là puisque l’adoption quasi-universelle de lecteurs QRCode préinstallés sur tous les nouveaux portables sortis récemment sur le marché Japonais devrait démultiplier les usages.

En Europe et aux USA, c’est le même principe. Grâce au MobileTag, vous pourrez accéder à la version mobile de n’importe quel article.
Pour pouvoir utiliser MobileTag, vous devez tout d’abord télécharger l’application à partir du site Web www.mobiletag.com.
Quels usages pour cette technologie ? Et bien, ils sont multiples. Par exemple:
- La presse: à coté d’une photo ou d’un article, le Tag permet d’accéder à des pages interactives en relation avec l’article.
- Abribus / Panneaux publicitaires: Le Tag permet d’accéder aux informations de la ville (plan, itinéraire, temps de trajet), ou à une vidéo présentant un produit.
- Les commerces: Sur un article, le Tag permet d’obtenir une réduction ou des informations complémentaires,
D’autres systèmes du même genre existent comme Hotscan, ActivePrint et le Shotcode.
Ils constituent autant de challenges et d’opportunités pour les Webdesigners qui peuvent désormais sortir du cadre réducteur du browser et établir des ponts entre les supports onlines et offlines.

1995 – JAVASCRIPT
JavaScript est un langage de programmation de scripts principalement utilisé pour les pages web interactives. Le langage est créé en 1995 par Brendan Eich, pour le compte de Netscape Communications Corporation (rappellez-vous, Marc Andreessen), qui s’est inspiré de nombreux langages, notamment du Java mais en simplifiant la syntaxe pour les débutants. JavaScript s’appelait à l’origine LiveScript. En décembre 1995, Sun et Netscape annoncent la sortie de JavaScript. En mars 1996, Netscape met en œuvre le moteur JavaScript dans son navigateur web Netscape Navigator 2.0. Le succès de ce navigateur contribue à l’adoption rapide de JavaScript dans le développement Web orienté client. Du code JavaScript peut être intégré directement au sein des pages web, pour y être exécuté sur le poste client. C’est alors le navigateur web qui prend en charge l’exécution de ces petits bouts de programmes appelés scripts.
Généralement, JavaScript sert à contrôler les données saisies dans des formulaires HTML, ou à interagir avec le document HTML via l’interface DOM fournie par le navigateur (on parle parfois d’HTML dynamique). Il est aussi utilisé pour réaliser des services dynamiques, pas toujours très utiles mais parfois simplement à but esthétique.

1996 – MACROMEDIA SHOCKWAVE
Macromedia Director est né en 1986 sous le nom “Video Works“. Ses auteurs étaient une équipe de programmeurs de jeux chez Bally-Midway à Chicago.
Au début des années 1990, VideoWorks, devenu Macromind puis Macromedia Director, s’est imposé comme la référence en matière d’outils de création de cd-roms.
C’est sous Director qu’ont été crées la plupart des classiques du cd-roms chez les éditeurs Voyager ou Montparnasse Multimédia. Le jeu Myst a aussi été crée sous Director.
Les fichiers Director créés peuvent être inclus dans une page Web pour un usage sur Internet lorsqu’ils sont convertis au format Shockwave. Les visiteurs d’un site en Shockwave doivent utiliser un navigateur équipé du plug-in Shockwave. C’est une nouvelle étape de l’introduction de la 3D temps réel sur le Web.

Dans le domaine de la création de CD-Rom, Director est de plus en plus concurrencé par son petit frère Flash.
Director reste très utilisé dans la recherche, en tant qu’éditeur d’algorithme pour le prototypage, ou en tant que contrôleur de robotique, par exemple en chirurgie.
Shockwave reste le plugin le plus utilisé pour la 3D sur internet (cartographie, maquettes et jeux à petit budget).

1996 – FUTURE SPLASH ANIMATOR
Flash s’est d’abord appelé FutureSplash Animator. Il est né en 1996. Son créateur, Jonathan Gay avait travaillé sur l’adaptation à Postscript d’un programme de dessin, Superpaint. Mais Illustrator, Freehand ou Canvas avaient déjà saturé le marché à la fin des années 80. Puis il s’est orienté vers l’écriture d’un logiciel d’animation. Détail amusant, Jonathan Gay a tenté de vendre sa technologie à Adobe fin 1995. Mais son PDG, John Warnock, n’a pas été convaincu… Disney a été l’un des premiers gros utilisateurs de FutureSplash. A cette époque, Macromedia travaillait aussi pour Disney et a dû apprendre à collaborer avec l’équipe de Jonathan Gay. C’est ainsi, presque par hasard, que la rencontre s’est effectuée. Macromedia a racheté FutureSplash en 1996, le rebaptisant Flash 1. A l’époque, le lecteur pesait 186 ko.
La version “Flash 2” et le format SWF voient le jour dans la foulée. En utilisant les propriétés mathématiques des courbes vectorielles, Flash permet la publication de contenus graphiques légers moyennant le téléchargement du plug-in. Le logiciel devient un éditeur Web complet qui permet de créer des graphismes, de les animer, de les intégrer en tant qu’éléments d’interfaces interactives et de générer le code HTML nécessaire au support du SWF dans un navigateur.
C’est donc une innovation fondamentale, d’ordre technologique qui est à l’origine du logiciel. Celui-ci, connaîtra ensuite des évolutions qui à chaque fois seront qualifiées de la même façon. C’est ainsi que SWF se situe dans une perspective historique où chaque mise à jour fait référence à l’environnement Web de son époque.
Aujourd’hui, Flash n’est plus seulement un logiciel d’animation et de dessin vectoriel. Au fur et à mesure des versions, Macromedia a fait évoluer son produit vers un éditeur de contenus “pluri-media” et c’est bien-sûr un outil extrêmement familier des Webdesigners.

1998 – THE REMEDI PROJECT
The Remedi Project est la 1ère galerie interactive pour Web designers. Développée par Josh Ulm, cette plateforme est 100% Flash. A l’époque plusieurs artistes et designers Web y présentent leurs travaux en simultané avec des expositions organisées dans des galeries de San Francisco. Depuis 2002, le site n’est plus mis à jour mais il reste disponible à la visite.

1998 – JOE CARTOON
Joe Cartoon est le nom d’une série en Flash d’animés interactifs lancée en 1997 par son créateur Joe Shields. Joe Shields a commencé ses réalisations en tant qu’individuel et ses premières créations comme “Gerbil in a microwave” ou “Frog in a blender” ont, à l’époque fait le tour du monde de la planète Web. C’était la première fois qu’une seule personne produisait, et diffusait de manière aussi massive du contenu de divertissement animé. Joe Cartoon a ensuite rejoint le groupe Atom Films, une communauté de contenus Flash avant de redevenir indépendant en 2006.

Sous le pseudo de Joe Cartoon, il a créé une foultitude d’animations qui se terminent toujours par l’explosion ou la perforation du héros, souvent un animal. Ses grenouilles au mixeur, ou son poisson à électrocuter dans un bocal, ont fait le tour de la toile. Aujourd’hui, sur le site Web officiel Frog in a blender a été vu plus de 111 millions de fois.

Designers talk and think a lot like science fiction writers do, except in a much less melodramatic and histrionic way. (Bruce Sterling)

1999 – IE5 + FLASH
Sortie de IE5 qui intègre le Flash Player. 100 millions d’utilisateurs ont le lecteur Flash installé. C’est le début de la reconnaissance pour Flash et aussi le début d’une incroyable production de contenus animés pour le Web.

1999 – YUGO NAKAMURA
Né en 1970 à Nara au Japon, Yugo Nakamura a fait des études en génie civil, paysage et architecture à l’Université de Tokyo. Il a travaillé quelques années comme ingénieur, avant d’entreprendre l’apprentissage du logiciel Flash, ainsi que d’autres logiciels de design interactif. En 2000, il devient directeur artistique d’interfaces chez Business Architects Inc., où il travaille sur des projets de sites Web et de cédéroms. Le site Ecotonoah, où les internautes qui alimentent un arbre virtuel contribuent à l’amélioration de l’environnement, est l’un de ses derniers projets commandité par l’entreprise NEC. Ses nombreuses expérimentations interactives personnelles sont à consulter sur Yugop.com.
Designer d’interfaces, Yugo Nakamura développe des applications uniques et crée des environnements Web alternatifs. Dans ses créations, l’exploration des espaces, des textures, des formes et des volumes réserve une place prépondérante à l’interactivité.
Yugo Nakamura a également contribué au développement de la communauté de créateurs Web utilisant la programmation sous Flash. Ses travaux réalisés en utilisant Action Script sont ainsi souvent cités en exemple.

1999 - I-MODE
L’I-mode est un produit né des laboratoires japonais de NTT DoCoMo et inventé par Takeshi Natsuno, suite à la constatation de l’échec des appareils WAP première génération, mais surtout à une bonne compréhension de celui-ci et à une réponse au-delà des attentes des utilisateurs.
Le langage utilisé pour les sites mobiles est une version modifiée d’HTML, appelée I-HTML (pour I-mode HTML) basé lui-même sur du C-HTML. Ce langage diffère sur les points suivants :
- Il ne contient pas les balises HTML pour écrire en gras et en italique ou en souligné ;
- Le Javascript n’est pas géré ;
- Les feuilles de style CSS ne sont pas supportées ;
- Des attributs concernant les téléphones mobiles sont ajoutés dans certaines balises, par exemple afin d’associer un lien à une touche du téléphone ;
- Des balises d’affichage d’image locale, appelées Emoji, sont ajoutées (pour l’affichage d’un smiley par exemple) ;
- Un nombre limité de protocoles peuvent être utilisés dans les liens (http, https, tel, sms, etc.)
Les deux fonctions principales de l’I-mode sont la consultation de services et la messagerie électronique.
La consultation de services se fait sur des sites Web adaptés à la taille d’un écran de téléphone mobile. Ces sites peuvent être scindés en deux groupes: Les sites payants et les sites gratuits.
Des milliers de services Web mobiles sont lancés dès la première année du lancement de l’I-Mode au Japon.

2000 - FLASHFORWARD
On commence à véritablement prendre au sérieux la création Web. Macromédia Flash et l’animation vectorielle est alors sous les feux des projecteurs. Une communauté mondiale de jeune créateurs émerge et ressent rapidement le besoin d’échanger, de partager ses bonnes pratiques, de montrer ses réalisations. Cela se matérialise notamment par l’événement Flashforward, organisé pour la première fois à San Francisco. Le succès est au-delà des attentes des organisateurs. Des files d’attente sans fin se forme dans tout le quartier où se déroule l’événement et même de faux tickets sont édités. Plus de 4000 créateurs s’y retrouvent. Aujourd’hui, les Flashforwards font partis des événements installés et reconnus par la communauté de créateur Web.

2000 – LOOKANDFEEL.COM
Des sites présentant des innovations en matière de navigation commencent à faire leur apparition, boostés par le succès de Flash et de la programmation Action Script chez les Webdesigners. Parmi ceux-là, on note le site www.lookandfeel.com qui invente justement la technique du même nom. Suivront d’autres techniques et effets qui renforcent l’expérience utilisateur, utilisant des éléments cognitifs comme le mouvement, le son, l’interaction avec la souris ou le clavier…etc.

DEVELOPPEMENT ET WEBDESIGN
Personne ne sait comment fonctionne les voitures d’aujourd’hui.
Les deux seuls critères d’achats sont l’esthétique et les usages proposés. Pour les amateurs de techniques, la consommation à la rigueur.
Le Webdesigner est comme le mécanicien d’aujourd’hui. Il est le seul à connaître vraiment ce qu’il y a sous le capot et cela va rester sous le capot.
Par nature, beaucoup de designers Web sont réfractaires à la programmation.
Pourtant, le début des années 2000 fut riche en démonstrations.
De nombreux artistes, designers, graphistes se sont appropriés les techniques du développement informatique pour apporter une valeur ajoutée à leurs projets.

SlideShare | View

1998 – 2000 – JOSHUA DAVIS
Basé à New York, Joshua Davis est un artiste et designer renommé. Travaillant aussi bien pour des entreprises que des collectionneurs ou des institutions, il utilise l’ordinateur comme média pour des créations uniques.
Après des études au Pratt Institute à Brooklyn, où il étudie l’histoire de l’art et l’illustration, Joshua Davis se tourne vers le Webdesign.
Sa connaissance des langages de scripts lui permettront de créer un art ou le hasard de la création se mélange avec la logique de la programmation, à la manière de Jackson Pollock qui ne touche plus la toile et laisse dégouliner la peinture.
Joshua Davis et son travail sont devenu très influent dans le monde du graphisme et du Webdesign au début des années 2000. Ses tatouages et sa réputation de “rockstar” du Webdesign y ont autant contribué que ses réalisations.

Joshua Davis s’est fait une spécialité de ces programmes générateurs d’éléments graphiques aléatoires, inspirés par la théorie du chaos, et conçues à base d’algorithmes. Ils viennent chercher des dessins et graphismes au sein d’une base de données de façon aléatoire pour composer et afficher des motifs irrémédiablement uniques. Sa réalisation la plus complexe ne comportait pas moins de 170 000 calques générés dans Illustrator.

2001 - PRAYSTATION
Aujourd’hui, ses œuvres interactives ont été exposées au Design Museum de Londres au MOMA de New York ou encore au Centre Pompidou à Paris. En 2001, avec Praystation, il a obtenu la plus haute récompense internationale dans le domaine de l’art et de la conception numérique, le Prix Ars Electronica Golden Nica, dans la catégorie “Net Excellence“. Depuis, il voyage dans le monde entier pour intervenir dans le cadre de conférences et d’ateliers, et enseigne à la School of Visual Arts.
Le travail de Joshua Davis, Praystation, allait emprunter dans sa première version l’imagerie type des jeux vidéo. Il les assemblait de manière à créer de nouvelles relations et faire émerger un nouveau sens qui pouvait, à certains égards, poser un regard critique sur la culture du jeu en général. Davis allait ensuite se pencher sur l’exploration des structures navigationnelles du jeu, sur les sons et les animations. Il procédait de cette façon à une déconstruction de l’interface du jeu et donc à une réflexion sur ses procédés opérationnels.

ONCE UPON A FOREST
Once upon a Forest est une sorte de recueil d’expérimentations en graphisme et programmation composé d’images, de jeu de couleurs, de tons et de géométrie. Le travail porte également sur les environnements sonores. Ils influencent largement la perception des animations, créant finalement de véritables ambiances. Le tout est en vectoriel. On peut donc exporter en PostScript, puis l’ouvrir dans Illustrator. Une nouvelle fois, le site de Joshua Davis est salué autant par les créatifs Web, que les geeks et les revues culturelles.

2001 – ECHARPE COMMUNICANTE
L’écharpe communicante de France Telecom, sur un concept de Yacine Aït Kaci et Naziha Mestaoui, est destinée aux professionnels en déplacement. Elle fut présentée au Musée d’Art Moderne de New-York (MOMA) dans le cadre de l’exposition “Workspheres: designing the Workplace of tomorrow“, consacrée aux futurs outils et environnements de travail à l’ère informationnelle.
L’écharpe surmonte une veste qui dissimule dans ses doublures le mini clavier d’un micro et un GSM éclatés.
Visionner des films téléchargés sur internet, surfer sur ses sites préférés, envoyer des e-mails ou diffuser instantanément des photos depuis l’endroit où l’on se trouve constituent également ses principales valeurs ajoutées. A terme, l’écharpe devait constituer à elle seule un véritable bureau portatif, aussi discret qu’élégant: En l’a portant, chacun restera connecté à son réseau d’entreprise, accèdera à ses fichiers, son intranet…
Après avoir proposé le premier blouson-téléphone, les chercheurs de France Télécom franchissent donc une nouvelle étape dans leur réflexion pour proposer de nouveaux services haut-débit en mobilité. En introduisant l’image dans le vêtement, ils réalisent un pas supplémentaire vers la notion de connection continue, gage d’une réelle autonomie.

2001 - TONGSVILLE
Site Anglais connu notamment pour ces interactions générées au hasard et son scrolling vertical. Beau, drôle, interactif et très novateur, ce site vous propose de visiter une attachante bourgade du nom de Tongsville. Pour s’y rendre, il faut emprunter le train. Le trajet ne dure qu’une poignée de secondes, le temps que se charge la page principale et l’occasion de contempler une étonnante animation, réalisée en Flash comme d’ailleurs l’ensemble du site. Première surprise en arrivant dans l’unique rue de Tongsville, ici la navigation se fait à l’horizontale, un curseur permettant de se promener de gauche à droite dans cette ville aux allures de décor de cinéma. Les bâtiments de la ville hébergent les différentes rubriques du site, ainsi il faut cliquer sur le marchand de journaux pour accéder aux dernières nouvelles, sur la façade de la banque pour participer au forum, ou encore sur la décharge publique pour contacter l’éditeur du site. On a le sentiment en visitant ce site qu’il s’agit d’une fenêtre ouverte sur un autre monde, une ville lilliputienne qui continuerait à exister une fois le navigateur refermé. Et pourtant, aussi surprenant que cela puisse paraître, la Tongsville n’est rien d’autre qu’une vitrine commerciale, celle d’Hammer&Tong, une société de production vidéo, primée à maintes reprises pour la qualité de ses clips. H&T a ainsi souhaité proposer une expérience différente en guise de plaquette sur le web. Le site a évidemment depuis fait beaucoup d’émules.

2001 – 2Advanced
2Advanced est le site d’une agence Web américaine. 2Advanced Studios fut créé en 1999 par Eric Jordan, Tony Novak and John Carroll. Spécialisés dans le multimédia, leurs sites et leurs créations sont une source d’inspiration inépuisable pour grand nombre de webdesigners. En quelques années, ils sont devenus les îcones de la création d’interfaces Full-Flash (c’est-à-dire 100% realisées avec le logiciel Flash) et de l’animation 2D/3D. Leur premier site a été créé en combinant Macromedia Flash 5, Macromedia FreeHand, et Swift3D. Une micro-révolution visuelle dans le monde du Webdesign. Aujourd’hui, c’est la version 5 du célèbre site que vous pouvez décourir sur www.2dvanced.com.

Idée reçues n°3 - HTML Versus Flash
Contenus contre réalité?
C’est en tous cas ce qu’on a bien voulu nous faire croire et qu’on essaye toujours de nous faire croire.
Ce conflit d’approches est l’un des plus virulents dans les communautés de créateurs Web. D’un côté les pro-HTML, de l’autre les pro-FLASH et au milieu quelques webdesigners que l’on presse de choisir leur camps. Précédemment, nous avons parlé de l’opposition développeurs/graphistes. Ce faux-débat en est une parfaite illustration.

Flash est devenu l’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.
Peu de contraintes et de développement pour obtenir les premiers résultats. Si l’on devait définir Flash en une phrase, ce serait “La créativité d’abord!” La principale utilisation de Flash (questions d’accessibilité mise à part) réside dans les concepts graphiques et animés que l’on peut developper.
Rappelons tout de meme que si ce logiciel s’adresse a priori d’abord a des graphistes, les Action Scripts offrent de nombreuses possibilités mais difficiles à maîtriser.

HTML/CSS/Javascript sont des technologies et des langages qui favorisent davantage les contenus.

En fait, il est clair que chaque langage, technologie, approche possède ses qualités et ses faiblesses. Le tout est de bien les identifier pour faire le meilleur choix en fonction de ses besoins, des contenus et des cibles. Dans certains cas, cela peut-être l’utilisation d’un seul outil comme de plusieurs d’entre-eux

Exemple avec Flash
Le site de présentation d’une voiture de sport.
Les objectifs sont de renforcer l’image de la marque, de délivrer une expérience immersive à l’utilisateur, et de mettre en place une stratégie virale à court-terme.
Flash s’impose naturellement dans ce genre de projet puisque :
• L’expérience de marque est essentielle,
• Les utilisateurs sont ouverts à une découverte assistée,
• La cible est restreinte.

Exemple avec HTML et standards
Le site d’un journal quotidien
• Le référencement est une priorité
• Gestion de bases de données, très important nombre de contenus.
• Hiérarchisation des liens sur de multiples et complexes niveaux / bouton de retour / etc.
• Les utilisateurs veulent pouvoir copier/coller les contenus
• L’expérience de la marque se construit dans sa capacité à délivrer des contenus de qualité

HTML+FLASH
CONTENUS+CRÉATIVITÉ
Aujourd’hui, certains sites combinent efficacement les technologies et langages autrefois opposés.
Le concept, les idées et l’audience doivent déterminer le projet et les contenus. Les outils et langages ne sont que les moyens utilisés pour parvenir à ces objectifs.

Exemple de combinaison
Le site d’une organisation non-gouvernementale.
La majeure partie du site s’appuie sur du HTML et une feuille de style CSS, mais des éléments Flash viennent renforcer l’image de la marque et délivrer une expérience utilisateur supplémentaire. Les éléments Flash sont intégrés dans une frame elle-même adaptée aux standards du Web, et utilisent des données XML.

ll y a une conviction pernicieuse qui veut que les sites adhérant aux standards du Web et d’accessibilité soient laids, visuellement inintéressants ou disposant d’une navigation primaire. Contrairement à la croyance populaire, Flash n’est pas entièrement inaccessible, et du XHTML mal écrit peut par contre rendre un site complètement inaccessible.

Recognizing the need is the primary condition for design. (Charles Eames)

Encore une fois, comme dans tous projets Web, l’analyse des besoins est essentielle et doit précéder n’importe-quel choix.
Les Webdesigners ont justement la chance d’avoir le choix entre plusieurs outils, entre plusieurs alternatives. Je trouve dommage de s’en priver pour des raisons qui semblent d’un autre âge.

2000 – TEAM CHMAN
Team Chman est une agence Web française qui devient rapidement reconnue dans le monde entier grâce à leur produit principal: Banja. Il s’agit d’un jeu entièrement réalisé en Flash et disponible sur Internet sous le format d’épisodes interactifs.
Team cHmAn a aussi initié une démarche artistique événementielle afin de mieux faire connaître l’ébullition créative qui s’épanouissait à l’époque sur le web, en rassemblant des artistes numériques renommés aux styles et influences variés. Il s’agissait de mettre en place un espace de rencontre et de découverte offline privilégiant les relations humaines et offrant à des talents reconnus sur le Web la possibilité de se confronter aux différents publics. Tout cela se déroulait sur la base d’un concept événementiel particulier: “24h pour créer, 24h pour échanger”. Lors de la première édition, le Team Chman invente un concept, qui depuis, a fait de nombreux émules dans le monde entier, y compris ici à Rouy-Noranda. Le concept original de la Webjam était le suivant : 10 artistes sont conviés à créer une animation à partir de sources audio, vidéo, photographiques qui leurs sont fournies par l’intermédiaire du site web de l’événement. Chaque artiste disposait de seulement 24 heures pour livrer sa création. Les webjams sont par excellence les manifestations sur lesquels se retrouvent les webdesigners du monde entier. Que ce soit sur les VectorLounge du Team Chman, le Festival de Webdesign de Rouyn-Noranda, le WIF que j’ai conçu et développé en France dès 2002, le Flash Festival, ou encore Cre824 aux USA dont je m’occupe aujourd’hui, le succès est toujours au rendez-vous.

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)

Evidemment pendant ces démonstrations en 24heures non-stop, les standards sont peu favorisés. Les Webdesigners sont pour beaucoup des artistes et profitent de ces démonstrations pour laisser libre court à leur imagination, privilégiant les outils d’animation, l’interactivité et l’esthétisme.

2000-2002 – CSS1
Les principaux navigateurs supportent CSS1
CSS 1 est disponible sur IE5 (MAC), IE6 (Windows), Opera & Mozilla Firefox.
Les notions d’accessibilité et d’usabilité commencent à apparaître et à se démocratiser.

DEVELOPPEMENT 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)

Cela va bien-sûr favoriser l’adoption des standards par les webdesigners mais cela va aussi générer de nouvelles approches conflictuelles comme par exemple les partisans des tables ou des font tags plutôt que de feuilles de style.

2002 – TOKYOPLASTIC.COM
Le site d’animation Tokyoplastic.com remporte des prix dans le monde entier et devient culte pour toute une génération de créatifs Web.
Le design est minimaliste, épuré, uniquement réalisé en noir, rouge et blanc. L’interface est entièrement animée. Chaque clic et déplacement dans un sous menu nous plonge dans une courte animation mettant en scène de petites figurines aux allures de geisha et des plantes carnivores. Le site est très vaste et offre de nombreuses petites animations à découvrir, une musique également très simple contribue parfaitement à l’ambiance zen du site. Malgré la profusion d’animations, le site reste assez fluide et rapide à exécuter. A découvrir et à redécouvrir !

2002 - BD4D
Premiers rassemblements et réseaux d’envergure nationaux et internationaux pour la communauté des Webdesigners.
BD4D sont des évènements qui ont vu le jour à Londres grâce à Ryan Shelton et Ryan Carson début 2002. L’objectif était de rassembler quelques acteurs du Webdesign au cours d’une soirée animée. Tour à tour une dizaine de créatifs présentent leurs projets au reste de l’assemblée. Les États-Unis ont repris l’initiative comme à Chattanooga grâce à l’agence Tubatomic, puis ensuite d’autres pays. Plutôt que d’avoir des manifestations éparses dans plusieurs pays, il semblait plus intéressant de s’afficher sous un même nom: BD4D.

2002 – WEB CREDIBILITY
C’est dans le cadre du projet Stanford WEB Credibility Research qu’un guide comportant 10 règles permettant d’établir la crédibilité d’un site Web a été élaboré. C’était un Double défi:
- Pour les annonceurs il y a nécessité d’être crédible sur le Web.
- Pour les usagers, trouvez l’information crédible est essentiel.
La rédaction de ce guide s’est appuyée sur 3 années de recherche auxquelles ont participé 4,500 personnes. Les documents de recherche qui ont permis d’arriver à ces résultats sont accessibles sur le site du projet.
Voici dans l’ordre ces dix premières règles et leur description :

01. Offrez des moyens simples de vérifier l’exactitude de l’information sur votre site
La crédibilité d’un site peut être améliorée lorsque les informations que vous diffusez sont appuyées par d’autres sources (citations, références, sources du matériel) surtout si vous proposez des liens vers ces « preuves ». Même si les gens ne suivent pas les liens proposés, vous aurez démontré votre confiance en votre contenu.

02. Montrez qu’il existe une organisation réelle derrière votre site
Démontrer que votre site sert une organisation légitime augmentera sa crédibilité. Le moyen le plus simple d’y parvenir est de lister les adresses physiques des places d’affaires. D’autres éléments peuvent aussi contribuer comme, par exemple, afficher une photo de votre bureau ou mentionner votre adhésion à une chambre de commerce.

03. Mettez l’expertise de votre organisation en valeur dans le contenu et les services offerts
Avez-vous des experts dans votre équipe ? Vos collaborateurs ou vos fournisseurs ont-ils une bonne notoriété ? Assurez-vous de le mentionner. Êtes-vous affiliés à une organisation respectée ? Dites-le clairement. Inversement, n’offrez aucun lien vers des sites externes qui ne sont pas crédibles. Votre site perdrait en crédibilité.

04. Montrez que derrière votre site, il y a des personnes honnêtes et fiables
Le premier objectif de cette règle est de démontrer qu’il y a des personnes réelles derrière votre site et dans votre organisation. Ensuite, trouvez des moyens de démontrer leur fiabilité à travers des images et dans le texte. Par exemple, certains sites présentent une biographie de leurs employés qui parle de la famille et des intérêts personnels.

05. Faites en sorte qu’il soit facile de vous contacter
Un moyen simple d’augmenter la crédibilité d’un site est d’afficher clairement vos coordonnées : téléphone, adresse physique et adresse de courrier électronique.

06. Privilégiez un design offrant un look professionnel ou approprié aux objectifs du site
Les gens évaluent rapidement un site par son design graphique uniquement. Au moment de concevoir votre site, portez attention à la mise en page, à la typographie, aux images, aux problématiques de consistance, etc. Évidemment, tous les sites ne gagnent pas en crédibilité en adoptant un look similaire à celui d’IBM.com. Le design graphique doit être cohérent avec les objectifs du site.

07. Rendez votre site facile d’utilisation — et utile
Ici, deux règles sont regroupées. Les résultats de recherche démontrent que les sites gagnent en crédibilité en étant à la fois faciles à utiliser et utiles. Certains opérateurs de sites oublient les utilisateurs lorsqu’ils servent leur propre égo corporatif ou qu’ils essaient de montrer ce qu’ils savent faire d’amusant avec les technologies Web.

08. Mettez régulièrement votre site à jour ou montrez au moins qu’il a été révisé récemment
Les gens accordent plus de crédibilité aux sites dont le contenu a été révisé ou mis-à-jour récemment.

09. Faites un usage restreint de tout contenu promotionnel
Si possible, évitez les publicités sur votre site. Si vous devez intégrer des publicités, distinguez clairement le contenu publicitaire du contenu du site. Évitez les publicités pop-up à moins que vous soyez indifférent au fait d’ennuyer les utilisateurs et de perdre en crédibilité. Adoptez un style d’écriture clair, direct et sincère.

10. Évitez les erreurs en tous genres si petites soient-elles
Les erreurs typographiques et les liens brisés affectent la crédibilité d’un site plus que la plupart des gens pourraient le croire. Il est aussi important de maintenir votre site en ligne et fonctionnel.

2002 - THEBAN MAPPING PROJECT
Le site du Theban Mapping project, un projet américain de création d’une base de données archéologiques sur la région de Luxor, propose une vraie visite virtuelle d’une des zones archéologiques les plus importantes au monde : La Vallée des Rois. Une soixantaine de sites et/ou tombeaux sont répertoriés sur une carte. Chacun d’entre eux dispose d’une vidéo, d’une fiche extrêmement riche et détaillée et de photos.

Avec l’aide d’une technique de digitalisation au laser, l’intérieur des tombes a été totalement recréé. L’emploi de Javascript et Flash permet de visiter les lieux de manière réaliste et instructive. C’est vraiment très impressionnant, cela donne une autre perspective de ce que l’on peut créer en matière d’expériences éducatives avec le Webdesign.

Technical skill is mastery of complexity, while creativity is mastery of simplicity. (E Christopher Zeeman)

Comme le dit Zeeman, le contrôle de la simplicité est plus qu’important en matière de créativité. C’est aussi dans ce cadre que va se développer Processing.

2002 – PROCESSING
Processing est un environnement Open Source multiplateforme pour la programmation d’événements multimédia interactifs et génératifs. Créé par Benjamin Fry et Casey Reas, il est le prolongement de l’environnement de programmation graphique développé par John Maeda au MIT MediaLab dans son ouvrage Design by numbers. Ben Fry et Casey Reas sont eux-même d’ex-étudiants de John Maeda de l’Aesthetics & Computation Group du MIT.
Processing est tout particulièrement adapté à la création plastique et graphique interactive. Le logiciel fonctionne sur Mac, Windows et Linux, car il est basé sur la plateforme Java.


Depuis son lancement en 2002, une véritable communauté s’est développée autour de Processing, considérant le code comme support de création et de pratique artistique.
Processing possède un moteur d’affichage 2D/3D performant et permet la création de programmes visuels interactifs ou génératifs. De nombreux codes-source sont partagés par leurs auteurs, constituant ainsi une documentation variée et conviviale, propice à des expériences de toute nature.
Le projet de départ, Processing, permet de créer des programmes interactifs et génératifs auxquels s’ajoutent trois projets annexes, basés chacun sur la philosophie et la technologie de départ : Wiring et Arduino ouvrent Processing à l’électronique et à la robotique ; alors que Processing Mobile permet aux artistes de créer des programmes pour leurs téléphones portables.
Processing a reçu le prix Golden Nica à Ars Electronica 2005 dans la catégorie NetVision. Je vous conseille de jeter un œil attentif à cet événement chaque année car vous pouvez être presque sûr que les projets récompensés seront sous les feux des projecteurs les années suivantes.
Pour conclure, Processing est vraiment le chaînon manquant entre graphisme et développement.

2002 - XHTML Friends Network
En 2002, plusieurs personnes talentueuses comme Tantek Celik, Matthew Mulleweg et Eric Meyer ont commencé à travailler ensemble au sein d’un groupe répondant au nom d’HTML Friends Network (XFN). Une bonne partie de leurs travaux est disponible sur le Global Multimedia Protocol Group (http://gmpg.org). L’objectif principal de ce groupe est de “connecter les personnes à travers une simplicité incrémentale“. Cette idée de supplément de sémantique simple et incrémentale est devenue plus tard la base de ce qu’on appelle les Microformats et qu’il me semble important de développer un plus tard dans cette présentation.
Imaginez que votre navigateur vous permette d’ajouter des coordonnées publiées sur une page web en un clic dans votre carnet d’adresses Outlook ou GMail. Imaginez que Google propose les mêmes services que les sites d’annonces immobilières, d’offres d’emploi et les comparateurs de prix réunis au sein d’un seul moteur de recherche. Imaginez enfin qu’il ne faille qu’un clic pour ajouter tous les détails logistiques de votre séjour en vacances (dates, hôtels, billets d’avion et de train…) dans l’agenda de votre PDA. Ces scénarios ne sont plus de la science-fiction ! C’est ce que permettent les microformats. Ils permettent aux Webdesigners de rendre leurs créations et leurs contenus intelligents, c’est un retour au Web 1.0 de Tim Berners-Lee tel qu’il l’avait initialement imaginé. Quand on regarde de près les évolutions du Web 2.0, on peut d’ors-et déjà prédire des débats animés pour poser les bases d’un éventuel “Web 3.0” Le Web 3.0 sera-t-il davantage 1.0 que 2.0? La question est posée!

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

CSS Zen Garden est une resource en ligne très importante. Le but du site est de montrer ce qu’il est possible de faire avec un design basé sur l’utilisation du CSS.

L’un des objectifs majeurs de CSS est de proposer une stylisation indépendante de la structure du document. HTML, par exemple, ne décrit que l’architecture interne, tandis que CSS décrit tous les aspects de la présentation. Cette séparation fournit un certain nombre de bénéfices, permettant d’améliorer l’accessibilité, de changer plus facilement de structure et de présentation, et de réduire la complexité de l’architecture d’un document.

Ainsi, les avantages des feuilles de style sont multiples :
- La structure du document et la présentation peuvent être gérées dans des fichiers séparés.
- La conception d’un document se fait dans un premier temps sans se soucier de la présentation, ce qui permet d’être plus efficace.
- Dans le cas d’un site Web, la présentation est uniformisée : les documents (pages HTML) font références aux mêmes feuilles de styles. Cette caractéristique permet aussi une rapide remise en forme de l’aspect visuel.
- Un même document peut donner le choix entre plusieurs feuilles de style, par exemple une pour l’impression et une pour la lecture à l’écran. Certains navigateurs Web permettent au visiteur de choisir un style parmi plusieurs.
- Enfin, le code HTML est considérablement réduit en taille et en complexité, puisqu’il ne contient plus de balise ni d’attribut de présentation.

La « cascade » est la combinaison de différentes sources de styles appliquées à un même document, selon leur degré respectif de priorité. Différents modes de cascade peuvent se combiner:

- Par origine des styles, issus de l’agent utilisateur, de l’auteur et de l’utilisateur. La priorité supérieure accordée aux styles de l’utilisateur est un des facteurs principaux de l’accessibilité des documents présentés à l’aide de CSS.
- Par média: une feuille de style générique peut s’appliquer à plusieurs media de restitution (affichage à l’écran, impression, projection) et être combinée avec des feuilles propres à chaque media.
- Selon l’architecture d’un ensemble de documents Web: une feuille de style générique peut s’appliquer à la totalité des pages d’un site Web, être combinée avec des feuilles propres à chaque rubrique de celui-ci, ainsi qu’avec des styles propres à telle ou telle page.
- Ou bien, selon l’architecture des feuilles elles-mêmes: une feuille de style externe au document peut être combinée à une feuille de style interne et à des styles appliqués directement à chaque élément qui le compose (styles “en ligne“). Une feuille de style peut également importer une ou plusieurs autres feuilles externes.

Much of the Web is like an anthill built by ants on LSD. (Jakob Nielsen)

En 2002, face au développement des standards, on assiste à une veritable guerre des religions pendant laquelle de nombreux gourous du W3C ou spécialistes des standards n’hésites pas à critiquer haut-et-fort tout ce qui ne respecte pas les standards du Web. Evidemment, les habitués des technologies Flash, de l’animation et des sites esthétiques furent les premiers visés et je pense personnellement que cette approche conflictuelle n’a pas du tout aidé à la compréhension et à la bonne utilisation des standards.

2003 – FLASH COMMUNICATION SERVER
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 Media Server pour distribuer des contenus vidéo.

2003 – RED BULL
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…etc. C’est très gourmand en bande-passante mais en 2003, cela reste un site événement anticipant sur les réalisations futures avec la démocratisation du haut-débit.

2003 – SECOND LIFE
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. Pour les Webdesigners, ce genre de tentatives ouvre la porte sur de nouvelles possibilités.
Créé en 2003 et popularisé en 2006, Second Life repose sur un concept baptisé “Metavers” défini dès 1992 par Neil Stephenson dans son roman Snow Crash. A la différence d’un simple jeu vidéo en 3D, le metavers c’est à dire “méta-univers” est un monde créé artificiellement par un programme informatique et hébergeant une communauté d’utilisateurs présents sous forme d’avatars pouvant interagir entre eux ou avec des agents informatiques.

Malgré l’échec du Deuxième Monde début 2002, le principe sera repris par de nombreuses sociétés dont Linden Labs. Créée en 1999, la société lance officiellement Second Life en 2003, avant de connaître la consécration médiatique à l’automne 2006 en atteignant son premier million de membres. Comme pour le Deuxième Monde, SecondLife permet à chaque utilisateur d’être représenté par un avatar personnalisable, d’aménager son environnement mais surtout, et c’est sans doute sa principale nouveauté, d’acheter ou de vendre des objets et surtout des terrains. Initialement totalement vierge, ce territoire virtuel est confié aux “résidents” (les utilisateurs du programme). La principale originalité de Second Life consiste en effet à permettre à chaque utilisateur d’acquérir et/ou de créer du contenu (des bâtiments, véhicules, vêtements pour les avatars, etc.) et de le partager avec le reste de la communauté.
L’univers de Second Life est donc totalement conçu par sa communauté et limité uniquement par l’imagination des “résidents” ou presque. On y trouve des reproductions de lieux réels, des lieux imaginaires librement inspirés de la réalité passée ou future, voire des espaces totalement fantasques… Des industriels se sont également installés dans Second Life afin d’assurer la promotion de leur marque (comme IBM, Dell ou Amazon), de même que des administrations ou des universités. Reposant sur les créations des utilisateurs, Second Life reconnaît les droits des créateurs de contenu. Chaque utilisateur est juridiquement considéré comme l’auteur de ses créations et peut donc gérer ses droits patrimoniaux, c’est-à-dire commercialiser ses créations. Il n’était pas surprenant de voir il y a quelques mois des clients demander à leurs webdesigners ou agences de créer des représentations graphiques pour Second Life.

2003 – DESIGNING WITH WEB STANDARDS
Jeffrey Zeldman est webevangelist et auteur. Il dirige aussi un studio Web, “Happy Cog”. En 2003, il relance la polémique autour des standards Web en publiant “Designing With Web Standards“. Zeldman a aussi participé à la création du groupe The Web Standards Project qui regroupe des webdesigners professionnels qui se sont donnés pour mission d’encourager l’usage des standards et des recommandations du W3C.
Dans son ouvrage et ses interventions, il tend à démontrer que les sites respectant les standards du Web ne sont pas forcément inesthétiques ou non-adaptés au travail des designers Web. Ses livres et sites Web ont aussi participés à la promotion des concepts d’usabilité et d’accessibilité des sites Web grâce à l’utilisation accrue d’XHTML et de CSS.

2003 – ENCRE ET PAPIER ELECTRONIQUES
Le papier électronique également appelée papiel, e-paper, ou encre électronique, est une technique d’affichage sur support souple (papier ou plastique), modifiable électroniquement, et cherchant à imiter l’apparence d’une feuille imprimée.
Après avoir annoncé qu’il commercialiserait dès la fin de l’année 2003 le premier écran conçu avec le savoir-faire de l’américain E-Ink spécialisé dans l’encre électronique, Philips annonce dans une revue scientifique une autre technologie qui apporte la couleur et la possibilité d’afficher de la vidéo. Des avancées majeures qui achèvent de concrétiser le potentiel énorme de cette nouvelle technologie appelée à bouleverser son marché.

Comment ça marche ?
Dans un papier électronique ou “smart paper“, l’encre est insérée dans un sandwich de plastique lors de la fabrication. Ensuite, cette “encre“, le plus souvent des particules placées dans un liquide, remonte à la surface et devient visible ou invisible à la demande, le tout contrôlé par une batterie de composants transparents. Mais ce dispositif est limité à l’affichage en niveaux de gris. Pour la couleur, il fallait aller plus loin. C’est pourquoi les laboratoires de Philips travaillent depuis une dizaine d’années sur un principe appelé “électromouillage“.
Le principe est très simple et peut être utilisé pour l’affichage: chaque point est formé d’un petit réservoir contenant de l’eau et une goutte d’huile colorée. En appliquant un champ électrique, l’huile se comprime sur un bord, laissant apparaître le fond blanc du réservoir, et s’étale pour montrer sa couleur quand le champ est coupé. Le contrôle précis de la tension électrique permet d’agir sur l’intensité de la couleur.
Ce système n’apporterait rien de spectaculaire s’il n’était capable de produire facilement de la couleur et, surtout, d’afficher de la vidéo, ce qui est techniquement le cas aujourd’hui.

Tout cela est fort intéressant mais, quels sont les apports du point de vue de l’utilisateur final?
Tout d’abord, une bien meilleure lisibilité dans toutes les conditions, et ensuite une consommation d’énergie radicalement réduite. Plus simple qu’un écran à cristaux liquides, le procédé absorbe moins d’énergie et restitue quatre fois plus de lumière, notamment parce que la couleur est obtenue par la teinte de l’huile et non par des filtres teintés comme ceux des écrans plats. Tout comme la feuille de papier classique, la lisibilité est excellente car, au lieu de devoir apporter de la lumière pour créer l’effet de contraste comme les dispositifs habituels de rétro-éclairage, c’est la lumière ambiante qui est, en quelque sorte, recyclée… Non seulement le contraste est meilleur tout en étant obtenu de manière plus naturelle mais la lisibilité est également supérieure car elle n’est pas limitée par l’angle de vision, handicap traditionnel des écrans à cristaux liquides.
Enfin, autre avantage critique: L’économie d’énergie. Avec le papier électronique la consommation électrique est négligeable. La différence essentielle avec les écrans classiques c’est qu’aucune énergie n’est utilisée pour maintenir un affichage statique. Seule la modification de l’affichage (comme la vidéo) consomme du courant. Enfin, dernier atout, la souplesse de ces nouveaux écrans permet de réaliser des appareils moins fragiles, encore plus “tout-terrain”. On peut même envisager des écrans fixés sur la manche de votre veste.

Aujourd’hui, Gyricon, une filiale de Xerox et E-Ink commercialisent déjà différents types de panneaux de signalisation. E-Ink fournit également à Philips son “papier” monochrome, qui va d’abord le transformer en écran de téléphones et d’assistants numériques. Les écrans à “électromouillage” offrant couleur et vidéo, devraient être commercialisés dans quelques années. Suivant le support (verre ou plastique), l’écran sera rigide ou flexible. L’épaisseur du dispositif est aujourd’hui équivalente à un cheveu et demi. Verra-t-on prochainement des “posters électroniques” capables d’afficher la télévision comme dans le film Minority Report? Décidemment, il n’y a pas de quoi s’inquiéter outre-mesure pour le marché du Webdesign, puisqu’évidemment, ces supports pourront être connectés au Web. Cela concerne tout ce qui aujourd’hui est appelé le “Pervasive Computing“: des machines élémentaires limitées à des tâches basiques mais capables d’envoyer les résultats sur un réseau (comme une simple étiquette qui communique ses données et son statut en permanence, les fameuses “étiquettes actives” à base de RFID qui commencent à être expérimentées ici et là). On aura ainsi reproduit le schéma de l’Internet: Un réseau doté de nœuds individuellement peu intelligents mais qui, reliés par millions, produisent des résultats remarquables.

2002 – 2007 – MOTION DESIGN
Présent à l’origine sur le Web, le motion design qui associe design, animation, vidéo et effets visuels, trouve de nombreuses applications en broadcast, cinéma, vidéo et, désormais, en publicité.
De nombreuses grandes marques utilise le Motion Design de façon percutante dans leur communication et campagnes marketing pour se distinguer en proposant des expériences visuelles avant-gardistes.
En 2002, le Studio Tubatomic reçoit le prix Apple de l’année pour une série animée sur le Web basée sur des techniques de Motion Design.

En la matière, l’image fonctionne mieux que n’importe-quelle description. Donc, je vous propose de consulter le demo reel de Pierre Magnol de l’agence Kurtz-Media sur www.kurtzmedia.com.