Quelques explications techniques pour le site de l'April

Voici une page d'aide pour les utilisateurs avancés du site web de l'April

xHTML

Le site de l'APRIL utilise de l'xHTML 1.0 STRICT (le x a son importance).
Étant donné que nous essayons de maintenir le site valide (avec vérification sur le site validator.w3.org) mais aussi par ce qu'il est important de rester cohérent et clair dans le code, essayez de suivre les petites règles de base qui suivent :

  • Fermez les balises correctement : au lieu de <br>, <hr>, <img>, utilisez <br />, <hr />, <img /> (il est recommandé d'avoir un espace entre « br » et « / »).
  • L'attribut alt pour les images, <img alt="" />, est obligatoire. Il permet d'avoir une idée du contenu si l'image ne s'affiche pas.
  • Quand l'image est utile uniquement pour le design, mettez un « alt="" » (vide), le mieux étant de mettre directement l'image dans le CSS quand on en a la possibilité : théoriquement tout ce qui est dans le XHTML est du contenu et tout le CSS de la forme. Si l'image fait partie du design, elle est supposée être définie dans le CSS, auquel cas l'attribut alt n'est pas nécessaire (il n'est pas nécessaire de savoir ce que l'image représente si on ne peux pas l'afficher vu que ce n'est que du décor).
  • Quand l'image contient du texte, recopiez le texte (« alt="Adhérez en tant qu'entreprise" », par exemple).
  • Sinon, décrivez ce que contient l'image / photo (''Jérémie Zimmermann lors de sa conférence à la Cité des sciences et de l'industrie'', par exemple).
  • Fermez toutes les balises. « <ol> <li>aaa <li>bbb <li>ccc </ol> » fonctionnera sans doute, mais utilisez : « <ol> <li>aaa</li> <li>bbb</li> <li>ccc</li> </ol> ».
  • Sautez des lignes dans le code.
  • N'utilisez pas l'html pour le style mais le CSS (avec l'attribut « style="" » quand vous n'avez pas accès aux CSS).
  • pas de « <center></center> » pour centrer.
  • « Trop de div tue le div », phrase lue je ne sais plus où.
  • Mais quand je vois <div style="blabla"><div><div style="bloblo">[...]</div></div></div>... Autant écrire <div style="blabla ; bloblo">[...]</div>
  • Ou encore <div style="blbla"><p>[...]</p></div> autant écrire : <p style="blbla">[...]</p>
  • Pensez et respectez la sémantique des balises (<div> et <span> sont des balises génériques).
  • <p> est un paragraphe ! <br /> un saut de ligne.
  • On saute de ligne uniquement dans les paragraphes.
  • Il n'y a pas d'éléments de type « block » dans un paragraphe.

CSS

Encore quelques conseils du côté CSS :

  • Ne changez pas le comportement d'une balise sur l'ensemble du site mais localement (avec un « id » ou un « class »). Exemple : mettre toutes les images en « display : block » - mauvaise idée !
  • Essayez (quand vous avez le temps) de vérifier le comportement sur plusieurs navigateurs, plusieurs résolutions.

Quelques class CSS

Pour se simplifier la vie, voici quelques class CSS, à utilisez de la manière suivante : <balise class="nom_class">

fg - flottant gauche

CSS :

.fg
{
	float: left;
}

Exemple :

<img src="http://www.april.org/files/april_logo_200x90.png" alt="Logo de l'April" class="fg" />

Logo de l'April

Effet : Flottant à gauche.

fd - flottant droit

CSS :

.fd
{
	float: right;
}

Exemples :

<img src="http://www.april.org/files/april_logo_200x90.png" alt="Logo de l'April" class="fd" />

Logo de l'April

Effet : Flottant à droite.

fc - flottant centre

Remarque : ce n'est pas un flottant, mais cela centre un élément de type « block » en indiquant que les marges extérieures des côtés sont à régler automatiquement.

CSS :

.fc
{
	margin-left: auto;
	margin-right: auto;
}

Exemples :

<div class="fc">[TEXTE]</div>

[TEXTE]

Effet : Centre un élément (de type « block »).

ag - alignement à gauche

CSS :

.ag
{
	text-align: left;
}

Exemples :

<p class="ag">[TEXTE]</p>

[TEXTE]

Effet : Alignement à gauche.

ad - alignement à droite

CSS :

.ad
{
	text-align: right;
}

Exemples :

<p class="ad">[TEXTE]</p>

[TEXTE]

Effet : Alignement à droite.

ac - alignement au centre

CSS :

.ac
{
	text-align: center;
}

Exemples :

<p class="ac">[TEXTE]</p>

