Je viens de passer l'avant-midi à installer, configurer et tester ImageMagick pour m'amuser avec les fonctions graphiques qu'il propose. Et je dois dire que c'est très puissant! Ce que j'ai aimé, c'est qu'on peut non seulement l'appeler par la console, mais aussi à partir de nombreux langages de programmation, dont PHP. Il suffit de faire appel à l'API à l'aide d'une extension PHP comme IMagick (PECL) ou MagickWand. J'ai préféré IMagick à ce dernier puisqu'il possède une notation plus orientée objet.

J'ai découvert une curiosité intéressante : on peut convertir nos photos pour en créer des images du style Polaroid! Je ne sais pas exactement de quelle façon je pourrais m'en servir dans un projet d'entreprise mais bon... C'est cool les Polaroid.

Pour convertir par la console :

convert -caption "Vacances 2008" image-originale.png -gravity center -background black +polaroid image-polaroid.png

Où :

• caption représente le texte à inscrire
• gravity center indique qu'on positionnera le texte au centre
• background : noir pour l'ombrage
• +polaroid pour y ajouter l'effet graphique
  

Par PHP, avec IMagick :

// créer un objet IMagick à partir d'une image à transformer
$image = new IMagick('image-originale.png');

// nécessaire pour transformer l'image en Polaroid
$draw = new IMagickDraw();

// angle de rotation de 5 degrés
$image->polaroidImage($draw, 5);

// afficher immédiatement
header( "Content-Type: image/png" );
echo $image;

// ou enregistrer l'image sur le disque
$image->writeImage('image-polaroid.jpg');

// ménage de la mémoire (un peu comme avec GD)
$draw->clear();
$draw->destroy();

$image->clear();
$image->destroy();

Un petit conseil avec les librairies graphiques en général : elles sont toutes très gourmandes en mémoire alors allez-y avec modération pour ne pas surcharger le serveur. Plus tôt, j'ai fait un test de performance entre GD et ImageMagick et la mémoire d'Apache a grimpé momentanément à 1,8 Go...

Anybody who comes to you and says he has a perfect language is either naive or a salesman.

Plus tôt cette semaine, j'ai fait quelques tests avec PHP et l'extension APC dans le but de créer un contrôle d'upload de fichiers, avec une barre de progression en temps réel. Suite à mes expériences, je n'ai trouvé aucun moyen simple de pouvoir sélectionner plusieurs fichiers en même temps pour les envoyer au serveur. La conclusion de mes lectures a été que je devais développer un contrôle en Java, ou encore controurner le problème en utilisant une boîte de dialogue lancée par Flash.

Mon idée était de développer un petit composant capable de sélectionner plusieurs fichiers, de les envoyer au serveur et de montrer la progression de l'envoi à l'utilisateur pour qu'il patiente pendant le transfert. J'avais l'intention d'utiliser PHP, APC, jQuery et un objet jQuery UI progress bar mais avant de me lancer dans un développement qui aurait pu prendre plusieurs heures, je me suis dit qu'il vaudrait mieux jeter un oeil aux solutions déjà existantes. Et je crois avoir bien fait car je suis tombé par hasard sur une solution qui réglait la plupart de mes problèmes d'un seul coup, configurable et que je pouvais utiliser comme base pour mon développement.

Il s'agit d'un plugin jQuery nommé Uploadify, développé par Ronnie Garcia, qui peut être utilisé sous licence GPL et MIT. Comme le sélectionneur de fichiers est lancé par Flash, on peut en choisir plusieurs en même temps. De plus, la source fla et le swf sont inclus dans le zip de téléchargement. On peut aussi restreindre le type (par les extensions) et la taille des fichiers, choisir le répertoire de dépôt, contrôler les comportements à chacune des étapes et modifier l'apparence (CSS, textes et traductions, etc). Mieux encore, aucun besoin de patenter le tout avec APC pour obtenir la barre de progression!

