L’improbable demande de CV

J’ai reçu ce matin un appel d’un de mes partenaires qui désire que j’intègre une équipe de formateurs qu’il est en train de monter pour répondre à un appel d’offres de la région.

Jusque là tout va bien.

C’est une formation spécialisante en Webdesign en plusieurs modules et ce partenaire voudrait que j’intervienne sur trois parties distinctes :

  • Une partie traitant des CMS, du travail sur les thèmes/squelettes/templates, une application des compétences acquises par les stagiaires lors de leurs modules html/css et php.
  • Une partie traitant du design pur web, la formation intéressant particulièrement des personnes de formation de type graphistes désireuses de faire migrer leurs compétences vers le web.
  • Une dernière partie traitant exclusivement de la préparation et l’intégration de newsletter HTML (qui est une compétence recherchée en ce moment, pour rappel).

Tout ça me semble alléchant et donc, jusque là, tout va bien.

Puis tombe LA phrase que je n’ai plus entendu depuis des lustres :

Ah oui, il me faut aussi ton CV.

Gniii ?

Ben oui, comme c’est pour la région, il me faut ton CV, je dois fournir le CV de tous les formateurs.

Là, ça ne va plus, mais alors plus du tout.

Un CV, est-ce que j’ai une tête à m’emmerder encore avec un CV, je ne sais même plus à quoi il ressemble mon CV, je ne sais même plus si j’en ai qui trainent sur mon PC, je n’ai plus utilisé de Cv depuis… 2005.

Et une lettre de motivation tant qu’on y est ?

Un diplôme pour les référenceurs et rédacteurs Web

L’intégrateur Web Activis s’est associé à l’IUT de Mulhouse pour créer un diplôme pour les référenceurs et rédacteurs Web. Dès la rentrée prochaine, une quinzaine d’étudiants pourront donc suivre un cursus de 1 650 heures sur ce nouveau métier du marketing, en passant par les voies de l’apprentissage et de la formation continue. Il s’agit en effet d’un enseignement en alternance (IUT/Entreprise de 2 à 4 semaines) pour des élèves ayant un profil littéraire d’un niveau BAC+2 minimum.
Un diplôme pour les référenceurs et rédacteurs Web – Actualités PME – Le Monde Informatique
IUT de Mulhouse : Licence ATC : Référenceur & Rédacteur Web.

Avis aux personnes avec qui j’ai discuté emploi lors de Paris Web 2007 : ça ne vous rappelle pas quelque chose?

Ca m’intéresserait de savoir ce qu’en pensent les référenceurs qui trainent sur l’Ajblog.

Via Mike.

Grand moment de solitude pour un formateur

Dans la vie d’un formateur, il y a de nombreuses raisons pour qu’une formation se passe mal.

Une des raisons principale à ce genre d’incidents, est une mauvaise estimation initiale du client des besoins en formation ou une mauvaise évaluation de l’entreprise de formation des besoins réels du client.

On creuse les besoins réels, bien souvent, en fonction de l’interlocuteur et de son degré de connaissance du milieu de la formation.

Donc, quand un bureau de ressources humaines (dont une partie du métier est quand même de se tenir au courant des formations professionnelles) vous contacte pour une simple initiation sur un logiciel, et bien, vous préparez une initiation, c’est à dire une formation simple orientée outil et non pas orientée métier, et surtout vous choisissez le prestataire le mieux adapté aux besoins de la formation.

Donc, voila vous l’aurez compris, j’ai eu un léger problème ce matin en arrivant devant les stagiaires de la deuxième formation que je devais donner à Brest.

J’attendais des stagiaires désirant « dégrossir » les connaissances de base sur le logiciel prévu (Adobe Lightroom), et je me suis retrouvé face à 4 photographes professionnels, bien habitués à l’outil informatique et ayant dépassé depuis longtemps le stade de l’initiation sur Lightroom vu que leur demande de formation date d’il y a… un an.

Ils ont des questions longues comme le bras, extrêmement ciblées et pointues et surtout complètement en rapport avec leur activité professionnelle, qui est à des années lumière de ma spécialisation.

Un grand moment de solitude.

Que faire dans ce cas là ? Tout simplement ce que je fais toujours : être honnête.

Je leur ai expliqué directement le problème et exposé des solutions à la hauteur de mes compétences, c’est à dire que n’étant pas expert de leur secteur d’activité, je ne pourrais me positionner que sur certains de leurs besoins et principalement d’un point de vue technique en y ajoutant une plusvalue sur de nombreux sujets annexes proches de leurs problématiques.

En clair : transposer une expertise sectorielle à un autre secteur d’activité car nous restons dans des problématiques liées à la gestion des flux de production dans les métiers de la chaîne graphique.

Mais à part ça, pour savoir quel appareil gère le mieux le format raw ou la compression jpeg en natif, là, je sèche. ;)

Quand on dit qu’être formateur c’est continuellement remettre en cause ses compétences.

Quelques nouvelles du programme de formation (X)HTML/CSS

Un peu d’information ne fait pas de mal, surtout pour vous dire que je n’ai pas abandonné le projet, juste pris beaucoup de retard…

