Il n’y a rien de plus horripilant que d’attendre que des publicités chargent pour accéder au contenu d’un article. C’est malheureusement une situation que l’on rencontre fréquemment. La faute en incombe au fonctionnement des blocs AdSense des publicitaires.

En effet, ils nécessitent que nous insérerions le code correspondant à un bloc à l’endroit où il sera affiché. Cela pour deux raisons notamment :

1. Des variables globales identifiants l’annonce sont déclarées.
2. Le script qui va charger l’annonce est immédiatement exécuté et fait appel à des actions d’écriture dans le flux via write.

Le deuxième point oblige le navigateur à traiter le code de l’adsense dès qu’il le rencontre puisque ce dernier n’utilise pas de gestionnaire de chargement. En plus d’écrire dans le flux courant, le système du publicitaire va charger des éléments extérieurs. Pour peu que la latence des réponses soit élevée, l’impression de ralentissement du chargement de la page augmente.

S’est ainsi que si un article est précédé d’un encart publicitaire, l’utilisateur devra patiemment attendre le chargement de ce dernier avant de pouvoir accéder au contenu désiré.
L’expérience utilisateur s’en trouve dégradée.

En finir avec les ralentissements de chargement des pages

Vous l’aurez peut-être remarqué, mais sur piouPiouM’s dev, le chargement des blocs publicitaires est comme temporisé, ne gênant ainsi en rien la navigation sur le site.
Voyons dans la suite du billet comment y parvenir, en prenant pour exemple le service Google Adsense.

Intégration dans une maquette

On commence par définir les emplacements des encarts publicitaires. Cela vous permet ainsi d’intégrer les annonces dans vos maquettes HTML, tout en vous assurant que cette apparence sera conservée pour les utilisateurs n’ayant pas JavaScript d’activé, ou qui bloquent les annonces publicitaires.
Je prend ici le parti d’annoncer la couleur, en précisant la mention Publicité.

1
2
3

<div id="ads-[ads_id]" class="ads [ads_format]">
    Publicité
</div>

En sommes, il s’agit d’un simple élément <div> ayant pour attributs :

• un identifiant [ads_id] : un identifiant unique qui va servir de point d’ancrage au contenu de l’adsense. Vous pouvez par exemple, dans le cas de Google Adsense, utiliser le nom du critère personnalisé en notation CamelCase.
• une classe ads : le style des encarts de pub lorsque celles-ci sont en attente de chargement.
• une classe [ads_format] : le format de l’encart publicitaire. Par exemple, square250 pour une annonce de 250px de côtés ou encore banner468 pour une bannière au format 468 x 60.

Appliquez les styles CSS qui suivent.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

/* @group Tools */
 
.hide {
  display: none;
}
 
/* @end   Tools */
/* @group Adsense */
 
.ads {
  background-color: #F4F4F4;
  color: #666666;
  font-size: 11px;
  text-align: center;
  text-transform: uppercase;
}
.square250 {
  height: 250px;
  line-height: 250px;
  width: 250px;
}
.banner468 {
  height: 60px;
  line-height: 60px;
  width: 468px;
}
 
/* @end   Adsense */

Insertion du code de l’annonceur

Insérez en fin de page les différents codes donnés par votre annonceur (ici, Google Adsense).

1
2
3
4
5
6
7
8
9
10
11
12

<div class="hide">
    <!-- Ads -->
    <div id="adsref-[ads_id]">
        <script type="text/javascript">
google_ad_client = "pub-[client_id]";
google_ad_slot   = "[slot_id]";
google_ad_width  = 250;
google_ad_height = 250;
        </script>
        <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>
    </div>
</div>

Chaque annonce est incluse dans un élément ayant pour identifiant adsref-[ads_id] (voir Intégration de la maquette) qui fait le lien avec l’emplacement final de la publicité.

Le tout étant masqué à l’aide d’un div.hide. Il serait en effet désagréable d’afficher les annonces publicitaires en bas de page, même si ce n’est que pour une poignée de [micro]secondes.

Un Adsense Loader avec jQuery

