SlideShare ist ein Scribd-Unternehmen logo
1 von 55
WEBDESIGN | Part1 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/
Qu’est-ce que le  Webdesign? Qu’est-ce qu’un  Webdesigner? 2 questions,  des dizaines de réponses possibles
In a room full of top software  designers , if any  two  of them  agree , that’s a  majority . Bill Curtis,  Expert en ingénierie logiciels   “ ”
Webmaster Webdesigner? Architecte d’Information Directeur Artistique Designer Sonore Motion Designer Designer de contenus Flasheur Designer CSS Designer de formats  publicitaires interactifs Designer Interactif Designer d’interactions Webdesigner Designer d’applications Web Intégrateur HTML Expert en usabilité/accessibilité Spécialiste en expérience utilisateur { Advergame Designer… Spécialisés ou pluridisciplinaires,  le métier est  en perpétuelle évolution,  nourrie par  un environnement de plus en plus multimédia
Le  webdesign  désigne la  création du support visuel à destination d’un site Web . Il s’agit d’une phase prépondérante dans la conception d’un tel site. Wikipédia  – FR vs US/UK Web design  is a  process  of conceptualization, planning, modeling, and execution of electronic media content delivery via Internet in the form of  Markup language  suitable for interpretation by Web browser and display as Graphical user interface (GUI).
No es simplemente una aplicación del diseño convencional sobre Internet ya que requiere tener en cuenta cuestiones tales como navegabilidad, interactividad, usabilidad, arquitectura de la información y la interacción de medios como el audio, texto, imagen y vídeo. Wikipédia  - Espagne Il ne s'agit pas simplement d’appliquer un modèle de conception sur l'Internet, car cela implique la prise en compte de questions telles que l'aptitude à la navigation,  l’interactivité , la  facilité d'utilisation ,  l’architecture de l'information  et de  l'interaction des médias  tels que l'audio, texte, image et vidéo.
Wikipédia  - Allemagne Webdesign  comprend la conception, la construction et la  gestion des utilisateurs  des sites Web pour le WWW ou  conception de l'interface , dans ce domaine. Ce sont, en règle générale, des textes structurés qui en  XHTML  et  HTML  sont rédigés, avec des outils de mise en forme complémentaires comme le  CSS . Webdesign  umfasst die Gestaltung, den Aufbau und die Nutzerführung von Websites für das WWW bzw. das Interface-Design in diesem Bereich. Dabei werden in der Regel strukturierte Texte, die in XHTML bzw. HTML verfasst sind, samt ergänzenden Grafiken mit CSS formatiert.
Wikipédia  - Italie Web design , letteralmente progettazione per il world wide web, è l'attività di ideazione, progettazione e costruzione di un sito internet destinato ad essere fruito con un browser web, browser testuali.   Web design,  literally  design for the World Wide Web ,  is the  business of designing , planning and building a website intended to be enjoyed with a web browser, text browser.
Wikipédia  - Portugal The  web design  is an  extension of the practice of design , where the focus of the project is the creation of web sites and  documents  available on the web environment.  The web design tends to  multidisciplinarity , since the construction of web pages requires subsidies of various technical areas, in addition to the design itself.  O  web design  é uma extensão da prática do design, onde o foco do projeto é a criação de web sites e documentos disponíveis no ambiente da web. O web design tende à multidisciplinaridade, uma vez que a construção de páginas web requer subsídios de diversas áreas técnicas, além do design propriamente dito.
Wikipédia  - Russie Web design  is the process of creating a website or the Web. The term includes the  development of e-commerce, web design, web programming  for a client-side and server, as well as the  configuration of a web server .  Веб-разработка — процесс создания веб-сайта или веб-приложения. Термин включает разработку приложений электронной коммерции, веб-дизайн, программирование для веб на стороне клиента и сервера, а также конфигурирование веб-сервера.
? Conception Planification Supports visuels Design Process Contenus multimédia Markup Language CSS XHTML HTML GUI Interactivité Utilisation Architecture de l’Information E-commerce Web Programming Web Serveurs Multidisciplinary
Pour mieux comprendre les mutations qui s’opèrent, un voyage dans le temps est nécessaire, un  retour vers le futur !
1963 Ivan Sutherland invente le dessin sur écran avec crayon optique : le  Sketchpad .
Xerox alto . Premier ordinateur qui se rapproche de ceux que nous utilisons aujourd'hui. Dick Shoup du Xerox PARC met au point une machine dotée de la  première carte graphique  (640x486 en 256 couleurs).  Superpaint  : 1er logiciel de dessin en couleurs  et 1er logiciel d'effets vidéo numériques.   1973
 
Muriel Cooper   fonde  le   Visible Language Workshop  au  MIT. ,[object Object],[object Object],1973
1982 Le  Minitel , un terminal numérique connecté par le câble téléphonique.  L’ancêtre de l’Internet  à la Française .  6 millions de terminaux, 20.000 services actifs (1990).
120 caractères par seconde, d'autre part la norme  vidéotex .  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.
Compuserve ,  premier  service en ligne  principal aux USA. Premier service de  courrier électronique  (dès 1979)
Apple lance le   Macintosh ,[object Object],[object Object],1984
 
Et Sir Timothy John Berners-Lee créa le   World Wide Web ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],1989
 
