Not Just another technical weblog…

J’ai récemment découvert un outil de coloration syntaxique de code dans vos pages web (je l’ai d’ailleurs implémenté sur ce blog… ) appelé SyntaxHighlighter.

Il est vraiment très simple à mettre en place et je n’ai pas rencontré de problème lors de son installation. La page de démonstration présente le résultat sur du code HTML, la page décrivant les brushes montre la mise en forme proposée pour plus de 20 languages.
Je vous invite vivement à découvrir les possibilités de ce petit outil qui permet vraiment de rendre lisible facilement un bout de code…

Voici un exemple de code pour l’implémenter:

<script src="shCore.js" type="text/javascript"></script>
<script src="shBrushCss.js" type="text/javascript"></script>
<link href="shCore.css" rel="stylesheet" type="text/css">
<link href="shThemeDefault.css" rel="stylesheet" type="text/css">
...
<pre class="brush: xml;">
  <strong>Hello World</strong>
</pre>

Le site officiel de cette librairie: http://alexgorbatchev.com/wiki/SyntaxHighlighter

J’utilise Twitter depuis maintenant quelques temps et j’ai vu à travers ce service l’utilité d’accéder à un outil de simplification d’URL.
Lorsque l’on écrit des commentaires, il est vraiment intéressant de ne pas occuper l’espace avec des liens trop longs mais plutôt avec une explication concrète autour…

Bit.ly est beaucoup utilisé sur Twitter, j’ai donc cherché les différentes possibilité offertes par ce WebService. A travers un compte utilisateur gratuit créé sur le site, vous avez ensuite accès à une API (Interface de Programmation) de type REST (Representational State Transfer).
Le projet associé à ce service est hébergé sur Google Code et disponible à l’URL: http://code.google.com/p/bitly-api/

Ce type d’architecture est très répandu sur le web et utilisé pour diverses applications (Recherche, Récupération d’informations comme la météo, …). Elle permet d’apporter des services supplémentaires sur un site qui sont de plus en plus demandés.

Pour Bit.ly le fonctionnement est le suivant:

• Pour chaque requête, une connexion à votre compte utilisateur gratuit est requis avec login et Api Key
• Différents formats de communications sont possibles (JSon, XML)
• Des librairies implémentant la communication avec ce service sont disponibles dans plusieurs languages (PHP, JavaScript, ActionScript, …)
• Les 5 commandes possibles sont décrites sur la page du projet sur Google Code

Pour chaque lien créé à travers ce service, des statistiques de clic sont générées ce qui permet d’assurer un suivi assez précis de ses liens.

Si vous devez implémenter un système de commentaire sur votre site, j’espère que cette présentation vous aidera à l’améliorer. D’autres services du même type existe comme Goo.gl mais l’utilisation très répandu et la simplicité m’ont fait choisir Bit.ly.

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)" />

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/

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 :

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.