Il ne reste plus qu’à déplacer à l’aide de JavaScript les blocs AdSense aux endroits souhaités. Avec jQuery cela donne :

1
2
3
4
5
6
7

$(function() {
    var $ads;
    $('div[id^="adsref-"]').each(function() {          // pour chaque bloc d'annonce #adsref-[ads_id]
        $ads = $('#ads-' + this.id.substr(7)).empty(); // supprimer de #ads-[ads_id] tout éventuel contenu
        $('ins:first', this).appendTo($ads);           // déplacer l'annonce dans #ads-[ads_id]
    });
});

Bien évidemment, et comme vous êtes sensible aux bonnes pratiques liées à la performance web, vous insérerez naturellement ce code en fin de page

Continuez votre lecture sur des sujets similaires

• Du RGBA dans vos animations avec le plugin jQuery Color
• JavaScript : tester le support des couleurs RGBA
• WordPress : autoriser l’upload de fichiers au format non-supporté
• Rotation des logs Apache
• WordPress jQuery UI Effects

Mise à jour à 10:57
Plus simple, rapide, intégré, toussa : utiliser strtotime tout simplement.
Merci à Éric Daspet et à Oncle Tom pour le rappel.

Une fonction utilitaire¹ pour convertir une chaîne de type DATETIME ou DATE en un timestamp UNIX.
Les formats pris en charges en entrée sont AAAA-MM-JJ HH:MM:SS et AA-MM-JJ HH:MM:SS. L’heure étant optionnelle dans le cas de la conversion d’une date.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

<?php
/**
 * Get UNIX timestamp for a date or date time.
 *
 * Example:
 * <code>
 * <?php
 * unix_timestamp('2010-03-09 22:43:46'); # 1268171026
 * unix_timestamp('10-03-09 22:43:46');   # 1268171026
 * unix_timestamp('2010-03-09');          # 1268089200
 * ?>
 * </code>
 *
 * @author    Mehdi Kabab <http://pioupioum.fr/>
 * @copyright 2010 Mehdi Kabab
 * @license   http://www.opensource.org/licenses/mit-license.html MIT License
 * @link      http://pioupioum.fr/snippets/php-convertir-datetime-unix-timestamp.html
 *
 * @param string The date or datetime to convert.
 * @return int The UNIX timestamp corresponding to the datetime.
 */
function unix_timestamp($date)
{
	$date = str_replace(array(' ', ':'), '-', $date);
	$c    = explode('-', $date);
	$c    = array_pad($c, 6, 0);
	array_walk($c, 'intval');
 
	return mktime($c[3], $c[4], $c[5], $c[1], $c[2], $c[0]);
}

Continuez votre lecture sur des sujets similaires

• PHP : fonction uncamel() pour inverser une notation en CamelCase
• Bash : convertir un string en entier
• PHP : valider qu’une URL pointe sur un domaine donné
• Phing Header : une tâche pour ajouter un en-tête aux fichiers
• PHP : supprimer récursivement un répertoire

Bash n’offre pas de fonction pour convertir une chaîne de caractères ou un nombre flottant en un entier.
Cela n’est toute fois pas impossible, il suffit de faire appel à printf¹ et le tour est joué !

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

#!/usr/bin/env bash
# string_to_int.sh - Shell script to convert a string or float number
# to an integer.
 
