Comment créer un sprite pour optimiser le chargement de ses images ?

Je m’occupe actuellement du développement du site myBonjour.fr qui permet le recensement et l’affichage de tous les blogs du type Bonjour Madame et Bonjour Poney.

Pour optimiser la vitesse de chargement des pages, je me suis intéressé à la technique aujourd’hui très populaire des Sprites CSS.

Un Sprite, qu’est-ce que c’est ? C’est une grande image qui contient plusieurs petites images utilisées au sein de votre application web, via les feuilles de style. En utilisant la propriété background CSS, il est assez facile de dire quelle partie du sprite doit être affichée en image de fond.
L’avantage de regrouper plusieurs petites images au sein d’un sprite est double. D’une part, l’image ainsi formée est souvent moins lourde que l’ensemble des petites images additionnées et, d’autre part, le nombre de requête HTTP pour charger les images est réduit à un. C’est ce dernier point qui est le plus important et le plus significatif en terme de gain de performances.

Voici un exemple de sprite :

Sprite de boutons

De nombreuses applications Web apportent une aide intéressante pour la création de Sprite à partir d’un site existant non optimisé.
J’ai retenu tout particulièrement le site http://spriteme.org qui offre un bouton à glisser dans sa barre de favoris et qui ouvre une popup en Javascript qui permet de créer un sprite à la volée et même de générer le CSS correspondant à partir du CSS existant.

Exemple avec SpriteMe

Maintenant, comment générer un Sprite soit même, directement dans son code symfony ? Vous allez voir ci-dessous le code que j’ai utilisé pour myBonjour.fr.

Pour cela, j’ai ajouté dans un premier temps une méthode privée dans mon modèle, s’occupant de générer le Sprite en question :

  private function makeSpriteForFavicons()
  {  
    $items = Doctrine_Core::getTable('MyBonjourItem')->getAllActiveItems();
    
    $width = 25;
    $height = 16;
    $space = 14;
    
    // On crée l'image vide
    $image = imagecreatetruecolor($width, ($height+$space) * count($items));
    $background = imagecolorallocatealpha($image, 255, 255, 255, 127);
    imagefill($image, 0, 0, $background);
    imagealphablending($image, false);
    imagesavealpha($image, true);
    
    // Ajout de tous les favicons à l'image
    $pos = 7;
    foreach($items as $item)
    {
      $tmp = imagecreatefrompng($item->getItemFilePath());
      imagecopy($image, $tmp, 0, $pos, 0, 0, $width, $height);
      $pos += $height + $space;
      imagedestroy($tmp);
    }

    imagepng($image, sfConfig::get('sf_web_dir').'/images/items_icons.png');
  }

Il suffit ensuite d’appeler cette méthode, quand la colonne correspondant à l’image est modifiée. Pour cela, on implémente la méthode save du modèle :

  public function save(Doctrine_Connection $conn = null)
  {   
    if(in_array('favicon_url', array_keys($this->getModified())))
    { 
      $return = parent::save($conn);
      $this->makeSpriteForFavicons();
    }
    else
      $return = parent::save($conn);
    
    return $return;
  }

Et enfin, on génère la partie correspondante dans le fichier CSS, à la volée :

// makeCSSSuccess.php
<?php $pos = 0; foreach($items as $item): ?>
div#<?php echo $item->getSlug() ?> > h3{
  background: url("/images/items_icons.png") no-repeat scroll 5px -<?php echo $pos*$width ?>px;
}
<?php $pos++; endforeach; ?>

Le fichier CSS généré par une action symfony doit être mis en cache pour éviter toute chute des performances. Il suffit de déclencher ensuite une regénération du cache lorsqu’un item est ajouté en base.
Sur myBonjour, j’ai ainsi supprimé le chargement de 60 requêtes HTTP, correspondant aux différents bonjours présents dans la liste.

Lancer une tâche symfony depuis une action

How to launch a symfony task from action code? Ou comment appeler une tâche symfony depuis une action, sans passer par le CLI ?

