Blog de web-eau.net

J'aurais tout aussi bien pu intituler ce billet "Comment naissent les idées de développement ?" parce que c'est ce que je vais vous raconter. Le quotidien d'un webmaster est souvent fait de questions dont les réponses n'existent pas encore (ou qu'elles ne sont pas satisfaisantes). Dans ce cas, il n'a d'autres choix que d'inventer sa réponse et de la traduire en code pour "concrétiser" son idée. Se retrouver devant une page blanche peut souvent tétaniser mais cela permet, si l'on est prêt, à laisser libre court à sa créativité et sa fantaisie.

Il m'arrive parfois sur ce blog d'employer des termes techniques que j'essaye autant que faire se peut, de vulgariser au maximum. Mon auditoire est composé (en partie) de personnes n'ayant pas une connaissance technique très approfondie d'Internet, j'ai eu envie de proposer un glossaire afin qu'elles puissent trouver des réponses, des explications et des définitions sur les termes pouvant leur paraitre abscons. Seulement, il y a "glossaire" et "glossaire". Etant de nature (très) exigeante, je savais exactement ce que je voulais pour mes lecteurs. Et c'est ce que je vous vous raconter maintenant.

  Dictionary, un glossaire créé par web-eau.net

Dessine-moi un glossaire

Dès le début du projet, je savais exactement quelles étaient les grandes lignes de ce que je voulais vous proposer en terme de . J'ai donc commencé par dessiner un carré où chaque angle représentait un point non négociable :

  1. Le rendu final doit être "Responsive Design",
  2. Visuellement agréable et rapidement compréhensible,
  3. Un code aussi léger que possible,
  4. Une intégration parfaite avec Joomla!

Je peux être fléxible sur certains aspects mais pas sur ces 4 critères.

Après avoir défini ce que je voulais, j'ai tenu à vérifier si cela n'existait déjà pas. A quoi bon vouloir réinventer la roue ? Le constat est sans appel : aucune extension actuelle ne correspond à ce que j'imagine. Curieusement, elles proposent toutes plus ou moins le même affichage banal et désuet. Alors, il ne me restait alors comme seul choix de créer mon glossaire pour mes lecteurs.

C'est en cherchant tout à fait autre chose que je suis tombé sur cette page de Wikipédia : http://fr.wikipedia.org/wiki/Cat%C3%A9gorie:Ordre_du_Temple. Et en regardant attentivement la mise en page, je me suis dis que je tenais le design de mon futur glossaire ! Je n'avais plus alors qu'à en écrire le code en HTML et en CSS.

Le markup HTML

A priori, rien de très compliqué pour obtenir ce type de présentation sous cette forme. Les mots et leurs définitions peuvent être affichés sous forme de liste grâce à la balise <ul> .

<div class="lexique">
    <div class="set">  <!-- pour chaque lettre -->
        <h3 class="letter">  <!-- emplacment de l'initiale -->  </h3>
        <ul>
<div class="spoiler">
<a class="teaser" href="#"> <!-- emplacement du mot -->  </a>  
<div class="contenu"> <!-- emplacement de la définition -->  </div>
</div>
<div class="spoiler">
<a class="teaser" href="#"> Exemple </a>
<div class="contenu"> Définition correspondante </div>
</div>
            </ul>
    </div>
</div>

Ce type de présentation me permet d'avoir un affichage en colonne avec les initiales et sous chacune d'entre elles, les mots et leurs définitions correspondantes. Les classes CSS feront tout le reste du travail (mise en forme, média queries pour le "Responsive Design", etc).

Pour le design général, j'ai retenu un affichage en 3 colonnes séparées par une ligne discrète :

div.lexique
{
    -webkit-column-count: 3;
    -moz-column-count: 3;
    -o-column-count: 3;
    -ms-column-count: 3;
    column-count: 3;
    -webkit-column-rule: 1px dotted #ccc;
    -moz-column-rule: 1px dotted #ccc;
    -o-column-rule: 1px dotted #ccc;
    -ms-column-rule: 1px dotted #ccc;
    column-rule: 1px dotted #ccc;
}

La partie "lettre" est centrée sur toute sa largeur :

div.set
{
    display: inline-block;
    width: 100%;
    -webkit-column-break-inside: avoid;
    -moz-column-break-inside: avoid;
    -o-column-break-inside: avoid;
    -ms-column-break-inside: avoid;
    column-break-inside: avoid;
}

L'initiale sera colorée en gris-bleuté et centrée :

h3.letter
{
    color: #748094;
    text-align: center;	
}

La partie consacrée au mot et à sa définition :

.spoiler 
{ 
margin: 0 0 5px 0; 
padding: 0; 
} 

.teaser 
{ 
margin: 1px; 
padding: 3px; 
cursor: pointer; 
position: relative; 
} 

.contenu 
{ 
padding: 5px 10px; 
}

Rien de très compliqué à ce niveau, ce n'est qu'une mise en forme à l'aide de marges et d'espacements de manière à obtenir un affichage qui soit visuellement agréable.

Il reste à voir la partie "Responsive Design" qui est traité de la manière suivante :

@media screen and (max-width: 768px) {
	div.lexique
{
    -webkit-column-count: 2;
    -moz-column-count: 2;
    -o-column-count: 2;
    -ms-column-count: 2;
    column-count: 2;
	-webkit-column-rule: 1px dotted #ccc;
    -moz-column-rule: 1px dotted #ccc;
    -o-column-rule: 1px dotted #ccc;
    -ms-column-rule: 1px dotted #ccc;
    column-rule: 1px dotted #ccc;
}

@media screen and (max-width: 480px) {
	div.lexique
{
    -webkit-column-count: 1;
    -moz-column-count: 1;
    -o-column-count: 1;
    -ms-column-count: 1;
    column-count: 1;
}

Pour les écrans inférieus à 480px de large, le glossaire est affiché sur une seule colonne et pour les écrans jusqu'à 768px de large, il est affiché sur 2 colonnes avec la petite ligne discrète de séparation.

Pour terminer, c'est un petit script JavaScript qui fait le job pour masquer/afficher la définition lorsque l'on clique sur le mot.

Le résultat définitif est visible sur cette page : http://www.web-eau.net/site-internet/glossaire . Qu'en pensez-vous ?


Conclusion

Comme vous le voyez, rien de très compliqué dans cette création. Le plus difficile est encore d'avoir l'idée et de parfaitement définir ce que l'on veut obtenir. Traduire cela en mots est bien plus ardu que la traduction en code.

En tout cas, j'espère que le résultat vous plait et que vous n'hésiterez pas à consulter très régulièrement ce glossaire pour trouver des définitions aux mots qui vous échappent. Si vous souhaitez y voir figurer certains termes, n'hésitez pas à me contacter ou à commenter ce billet. Je me ferais un plaisir de les ajouter !


 

A PROPOS DE L'AUTEUR :
Webmaster freelance passionné par Joomla depuis 2007, Daniel défend la veuve et l'orphelin du web en créant des sites respectueux du W3C. Fort d'une expérience de plusieurs années, il partage ses connaissances avec les néophytes aussi bien qu'avec les personnes plus expérimentées.

1 1 1 1 1 1 1 1 1 1 Rating 0.00 (0 Votes)

Ajouter vos commentaires

Poster un commentaire en tant qu'invité

0
Vos commentaires sont soumis à la modération de l'administrateur.

Participant à cette conversation

web-eau.net is not affiliated with or endorsed by the Joomla! Project or Open Source Matters. The Joomla! name and logo is
used under a limited license granted by Open Source Matters the trademark holder in the United States and other countries.