Je comptais dans un premier temps m’en occuper cet été, étant donné que c’est en général une période assez creuse pour le secteur de la création Web.

Sauf que contre toute attente, l’été a été plutôt mouvementé et il semble que ce soit général d’après les retours que j’ai eu d’autre professionnels.

Donc, pour revenir au sujet, le projet avance un peu tout de même, j’ai quasi finalisé le plan de formation, ce qui, hélas, n’est que la partie visible de l’iceberg.

Dés que ce plan me convient dans son ensemble, je le posterai sur le blog pour que l’on puisse échanger nos points de vue et voir les améliorations à y apporter.

Je pense que le dossier final sera édité sous forme de livre blanc à télécharger ou bien sur seront citées toutes les personnes ayant participé au projet.

Je pense pouvoir proposer un plan assez complet mi ou fin Septembre, pour le reste, à mon avis ce ne sera pas avant Octobre/Novembre étant donné mon agenda un peu surchargé.

Désolé pour le retard.

Correction d’exercice : un menu en rollover façon "dock" Mac

Pour rappel, voici le code source html qui sera utilisé pour les deux exercices :

<body>
	<ul>
		<li id="un"><a href="#">1</a></li>
		<li id="deux"><a href="#">2</a></li>
		<li id="trois"><a href="#">3</a></li>
		<li id="quatre"><a href="#">4</a></li>
		<li id="cinq"><a href="#">5</a></li>
		<li id="six"><a href="#">5</a></li>
	</ul>
</body>

Les sources utiles :

  • Balises HTML : http://www.laurent-bernat.com/
  • Balises (X)HTML : http://www.siteduzero.com/
  • Propriétés CSS : http://www.siteduzero.com/
  • Positionnement des éléments via CSS : http://css.alsacreations.com/
  • Quelques exemples de menus : http://css.alsacreations.com/Galeries-de-menus-en-CSS

Premier exercice : Un menu avec rollover d’images et effets de transition.

  • Objectif : à la fin de cet exercice, vous serez, normalement, capables, de créer un menu de type « rollover » en usant seulement de code html et CSS.
  • Niveau de difficulté : Facile
  • Difficulté détectée : Créer l’effet de zoom « fluide » au passage de la souris sur un lien (voir vidéo ci-dessous).
  • Pré requis techniques : connaitre les balises html, bases de CSS, bases de travail d’images numériques et formats d’images pour le web.
  • Matériel nécessaire : Un éditeur de texte (ou html) et un logiciel de gestion d’images (the Gimp ou photoshop par exemple).
  • Informations complémentaires : C’est un exercice simple, comme mentionné ci-dessus, il faut juste réfléchir sur l’effet de « loupe » au passage de la souris sur un lien, concrètement, regardez bien la vidéo, il y a vraiment une petite subtilité.

Correction :

Il n’y a pas de grande difficulté pour cette exercice, vous avez presque toutes les réponses nécessaires en analysant bien les quelques exemples de menus fournis par le site Alsacréations.

Les grandes différences sont :

  • L’agrandissement de la surface active du lien au passage de la souris
  • l’effet de transition appliqué à l’image

Nous ne toucherons plus à la structure html, l’ensemble de l’exercice va se dérouler au niveau de la gestion de la feuille de style CSS et des images utilisée.

Le fichier CSS

Nous allons utiliser la technique du fond changeant en fonction du changement d’état du lien, passage du lien par défaut au lien (a) au passage de la souris (a:hover) et pour simplifier, à l’usage du clavier (a:focus).

Préparons la base de notre fichier CSS :

* {margin:0; padding:0;}
body {margin-top: 20%}
ul {width:350px; margin: 0 auto;}
li {display:inline;}

li a {
	display:block; 
	float:left; 
	width:50px; 
	height:100px; 
	}

Le sélecteur universel * est là pour remettre à zéro les valeurs de marge extérieure (margin:0) et marge extérieure (padding:0) qui peuvent être différentes d’un navigateur à l’autre. Au passage, en commençant toutes vos feuilles de style par ce petit bout de code, vous réglez 90 % de vos problèmes de rendu sur les différents navigateurs.

Les valeurs appliquées au body et au ul ne sont ici qu’à titre d’exemple et ne servent que pour la présentation de l’exercice, ce qui nous intéresse viens ensuite.

li {display:inline;} permet de changer la nature du conteneur li du type en bloc à type en ligne, pour résumer, cela vas permettre de présenter les éléments de la liste sur une ligne et non plus les uns « sous » les autres, pour plus d’informations vous pouvez aller voir cet article d’Alsacréations : La structure des balises : bloc et en-ligne.

li a {"valeurs"} c’est ici que nous construisons la forme de nos boutons, nous modifions la nature de la balise a pour la transformer en type « en bloc » (display:block), nous lui donnons un positionnement flottant à gauche (float:left;) de façon à ce qu’ils se positionnent les un a côté des autres, nous leur donnons une forme (width:50px; height:100px). Voila, nos boutons sont prêts.

