Gibioctet
Lionel Gibaudan EI
Web Design & Développement
Autres rubriques
Lionel Gibaudan EI
Aujourd'hui, l'emploi du responsive design est indispensable. Cela signifie que quelque soit le périphérique avec lequel vous affichez un site web, ce dernier doit se présenter de façon parfaite et avec une lisibilité optimale.
Le contenu du site doit se réorganiser et se redimensionner de façon harmonieuse et ergonomique. Lorsque des contenus graphiques variés sont impliqués dans la mise en page, seule une longue pratique et une grande expérience permettent à l'intégrateur de produire un résultat convaicant.
Mes solutions pour parvenir à ce résultat:
La dernière version du CSS* intègre deux nouveaux modèles de positionnement: le 'Flex Box module' et le 'CSS Grid module', qui permettent désormais de mettre en oeuvre des mises en page ambitieuses en controlant la distribution des éléments et leurs alignements.
La préparation et l'optimisation des images jouent aussi un grand rôle dans la qualité du résultat final.
*CSS: (cascading style sheet) ensemble de règles de style et de mise en page associées au langage HTML.
Aujourd'hui le langage Javascript domine le présent, et aussi le futur, du développement web.
Après avoir été longtemps considéré comme inférieur, voire parfois intrusif (les pops-ups qui apparaissent souvent de façon anarchique sur les sites que vous visitez) ou même ringard (les affreux textes déroulants sur les sites web des années 90), le Javascript a maintenant atteint sa maturité depuis la version ES6 (en 2015) et il est devenu omniprésent et incontournable.
À son origine, le Javascript est un langage client, c'est à dire qu'il a été créé pour s'exécuter localement dans le navigateur de l'internaute. Les débuts furent un peu anarchiques, puisque chaque éditeur de navigateur (Microsoft, Netscape ...) avait sa propre implémentation du langage et il fallait souvent ajuster le code en fonction du navigateur ciblé. Depuis les dernières évolutions, il est maintenant devenu un langage qui peut s'éxecuter en dehors du navigateur, ce qui lui ouvre la possibilité de devenir un langage serveur
Architecture Client - Serveur
Javascript moderne coté serveur
Il permet de faire tourner des serveurs web qui remplissent le même rôle que leurs homologues créés avec les langages plus conventionnels (Php, Python, etc...).
Avantage: un seul langage utilisé pour toutes les opérations de la chaine, une homogénéité du code et il est même possible aujourd'hui de gérer des bases de données avec Javascript (MongodB, Firebase...)
Inconvénient: une relative absence de recul dans le temps, une certaine complexité, un nombre important de ressources et modules indépendants mis conjointement en jeu et l'impérative nécessité d'avoir une connaissance du sujet constamment actualisée.
Il faut aussi souvent avoir recours à des solutions spécialisées d'hébergement avec des coûts supplémentaires (Heroku, digital Ocean, etc...)
Javascript moderne coté client
Il permet d'ajouter de l'interactivité et une meilleure expérience pour le visiteur en effectuant des opérations dans le navigateur à partir de données brutes textuelles (très souvent au format JSON) reçues depuis le serveur (requête Ajax vers Rest API).
Avantage: des performances phénoménales. Le navigateur dispose de données qu'il peut afficher ou réorganiser en fonction du comportement de l'internaute et il peut récupérer d'autres données ou en envoyer (formulaire de recherches) afin de récupérer de nouvelles informations sans recharger la page web. Les transactions avec le serveur en sont accélerées.
Inconvénient: le navigateur effectuant un travail très important dans la mise en forme et la présentation des données, il est préférable d'avoir un périphérique (smartphone, tablette ou ordinateur) suffisamment puissant et bien dimensionné en mémoire RAM, ce qui est heureusement très souvent le cas aujourd'hui.
La montée en autonomie
Dans les débuts, Javascript était un langage un peu limité et qui demandait d'employer une syntaxe rébarbative pour effectuer des opérations complexes. Autour de 2010, certaines librairies externes (jQuery restant la plus célèbre) sont venues compléter et enrichir Javascript en offrant des fonctions très puissantes pour manipuler les pages web et envoyer des requêtes vers le serveur.
Depuis la version ES6 (2015) le langage javascript s'est enrichi et son code s'est rationalisé, on peut désormais très souvent se passer des librairies tierces et, ce faisant, augmenter la performance de nos pages web.
Javascript est maintenant un langage autonome.
Le Vanilla Javascript
On désigne par Vanilla Javascript une implémentation pure du langage JavaScript, sans librairies ajoutées.
Les librairies et autres frameworks complémentaires à Javascript (jQuery, ReactJS, Angular, etc...) permettent de mettre en place des structures complexes ou bien d'utiliser des fonctions puissantes pré-programmées.
Avantages: La possibilité de mettre en place des solutions complexes.
Inconvénients: La complexité et l'apprentissage nécessaire, une certaine lourdeur du code.
Quand il est utilisé, le Vanilla Javascript est plus stable et plus pérenne.
les API Javascript
Une APi est une interface logicielle qui permet de connecter un site web à un autre logiciel ou service afin d'échanger des données et des fonctionnalités.
Avec Javascript il est possible d'interagir avec de nombreux services afin de récupérer et afficher des données dans la page web sans devoir la recharger, grâce à l'utilisation des requêtes asynchrones (fetch, Ajax...).
L'exemple ci-contre présente un appel de l'API openweathermap qui permet de récupérer et d'afficher des données météorologiques en fonction de certains critères.
Voir une démo plus complète avec openWeatherMap.
API openweathermap
Quelques API utiles
Mon positionnement actuel avec Javascript:
Je suis très attentif aux évolutions de l'écosystème javascript actuel.
Cependant, pour les solutions que je suis amené à mettre en place, je préfère privilégier la robustesse et la fiabilité du Javascript pur (Vanilla Javascript), afin d'offrir des solutions sur lesquelles je peux ensuite intervenir instantanément (et avec une totale maîtrise) en cas de problème ou d'incident sur le site web final en production.
Je fais en sorte de n'utiliser des librairies externes que lorsque la situation l'exige, ceci afin de produire un site web le plus léger et le plus performant possible.
Aujourd'hui WordPress domine le monde du site web, mais tout n'est pas aussi simple.
En mars 2023, WordPress est le CMS (Content Management System) le plus utilisé au monde: 43% des sites web existants sont développés avec lui. Parmi les 10.000 plus gros sites web au monde, 38% d’entre eux utilisent WordPress et parmi les 100 plus gros sites du monde, 14% d’entre eux utilisent encore WordPress.
Au niveau de l'extensibilité il existe plus de 9000 thèmes gratuits ainsi que plus de 60.000 plugins (extensions) gratuits actifs sur le catalogue des extensions de WordPress.org.
WordPress a vu le jour en 2003 comme simple moteur de blog, ne proposant que des articles, affichés dans une chronologie et classés avec une taxonomie générique (catégories).
Au fil des versions, des nouvelles fonctionnalités lui ont été ajoutées:
Aujourd'hui il est devenu un système dominant et complet qui permet de répondre à n'importe quelle situation.
Comment ça marche?
La vocation première de WordPress est de gérer et d'afficher des articles de Blog. ces articles représentent une sorte d'actualité et il peuvent être classés dans des catégories pour en filtrer l'affichage.
En complément de cela il est possible de créer des contenus statiques: Page de contact, Conditions générales, Mentions légales, etc...
Il existe une séparation essentielle entre les contenus et leur représentation.
La représentation des contenus est assurée par un thème (ensemble de fichiers) qui contrôle l'affichage et les thèmes sont interchangeables à l'infini.
Des fonctionnalités supplémentaires peuvent être ajoutées à WordPress par l'intermédiaire des extensions (plugins).
Parmi les plugins de WordPress les plus utilisés on peut citer WooCommerce, qui transforme WordPress en un site de vente en ligne complet, ou bien Elementor, qui apporte des fonctionnalités visuelles pour la création des contenus.
Le rôle du thème
Le thème gère l'affichage et l'apparence du site web. Il peut être remplacé à tout moment sans modifier le contenu du site web. Il existe un nombre impressionnant de thèmes disponibles.
Avantages: facile à installer, il permet une mise en place rapide sans avoir des compétences techniques. Il est possible de créer un site entier sans écrire une seule ligne de code.
Inconvénient: dans certains cas, pour les thèmes prêt à l'emploi, le thème peut être compliqué à mettre en place et offrir plus d'options que nécessaire et être aussi difficile à modifier.
Le rôle du plugin
La grande force de WordPress réside dans la possibilité de lui donner des fonctionnalités supplémentaires grâce aux extensions (plugins).
Avantages: faciles à installer, même pour les non-développeurs. Un énorme choix de plugins: la plupart sont gratuits et disponibles à partir de la communauté officielle de WordPress.
Inconvénients: un possible alourdissement et ralentissement de WordPress dans le cas d'un empilement excessif de trop nombreux plugins qui se contrarient entre eux.
Toujours utiliser WordPress?
La réponse est non...
WordPress excelle à gérer des sites web dynamiques, avec des contenus qui changent et évoluent régulièrement et il est conçu pour donner la possibilité à l'utilisateur de gérer ses contenus à partir d'une interface (le tableau de bord).
Dans le cas d'un site web simple, avec des contenus qui changent rarement, WordPress ne s'impose pas du tout, et il faudra lui préférer un site statique, plus léger, plus rapide à charger et plus simple à maintenir.
Éviter la solution de facilité
WordPress peut être abordé sous plusieurs angles
Il est tout à fait possible pour un non-développeur de monter rapidement un site Wordpress en manipulant l'interface du tableau de bord, en choisissant un thème et en installant autant d'extensions (plugins) que de fonctionnalités supplémentaires nécessaires.
Dans certains cas, cette façon de procéder peut générer un site lent, poussif et qui pourrait un jour se bloquer complétement si un des plugins utilisés venait à devenir obsolète.
Ma vision personnelle de WordPress:
Je développe des sites WordPress depuis 2010 avec une véritable passion et j'ai vu le système évoluer depuis la version 2.9 (bientôt 6.2 fin mars 2023).
Ma préférence consiste à développer spécifiquement le thème avec les caractéristiques essentielles afin de créer un site léger et performant. En procédant ainsi je suis certain de mettre en oeuvre un code optimisé, sans surcharges ni fonctionnalités superflues et je garde la maîtrise tout au long de la chaine.
Dans la même optique, je privilégie toujours de développer mes propres plugins (tant que cela reste cohérent par rapport à l'utilisation d'un plugin fiable existant) avant d'utiliser un plugin déjà disponible, toujours dans une recherche de performances.
Le présent site web n'est pas réalisé avec WordPress?
Le site que vous êtes en train de visiter n'est pas construit avec WordPress, même si il aurait pu l'être: dans le cas présent, je contrôle chaque ligne de code et j'optimise aussi chaque contenu, je peux donc me dispenser personnellement de l'interface riche de WordPress. J'ai choisi ici de produire un site simple et nerveux en Html-Css-Javascript-Php.
À chaque situation, sa solution...
Le site du groupe de Rock Progressif Minimum Vital
Le groupe, créé au début des années 80, par les frères jumeaux Thierry et Jean-Luc Payssan, produit une musique riche et originale, en dehors des modes éphémères. Fort d'une longue histoire et d'une discographie consistante, le groupe propose des contenus riches et ici WordPress s'est donc imposé afin de gérer toutes ces informations. Le choix d'un thème au style sobre et neutre permet au site web, en plus mettre en valeur tous les contenus, de passer l'épreuve du temps avec aisance.
Visite du site minimum-vital.fr en vidéo
pensez à régler le lecteur Youtube sur 1080pHD
Anatomie du site web Minimum Vital
Structure de base
Pour développer le site web j'ai adopté le schéma suivant:
Création d'un thème Wordpress spécifique sobre et simple, avec l'aide du framework CSS Bootstrap, afin de mettre en avant les contenus, sans que le contenant prenne le dessus
Une page d'accueil spécifique personnalisée, contenant des contenus variés.
Mise en place du Blog du groupe (Actualité et Articles de fond)
Création de contenus personnalisés (Custom Post Type) supplémentaires par l'intermédiaire d'un pugin spécifique, pour gérer les contenus variés:
Version Française / Anglaise
Le groupe ayant un rayonnement international, une version anglaise commutable a été intégrée (utilisation du plugin notoire Polylang)
Affichage Asynchrone
Depuis ses débuts, le groupe Minimum Vital utilise un nombre important d'instruments de musique.
Une fonctionnalité Ajax a donc logiquement été mise en place pour faire apparaitre de façon sélective les instruments lors de la navigation, afin d'optimiser les performances et ne pas surcharger les pages.
Ce principe permet de gérer un nombre important de données, de les afficher à la demande et surtout d'améliorer les performances et la fluidité.
Plugin externes
Une utilisation raisonnée des plugins tiers
Un des avantages principaux de WordPress est la faculté d'installer des plugins afin de lui rajouter des fonctionnalités supplémentaires.
Toutefois, ce principe a ses limites et peut, si il est mal utilisé, générer un site lourd, qui se charge lentement et qui peut connaitre des dysfonctionnements suite à des conflits dans le code.
Mon optique est de ne recourir à des plugins externes qu'en dernier recours, quand il serait trop long (ou trop complexe) de développer moi-même la fonctionnalité en question. Ainsi, dans ce site web, en déclarant les Custom Post Type et les méta-données supplémentaires dans un plugin personnalisé minimaliste, j'ai épargné la charge supplémentaire d'installer les plugins Custom Post Type UI et Advanced Custom Fields.
À titre d'exemple, les données associées à la discographie du groupe (année, label, référence, liens marchands, etc...) sont saisies par l'utilisateur dans un formulaire (voir ci-contre) et ensuite c'est le thème lui même qui se charge d'effectuer automatiquement une mise en page qui serait hors du champ de compétences de l'utilisateur final.
Pour le site web Minimum Vital j'ai cependant utilisé les plugins existants et notoires suivants: (Akismet Anti Spam, Contact Form 7, Polylang, Simple Lightbox).
