Codage. Cursus

Partie 1 - Etape 4 : Création d'un cadre informatif, de modération, avertissement, etc...


Auteur : Sparrow-style

Qu'est-ce qu'un bloc informatif ? Comment l'utiliser ?

Nous passons avec cette étape à des travaux pratiques sur une partie ce que que nous avons vu pour le moment. Il s'agit donc de créer un cadre informatif qui se voit bien pour mettre en forme votre règlement de forum, par exemple. Il peut s'agir alors d'un cadre d'avertissement, d'information, d'astuce... selon les cas et l'utilisation. Des exemples ? Et bien vous en avez eu tout au long des deux premières étapes ! En effet, il s'agit tout simplement de ce type de cadre-là :
Je suis un cadre informatif ! :D
Je suis un cadre de mise en garde !! (et je ne plaisante pas è_é)
Voilà en gros ce que nous allons faire dans cette étape là pour mettre en pratique ce que nous avons vu jusqu'à présent dans des exemples concrets et utiles pour vos messages, vos règlements ou autres !

Créer le cadre texte

Vous savez normalement le faire seuls... Je vous conseille d'ailleurs d'éviter de regarder mes codes histoire de vous habituer à coder sans aucune base, ce qu'il faut arriver à faire au final, c'est à dire prendre une "page blanche" et créer votre code de A à Z sans regarder ailleurs ou utiliser des morceaux de code déjà tout fait, sinon ce n'est plus du codage mais du puzzle ;).
Voici donc l'élaboration d'un cadre "attention" basique, il s'agit de mon exemple, faites-le à votre goût et surtout écrivez votre code dans un premier temps sans vous aider du mien, c'est préférable !

Quibus occurrere bene pertinax miles explicatis ordinibus parans hastisque feriens scuta qui habitus iram pugnantium concitat et dolorem proximos iam gestu terrebat sed eum in certamen alacriter consurgentem revocavere ductores rati intempestivum anceps subire certamen cum haut longe muri distarent, quorum tutela securitas poterat in solido locari cunctorum.

Vous remarquez que j'ai utilisé la balise "paragraphe", mais ce n'est pas une obligation de faire de même ! Sur ma page de site, sans avoir comme sur les messages FA un retour à la ligne simple avec la touche "entrée", il est plus simple pour moi d'utiliser cette balise. Choisissez celle qui vous convient le mieux ou que vous préférez utiliser !
Vous pouvez également remarquer que j'ai utilisé un affichage de largeur en pourcentage et non en pixel ! C'est en effet plus pratique pour afficher ce type de cadre dans les messages car ainsi la largeur s'adapte à la largeur totale de l'espace dans lequel vous vous trouvez (cf. étape 2, partie 5).

Appliquer des couleurs selon le type d'information

Pour choisir les couleurs, basez-vous sur le type de cadre que vous comptez faire. S'il s'agit d'un cadre "danger", "attention" ou quelque chose du même genre, utilisez plutôt le rouge. Pour le reste, à vous de décider des couleurs. J'ai par exemple utilisé le vert pour les questions, le bleu pour l'information et le jaune pour l'astuce, mais tout cela est à faire en fonction de votre goût et de votre ressenti.
N'utilisez pas de couleur trop flash ! Certes il faut que le cadre se voit, mais ce n'est pas une raison pour cramer la rétine de vos visiteurs... Donc les couleurs vives sont à éviter. Veillez également à ce que le texte soit lisible sur votre fond.


Y mettre une icône

Minutes ! Je suis pas graphiste moi ! Créer un fond basique passe encore, mais une icône... je sais pas faire. Alors comment je fais ? Hein ?
Certes, certaines icônes sont parfois mes créations, mais il existe sur la toile des sites d'icônes gratuites et en libre service ! Celui que je préfère et dans lequel j'ai trouvé pas mal des icônes présentes sur ce site est Icones Pro. Le site est en Français qui plus est, et il vous suffit d'entrer un mot pour trouver l'icône qu'il vous faut. C'est d'ailleurs là que je vais prendre l'icône qui va me servir dans cette étape. Je vais créer un cadre "attention / danger" donc je vais faire une recherche en tapant le mot "danger" ou "attention" ou "important" dans la barre de recherche du site. Voici mon icône :
Il va maintenant falloir mettre cette image à gauche de notre texte comme dans les exemples en haut de page, autrement dit mes propres cadres. Pour cela, il y aurait plusieurs solutions, mais nous allons utiliser les méthodes que vous avez vues. Nous allons tout simplement placer cette image en temps que fond, en la plaçant à gauche et en ne la répétant pas, bien évidemment !

Quibus occurrere bene pertinax miles explicatis ordinibus parans hastisque feriens scuta qui habitus iram pugnantium concitat et dolorem proximos iam gestu terrebat sed eum in certamen alacriter consurgentem revocavere ductores rati intempestivum anceps subire certamen cum haut longe muri distarent, quorum tutela securitas poterat in solido locari cunctorum.

C'est bien joli, mais il faut ajouter un "padding" (marge intérieure) au texte, sinon il est sur notre joli panneau...

Quibus occurrere bene pertinax miles explicatis ordinibus parans hastisque feriens scuta qui habitus iram pugnantium concitat et dolorem proximos iam gestu terrebat sed eum in certamen alacriter consurgentem revocavere ductores rati intempestivum anceps subire certamen cum haut longe muri distarent, quorum tutela securitas poterat in solido locari cunctorum.

Vous remarquez que le padding a agrandi le cadre... Au besoin vous pouvz donc soit réduire sa largeur en tenant compte de la marge que vous allez imposer, soit créer un second bloc à l'intérieur pour afficher le texte avec des marges sans qu'il n'y ait de conséquences sur votre bloc principal.
Et voilà ! Votre cadre informatif est prêt à être utilisé ! Ce n'était pas très long, et cela permet d'utiliser plusieurs des propriétés CSS que vous avez vues jusqu'à présent. C'était un simple exercice pratique, mais j'espère qu'il vous servira et vous encouragera à tester par vous-même d'autres mises en formes.

Etape précédente Etape suivante