BONNE ANNÉE les gens !

Santé, prospérité, tout ça, tout ça... et surtout : tranquilité...

Calligraphie de Kanjuro Shibata "Enso" (le cercle)
Wikipedia

On lui dit : Ne fais pas de tableaux, c'est mal. Fais des div.

Donc il rentre chez lui, il prend tous ses td, tous ses tr, tous ses table, et il fait : div, div, div.

Il n'a pas réglé le problème, mais au moins il a fait plaisir au mec de l'accessibilité.
Mais c'est inutilisable.

Je suis régulièrement effrayée, agacée et désolée, de voir le nombre d'apprentis webmestres (ou plus qualifiés), qui appliquent ce précepte à la lettre, sans bien savoir pourquoi d'ailleurs...

Ça donne des codes du genre :

<div id="titre">
Bienvenue sur mon site
</div>

<div id="contenu">
 <div id="bonjour">
  Bonjour cher visiteur.
 </div>
 <div id="blabla">
 Merci de passer me voir.
 </div>
</div>

<div id="footer">
© Mon site à moi que j'ai.
</div>

Tout le code n'est qu'une succession de div, sans rien d'autre. Il y en a même qui poussent la virtuosité à simuler de vrais tableaux de données avec une succession de div class="table", div class="tr", div class="td" !

A croire que le langage html se réduit à la seule et unique balise div...

En quelques années, on est passé de la soupe de tags à la soupe de div.

Photo de Thanh - ParisWeb 2006

Et la sémantique, bordel ?!

Pour rappel, donc, la mise en forme d'un texte possède tout un tas de balises spécifiques porteuses de sens.

• Pour des titres de section, les balises ad hoc sont <h1></h1> ; <h2></h2>, <h3></h3> etc. ;
• Pour un paragraphe, c'est <p></p> ;
• Pour une liste à puces, c'est <ul></ul> ;
• Pour une liste numérotée, c'est <ol></ol> ;
• Pour un bloc de citations, c'est <blockquote></blockquote> ;
• ...

Avec toutes ces balises, on structure le texte correctement. C'est important, par exemple, pour les robots des moteurs de recherche qui indexent les pages et qui comprennent le sens de ces balises. Mais c'est aussi (et surtout) important pour tous les internautes qui n'utilisent pas d'interface graphique pour lire les pages. Les navigateurs textuels, les lecteurs d'écran utilisés par les mal voyants, ne restituent pas correctement un texte qui n'est pas balisé de façon convenable.
C'est un peu comme si vous lisiez un texte sans ponctuation.

Tenez, amusez-vous donc à relire ce dernier paragraphe dépourvu de toute ponctuation :

avec toutes ces balises on structure le texte correctement c'est important pour les robots des moteurs de recherche qui indexent les pages et qui comprennent le sens de ces balises mais c'est aussi et surtout important pour tous les internautes qui n'utilisent pas d'interface graphique pour lire les pages les navigateurs textuels les lecteurs d'écran qu'utilisent les mal voyants ne restituent pas correctement un texte qui n'est pas balisé de façon convenable c'est un peu comme si vous lisiez un texte sans ponctuation

Vous avez tenu jusqu'au bout ? Sans reprendre votre respiration ? Sans revenir en arrière pour retrouver le fil d'une idée  ?
Si oui, vous êtes très fort... Mais ce paragraphe ne fait que quelques lignes. Sur toute une page web, ce serait sûrement une autre histoire !

Ayez la bonne vision : devenez aveugle !

Lorsqu'on rédige une page web, on oublie dans un premier temps la CSS. On imagine qu'on est aveugle et qu'on "voit" sa page à l'aide d'une synthèse vocale.

Pour vous donner une idée, je vous invite à regarder, ou plus exactement à écouter, le début que la conférence "Accessibilité, des volontaires ?", donnée par Stéphane Deschamps et Aurélien Levy lors de ParisWeb 2008. Elle débute en effet par la démonstration de ce que donne la lecture d'une page web par ces interfaces (et si vous avez le temps, regardez la conférence en entier, c'est un régal).

Une bonne page web est une page qui est facilement lisible sans aucun attribut de style. Une page où les titres sont des titres, où les paragraphes sont des paragraphes, où les tableaux de données sont des tableaux de données !

Ce n'est que quand tout cela est fait que l'on rajoute ses div pour positionner ses blocs et mettre en oeuvre le graphisme, même si celui-ci a été pensé en amont.

J'en profite aussi pour vous rappeler que l'édition ParisWeb 2009, cycle de conférences dédié aux bonnes pratiques du web, c'est dans un peu plus d'un mois.

J'y serai. Et vous ?

^*Terme incorrect, mais "site à bloc", c'était moins joli ;-) - Remonter -

Changement de sinistre

Donc, nous avons un nouveau ministre. Seigneur DarKos, avant de partir, nous a laissé un joli cadeau : une jolie enveloppe de 16 000 postes à supprimer à ne pas renouveler, soit presque 50% du nombre total de la réduction des effectifs dans la fonction publique. En 3 ans, nous atteindrons donc 40 700 postes supprimés dans l'Éducation Nationale (Allègre en a rêvé, Darcos l'a fait). Et autant de chômeurs potentiels en plus...

