Le weblogue de SeB

Il est souvent utile de supprimer les accents des caractères accentués dans une chaîne. Cette action est utilisée par exemple pour générer une URL propre ou bien un nom de fichier qui ne posera pas de problème.

En PHP, le développeur retrouve souvent la solution  suivante :

$str = strtr($str, ‘ÁÀÂÄÃÅÇÉÈÊËÍÏÎÌÑÓÒÔÖÕÚÙÛÜÝ’, ‘AAAAAACEEEEEIIIINOOOOOUUUUY’);
$str = strtr($str, ‘áàâäãåçéèêëíìîïñóòôöõúùûüýÿ’, ‘aaaaaaceeeeiiiinooooouuuuyy’);

Ce bout de code fonctionne très bien en IS0-8859-1. Cependant, avec une chaîne en UTF8, des caractères étranges vont s’immiscer. Cela vient du fait que les caractères sont encodés sur 8 bits.

Après maintes essais avec iconv() et autres strtr(), je n’ai pas trouvé de solution à ce problème. Heureusement, Olivier Laviale a trouvé une astuce. Je ne suis pas convaincu que ce soit la méthode la plus performante, mais elle a le mérite de fonctionner :

$str = htmlentities($str, ENT_NOQUOTES, ‘utf-8′);     $str = preg_replace(‘#\&([A-za-z])(?:uml|circ|tilde|acute|grave|cedil|ring)\;#’, ‘\1′, $str);
$str = preg_replace(‘#\&([A-za-z]{2})(?:lig)\;#’, ‘\1′, $str);
$str = preg_replace(‘#\&[^;]+\;#’, ”, $str);

Je vous laisser consulter le billet original d’Olivier sur le sujet si vous souhaitez avoir plus d’informations.

Ah ! Les joies de l’encodage…

Il y a quelques temps, je vous avais présenté les différentes solutions
pour faire du cross-domain en Javascript.

Cet article a suscité beaucoup d’interrogations sur la mise en oeuvre. Alors
aujourd’hui, avec un peu de retard, je vais vous présenter l’implémentation
de ces astuces avec du code source !

Le proxy

Cet exemple se base sur l’API de recherche de Yahoo! en mode XML.

La fonction Javascript how_many() permet d’interroger le proxy. La fonction Javascript count_results() permet d’afficher le nombre de résultats disponibles pour la recherche effectuée.

Le fichier proxy.php, qui doit être hébergé sur notre serveur se contente de récupérer l’adresse du site à interroger puis il effectue la requête et retourne le résultat.

Le code JavaScript

function count_results(httpRequest) {

 if (httpRequest.readyState == 4) {

 	if (httpRequest.status == 200) {

 		var xmldoc = httpRequest.responseXML;

 		var root_node = xmldoc.getElementsByTagName('ResultSet').item(0);

 		alert(root_node.getAttribut("totalResultsAvailable"));

 	} else {

 		alert('Un problème est survenu avec la requête.');

 	}

 }

}

function how_many() {

 if (window.XMLHttpRequest) { // Mozilla, Safari, ...

 	httpRequest = new XMLHttpRequest();

 } else if (window.ActiveXObject) { // IE

 	httpRequest = new ActiveXObject("Microsoft.XMLHTTP");

 }

 httpRequest = new XMLHttpRequest();

 httpRequest.overrideMimeType('text/xml');

 httpRequest.onreadystatechange = count_results;

 httpRequest.open('GET','proxy.php',true);

 httpRequest.send("url=http://api.search.yahoo.com/ImageSearchService/V1/imageSearch?appid=YahooDemo&query=Madonna&output=xml");

}

Le code du proxy (proxy.php)

<?php

$data = open($_REQUEST['url']);

header("Content-Type: text/xml");

echo $data;

?>

Les images invisibles

Cet exemple ne fait qu’envoyer des informations (”hello_world”) à un service distant (”anydomain.com”).

Le code JavaScript

var i = new Image();

var url = "url=http://www.anydomain.com?data=hello_world";

i.src = encode_utf8(url);

document.body.appendChild(i);

JSON

Cet exemple se base également sur l’API de recherche de Yahoo! mais en mode JSON. Ceci permet de se passer d’un proxy.

Les fonctions Javascript ont le même rôle que dans l’exemple avec un proxy.

Le code JavaScript

function count_results(obj) {

 alert(obj.ResultSet.totalResultsAvailable);

}

function how_many() {

 var s = document.createElement("script");

 s.type = "text/javascript";

 s.src="http://api.search.yahoo.com/ImageSearchService/V1/imageSearch?appid=YahooDemo&query=Madonna&output=json&callback=count_results";

 document.body.appendChild(s);

}

Voilà ! Vous pouvez constater que ses méthodes sont très simples. Je vous laisse imaginer toutes les possibilités qui s’offrent à vous…

Au fil des ballades sur le net, parfois vous pouvez arriver sur un site qui a un petit plus. Et pour les plus curieux d’entre vous, vous pouvez-vous demander : avec quoi ce site a-t-il bien pu être conçu ?

C’est en partant de cette interrogation que Gary Brewer a créé l’outil BuiltWith. Il suffit de saisir l’URL d’un site et il vous ressort tout un tas d’informations plus ou moins intéressantes telles que :

• le type de serveur
• le type de plateforme
• les widgets utilisés
• les outils de statistiques
• les outils d’aggrégation
• l’encodage
• etc..

J’ai découvert cet outil grâce à Netwizz qui est toujours là pour nous faire découvrir des solutions surprenantes.

Introduction

Qu’est-ce que le cross-domain ? Un script Javascript est dit cross-domain lorsqu’il est hébergé sur un serveur avec un nom de domaine bien précis et qu’il fait des requêtes HTTP vers d’autres domaines.

Par défaut, ce comportement est interdit par les navigateurs butineurs. Non pas pour pourrir la vie des développeurs, mais pour protéger celle des utilisateurs. Cependant il existe quelques techniques qui permettent de contourner le problème.

Solutions

Le proxy

La première méthode consiste à mettre en place sur son propre serveur un proxy. Le Javascript interroge le proxy qui lui-même va interroger le serveur distant qui peut être sur un autre domaine. Cette solution n’est pas idéale car elle oblige à mettre en place ce fameux proxy. De plus dans le cadre la distribution d’une API Javascript, la technologie utilisée côté serveur par les utilisateurs sur service n’est pas maîtrisée.

Notons tout de même qu’elle a l’avantage de pouvoir mettre en place un système de cache (au niveau du proxy) pour améliorer les performances^[1].

Les images invisibles

Cette astuce consiste à ajouter la référence d’une image dans le document HTML dont l’URL pointe vers le serveur distant. Bien entendu cette image est invisible et l’URL pointe vers un service et non vers une image. Si je ne me trompe pas, cette astuce est utilisé par Google Analytics.

La contre-partie est qu’il n’est pas possible de récupérer des informations. Cette méthode a ses limitations puisqu’elle ne sert qu’à envoyer des données à un serveur distant et non à en récupérer.

JSON

Qu’est-ce que JSON ? C’est un format de structure des données. Et il a l’avantage^[2] d’utiliser la notation des objets JavaScript.

Cette technique consiste à ajouter la référence d’un script dans le document HTML dont l’URL pointe vers le serveur distant. Le serveur doit alors retourner son résultat sous le format JSON. Ensuite à la réception des données, une fonction de callback Javascript exécute le traitement des informations retournées par le serveur.

Cette solution nécessite que le serveur distant puisse retourner son résultat dans le format JSON. Néanmoins, de plus en plus de services tels que ceux de Yahoo! ou Google proposent de spécifier le format de retour^[3] et même la fonction de callback !

Cette méthode possède ses limitations. Cependant, dans le cadre de la mise en place d’un service web avec la mise à disposition d’une API Javascript, cette technique se révèle être terriblement efficace ! Elle permet donc d’envoyer des informations à un serveur distant et de recevoir des données en retour.

Conclusion

Chaque méthode a ses avantages et ses inconvénients. Tout dépend du contexte. Il faut retenir que pour seulement envoyer des données la méthode des images invisibles suffi. Alors que pour récupérer des informations, il faut utiliser selon les cas un proxy ou JSON.

Notes

[1] Et économiser de la bande passante.

[2] Pour notre problème.

[3] En général XML ou JSON.

La société ez System propose depuis peu une suite de composants PHP très utile distribuée sous la nouvelle licence BSD : eZ components.

Ces composants sont très bien fait et permettent d’augmenter la productivité des développeurs. La liste contient plus de vingt composants des plus variés possibles : du moteur de template, à l’outil de manipulation d’image, en passant par le générateur de code PHP ou le moniteur système !

En version 1.1.1 actuellement, le carnet de route laisse présager de nouvelles fonctionnalités très intéressantes pour la fin de l’année.

Le générateur d’icône d’email, Email 2 icon 1.3.0, a été réécrit avec certain de ces composants comme :

• Mail : pour la génération et l’émission de mail.
• Template : pour le moteur de rendu à partir de template.
• Translation : pour l’internationnalisation de l’application.

J’ai été très décu par Template. L’écriture des templates est beaucoup moins simple qu’avec Smarty. Par contre, les composants Mail et Translation sont très simples à utiliser et très efficaces (même si perfectible pour le second).

J’aurais bien aimé utiliser UserInput mais sa dépendance avec l’extension PHP filter me pose des problème avec mon hébergeur^[1].

Je suis actuellement en train de tester :

• Database : une API de communication avec les bases de données basée sur PDO.
• PersistentObject : un outil de persistance des objets basé sur le composant précédent.

J’aimerai par la suite tester :

• Dans un premier temps :
  • EventLog : pour générer des traces applicatives.
  • Feed : pour la gestion des flux RSS (pas encore disponible).
  • Url : pour manipuler des URLs.
• Puis dans un second temps :
  • Archive : pour manipuler des fichiers d’archives dans différents format de compression.
  • Cache : pour la gestion d’un cache.
  • ImageConvertion : pour manipuler des images.

Ces composants sont très utiles car ce sont le type de service que l’on retrouve dans la plupart des applications web^[2].

Notes

[1] Impossible d’installer des extensions PEAR, et le programme autoconf non disponible.

[2] Notez que certain de ces composants sont dédiés à l’utilisation de PHP en mode console.

Je vous avait parlé, il y a bien longtemps, de Koders. Il semble bien qu’un nouvel acteur arrive sur le marché des moteurs de recherche de code source. Et il se nomme Krugle. L’outil semble tout de même moins complet que Koders pusqu’il ne propose pas de filtrer les résultats des recherches par type de licence sous laquelle est publié le code source. Néanmoins, la licence utilisée est généralement précisée dans les résultats. D’après le site, le code retourné et un code libre…

Plus d’information sur la société sont disponibles sur le site officiel.

Beaucoup de site web utilisent des boîtes avec des angles arrondis dans leur interface graphique. En général, les utilisateurs trouvent celà plus sympatique. Pourtant, ils sont loin de penser auxproblèmes techniques auxquels sont confrontés les développeurs en terme d’implémentation.

En effet, les angles arrondis ne font pas partie, pour le moment, des langages CSS. Il faut donc ruser au moyen d’image ou de Javascript pour afficher de tels angles. Or, je ne suis pas fan des images et autre Javascript^[1].

Heureusement, CSS Play s’est collé au problème et propose une solution utilisant uniquement du CSS avec Krazy Korners. J’avoue que cette méthode est quelque peu brutale. Puisqu’elle demande de placer quatre sections <div /> avant et quatre autres après chaque boîte à afficher. Pourtant, cet exploit ne convient pleinement car il est compatible avec la plupart des butineurs actuels.

Pour ceux qui souhaitent avoir plus de détails sur cette implémentation, il existe une explication techniques sur les Krazy Korners.

Dans la bataille des géants du web, chacun essaie de promouvoir son framework Ajax.

(more…)

A force d’utiliser du JavaScript pour accéder à des services externes, de mauvaises surprises peuvent survenir…

(more…)

Quelle est la différence entre les filtres de post-compilation et les filtres de sortie ?

(more…)