SlideShare une entreprise Scribd logo
Webdesign
Évolution
Définition
Conception de site web
• Le web design est la conception de l'interface web. La conception d'un
design web doit tenir compte des contraintes spécifiques du support Internet,
en termes d’ergonomie, d’utilisabilité et d’accessibilité. 

• Le web design réclame un minimum de compétences en programmation, en
ergonomie web, ainsi qu'une bonne connaissance des contraintes techniques
liées à ce domaine : diversité des terminaux web et de leurs affichages,
accessibilité, spécificités des différents langages et processus, portabilité,
respect des recommandations du W3C (organisme de normalisation du web).
1989
Première page web
http://info.cern.ch/hypertext/WWW/TheProject.html

Aucun design possible
Milieu des années 90
Tableaux html et gif
Mise en page avec des tableaux html, images gif ou jpg
en fond de page ou dans les cellules du tableau. 

Reviens à faire de la mise en page dans Excel

https://web.archive.org/web/19980215014716/http://
www3.whitehouse.gov:80/

Taille des écrans d’ordinateurs 640px par 480px.

Connexions internet par des Modem 56k

56 kilo-bits par seconde, c'est à peine entre 5 et 6 kilo-
octets par seconde. Pour télécharger un fichier de 1 Mo il
fallait donc patienter plus de 3 minutes... 

Énorme contrainte sur le poids des images.

Poids total d’une page 200ko/300ko
Fin des années 90
Evolution du html
Le html évolue, il permet des réglages de couleurs,
bordures, filets, fond de cellules, de typo systèmes, on
reste dans des tableaux.

Encore de grosses contraintes sur le poids.

Taille des écrans d’ordinateurs 1280px par 960px.

Connexions internet ADSL arrive en 1999 en France
et mettra presque 10 ans à se généraliser.

L’utilisateur doit pointer sur les ascenseurs pour
scroller, pas de tactiles, pas de molettes sur les souris.
Fin des années 90
Arrivée du flash
Au départ, Flash permettait de faire des animations
vectorielles auquel on pouvait ajouter des images, des
typos, du son, de la vidéo….

Utilisé sous forme de briques que l’on ajoutait aux
pages html. Le flash permettait de faire des
animations légères.
Années 2000
Généralisation du flash
Flash se dote d’un langage de programmation l’Action Script
qui va permettre de faire des sites entièrement en flash. 

Cette formule séduit les agences, les graphistes qui seront
beaucoup moins contraints que par le html, mais donnant
parfois des sites inutilisables ou pénibles à consulter.

Les tailles d’écrans se multiplient mais Internet est accessible
uniquement sur des écrans d’ordinateurs. Toujours pas de
pages scrollables.

Ces sites FullFlash sont difficiles à mettre à jour et nécessitent
l’intervention d’un développeur, ils sont impossibles à
référencer par les moteurs de recherches. Les pages n’ont
pas d’url, tout est à l’adresse du domaine principal. 

C’est aussi la possibilité de faire des sites qui injectent des
programmes douteux chez leurs visiteurs.
Années 2000
Le CSS appliqué au HTML
En parallèle, le html évolue et se voit doté d’un autre
langage qui permet de dissocier le fond de la forme.

Le CSS Cascading Style Sheets va permettre de
régler les attributs graphiques et d’affichage d’un
contenu structuré. 2 pages avec du contenu différents
mais avec la même structure auront le même
affichage.

Par exemple : Les titres en html peuvent être de
plusieurs niveaux, les titres H1, H2, H3, H4. 

Le CSS va permettre d’indiquer la fonte, la graisse, la
taille, la couleur, les effets d’ombré, couleurs de fond,
marges, bordures qui seront appliqués à tous les H1
d’un site.
Années 2000
Le CSS appliqué au HTML
Le CSS permet aussi de faire la structure de la page à
la place de notre mise-en-page HTML avec des
tableaux, par l’usage de Div, des divisions ou l’on va
pouvoir regrouper des éléments textes ou images.

