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 au 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évelopeur 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 (de l'anglais Cascading Style Sheets) vous est indispensable.

Si cela vous intéresse, il existe de nombreux tutoriels en ligne pour les débutants. Ici, nous souhaitons vous donner une technique de mise en page avec "FLEXBOX". Eh oui, fini le temps où on utilise les tableaux pour mettre en valeur votre code HTML. Avec l'importance des consultations via les appareils mobiles, votre site web doit avoir un template responsive design ; autrement dit, son affichage s'adapte à la taille de l'écran de l'appareil.

C'est quoi ce "Flexbox" ?

Il y a deux mots que l'on retient ici : "box" et "flex", ou boîtes flexlibles en français. En gros, nous allons insérer notre contenu dans des boîtes qui s'affichent avec souplesse et flexibilité. Bon ! on tourne en rond là. Concrètement voilà comment ça se passe : nous avons trois contenus à insérer dans des boîtes disctinces : "Boîte 1", "Boîte 2" et "Boîte 3". Les boîtes seront rangées dans un "Conteneur" et alignées horizontalement avec un espace donné entre elles. Pour complexifier un peu, à 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 et le CSS s'occupe de la mise en page du site web. Nous allons donc éditer deux fichiers "index.html" et "style.css". Si vous avez besoin d'une initiation au langage HTML / CSS, n'hésitez pas à visiter le Webdocs de la Fondation Mozilla, il est bien fait et très accessible pour un débutant pressé !

Revenons à notre exercice. A partir de notre précédent exemple, et avec votre éditeur préféré, la page HTML ressemble à :

Vous notez qu'il nous a suffit de transcrire notre exemple en définissant des éléments correspondant à notre contenu : conteneur et boite. Pour faciliter notre tâche, nous affectons directement des balises au nom de chaque contenu : <conteneur> et <boîte-#>. Quel est l'intérêt de nommer ainsi les balises, alors qu'on peut utiliser une balise générique <div> ? Avec la balise <div>, nous serions obligés de spécifier le selecteur CSS. Par exemple <div id='conteneur'> ou <div class='conteneur'>, c'est selon la méthode utilisée. Alors qu'ici on définit une balise <conteneur> et nous avons le selecteur 'conteneur'. Vous verez plus tard, quand vous aurez des lignes et des lignes de code à écrire, vous seriez bien content de vous retrouver facilement.

La mise en page se fait avec le code CSS suivant :

Vous avez sûrement noté que la déclaration {display: flex;} se retrouve à la fois dans les sélecteurs 'conteneur' et 'boite-#'. Et c'est tout l'avantage de la mise en page avec FLEXBOX : il permet de ranger à volonté le conteneur de la page web. Comme si vous avez une armoire, avec des étagères et des tiroirs. Alors, tant que vous êtes organisé et que vous savez bien ranger vos affaires, il n'y aura pas de limite, sauf votre capacité d'ordonnacement. Intéressant non ? Sans oublier que le résultat de votre affichage s'adapte aussi à la taille de l'écran du visiteur. C'est valable surtout pour les pages web vitrine. Sachez tout de même que les sites web plus complexes nécessiteront de templates spécifiques pour les appareils mobiles.

Faites le test vous-même :

Avec l'outil "codepen" en ligne, essayez de bidouiller et découvrez les changements sur la page web :

See the Pen Tutoriel CSS Flexbox by Hemera (@Hemera) on CodePen.

Exemple d'une page web réalisée avec Flexbox :

Pour illustration, le template de la page web de https://radio.soaimadagasikara.org une webradio malagasy, est réalisé avec CSS FLEXBOX : un conteneur à deux colonnes, et dans chaque colonne des éléments alignés verticalement et horizontalement. Résultat :

A quoi bon est-il nécessaire d'avoir ces connaissances sur le CSS FLEBOX, si l'on veut utiliser un CMS ?

Ben tout simplement, ce sera pour plus tard. Après avoir publié en ligne votre premier site web avec le CMS que vous avez retenu ; vous aurez sûrement envie d'avoir une charte graphique personnalisée et/ou à l'image de l'identité visuelle de votre société. Ce que les CMS ne vous fourniront jamais. Ainsi, le seul moyen de modifier un template basique d'un CMS est de se plonger dans les codes sources HTML, CSS, et parfois PHP. Sachez tout de même que ce sera fastidieux. C'est pour cette raison qu'il vaut mieux confier à un professionnel la concepion d'un tempate original. Ce qui va changer pour vous, avec ces connaissances basiques, désormais vous savez comment tout cela fonctionne et vous saurez vous faire comprendre. Un bon prestataire appréciera car il sait qu'il ne perdra pas du temps sur votre projet, si vous savez où vous voulez aller et ce que vous souhaitez obtenir. Par ailleurs, vous aurez aussi de la marge pour négocier le coût de développement. Vous l'avez retenu, notre leitmotiv est "la présence numérique au juste prix" pour la création de votre site web et internet à Madagascar ou ailleurs.