Le 100px de hauteur des boutons n’est pas choisi au hasard, il correspond à la hauteur des boutons en mode actif, nous passerons donc de boutons de 50 pixels de large et 100 pixels de haut à des boutons de 100 pixels de large sur 100 pixels de haut.

c’est aussi pour ça que nous avons donné une largeur de 350 pixels à la liste (ul) car cela corresponds à 5 boutons de largeur 50 pixels et un de largeur 100 pixels. Ca vous évitéra des surprises de mise en page en prévoyant dés le début la taille maximale prise par votre menu.

Passons à la décoration.

Nous allons en premier lieu préparer nos images.

Les boutons en version off :

Une simple image de 300 pixels de large et 100 pixels de haut dans laquelle vous allez créer vos boutons que vous placerez tous les 50 pixels.

Essayez avec des images simples pour l’exercice, rien de vous empêche par la suite de le refaire avec d’autres types de boutons, à vous d’adapter.

Voici l’image utilisée :

Nous avons utilisé un format gif pour une meilleure concordance de couleurs sous les différents navigateurs vu que nous devons utiliser des fichiers gifs pour les boutons en mode ON.

On les insère ensuite dans le document en ajoutant ces lignes à notre feuille de style :

#un a {background:transparent url(menu-rollover-jscript.gif) no-repeat  left top; }
#deux a {background:transparent url(menu-rollover-jscript.gif) no-repeat -50px top; }
#trois a {background:transparent url(menu-rollover-jscript.gif) no-repeat -100px top; }
#quatre a {background:transparent url(menu-rollover-jscript.gif) no-repeat -150px top; }
#cinq a {background:transparent url(menu-rollover-jscript.gif) no-repeat -200px top; }
#six a {background:transparent url(menu-rollover-jscript.gif) no-repeat -250px top; }

menu-rollover-jscript.gif est le nom de mon image, bien sur, utilisez le nom de l’image que vous avez créé.

Cela ne fonctionnera que si vous avez utilisé le code html fourni, ou chaque élément de liste (li) a son id propre (un, deux, trois, etc.).

On a utilisé la technique du positionnement de fond (left top, -50px top, etc) de façon à ce que chaque bouton ait bien le fond qui lui convient, une seule image pour les 6 boutons.

Les boutons version ON

En temps normal, pour un simple changement de fond, nous aurions utilisé la même image que celle du fond par défaut, en y incluant, plus bas, les versions ON des boutons, mais comme nous voulons obtenir un effet de transition, nous allons utiliser une image par bouton, un bon vieux gif animé.

Voici comment nous allons faire (l’exemple ci-dessous est réalisé avec Photoshop/imageready, si vous utilisez un autre logiciel pour vos gif animés, adaptez en fonction des spécificités de votre logiciel).

Créez une image de 100 pixels par 100 pixels avec un fond transparent.
Créez un équivalent du bouton de base bien centré dans votre image (par exemple outil elipse avec la touche shift enfoncée pour l’homothétie).

Ajoutez le texte correspondant (1, 2, etc.)

Fusionnez le texte avec votre bouton (calques photoshop)
Dupliquez le calque.
Réduisez le calque inférieur à 75% de la taille du calque supérieur, recentrez le si besoin.
appliquez à ce calque un flou gaussien (filtres/atténuation/flou gaussien), normalement le réglage par défaut devrait suffire.
Basculez sous imageready (bouton en bas à droite de votre barre d’outils flottante).

Une fois dans Imagerady (ou votre logiciel d’animations), créez deux « images » d’animation, la première avec l’objet flouté et la deuxième avec l’objet « normal ».
Pas de temps de transition et pas de répétition d’animation.
Enregistrez la copie optimisée sous et vous voila avec votre premier bouton ON.

Répétez l’opération pour les cinq autres boutons. Il y a bien sur une méthode plus rapide pour créer les cinq boutons, mais pour l’instant nous allons rester sur cette méthode « simple ».

Il ne vous reste plus qu’a appliquer ces fonds via votre feuille de style avec le code suivant à ajouter à la suite :

#un a:hover, #un a:focus {width:100px; height:100px; background:transparent url(1.gif) no-repeat left top; }
#deux a:hover, #deux a:focus { width:100px; height:100px; background:transparent url(2.gif) no-repeat left top; }
#trois a:hover, #trois a:focus {width:100px; height:100px; background:transparent url(3.gif) no-repeat left top; }
#quatre a:hover, #quatre a:focus {width:100px; height:100px; background:transparent url(4.gif) no-repeat left top; }
#cinq a:hover, #cinq a:focus {width:100px; height:100px; background:transparent url(5.gif) no-repeat left top; }
#six a:hover, #six a:focus {width:100px; height:100px; background:transparent url(6.gif) no-repeat left top; }

Nous appliquons le changement de taille et de fond lors des changements d’état :hover et :focus, pour que l’effet soit accessible soit à la souris, soit au clavier.

Encore une fois j’ai utilisé mes noms de fichiers, pensez à utiliser vos propres noms de fichiers.