Mais le CSS n’est pas interprété de la même façon par
tous les navigateurs, des typos plus ou moins
grandes, des couleurs qui varient, des fonctions qui
marchent sur l’un pas sur l’autre. Et toujours
beaucoup moins de liberté que dans FLASH.
Années 2000
Arrivée des CMS
Pour faciliter la publication sur le web et permettre à
des rédacteurs de publier du contenu sur le web.

Au départ ce sont surtout des moteurs de blogs. Tout
se passe sur le web, un rédacteur se connecte à
l’administration du site et va pouvoir lui ajouter des
pages sans se soucier du graphisme.

Grace au CSS qui s’appliquent automatiquement lors
de l’affichage public des contenus.
Années 2000
Arrivée des CMS
• Un site prêt à l’emploi sans avoir besoin de coder

• Open Source = Libre de droit

• Facile à utiliser et extensible suivant les besoins

De nombreux CMS existent et sont disponibles

4 sont fréquemment cités :

Wordpress : le plus populaire car le plus facile, orienté
blog … 30% des sites dans le monde

Drupal : Polyvalence, Robustesse.

Joomla : Facile à installer, en déclin.

SPIP : Très sécurisé, facilement extensible

Il existe des CMS spécifiques comme PrestaShop
pour le e-commerce
Années 2000
Arrivée des CMS
Il y a deux options pour le graphisme

1 - Un thème tout fait et à peine personnalisable, on
choisit au mieux un bandeau, une couleur, une typo et
tout le reste est déjà calé par le thème.

2 - Un thème à développer de A à Z qui nécessite une
collaboration entre un graphiste et un dévelopeur
informatique, ou quelqu’un qui a plus ou moins les 2
compétences.
Années 2010
Fin du Flash
De moins en moins apprécié pour le poids des sites, leur incapacité à être
référencé, la possibilité de faire des sites difficiles à consulter, et les problèmes
de sécurité. Steve Jobs décide d’exclure le flash des iPhones et des ipads,
sonnant le glas de cette technologie. Il est suivi par Google.
Années 2010
Explosion de WordPress
Environ 35% des sites sont fait avec WordPress et ça progresse.

Site facile à maintenir à jour

De nombreux thèmes payants peu onéreux d’assez bonne qualité.

Des sites souvent bien référencés

Un système de plugins qui permet d’ajouter simplement des fonctions
supplémentaires, pour faire du e-commerce, de l’Intranet, des sites de
réservations, de l’interactions avec d’autres plate-formes…

Une grosse communauté
Années 2010
Le responsive (sensible, réactif)
Avec l’arrivée des smartphones et des tablettes.

Possibilité de consulter un même site sur des écrans de
taille trés variés.

Les webdesigners doivent alors composer avec les
différentes tailles et ne plus penser uniquement comme
sur le print à une taille unique, chaque éléments va
changer de taille, de place, s’aligner différemment.

Les thèmes WordPress payants vont vite intégrer cette
fonction, et pour les sites à développer complètement le
surcout de cette option va freiner son développement.
Années 2010
Les constructeurs de pages
Ce sont des thèmes (ou de plugins) de WordPress qui remplacent le
champ de saisi des pages et des articles, par un outil de construction de
pages. 

Un page builder permet de composer une page en empilant des modules
composés de sections qui se découpent en colonnes. 

Colonnes que l’on remplit de textes, de photos, de vidéos, de cartes, de
slider, etc…

Chacun de ses éléments est associé à un panneau de configuration
permettant des réglages d’affichage graphique, d’effets d’animation, etc…