1990 Un premier site Web, un premier   navigateur Disponible à partir d’un ordinateur   NeXT Le premier   browser   est à la fois un navigateur    et un éditeur    de contenus.  Le   Web 2.0   existait déjà en 1990.
 
La jeune société Adobe lance le logiciel   Photoshop ,[object Object],[object Object],[object Object],[object Object],1990
 
The most powerful designs are always  the result of a continuous  process  of  simplification  and  refinement . Kevin Mullet, designer d’interfaces utilisateurs   “ ”
John Maeda publie   Design by Numbers  au MIT Press ,[object Object],[object Object],1991
Recherche constante de la  simplicité  dans les travaux  de John Maeda.
Processus de création de la Couverture du Hors-Série spécial immobilier du New-York Times par John Maeda.
1993 L’agence française  Virtools  introduit des comportements dynamiques et temps réels pour les contenus 3D off et online.
Marc Andressen conçoit le navigateur Web   Mosaic ,[object Object],[object Object],1993-94
 
 
Les débuts de la création Web Une histoire faite  de contradictions  et de faux-débats
transposer le   design print   sur un   écran d’ordinateur   et plus particulièrement sur un   canal de diffusion   comme le Web. Idée reçue n°1  Print & Ecran CREATION POUR LE WEB =
PHOTOSHOP Idée reçue n°2  Infographie CR É ATION POUR LE WEB =
Naissance  du   World Wide Web Consortium:   W3C ,[object Object],[object Object],1994
CSS = Cascading Style Sheet Le CSS permet de styliser les contenus HTML 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. 1996   Le Cascading Style Sheets est né de la collaboration entre  Håkon Lie  et  Bert Bos .   1994
1994 Naissance du  Deuxième Monde . Produit par Studio Canal, il permet d’évoluer dans une  communauté virtuelle 3D.
1994 La société japonaise  Denzo-Wave  invente le  QR Code ,  un code-barre en deux dimensions. Plus tard, ils deviendront de nouvelles interfaces pour les  contenus Web mobiles .
Brendan Eich développe avec SUN/Netscape   le language   JavaScript ,[object Object],1995
Macromedia   créé le format   Shockwave   qui permet d’afficher des contenus multimédia sur le Web ,[object Object],[object Object],1996
 
Jonathan Gay et son équipe développe   Future Splash Animator   qui permet de créer des animations vectorielles pour le Web ,[object Object],1996
1998 The Remedi Project  est la 1 ère   galerie interactive  pour Web designers. Développée par Josh Ulm, cette plateforme est  100% Flash .
1998 L’animation interactive  Frog in a blender   créée par   Joe Shields  est vue par des millions d’internautes dans le monde entier .
Designers talk and think a lot like  science fiction  writers do, except in a much less melodramatic and histrionic way. Bruce Sterling, auteur de science-fiction  “ ”
1999 Démocratisation de  Flash . Sortie du navigateur Internet  Explorer 5.0  qui intègre Flash Player .
1999 Le créateur japonais  Yugo Nakamura  révolutionne le design interactif et les interfaces de navigation avec le site  Yugop.com.
1999 Inventé par  Takeshi Natsuno , l' i-mode  fut lancé au Japon en 1999 par  NTT DoCoMo , et fut un énorme succès.
2000 1 ère   convention  qui regroupe plus de  4000  créateurs et développeurs utilisant le logiciel Flash de  Macromedia .
2000 En utilisant de manière innovante  l’Action Script , le site  Lookanfeel.com  propose une interface  cognitive  en insistant sur l’ interaction  des mouvements avec la souris et le  design sonore .
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é les techniques  du  développement   informatique  pour apporter une  valeur ajoutée  à leurs projets. Développement et Webdesign