Symfony permet depuis la version 1.3 / 1.4 d’appeler une tâche directement depuis une autre tâche via le code suivant :

$this->runTask('mydomain:mytask');

On peut par exemple très facilement créer une tâche au cours de laquelle un appel à symfony cc sera déclenché :

<?php

class testTask extends sfBaseTask
{
  protected function configure()
  {
    // // add your own arguments here
    // $this->addArguments(array(
    //   new sfCommandArgument('my_arg', sfCommandArgument::REQUIRED, 'My argument'),
    // ));
    $this->addOptions(array(
    new sfCommandOption('application', null, sfCommandOption::PARAMETER_REQUIRED, 'The application name'),
    new sfCommandOption('env', null, sfCommandOption::PARAMETER_REQUIRED, 'The environment', 'dev'),
    new sfCommandOption('connection', null, sfCommandOption::PARAMETER_REQUIRED, 'The connection name', 'doctrine'),
    // add your own options here
    ));
    $this->namespace        = '';
    $this->name             = 'test';
    $this->briefDescription = '';
    $this->detailedDescription = <<
The &#91;test|INFO&#93; task does things.
Call it with:
&#91;php 1="test|INFO" language="symfony"&#93;&#91;/php&#93;&#91;/php&#93;
EOF;
  }
  protected function execute($arguments = array(), $options = array())
  {
    // initialize the database connection
    $databaseManager = new sfDatabaseManager($this->configuration);
    $connection = $databaseManager->getDatabase($options['connection'])->getConnection();
    // here is our code
    // we do something
    // and we clear cache
    $this->runTask('cc');
  }
}

En revanche, rien n’est actuellement prévu pour appeler cette même tâche depuis une action. Il est pourtant très utile de pouvoir appeler la tâche d’envoi des emails directement depuis une action de son backend. Ou même de vider le cache sans avoir à passer par la ligne de commandes.
Le plugin ybRunTaskPlugin a été développé justement pour palier à ce manque. Une fois le plugin installé, il est possible d’appeler directement au sein de son action une tâche symfony, de la même manière qu’on pouvait le faire en standard au sein d’une autre tâche :

class myActions extends sfActions
{
  public function executeRuntask(sfWebRequest $request)
  {
    $ret = $this->runTask('myDomain:myTask', 'myArguments');
    if(null != $ret)
    {
      $this->msg = $ret->getMessage();
    }
    else
    {
      $this->msg = 'everything went OK';
    }
  }
}

Malheureusement, le plugin ne gère actuellement pas l’affichage des logs ou d’une quelconque valeur de retour si l’exécution s’est passé correctement. Peut-être dans une prochaine version ?
En attendant, vous pouvez réaliser un petit hack du plugin en fonction de vos besoins…

jQuery Tooltip

L’affichage d’une tooltip est l’un des besoins les plus récurrents pour un développeur Web. Le tooltip permet au développeur d’apporter une information supplémentaire à un élément de la page d’une manière esthétique et non intrusive.

Un tooltip pour quel besoin ?

Le tooltip permet d’afficher une information supplémentaire lors du survol d’une image, lors du passage sur le champs d’un formulaire. Il peut être associé à différents évènements sur n’importe quel élément d’une page, l’objectif étant de rendre la navigation plus claire et de déchargée la page d’informations superflues à un instant T.

Les solutions

De très nombreuses solutions de tooltip existent en Javascript. Comme je suis un grand fan de la bibliothèque jQuery, je vous propose de vous rendre sur cette page : http://www.webdesignbooth.com/15-jquery-plugins-to-create-an-user-friendly-tooltip/ qui donne un bon aperçu des Tooltip développés avec ce framework.

Ma solution préférée : jQuery Tools et son Tooltip.

Cette solution est très bien construite tout en restant légère (~5Ko). Il est possible de personnaliser l’animation de chargement de la tooltip, choisir sa position par rapport à l’élément déclencheur, y intégrer du texte mais aussi de l’HTML très simplement. Et tout le style est aisément modifiable dans la feuille CSS. Bref, que du bonheur !