L’édition peut se faire en WYSIWYG, on voit ce qu’on modifie, on agit
directement dessus.
Années 2010
Les constructeurs de pages
Le champ de saisi de Wordpress
Remplacé par l’éditeur du thème Divi
Années 2010
Les constructeurs de pages
Divi par l’éditeur Elegant Themes
Traduit en français
89$/an ou 249$ en illimité à vie
Avada par l’éditeur Theme-Fusion
En anglais uniquement
60$ + 19$/an pour accéder au support
Beaver Builder
99$ pour le plugin - 199$ pour le thème -
399$ avec fonction supplémentaires
Elementor
Version simplifiée gratuite
49$ pour un site - 99$ pour 3 - 199$ our 1000 sites
Visual composer - plugin
En anglais uniquement
Version simplifiée gratuite - 34$
pour un site -170$ illimité
Mais aussi Enfold X, Oxygen, Page Builder by Site Origin, Via Advanced Layout Builder, Motopress, Velocity Page, Zoom Builder, Themify Page Builder…
Les 2 challengers
Fin 2018
Gutenberg
Pour contrer les constructeurs de pages, Automattic la société
qui gère WordPress, propose un constructeur de page natif dans
WordPress, beaucoup plus simple mais qui ne cesse d’évoluer et
qui devient de plus sérieux. WordPress a prévu de beaucoup
miser sur son constructeur de page.

Contenu connexe

Tendances

Wordpress pour les entreprises
Wordpress pour les entreprisesWordpress pour les entreprises
Wordpress pour les entreprises
monsieurpixel
 
Utiliser WordPress
Utiliser WordPressUtiliser WordPress
Utiliser WordPress
Daniel GUEYSSET
 
Initiation à WordPress
Initiation à WordPressInitiation à WordPress
Initiation à WordPress
StrategiaWeb Communication Numérique
 
Support de formation pour Wordpress
Support de formation pour WordpressSupport de formation pour Wordpress
Support de formation pour Wordpress
Voyelle Voyelle
 
Creer un site internet sous WordPress
Creer un site internet sous WordPress Creer un site internet sous WordPress
Creer un site internet sous WordPress
Erwan Tanguy
 
Prezi&cie
Prezi&ciePrezi&cie
Prezi&cie
lamarionita
 
Conception Web Avec Dreamweaver
Conception Web Avec DreamweaverConception Web Avec Dreamweaver
Conception Web Avec Dreamweaver
davidbx
 
Formation WordPress
Formation WordPressFormation WordPress
Formation WordPress
Sylvain DENIS
 
Webdesign le graphisme et ses principes
Webdesign le graphisme et ses principesWebdesign le graphisme et ses principes
Webdesign le graphisme et ses principes
Olivier Dommange
 
Formation Wordpress 3
Formation Wordpress 3Formation Wordpress 3
Formation Wordpress 3
robinparisi
 
Découvrir WordPress
Découvrir WordPressDécouvrir WordPress
Découvrir WordPress
StrasWeb
 
Développer son site internet et optimiser son référencement
Développer son site internet et optimiser son référencementDévelopper son site internet et optimiser son référencement
Développer son site internet et optimiser son référencement
Yoann Kassi-Vivier
 
Test de produit, word press
Test de produit, word pressTest de produit, word press
Test de produit, word press
Khaldi Abdelhamid HAbib
 
Démarrer son site WordPress : LA "to-do" list
Démarrer son site WordPress : LA "to-do" listDémarrer son site WordPress : LA "to-do" list
Démarrer son site WordPress : LA "to-do" list
Kaylynne Johnson
 
WordPress en tant que CMS
WordPress en tant que CMSWordPress en tant que CMS
WordPress en tant que CMS
Chi Nacim
 
Présentation "Créer son site soi-même"
Présentation "Créer son site soi-même" Présentation "Créer son site soi-même"
Présentation "Créer son site soi-même"
Aline INIZAN PAYEN
 
WordPress en 2015 - ForumPHP
WordPress en 2015 - ForumPHPWordPress en 2015 - ForumPHP
WordPress en 2015 - ForumPHP
xavierborderie
 