Weitere ähnliche Inhalte

Andere mochten auch

KEYNOTE IAB SCHWEIZ - ONLINEVERMARKTUNG: DAS MODELL IST GESCHEITERT
KEYNOTE IAB SCHWEIZ - ONLINEVERMARKTUNG: DAS MODELL IST GESCHEITERTKEYNOTE IAB SCHWEIZ - ONLINEVERMARKTUNG: DAS MODELL IST GESCHEITERT
KEYNOTE IAB SCHWEIZ - ONLINEVERMARKTUNG: DAS MODELL IST GESCHEITERTNicolas Clasen
 
Энергосбереджение - умное потребление!
Энергосбереджение - умное потребление!Энергосбереджение - умное потребление!
Энергосбереджение - умное потребление!cposo
 
Concepto Basicos De Mercadeo
Concepto Basicos De MercadeoConcepto Basicos De Mercadeo
Concepto Basicos De Mercadeoanita09
 
михаил крикунов+решение+ценность
михаил крикунов+решение+ценностьмихаил крикунов+решение+ценность
михаил крикунов+решение+ценностьМихаил Крикунов
 
PresentacióN1
PresentacióN1PresentacióN1
PresentacióN1andres
 
Солнце Есинки. Модернизация системы уличного освещения энергостарт 1547
Солнце Есинки. Модернизация системы уличного освещения энергостарт 1547Солнце Есинки. Модернизация системы уличного освещения энергостарт 1547
Солнце Есинки. Модернизация системы уличного освещения энергостарт 1547Инновационная среда Лицей
 
Что надо знать при выборе стеклянной двери?
Что надо знать при выборе стеклянной двери?Что надо знать при выборе стеклянной двери?
Что надо знать при выборе стеклянной двери?Пылявская Алина
 
Библиотечное обслуживание детей во Франции
Библиотечное обслуживание детей во ФранцииБиблиотечное обслуживание детей во Франции
Библиотечное обслуживание детей во ФранцииFLBiblioteka
 
Bergmann presseinfo fullliner
Bergmann presseinfo fulllinerBergmann presseinfo fullliner
Bergmann presseinfo fulllinerPavel Poklad
 
Оптимизация энергопотребления в жилище
Оптимизация энергопотребления в жилищеОптимизация энергопотребления в жилище
Оптимизация энергопотребления в жилищеИрина Балтач
 
ДИЗАЙН КАК ДОБАВЛЕННАЯ СТОИМОСТЬ
ДИЗАЙН КАК ДОБАВЛЕННАЯ СТОИМОСТЬДИЗАЙН КАК ДОБАВЛЕННАЯ СТОИМОСТЬ
ДИЗАЙН КАК ДОБАВЛЕННАЯ СТОИМОСТЬEvgeny Borodin
 
Bauma2013 tunnel dumper5025plus
Bauma2013 tunnel dumper5025plusBauma2013 tunnel dumper5025plus
Bauma2013 tunnel dumper5025plusPavel Poklad
 
Ainte Informática - IV Negocio Abierto Provincial CIT Marbella
Ainte Informática - IV Negocio Abierto Provincial CIT MarbellaAinte Informática - IV Negocio Abierto Provincial CIT Marbella
Ainte Informática - IV Negocio Abierto Provincial CIT MarbellaCIT Marbella
 
Allan De Arcangelo
Allan De ArcangeloAllan De Arcangelo
Allan De ArcangeloGcinco5
 

Andere mochten auch (20)

KEYNOTE IAB SCHWEIZ - ONLINEVERMARKTUNG: DAS MODELL IST GESCHEITERT
KEYNOTE IAB SCHWEIZ - ONLINEVERMARKTUNG: DAS MODELL IST GESCHEITERTKEYNOTE IAB SCHWEIZ - ONLINEVERMARKTUNG: DAS MODELL IST GESCHEITERT
KEYNOTE IAB SCHWEIZ - ONLINEVERMARKTUNG: DAS MODELL IST GESCHEITERT
 
Radar 1(5)/2012
Radar 1(5)/2012Radar 1(5)/2012
Radar 1(5)/2012
 
Энергосбереджение - умное потребление!
Энергосбереджение - умное потребление!Энергосбереджение - умное потребление!
Энергосбереджение - умное потребление!
 
Concepto Basicos De Mercadeo
Concepto Basicos De MercadeoConcepto Basicos De Mercadeo
Concepto Basicos De Mercadeo
 
