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