Tendances (18)

Wordpress pour les entreprises
Wordpress pour les entreprisesWordpress pour les entreprises
Wordpress pour les entreprises
 
Utiliser WordPress
Utiliser WordPressUtiliser WordPress
Utiliser WordPress
 
Initiation à WordPress
Initiation à WordPressInitiation à WordPress
Initiation à WordPress
 
Support de formation pour Wordpress
Support de formation pour WordpressSupport de formation pour Wordpress
Support de formation pour Wordpress
 
Creer un site internet sous WordPress
Creer un site internet sous WordPress Creer un site internet sous WordPress
Creer un site internet sous WordPress
 
Prezi&cie
Prezi&ciePrezi&cie
Prezi&cie
 
Conception Web Avec Dreamweaver
Conception Web Avec DreamweaverConception Web Avec Dreamweaver
Conception Web Avec Dreamweaver
 
Formation WordPress
Formation WordPressFormation WordPress
Formation WordPress
 
Webdesign le graphisme et ses principes
Webdesign le graphisme et ses principesWebdesign le graphisme et ses principes
Webdesign le graphisme et ses principes
 
Formation Wordpress 3
Formation Wordpress 3Formation Wordpress 3
Formation Wordpress 3
 
Découvrir WordPress
Découvrir WordPressDécouvrir WordPress
Découvrir WordPress
 
Développer son site internet et optimiser son référencement
Développer son site internet et optimiser son référencementDévelopper son site internet et optimiser son référencement
Développer son site internet et optimiser son référencement
 
Test de produit, word press
Test de produit, word pressTest de produit, word press
Test de produit, word press
 
Démarrer son site WordPress : LA "to-do" list
Démarrer son site WordPress : LA "to-do" listDémarrer son site WordPress : LA "to-do" list
Démarrer son site WordPress : LA "to-do" list
 
WordPress en tant que CMS
WordPress en tant que CMSWordPress en tant que CMS
WordPress en tant que CMS
 
Présentation "Créer son site soi-même"
Présentation "Créer son site soi-même" Présentation "Créer son site soi-même"
Présentation "Créer son site soi-même"
 
WordPress en 2015 - ForumPHP
WordPress en 2015 - ForumPHPWordPress en 2015 - ForumPHP
WordPress en 2015 - ForumPHP
 
8 prezi&cie
8   prezi&cie8   prezi&cie
8 prezi&cie
 

Similaire à Webdesign

Webdesign sites web et mobiles-tendances 2015
Webdesign sites web et mobiles-tendances 2015Webdesign sites web et mobiles-tendances 2015
Webdesign sites web et mobiles-tendances 2015
Olivier Dommange
 
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
 
L'évolution du web-design
L'évolution du web-designL'évolution du web-design
L'évolution du web-design
Olivier Soros
 
Que l'esprit de la bidouille soit avec vous
Que l'esprit de la bidouille soit avec vousQue l'esprit de la bidouille soit avec vous
Que l'esprit de la bidouille soit avec vous
Tourisme Numérique, Forum de Deauville
 
Responsive Web Design - BreizhCamp 2013
Responsive Web Design - BreizhCamp 2013Responsive Web Design - BreizhCamp 2013
Responsive Web Design - BreizhCamp 2013
Julien LE THUAUT
 
MobiliteaTime #5 : Responsive & Adaptive Design
MobiliteaTime #5 : Responsive & Adaptive Design MobiliteaTime #5 : Responsive & Adaptive Design
MobiliteaTime #5 : Responsive & Adaptive Design
USERADGENTS
 
Les interfaces web de demain
Les interfaces web de demainLes interfaces web de demain
Les interfaces web de demain
Laurent Leborgne
 
Convergence et mobilité des contenus
Convergence et mobilité des contenus Convergence et mobilité des contenus
Convergence et mobilité des contenus
Vanksen
 
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
Fabernovel
 