Ah oui, dernier point, votre texte s’affiche toujours à l’écran, pour éviter cela vous pouvez utiliser text-indent:-5000px; a ajouter a votre partie de feuille de style li a {…}. Ou pour faire plaisir à Florent V. jouer avec la taille de police, les couleurs des images et les couleurs de fond des balises a de façon à ce que le texte apparaisse si les images sont désactivées.

Et voici le résultat :

http://www.ajcrea.com/exercices/rolloverjscript/

Attention : cette méthode a un défaut, comme les images « ON » ont une animation qui ne s’effectue qu’une fois, on ne peut les précharger sans que l’animation ne s’active, donc au premier affichage dans le menu, vous aurez une latence d’affichage, le temps que le navigateur charge le fichier. C’est bien pour ça que j’ai continué à creuser pour en arriver au deuxième exercice.

Fin de la correction pour ce matin, le travail m’appelle, je publierai la correction du deuxième exercice cet après midi.

Nous revoila avec la correction du deuxième exercice :

Deuxième exercice : Un menu avec rollover d’images se rapprochant du rendu du « Dock Mac ».

Rappel des directives :

  • Objectif : à la fin de cet exercice, vous serez, normalement, capables, de créer un menu de type « rollover » en usant seulement de code html et CSS en se rapprochant le plus possible d’un rendu fluide de script Javascript.
  • Niveau de difficulté : Difficile
  • Difficulté détectée : Gérer les différents changements de fond image au passage de la souris.
  • Pré requis techniques : connaitre les balises html et leurs comportements, connaissance approfondie des comportements CSS, bases de travail d’images numériques et formats d’images pour le web.
  • Matériel nécessaire : Un éditeur de texte (ou html) et un logiciel de gestion d’images (the Gimp ou photoshop par exemple).
  • Informations complémentaires : Il faut être lucide, vous n’arriverez jamais ou presque à obtenir des rendus aussi fluides que le rendu javascript, mais vous pouvez essayer de vous en rapprocher, au prix de petits trucs et astuces, tant au niveau code que des images. Regardez bien la vidéo, tout y est ou presque.

Nous partons toujours du fichier html fourni en début de correction et encore une fois tout va se jouer au niveau du CSS et des images.

Un peu de réflexion

Quand j’ai commencé à réfléchir à ce type de menu, j’ai d’abord essayé avec la méthode du premier exercice, mais elle ne m’a pas totalement convaincue.

J’ai donc creusé dans mes connaissances des comportements CSS pour voir comment je pouvais contourner les difficultés détectées :

  • Il me fallait un changement multiple d’images pour simuler les augmentations proportionnelles des boutons (du plus grand au plus petit).
  • Une compatibilité avec un maximum de navigateurs, donc pas de trucs et astuces ne fonctionnant pas sur Internet Explorer.
  • Que « l’animation » soit fluide, donc pas d’animations longues à charger au survol de la souris.
  • Pas de javascript
  • Que soit globalement « accessible »

Je vous livre dés maintenant la solution :
[
Un menu avec rollover d’images se rapprochant du rendu du « Dock Mac »|http://www.ajcrea.com/exercices/rolloverjscript/test2.html|fr].

L’image utilisée :

La feuille de style CSS :

body {margin-top: 20%}

* {margin:0; padding:0;}
ul {
position:relative; 
width:350px; 
height:100px; 
margin: 0 auto; 
background:transparent url(global.png) no-repeat  left top; }
li {display:inline;}

li a {
	display:block; 
	width:50px; 
	height:100px; 
	text-indent:-5000px;
	}
#un a {position:absolute; top:0; left:0px; z-index:200; }
#deux a {position:absolute; top:0; left:50px; z-index:200; }
#trois a {position:absolute; top:0; left:100px; z-index:200;}
#quatre a {position:absolute; top:0; left:150px; z-index:200;}
#cinq a {position:absolute; top:0; left:200px; z-index:200;}
#six a {position:absolute; top:0; left:250px; z-index:200;}

#un a:hover, #un a:focus, #deux a:hover, #deux a:focus, #trois a:hover, #trois a:focus, #quatre a:hover, #quatre a:focus, #cinq a:hover, #cinq a:focus, #six a:hover, #six a:focus  {
position:absolute; top:0; left:0px; 
width:350px; height:100px; 
z-index:100
}

#un a:hover, #un a:focus {
background:transparent url(global.png) no-repeat left -100px;
}
#deux a:hover, #deux a:focus {
background:transparent url(global.png) no-repeat left -200px;
}
#trois a:hover, #trois a:focus {
background:transparent url(global.png) no-repeat left -300px;
}
#quatre a:hover, #quatre a:focus {
background:transparent url(global.png) no-repeat left -400px;
}
#cinq a:hover, #cinq a:focus {
background:transparent url(global.png) no-repeat left -500px;
}
#six a:hover, #six a:focus {
background:transparent url(global.png) no-repeat left -600px;
}

Ce qui nous donne la page suivante :

http://www.ajcrea.com/exercices/rolloverjscript/test2.html

Explications :

Je ne vais pas revenir sur les points déjà vus dans le premier exercice, juste expliquer les différents points importants.

La liste non ordonnée :