Vous verrez, c'est étonnant à quel point c'est facile à installer. Décompressez l'archive dans votre projet (par exemple le répertoire "uploadify"). Dans votre page, faites référence aux scripts de base :

<script type="text/javascript" src="uploadify/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="uploadify/jquery.uploadify.js"></script>

Dans le code HTML, créez un DIV pour contenir le contrôle et assignez lui un ID unique. Ça peut être tout simplement quelque chose comme ceci :

<div id="fileUpload"></div>

Créez ensuite un bouton qui servira à lancer le transfert :

<input type="button" id="buttonSubmit" value="Envoyer" />

Pour terminer, initialisez le contrôle et attachez l'événement au bouton. Dans fileUpload, chaque propriété permet de personnaliser le comportement du contrôle :

• uploader : le contrôle Flash qui permet la sélection des fichiers
• script : le script qui prend en charge l'enregistrement des fichiers. Il y en a un de base fournit par défaut qu'on peut utiliser et modifier au besoin.
• folder : le répertoire où déposer les fichiers
• cancelImg : l'icône du X pour annuler la sélection d'un fichier
• buttonText : le texte sur le bouton. J'en profite pour le mettre en français
• multi : excellent, je peux choisir plusieurs fichiers à la fois!

Lorsqu'on cliquera sur le bouton buttonSubmit, on lancera la fonction fileUploadStart() qui débutera le transfert.

<script type="text/javascript">
  function initialize() {
      $('#"fileUpload"').fileUpload({
          'uploader': 'uploadify/uploader.swf',
          'script': 'uploadify/upload.php',
          'folder': 'uploaded_files',
          'cancelImg': 'uploadify/cancel.png',
          'buttonText': 'Choisir un fichier',
          'multi': true
      });
   
      // attacher l'événement au bouton
      $('#buttonSubmit').click(
          function() {
              $("#filepicker").fileUploadStart();
          }
      );
  }

  $(document).ready( initialize );
</script>

Facile, n'est-ce pas ? Enfin, presque. J'ai quand même quelques conseils à vous donner pour finaliser l'installation :

• Si vous voulez voir tout l'interface dans une langue autre que l'anglais, il faudra apporter au moins une modification au fichier source jquery.uploadify.js. Dans la version non compressée, il faudra changer certaines traductions car elles ne sont pas encore personnalisables. Je viens justement d'écrire à l'auteur pour lui faire la proposition.
  
  - Ligne 175, la phrase "Do you want to replace the file"
  - Ligne 216, le terme "Completed"
  - Les unités de mesures KB et MB, entre les lignes 130 et 140
  
  
• Comme mon serveur est configuré avec des répertoires virtuels, j'ai dû changer l'utilisation des fichiers proposés upload.php et check.php pour ne pas tenir compte de la variable $_SERVER['DOCUMENT_ROOT']
• Ne pas oublier de placer le CSS, sinon vous ne verrez pas apparaître la barre de progression :-)
  
  <link type="text/css" href="uploadify/uploadify.css" rel="Stylesheet" />
  

Si vous développez vos projets web avec Dreamweaver, vous utilisez probablement le client FTP intégrer pour synchroniser vos fichiers en ligne. Avant de procéder, on a parfois besoin de comparer le contenu des fichiers pour avoir un aperçu des différences. La bonne vieille méthode de télécharger le fichier distant et de le renommer sous un autre nom pour ensuite le comparer manuellement n'est pas très efficace. Mieux vaut utiliser un outil de comparaison qui fait automatiquement le travail pour nous.

Dreamweaver n'a pas cette capacité de pouvoir comparer un fichier local avec un fichier distant. Par contre, c'est possible de le configurer pour utiliser une application externe. Heureusement, plusieurs sont disponibles, comme l'utilitaire open source WinMerge.

Dans l'explorateur de fichiers de DW, si on clique sur le document à comparer avec le bouton droit de la souris, on voit l'option "Compare with Remote". Pour que cette option soit activée, le FTP doit être configuré dans le Remote Info du projet. Une fois cette étape complétée, l'option ne sera plus grisée et on pourra la choisir. Le message suivant devrait apparaître :

