RSS
Ce billet fait partie d’une série d’une dizaine billets : #atelier-web.
Cet atelier n’est pas prévu pour fonctionner sur les smartphones, certain exemples peuvent s’afficher de manière inattendue sur ces appareils.
Merci de laisser un commentaire si vous avez essayé ou fini cet atelier. Le commentaire ne sera pas publié si vous en faite la demande.
Maintenant que vous avez quelques bases en HTML et en CSS, revenons sur notre problème initial et analysons les besoins.
Analyse de l’image à représenter
Pour représenter cela :
on veut pouvoir dessiner cela :
Et pour simplifier les exercices, nous travaillerons avec cette image :
Notre premier problème va donc consister à représenter cette seconde image, la première image ne nous intéresse pas pour notre problème.
La seconde image utilise une trame carrée de 15 par 15.
Principe d’encodage de notre image
Nous allons nous inspirer du format GIF. Le format GIF est un système d’encodage permettant de mettre dans un fichier une image. Ce format à la particularité d’utiliser des couleurs indexées.
Si on écrit le texte suivant :
...............
.....GGGG......
...GG....GG....
..G........G...
.G..........G..
.G..........G..
G.....RR.....G.
GRRRRR..RRRRRG.
G....R..R....G.
G.....RR.....G.
.G..........G..
.G..........G..
..G........G...
...GG....GG....
.....GGGG......
Et que par ailleurs, on sait que :
.correspond à la couleur blanche,Gà la couleur grise et queRau rouge,
On peut dire que l’image a été encodée une trame de 15 × 15 en utilisant une palette de couleur indexée.
C’est grosso modo le principe d’une image GIF (sauf que dans le cas du format GIT, il y a en plus un algorithme de compression).
Mais nous allons nous inspirer de ce principe pour construire notre « image de 15 × 15 » en HTML.
Convertir notre pseudo-image (de 15 × 15 pixels) en HTML
-
Je vous propose de créer un fichier `pixel-ball-preparation.html` avec le code suivant :
-
Code initial
<!DOCTYPE html> <html lang="fr"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>« Poké Ball » en pixel</title> <style> /* Il y a quelque chose à faire ici */ </style> </head> <body> <div class="essai"> <!-- ----- ADAPTER À PARTIR DE D’ICI --> ............... .....GGGG...... ...GG....GG.... ..G........G... .G..........G.. .G..........G.. G.....RR.....G. GRRRRR..RRRRRG. G....R..R....G. G.....RR.....G. .G..........G.. .G..........G.. ..G........G... ...GG....GG.... .....GGGG...... <!-- ----- ADAPTER JUSQUE-LÀ --> </div> </body> </html>
Voici le rendu (l’affichage) de ce code : 🔳
Ce n’est pas vraiment ressemblant, en effet, mais en réalité, nous ne sommons pas si loin du résultat attendu.
- Le premier problème qui saute aux yeux est que tout se trouve sur la même ligne. C’était attendu puisque nous avons vu que les sauts de ligne présent dans le code ne sont pas affichés.
Il est donc nécessaire de faire une adaptation du code.
<div class="ligne">...............</div>
<div class="ligne">.....GGGG......</div>
…
On obtient alors ceci : 🔳
- Il y avait un autre problème : la taille variable de la police de caractère qui ne permet pas de comprendre le dessin.
Pour régler cela, il suffit de demander l’utilisation d’une police de caractère de largeur constante en ajoutant la classe CSS suivante :
.essai {
font-family: monospace;
}
Cela donne : 🔳
Mise en pratique
Réalisez les différentes étapes ci-dessus.
L’atelier complet
- Liste des billets de l'atelier Web.
- Le billet suivant.
ᦿ
-
Vos commentaires
Pas encore de commentaire - ajouter le votre.
-
Ajouter votre commentaire