михаил крикунов+решение+ценность
михаил крикунов+решение+ценностьмихаил крикунов+решение+ценность
михаил крикунов+решение+ценность
 
Bauma2013 4010
Bauma2013 4010Bauma2013 4010
Bauma2013 4010
 
PresentacióN1
PresentacióN1PresentacióN1
PresentacióN1
 
Солнце Есинки. Модернизация системы уличного освещения энергостарт 1547
Солнце Есинки. Модернизация системы уличного освещения энергостарт 1547Солнце Есинки. Модернизация системы уличного освещения энергостарт 1547
Солнце Есинки. Модернизация системы уличного освещения энергостарт 1547
 
Что надо знать при выборе стеклянной двери?
Что надо знать при выборе стеклянной двери?Что надо знать при выборе стеклянной двери?
Что надо знать при выборе стеклянной двери?
 
Библиотечное обслуживание детей во Франции
Библиотечное обслуживание детей во ФранцииБиблиотечное обслуживание детей во Франции
Библиотечное обслуживание детей во Франции
 
жанибек мухаметкалиев
жанибек мухаметкалиевжанибек мухаметкалиев
жанибек мухаметкалиев
 
Bergmann presseinfo fullliner
Bergmann presseinfo fulllinerBergmann presseinfo fullliner
Bergmann presseinfo fullliner
 
Presentación Innovacion
Presentación InnovacionPresentación Innovacion
Presentación Innovacion
 
Оптимизация энергопотребления в жилище
Оптимизация энергопотребления в жилищеОптимизация энергопотребления в жилище
Оптимизация энергопотребления в жилище
 
Bacteria Rara(2)
Bacteria Rara(2)Bacteria Rara(2)
Bacteria Rara(2)
 
ДИЗАЙН КАК ДОБАВЛЕННАЯ СТОИМОСТЬ
ДИЗАЙН КАК ДОБАВЛЕННАЯ СТОИМОСТЬДИЗАЙН КАК ДОБАВЛЕННАЯ СТОИМОСТЬ
ДИЗАЙН КАК ДОБАВЛЕННАЯ СТОИМОСТЬ
 
Bauma2013 tunnel dumper5025plus
Bauma2013 tunnel dumper5025plusBauma2013 tunnel dumper5025plus
Bauma2013 tunnel dumper5025plus
 
жанибек мухаметкалиев 2
жанибек мухаметкалиев 2жанибек мухаметкалиев 2
жанибек мухаметкалиев 2
 
Ainte Informática - IV Negocio Abierto Provincial CIT Marbella
Ainte Informática - IV Negocio Abierto Provincial CIT MarbellaAinte Informática - IV Negocio Abierto Provincial CIT Marbella
Ainte Informática - IV Negocio Abierto Provincial CIT Marbella
 
Allan De Arcangelo
Allan De ArcangeloAllan De Arcangelo
Allan De Arcangelo
 

Ähnlich wie Webdesign Passe, Present et... Present Part1

Atelier Web et Mobile Design partie I, introduction au web design, Ahmed BACH...
Atelier Web et Mobile Design partie I, introduction au web design, Ahmed BACH...Atelier Web et Mobile Design partie I, introduction au web design, Ahmed BACH...
Atelier Web et Mobile Design partie I, introduction au web design, Ahmed BACH...Ahmed BACHIR CHERIF
 
Atelier web et mobile design partie i introduction au web design ahmed bachir...
Atelier web et mobile design partie i introduction au web design ahmed bachir...Atelier web et mobile design partie i introduction au web design ahmed bachir...
Atelier web et mobile design partie i introduction au web design ahmed bachir...Ahmed BACHIR CHERIF
 
Communication digitale
Communication digitaleCommunication digitale
Communication digitaleChris Gaillard
 
Qu'est-ce que le design numérique ? Ebauche d'une réponse...
Qu'est-ce que le design numérique ? Ebauche d'une réponse...Qu'est-ce que le design numérique ? Ebauche d'une réponse...
Qu'est-ce que le design numérique ? Ebauche d'une réponse...i-breed et associés
 
Petite introduction au flat design (et autres platitudes)
Petite introduction au flat design (et autres platitudes)Petite introduction au flat design (et autres platitudes)
Petite introduction au flat design (et autres platitudes)i-breed et associés
 
AtelierFocusinnovationforumblanc16012013
AtelierFocusinnovationforumblanc16012013AtelierFocusinnovationforumblanc16012013
AtelierFocusinnovationforumblanc16012013Marc Bourhis
 
