The ASW - Développement web

Php Data Object

cgo2 — Sun, 21 Oct 2007 12:00:00 +0200

Dans ce cadre de mon boulot chez BSO Communication, je travaille beaucoup avec Php Data Object (PDO pour les intimes). Cette API d'abstraction de base de données est très très puissante, mais encore assez jeune et très mal documentée. Un des gros point fort de PDO réside dans les "fetchmodes", c'est à dire toutes les façons de récupérer les résultats d'une requête SQL, selon ses besoins ; et PDO est loin de se limiter au quatuor "fetch_row", "fetch_array", "fetch_assoc" et "fetch_obj" ! J'ai donc écrit une série d'articles présentant les différents modes de récupération des données et notamment leurs performances (avis aux amateurs de benchmarks !). Ils sont tous disponibles sur le blog de BSO Communication.

Nouveau blog de développeur

cgo2 — Mon, 16 Jul 2007 19:07:00 +0200

Ma nouvelle boite, BSO Communication, vient d'ouvrir son blog répondant au doux nom de BSO HQ. Je vais m'occuper de la partie développement, en racontant de temps en temps mes péripéties quotidiennes avec PHP, Javascript, Ruby et tout un tas d'autres langages qui font le web 2.0 (et peut être même plus). Il y a(ura) également 3 rubriques Hébergement, Système et Réseaux, pour ceux qui s'interressent au métier d'opérateur Internet et d'hébergeur. Si avec ça je ne vous ait pas donné envie de l'ajouter immédiatement à votre aggrégateur RSS favori, je sais pas ce qu'il faut. Non, pas des femmes dénudées, c'est pas l'E3 ici.

Une version optimisée pour PHP de JSMin

cgo2 — Wed, 28 Mar 2007 18:23:00 +0200

Les Javascripts permettent de faire tout pleins de choses sur un site web, c'est cool. Mais à force d'empiler les librairies, les frameworks et autres fonctions, on peut vite se retrouver avec deux kilo-tonnes de script, ce qui n'est ni très agréable à charger et ni très léger pour la bande passante.

Heureusement, plusieurs librairies (plus ou mois efficaces) existent et permettent de compresser les scripts. JSMin est l'une d'entre elle.

A l'origine, JSMin est un petit programme écrit en C par Douglas Crokford. Il prend un fichier Javascript et supprime tout ce qui n'est strictement nécessaire, c'est-à-dire :

les commentaires (/* */ et //),
les lignes vides et retour à la ligne,
les espaces (sauf dans les chaines de caractères et les expressions régulières).

Contrairement à d'autres packer, JSMin ne brouille pas le code, c'est-à-dire que le fichier compressé reste lisible, débuggable et modifiable (même si une petite ré-indentation est nécessaire), ce qui est quand même un avantage très appréciable.

Il existe une version PHP de JSMin, mais, comme son auteur l'indique, il s'agit d'une « conversion simple et brutale du C vers le PHP », entendez par là qu'elle n'est pas du tout optimisée et donc super lente. Evidemment, la version C est théoriquement utilisable en PHP via la fonction shell_exec, mais c'est totalement impensable sur un hébergement mutualisé.

Récemment, j'ai dû mettre en place un système de compression et de concaténation des javascripts « à la volée » ; c'est-à-dire que les javascripts sont compressés la première fois qu'un utilisateur les demande, puis mis en cache (vaguement inspiré de ce post). Dès qu'un fichier est mis à jour, le cache est regénéré. Ainsi, je conserve les versions commentées et indentées pour développer, et je n'ai pas à me soucier de les compresser avant de les mettre en ligne. C'est magique.

Mais, la version originale de JSMin en PHP met parfois plus de 3 secondes à compresser certains fichiers, ce qui est bien trop long. Donc je n'ai pas pû m'empêcher de faire un tour dans le code pour l'optimiser. J'ai remplacé toutes les boucles de lecture caractère par caractère (typique du C) par des fonctions natives PHP comme strpos et strlen.

J'ai également viré toute la partie qui concernait les fichiers (dans la version originale, il est possible de passer un nom de fichier à JSMin pour qu'il le lise directement), parceque en PHP c'est beaucoup plus rapide de lire d'abord le fichier (par une fonction comme file_get_contents) et de travailler sur la chaine de caractère représentant le contenu.

Le gain en vitesse dépend fortement de la taille et du contenu du fichier ; dans mon cas c'est entre 10% et 50% plus rapide.

Utilisation

Le constructeur prend 2 paramètres : le code à compresser (string) et, si besoin, un tableau de commentaires à ajouter en début de fichier (array ou rien). Ensuite il suffit d'appeller la fonction minify().

Exemple :

$code = file_get_contents('foo.js');
$compressor = new MyJsMin($code, array('Hello', 'World'));
echo $compressor->minify();

Le fichier foo.js contient :

function foo(bar)
{
bar += 1;
alert('hello world !');
}

Le résultat sera :

