Benchmarkez vos sites web

Quand on crée de gros sites internet qui se rapprochent plus d'une application web, il ne faut pas oublier de savoir comment va réagir votre application à la montée en charge, ça permet entre autre de dimensionner les serveurs... Parce qu'on a beau essayer d'optimiser, ce n'est pas suffisant. C'est aussi utile pour savoir si vos optimisations ont un effet (positif ou négatif). Bref, testez la montée en charge de vos sites !

Mais comment faire ? Utiliser la commande ab ? Faire du wget en boucle ? Vous pouvez essayer mais le résultat risque de ne pas être très concluant.

J'ai découvert assez récemment 2 outils (très proches car codés par la même personne) de benchmarking de site.

Le premier est pylot. Il est plus facile à prendre en main mais est moins évolutif.

Le second, Multi-Mechanize, est plus un framework. Il faut comprendre par là qu'il va falloir coder vos propres séries de test.

Ces deux outils sont très complet. Vous pouvez par exemple faire des recherches sur votre site, identifier la …

Compatibilité entre IE5, IE6, IE7, IE8 : LA solution

Beaucoup de développeur web se prennent souvent la tête avec internet explorer 5, internet explorer 6, internet explorer 7 et même, la toute nouvelle monture de Microsoft, je cite internet explorer 8.

Je me suis moi même cassé les dents plusieurs fois sur l'incompatibilité d'un simple code entre toutes ces versions d'internet explorer... Toute fois il existe une solution pour contourner ce problème...

Les commentaires conditionnels ! En effet avec les commentaires conditionnels nous allons pouvoir changer la feuille de style css en fonction de la version du navigateur et pour cela, rien de bien compliquer, voyez plutôt :

<div>
<!--[if IE]>Vous utilisez Internet Explorer<![endif]-->
<!--[if !IE]-->Vous n utilisez pas Internet Explorer<!--[endif]-->
<!--[if IE 8]>Vous utilisez Internet Explorer 8<![endif]-->
<!--[if !(IE 8)]>Vous n utilisez pas Internet Explorer 8<![endif]-->
<!--[if gte IE 7]>Vous utilisez Internet Explorer 7 ou plus<![endif]-->
<!--[if IE 6]>Vous utilisez Internet Explorer 6<![endif]-->
<!--[if (IE 5)]>Vous utilisez Internet Explorer 5 (Toutes versions confondus)<![endif]-->
<!--[if (gte IE …

Avoir un footer toujours en bas de page

Nombreux sont ceux qui se prennent la tête en positionnant leur footer. Selon la hauteur de votre page mais aussi de votre fenêtre votre footer ne se place pas toujours en bas de votre page.

Sachez qu'il existe une solution pour toujours placer votre footer en bas de page qui fonctionne très bien avec TOUS les navigateurs : CSS STICKY FOOTER

La structure HTML de base :

<div id=`wrap`>
    <div id=`header`>
    </div>

    <div id=`main` class=`clearfix`>
    </div>
</div>

<div id=`footer`>
</div>
</pre>
**Le style CSS à appliquer :**
<pre lang=`css`>html, body, #wrap {
    height: 100%;
}

body &gt; #wrap {
    height: auto;
    min-height: 100%;
}

#main {
    padding-bottom: 150px;  /* MÊME TAILLE QUE LA HAUTEUR DU FOOTER !! */
}

#footer {
    position: relative;
    margin-top: -150px; /* VALEUR NEGATIVE DE LA HAUTEUR DU FOOTER */
    height: 150px;
    clear:both;
}

Et voilà ce n'est pas plus compliqué que ça. Je vous invite à remplir votre page de contenu est de tester en redimensionnant votre page en hauteur vous verrez alors que votre footer sera …

IE 6, Une solution pour la transparence sur les PNG

Malheureusement Internet Explorer 6 ne gère pas la transparence sur les images de type PNG... Assez embêtant me diriez vous ?

Sachez qu'il existe une nouvelle solution pour régler ce problème :

DD belated PNG (Site Officiel ) permet donc de résoudre le problème de transparence de façon très simple via l'utilisation d'un script .js(...)

Télécharger le script PNG FIX

Rendez vous à l'adresse suivante pour obtenir la dernière version : Telecharger DD_belatedPNG

Insertion du script dans votre code

Très simple, il vous suffit d'ajouter les lignes suivante dans votre balise <head></head>

<script src="DD_belatedPNG_0.0.8a.js"><!--mce:0--></script>
<script type="text/javascript"><!--mce:1--></script>

Utilisation sur une image transparente

Une fois DD_belatedPNG intégré dans votre code, il ne vous reste plus qu'à ajouter la class png_bg sur vos images pour avoir la transparence. Exemple :

<img class="png_bg" src="mon-image-transparente.png" alt="mon image">

Notez toute fois que dans la cas d'un utilisation pour un background-image le procédé est le même, appliquez la class png_bg à votre div.

Exemple :

<div …