Archive for décembre 2009

XSLTProcessor: Utiliser des fonctions PHP pour des traitements avancés

J’ai eu souvent l’occasion d’utiliser XSL pour gérer des templates d’affichages.
En effet j’ai eu beaucoup l’habitude de travailler avec des contenus XML pour leur structure simple à exploiter. Ce type de contenu permet, à mon sens, une séparation plus simple entre traitement et affichage qu’avec une base de données.

Cependant les feuilles de style XSL sont assez limitées dans les traitements car même si elles permettent des boucles et des calculs simples, toutes les informations utiles doivent être stockées dans le XML pour être exploitées directement par le XSL.
Cette exhaustivité d’information est assez rare et plus particulièrement dans l’affichage des médias. XSL ne permet pas, contrairement à PHP, de tester l’existence d’un fichier, de redimensionner une image ou de lire des meta-données associées à un fichier.

Pour réaliser ces traitements plus avancés, le processeur XSLT associé à PHP (XSLTProcessor inclut dans le module php_xsl) permet l’appel de fonction PHP à travers XSL.

Pour cela il faut créer une feuille de style XSL en ajoutant l’espace de nom XML PHP dans l’en-tête:

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:php="http://php.net/xsl" >
...
</xsl:stylesheet >

Pour activer l’utilisation de ce nouvel espace de nom, il faut lors de la construction de l’objet XSLTProcessor appelé l’instruction suivante:

$oXSL = new XSLTProcessor( DOMDocument::load( "chemin-vers-mon-fichier" ) );
$oXSL->registerPHPFunctions();

Afin d’être utilisées dans la feuille XSL, les fonctions PHP doivent être déclarées en amont de la construction de l’objet XSLTProcessor. Voici un exemple d’appel à une fonction écrite en procédural:

function AfficherTexte( $sText )
{
   return $sText;
}
...
<xsl:value-of select="php:function('AfficherTexte', $myText)" />

Voici un autre exemple d’utilisation avec une fonction statique:

class Text
{
   public static function Afficher( $sText )
   {
      return $sText;
   }
}
...
<xsl:value-of select="php:function('Text::Afficher', $myText)" />

Un composant pour compresser les fichiers JS et CSS

Etant toujours en quête de l’allègement des pages web, j’ai récemment trouvé un outil permettant de compresser les codes JavaScript et CSS. Cette librairie appelée « Minify » est hébergée sur Google Code par Steve Clay et Ryan Grove et est basé sur JSMin, programme développé par Douglas Crockford en C.

Plusieurs classes PHP permettent de compresser les fichiers JS, ou les fichiers CSS assez simplement.
Pour ma part, je vais coupler l’utilisation de ce code avec Phing pour alléger le poids des fichiers à transférer lors de l’affichage des pages web que j’aurais créé. Dans un futur post, je présenterais différents processus Phing dont celui-ci…

Plusieurs exemples d’utilisation sont disponibles pour une meilleure compression en fonction de plusieurs cas concret. Ils sont décrit à l’adresse http://code.google.com/p/minify/wiki/CookBook.

Vous trouverez les sources (sous licence BSD) à l’adresse suivante: http://code.google.com/p/minify/

TinySlider: Un diaporama JavaScript dégradable sans FrameWork

J’ai récemment découvert ce script permettant d’implémenter un diaporama multi contenus (texte, images, …) sans FrameWork.

Sa légéreté (1,5Ko) en fait un outil intéressant pour être intégré rapidement sans contraintes. Il est paramétrable (navigation précédent / suivant, pagination, défilement automatique, …) et peu être retravaillé graphiquement très facilement.

En dehors de ces avantages, TinySlider permet surtout un affichage propre du contenu quand JavaScript est désactivé (voir la démonstration). L’auteur a apporté un soin particulier à respecter cette compatibilité qui est souvent trop oublié par les développeurs JavaScript. Les moteurs de recherche ne voient pas la page avec JavaScript, il est donc important de leur afficher un contenu approprié.

Vous pourrez trouver une présentation du script à l’adresse: http://www.leigeber.com/2009/12/slideshow-script/

MooTools Forge: Bibliothèque de PlugIns

La forge MooTools a été officiellement dévoilée cette semaine. Jusqu’à maintenant les utilisateur de MooTools devait faire face au web pour trouver des développement ou des bibliothèques déjà écrites à utiliser.

Avec l’ouverture de ce site, tous ces plugins vont être centralisés ce qui rendra la recherche plus facile et l’exhaustivité des résultats plus précise… De plus une charte de développement a été écrite pour que les scripts soient réalisés selon les mêmes règles. Les contenus seront donc tous valides et utilisable.

Cette forge va aussi être basée sur un système de partage car tous les contenus sont hébergés sur un système de contrôle de version, Git. Ce système permet à tout internaute de proposer un PlugIn simplement et de le rendre disponible aux yeux de tous après un simple commit.
Un système de démonstration a été implémenté ce qui permet de voir directement le rendu.

Je vous invite vivement à découvrir les premiers Diaporama déposés sur le site, certains sont saisissants.

Le site est disponible à l’adresse: http://mootools.net/forge/

Créer des Sprites CSS… Une idée pour alléger le chargement de vos pages web!

A travers de récentes recherches sur les possibilités de tester et d’améliorer les temps de chargement de mes pages web, j’ai découvert une présentation intéressante sur la création de Sprite CSS.

En effet cette technique consiste à regrouper plusieurs images d’interfaces à l’intérieur d’un Sprite comme présenté dans l’exemple ci-dessous réalisé par Google :

Exemple de sprite utilisé par Google sur son site

Il suffit ensuite d’utiliser les propriétés CSS de « background-img » et « background-position » pour pouvoir afficher la partie souhaité de l’image.

Les images chargées à travers CSS ne sont chargés qu’une fois alors que les images insérées en HTML sont chargées autant de fois que nécessaire. L’utilisation de Sprite permet donc de réduire considérablement le temps de chargement des interfaces car c’est ici leur principale utilité.

Vous trouverez l’article à l’adresse http://cssglobe.developpez.com/tutoriels/css/ameliorer-temps-chargement-images/#LI.

Il permet de bien se rappeler comment son calculées les coordonnées de position des images de fond CSS et sert de guide pour ne pas rater une étape dans la mise en place des Sprites.