utilisation du positionnement relatif (position:relative) pour une seule raison, permettre aux éléments enfants en positionnement absolu (position:absolute) de se fixer sur son layout et non pas sur la page.

Le fond de base est appliqué a cet élément, et non pas aux éléments liens (a).

les boutons version OFF (les éléments a) :

Ils sont positionnés en absolu pour ne pas bouger quand nous allons modifier les comportement des a:hover et a:focus.
On leur donne une forme (width:50px, height:100px) et un z-index de 200, l’intérêt du z-index va venir par la suite.

les boutons version ON (:hover, :focus) :

On profite du changement d’état pour donner une nouvelle taille au bouton (width:350px; height:100px;) soit la taille exacte du menu, on les positionne en absolu en haut à gauche pour qu’ils commencent graphiquement au début du menu.

On leur donne un z-index de 100 pour qu’ils se positionnent au dessous des zones réactives des liens (qui elles, sont en z-index:200 soit « au dessus »), de fait, le fond recouvre bien l’ensemble des boutons, mais les zones réactives de chaque lien restent accessibles au survol et clic de souris (et au clavier).

Attention : bien que personnellement je trouve l’effet efficace, il faut faire attention au poids de l’image utilisée en fond qui peut finir par être assez lourde si vous faites un menu vraiment graphique.

Pour finir

Le premier exercice n’était pas bien compliqué, il s’agit juste d’une variante des menus que vous trouvez dans la galerie d’Alsacréations fournie dans les sources.

Le deuxième demandait presque plus de travail au niveau de l’image que des CSS, mais quand même je suis assez content du résultat.

Comme toujours, si vous avez des questions ou des remarques, n’hésitez pas.

Exercice CSS : un menu en "rollover façon "Dock Mac"

Premier exercice : Un menu avec rollover d’images et effets de transition.

  • Objectif : à la fin de cet exercice, vous serez, normalement, capables, de créer un menu de type « rollover » en usant seulement de code html et CSS.
  • Niveau de difficulté : Facile
  • Difficulté détectée : Créer l’effet de zoom « fluide » au passage de la souris sur un lien (voir vidéo ci-dessous).
  • Pré requis techniques : connaitre les balises html, bases de CSS, bases de travail d’images numériques et formats d’images pour le web.
  • Matériel nécessaire : Un éditeur de texte (ou html) et un logiciel de gestion d’images (the Gimp ou photoshop par exemple).
  • Informations complémentaires : C’est un exercice simple, comme mentionné ci-dessus, il faut juste réfléchir sur l’effet de « loupe » au passage de la souris sur un lien, concrètement, regardez bien la vidéo, il y a vraiment une petite subtilité.

Le support en video :

Les sources (pour rappel) :

  • Balises HTML : http://www.laurent-bernat.com/
  • Balises (X)HTML : http://www.siteduzero.com/
  • Propriétés CSS : http://www.siteduzero.com/
  • Positionnement des éléments via CSS : http://css.alsacreations.com/
  • Quelques exemples de menus : http://css.alsacreations.com/Galeries-de-menus-en-CSS

Deuxième exercice : Un menu avec rollover d’images se rapprochant du rendu du « Dock Mac ».

Voici ce qui m’a donné envie de tester ce genre de rendu (bien joué julien A ;) ) : attention le cargement de cette page risque de « geler votre navigateur pendant de longues secondes.
http://archive.dojotoolkit.org/nightly/tests/widget/test_FisheyeList.html

  • Objectif : à la fin de cet exercice, vous serez, normalement, capables, de créer un menu de type « rollover » en usant seulement de code html et CSS en se rapprochant le plus possible d’un rendu fluide de script Javascript.
  • Niveau de difficulté : Difficile
  • Difficulté détectée : Gérer les différents changements de fond image au passage de la souris.
  • Pré requis techniques : connaitre les balises html et leurs comportements, connaissance approfondie des comportements CSS, bases de travail d’images numériques et formats d’images pour le web.
  • Matériel nécessaire : Un éditeur de texte (ou html) et un logiciel de gestion d’images (the Gimp ou photoshop par exemple).
  • Informations complémentaires : Il faut être lucide, vous n’arriverez jamais ou presque à obtenir des rendus aussi fluides que le rendu javascript, mais vous pouvez essayer de vous en rapprocher, au prix de petits trucs et astuces, tant au niveau code que des images. Regardez bien la vidéo, tout y est ou presque.

Le support en video :

Les sources (pour rappel) :

  • Balises HTML : http://www.laurent-bernat.com/
  • Balises (X)HTML : http://www.siteduzero.com/
  • Propriétés CSS : http://www.siteduzero.com/
  • Positionnement des éléments via CSS : http://css.alsacreations.com/
  • Quelques exemples de menus : http://css.alsacreations.com/Galeries-de-menus-en-CSS

Attention !!

Ces deux exercices, quel que soit leur niveau, demandent quand même de prendre un peu de recul par rapport à vos méthodes de travail. Leur but principal est de vous faire penser « rendu » dans sa globalité, une page web est un ensemble de choses, pour arriver à un rendu, il faut parfois prendre les choses sous un angle différent de ce à quoi vous êtes habitués.

