SlideShare une entreprise Scribd logo
1  sur  50
Télécharger pour lire hors ligne
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

Contenu connexe

Tendances

Formation E-publicité : mettre en place une campagne display
Formation E-publicité : mettre en place une campagne displayFormation E-publicité : mettre en place une campagne display
Formation E-publicité : mettre en place une campagne displayMaxime SAADA
 
Lexique prepresse bilingue anglais
Lexique prepresse bilingue anglaisLexique prepresse bilingue anglais
Lexique prepresse bilingue anglaisMurielle Bruneau
 
Presentation agence digitale BACKELITE
Presentation agence digitale BACKELITEPresentation agence digitale BACKELITE
Presentation agence digitale BACKELITEIdean France
 
La charte éditoriale, essentielle pour donner du sens à votre site web !
La charte éditoriale, essentielle pour donner du sens à votre site web !La charte éditoriale, essentielle pour donner du sens à votre site web !
La charte éditoriale, essentielle pour donner du sens à votre site web !quel progrès ! - NETCO GROUP
 
La rhétorique de l'image Roland Barthes
La rhétorique de l'image Roland BarthesLa rhétorique de l'image Roland Barthes
La rhétorique de l'image Roland BarthesKredens Elodie
 
Le plan de communication claire wibaille
Le plan de communication claire wibailleLe plan de communication claire wibaille
Le plan de communication claire wibailleClaire WIBAILLE
 
Le plan de communication
Le plan de communicationLe plan de communication
Le plan de communicationSimon Vinet
 
6. Atelier : Idéation > Conception
6. Atelier : Idéation > Conception6. Atelier : Idéation > Conception
6. Atelier : Idéation > ConceptionLaurent Barbat
 
Munidapolis guide ms project
Munidapolis guide ms projectMunidapolis guide ms project
Munidapolis guide ms projecthindif
 
Rapport projet - Agence de communication NEO
Rapport projet - Agence de communication NEORapport projet - Agence de communication NEO
Rapport projet - Agence de communication NEORaphaëlle Sleurs
 
40 ans d'histoire des interfaces graphiques
40 ans d'histoire des interfaces graphiques40 ans d'histoire des interfaces graphiques
40 ans d'histoire des interfaces graphiquesdesigners interactifs
 
La Haute Société : agence conseil en stratégie digitale
La Haute Société : agence conseil en stratégie digitaleLa Haute Société : agence conseil en stratégie digitale
La Haute Société : agence conseil en stratégie digitaleLa Haute Société
 
Construire sa strategie de communication en 5 étapes
Construire sa strategie de communication en 5 étapesConstruire sa strategie de communication en 5 étapes
Construire sa strategie de communication en 5 étapesActionDesign
 
Kafecom Communication - L'Agence
Kafecom Communication - L'AgenceKafecom Communication - L'Agence
Kafecom Communication - L'AgenceCatherine Barradeau
 
Présentation de l'agence de communication digitale inaativ
Présentation de l'agence de communication digitale inaativPrésentation de l'agence de communication digitale inaativ
Présentation de l'agence de communication digitale inaativVincent Pereira
 
Les fondamentaux de UI UX Design .pdf
Les fondamentaux de UI UX Design .pdfLes fondamentaux de UI UX Design .pdf
Les fondamentaux de UI UX Design .pdfSonia SAHLI
 
La relation client/designer graphique
La relation client/designer graphiqueLa relation client/designer graphique
La relation client/designer graphiqueMarion Phelebon
 

Tendances (20)

Formation E-publicité : mettre en place une campagne display
Formation E-publicité : mettre en place une campagne displayFormation E-publicité : mettre en place une campagne display
Formation E-publicité : mettre en place une campagne display
 
Lexique prepresse bilingue anglais
Lexique prepresse bilingue anglaisLexique prepresse bilingue anglais
Lexique prepresse bilingue anglais
 
Presentation agence digitale BACKELITE
Presentation agence digitale BACKELITEPresentation agence digitale BACKELITE
Presentation agence digitale BACKELITE
 
