SlideShare una empresa de Scribd logo
1 de 50
Descargar para leer sin conexión
L’informatique
vestimentaire
SMILE, EmoPulse
C’est un metteur en scène, un chef d’orchestre,
un organisateur : Il structure l’architecture et le contenu du
site web. Il doit déterminer l’ergonomie et la présentation
du site en fonction des objectifs fixés, du public ciblé et de
l’image qu’il est chargé de véhiculer au travers du projet.
Print vs Web
Design
HTML L’Hypertext Markup Language, est le format de données conçu
pour représenter les pages web. C’est un langage de balisage permettant
d’écrire de l’hypertexte généralement abrégé HTML permet également
de structurer sémantiquement et de mettre en forme le contenu des
pages, d’inclure des ressources multimédias dont des images, video...
1990 HTML
Réf: WIKIPEDIA
World Wide Web ou WWW, Tim Barners-Lee met en place les bases du
web (le protocole http, le langage Html...).
l’adresse de ce premier site web fut : http://info.cern.ch/hypertext/WWW/TheProject.htm
et vous pouvez toujours le consulter.
1991 Le premier site web
Réf: (une) histoire du design interactif Etienne Mineur
Le premier site web
1992 - DESIGN DES TABLEAUX EN HTML
1993 - 10 Millions d’internautes connectés
600 site web en ligne
1994 - World Wide Web Consortium
« Un seul web partout et pour tous »
W3C, est un organisme de standardisation, fondé en octobre 1994 chargé
de promouvoir la compatibilité des technologies du World Wide Web
Réf: WIKIPEDIA
1995 - 1996M74 Millions d’internautes
connectés - 650000 sites web en ligne
CSS est introduit par le W3C, améliore l’accessibilité du Web et rend le
code HTML sémantique, plutôt que de présentation.
1996 CSS Cascading Style Sheets
Feuilles de style en cascade
1999 CSS3M279 Millions d’internautes connectés -
2,2 millions sites web en ligne
CSS3 introduit de nouvelles fonctions et caractéristiques qui changent
le visage du web design.
1998 La naissance du géant Google
détient aujourd’hui de nombreux logiciels et sites web notables parmi
lesquels YouTube, le système d’exploitation pour téléphones mobiles
Android, ainsi que d’autres services tels que Google Earth, Google Maps
ou Google Play.
L’internaute devient, grâce aux outils mis à sa disposition, une personne
active sur la toile.
Le Web 2.0
le Web mobile prendre le dessus et plus de gens accéder à l’Internet via
leur téléphone portable que d’un ordinateur de bureau
2008 Le Web mobile
2010 HTML 5 M2 Milliards d’internautes
connectés - 240 millions sites web en ligne
HTML 5 et CSS3 sont en train de créer de meilleurs sites Web avec
l’enrichissement de l’expérience utilisateur.
2012 Responsive Web Design 2,4 Milliards
d’internautes connectés - 624 millions sites web en
ligne
L’utilisateur peut ainsi consulter le même site web à travers une large
gamme d’appareils (moniteurs d’ordinateur, smartphones, tablettes, TV,
etc.)
Les tendance du web d’aujourd’hui : le parallax scrolling, flat design,
video backgrounds, one page le material design et ...
2015 - 3,10 Milliards d’internautes connectés
822 240 nouveaux sites Internet sont mis en ligne
chaque jour.
Quelques chiffres
Screen shoot : Conférence Algeria 2.0 Septembre 2015 par Samir Bellik
Screen shoot : Conférence Algeria 2.0 Septembre 2015 par Samir Bellik
Atelier web et mobile design partie i introduction au web design ahmed bachir cherif esba2015

Más contenido relacionado

Destacado

Copy of presentacion de las necesidades de niños con autismo
Copy of presentacion de las necesidades de niños con autismoCopy of presentacion de las necesidades de niños con autismo
Copy of presentacion de las necesidades de niños con autismoLourdes Aquino Carbonell
 
Trucos de Google
Trucos de GoogleTrucos de Google
Trucos de Googleleunam93
 