Dernier point : le questionnement sur les images utilisées est important.

Bon courage à vous.

PS : j’oubliais, voici le code html utilisé :

<body>
	<ul>
		<li id="un"><a href="#">1</a></li>
		<li id="deux"><a href="#">2</a></li>
		<li id="trois"><a href="#">3</a></li>
		<li id="quatre"><a href="#">4</a></li>
		<li id="cinq"><a href="#">5</a></li>
		<li id="six"><a href="#">5</a></li>
	</ul>
</body>

PPS : pour information, les deux constructions on été testées avec succès sur : IE5.5, IE6, IE7, Opera 9, FF 1.5 et FF 2.

Le corrigé :

Correction d’exercice : un menu en rollover façon « dock » Mac

Correction d’exercice CSS : un pied de page qui dépasse sur le contenu

Voici donc ma correction, vous trouverez les propositions des lecteurs en fin d’article.

En premier : le code html

Pas de grandes difficultés, il s’agit d’une mise en page classique en trois colonnes comme on en trouve un peu partout, vous avez d’ailleurs d’excellents exemples sur Alsacréations : Modèles de mise en page en CSS

On va donc faire une construction simple, avec : un bloc d’en tête (header), une colonne gauche (qui sera le menu principal), un contenu central, une colonne droite, un pied de page (footer).

Comme la colonne de gauche fait office de menu général, on va donc sans aucun remord la placer avant le contenu central dans le flux de la page.

Ca nous donne la structure suivante (en XHTML strict) :

Lien vers la page de code (pensez à afficher la source)

Vous remarquerez deux choses:

  • J’ai déjà identifié mes blocs via une ID unique pour chaque, j’utilise toujours les mêmes ID dans mes constructions html, tout simplement pour pouvoir m’y retrouver facilement et pour pouvoir recycler des modèles de feuilles de style CSS facilement.
  • Le code est commenté, pour l’instant il est très lisible, mais dans des pages à fort contenu, il est toujours bon de commenter son code, soit pour s’y retrouver aisément, soit pour qu’un autre s’y retrouve.

Pour l’instant, nous n’allons pas mettre de contenu, nous allons construire la mise en page de ce squelette via une feuille de style CSS simple.

Et pour savoir quelles valeurs de hauteur/largeur nous allons donner à nos différentes parties, nous allons nous baser sur la maquette fournie :

miniature de la maquette cotée

Le design fait 990 pixels de large, chaque colonne fait 200 pixels de large, le pied de page fait 50 pixels de haut.

Ce qui nous donne le code CSS suivant :

#general {width:990px; margin: 0 auto;}
#header {height:100px}
#colgauche {
	float:left;
	width:200px;
	height:400px;
}
#central {
	float:left;
	width:550px;
	height:400px
}
#coldroite {
	float:right;
	width:200px;
	height:400px;
}
#footer {
	clear:both;
	height:50px;
}

J’ai attribué une hauteur aux éléments de contenu pour les tests, pensez à les retirer une fois qu’il y a un vrai contenu.
Ensuite, les images de déco.

Et bien, nous n’allons pas nous embêter à découper l’image utilisée en fond du pied de page, nous allons l’utiliser en entier, son poids global (si bien compressée) ne pose pas de problèmes, une fois nettoyée des résidus de texte (pour exemple, l’image que je vais utilise est en png24 et fait 35 kos).

C

Toute la découpe va se faire via un mélange de html et de CSS.

Ces images de décoration, n’ont aucune valeur d’information, aussi nous pouvons les afficher via des fonds CSS sans aucune arrière pensée, elles n’apportent aucune information utile à la page, elles sont juste là à titre de décoration.

Voici comment nous allons procéder :

Nous allons créer 3 conteneurs/division (div) vides que nous allons positionner juste avant la balise fermante (</div>) du pied de page (footer).

<div id= »decogauche »>
</div>
<div id= »decocentre »>
</div>
<div id= »decodroite »>
</div>

Puis nous allons leur donner une forme et un fond via CSS, on connait le fond, on connait leurs largeurs, la seule inconnue est la hauteur optimale pour qu’elles se marient le mieux avec les contenus des colonnes et du contenu central, pour l’instant nous allons leur donner une hauteur égale à celle de l’image utilisée, soit 190 pixels.

Au passage, nous allons en profiter pour attribuer le fond au pied de page.

Voici donc le code CSS appliqué à ce moment là :

#footer {
	clear:both;
	height:50px;
	background: transparent url(fond-pied-de-page.png) no-repeat bottom left;
}
#decogauche {
	width:200px; 
	height: 190px; 
	background: transparent url(fond-pied-de-page.png) no-repeat  left top;
}
#decocentre {
	width:590px; 
	height: 190px; 
	background: transparent url(fond-pied-de-page.png) no-repeat  -200px top;
}
#decodroite {
	width:200px; 
	height: 190px; 
	background: transparent url(fond-pied-de-page.png) no-repeat top right;
}

