SlideShare uma empresa Scribd logo
1 de 50
Baixar para ler offline
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 ESBA 2015-2016

Mais conteúdo relacionado

Mais procurados

ITエンジニアに易しいUI/UXデザイン
ITエンジニアに易しいUI/UXデザインITエンジニアに易しいUI/UXデザイン
ITエンジニアに易しいUI/UXデザイン
Roy Kim
 

Mais procurados (20)

What is UX Design?
What is UX Design?What is UX Design?
What is UX Design?
 
情報構造設計の基礎知識
情報構造設計の基礎知識情報構造設計の基礎知識
情報構造設計の基礎知識
 
Le Comptoir OCTO - Accessibilité
Le Comptoir OCTO - Accessibilité Le Comptoir OCTO - Accessibilité
Le Comptoir OCTO - Accessibilité
 
ITエンジニアに易しいUI/UXデザイン
ITエンジニアに易しいUI/UXデザインITエンジニアに易しいUI/UXデザイン
ITエンジニアに易しいUI/UXデザイン
 
UX / UIデザインって何?
UX / UIデザインって何?UX / UIデザインって何?
UX / UIデザインって何?
 
コンテンツで改善する UI デザインの極意
コンテンツで改善する UI デザインの極意コンテンツで改善する UI デザインの極意
コンテンツで改善する UI デザインの極意
 
おかんでもわかるUXデザイン Ver.0.1
おかんでもわかるUXデザイン Ver.0.1おかんでもわかるUXデザイン Ver.0.1
おかんでもわかるUXデザイン Ver.0.1
 
UI and UX Design for Startups - Matin Maleki
UI and UX Design for Startups - Matin MalekiUI and UX Design for Startups - Matin Maleki
UI and UX Design for Startups - Matin Maleki
 
Accessibility and inclusive design
Accessibility and inclusive designAccessibility and inclusive design
Accessibility and inclusive design
 
【ポップインサイト】スタートアップのためのユーザテスト入門(ユーザ行動観察入門)
【ポップインサイト】スタートアップのためのユーザテスト入門(ユーザ行動観察入門)【ポップインサイト】スタートアップのためのユーザテスト入門(ユーザ行動観察入門)
【ポップインサイト】スタートアップのためのユーザテスト入門(ユーザ行動観察入門)
 
UI/UX - The Bigger Picture
UI/UX - The Bigger PictureUI/UX - The Bigger Picture
UI/UX - The Bigger Picture
 
UX RULES: 10 ESSENTIAL PRINCIPLES
UX RULES: 10 ESSENTIAL PRINCIPLESUX RULES: 10 ESSENTIAL PRINCIPLES
UX RULES: 10 ESSENTIAL PRINCIPLES
 
Ux & ui
Ux & uiUx & ui
Ux & ui
 
UI UX Design Presentation
UI UX Design Presentation UI UX Design Presentation
UI UX Design Presentation
 
Simple Steps to UX/UI Web Design
Simple Steps to UX/UI Web DesignSimple Steps to UX/UI Web Design
Simple Steps to UX/UI Web Design
 
How to Find a Good UI/UX Designer (or be one!)
How to Find a Good UI/UX Designer (or be one!)How to Find a Good UI/UX Designer (or be one!)
How to Find a Good UI/UX Designer (or be one!)
 
SEO x UX ユーザー心理によるコンテンツプランニング
SEO x UX ユーザー心理によるコンテンツプランニングSEO x UX ユーザー心理によるコンテンツプランニング
SEO x UX ユーザー心理によるコンテンツプランニング
 
Icons and the Semiotics of Human Computer Interaction
Icons and the Semiotics of Human Computer InteractionIcons and the Semiotics of Human Computer Interaction
Icons and the Semiotics of Human Computer Interaction
 
UX/UI design
UX/UI designUX/UI design
UX/UI design
 
UI UX and Graphic Design
UI UX and Graphic DesignUI UX and Graphic Design
UI UX and Graphic Design
 

Destaque

Taller de Consumer Insights - Febrero 2009
Taller de Consumer Insights - Febrero 2009Taller de Consumer Insights - Febrero 2009
Taller de Consumer Insights - Febrero 2009
Consumer Truth - Insights & Planning
 
Repères historiques 4 dnb
Repères historiques 4 dnbRepères historiques 4 dnb
Repères historiques 4 dnb
Jeff Laroumagne
 
Reperes le quali en ligne, opportunités et challenge pour le qualitativiste...
Reperes   le quali en ligne, opportunités et challenge pour le qualitativiste...Reperes   le quali en ligne, opportunités et challenge pour le qualitativiste...
Reperes le quali en ligne, opportunités et challenge pour le qualitativiste...
François Abiven
 
Concurso De Ciencia Y TecnologíA
Concurso De Ciencia Y TecnologíAConcurso De Ciencia Y TecnologíA
Concurso De Ciencia Y TecnologíA
Blanca Bautista
 