¿Diseño para qué?
¿Diseño para qué?¿Diseño para qué?
¿Diseño para qué?R. Sosa
 
Visita a Ecuador marzo-abril 2009
Visita a Ecuador marzo-abril 2009Visita a Ecuador marzo-abril 2009
Visita a Ecuador marzo-abril 2009R. Sosa
 
La Agricultura En Crisis
La  Agricultura En CrisisLa  Agricultura En Crisis
La Agricultura En Crisislynemelendez
 
Encuesta Chile Junjul2006[1]
Encuesta Chile Junjul2006[1]Encuesta Chile Junjul2006[1]
Encuesta Chile Junjul2006[1]guest358d7c
 
Consumer Insights en la Banca: ¿qué nos dicen las técnicas proyectivas?
Consumer Insights en la Banca: ¿qué nos dicen las técnicas proyectivas?Consumer Insights en la Banca: ¿qué nos dicen las técnicas proyectivas?
Consumer Insights en la Banca: ¿qué nos dicen las técnicas proyectivas?Consumer Truth - Insights & Planning
 
Revue de presse_ Salon "Etudes et Carrières Benelux" 2014
Revue de presse_ Salon "Etudes et Carrières Benelux" 2014Revue de presse_ Salon "Etudes et Carrières Benelux" 2014
Revue de presse_ Salon "Etudes et Carrières Benelux" 2014IFLuxembourg
 
Taller Algoritmos Clasificación Vecindad
Taller Algoritmos Clasificación VecindadTaller Algoritmos Clasificación Vecindad
Taller Algoritmos Clasificación VecindadCarlos Román
 
La tempesta nereacristina
La tempesta nereacristinaLa tempesta nereacristina
La tempesta nereacristinaRoser Guiteras
 
¿Para qué sirve la guía de actividades? y ¿Cómo la aplico?
¿Para qué sirve la guía de actividades? y ¿Cómo la aplico?¿Para qué sirve la guía de actividades? y ¿Cómo la aplico?
¿Para qué sirve la guía de actividades? y ¿Cómo la aplico?Rafael Alba Callacna
 
Re&agri 2014 opportunités et défis de l’utilisation des énergies renouvelab...
Re&agri 2014   opportunités et défis de l’utilisation des énergies renouvelab...Re&agri 2014   opportunités et défis de l’utilisation des énergies renouvelab...
Re&agri 2014 opportunités et défis de l’utilisation des énergies renouvelab...Mohamed Larbi BEN YOUNES
 

Destacado (20)

bb-d_ERGO-UX
bb-d_ERGO-UXbb-d_ERGO-UX
bb-d_ERGO-UX
 
Valeurs et méthode à Trans-IT
Valeurs et méthode à Trans-ITValeurs et méthode à Trans-IT
Valeurs et méthode à Trans-IT
 
Copy of presentacion de las necesidades de niños con autismo
Copy of presentacion de las necesidades de niños con autismoCopy of presentacion de las necesidades de niños con autismo
Copy of presentacion de las necesidades de niños con autismo
 
Programme "Tous aux Capucins"
Programme "Tous aux Capucins"Programme "Tous aux Capucins"
Programme "Tous aux Capucins"
 
Trucos de Google
Trucos de GoogleTrucos de Google
Trucos de Google
 
¿Diseño para qué?
¿Diseño para qué?¿Diseño para qué?
¿Diseño para qué?
 
Visita a Ecuador marzo-abril 2009
Visita a Ecuador marzo-abril 2009Visita a Ecuador marzo-abril 2009
Visita a Ecuador marzo-abril 2009
 
La Agricultura En Crisis
La  Agricultura En CrisisLa  Agricultura En Crisis
La Agricultura En Crisis
 
Encuesta Chile Junjul2006[1]
Encuesta Chile Junjul2006[1]Encuesta Chile Junjul2006[1]
Encuesta Chile Junjul2006[1]
 
Anthony de Mello
Anthony de MelloAnthony de Mello
Anthony de Mello
 