Les colonnes faisant 200 pixels de large chacune, on a déduit la largeur du bloc central à 590 pixels (990-400). On a positionné le fond de ce bloc à -200 pixels sur la gauche de façon à ne faire apparaitre que la partie qui nous intéresse.

Si vous avez effectué ces opérations et que vous affichez votre page dans un navigateur, vous voyez le pied de page avec un fond et 3 blocs qui s’affichent en dessous et qui correspondent au parties sur lesquelles nous allons travailler.

C’est bien beau, mais maintenant ?

Maintenant, on va doucement positionner tout ça en utilisant le positionnement absolu (position: absolute).

Pour ce faire, nous allons commencer par donner un positionnement relatif (position: relative) au pied de page (footer). En effet, donner un positionnement relatif à un conteneur, permet que ses conteneurs enfants en position absolue se fixent par rapport à sa forme et non plus par rapport à la page.

De plus, nous allons réduire la hauteur des blocs concernés de 50 pixels (la hauteur du pied de page) de façon à ce que les fonds se marient le plus parfaitement possible.

Voici ce que donne le css maintenant (du moins la partie que nous modifions) :

#footer {
	position:relative;
	clear:both;
	height:50px;
	background: transparent url(fond-pied-de-page.png) no-repeat bottom left;
}
#decogauche {
	position: absolute;
	left:0;
	bottom:50px;
	width:200px; 
	height: 140px; 
	background: transparent url(fond-pied-de-page.png) no-repeat  left top;
}
#decocentre {
	position: absolute;
	left:200px;
	bottom:50px;
	width:590px; 
	height: 140px; 
	background: transparent url(fond-pied-de-page.png) no-repeat  -200px top;
}
#decodroite {
	position: absolute;
	right:0;
	bottom:50px;
	width:200px; 
	height: 140px; 
	background: transparent url(fond-pied-de-page.png) no-repeat top right;
}

C’est déjà pas mal, mais ce n’est pas encore ça, nous avons découpé notre image en hauteur en fonction de l’élément le plus haut, la petite fille sur son vélo à droite, seulement la partie gauche et la partie centrale n’ont pas besoin d’être aussi hautes, on va donc travailler le CSS de façon à ce qu’ils fassent juste la hauteur nécessaire et surtout repositionner les fond en fonction.

Faites vos essais, mais voici ce que ça donne pour moi :

#decogauche {
	position: absolute;
	left:0;
	bottom:50px;
	width:200px; 
	height: 100px; 
	background: transparent url(fond-pied-de-page.png) no-repeat  left -40px;
}
#decocentre {
	position: absolute;
	left:200px;
	bottom:50px;
	width:590px; 
	height: 55px; 
	background: transparent url(fond-pied-de-page.png) no-repeat  -200px -85px;
}
#decodroite {
	position: absolute;
	right:0;
	bottom:50px;
	width:200px; 
	height: 140px; 
	background: transparent url(fond-pied-de-page.png) no-repeat top right;
}

Pour terminer, pensez à donner à vos éléments de contenu (colgauche, central, coldroite) une marge intérieure basse (padding-bottom) au mois égale à la hauteur des blocs de déco pour que leur contenu de passe pas sous les blocs déco.

Voici la construction dans sa version « finale » : page3.html

Bon, je vous rassure, il y a, dans ce cas précis, une méthode beaucoup plus simple. ;)

Vu que nous avons utilisé une seule et grande image, nous aurions pu mettre cette image comme fond du conteneur « general » et appliquer les règles de marges intérieures basse aux éléments de contenu (et chercher une solution pour le fond de la colonne de gauche). Je crois d’ailleurs que c’est en partie la solution gardée par Florrent V.

Mais je le rappelle, il s’agit d’exercices pour apprendre à mieux appréhender les différents comportements des CSS.

Les contributions des lecteurs :

La réponse de clb56 :
http://www.clb56.fr/test_css/aj_css_exercice3/
http://www.clb56.fr/test_css/aj_css_exercice3bis/

La réponse de Florent V :
http://web.covertprestige.info/divers/ajblog/exo3.html

Maintenant, essayons de déterminer ensemble quelle est la « meilleure » solution, à vos claviers.

Exercice CSS : un pied de page qui dépasse sur le contenu

La semaine dernière, je vous avais parlé d’une maquette à réaliser en urgence.

Cette maquette a été acceptée par le client, moyennant quelques petites modifications, mais le prestataire en charge de l’intégration m’est tombée dessus à propos de certaines libertés que j’avais prises d’un point de vue de la mise en page (coucou Myriam ;) ).

Euhhh, dis Aymeric, elle est sympa ta maquette, mais je ne rêve pas, ton pied de page là, il dépasse vers le haut, c’est super chelou à intégrer ça.

Tss tss femme de peu de foi dans les capacités des CSS (on notera au passage que ce pied de page est un mix entre ma proposition de maquette et celle de Myriam, donc je ne suis pas le seul fautif).

Je donne donc à Myriam deux ou trois trucs et astuces pour faciliter ce type d’intégrations (pour une fois que c’est dans ce sens, en général c’est moi qui appelle Myriam à l’aide pour des problèmes de php).