Web 2.0 : Quelles applications ?
Web 2.0 : Quelles applications ?Web 2.0 : Quelles applications ?
Web 2.0 : Quelles applications ?Jean-François Ruiz
 
IBM Bluemix Paris meetup #16 20160914 - Introduction à Bluemix -v2
IBM Bluemix Paris meetup #16    20160914 - Introduction à Bluemix -v2IBM Bluemix Paris meetup #16    20160914 - Introduction à Bluemix -v2
IBM Bluemix Paris meetup #16 20160914 - Introduction à Bluemix -v2IBM France Lab
 
Kinect en moins de 10 Minutes
Kinect en moins de 10 MinutesKinect en moins de 10 Minutes
Kinect en moins de 10 MinutesMicrosoft
 
Les Nouveaux Standards et leur implémentation dans les navigateurs modernes
Les Nouveaux Standards et leur implémentation dans les navigateurs modernesLes Nouveaux Standards et leur implémentation dans les navigateurs modernes
Les Nouveaux Standards et leur implémentation dans les navigateurs modernesTristan Nitot
 
Speedfire on the rocks
Speedfire on the rocksSpeedfire on the rocks
Speedfire on the rocksAIR-LYNX
 
Evolution des métiers du design interactif
Evolution des métiers du design interactifEvolution des métiers du design interactif
Evolution des métiers du design interactifdesigners interactifs
 
HTML 5, CSS 3 au service du web | Semaine du web Alger (Algérie)
HTML 5, CSS 3 au service du web | Semaine du web Alger (Algérie)HTML 5, CSS 3 au service du web | Semaine du web Alger (Algérie)
HTML 5, CSS 3 au service du web | Semaine du web Alger (Algérie)Khaled Djebloun
 
Symfony2 et Microsoft Azure, l’efficacité de PHP dans le cloud
Symfony2 et Microsoft Azure, l’efficacité de PHP dans le cloud Symfony2 et Microsoft Azure, l’efficacité de PHP dans le cloud
Symfony2 et Microsoft Azure, l’efficacité de PHP dans le cloud Microsoft
 
10 applications web2.0 pour les entreprises
10 applications web2.0 pour les entreprises10 applications web2.0 pour les entreprises
10 applications web2.0 pour les entreprisesLudovic Roif
 

Ähnlich wie Webdesign Passe, Present et... Present Part1 (20)

Metiers Design Numerique 2009
Metiers Design Numerique 2009Metiers Design Numerique 2009
Metiers Design Numerique 2009
 
Atelier Web et Mobile Design partie I, introduction au web design, Ahmed BACH...
Atelier Web et Mobile Design partie I, introduction au web design, Ahmed BACH...Atelier Web et Mobile Design partie I, introduction au web design, Ahmed BACH...
Atelier Web et Mobile Design partie I, introduction au web design, Ahmed BACH...
 
Atelier web et mobile design partie i introduction au web design ahmed bachir...
Atelier web et mobile design partie i introduction au web design ahmed bachir...Atelier web et mobile design partie i introduction au web design ahmed bachir...
Atelier web et mobile design partie i introduction au web design ahmed bachir...
 
Communication digitale
Communication digitaleCommunication digitale
Communication digitale
 
Qu'est-ce que le design numérique ? Ebauche d'une réponse...
Qu'est-ce que le design numérique ? Ebauche d'une réponse...Qu'est-ce que le design numérique ? Ebauche d'une réponse...
Qu'est-ce que le design numérique ? Ebauche d'une réponse...
 
Petite introduction au flat design (et autres platitudes)
Petite introduction au flat design (et autres platitudes)Petite introduction au flat design (et autres platitudes)
Petite introduction au flat design (et autres platitudes)
 
AtelierFocusinnovationforumblanc16012013
AtelierFocusinnovationforumblanc16012013AtelierFocusinnovationforumblanc16012013
AtelierFocusinnovationforumblanc16012013
 
Connectez-vous !
Connectez-vous !Connectez-vous !
Connectez-vous !
 
Webdesign
WebdesignWebdesign
Webdesign
 
Web 2.0 : Quelles applications ?
Web 2.0 : Quelles applications ?Web 2.0 : Quelles applications ?
Web 2.0 : Quelles applications ?
 
IBM Bluemix Paris meetup #16 20160914 - Introduction à Bluemix -v2
IBM Bluemix Paris meetup #16    20160914 - Introduction à Bluemix -v2IBM Bluemix Paris meetup #16    20160914 - Introduction à Bluemix -v2
IBM Bluemix Paris meetup #16 20160914 - Introduction à Bluemix -v2
 