function string_to_int ()
{
    LANG=C
    d=${1##*.}
    if [[ ${#1} -eq ${#d} ]]; then
        d=0
    fi
    e=${1%.*}
    e=${e//,/}
    printf %.0f "$e.$d" 2>/dev/null
}
 
not_int=("12.652" "-12.652" 12.652 14 "12,652" foo "1,254.8" 1,254.8 "125,160,254.8" "125,160,254")
 
for value in ${not_int[@]}; do
    echo "Convert $value to int: $(string_to_int $value)"
done

Ce qui nous donne :

$ ./string_to_int.sh 
Convert 12.652 to int: 13
Convert -12.652 to int: -13
Convert 12.652 to int: 13
Convert 14 to int: 14
Convert 12,652 to int: 12652
Convert foo to int: 0
Convert 1,254.8 to int: 1255
Convert 1,254.8 to int: 1255
Convert 125,160,254.8 to int: 125160255
Convert 125,160,254 to int: 125160254

Voir sur Github.

Mis à jour le 7 mars 2010
Prise en charge de la notation US. Merci à patpro.

Continuez votre lecture sur des sujets similaires

• PHP : convertir un DATETIME en un timestamp UNIX
• PHP : fonction uncamel() pour inverser une notation en CamelCase
• Convertir une icône ICNS en une image PNG
• Rechercher le nom réel d’un utilisateur sous Leopard

Une fonction PHP utilitaire pour convertir une chaîne en notation CamelCase en mots réunis par un séparateur (par défaut, le caractère underscore _).

La fonction uncamel() supporte indifféremment, en entrée, les notations lowerCamelCase et UpperCamelCase.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

<?php
/**
 * Reverse a CamelCase string.
 *
 * Examples:
 *     uncamel('lowerCamelCase') === 'lower_camel_case'
 *     uncamel('UpperCamelCase') === 'upper_camel_case'
 *     uncamel('ThisIsAString') === 'this_is_a_string'
 *     uncamel('notcamelcase') === 'notcamelcase'
 *     uncamel('lowerCamelCase', ' | ') === 'lower | camel | case'
 *
 * @author    Mehdi Kabab <http://pioupioum.fr/>
 * @copyright 2010 Mehdi Kabab
 * @license   http://www.opensource.org/licenses/mit-license.html MIT License
 * @link      http://pioupioum.fr/snippets/php-uncamel-fonction-convertir-camel-case.html
 *
 * @param  string $content The CamelCase string.
 * @param  string $separator The glue for the compound words. Defaults to '_'.
 * @return string
 */
function uncamel($content, $separator = '_')
{
	$content = preg_replace('#(?<=[a-zA-Z])([A-Z])(?=[a-zA-Z])#e', "'$separator' . strtolower('$1')", $content);
	$content{0} = strtolower($content{0});
 
	return $content;
}
?>

Le forker (gist).

Continuez votre lecture sur des sujets similaires

• PHP : convertir un DATETIME en un timestamp UNIX
• Bash : convertir un string en entier
• PHP : valider qu’une URL pointe sur un domaine donné
• Phing Header : une tâche pour ajouter un en-tête aux fichiers
• PHP : supprimer récursivement un répertoire

J’ai récemment eu à (ré)utiliser le plugin jQuery Color mais je me suis heurté à une limitation. Je travaillais sur un jeu de couleurs RGBA et malheureusement le plugin ne supportait pas ce mode colorimétrique (il se contente de travailler sur des couleurs RGB).

Qu’à cela ne tienne, en attendant que ma modification soit intégrée¹ au plugin, voici une version de jQuery Color pourvu du support des couleurs RGBA :

La page de démonstration qui va bien.

Continuez votre lecture sur des sujets similaires

• JavaScript : tester le support des couleurs RGBA
• WordPress jQuery UI Effects
• Supprimer les effets de neige avec Greasemonkey
• Optimiser le chargement des AdSense
• SPIP Google Tools 1.0.1

CSS3 introduit le support des couleurs en mode RGBA. Ce dernier permet de définir une valeur d’alpha à une couleur RGB. Voici comment détecter via JavaScript si un navigteur supporte la fonctionnalité¹.

Comment détecter qu’un navigateur supporte RGBA ?

Le principe est simple :

1. Atteindre le premier élément script² du document.
2. Mémoriser sa couleur de police (ou de fond).
3. Tester si la couleur n’est pas déjà en RGBA.
4. Oui ? Sauter à 7. Non ? Modifier la couleur de l’élément script en rgba(0, 0, 0, 0.5). Si le navigateur ne supporte pas le mode de couleur RGBA, l’action n’aura aucun effet.
5. Tester la non correspondance de la couleur initiale et de la nouvelle.
6. Réinitialiser la couleur de l’élément script.
7. Retourner le résultat du test.

Tester le support de RGBA via le DOM

L’implémentation DOM de l’algorithme n’a rien de complexe. Cependant, pour éviter de réitérer les manipulations DOM en cas de tests multiples, on assigne à la fonction une propriété result à l’aide de arguments.callee.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

/**
 * Check whether the browser supports RGBA color mode.
 *
 * @author Mehdi Kabab <http://pioupioum.fr>
 * @type Boolean
 * @return True if the browser support RGBA. False otherwise.
 */
function isRGBACapable() {
    if (!('result' in arguments.callee)) {
        var dScript = document.getElementsByTagName('script')[0],
            color   = dScript.style.color;
        if (/^rgba/.test(color)) {
            arguments.callee.result = true;
        } else {
            try {
                dScript.style.color = 'rgba(0, 0, 0, 0.5)';
            } catch (e) {};
 
            arguments.callee.result = (dScript.style.color != color);
            dScript.style.color     =  color;
        }
    }
 
    return arguments.callee.result;
};

Tester le support de RGBA via jQuery

Avec jQuery, il peut être utile d’initialiser une proprité jQuery.support.rgba pour éviter de lancer le test à de multiples reprises.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

if (!('rgba' in jQuery.support)) {
    jQuery.extend(jQuery.support, {
        'rgba': isRGBACapable()
    });
}
 
/**
 * Check whether the browser supports RGBA color mode.
 *
 * @author Mehdi Kabab <http://pioupioum.fr>
 * @type Boolean
 * @return True if the browser support RGBA. False otherwise.
 */
function isRGBACapable() {
    var $script = jQuery('script:first'),
        color   = $script.css('color'),
        result  = false;
    if (/^rgba/.test(color)) {
            result = true;
    } else {
        try {
            result = ( color != $script.css('color', 'rgba(0, 0, 0, 0.5)').css('color') );
            $script.css('color', color);
        } catch (e) {};
    }
 
    return result;
};

Continuez votre lecture sur des sujets similaires

• Du RGBA dans vos animations avec le plugin jQuery Color
• WordPress jQuery UI Effects
• Supprimer les effets de neige avec Greasemonkey
• Optimiser le chargement des AdSense
• Capturer les balises HTML et leur contenu avec une RegExp sous JavaScript

WordPress ne supporte en upload qu’une liste exhaustive de formats de fichiers. Si comme moi vous souhaitez uploader¹ des fichiers issus de TextMate, comme les .tmCommand et autres .tmSnippet, ajoutez le code qui suit dans le fichier functions.php de votre thème².

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<?php
// Add the new filter
add_filter('upload_mimes', 'addUploadMimes');
 
/**
 * Adds new supported media types for upload.
 *
 * @see wp_check_filetype() or get_allowed_mime_types()
 * @param array $mimes Array of mime types keyed by the file extension regex corresponding to those types.
 * @return array
 */
function addUploadMimes($mimes)
{
	$mimes = array_merge($mimes, array(
		'tmbundle|tmCommand|tmDragCommand|tmSnippet|tmLanguage|tmPreferences' => 'application/octet-stream'
	));
 
	return $mimes;
}
?>

Indiquez en clé les nouvelles extensions de fichier (séparées par des pipes) et en valeur le type mime associé.

Continuez votre lecture sur des sujets similaires

• WordPress : récupération avancée des images d’un article
• WordPress : lister les images d’un article sur une page media
• Optimiser le chargement des AdSense
• Rotation des logs Apache
• WordPress jQuery UI Effects

Contenu type d’un fichier .gitignore pour un projet Flex Builder :

bin-debug
html-template
.actionScriptProperties
.flexProperties
.project
.settings
.DS_Store

Continuez votre lecture sur des sujets similaires

• Git : des alias pour aller plus vite
• Git : 10 commandes utiles

Effectuer une rotation de ses logs Apache chaque semaine à l’aide de rotatelogs :

CustomLog "|/usr/sbin/rotatelogs /var/log/www/mondomaine.tld/mondomaine.tld-access_log 604800" "combined"

Notez le pipe au début d’argument qui permet la redirection du logfile vers rotatelogs.
Merci à patpro pour l’astuce.

Continuez votre lecture sur des sujets similaires

• Optimiser le chargement des AdSense
• WordPress : autoriser l’upload de fichiers au format non-supporté
• Git : des alias pour aller plus vite
• Git : 10 commandes utiles

WordPress jQuery UI Effects est un plugin pour WordPress permettant d’enregistrer et de charger les composants JavaScript de la librairie jQuery UI Effects.

Ce ne sont pas moins de 14 effets que vous pourrez utiliser dans vos développement de plugins ou dans la personnalisation de vos thèmes : Blind, Clip, Drop, Explode, Fold, Puff, Slide, Scale, Bounce, Highlight, Pulsate, Shake, Size et Transfer.

Table des matières

1. Téléchargement
2. Installation
3. Foire aux questions
   1. Comment utiliser ce plugin ?
   2. Comment déclarer un script dépendant de l’effet jQuery UI Effect Highlight ?
   3. Comment trouver la liste des gestionnaires disponibles ?
   4. La librairie jQuery UI est-elle nécessaire au fonctionnement de jQuery UI Effects ?
4. Développement
5. Historique des versions

Téléchargement

Vous pouvez également vous rendre sur la page WordPress.org du plugin ou lancer son téléchargement et installation directement depuis l’interface d’administration de votre WordPress.

Installation

WordPress jQuery UI Effects s’installe en 3 étapes :

1. Téléversez le répertoire wp-jquery-ui-effects et son contenu dans votre répertoire /wp-content/plugins/.
2. Activez le plugin WordPress jQuery UI Effects via le menu Extensions du panel d’administration de WordPress.
3. C’est tout

Foire aux questions

Comment utiliser ce plugin ?

Pour charger l’effet Bounce dans votre thème ou un plugin, utilisez la méthode wp_enqueue_script :

1
2
3
4
5
6
7
8

<?php
function my_init_method()
{
    wp_enqueue_script('jquery-ui-effects-bounce');
}
 
add_action('init', 'my_init_method');
?>

WordPress chargera¹ l’effet jQuery UI Effects Bounce et, si besoin est, ses dépendances : jQuery et jQuery UI Effects Core.

Comment déclarer un script dépendant de l’effet jQuery UI Effect Highlight ?

Déclarez et chargez en toute simplicité un nouveau script dépendant de jQuery UI Effect Highlight :

1
2
3
4
5
6
7
8
9

<?php
wp_enqueue_script(
    'my-script',
    get_bloginfo('template_url', 'raw') . '/js/my-script.js',
    array('jquery-ui-effects-highlight'),
    '1.0',
    true
);
?>

Comment trouver la liste des gestionnaires disponibles ?

Préfixez le nom de l’effet voulu par jquery-ui-effects- pour obtenir le nom du gestionnaire associé². Attention, le nom du gestionnaire doit être en minuscules.

Par exemple, chargez l’effet Shake soit :

• avec le gestionnaire jquery-ui-effects-shake ;
• en utilisant la méthode statique WPjQueryUIEffects::getHandle('shake').

La librairie jQuery UI est-elle nécessaire au fonctionnement de jQuery UI Effects ?

Non. Vous n’avez donc pas à charger le gestionnaire jquery-ui-core (fichier ui.core.js) en tant que dépendance d’un quelconque effet pour que ce dernier fonctionne.

Quelle est la version de jQuery UI Effects utilisé ?

Le plugin utilise jQuery UI Effects dans sa version 1.7.2.
Il nécessite également jQuery 1.3+, disponible depuis WordPress 2.8.

Développement

Distribué sous licence GNU/GLP, le code source du plugin est accessible sur GitHub.

Une suggestion, une amélioration, une critique ou un bug à me soumettre ? Ça se passe du côté du bugtracker

Historique des versions

1.0.0

• Version initiale.

Continuez votre lecture sur des sujets similaires

• Du RGBA dans vos animations avec le plugin jQuery Color
• Get Author’s Comments
• JavaScript : tester le support des couleurs RGBA
• Supprimer les effets de neige avec Greasemonkey
• SPIP Google Tools 1.0.1