Exemple de code

Le script :

<script type="text/javascript">
  $(document).ready(function() {
    $("#mon_image").tooltip({
      position: "center right",
      effect: "fade",
      opacity: 0.7,
      tip: '#tooltip'
    });
  });
</script>

Le code HTML :

<div id="tooltip">&amp;nbsp;</div> <img id="mon_image" title="Bahunet est un site de partage de cours génial !" src="http://www.bahunet.com/images/decoupe/logo.png" alt="logo Bahunet"  />

Et le CSS :

#tooltip {
  background-color: #000;
  border: 1px solid #fff;
  padding: 10px 15px;
  width: 200px;
  display: none;
  color: #fff;
  text-align:left;
  font-size:12px;
  box-shadow:0 0 10px #000;
  -moz-box-shadow:0 0 10px #000;
  -webkit-box-shadow:0 0 10px #000;
}

Je vous propose de consulter les différents exemples du site officiel et la documentation pour avoir plus d’informations et voir l’ensemble des possibilités offertes par ce plugin jQuery : http://flowplayer.org/tools/tooltip.html

Comment lister les derniers articles WordPress sur un site en PHP ?

De plus en plus de développeurs font le choix d’utiliser la plateforme WordPress pour développer l’ensemble d’un site internet et non pas seulement le blog. Cette démarche a l’intérêt de préserver très facilement une cohérence globale sur le site. Une seule gestion des utilisateurs, une seule gestion des commentaires, un seul routing…

Pour ma part, je préfère garder séparée la plateforme de blog WP du reste de mon site. Mais j’ai pourtant envie d’afficher la liste des derniers articles postés sur mon blog directement sur mon site. Comment faire ?

Les solutions

Le flux RSS

Une des solutions qui semble la plus retenue par les développeurs est la récupération et le parsing du flux RSS généré automatiquement par WordPress. Ce choix présente de nombreux avantages comme la possibilité de choisir le flux adapté à son besoin : tri par tag, par auteur, par catégorie…

En revanche, le parsing peut être un peu compliqué et semble moins performant qu’un accès direct en base. J’ai donc choisi d’utiliser une classe PHP qui récupère directement dans ma base de données WordPress les articles et informations associées. Si toutefois vous préférez la solution « Flux RSS », sachez que de très nombreux exemples pourront être dénichés sur les forums francophones dédiés à WordPress ou sur Google en général.

Récupération en base

La deuxième solution consiste donc à se connecter directement à la base de données de WordPress pour y récupérer à la demande les derniers articles et les informations associées.

En cherchant sur Google je suis tombé sur un projet de Peter Upfold dédié à ce sujet. Développé en PHP, cette classe permet après configuration de générer automatiquement le code HTML permettant de lister les derniers articles de son blog. Si vous cherchez une solution clé en main, je vous invite à consulter directement son site :

http://peter.upfold.org.uk/projects/wpget

Vous trouverez même à cette adresse un script permettant de générer automatiquement le fichier de configuration adapté à votre serveur (adresse base de données, nom d’utilisateurs, password…) :

http://peter.upfold.org.uk/projects/wpget/installer

WPGet Installer

Une fois le fichier wpget.php configuré, vous n’aurez plus qu’à écrire dans le code un bout de script semblable à celui ci-dessous pour insérer la liste de vos derniers articles correctement formatée en HTML :

<?php include_once("./wpget.php");
$wpget = new wpGet;
$wpget->dateformat = "d/m/Y H:i";
$wpget->showcredit = false;
$wpget->getWordpressEntries(2, 200, true, true, true); ?>

Pour ma part, je cherchais une classe plus simple que je pourrai utiliser dans mon application symfony et qui me laisserai gérer la partie présentation manuellement. J’ai donc réécrit entièrement la classe de Peter Upfold pour finalement obtenir deux petites classes PHP 5 (tant qu’à faire !). La première gère la récupération des données en base et la deuxième représente de manière simple un article WordPress avec les getters et setters associés.