You have not specified an application for file comparison.
Would you like to choose an application to compare these files?

Cliquez OK et entrez le chemin complet de l'exécutable qui effectuera la comparaison, dans mon cas : C:\Program Files\WinMerge\WinMergeU.exe. Lorsqu'un fichier local sera sélectionné pour être comparé, une copie du fichier distant sera téléchargé et enregistré sous un nom temporaire pour pouvoir procéder à la comparaison.

Si en cours de route vous souhaitez changer d'application, rendez-vous dans le menu Edit / Preferences / File Compare pour accéder à l'écran qui définit le chemin du exe.

D'autres alternatives à considérer

• Le client FTP TotalCommander (shareware) peut aussi comparer des fichiers locaux et distants
• TortoiseSVN possède un outil pour comparer des fichiers locaux nommé TortoiseIDiff.exe

Depuis la sortie d'IE 8, l'équipe de Microsoft a fait en sorte que son fureteur devienne plus strict dans l'interprétation du code en suivant un peu plus les recommandations du W3C, notamment en ce qui a trait à la conformité au CSS 2.1.

Dans certains cas, les pages qui étaient rendues correctement sous IE7 deviennent altérées sous la nouvelle version. On peut corriger ce comportement de deux façons.

Option 1
Dans la balise HEAD, ajouter le code HTML suivant pour forcer IE à émuler l'interprétation du code comme le faisait IE 7 :

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7";

Pour qu'il prenne effet, il est préférable de le placer à l'intérieur de HEAD, immédiatement après la balise TITLE mais avant les autres META.

<head>
   <title>Code 18</title>
   <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7";
   ...

Option 2
Ajouter un header HTTP au niveau serveur.

Dans le fichier Web.config de IIS :

<add name="X-UA-Compatible" value="IE=EmulateIE7" />

Pour Apache, assurez-vous que mod_headers.so soit chargé dans httpd.conf (en retirant le # devant la ligne), ensuite, faites le suivre la déclaration du header. Toutes les pages du serveur incluront cette entête.

LoadModule headers_module modules/mod_headers.so
Header set X-UA-Compatible "IE=EmulateIE7"

Pour restreindre son application un répertoire du site, insérez-le à l'intérieur de <location></location>.

4 modes possibles

• IE=5 : mode "Quirks", compatibilité Internet Explorer 5
  
• IE=7 pour suivre les standards de la version 7
  
• IE=8 tient compte des dernières fonctionnalités ajoutées, y compris la mise en page conforme au CSS 2.1
  
• IE=edge choisit le meilleur mode possible selon la version la plus récente disponible. Idéal pour fins de tests mais non conseillé en production.
  

Plusieurs modes de compatibilité peuvent être déclarés en les séparant par un point-virgule : content="IE=7; IE=8". De plus, les alternatives "IE=EmulateIE7" et "IE=EmulateIE8" peuvent être utilisées pour ignorer la déclaration du DOCTYPE, même si celle-ci est présente.

Il existe un moyen très simple d'évaluer le temps de chargement d'une page web. Dans Firefox, si on ouvre l'extension Firebug (Tools / Firebug / Open Firebug, ou encore en cliquant sur l'insecte dans le coin inférieur droit), on notera dans le haut du panneau plusieurs onglets : Console, HTML, CSS, Script, DOM et Net.

Pour le calculer, cliquez sur l'onglet Net (Network Monitoring). Dans certains cas, vous devrez activer la fonction si vous voyez apparaître le message suivant : Net panel is disabled. Cochez la case "Net" et cliquez sur le bouton "Apply settings for [nom du site web]". Cette manipulation sera nécessaire pour chaque site web à monitorer.

Assurez-vous que le filtre "All" (à côté de Inspect et Clear) soit sélectionné pour pouvoir suivre tous les types de ressources et accédez au site en question. Vous verrez défiler chaque requête HTTP GET et POST nécessaire au chargement des différentes ressources incluses dans la page. Pour chacune d'elles, le code HTTP associé sera affiché, par exemple :