Donc, voici l’exercice.

Un pied de page qui dépasse sur le contenu de la page

  • Objectif : à la fin de cet exercice, vous serez, normalement, capables, de positionner des éléments graphiques inclus dans la partie appelée « pied de page » de façon à ce qu’ils se superposent avec des contenus présents dans des éléments supérieurs de la page (voir image fournie pour une meilleure visualisation).
  • Niveau de difficulté : complexe
  • Difficulté détectée : Mise en page en trois colonnes, la colonne de gauche à un fond de couleur.
  • Pré requis techniques : connaitre les balises html, bases de CSS, une bonne connaissance des différents types de positionnement et leurs interactions est nécessaire (des sources sont fournies en bas de page).
  • Matériel nécessaire : Un éditeur de texte (ou html) et un logiciel de gestion d’images (the Gimp ou photoshop par exemple).
  • Informations complémentaires : Le design à une largeur fixe, les textes des colonnes visibles dans l’image jointe ne sont là qu’a titre indicatif, il faut, au final, que le texte du contenu central soit clairement positionné comme précisé sur le visuel. Comme toujours, le code html et CSS doivent être valides, c’est le minimum, je vous laisse tout liberté au niveau de contraintes supplémentaires si vous en avez envie. Bien sur au minimum compatible avec les principaux navigateurs du marché.

L’image

miniature de l'image de référence de l'exercice

Tout est dans l’image, une version à taille réelle est récupérable en cliquant sur l’image affichée.

Tout est réalisable à partir de cette image, si le besoin s’en fait sentir, je vous fournirai les fichiers graphiques source de chaque élément, mais ce n’est pas vraiment le fond du problème.

Je vous demande donc, de fournir un fichier html, un fichier css (ou le css intégré dans le fichier html), ainsi que les images découpées, et de si possible, préciser vos choix techniques.

Les sources (pour rappel) :

Voila, bon exercice et bon courage à vous.

Correction d’exercice : une mise en page en deux colonnes sans conteneurs neutres

L’exercice complet se trouve à cette adresse :
http://www.ajblog.fr/exercice-css-une-mise-en-page-en-deux-colonnes-sans-conteneurs-neutres

Quelques petits ajouts et corrections sur ce qui a été dit initialement

Le but de cet exercice est de vous familiariser avec les comportements CSS de positionnement pour chaque conteneur html.

En effet, un grand nombre d’exemple de mises en page font un fort usage de ce que j’ai appelé ici les conteneurs neutre et que l’on pourrait appeler plus logiquement le balisage de division (<div></div>.

Ces balises ne devraient être utilisées que pour « diviser » votre page en grands groupes d’information, mais pour des raisons de facilité on a souvent tendance à en abuser.

Pour revenir sur ce qui a été dit dans les commentaires de l’exercice initial, oui il faut utiliser des balises <div>, et oui il est bon de commencer à étudier les comportements de positionnement via CSS sans en utiliser.

Voici un exemple concret :

Je veux, quelque par dans ma page avec deux petites colonnes de contenu, chacune comportant un titre et chacune comportant un ou plusieurs paragraphes.

La solution de facilité serait la suivante :

deux colonnes formées par deux blocs conteneurs div

Nous avons un bloc de division logique, car il va créer la « division » de la page pour les contenus concernés.

Ensuite, pour se faciliter la vie, nous créons deux autres « divisions » pour pouvoir caser notre contenu facilement. Même si l’idée de sous « division » peut se comprendre, ces blocs conteneurs ne sont absolument pas nécessaires.

On peut tout à fait se passer de ces deux conteneurs en utilisant les mêmes classes de positionnement pour chaque élément de la colonne.

deux colonnes obtenues uniquement avec des classes CSS sur les contenus

Ce deuxième exemple illustre assez bien ce que nous avons voulu rendre dans cette exercice.

Pour être tout à fait honnête, la deuxième solution à plus une valeur didactique que de production.

Si vous voulez le code le plus « propre » possible et que vous avez la main totale sur votre contenu, optez pour la méthode des classes appliquées par contenu, par contre, si vous êtes dans une logique de production, par exemple un site pour un client ou le contenu est généré via une interface d’édition par backoffice, optez pour la solutions des divisions supplémentaires, autrement, préparez vous à un bon casse tête.

Correction de l’exercice

Je ne vais pas m’étendre plus sur l’utilité de l’exercice, si vous avez lu attentivement ce que j’ai dit ci-dessus, vous aurez compris.

En guise de correction, je vais vous mettre les URls des fichiers créés par les personnes ayant participé à l’exercice.

Leurs réponses sont propres, correctes, précises et globalement plus lisibles que celle que j’avais prévu initialement.

Si il y a des choses que vous ne comprenez pas ou si vous avez besoin d’un complément d’informations, n’hésitez pas à poser vos questions dans les commentaires.

La réponse de 20cent :
http://20cent.net/docs/divers/exercice2.html

La réponse de clb56 :
http://www.clb56.fr/test_css/aj_css_exercice2/index2.html

La réponse de Florent V :
http://web.covertprestige.info/divers/ajblog/exo2a.html