Kinect en moins de 10 Minutes
Kinect en moins de 10 MinutesKinect en moins de 10 Minutes
Kinect en moins de 10 Minutes
 
Les Nouveaux Standards et leur implémentation dans les navigateurs modernes
Les Nouveaux Standards et leur implémentation dans les navigateurs modernesLes Nouveaux Standards et leur implémentation dans les navigateurs modernes
Les Nouveaux Standards et leur implémentation dans les navigateurs modernes
 
Speedfire on the rocks
Speedfire on the rocksSpeedfire on the rocks
Speedfire on the rocks
 
Evolution des métiers du design interactif
Evolution des métiers du design interactifEvolution des métiers du design interactif
Evolution des métiers du design interactif
 
HTML 5, CSS 3 au service du web | Semaine du web Alger (Algérie)
HTML 5, CSS 3 au service du web | Semaine du web Alger (Algérie)HTML 5, CSS 3 au service du web | Semaine du web Alger (Algérie)
HTML 5, CSS 3 au service du web | Semaine du web Alger (Algérie)
 
Symfony2 et Microsoft Azure, l’efficacité de PHP dans le cloud
Symfony2 et Microsoft Azure, l’efficacité de PHP dans le cloud Symfony2 et Microsoft Azure, l’efficacité de PHP dans le cloud
Symfony2 et Microsoft Azure, l’efficacité de PHP dans le cloud
 
MWCP22 - Mesh hybrid work
MWCP22 -  Mesh hybrid workMWCP22 -  Mesh hybrid work
MWCP22 - Mesh hybrid work
 
10 applications web2.0 pour les entreprises
10 applications web2.0 pour les entreprises10 applications web2.0 pour les entreprises
10 applications web2.0 pour les entreprises
 
Staelens cv 2019 word
Staelens cv 2019 wordStaelens cv 2019 word
Staelens cv 2019 word
 

Mehr von bduverneuil

Digital marketing 2015
Digital marketing 2015Digital marketing 2015
Digital marketing 2015bduverneuil
 
Web optimization
Web optimizationWeb optimization
Web optimizationbduverneuil
 
Web analytics process
Web analytics processWeb analytics process
Web analytics processbduverneuil
 
Code me credentials february 2011
Code me credentials february 2011Code me credentials february 2011
Code me credentials february 2011bduverneuil
 
Pres Pmis Forum 2007 V2
Pres Pmis Forum 2007 V2Pres Pmis Forum 2007 V2
Pres Pmis Forum 2007 V2bduverneuil
 
Part Miner Salon 2007
Part Miner Salon 2007Part Miner Salon 2007
Part Miner Salon 2007bduverneuil
 
Part Miner Gestion Excedentsv4
Part Miner Gestion Excedentsv4Part Miner Gestion Excedentsv4
Part Miner Gestion Excedentsv4bduverneuil
 
Part Miner Presentation2007v7
Part Miner Presentation2007v7Part Miner Presentation2007v7
Part Miner Presentation2007v7bduverneuil
 
Part Miner Gestion Excedentsv3
Part Miner Gestion Excedentsv3Part Miner Gestion Excedentsv3
Part Miner Gestion Excedentsv3bduverneuil
 
Public Opinion On Eu V3
Public Opinion On Eu V3Public Opinion On Eu V3
Public Opinion On Eu V3bduverneuil
 

Mehr von bduverneuil (11)

Digital marketing 2015
Digital marketing 2015Digital marketing 2015
Digital marketing 2015
 
Web optimization
Web optimizationWeb optimization
Web optimization
 
Web analytics process
Web analytics processWeb analytics process
Web analytics process
 
Code me credentials february 2011
Code me credentials february 2011Code me credentials february 2011
Code me credentials february 2011
 
Show.me
Show.meShow.me
Show.me
 
Pres Pmis Forum 2007 V2
Pres Pmis Forum 2007 V2Pres Pmis Forum 2007 V2
Pres Pmis Forum 2007 V2
 
Part Miner Salon 2007
Part Miner Salon 2007Part Miner Salon 2007
Part Miner Salon 2007
 
Part Miner Gestion Excedentsv4
Part Miner Gestion Excedentsv4Part Miner Gestion Excedentsv4
Part Miner Gestion Excedentsv4
 
