Archive

Articles taggués ‘Astuce’

Standards XHTML strict et prises de tête (cachez ces espaces que nous ne saurions voir)

21/11/2009 Aucun commentaire

Les standards ont du bon. Malgré tout, parfois, ils apportent leurs lots de petits problèmes sur lesquels on peut passer quelques heures en s’arrachant les cheveux (et il m’en reste si peu…)

Dernier exemple en date, ce sont 2 ou 3 mystérieux pixels qui apparaissent sous les balises images (img) lorsqu’on utilise le standard XHTML Strict. Pour illustrer le phénomène, prenons ce cas assez classique de montage d’image découpée en plusieurs tranches assemblées dans un tableau.

?View Code HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>New Web Project</title>
    </head>
    <body>
        <table width="200" border="0" cellspacing="0" cellpadding="0">
            <tr>
                <td><img src="img/P1010478_01.jpg" alt="" /></td>
            </tr>
            <tr>
                <td><img src="img/P1010478_02.jpg" alt="" /></td>
            </tr>
        </table>
    </body>
</html>

Ce qui donne comme résultat (sous Firefox) :

Exemple de rendu des images en XHTML Strict

Les block images « poussent » leurs conteneurs (en l’occurrence la cellule de tableau) de quelques pixel en bas. Ca n’a évidement rien de très esthétique et ça n’est pas le résultat attendu.

Donc, à moins de changer la déclaration du type de document HTML, il va falloir ruser.

Pour contourner ce problème, il faudra définir l’affichage de vos images en mode « block » dans votre CSS. Vous pouvez le faire de plusieurs façons :

  • Systématiquement dans une déclaration CSS globale de vos balises img, l’inconvénient étant que celles-ci produiront un retour à la ligne (dans ce cas, il faudra les définir localement en mode float afin d’éviter ces retours).
  • En déclarant localement un style dans vos balises img de type style="display:block;".
  • En créant une classe spécifique que vous affecterez aux images nécessitant l’ajustement.

Cette dernière solution peut donner au final :

?View Code HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>New Web Project</title>
		<style type="text/css" media="screen">
			.block {
				display:block;
			}
		</style>
    </head>
    <body>
        <table width="200" border="0" cellspacing="0" cellpadding="0">
            <tr>
                <td><img src="img/P1010478_01.jpg" alt="" class="block" /></td>
            </tr>
            <tr>
                <td><img src="img/P1010478_02.jpg" alt="" class="block" /></td>
            </tr>
        </table>
    </body>
</html>

Et voila le rendu enfin correct :

Rendu des images correct en XHTML Strict (le beau papillon !)

Allez, à nous les montages de fou en XHTML Strict :)

Categories: Divers Tags: , , , ,

Activer l’auto-complétion dans Eclipse/Aptana pour les projets CakePHP

25/07/2009 Aucun commentaire

CakePHP

Un article intéressant vient d’être publié sur The Bakery. Il décrit une astuce permettant de tirer parti des fonctionnalité d’auto-complétion de Eclipse/Aptana pour le développement de projets CakePHP (pour les modèles et les helpers notamment).

Ca n’est pas aussi simple qu’avec un projet Yii Framework (il n’y a rien à faire), mais ça a le mérite de fonctionner ;)

Categories: Outils de développement, PHP Tags: , , , , ,

Nouveau tutorial Yii : Astuce autour des contrôleurs

11/06/2009 Aucun commentaire

Yii Framework

On continu le tour des astuces pour Yii Framework avec un petit tuto qui montre comment mutualiser certains comportements et paramètres entre tous les contrôleurs d’une même application.

Bonne lecture.

Categories: PHP Tags: , , ,

Nouveau tutorial Yii – Comment utiliser le « profiling » ?

21/05/2009 Aucun commentaire

Yii Framework

Un petit tuto Yii qui montre comment utiliser les fonctions de « profiling » permettant d’améliorer les performances d’une application est disponible ici. Vos remarques et commentaires sont les bienvenus.

Bonne lecture :)

Categories: PHP Tags: , , , ,

Vérifier les modifications de formulaires avec jQuery

15/03/2009 Aucun commentaire

Vous souhaitez alerter vos utilisateurs s’ils ont modifié le contenu d’un formulaire et qu’ils s’apprêtent à quitter la page par l’intermédiaire d’un lien sans avoir validé ?

Un petit javascript permet de facilement accomplir cela.

?View Code JAVASCRIPT
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

jQuery(document).ready(function() {
	$(window).attr("isDirty", false);
	$(":input").bind("change", function(event) {
				if (event.target.value != event.target.defaultValue) {
					$(window).attr("isDirty", true);
				}
			});
	$(":checkbox,:radio").bind("click", function(event) {
				if (event.target.checked != event.target.defaultChecked) {
					$(window).attr("isDirty", true);
				}
			});
	$("a, button").bind("click", function(event) {
		if (window.isDirty) {
			return confirm("Etes-vous sûre de vouloir quitter cette page sans enregistrer ?");
		}
	});
}

L’astuce consiste à créer un attribut isDirty attaché à la page et à en changer l’état dès qu’une valeur de champ a été modifiée. Au chargement de la page, on attache des listeners aux champs, checkbox et boutons radio qui vont scruter leurs éventuelles modifications. Lorsque l’utilisateur clique sur un lien, on vérifie juste la valeur de cet état pour déclencher une demande de confirmation le cas échéant (qui dans le cas négatif, interrompt l’événement de changement de page).

On peut facilement adapter ce code à Prototype ou à MooTools afin de réaliser la même chose avec ses librairies.

Categories: Javascript Tags: , , ,

Accéder à l’aide de Flash CS4 en local

22/02/2009 3 commentaires

Dans Flash CS4, l’aide n’est plus intégrée dans l’application. Quand on clique sur F1, on ouvre le navigateur et on se connecte à l’aide en ligne. C’est pas très pratique quand on n’est pas connecté. Heureusement, il y à une petite astuce qui permet d’accéder à l’aide en local.
J’ai fait une petite vidéo qui explique comment procéder.

Lire la suite…

Categories: Adobe Flash Tags: , ,

Tester Google Maps en local : c’est possible

10/02/2009 2 commentaires

Les idées reçues ont la vie dure. J’ai toujours été persuadé qu’il n’était pas possible d’utiliser les API Google et Google Maps en particulier autrement que sur un serveur de production possédant un nom de domaine valide.

Et bien, ça n’est pas vrai du tout. En réalité, on peut parfaitement effectuer une demande de clé en saisissant un nom de domaine comme http://localhost/. Et ça fonctionne.

Je sais que certains d’entre vous connaissaient déjà l’astuce. Moi pas. Et sans doute reste-t-il encore quelques développeurs dans l’ignorance. Bref, comme on dit, on en apprend tous les jours :)

Categories: Javascript Tags: , , ,
Performance Optimization WordPress Plugins by W3 EDGE

Switch to our mobile site