Pour arriver à cette réduction et mettre tout de même des profs devant les élèves, les nouveaux lauréats du concours de profs ne passeront plus par la case (feu)IUFM, mais iront directement faire un temps plein en classe... sans formation.

A côté de cela, on regroupe aussi des sections (genre des bac pro 2 ans avec des bac pro 3 ans qui n'ont pas les mêmes programmes dans toutes les matières), on augmente les effectifs dans les classes, et on distribue des heures, et des heures, et des heures supplémentaires aux enseignants rescapés (où est l'économie ?).

La chance au Grattage

Mais avant de partir, Monsieur DarKos nous a fait d'autres cadeaux. Des vrais, si si.

1. Une première heure supplémentaire revalorisée et une prime de 500 € annuels si on accepte 3 heures supplémentaires. Et c'est là que j'ai appris que je suis sensée gagner plus de 3500 € par mois hors heures sup. Ben zut, les TPG n'on toujours pas compris, ils s'obstinent à me mettre un 2 à la place du 3. Qu'est-ce que je vais toucher comme pactole rétroactif quand ils vont s'apercevoir de leurs erreurs !...
2. Nous autres, professeurs en Bac Professionnel, nous aurons le droit en 2010 à la même prime que nos petits copains pour les corrections des copies, soit 5 € la copie (pour info, pour l'instant, c'est quelques centimes d'euros au delà de la 20 ou 30ème copie). Super ! Sauf qu'en 2010, ce seront les dernières épreuves ponctuelles de bac pro, tout va passer en CCF. Et là : pas de prime à la copie. Je vous prie de croire que l'an prochain je vais savourer ce cadeau exceptionnel (dans tous les sens du terme).

La chance au Tirage

Et puis il y a l'oral de rattrapage des bac pro. Aaaaaah, l'oral de rattrapage des bac pro...

Jusqu'à présent, les candidats au bac professionnel n'avaient pas de rattrapage. C'est donc normal qu'ils en aient un. Jusque là, tout va bien, j'applaudis des 2 mains.
Là où l'histoire devient une vaste fumisterie, c'est quand on voit ce que va être ce fameux oral.

Petite explication préliminaire. Le bac pro se découpe en 2 parties :

• la partie professionnelle, où il faut avoir impérativement 10 de moyenne,
• la partie générale où l'on peut avoir moins de 10, mais il faut que la moyenne épreuves de l'Enseignement Pro + épreuves de l'Enseignement Général soit à 10.

Concrètement : un élève qui a 12 en EP et 8 en EG a son bac ; un élève qui a 8 en EP et 12 en EG ne l'a pas.

Pour avoir le droit au passage à l'oral, il faut toujours avoir au moins 10 en EP, et avoir entre 8 et 10 en EG.

Bref : l'oral de rattrapage est donc mis en place pour rattraper l'enseignement général. Les candidats vont-il passer, comme leurs camarades des séries générales et technologiques, des oraux de maths ? de français ? d'anglais ?

Que neni : il présenteront une activité qu'ils ont fait en stage en entreprise, donc un oral portant sur... l'enseignement professionnel. Le jury sera quand même composé d'un enseignant du domaine général... (pour servir le café ?)
Et la cerise sur le gâteau : cette note d'oral compensera la totalité de l'EG. C'est à dire que dans le pire des cas, un élève qui aura obtenu 8 n'aura besoin que de 12/20 pour avoir son bac (et on dit "Merci Monsieur Darcos" pour le diplôme du bac dans la pochette surprise).

Autant dire que les pourcentages de reçus au bac pro vont faire des bonds cette année. On n'a pas fini d'entendre les professionnels de l'industrie râler après ces jeunes qui ne savent rien... Non, pardon : râler après ces profs qui ne foutent rien et qui n'apprennent rien à leurs élèves.

Quant à nous, profs d'enseignement général, qui ramons déjà pour tenter de convaincre nos élèves qu'il faut bosser et que cela va servir à quelque chose, peut-être qu'on pourrait nous virer tout de suite, ce serait plus simple.

Bon enfin, vous me direz, puisque tout va passer en CCF, il n'y aura plus d'oral non plus à partir de 2011. C'est vrai.

Alors à quoi rime cette mascarade ? Nous faire râler ? C'est un fait, ça marche :p

Mais on en revient toujours au même point : beaucoup d'effets d'annonce... pour du vent, et du maxi foutage de gueule !

J'essaye de créer un site avec la même base que www.kitgrafik.com c.a.d un fond de couleur unique avec par dessus un rectangle avec les angles arrondis qui s'adapte au contenu.
Pouvez vous m'indiquer la marche à suivre ?

Il y a tellement de ressources sur le web pour créer des coins arrondis, que je ne n'estimais pas pertinent d'y consacrer un chapitre. Mais puisqu'on me le demande, peut-être que le sujet mérite effectivement un rappel de différentes techniques, trois tout du moins que je qualifierais "de base".

1. La technique pure CSS, mais qui n'est pas encore implémentée par tous les navigateurs, utilisant border-radius ;
2. La technique utilisant des div à qui on affecte une image de coin en image de fond ;
3. La technique made-in Raphaël Goetter, utilisant une image coulissante.

Code CSS commun aux trois techniques

On commence par indiquer les propriétés des paragraphes et des titres utilisés dans cet exemple, c'est à dire les marges internes et externes nécessaires :

p, h3 {
padding:5px 10px;
margin:0;
}

Technique 1 : border-radius

Code (x)html

<div class="coins">
 <h3>Lorem Ipsum</h3>
 <p>
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
 Mauris vulputate laoreet urna. Integer magna. 
 Donec facilisis lectus sed quam. 
 Curabitur sit amet lacus id lacus facilisis venenatis.
 </p>
</div>

Codes CSS

Dans les normes CSS3 attendues avec impatience, il y a donc cette propriété qui permet de créer un cadre avec des coins arrondis.

Exemple 1

Tous les coins arrondis alternativement de 50 et 10 pixels (la première valeur concerne le coin en haut à gauche, et on tourne dans le sens des aiguilles d'une montre) :

.coins {
border:1px solid #B0C4DE;
background-color:#E4EFFF;
border-radius:50px 10px 50px 10px;
}

Exemple 2

Tous les coins arrondis de 10 pixels :

.coins {
border:1px solid #B0C4DE;
background-color:#E4EFFF;
border-radius:10px;
}

On pourra préférer de mettre l'unité en em d'ailleurs...

Avantage

C'est d'une simplicité enfantine à mettre en place et pas besoin d'images.

Inconvénient

Il est de taille : aucun navigateur ne l'implémente de cette façon pour l'instant. Pour une raison que je ne m'explique pas, seuls les navigateurs de la firme Mozilla (Firefox, SeaMonkey) et Safari permettent de profiter de cette technique, mais en rajoutant un préfixe qui leur est propre : -moz- pour Mozilla et -webkit- pour Safari et Chrome. Quant à MSIE et Opéra, nada pour l'instant.

Le code CSS à écrire sera donc :

.coins {
border:1px solid #B0C4DE;
background-color:#E4EFFF;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}

Visionner l'exemple

Haut

Technique 2 : plusieurs div imbriqués

Ceci n'est qu'une variante du tutoriel "plusieurs images de fond"...

Code (x)html

<div class="coins2">
 <div id="hg">
  <div id="hd">
   <div id="bd">
    <div id="bg">
     <h3>Lorem ipsum</h3>
     <p>
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
     Mauris vulputate laoreet urna. Integer magna. 
     Donec facilisis lectus sed quam. 
     Curabitur sit amet lacus id lacus facilisis venenatis.
     </p>
     </div><!-- /bg -->
    </div><!-- /bd -->
  </div><!-- /hd -->
 </div><!-- /hg -->
</div><!-- /coins2 -->

Code CSS

.coins2 {
background-color:#E4EFFF;
}
#hg {
background:url(images/coin1.png) no-repeat top left;
}
#hd {
background:url(images/coin2.png) no-repeat top right;
}
#bd {
background:url(images/coin3.png) no-repeat bottom right;
}
#bg {
background:url(images/coin4.png) no-repeat bottom left;
}