Webdesign Passe Present et Present Part2
Webdesign Passe Present et Present Part2Webdesign Passe Present et Present Part2
Webdesign Passe Present et Present Part2
bduverneuil
 
Les nouveaux challenges techniques pour le SEO
Les nouveaux challenges techniques pour le SEOLes nouveaux challenges techniques pour le SEO
Les nouveaux challenges techniques pour le SEO
Groupe Neper
 
Webdesign Passe, Present et... Present Part1
Webdesign Passe, Present et... Present Part1Webdesign Passe, Present et... Present Part1
Webdesign Passe, Present et... Present Part1
bduverneuil
 
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
 
Websico dp-fr-7a63
Websico dp-fr-7a63Websico dp-fr-7a63
Websico dp-fr-7a63
charlydeparis
 
PRESENTATION_webclient.pptx
PRESENTATION_webclient.pptxPRESENTATION_webclient.pptx
PRESENTATION_webclient.pptx
AleskaVargas2
 
Intégration #1 : introduction
Intégration #1 : introductionIntégration #1 : introduction
Intégration #1 : introduction
Jean Michel
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design
Guillaume Verstraete
 
HTML5mtl - 2012-02-22 - Responsive Web Design
HTML5mtl - 2012-02-22 - Responsive Web DesignHTML5mtl - 2012-02-22 - Responsive Web Design
HTML5mtl - 2012-02-22 - Responsive Web Design
Frédéric Harper
 

Similaire à Webdesign (20)

Webdesign sites web et mobiles-tendances 2015
Webdesign sites web et mobiles-tendances 2015Webdesign sites web et mobiles-tendances 2015
Webdesign sites web et mobiles-tendances 2015
 
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)
 
L'évolution du web-design
L'évolution du web-designL'évolution du web-design
L'évolution du web-design
 
Que l'esprit de la bidouille soit avec vous
Que l'esprit de la bidouille soit avec vousQue l'esprit de la bidouille soit avec vous
Que l'esprit de la bidouille soit avec vous
 
Responsive Web Design - BreizhCamp 2013
Responsive Web Design - BreizhCamp 2013Responsive Web Design - BreizhCamp 2013
Responsive Web Design - BreizhCamp 2013
 
MobiliteaTime #5 : Responsive & Adaptive Design
MobiliteaTime #5 : Responsive & Adaptive Design MobiliteaTime #5 : Responsive & Adaptive Design
MobiliteaTime #5 : Responsive & Adaptive Design
 
Les interfaces web de demain
Les interfaces web de demainLes interfaces web de demain
Les interfaces web de demain
 
Convergence et mobilité des contenus
Convergence et mobilité des contenus Convergence et mobilité des contenus
Convergence et mobilité des contenus
 
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
 
Webdesign Passe Present et Present Part2
Webdesign Passe Present et Present Part2Webdesign Passe Present et Present Part2
Webdesign Passe Present et Present Part2
 
Les nouveaux challenges techniques pour le SEO
Les nouveaux challenges techniques pour le SEOLes nouveaux challenges techniques pour le SEO
Les nouveaux challenges techniques pour le SEO
 
Webdesign Passe, Present et... Present Part1
Webdesign Passe, Present et... Present Part1Webdesign Passe, Present et... Present Part1
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...
 
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...
 
Websico dp-fr-7a63
Websico dp-fr-7a63Websico dp-fr-7a63
Websico dp-fr-7a63
 
PRESENTATION_webclient.pptx
PRESENTATION_webclient.pptxPRESENTATION_webclient.pptx
PRESENTATION_webclient.pptx
 
Intégration #1 : introduction
Intégration #1 : introductionIntégration #1 : introduction
Intégration #1 : introduction
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design
 
HTML5mtl - 2012-02-22 - Responsive Web Design
HTML5mtl - 2012-02-22 - Responsive Web DesignHTML5mtl - 2012-02-22 - Responsive Web Design
HTML5mtl - 2012-02-22 - Responsive Web Design
 