Consumer Insights en la Banca: ¿qué nos dicen las técnicas proyectivas?
Consumer Insights en la Banca: ¿qué nos dicen las técnicas proyectivas?Consumer Insights en la Banca: ¿qué nos dicen las técnicas proyectivas?
Consumer Insights en la Banca: ¿qué nos dicen las técnicas proyectivas?
 
Revue de presse_ Salon "Etudes et Carrières Benelux" 2014
Revue de presse_ Salon "Etudes et Carrières Benelux" 2014Revue de presse_ Salon "Etudes et Carrières Benelux" 2014
Revue de presse_ Salon "Etudes et Carrières Benelux" 2014
 
Anorexia
AnorexiaAnorexia
Anorexia
 
Taller Algoritmos Clasificación Vecindad
Taller Algoritmos Clasificación VecindadTaller Algoritmos Clasificación Vecindad
Taller Algoritmos Clasificación Vecindad
 
Open Data en Gijón
Open Data en GijónOpen Data en Gijón
Open Data en Gijón
 
La tempesta nereacristina
La tempesta nereacristinaLa tempesta nereacristina
La tempesta nereacristina
 
îLe De Ré
îLe De RéîLe De Ré
îLe De Ré
 
Mcm Fotografia
Mcm FotografiaMcm Fotografia
Mcm Fotografia
 
¿Para qué sirve la guía de actividades? y ¿Cómo la aplico?
¿Para qué sirve la guía de actividades? y ¿Cómo la aplico?¿Para qué sirve la guía de actividades? y ¿Cómo la aplico?
¿Para qué sirve la guía de actividades? y ¿Cómo la aplico?
 
Re&agri 2014 opportunités et défis de l’utilisation des énergies renouvelab...
Re&agri 2014   opportunités et défis de l’utilisation des énergies renouvelab...Re&agri 2014   opportunités et défis de l’utilisation des énergies renouvelab...
Re&agri 2014 opportunités et défis de l’utilisation des énergies renouvelab...
 

Similar a Atelier web et mobile design partie i introduction au web design ahmed bachir cherif esba2015

Webdesign Passe, Present et... Present Part1
Webdesign Passe, Present et... Present Part1Webdesign Passe, Present et... Present Part1
Webdesign Passe, Present et... Present Part1bduverneuil
 
Webdesign Passe Present et Present Part2
Webdesign Passe Present et Present Part2Webdesign Passe Present et Present Part2
Webdesign Passe Present et Present Part2bduverneuil
 
Web 2.0 : Quelles applications ?
Web 2.0 : Quelles applications ?Web 2.0 : Quelles applications ?
Web 2.0 : Quelles applications ?Jean-François Ruiz
 
HTML5, How to rethink your web strategy - Version FR
HTML5, How to rethink your web strategy - Version FRHTML5, How to rethink your web strategy - Version FR
HTML5, How to rethink your web strategy - Version FRFabernovel
 
L'évolution du web-design
L'évolution du web-designL'évolution du web-design
L'évolution du web-designOlivier Soros
 
Communication digitale
Communication digitaleCommunication digitale
Communication digitaleChris Gaillard
 
HTML5, le web de demain - BNSA
HTML5, le web de demain - BNSAHTML5, le web de demain - BNSA
HTML5, le web de demain - BNSABNSA - Aquitaine
 
MobiliteaTime #5 : Responsive & Adaptive Design
MobiliteaTime #5 : Responsive & Adaptive Design MobiliteaTime #5 : Responsive & Adaptive Design
MobiliteaTime #5 : Responsive & Adaptive Design USERADGENTS
 
Rapport de mini projet de programation web
Rapport de mini projet de programation webRapport de mini projet de programation web
Rapport de mini projet de programation webMOHAMMED MOURADI
 
Webdesign Passe Present et... Present Part3
Webdesign Passe Present et... Present Part3Webdesign Passe Present et... Present Part3
Webdesign Passe Present et... Present Part3bduverneuil
 
Web 2.0 GTI780 & MTI780 ETS A09
Web 2.0  GTI780 & MTI780  ETS  A09Web 2.0  GTI780 & MTI780  ETS  A09
Web 2.0 GTI780 & MTI780 ETS A09Claude Coulombe
 
