Télécharger pour lire hors ligne
Téléchargé parChris Gaillard
Webdesign
Le document retrace l'évolution du web design, en abordant les étapes clés de la conception de sites web depuis les premières pages en HTML jusqu'aux systèmes de gestion de contenu modernes comme WordPress. Il souligne les changements technologiques, les impacts des langages de programmation et l'importance de l'ergonomie, de l'accessibilité et de la réactivité dans le développement web. Enfin, il décrit l'émergence des constructeurs de pages et des thèmes adaptables qui facilitent la création de sites en fonction des nouvelles exigences des utilisateurs.
Webdesign
- 1.
- 2. Définition Conception de siteweb • 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).
- 3.
- 4. Milieu des années90 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ées90 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ées90 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 duflash 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 CSSappliqué 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 CSSappliqué 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 desCMS 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 desCMS • 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 desCMS 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 duFlash 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 deWordPress 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 constructeursde 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 constructeursde pages Le champ de saisi de Wordpress Remplacé par l’éditeur du thème Divi
- 18. Années 2010 Les constructeursde 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 contrerles 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.