SAPIENS2009 - Module 4B
SAPIENS2009 - Module 4BSAPIENS2009 - Module 4B
SAPIENS2009 - Module 4B
 

Plus de Chris Gaillard

Réseaux -sociaux 2023
Réseaux -sociaux 2023Réseaux -sociaux 2023
Réseaux -sociaux 2023
Chris Gaillard
 
SEO Référencement
SEO RéférencementSEO Référencement
SEO Référencement
Chris Gaillard
 
Cours Images
Cours ImagesCours Images
Cours Images
Chris Gaillard
 
Présentation et historique
Présentation et historiquePrésentation et historique
Présentation et historique
Chris Gaillard
 
WordPress
WordPressWordPress
WordPress
Chris Gaillard
 
Accessibilité web
Accessibilité webAccessibilité web
Accessibilité web
Chris Gaillard
 
Gutenberg - WordPress 5
Gutenberg - WordPress 5Gutenberg - WordPress 5
Gutenberg - WordPress 5
Chris Gaillard
 
Migrer un site Wordpress
Migrer un site Wordpress Migrer un site Wordpress
Migrer un site Wordpress
Chris Gaillard
 
RGPD
RGPDRGPD
Ergonomie
ErgonomieErgonomie
Ergonomie
Chris Gaillard
 
Règles typo
Règles typoRègles typo
Règles typo
Chris Gaillard
 
Newsletter et publipostage
Newsletter et publipostageNewsletter et publipostage
Newsletter et publipostage
Chris Gaillard
 
Introduction à Wordpress
Introduction à WordpressIntroduction à Wordpress
Introduction à Wordpress
Chris Gaillard
 

Plus de Chris Gaillard (13)

Réseaux -sociaux 2023
Réseaux -sociaux 2023Réseaux -sociaux 2023
Réseaux -sociaux 2023
 
SEO Référencement
SEO RéférencementSEO Référencement
SEO Référencement
 
Cours Images
Cours ImagesCours Images
Cours Images
 
Présentation et historique
Présentation et historiquePrésentation et historique
Présentation et historique
 
WordPress
WordPressWordPress
WordPress
 
Accessibilité web
Accessibilité webAccessibilité web
Accessibilité web
 
Gutenberg - WordPress 5
Gutenberg - WordPress 5Gutenberg - WordPress 5
Gutenberg - WordPress 5
 
Migrer un site Wordpress
Migrer un site Wordpress Migrer un site Wordpress
Migrer un site Wordpress
 
RGPD
RGPDRGPD
RGPD
 
Ergonomie
ErgonomieErgonomie
Ergonomie
 
Règles typo
Règles typoRègles typo
Règles typo
 
Newsletter et publipostage
Newsletter et publipostageNewsletter et publipostage
Newsletter et publipostage
 
Introduction à Wordpress
Introduction à WordpressIntroduction à Wordpress
Introduction à Wordpress
 