Les interfaces web de demain
Les interfaces web de demainLes interfaces web de demain
Les interfaces web de demainLaurent Leborgne
 
resume-theorique-m104-0401-61d5b38b21f67 (1).pptx
resume-theorique-m104-0401-61d5b38b21f67 (1).pptxresume-theorique-m104-0401-61d5b38b21f67 (1).pptx
resume-theorique-m104-0401-61d5b38b21f67 (1).pptxFootballLovers9
 
Presentation EPMI Web 2.0 David Boisseleau
Presentation EPMI Web 2.0 David BoisseleauPresentation EPMI Web 2.0 David Boisseleau
Presentation EPMI Web 2.0 David Boisseleaudboisseleau
 
Webdesign sites web et mobiles-methodes-realisation-outils
Webdesign sites web et mobiles-methodes-realisation-outilsWebdesign sites web et mobiles-methodes-realisation-outils
Webdesign sites web et mobiles-methodes-realisation-outilsOlivier Dommange
 

Similar a Atelier web et mobile design partie i introduction au web design ahmed bachir cherif esba2015 (20)

Webdesign Passe, Present et... Present Part1
Webdesign Passe, Present et... Present Part1Webdesign Passe, Present et... Present Part1
Webdesign Passe, Present et... Present Part1
 
Webdesign Passe Present et Present Part2
Webdesign Passe Present et Present Part2Webdesign Passe Present et Present Part2
Webdesign Passe Present et Present Part2
 
Web 2.0 : Quelles applications ?
Web 2.0 : Quelles applications ?Web 2.0 : Quelles applications ?
Web 2.0 : Quelles applications ?
 
HTML5, How to rethink your web strategy - Version FR
HTML5, How to rethink your web strategy - Version FRHTML5, How to rethink your web strategy - Version FR
HTML5, How to rethink your web strategy - Version FR
 
L'évolution du web-design
L'évolution du web-designL'évolution du web-design
L'évolution du web-design
 
Communication digitale
Communication digitaleCommunication digitale
Communication digitale
 
Salon Use IT Lyon
Salon Use IT LyonSalon Use IT Lyon
Salon Use IT Lyon
 
HTML5, le web de demain - BNSA
HTML5, le web de demain - BNSAHTML5, le web de demain - BNSA
HTML5, le web de demain - BNSA
 
Découverte des outils Web 2.0
Découverte des outils Web 2.0Découverte des outils Web 2.0
Découverte des outils Web 2.0
 
MobiliteaTime #5 : Responsive & Adaptive Design
MobiliteaTime #5 : Responsive & Adaptive Design MobiliteaTime #5 : Responsive & Adaptive Design
MobiliteaTime #5 : Responsive & Adaptive Design
 
Rapport de mini projet de programation web
Rapport de mini projet de programation webRapport de mini projet de programation web
Rapport de mini projet de programation web
 
Web2.0
Web2.0Web2.0
Web2.0
 
Webdesign Passe Present et... Present Part3
Webdesign Passe Present et... Present Part3Webdesign Passe Present et... Present Part3
Webdesign Passe Present et... Present Part3
 
Web 2.0 GTI780 & MTI780 ETS A09
Web 2.0  GTI780 & MTI780  ETS  A09Web 2.0  GTI780 & MTI780  ETS  A09
Web 2.0 GTI780 & MTI780 ETS A09
 
Les interfaces web de demain
Les interfaces web de demainLes interfaces web de demain
Les interfaces web de demain
 
Web 2.O
Web 2.OWeb 2.O
Web 2.O
 
resume-theorique-m104-0401-61d5b38b21f67 (1).pptx
resume-theorique-m104-0401-61d5b38b21f67 (1).pptxresume-theorique-m104-0401-61d5b38b21f67 (1).pptx
resume-theorique-m104-0401-61d5b38b21f67 (1).pptx
 
Front end Hero Presentation
Front end Hero PresentationFront end Hero Presentation
Front end Hero Presentation
 