// hello
// world

function foo(bar)
{bar+=1;alert('hello world !');}

Sources

Sources de MyJsMin.
Pour JSMin en PHP, voir le blog de l'auteur.
La page de la version originale de JSMin en C (avec des liens vers d'autres langages)

Test en ligne

Vous pouvez tester les performances du script grace à cette page (en anglais, parceque c'est la classe internationnale).

Position du curseur dans un textarea

cgo2 — Tue, 20 Feb 2007 14:36:00 +0000

Comment détecter, en javascript, la position du curseur dans un textarea ? Comment déplacer le curseur ? Comment récuperer le texte sélectionné, ainsi que les coordonnées de la selection ? Evidemment sous Firefox tout roule, mais pour le navigateur de Microsoft c'est autre chose... Après avoir passé 5 bonnes heures sur Google à lire des solutions aussi farfelue qu'inefficaces (à base de Math.round, de boucles imbriqués, ou de soustraction d'un coeffient alétoire), j'ai fini par chercher ma propre solution. Voici quelques pistes pour soumettre Internet Explorer à votre volonté !

J'ai essayé de faire 5 actions, que je vais décrire dans cet article :

obtenir le texte sélectionné dans un textarea donné ;
obtenir la position du début de la selection du contenu du textarea (en commençant à 0) ;
obtenir la position de la fin de la selection du contenu ;
déplacer le curseur à une position, en précisant éventuellement une position de fin pour créer une selection ;
remplacer le texte sélectionné par un autre.

D'abord, examinons le comportement standard (testé sous Mozilla Firefox >= 1.5).

Chaque textarea sauvegarde sa propre selection.
Chaque textarea contient 2 variables selectionStart et selectionEnd qui contiennent à tout moment les coordonnées de la selection (si rien n'est selectionné, selectionStart est égal à selectionEnd)
Chaque textarea possède une méthode setSelectionRange(start, end) qui permet de créer une selection ou de positionner le curseur (en passant 2 fois la même valeur).
Pour remplacer le texte selectionné, il faut couper le texte en 3 : avant, selection, après, et le remplacer par avant + nouvelle selection + après. Il faut penser à remettre d'indice de scroll afin de conserver la barre de défilement à la même position.

Voyons maintenant le comportement d'Internet Explorer, qui, comme a son habitude, est totalement illogique, incohérent et, disons-le, complètement con.

Internet Explorer ne gère qu'une seule sélection pour toute le document, accessible via document.selection. En conséquence de quoi, il faut toujours penser à faire un focus() sur le textarea à traiter, sans quoi on risque d'avoir des résultats totalement incohérents.
Cependant, il est possible de créer une selection pour chaque textarea. Mais ces selections ne contiendront pas le texte selectionné, elles servent uniquement à déplacer le curseur (!) (j'avais prévenu que c'était complètement con...).
Pour manipuler une selection, il faut créer un objet TextRange, qui permet de faire des tas de choses (y compris des choses documentées comme « opaque » par Microsoft), mais pas de récupèrer la position du curseur.
Il est impossible se spécifier directement la position du curseur.
Il y a une méthode propriétaire pour remplacer la sélection, en mettant à jour l'attribut text de l'objet range (range.text = 'toto').

Voyons maintenant comment dominer IE.

Note : Les fonctions proposées ici sont destinées à être utilisée dans une classe où this représente l'objet textarea. N'hésitez à pas adapter pour votre propre besoin :)

Obtenir la sélection

La fonction suivante permet d'obtenir le texte sélectionné dans un textarea.

getSelection: function ()
{
	if (this.setSelectionRange)
		return this.value.substring(this.selectionStart, this.selectionEnd);
	else if (document.selection) {
		this.focus();
		return document.selection.createRange().text;
	}
}

Obtenir les coordonnées du curseur

Alors là, ça devient rigolo. La solution : récupérer la selection globale, puis la recopier dans une selection locale au textarea. Ensuite, déplacer la fin de la selection le plus possible (la selection locale, contraiement à la selection globale du document, s'arrettera à la fin de texte). Enfin, effectuer une petite soustraction.

getSelectionStart: function()
{
	if ( typeof this.selectionStart != 'undefined' )
		return this.selectionStart;
	
	// IE Support
	this.focus();
	var range = this.createTextRange();
	range.moveToBookmark(document.selection.createRange().getBookmark());
	range.moveEnd('character', this.value.length);
	return this.value.length - range.text.length;
}

Même principe pour la fin.

getSelectionEnd: function()
{
	if ( typeof this.selectionEnd != 'undefined' )
		return this.selectionEnd;

	// IE Support
	this.focus();
	var range = this.createTextRange();
	range.moveToBookmark(document.selection.createRange().getBookmark());
	range.moveStart('character', - this.value.length);
	return range.text.length;
}

Positionner le curseur

Cette fois ci, la technique est de créer une selection vide, de la positionner au bon endroit, de d'utiliser la méthode select() pour la faire apparaitre.

setCaretPos: function(start, end)
{
	end = end || start;
	this.focus();
	if (this.setSelectionRange)
		this.setSelectionRange(start, end);
	else if (document.selection) {
		var range = this.createTextRange();
		range.moveStart('character', start);
		range.moveEnd('character', - this.value.length + end);
		range.select();
	}
}

Remplacer la sélection

Avec toutes ces méthodes cross-browser, la fonction de remplacement est un jeu d'enfant !

J'ai ajouté un paramètre keep indiquant s'il faut garder ou non le texte selectionné après remplacement.

replaceSelection: function (str, keep)
{
	this.focus();
	
	var start = this.getSelectionStart();
	var stop = this.getSelectionEnd();
	var end = start + str.length;
	var scrollPos = this.scrollTop;
		
	this.value = this.value.substring(0, start) + str + this.value.substring(stop);
	if ( keep ) this.setCaretPos(start, end);
	else this.setCaretPos(end);
	this.scrollTop = scrollPos;
}

En esperant que tout ceci vous servira :)

OVH et les sessions

cgo2 — Thu, 15 Feb 2007 12:10:00 +0000

Voila, c'est officiel, je ne supporte plus l'hébergeur français OVH.com. Propriétaire d'un 90plan chez eux (hebergement mutualisé labellisé « pro ») depuis plusieurs mois, je subis à longueur de temps les bugs ou les modifications intempestives de leur plateforme : sous-domaines qui ne fonctionnent pas, ftp capricieux, scripts php mis en cache sans avoir rien demandé, etc. Leur dernière lubie : désactiver la fonction PHP session_save_path (qui permet, rappellons le, de spécifier le dossier dans le lequel sont stockées les sessions), évidemment sans prévenir personne.

Maintenant, les sessions sont stockées dans le repertoire local /tmp du serveur web. Or, OVH utilise une grappe de serveurs web, et on est redirigé vers l'un ou l'autre en fonction de la charge. Une fois qu'un serveur est affecté à une adresse IP, on garde le même pendant un certain temps. Mais quand le serveur change, la session n'est plus accessible et donc l'utilisateur est déconnecté. Le problème est encore pire dans le cas d'entreprises qui utilisent plusieurs adresses IP sortantes (l'adresse peut changer à chaque page) : impossible d'utiliser correctement une session, on est tout le temps déconnecté !

Résultat, il va falloir écrire mon propre gestionnaire de session, qui refait exactement la même chose (et moins rapide que la version native de php), mais au moins je pourrais spécifier le dossier ! J'espère juste qu'ils n'auront pas désactivé cette fonction également...

La transparence en CSS avec Internet Explorer

cgo2 — Sat, 11 Nov 2006 15:26:00 +0000

Ce qui est bien avec Internet Explorer, c'est qu'on ne s'ennuit pas. En fait on pense trop souvent que les développeurs du navigateur du Microsoft sont des incompétents notoires, incapables de lire les spécifications du W3C sans produire 3 bugs par ligne dans leur moteur de rendu. Et bien si ça se trouve, c'est simplement une bande de joyeux drilles très farceurs, qui ont décidé de distraire tous les développeurs web de la planète en rendant leur logiciel totalement imprévisible. Tenez par exemple, la transparence en CSS...

... c'est quelque chose de très basique. La propriété opacity appliquée à n'importe quel élément permet de le rendre transparent. Bon, chez Microsoft, vu qu'on en fait jamais rien comme tout le monde, il faut utiliser une propriété spécifique filter. Mais à la limite, une fois qu'on est prévenu, c'est pas génant. Pour rendre un div transparent, le code CSS devrait donc être :

body {
	background : #369;
}
.monbloc {
	background : #fff;
	opacity : .2;
	filter : alpha(opacity=20);
}

Sauf que ça, ça ne fonctionne pas sous IE ! Vous pouvez vérifier vous même avec cet exemple.

Etonnant non ? Pourtant comme tout le monde j'ai déjà utilisé et vu fonctionner la transparence sous IE ! Alors comment expliquer ce phénomène ? Problème de doctype ? D'encodage du document ?

Et bien en fait, Internet Explore gère la transparence dans 2 cas seulements : l'élément a une position absolue (position:absolute) ou l'élément a une hauteur fixe. J'imagine bien les réunion de brainstorming des équipes de développeurs de Microsoft :

- Bon les gars, faut qu'on implémente la transparence, quelqu'un a une idée ?
- C'est de la touchette la transparence !
- Tiens au lieu de parler fait tourner l'Absolut Vodka ! (bon d'accord elle était facile celle là)
- Au fait René t'as fini de débugger la propriété height : auto ?
- Nan c'est pas trivial !
- T'façon le code est bon !

Alors donc comme la position absolue n'est pas très pratique quand il faut rendre transparent un élément dans le corps de la page, il faut ruser.

Pour IE 6, la propriété height se comporte comme min-height. On peut utiliser le hack suivant :

.monbloc {
	height : 1px;
}
/* pour les autres navigateurs */
* > .monbloc {
	height: auto;
}

Mais IE 7 va interpréter le hack, et donc appliquer un height : auto. Ce qui vaut mieux puisqu'ils ont corrigé le bug de height, et donc si on essaye d'appliquer une hauteur de 1px ça va tout casser. La solution est donc d'utiliser un hack spécial pour IE 7 et d'appliquer un min-height tout nouveau dans cette version du navigateur.

/* pour IE 7 */
*+html .monbloc {
	min-height : 1px;
}

Le code complet devient donc :

body {
	background : #369;
}
.monbloc {
	background : #fff;
	opacity : .2;
	filter : alpha(opacity=20);

/* pour IE 6 */
	height : 1px;
}
/* pour les autres navigateurs */
* > .monbloc {
	height: auto;
}
/* pour IE 7 */
*+html .monbloc {
	min-height : 1px;
}

Vous pouvez regarder ce deuxième exemple.

Une interface de formulaire à base de tableaux dynamiques

cgo2 — Sun, 18 Sep 2005 17:25:00 +0000

Oui, je sais, les tableaux de mise en page c'est mal. Mais quand il s'agit de présenter des données en tableau, par exemple : le prix des carottes en fonction de la vitesse du vent et de l'age du capitaine, alors ils sont indispensables. Je dirais même plus, ça serait une erreur de ne pas les utiliser. Maintenant, imaginons que nous ayons à programmer une interface pour saisir le prix des carottes : comment faire simple, léger, accessible, rapide à développer et agréable à utiliser ? L'idéal serait de se rapprocher du fonctionnement d'un tableur : pouvoir ajouter, supprimer ou éditer des lignes, et sauvegarder le document à la fin. Et bien en interface web, c'est possible grace à Javascript et DOM (et un peu de PHP pour le traitement).

Première étape : construire la page

Tout d'abord, il faut faire la page web. Pour cela, on utilise du XHTML tout à fait classique, et on construit un tableau. Je vous invite à lire l'article Habillage de tableaux avec des CSS sur Openweb pour en savoir plus sur la manière de faire un tableau conforme aux standards.

Le tableau que j'ai choisi de dessiner est on-ne-peut-plus simple : il contient 4 colonnes contenants chacunes un champ de type "text", et une dernière colonnes contenant les actions possibles. Pour l'instant, la seule action possible est la suppression d'une ligne.

Le code donne (vous pouvez consulter l'exemple 1) :

<table class="dTable">
	<thead>
		<tr>
			<th>Colonne 1</th>
			<th>Colonne 2</th>
			<th>Colonne 3</th>
			<th>Colonne 4</th>
			<th>Actions</th>
		</tr>
	</thead>
	
	<tfoot>
		<tr>
			<th colspan="5"><a href="http://www.the-asw.com/post/2005/09/18/#">Ajouter une ligne</a></th>
		</tr>
	</tfoot>
	
	<tbody>
		
		<tr>
			<td><input type="text" name="champ1[]" /></td>
			<td><input type="text" name="champ2[]" /></td>
			<td><input type="text" name="champ3[]" /></td>
			<td><input type="text" name="champ4[]" /></td>
			<td><a href="http://www.the-asw.com/post/2005/09/18/#">Supp</a></td>
		</tr>
		
	</tbody>
</table>

Les liens ont tous pour trajet (href) la valeur #. Cela revient à dire qu'ils n'ont pas d'effet... pour l'instant. J'ai appliqué la classe dTable au tableau (comme « Dynamic Table ») afin de pouvoir l'identifier parmis d'autres eventuels tableaux, qui, eux, ne seront pas dynamiques. Enfin, dernier détails, les champs input ont tous un nom finissant par []. Nous verrons dans la troisième partie à quoi ça va servir.

Deuxième étape : rendre le tableau dynamique

Maintenant on rentre dans le vif du sujet. Pour rendre ce tableau dynamique, on va utiliser du Javascript et du DOM, en s'arrageant pour qu'il soit compatible Internet Explorer et Firefox.

Première chose : inclure un script. Pour cela, on rajoute dans le header de la page html la ligne suivante (avec dtable.js le nom du fichier script) :

<script type="text/javascript" src="http://www.the-asw.com/post/2005/09/18/dtable.js"></script>

Bien ensuite, un peu de conception... Comment allons nous procéder ?

Ajout

Pour ajouter une ligne, le plus simple est d'utiliser la méthode DOM cloneNode() qui permet de dupliquer un noeud (par exemple un tr, donc une ligne du tableau) et appendChild() qui permet d'ajouter un noeud à un autre (par exemple le tr cloné au tbody, donc au corps du tableau). Cette méthode est très simple à condition d'avoir une ligne « de référence », c'est à dire une ligne vide que l'on pourra cloner pour simuler l'ajout de ligne. La première ligne du tableau (la seule que j'ai saisis dans le code html ci-dessus) fera office de référence.

Nous allons faire une fonction addLigne qui prend en paramètre l'élément appellant (en l'occurence il s'agira d'un lien, donc d'un element A). A partir du lien, il faudra retrouver le tableau en « remontant » dans l'arbre html à la recherche du parent s'appelant TABLE. A partir du tableau, on pourra retrouver le TBODY et la première ligne, et effectuer l'ajout.

Pour retrouver le parent d'un élément, j'utilise une fonction récursive, getParent(element, parentTagName), dont voici l'implémentation :

/* trouve le tag "parentTagName" parent de "element" */
function getParent(element, parentTagName) {
	if ( ! element )
		return null;
	else if ( element.nodeType == 1 && element.tagName.toLowerCase() == parentTagName.toLowerCase() )
		return element;
	else
		return getParent(element.parentNode, parentTagName);
}

Le code pour ajouter une ligne devient :

/* ajoute une ligne */
function addLigne(link) {
	// 1. récuperer le node "TABLE" à manipuler
	var td = link.parentNode;
	var table = getParent(td,'TABLE');
	
	// 2. on va manipuler le TBODY
	var tbody = table.tBodies[0];
	
	// 3. on clone la ligne de reference
	var newTr = tbody.rows[0].cloneNode(true);
	tbody.appendChild(newTr);
}

Pour appeller cette fonction, on peut transformer le lien « Ajouter une ligne » comme ceci :

<a href="http://www.the-asw.com/post/2005/09/18/#" onclick="addLigne(this); return false;">

Le return false; permet de stopper le traitement normal du lien et donc de ne pas executer le href.

Suppression

Là encore, une fonction DOM nous mache tout le travail : removeChild(). Il suffit de trouver le TR à supprimer en remontant l'arbre html depuis le lien appellant, et de le retirer du TBODY

/* supprimer une ligne */
function delLigne(link) {
	// 1. récuperer le node "TABLE" à manipuler
	var td = link.parentNode;
	var table = getParent(td, 'TABLE');
	
	// 2. récuperer le TBODY
	var tbody = table.tBodies[0];
	
	// 3. Supprimer le TR
	tbody.removeChild(getParent(td, 'TR'));
}

Pareil que pour l'ajout, on peut transformer les liens « Supp » comme ceci :

<a href="http://www.the-asw.com/post/2005/09/18/#" onclick="delLigne(this); return false;">

L'ajout et la suppression donnent l'exemple 2.

Protéger la première ligne

Le problème de l'exemple 2, que vous avez peut-être remarqué en testant, est que la première ligne, la ligne de référence donc, est supprimable comme les autres. Et lorsqu'on supprime tous les lignes, il n'y en a plus aucune à cloner ! On va donc masquer la première ligne avec la propriété CSS display="none" et en ajoute une vide supplémentaire.

On ajoute au code :

window.onload = dtableInit;

/* initialise le script */
function dtableInit() {
	var table = document.getElementsByTagName('TABLE');
	for ( var i = 0; i < table.length; i++ ) {
		// on récupère tous les tableaux dynamiques
		if ( table[i].className == 'dTable' ) {
			
			var tbody = table[i].tBodies[0];
			var newTr = tbody.rows[0].cloneNode(true);
			
			// on masque la première ligne du tbody (la ligne de reference)
			tbody.rows[0].style.display = 'none';
			
			// on en ajoute une
			tbody.appendChild(newTr);
			
		}
	}
}

Un dernier problème subsiste : lorsqu'on clone cette ligne, son style est cloné également. Toutes les lignes sont donc invisibles ! Il faut ajouter à la fin de addLigne de quoi les remettres visibles :

	if ( document.all )
		newTr.style.display = "block"; // pour IE
	else
		newTr.style.display = "table-row"; // pour Gecko

L'utilisation de document.all permet de détecter s'il s'agit d'IE ou pas. En effet, seul ce navigateur implémente cette propriété (non-standard).

Vous pouvez tester ce code dans l'exemple 3.

Troisième étape : traiter les données

Grace à leur nom finissant par [], les valeurs des champs input seront assemblées dans un tableau lors du post du formulaire. Résultat : on se retrouve avec 4 tableaux : champ1, champ2, champ3 et champ4 correspondants aux 4 colonnes du tableaux html. Les lignes de ces tableaux correspondent aux lignes du tableau html (en commençant par 0).

Imaginons qu'il faille mettre à jour une base, le plus rapide est de tout supprimer puis de réinsérer les données directement ! Pas besoin de s'embêter à trouver ce qui a changé puisque tout est renvoyé.

Dernière chose : au moment de traiter ces données, il ne faut pas oublier d'oublier l'index 0, qui correspond à la ligne de référence.

Vous pouvez tester le résultat renvoyé par le serveur grace à l'exemple 4.

Conclusion

Rajouter des fonctions à ce script est extrement simple : il suffit de veiller à ne pas toucher à la première ligne. On peut par exemple imaginer des fonctions permettant de monter une ligne, de la descendre, de la dupliquer, etc. Bref, les possibilités de créer des interfaces web se rapprochant de celles des clients lourds sont de plus en plus nombreuses et de plus en plus simples à mettre en oeuvre grace notamment aux standards du W3C !

Centrer un float en CSS

cgo2 — Tue, 23 Aug 2005 21:32:00 +0000

Une zone - la galerie - doit être constituée de un ou plusieurs éléments - les boites - centrés à l'interieur et sur une seule ligne. En HTML « à la papy » c'est très facile à faire : la galerie est une cellule d'un tableau avec la propriété align="center", et le contenu est un tableau d'une seule ligne dont le nombre de cellules varie de 1 à 5 (le nombre maximum de boites pour tenir sur une seule ligne). Mais comment faire ça en CSS ?

Problématique

L'effet recherché ressemble à ça :

Ma première idée, pour placer les boîtes est d'utiliser le positionnement float avec un hr et la propriété clear : both; comme expliqué dans ce très bon article sur OpenWeb.

Au niveau code ça donne :

<div class="galerie">
	<div class="boîte">boîte 1</div>
	<div class="boîte">boîte 2</div>
	<div class="boîte">boîte 3</div>
	<div class="boîte">boîte 4</div>
	<div class="boîte">boîte 5</div>
	
	<hr class="clear" />
</div>

Appliquons le style suivant :

.galerie {
	background : #ccc;
	width : 360px; /* (50 + (5 * 2) + 10) * 5 + 10 */
}
.boîte {
	background : #69c;
	
	float : left;
	margin : 10px 0 10px 10px;
	padding : 5px;
	width : 50px;
	
	text-align : center;
}
.clear {
	clear : both;
	visibility : hidden;
}

Ça donne :

Avec 3 boîtes uniquement :

Vous pouvez tester ce premier exemple.

Le positionnement est celui recherché lorsque toutes les boîtes sont présentes, mais, malheureusement, dès qu'il manque des boîtes, celles restantes sont calées à gauche. C'est tout à fait logique puisqu'elles sont flottantes à gauche, mais ce n'est pas ce que nous voulons !

Un deuxième conteneur pour le centrage

Au départ, j'ai simplement essayé quelques techniques de centrage css appliquées sur les fiches ou sur le conteneur. Mais rien de tout ça ne fonctionne.

Le problème est qu'on ne peut pas centrer un flottant, à cause de sa conception même. Comme écrit très justement dans l'article d'Openweb : Une boîte flottante est retirée du flux normal, et placée le plus à droite (float: right) ou le plus à gauche (float: left) possible dans son conteneur. Il est donc logique que les techniques de centrage ne puisse pas s'appliquer (centrer par rapport à quoi, puisque la boîte est retirée du flux ?).

Par contre, un élément non-flottant peut, lui, être centré (par exemple avec la technique des marges auto). Imaginons que l'on crée un autre conteneur, qui soit centré par rapport au premier (la galerie), et qui contienne les fiches...

Au niveau code ça donne :

<div class="galerie">
	<div class="conteneur">
		<div class="boîte">boîte 1</div>
		<div class="boîte">boîte 2</div>
		<div class="boîte">boîte 3</div>
		<div class="boîte">boîte 4</div>
		<div class="boîte">boîte 5</div>
		
		<hr class="clear" />
	</div>
</div>

On applique le même style que précédemment. Mais il faut rajouter de quoi centrer le conteneur :

.galerie {
	text-align : center; /* uniquement pour IE */
}
.conteneur {
	margin : 0 auto;
}

Là se pose un problème - LE problème devrais-je dire - : pour que ça fonctionne il faut que le conteneur enveloppe parfaitement les boîtes, et donc soit exactement à la bonne taille. La formule donnant la taille est facile à trouver :

taille = nombre de boîtes * ( width + padding + margin-left ) + margin-right

Mais je n'ai strictement aucune idée de comment faire ça en CSS. C'est théoriquement possible de le fixer dans un style inline (dans la page) appliqué au moment où le script qui génére la page affiche les boîtes. Une autre solution est d'utiliser DOM pour manipuler en Javascript les styles de la page.

Implémentation en Javascript/DOM

Le script doit se charger de calculer la taille en fonction du nombre d'éléments contenus. Pour ça il faut :

Trouver le conteneur à agrandir ; on utilisera la méthode getElementsById
Compter le nombre de boîtes contenues :
- Trouver les éléments div avec la méthode getElementsByTagName
- Eliminer ceux qui ne sont pas directement fils du conteneur (si les boîtes contiennent d'autres divs par exemple
Calculer la taille et agrandir le conteneur

Mon implémentation (qui n'est sûrement pas optimale) :

<script type="text/javascript">
 // <![CDATA[
function setContainerSize(truc) {
	var navroot = document.getElementById(truc);
	if ( navroot ) {
		var lis = navroot.getElementsByTagName("div");
		/* XXX : y a-t-il un moyen plus simple de ne détecter que les divs de rang 1 ?
		 *       ou, détecter selon une classe ? */
		var ok = 0; var nok = 0;
		for ( i = 0; i < lis.length; i++ ) {
			if ( lis[i].parentNode != navroot )
				nok++;
			else 
				ok++;
		}
		navroot.style.width = ok * 70 + 10 + 'px';
	}
}
 // ]]>
</script>

Maintenant, pour utiliser cette fonction, on effectue les modifications suivantes :

<body onload="setContainerSize('c1');">
...
<div class="conteneur" id="c1">

Ça donne :

Vous pouvez consulter cet exemple.

Limites et pistes de reflexions

Cette méthode a été testée avec succès sur IE 6, Firefox 1.x, Safari 1.3 et Camino 0.9.

Une limitation principale de cette méthode est l'impossibilité de centrer sur plusieurs lignes. Par exemple, si la première ligne contient 5 boîtes et la deuxième 2, les 2 seront calées à gauche. Je n'ai pas vraiment cherché comment résoudre ce problème, car ça n'était pas mon besoin.

L'autre amélioration possible concerne l'implémentation du script, et notamment la façon de compter les éléments div qui n'est sûrement pas optimale. Il serait également intéressant de pouvoir ne pas coder en dur les tailles des div dans le script, de manière à avoir du code réutilisable. Mais là ça dépasse mes connaissance en DOM :)

Enfin, étant donné que le centrage se fait par un script, les boîtes ne sont pas centrées tant que la page n'est pas complètement chargée. Dans certains cas ça provoque un petit décalage à l'écran le temps que le chargement se termine...

Quelques liens supplémentaires

Merci à Scara, MrGecko et tout le chan #asw pour la relecture ;)

Les webmails

cgo2 — Sun, 20 Apr 2003 20:31:00 +0000

Les webmails sont très utilisés par de nombreux FAI qui est les proposent à leurs clients, mais aussi et surtout par les services gratuits de mails du genre Caramail ou Multimania, qui les imposent souvent comme seul moyen de consulter les messages, et c'est regrettable.

Les webmails sont des scripts qui font office d'interface avec le serveur de mail. Bien que peu sûr - voire carrement risquée à cause de diverses failles de sécurité, la visualisation des messages via une interface webmail peut être très pratique pour un utilisateur en voyage, dans un cyber café ou chez un pote, qui n'a donc pas son client mail configuré. Comme visualisateur de secours, ils sont donc utiles.

Mais les webmails sont pour la plupart codés sans aucun respect des RFC concernant les messages. Ils sont souvent incapables de remplir correctement les "headers" pour les listes de diffusion, ce qui casse les thread et detruit l'archivage automatique. Ils ajoutent pratiquement toujours de la publicité non sollicitée dans le mail. Ils génères des mails au format HTML, lourd, inutile et illisible par les clients mails corrects qui permettent de desactiver l'interpretation. Bref NE LES UTILISEZ PAS POUR ENVOYER DES MESSAGES !

Si vous tenez absolument à utiliser une adresse email de ce type (hotmail, caramail, mutlimania...) il existe plusieurs solutions pour esquiver le démon webmail...

Outlook Express 6 propose une prise en charge (en version béta) de vos adresse emails hotmail, msn et autres services microsoft. Lorsque vous créé le compte avec une telle adresse, il va la detecter et vous guider à travers la configuration. Bien que plutôt lourd et incomplet, ce support permet de lire, répondre, deplacer et supprimer ses mails avec un client (presque) normal.

Multimania propose un service de forward, c'est à dire de redirection automatique des mails vers une autre boite. Ce systeme permet de conserver une adresse multimania tout en utilisant celle de votre fai pour répondre.

Enfin sachez que même si certains services vous forcent à utiliser leur webmail pour consulter votre boite de reception, il est toujours possible de configurer votre client mail pour envoyer des messages avec votre adresse caramail, lycos, ou autre. Utilisez pour cela le serveur SMTP de votre FAI, et indiquez l'adresse que vous voulez dans le champ From.

Et pour forcer les gens à vous répondre sur une vrai adresse, utilisez le champ Reply-to: (sur Outlook express il est configurable via Outils->Comptes->Propriétés->Adresse de réponse) que vous pouvez positionner à n'importe qu'elle adresse. C'est celle ci qui sera utilisé pour vous répondre.

Outlook Express et les mails standards

cgo2 — Sun, 20 Apr 2003 20:13:00 +0000

Les standards du web ne se limitent pas à la programmation des sites web. Les mails représentent une partie importante d'Internet, et malheureusement, comme le reste, les règles de bonnes conduites et de savoir vivre ont été largement corrompus par des éditeurs de logiciels peut scrupuleux qui fournissent des clients mails ne respectant pas les standards. Pour une fois, Microsoft n'est pas le pire, puisqu'avec quelques efforts on peut reussir à le configurer Outlook Express pour qu'il se comporte (presque) correctement.

Voici comment configurer son client mail pour qu'il respecte un peu la Netiquette ! Cet article est basé sur Outlook Express mais le principe reste valable pour d'autres client.

Format des messages

La grande mode est aux mails au format HTML. Les gens sont contents de pouvoir mettre du gras, du soulignés et des textes en gros dans leur message. Or il faut savoir que c'est, la plupart du temps, un petit bien pour beaucoup de mal. En effet, les mails en HTML sont beaucoup plus lourds que leur équivalent en mode texte, à cause des balises nécessaires à coder le mail d'un part, et surtout à cause du fait que dans 90% des cas il faut également envoyer une version texte brute en plus (avec le principe du multipart), ce qui double la taille. Evidemment, avec les connexions haut-débit, tout ça, qu'est-ce que c'est que 10ko ou 20ko de plus ? Mais multipliez ça par le nombre de mails envoyés par jour et par internaute, et vous comprendrez...

Et là, je ne parle même des problèmes d'interopérabilité (difficulté de traiter les mails automatiquement, illisibles sur certains clients mails unix), et des problèmes de sécurité : les mais en HTML sont sources de virus, et de spyware (rien de plus facile que de faire charger une image située sur un site distants, qui pourra de ce fait collecter des informations personnelles).

Bref c'est du grand n'importe quoi, alors on va gentiment expliquer à Outlook Express que c'est mal.

Allons dans Outils -> Options, puis dans sur l'onglet "Envois" choisir "Texte brut" comme format d'envoi du courier et des news. Voila déjà une bonne chose de faite.

Mais OE est vicieux et il va chercher à remettre le HTML, notamment lors d'un copier/coller dans un message en cours de rédaction (ça se voit dès que le style est différent). Pour remettre le message en texte brut, choisir "Texte enrichi" dans Format puis remettre "Texte brut". Et toc.

Quelques astuces pour mettre en forme votre message

Puisqu'on ne peut pas utiliser de html, voici quelques conventions qui sont considérées comme standards, et interprétées par certains client mail comme Mozilla Thunderbird, ou clients irc comme irssi.

Conventions de mise en forme
Vous voulez...	Vous ecrivez...
Gras (emphase forte)	Je suis très enervé
Souligné (emphase faible)	C'est _très important_

Accusés de reception

Comme expliqué dans la Netiquette :

Les accusés de réception, les notes de non-délivrance et les programmes de vacance ne sont ni totalement standardisés, ni totalement fiables à travers l'ensemble des systèmes connectés au courrier Internet. Ils sont envahissants lorsqu'envoyés à des listes de distribution et certaines personnes considèrent les accusés de réception comme une atteinte à la vie privée. Bref ! ne les utilisez pas.

Sachez que quelqu'un qui ne lit pas ses mails avec OE ne renverra pas d'accusé de reception, et pourtant il aura bien lu le mail...

Désactivons donc tout ce bazard... Dans Outils -> Options, puis l'onglet "Confirmations de lecture", décocher "Demander une confirmation de lecture pour tous les messages envoyés" et choisir "Ne jamais envoyer de confirmation de lecture". Na !

Les quotes (citations)

Le principal défaut de OE est qu'il cite les messages n'importe comment lors d'un reply ou d'un forward. Pour en savoir plus sur la manière de citer proprement un message, vous pouvez lire L'art et la manière de répondre.

Si vous n'êtes toujours pas convaincu après lecture de cette page, essayez, avec OE, de répondre correctement à ce message :

Salut Machin,

Dans le cadre du projet Bidule, j'aurais besoin de quelques informations. Pourrais-tu me faire rapidement un retour sur les points suivants :

Concernant le truc, quel est la quantité necessaire ?

Quelles sont les spécifications du bidule ?

Que fait-on pour Machin-chouette ?

As-tu une réponse de Truc-muche ?

Merci

Vous m'en direz des nouvelles :)

Pour apprendre à OE à quoter correctement, il existe un tout petit logiciel : OE-QuoteFix qui se lance en même temps que Outlook Express et lui corrige ses quotes en temps reel.

Exemple : sans OE-QuoteFix

----- Original Message ----- 
From: "MAchin" <truc@bidul.com>
To: "Chose" <chose@truc.com>
Sent: Sunday, April 20, 2003 9:06 PM
Subject: Salut

Salut !

Avec OE-QuoteFix :

Le Sunday, April 20, 2003 9:06 PM, Machin <truc@bidul.com> a écrit :
> Salut !

Et encore, ce n'est qu'un exemple car ce soft est entierement configurable. Son principal avantage est qu'il peut-être activé ou desactivé à tout moment et que son installation de modifie pas les fichiers de OE. Bref c'est indispensable, et le site officiel est ici (à noter qu'il existe une version pour Outlook).

Et voila avec ces modifications, OE se comportera presque comme un bon client mail !