Dans notre premier article sur ce blog, nous avons annoncé que la majeure partie des sites web de l'administration malagasy est propulsée par le CMS Wordpress. Rien de surprenant, car cela reflète le pourcentage affiché par W3Techs : le CMS Wordpress se trouve en tête avec 36 % des sites web.
Mais sachez aussi que ce succès a son revers : Wordpress est le CMS le plus ciblé par les cyberattaques. Cela peut justifier que vous fassiez appel à des professionnels si vous mettez en ligne un site web avec des données sensibles.
Le marché de la création de site internet à Madagascar est en plein essor et s'initier, en tant que particulier ou professionnel, aux CMS est un bon début ; ne serait-ce que pour maîtriser les éléments de langage d'une agence web et/ou d'un développeur professionnel.
Toutefois, votre site web doit avoir un design unique pour se démarquer ou affirmer votre identité visuelle. Dans cet élan, avoir des connaissances basiques sur les feuilles de style en cascade ou CSS (Cascading Style Sheets) est indispensable.
Si cela vous intéresse, il existe de nombreux tutoriels en ligne pour les débutants. Ici, nous souhaitons vous présenter une technique de mise en page avec Flexbox. Eh oui, fini le temps où l’on utilisait des tableaux pour structurer le code HTML.
Avec l’importance croissante des consultations via les appareils mobiles, votre site web doit adopter un responsive design, c’est-à-dire un affichage qui s’adapte automatiquement à la taille de l’écran.
C’est quoi ce « Flexbox » ?
Deux mots sont à retenir : box et flex, autrement dit des boîtes flexibles. Le principe consiste à insérer le contenu dans des boîtes disposées de manière fluide et adaptable.
Concrètement, imaginons trois contenus distincts : « Boîte 1 », « Boîte 2 » et « Boîte 3 ». Ces boîtes sont rangées dans un conteneur et alignées horizontalement avec un espace défini entre elles. À l’intérieur de chaque boîte, les éléments sont centrés verticalement et horizontalement.
Travaux pratiques
Pour rappel, le HTML gère le contenu tandis que le CSS s’occupe de la mise en page. Nous allons donc travailler avec deux fichiers : index.html et style.css.
Si vous souhaitez approfondir les bases du HTML et du CSS, la documentation de la Fondation Mozilla est une excellente ressource pour les débutants : Webdocs Mozilla.
À partir de notre exemple précédent, la page HTML ressemble à ceci :
Vous remarquerez qu’il a suffi de transcrire l’exemple en définissant des éléments correspondant au contenu : un conteneur et des boîtes. Pour faciliter la lecture du code, nous utilisons des balises explicites plutôt que des balises génériques <div>.
La mise en page est ensuite assurée par le code CSS suivant :
Vous noterez que la propriété display: flex; est utilisée à plusieurs niveaux. C’est toute la puissance de Flexbox : organiser la page comme une armoire composée d’étagères et de tiroirs, avec une grande souplesse d’agencement.
Faites le test vous-même
Avec l’outil en ligne CodePen, vous pouvez modifier le code et observer instantanément le résultat :
Exemple de page web réalisée avec Flexbox
À titre d’illustration, le template du site radio.soaimadagasikara.org, une webradio malagasy, est entièrement conçu avec CSS Flexbox.
Pourquoi apprendre le CSS Flexbox si l’on utilise un CMS ?
Après avoir publié votre premier site web avec un CMS, vous souhaiterez probablement personnaliser votre charte graphique. Or, les CMS ne fournissent jamais une identité visuelle totalement sur mesure.
Modifier un template implique donc de comprendre le HTML, le CSS et parfois le PHP. Ces connaissances de base vous permettront de dialoguer efficacement avec un prestataire, de mieux cadrer vos besoins et même d’optimiser les coûts de développement.
Notre leitmotiv reste le même : la présence numérique au juste prix, pour la création de votre site web à Madagascar ou ailleurs.