La charte éditoriale, essentielle pour donner du sens à votre site web !
La charte éditoriale, essentielle pour donner du sens à votre site web !La charte éditoriale, essentielle pour donner du sens à votre site web !
La charte éditoriale, essentielle pour donner du sens à votre site web !
 
La rhétorique de l'image Roland Barthes
La rhétorique de l'image Roland BarthesLa rhétorique de l'image Roland Barthes
La rhétorique de l'image Roland Barthes
 
Le plan de communication claire wibaille
Le plan de communication claire wibailleLe plan de communication claire wibaille
Le plan de communication claire wibaille
 
Le plan de communication
Le plan de communicationLe plan de communication
Le plan de communication
 
6. Atelier : Idéation > Conception
6. Atelier : Idéation > Conception6. Atelier : Idéation > Conception
6. Atelier : Idéation > Conception
 
Munidapolis guide ms project
Munidapolis guide ms projectMunidapolis guide ms project
Munidapolis guide ms project
 
Rapport projet - Agence de communication NEO
Rapport projet - Agence de communication NEORapport projet - Agence de communication NEO
Rapport projet - Agence de communication NEO
 
40 ans d'histoire des interfaces graphiques
40 ans d'histoire des interfaces graphiques40 ans d'histoire des interfaces graphiques
40 ans d'histoire des interfaces graphiques
 
La Haute Société : agence conseil en stratégie digitale
La Haute Société : agence conseil en stratégie digitaleLa Haute Société : agence conseil en stratégie digitale
La Haute Société : agence conseil en stratégie digitale
 
Construire sa strategie de communication en 5 étapes
Construire sa strategie de communication en 5 étapesConstruire sa strategie de communication en 5 étapes
Construire sa strategie de communication en 5 étapes
 
Projet web : lexique et notions
Projet web : lexique et notionsProjet web : lexique et notions
Projet web : lexique et notions
 
Kafecom Communication - L'Agence
Kafecom Communication - L'AgenceKafecom Communication - L'Agence
Kafecom Communication - L'Agence
 
Présentation de l'agence de communication digitale inaativ
Présentation de l'agence de communication digitale inaativPrésentation de l'agence de communication digitale inaativ
Présentation de l'agence de communication digitale inaativ
 
Guide ms project tutorial
Guide ms project tutorialGuide ms project tutorial
Guide ms project tutorial
 
Typography Referenced by Allan Haley (2012)
Typography Referenced by Allan Haley (2012)Typography Referenced by Allan Haley (2012)
Typography Referenced by Allan Haley (2012)
 
Les fondamentaux de UI UX Design .pdf
Les fondamentaux de UI UX Design .pdfLes fondamentaux de UI UX Design .pdf
Les fondamentaux de UI UX Design .pdf
 
La relation client/designer graphique
La relation client/designer graphiqueLa relation client/designer graphique
La relation client/designer graphique
 

En vedette

Repères historiques 4 dnb
Repères historiques 4 dnbRepères historiques 4 dnb
Repères historiques 4 dnbJeff Laroumagne
 
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 2012François Abiven
 
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ñoFundación CiGob
 
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 treballarRoser Guiteras
 
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 templeRoser Guiteras
 
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
 
Part Miner Presentation2007v74190
Part Miner Presentation2007v74190Part Miner Presentation2007v74190
Part Miner Presentation2007v74190sharepartminer
 
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 2015IBM France Lab
 
Plaquette cours spéciaux 144
Plaquette cours spéciaux 144Plaquette cours spéciaux 144
Plaquette cours spéciaux 144Lidyasam
 
Concurso De Ciencia Y TecnologíA
Concurso De Ciencia Y TecnologíAConcurso De Ciencia Y TecnologíA
Concurso De Ciencia Y TecnologíABlanca Bautista
 
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 lignepolenumerique33
 

En vedette (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
 

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

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

Similaire à 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
 

Plus de Ahmed BACHIR CHERIF

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 BlidaAhmed BACHIR CHERIF
 
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 ...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
 

Plus 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