Part Miner Presentation2007v7
Part Miner Presentation2007v7Part Miner Presentation2007v7
Part Miner Presentation2007v7
 
Part Miner Gestion Excedentsv3
Part Miner Gestion Excedentsv3Part Miner Gestion Excedentsv3
Part Miner Gestion Excedentsv3
 
Public Opinion On Eu V3
Public Opinion On Eu V3Public Opinion On Eu V3
Public Opinion On Eu V3
 

Webdesign Passe, Present et... Present Part1

  • 1. WEBDESIGN | Part1 PASS É , PR É SENT ET… PR É SENT Une présentation de Benoit Duverneuil | Tubatomic Worldwide Webdesign Festival | Rouyn-Noranda | Novembre 2007 http://creativecommons.org/licenses/by-sa/3.0/
  • 2. Qu’est-ce que le Webdesign? Qu’est-ce qu’un Webdesigner? 2 questions, des dizaines de réponses possibles
  • 3. In a room full of top software designers , if any two of them agree , that’s a majority . Bill Curtis, Expert en ingénierie logiciels “ ”
  • 4. Webmaster Webdesigner? Architecte d’Information Directeur Artistique Designer Sonore Motion Designer Designer de contenus Flasheur Designer CSS Designer de formats publicitaires interactifs Designer Interactif Designer d’interactions Webdesigner Designer d’applications Web Intégrateur HTML Expert en usabilité/accessibilité Spécialiste en expérience utilisateur { Advergame Designer… Spécialisés ou pluridisciplinaires, le métier est en perpétuelle évolution, nourrie par un environnement de plus en plus multimédia
  • 5. Le webdesign désigne la création du support visuel à destination d’un site Web . Il s’agit d’une phase prépondérante dans la conception d’un tel site. Wikipédia – FR vs US/UK Web design is a process of conceptualization, planning, modeling, and execution of electronic media content delivery via Internet in the form of Markup language suitable for interpretation by Web browser and display as Graphical user interface (GUI).
  • 6. No es simplemente una aplicación del diseño convencional sobre Internet ya que requiere tener en cuenta cuestiones tales como navegabilidad, interactividad, usabilidad, arquitectura de la información y la interacción de medios como el audio, texto, imagen y vídeo. Wikipédia - Espagne Il ne s'agit pas simplement d’appliquer un modèle de conception sur l'Internet, car cela implique la prise en compte de questions telles que l'aptitude à la navigation, l’interactivité , la facilité d'utilisation , l’architecture de l'information et de l'interaction des médias tels que l'audio, texte, image et vidéo.
  • 7. Wikipédia - Allemagne Webdesign comprend la conception, la construction et la gestion des utilisateurs des sites Web pour le WWW ou conception de l'interface , dans ce domaine. Ce sont, en règle générale, des textes structurés qui en XHTML et HTML sont rédigés, avec des outils de mise en forme complémentaires comme le CSS . Webdesign umfasst die Gestaltung, den Aufbau und die Nutzerführung von Websites für das WWW bzw. das Interface-Design in diesem Bereich. Dabei werden in der Regel strukturierte Texte, die in XHTML bzw. HTML verfasst sind, samt ergänzenden Grafiken mit CSS formatiert.
  • 8. Wikipédia - Italie Web design , letteralmente progettazione per il world wide web, è l'attività di ideazione, progettazione e costruzione di un sito internet destinato ad essere fruito con un browser web, browser testuali. Web design, literally design for the World Wide Web , is the business of designing , planning and building a website intended to be enjoyed with a web browser, text browser.
  • 9. Wikipédia - Portugal The web design is an extension of the practice of design , where the focus of the project is the creation of web sites and documents available on the web environment. The web design tends to multidisciplinarity , since the construction of web pages requires subsidies of various technical areas, in addition to the design itself. O web design é uma extensão da prática do design, onde o foco do projeto é a criação de web sites e documentos disponíveis no ambiente da web. O web design tende à multidisciplinaridade, uma vez que a construção de páginas web requer subsídios de diversas áreas técnicas, além do design propriamente dito.
  • 10. Wikipédia - Russie Web design is the process of creating a website or the Web. The term includes the development of e-commerce, web design, web programming for a client-side and server, as well as the configuration of a web server . Веб-разработка — процесс создания веб-сайта или веб-приложения. Термин включает разработку приложений электронной коммерции, веб-дизайн, программирование для веб на стороне клиента и сервера, а также конфигурирование веб-сервера.
  • 11. ? Conception Planification Supports visuels Design Process Contenus multimédia Markup Language CSS XHTML HTML GUI Interactivité Utilisation Architecture de l’Information E-commerce Web Programming Web Serveurs Multidisciplinary
  • 12. Pour mieux comprendre les mutations qui s’opèrent, un voyage dans le temps est nécessaire, un retour vers le futur !
  • 13. 1963 Ivan Sutherland invente le dessin sur écran avec crayon optique : le Sketchpad .
  • 14. Xerox alto . Premier ordinateur qui se rapproche de ceux que nous utilisons aujourd'hui. Dick Shoup du Xerox PARC met au point une machine dotée de la première carte graphique (640x486 en 256 couleurs). Superpaint : 1er logiciel de dessin en couleurs et 1er logiciel d'effets vidéo numériques. 1973
  • 15.  
  • 16.
  • 17. 1982 Le Minitel , un terminal numérique connecté par le câble téléphonique. L’ancêtre de l’Internet à la Française . 6 millions de terminaux, 20.000 services actifs (1990).
  • 18. 120 caractères par seconde, d'autre part la norme vidéotex . 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.
  • 19. Compuserve , premier service en ligne principal aux USA. Premier service de courrier électronique (dès 1979)
  • 20.
  • 21.  
  • 22.
  • 23.  
  • 24. 1990 Un premier site Web, un premier navigateur Disponible à partir d’un ordinateur NeXT Le premier browser est à la fois un navigateur et un éditeur de contenus. Le Web 2.0 existait déjà en 1990.
  • 25.  
  • 26.
  • 27.  
  • 28. The most powerful designs are always the result of a continuous process of simplification and refinement . Kevin Mullet, designer d’interfaces utilisateurs “ ”
  • 29.
  • 30. Recherche constante de la simplicité dans les travaux de John Maeda.
  • 31. Processus de création de la Couverture du Hors-Série spécial immobilier du New-York Times par John Maeda.
  • 32. 1993 L’agence française Virtools introduit des comportements dynamiques et temps réels pour les contenus 3D off et online.
  • 33.
  • 34.  
  • 35.  
  • 36. Les débuts de la création Web Une histoire faite de contradictions et de faux-débats
  • 37. transposer le design print sur un écran d’ordinateur et plus particulièrement sur un canal de diffusion comme le Web. Idée reçue n°1 Print & Ecran CREATION POUR LE WEB =
  • 38. PHOTOSHOP Idée reçue n°2 Infographie CR É ATION POUR LE WEB =
  • 39.
  • 40. CSS = Cascading Style Sheet Le CSS permet de styliser les contenus HTML 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. 1996 Le Cascading Style Sheets est né de la collaboration entre Håkon Lie et Bert Bos . 1994
  • 41. 1994 Naissance du Deuxième Monde . Produit par Studio Canal, il permet d’évoluer dans une communauté virtuelle 3D.
  • 42. 1994 La société japonaise Denzo-Wave invente le QR Code , un code-barre en deux dimensions. Plus tard, ils deviendront de nouvelles interfaces pour les contenus Web mobiles .
  • 43.
  • 44.
  • 45.  
  • 46.
  • 47. 1998 The Remedi Project est la 1 ère galerie interactive pour Web designers. Développée par Josh Ulm, cette plateforme est 100% Flash .
  • 48. 1998 L’animation interactive Frog in a blender créée par Joe Shields est vue par des millions d’internautes dans le monde entier .
  • 49. Designers talk and think a lot like science fiction writers do, except in a much less melodramatic and histrionic way. Bruce Sterling, auteur de science-fiction “ ”
  • 50. 1999 Démocratisation de Flash . Sortie du navigateur Internet Explorer 5.0 qui intègre Flash Player .
  • 51. 1999 Le créateur japonais Yugo Nakamura révolutionne le design interactif et les interfaces de navigation avec le site Yugop.com.
  • 52. 1999 Inventé par Takeshi Natsuno , l' i-mode fut lancé au Japon en 1999 par NTT DoCoMo , et fut un énorme succès.
  • 53. 2000 1 ère convention qui regroupe plus de 4000 créateurs et développeurs utilisant le logiciel Flash de Macromedia .
  • 54. 2000 En utilisant de manière innovante l’Action Script , le site Lookanfeel.com propose une interface cognitive en insistant sur l’ interaction des mouvements avec la souris et le design sonore .
  • 55. 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é les techniques du développement informatique pour apporter une valeur ajoutée à leurs projets. Développement et Webdesign