[TEXTE]

Effet : Alignement au centre.

clear

CSS :

.clear
{
	clear: both;
}

Exemples :

<div class="clear"></div>

Effet : supprime l'effet d'un flottant précédent, qu'il soit à gauche ou à droite.

Remarque : Il est parfois intéressant de l'utiliser à la fin pour éviter que le flottant n'ait un effet sur le reste du site (hors contenu) comme le menu de droite ou le bas de page.

Exemples :
<p class="ac">[TEXTE]</p>
<div class="clear"></div>

c1 - premier cadre

Remarque : à utiliser avec un fd, fg ou fc pour les mettre quelque part !

CSS :

.c1
{
    margin: 0px 20px;
    padding: 10px;
    border: 1px solid #999;
    width: 400px;
    background-color: #EFEFF7;
}

Exemples :

<div class="c1 fd">
    <p>
    <img src="http://www.april.org/files/april_logo_200x90.png" alt="Logo de l'April" class="fd" />
    </p>
    <p>[...]</p>
    <p>[...]</p>
</div>

Logo de l'April

[...]

[...]

Effet : Transforme le div en cadre de type 1

Remarque : Dans ce cas, le cadre est à droite et à l'intérieur du cadre il y a 3 paragraphes dont un contient une image qui va être mise sur le côté droit par rapport au deux autres du fait du flottant droit (fd).

c2 - second cadre

Remarque : à utiliser avec un fd, fg ou fc pour les mettre quelque part !

CSS :

.c2
{
	margin: 0px 20px;
	padding: 20px;
	border: 1px solid #999;
	width: 300px;
	background-color: #F0F3F4;
}

Exemples :

<div class="c2 fg ad">
    <p>
    <img src="http://www.april.org/files/april_logo_200x90.png" alt="Logo de l'April" class="fd" />
    </p>
    <p>[...]</p>
    <p>[...]</p>
</div>

Logo de l'April

[...]

[...]

Effet : Transforme le div en cadre de type 2.

Remarque : Dans ce cas, le cadre est à gauche (fg) et à l'intérieur du cadre il y a 3 paragraphes dont un contient une image qui va être mise sur le côté droit par rapport au deux autres du fait du flottant droit (fd). Dans ce cas encore tout le texte va être aligné sur la droite (ad).

c3 - troisième cadre

Remarque : à utiliser avec un fd, fg ou fc pour les mettre quelque part !

CSS :

.c3
{
	margin: 0px 20px;
	padding: 20px;
	border: 1px solid #999;
	width: 70%;
	min-height:225px;
	background-color: #FEFEFE;
}

Exemples :

<div class="c3 fc ac">
    <p>
    <img src="http://www.april.org/files/april_logo_200x90.png" alt="Logo de l'April" class="fg" />
    </p>
    <p>[...]</p>
    <p>[...]</p>
</div>

Logo de l'April

[...]

[...]

Effet : Transforme le div en cadre de type 3

Remarque : Dans ce cas, le cadre est au centre (fc) et à l'intérieur du cadre il y a 3 paragraphes dont un contient une image qui va être mise sur le côté gauche par rapport au deux autres du fait du flottant gauche (fg). Dans ce cas encore tout le texte va être aligné au centre (ac).

Attention : Vous devez utilisez « fc » après les cadres ! Sinon, les « margin : auto » du fc seront remplacées par les « margin » des cadres.

Pour attirer l'attention

Remarque : Pour attirer l'attention sur un point, vous pouvez mettre un texte en couleur orange. Vous pouvez utiliser « class="mandatory" » pour signaler un contenu obligatoire par exemple.

Exemple de code :

<strong class="mandatory">TEST</strong>

TEST

Des gros boutons :

Cliquez ici ! Cliquez ici ! Cliquez ici ! Cliquez ici ! Cliquez ici !

<a class="bouton">Cliquez ici !</a>
<a class="bouton alert">Cliquez ici !</a>
<a class="bouton red">Cliquez ici !</a>
<a class="bouton green">Cliquez ici !</a>
<a class="bouton transparent">Cliquez ici !</a>
Pour mettre encore plus en avant le bouton, vous pouvez aussi utiliser des balises de titre :
<h3><a class="bouton">Cliquez ici !</a></h3>

Ajouter une liste d'articles

Pour ajouter une liste d'articles (nodes) dans une page, on peut utiliser le code :

[view:taxonomy_term=X=Y] ou X donne le nombre de nodes à afficher et Y donne le numéro du tag.

Exemple : [view:taxonomy_term=10=1697] donne une liste de 10 articles ayant pour tag "RGI"

La liste des tags est sur cette page.