• 200 OK - chargé avec succès
  
• 304 Not Modified - récupéré de la cache
• 404 Not Found - la source est introuvable

La colonne suivante indiquera l'origine (sur Amazon ou Yahoo!, on voit que les images proviennent de différents serveurs ou sous-domaines), ensuite le poids du fichier et le temps de chargement. Au bas de chaque colonne, on peut voir le cumulatif pour l'ensemble de la page.

Ainsi, je peux savoir qu'en visitant la page d'accueil de Facebook :

• 249 Kb de matériel sont téléchargés
• Pour un temps de chargement total de 1,45 secondes
• 27 requêtes HTTP ont été nécessaires
  

Au rafraîchissement de la page, je peux voir que le processus récupérera 67 Kb à partir de la cache du fureteur et que le chargement se fera plutôt en 1,2 secondes. Basculez entre les options All, HTML, CSS, JS, XHR, Images et Flash pour filtrer selon le type de ressource.

Sur mon environnement Windows XP, j'utilise souvent EasyPHP pour faire des tests rapides et rouler des snippets de code. Cette fois-ci, j'avais besoin d'utiliser APC.

Alternative PHP Cache (APC) est une extension PECL très pratique qui permet de stocker dans la mémoire vive des pages PHP, ce qui permet de réduire l'accès au disque et d'améliorer la performance. Comme il ne vient pas par défaut dans l'installation de PHP ou de EasyPHP, il faut l'installer manuellement. Sur Windows, on peut normalement l'obtenir à partir de Pecl4Win mais comme il est présentement en maintenance en raison du développement d'un nouveau système, il me fallait trouver le DLL ailleurs. Je pensais le dénicher dans le musée PHP, là où on peut trouver toutes les versions de PECL et PHP, mais ce n'était pas le cas. J'ai finalement réussi à trouver une archive téléchargeable qui contenait plusieurs versions d'APC pour Windows, sur le site de Justin Silverton.

Fait à noter, il est important de prendre le DLL qui correspond à la version de PHP installée pour que ça fonctionne. J'ai utilisé celle qui se trouvait dans le répertoire 5.2.

Ensuite, déposez le DLL dans le répertoire des extensions PHP de EasyPHP (par défaut C:\Program Files\EasyPHP 3.0\php\ext).

Dans le fichier php.ini, ajoutez la ligne suivante dans la section des extensions ou, si elle est déjà présente, retirez le ";" placé devant la ligne.

extension=php_apc.dll

Ensuite, appelez phpinfo() dans une page PHP pour vous assurer que l'extension est chargée. Vous devriez voir une section nommée "apc" et une valeur indiquant APC Support = enabled. Je n'ai pas eu à redémarrer Apache pour qu'il en tienne compte.

Pour modifier la configuration de base, il suffira d'ajouter une section [APC] dans php.ini et d'y associer les nouvelles valeurs. Référez-vous à la documentation du APC runtime configuration pour le détail de chaque valeur possible.

Par exemple :

[APC]
apc.enabled = 1
apc.shm_segments = 1
apc.shm_size = 30
apc.ttl = 0
apc.user_ttl = 0
apc.num_files_hint = 1000
apc.enable_cli = 0
apc.max_file_size = 1M
apc.stat = 1
apc.rfc1867 = 0

Sur Windows, APC utilisera le répertoire temporaire TMP ou TEMP et doit posséder les droits en écriture. Avec Apache, ça devrait fonctionner sans qu'il n'y ait aucune manipulation à faire.

Finalement, un outil de monitoring est inclus avec le package d'APC. Il s'agit d'une page nommée apc.php à déposer sur le serveur et à accéder normalement avec un fureteur. Vous pourrez l'obtenir par l'archive APC que j'ai mentionné plus haut, sinon dans la dernière version stable du package tgz qui se trouve sur PECL.