Destaque (20)

Taller de Consumer Insights - Febrero 2009
Taller de Consumer Insights - Febrero 2009Taller de Consumer Insights - Febrero 2009
Taller de Consumer Insights - Febrero 2009
 
Slidecast
SlidecastSlidecast
Slidecast
 
Repères historiques 4 dnb
Repères historiques 4 dnbRepères historiques 4 dnb
Repères historiques 4 dnb
 
Résultats enquête de satisfaction Repères décembre 2012
Résultats enquête de satisfaction Repères décembre 2012Résultats enquête de satisfaction Repères décembre 2012
Résultats enquête de satisfaction Repères décembre 2012
 
IV Seminario - Fortaleciendo las Capacidades del Concejal Chaqueño
IV Seminario - Fortaleciendo las Capacidades del Concejal ChaqueñoIV Seminario - Fortaleciendo las Capacidades del Concejal Chaqueño
IV Seminario - Fortaleciendo las Capacidades del Concejal Chaqueño
 
Tots els prínceps blaus, microconte per treballar
Tots els prínceps blaus, microconte per treballarTots els prínceps blaus, microconte per treballar
Tots els prínceps blaus, microconte per treballar
 
Assaig de càntic en el temple
Assaig de càntic en el templeAssaig de càntic en el temple
Assaig de càntic en el temple
 
Tarea 3
Tarea 3Tarea 3
Tarea 3
 
Energia
EnergiaEnergia
Energia
 
tafe transcripts
tafe transcriptstafe transcripts
tafe transcripts
 
Reperes le quali en ligne, opportunités et challenge pour le qualitativiste...
Reperes   le quali en ligne, opportunités et challenge pour le qualitativiste...Reperes   le quali en ligne, opportunités et challenge pour le qualitativiste...
Reperes le quali en ligne, opportunités et challenge pour le qualitativiste...
 
Unidad2 internet
Unidad2 internetUnidad2 internet
Unidad2 internet
 
Materias1
Materias1Materias1
Materias1
 
Part Miner Presentation2007v74190
Part Miner Presentation2007v74190Part Miner Presentation2007v74190
Part Miner Presentation2007v74190
 
Smi2012
Smi2012Smi2012
Smi2012
 
IBM Paris Bluemix Meetup #12 - Ecole 42 - 9 décembre 2015
IBM Paris Bluemix Meetup #12 - Ecole 42 - 9 décembre 2015IBM Paris Bluemix Meetup #12 - Ecole 42 - 9 décembre 2015
IBM Paris Bluemix Meetup #12 - Ecole 42 - 9 décembre 2015
 
Plaquette cours spéciaux 144
Plaquette cours spéciaux 144Plaquette cours spéciaux 144
Plaquette cours spéciaux 144
 
Concurso De Ciencia Y TecnologíA
Concurso De Ciencia Y TecnologíAConcurso De Ciencia Y TecnologíA
Concurso De Ciencia Y TecnologíA
 
Quotes
Quotes Quotes
Quotes
 
Apprenez à plaire à Google pour bien positionner votre entreprise en ligne
Apprenez à plaire à Google pour bien positionner votre entreprise en ligneApprenez à plaire à Google pour bien positionner votre entreprise en ligne
Apprenez à plaire à Google pour bien positionner votre entreprise en ligne
 

Semelhante a Atelier Web et Mobile Design partie I, introduction au web design, Ahmed BACHIR CHERIF ESBA 2015-2016

Semelhante a Atelier Web et Mobile Design partie I, introduction au web design, Ahmed BACHIR CHERIF ESBA 2015-2016 (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
WebdesignWebdesign
Webdesign
 
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
 
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
 

Mais de Ahmed BACHIR CHERIF (6)

UX Design for Startup
UX Design for StartupUX Design for Startup
UX Design for Startup
 
Quand l'art Innove
Quand l'art InnoveQuand l'art Innove
Quand l'art Innove
 
Think your brand Hutl prize competition Algeria ENSH Blida
Think your brand Hutl prize competition Algeria ENSH BlidaThink your brand Hutl prize competition Algeria ENSH Blida
Think your brand Hutl prize competition Algeria ENSH Blida
 
Introduction au logo design
Introduction au logo designIntroduction au logo design
Introduction au logo design
 
Atelier Web et Mobile Design partie I, introduction au web design, Outils du ...
Atelier Web et Mobile Design partie I, introduction au web design, Outils du ...Atelier Web et Mobile Design partie I, introduction au web design, Outils du ...
Atelier Web et Mobile Design partie I, introduction au web design, Outils du ...
 
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...
 

Atelier Web et Mobile Design partie I, introduction au web design, Ahmed BACHIR CHERIF ESBA 2015-2016

  • 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