Je vous livre le code tel quel ci-dessous :


<?php

/*
Réécriture de la classe PHP de Peter Upfold (http://peter.upfold.org.uk)
pour récupérer la liste des derniers articles postés sur un blog WordPress.

@author: Olivier Balais (http://blog.overnetcity.com)
*/
class WPEntries
{
  protected $dbUser;
  protected $dbPwd;
  protected $dbHost;
  protected $dbName;
  protected $dbTablesPrefix;

  protected $connection;

  // Fonction trouvée à l'origine sur http://uk2.php.net/manual/en/function.substr.php#59719
  private static function html_substr($posttext, $minimum_length = 200, $length_offset = 20, $cut_words = false, $dots = true)
  {
    // $minimum_length:
    // The approximate length you want the concatenated text to be

    // $length_offset:
    // The variation in how long the text can be in this example text
    // length will be between 200 and 200-20=180 characters and the
    // character where the last tag ends

    // Reset tag counter &amp;amp; quote checker
    $tag_counter = 0;
    $quotes_on = false;
    // Check if the text is too long
    if (strlen($posttext) > $minimum_length) {
      // Reset the tag_counter and pass through (part of) the entire text
      $c = 0;
      for ($i = 0; $i < strlen($posttext); $i++) {
        // Load the current character and the next one
        // if the string has not arrived at the last character
        $current_char = substr($posttext,$i,1);
        if ($i < strlen($posttext) - 1) {
          $next_char = substr($posttext,$i + 1,1);
        }
        else {
          $next_char = "";
        }
        // First check if quotes are on
        if (!$quotes_on) {
          // Check if it's a tag
          // On a "<" add 3 if it's an opening tag (like <a href...)
          // or add only 1 if it's an ending tag (like </a>)
          if ($current_char == '<') {
            if ($next_char == '/') {
              $tag_counter += 1;
            }
            else {
              $tag_counter += 3;
            }
          }
          // Slash signifies an ending (like </a> or ... />)
          // substract 2
          if ($current_char == '/' &amp;amp;&amp;amp; $tag_counter <> 0) $tag_counter -= 2;
          // On a ">" substract 1
          if ($current_char == '>') $tag_counter -= 1;
          // If quotes are encountered, start ignoring the tags
          // (for directory slashes)
          if ($current_char == '"') $quotes_on = true;
        }
        else {
          // IF quotes are encountered again, turn it back off
          if ($current_char == '"') $quotes_on = false;
        }

        // Count only the chars outside html tags
        if($tag_counter == 2 || $tag_counter == 0){
          $c++;
        }

        // Check if the counter has reached the minimum length yet,
        // then wait for the tag_counter to become 0, and chop the string there
        if ($c > $minimum_length - $length_offset &amp;amp;&amp;amp; $tag_counter == 0 &amp;amp;&amp;amp; ($next_char == ' ' || $cut_words == true)) {
          $posttext = substr($posttext,0,$i + 1);
          if($dots){
            $posttext .= '...';
          }
          return $posttext;
        }
      }
    }
    return $posttext;
  }

  private static function convert_smart_quotes($string) // not mine either - thanks to Chris Shiflett at http://shiflett.org/archive/165
  {
    $search = array(chr(145),
    chr(146),
    chr(147),
    chr(148),
    chr(151));

    $replace = array('‘',
    '’',
    '“',
    '”',
    '—');

    return str_replace($search, $replace, $string);
  }

  public function __construct($dbUser = "", $dbPwd = "", $dbHost = "localhost", $dbName = "wordpress", $dbTablesPrefix = "wp_")
  {
    $this->dbUser         = $dbUser;
    $this->dbPwd          = $dbPwd;
    $this->dbHost         = $dbHost;
    $this->dbName         = $dbName;
    $this->dbTablesPrefix = $dbTablesPrefix;

  }