Presentation EPMI Web 2.0 David Boisseleau
Presentation EPMI Web 2.0 David BoisseleauPresentation EPMI Web 2.0 David Boisseleau
Presentation EPMI Web 2.0 David Boisseleau
 
Webdesign sites web et mobiles-methodes-realisation-outils
Webdesign sites web et mobiles-methodes-realisation-outilsWebdesign sites web et mobiles-methodes-realisation-outils
Webdesign sites web et mobiles-methodes-realisation-outils
 

Atelier web et mobile design partie i introduction au web design ahmed bachir cherif esba2015

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 20.
  • 21.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29. C’est un metteur en scène, un chef d’orchestre, un organisateur : Il structure l’architecture et le contenu du site web. Il doit déterminer l’ergonomie et la présentation du site en fonction des objectifs fixés, du public ciblé et de l’image qu’il est chargé de véhiculer au travers du projet.
  • 31. HTML L’Hypertext Markup Language, est le format de données conçu pour représenter les pages web. C’est un langage de balisage permettant d’écrire de l’hypertexte généralement abrégé HTML permet également de structurer sémantiquement et de mettre en forme le contenu des pages, d’inclure des ressources multimédias dont des images, video... 1990 HTML Réf: WIKIPEDIA
  • 32. World Wide Web ou WWW, Tim Barners-Lee met en place les bases du web (le protocole http, le langage Html...). l’adresse de ce premier site web fut : http://info.cern.ch/hypertext/WWW/TheProject.htm et vous pouvez toujours le consulter. 1991 Le premier site web Réf: (une) histoire du design interactif Etienne Mineur
  • 34. 1992 - DESIGN DES TABLEAUX EN HTML
  • 35. 1993 - 10 Millions d’internautes connectés 600 site web en ligne
  • 36. 1994 - World Wide Web Consortium « Un seul web partout et pour tous » W3C, est un organisme de standardisation, fondé en octobre 1994 chargé de promouvoir la compatibilité des technologies du World Wide Web Réf: WIKIPEDIA
  • 37. 1995 - 1996M74 Millions d’internautes connectés - 650000 sites web en ligne
  • 38. CSS est introduit par le W3C, améliore l’accessibilité du Web et rend le code HTML sémantique, plutôt que de présentation. 1996 CSS Cascading Style Sheets Feuilles de style en cascade
  • 39. 1999 CSS3M279 Millions d’internautes connectés - 2,2 millions sites web en ligne CSS3 introduit de nouvelles fonctions et caractéristiques qui changent le visage du web design.
  • 40. 1998 La naissance du géant Google détient aujourd’hui de nombreux logiciels et sites web notables parmi lesquels YouTube, le système d’exploitation pour téléphones mobiles Android, ainsi que d’autres services tels que Google Earth, Google Maps ou Google Play.
  • 41. L’internaute devient, grâce aux outils mis à sa disposition, une personne active sur la toile. Le Web 2.0
  • 42. le Web mobile prendre le dessus et plus de gens accéder à l’Internet via leur téléphone portable que d’un ordinateur de bureau 2008 Le Web mobile
  • 43. 2010 HTML 5 M2 Milliards d’internautes connectés - 240 millions sites web en ligne HTML 5 et CSS3 sont en train de créer de meilleurs sites Web avec l’enrichissement de l’expérience utilisateur.
  • 44. 2012 Responsive Web Design 2,4 Milliards d’internautes connectés - 624 millions sites web en ligne L’utilisateur peut ainsi consulter le même site web à travers une large gamme d’appareils (moniteurs d’ordinateur, smartphones, tablettes, TV, etc.)
  • 45. Les tendance du web d’aujourd’hui : le parallax scrolling, flat design, video backgrounds, one page le material design et ... 2015 - 3,10 Milliards d’internautes connectés 822 240 nouveaux sites Internet sont mis en ligne chaque jour.
  • 47.
  • 48. Screen shoot : Conférence Algeria 2.0 Septembre 2015 par Samir Bellik
  • 49. Screen shoot : Conférence Algeria 2.0 Septembre 2015 par Samir Bellik