Visionner l'exemple

Avantages

C'est compatible avec tous les navigateurs, et le cadre est étirable à toutes les résolutions en cas de design fluide.

Inconvénient

Trop de div tuent les div... On frole la div-soupe indigeste !

Haut

Technique 3 : l'image coulissante

Cette technique avait été présentée par Raphaël Goetter lors de notre atelier CSS de ParisWeb 2007.

Il s'agit de faire une seule image, très haute, avec ses 4 coins arrondis. Celle que j'ai utilisé pour cet exemple fait 802 pixels de largeur sur 2002 pixels de hauteur et elle ne pèse que 9 ko.

L'astuce consiste à associer le bas de cette image au cadre, et le haut au titre du paragraphe h3 (ou tout autre élément qui sera en haut du cadre). L'image coulissera en fonction de la hauteur du texte (dans la limite des 2002 pixels de l'image).

Code (x)html

<div class="coins3">
 <h3>Lorem Ipsum</h3>
 <p>
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
 Mauris vulputate laoreet urna. Integer magna. 
 Donec facilisis lectus sed quam. 
 Curabitur sit amet lacus id lacus facilisis venenatis.
 </p>
</div>

Code CSS

.coins3 {
width:802px;
margin:auto;
background:#E4EFFF url(images/coin5.png) no-repeat bottom center;
}
.coins3 h3 {
background:#E4EFFF url(images/coin5.png) no-repeat top center;
}

Visionner l'exemple

Avantages

Méthode compatible avec tous les navigateurs, facile à réaliser.

Inconvénient

La largeur du cadre est fixé par la largeur de l'image. Elle est donc incompatible avec un design fluide.

Haut