  public function getLastEntries($number = 2, $limit = null, $stripJavascript = true, $stripImages = true, $stripEmbed = true)
  {
    // Connexion à la base de données
    try
    {
      $connection = new PDO('mysql:host='.$this->dbHost.';dbname='.$this->dbName, $this->dbUser, $this->dbPwd);
    }
    catch(Exception $e)
    {
      echo $e->getMessage();
      die();
    }

    // Préparation de la requête
    $request = $connection->prepare("SELECT `post_content`, `post_date`, `post_title`, `display_name`, `comment_count`, `guid`
    FROM `".$this->dbTablesPrefix."posts` as posts
    INNER JOIN `".$this->dbTablesPrefix."users` as users ON users.ID = posts.post_author
    WHERE posts.`post_status` = 'publish' AND posts.`post_type` = 'post'
    ORDER BY `post_date` DESC LIMIT ".$number.";");

    // Récupération des articles
    $articles = array();

    try
    {
      $request->execute(array());
    }
    catch(Exception $e)
    {
      echo $e->getMessage();
      die();
    }

    while ($result = $request->fetch(PDO::FETCH_OBJ))
      {
      $content = $result->post_content;

      if ($limit > 0)
      {
        $content = stripslashes(self::html_substr($content, $limit, 20));
        $content = self::convert_smart_quotes($content);
      }
      else
      {
        $content = self::convert_smart_quotes($content);
      }

      if ($stripJavascript)
        $content = ereg_replace("<script.*</script>", "", $content);

      if ($stripImages)
        $content = ereg_replace("<img.*/>", "", $content);

      if ($stripEmbed)
        $content = ereg_replace("<embed.*</embed>", "", $content);

      $article =
        new WordPressArticle($content,
        $result->post_date,
        $result->post_title,
        $result->display_name,
        $result->comment_count,
        $result->guid);

      $articles[] = $article; // Ajout de l'élément à la liste à retourner
    }

    return $articles;
  }
}

class WordPressArticle
{
  protected $content;
  protected $postDate;
  protected $postTitle;
  protected $authorName;
  protected $commentsCount;
  protected $link;

  public function __construct($content = "", $postDate = "", $postTitle = "", $authorName = "", $commentsCount = "", $link = "")
  {
    $this->content = $content;
    $this->postDate = $postDate;
    $this->postTitle = $postTitle;
    $this->authorName = $authorName;
    $this->commentsCount = $commentsCount;
    $this->link = $link;
  }

  public function setContent($content)
  {
    $this->content = $content;
  }

  public function getContent()
  {
    return nl2br($this->content);
  }

  public function setPostDate($postDate)
  {
    $this->postDate = $postDate;
  }

  public function getPostDate()
  {
    return $this->postDate;
  }

  public function setPostTitle($postTitle)
  {
    $this->postTitle = $postTitle;
  }

  public function getPostTitle()
  {
    return $this->postTitle;
  }

  public function setAuthorName($authorName)
  {
    $this->authorName = $authorName;
  }

  public function getAuthorName()
  {
    return $this->authorName;
  }

  public function setCommentsCount($commentsCount)
  {
    $this->commentsCount = $commentsCount;
  }

  public function getCommentsCount()
  {
    return $this->commentsCount;
  }

  public function setLink($link)
  {
    $this->link = $link;
  }

  public function getLink()
  {
    return $this->link;
  }
}


Ci-dessous, un exemple de fonctionnement simplissime dans une application symfony.

Dans l’action :

/**
* Executes index action
*
*/
public function executeIndex()
{
  $wpEntries= new WPEntries("db_user", "db_pwd", "localhost", "wordpress", "wp_");
  $this->entries = $wpEntries->getLastEntries();
}

Dans la vue :

<ul>
 <?php foreach($entries as $entry): ?>
 <li><?php echo $entry->getPostTitle() ?></li>
 <?php endforeach ?>
/ul>

Tout simplement !
N’hésitez pas à utiliser ce bout de code et à me faire un retour le cas échéant.