Webdesign

  • 2. Définition Conception de site web • Le web design est la conception de l'interface web. La conception d'un design web doit tenir compte des contraintes spécifiques du support Internet, en termes d’ergonomie, d’utilisabilité et d’accessibilité. • Le web design réclame un minimum de compétences en programmation, en ergonomie web, ainsi qu'une bonne connaissance des contraintes techniques liées à ce domaine : diversité des terminaux web et de leurs affichages, accessibilité, spécificités des différents langages et processus, portabilité, respect des recommandations du W3C (organisme de normalisation du web).
  • 4. Milieu des années 90 Tableaux html et gif Mise en page avec des tableaux html, images gif ou jpg en fond de page ou dans les cellules du tableau. Reviens à faire de la mise en page dans Excel https://web.archive.org/web/19980215014716/http:// www3.whitehouse.gov:80/ Taille des écrans d’ordinateurs 640px par 480px. Connexions internet par des Modem 56k
 56 kilo-bits par seconde, c'est à peine entre 5 et 6 kilo- octets par seconde. Pour télécharger un fichier de 1 Mo il fallait donc patienter plus de 3 minutes... Énorme contrainte sur le poids des images.
 Poids total d’une page 200ko/300ko
  • 5. Fin des années 90 Evolution du html Le html évolue, il permet des réglages de couleurs, bordures, filets, fond de cellules, de typo systèmes, on reste dans des tableaux. Encore de grosses contraintes sur le poids. Taille des écrans d’ordinateurs 1280px par 960px. Connexions internet ADSL arrive en 1999 en France et mettra presque 10 ans à se généraliser. L’utilisateur doit pointer sur les ascenseurs pour scroller, pas de tactiles, pas de molettes sur les souris.
  • 6. Fin des années 90 Arrivée du flash Au départ, Flash permettait de faire des animations vectorielles auquel on pouvait ajouter des images, des typos, du son, de la vidéo…. Utilisé sous forme de briques que l’on ajoutait aux pages html. Le flash permettait de faire des animations légères.
  • 7. Années 2000 Généralisation du flash Flash se dote d’un langage de programmation l’Action Script qui va permettre de faire des sites entièrement en flash. Cette formule séduit les agences, les graphistes qui seront beaucoup moins contraints que par le html, mais donnant parfois des sites inutilisables ou pénibles à consulter. Les tailles d’écrans se multiplient mais Internet est accessible uniquement sur des écrans d’ordinateurs. Toujours pas de pages scrollables. Ces sites FullFlash sont difficiles à mettre à jour et nécessitent l’intervention d’un développeur, ils sont impossibles à référencer par les moteurs de recherches. Les pages n’ont pas d’url, tout est à l’adresse du domaine principal. C’est aussi la possibilité de faire des sites qui injectent des programmes douteux chez leurs visiteurs.
  • 8. Années 2000 Le CSS appliqué au HTML En parallèle, le html évolue et se voit doté d’un autre langage qui permet de dissocier le fond de la forme. Le CSS Cascading Style Sheets va permettre de régler les attributs graphiques et d’affichage d’un contenu structuré. 2 pages avec du contenu différents mais avec la même structure auront le même affichage. Par exemple : Les titres en html peuvent être de plusieurs niveaux, les titres H1, H2, H3, H4. 
 Le CSS va permettre d’indiquer la fonte, la graisse, la taille, la couleur, les effets d’ombré, couleurs de fond, marges, bordures qui seront appliqués à tous les H1 d’un site.
  • 9. Années 2000 Le CSS appliqué au HTML Le CSS permet aussi de faire la structure de la page à la place de notre mise-en-page HTML avec des tableaux, par l’usage de Div, des divisions ou l’on va pouvoir regrouper des éléments textes ou images. Mais le CSS n’est pas interprété de la même façon par tous les navigateurs, des typos plus ou moins grandes, des couleurs qui varient, des fonctions qui marchent sur l’un pas sur l’autre. Et toujours beaucoup moins de liberté que dans FLASH.
  • 10. Années 2000 Arrivée des CMS Pour faciliter la publication sur le web et permettre à des rédacteurs de publier du contenu sur le web. Au départ ce sont surtout des moteurs de blogs. Tout se passe sur le web, un rédacteur se connecte à l’administration du site et va pouvoir lui ajouter des pages sans se soucier du graphisme. Grace au CSS qui s’appliquent automatiquement lors de l’affichage public des contenus.
  • 11. Années 2000 Arrivée des CMS • Un site prêt à l’emploi sans avoir besoin de coder
 • Open Source = Libre de droit
 • Facile à utiliser et extensible suivant les besoins De nombreux CMS existent et sont disponibles 4 sont fréquemment cités :
 Wordpress : le plus populaire car le plus facile, orienté blog … 30% des sites dans le monde
 Drupal : Polyvalence, Robustesse.
 Joomla : Facile à installer, en déclin.
 SPIP : Très sécurisé, facilement extensible Il existe des CMS spécifiques comme PrestaShop pour le e-commerce
  • 12. Années 2000 Arrivée des CMS Il y a deux options pour le graphisme 1 - Un thème tout fait et à peine personnalisable, on choisit au mieux un bandeau, une couleur, une typo et tout le reste est déjà calé par le thème. 2 - Un thème à développer de A à Z qui nécessite une collaboration entre un graphiste et un dévelopeur informatique, ou quelqu’un qui a plus ou moins les 2 compétences.
  • 13. Années 2010 Fin du Flash De moins en moins apprécié pour le poids des sites, leur incapacité à être référencé, la possibilité de faire des sites difficiles à consulter, et les problèmes de sécurité. Steve Jobs décide d’exclure le flash des iPhones et des ipads, sonnant le glas de cette technologie. Il est suivi par Google.
  • 14. Années 2010 Explosion de WordPress Environ 35% des sites sont fait avec WordPress et ça progresse. Site facile à maintenir à jour De nombreux thèmes payants peu onéreux d’assez bonne qualité. Des sites souvent bien référencés Un système de plugins qui permet d’ajouter simplement des fonctions supplémentaires, pour faire du e-commerce, de l’Intranet, des sites de réservations, de l’interactions avec d’autres plate-formes… Une grosse communauté
  • 15. Années 2010 Le responsive (sensible, réactif) Avec l’arrivée des smartphones et des tablettes. Possibilité de consulter un même site sur des écrans de taille trés variés. Les webdesigners doivent alors composer avec les différentes tailles et ne plus penser uniquement comme sur le print à une taille unique, chaque éléments va changer de taille, de place, s’aligner différemment. Les thèmes WordPress payants vont vite intégrer cette fonction, et pour les sites à développer complètement le surcout de cette option va freiner son développement.
  • 16. Années 2010 Les constructeurs de pages Ce sont des thèmes (ou de plugins) de WordPress qui remplacent le champ de saisi des pages et des articles, par un outil de construction de pages. Un page builder permet de composer une page en empilant des modules composés de sections qui se découpent en colonnes. Colonnes que l’on remplit de textes, de photos, de vidéos, de cartes, de slider, etc… Chacun de ses éléments est associé à un panneau de configuration permettant des réglages d’affichage graphique, d’effets d’animation, etc… L’édition peut se faire en WYSIWYG, on voit ce qu’on modifie, on agit directement dessus.
  • 17. Années 2010 Les constructeurs de pages Le champ de saisi de Wordpress Remplacé par l’éditeur du thème Divi
  • 18. Années 2010 Les constructeurs de pages Divi par l’éditeur Elegant Themes Traduit en français 89$/an ou 249$ en illimité à vie Avada par l’éditeur Theme-Fusion En anglais uniquement 60$ + 19$/an pour accéder au support Beaver Builder 99$ pour le plugin - 199$ pour le thème - 399$ avec fonction supplémentaires Elementor Version simplifiée gratuite 49$ pour un site - 99$ pour 3 - 199$ our 1000 sites Visual composer - plugin En anglais uniquement Version simplifiée gratuite - 34$ pour un site -170$ illimité Mais aussi Enfold X, Oxygen, Page Builder by Site Origin, Via Advanced Layout Builder, Motopress, Velocity Page, Zoom Builder, Themify Page Builder… Les 2 challengers
  • 19. Fin 2018 Gutenberg Pour contrer les constructeurs de pages, Automattic la société qui gère WordPress, propose un constructeur de page natif dans WordPress, beaucoup plus simple mais qui ne cesse d’évoluer et qui devient de plus sérieux. WordPress a prévu de beaucoup miser sur son constructeur de page.