GOOGLE API - Quelques compléments sur Google Maps

Je viens de découvrir deux nouvelles fonctions offertes par la version 2 de la l'API de Google Maps, la géolocalisation à partir d'une adresse postale et les boites d'information multi onglets.

La géolocalisation à partir d'une adresse postale

J'avais déjà proposée une solution pour retrouver la position géographique d'un lieu à partir de son adresse postale dans l'un des premiers messages de ce blog. Les deux éventuels problèmes posés par la méthode décrite était :

1. l'obligation de séparer chaque composante de l'adresse (rue, ville et pays)
2. l'utilisation d'un service sans pérennité assurée

Ces deux problèmes sont résolus grace à Geocoder de Google Maps.

L'une des méthodes les plus simples pour récupérer les coordonnées d'une adresse consiste à envoyer une requète http avec le format suivant :

http://maps.google.com/maps/geo?q=adresse+recherchee&output=csv&key=abcdefg

Où :

• q= : indiquer l'adresse recherchée au format URL. Exemple : place+concorde+paris+france
• output= : format de la réponse. On peut indiquer xml, kml, json ou csv selon le besoin. Le format csv est le plus simple à traiter puisqu'il ne renvoie que quatre nombres séparées par des virgule en résultat.
• key= : votre clé Google Maps

Comme indiqué, le format CSV renvoie une réponse sous forme de quatre nombres correspondant au statut de la réponse (200 si tout va bien), le niveau de zoom, la latitude puis la longitude.

Plusieurs onglets dans la boite d'informations

J'avais rapidement présenté comment ajouter une bulle d'information sur la carte GoogleMaps en utilisant marker.openInfoWindowHtml(bulle);.
Pour ajouter une boite de dialogue avec plusieurs onglet il suffit d'utiliser marker.openInfoWindowTabsHtml(infoTabs); en ayant préalablement défini infoTabs comme ceci :

var infoTabs = [
 new GInfoWindowTab("Titre Onglet 1", "Contenu onglet 1"),
 new GInfoWindowTab("Titre Onglet 2", "Contenu onglet 2")
];

AJAX - Mes photos de vacances avec LightBox

Comme promis lors de la présentation du "Smooth Slideshox", je vais présenter une seconde librairie Javascript permettant de présenter les photos. La bibliothèque LightBox est de plus en plus utilisé sur le Web. Il a l'immense avantage d'agrandir joliment une photo sans avoir à se soucier de la navigation. La bibliothèque s'appuie sur le couple prototype.js/scriptaculous.


Comment installer LightBox
L'installation et l'utilisation de la bibliothèque LightBox dans une application Lotus Domino est similaire aux autres librairies déjà présentées sur ce blog :

1. Télécharger le package sur http://www.huddletogether.com/projects/lightbox2/
2. Décompresser le fichier ZIP sur le disque dur
3. Ajouter les fichiers prototype.js, scriptaculous.js, effect.js et lightbox.js et lightbox.css dans les ressources partagées de la base Notes
4. Ajouter les fichiers close.gif, loading.gif, blank.gif dans les ressources images partagées. On peut aussi ajouter les autres images présentées mais elle ne seront pas nécessaires dans l'exemple décrit.

Comment utiliser la bibliothèque Lightbox
Depuis l'élément de structure devant afficher les images LightBox (masque ou page), indiquer comme "Contenu de titre HTML" :

"<link rel=\"stylesheet\"
type=\"text/css\" href=\"lightbox.css\"
media=\"screen\" title=\"Normal\" />
<script src=\"script/prototype.js\" type=\"text/javascript\">
</script> 
<script src=\"script/scriptaculous.js\" type=\"text/javascript\">
</script>
<script src=\"script/lightbox.js\" type=\"text/javascript\">
</script>"

Ajouter aussi sur l'évènement "OnLoad" :

initLightbox();

Votre masque ou page est prête.

Pour déclarer une image ou photo devant utiliser lightbox il faut utiliser la syntaxe suivante :

<a href="path_de_l_image_agrandie" rel="lightbox" >
<img src="path_de_l_imagette" />
</a>

Une mini-galerie photo sous Lotus Domino à télécharger
Pour l'ocasion j'ai créé une mini galerie photo sous Lotus Notes à télécharger. Ne vous attendez pas à une révolution. Cette application n'a que comme unique but de présenter l'intégration de LightBox dans une base Notes. Par contre, pour faire plaisir à Julien, les 3 photos fournies en exemple sont ... en couleur.

Télécharger la galerie photo Lightbox

AJAX - Tag Clouds

Une fois n'est pas coutume, je vais profité du travail des autres ! Je cherchais en effet comment mettre en place un nuage de tags dans une application Lotus Notes. Avant de commencer le développement j'ai recherché ce qui existait et j'ai été étonné de trouver rapidement trois approches différentes d'implémenter cette fonctionnalité Web 2.0 avec Lotus Domino. C'est d'autant plus interressant que ces trois méthodes utilisent chacune une approche différente typique de l'évolution du développement des applications Domino pour le Web, formula avec Javascript, LotusScript et LotusScript avec DXL.

Qu'est-ce qu'un nuage de tags ?

Un nuage de tags est une représentation sous forme de liste de mots représentés de taille proportionnelle à leur importance. Cette importance est principalement lié au nombre d'occurences du mot.
On retrouve aujourd'hi ces nuages de tags un peu partout sur les applications dites 2.0 comme delicious, Flickr ou encore Technorati.

Ces nuages de tags sont aussi utilisés dans l'application Nébuloscope de Jean Veronis dont je ne peux que recommandé la lecture du blog Technologies du langage.


Cette forme de représentation permet de remplacer la visualisation catégorisée des vues et s'interface très facilement avec les options de restriction des vues intégrées.


Trois approches d'implémentation de la solution

Comme indiqué en introduction les trois méthodes présentées utilisent chacune une approche originale est montrant bien les approches différentes de développement des application Lotus Domino.

Approche Formula/Javascript
Ferdy Christant propose de générer un tableau Javascript à partir d'une vue présentée en HTML et d'un peu de formula. Le Javascript se charge après de représenter le nuage de tags sur le poste client.
Cette approche ressemble énormément à de nombreux exemples que j'ai présenté ici.

L'avantage d'une telle méthode est d'économiser la charge coté serveur. Seule une vue est appelée.

Malheureusement cette méthode a aussi ces inconvénients :

• Le poste client doit supporter le Javascript. Même si quasimeent tous les navigateurs Web récents supporte le Javascript on peut le désactiver. De plus, même si le javascript peut s'exécuter coté client il faut tout de même faire attention au volume de données à traiter.
• Même si celà peut paraitre secondaire, cette méthode retire l'attrait principal du nuage de tag pour le webmestre. En effet, l'un des effets secondaire du nuage de tag est l'indexation des pages web auprès des moteurs de recherche. Les liens d'un nuage pointent non seulement sur des ensembles de pages du site mais en plus porte un nom cohérent, le tag, vers ce lien. Hors dans le cas d'un traitement Javascript, les moteurs de recherche ne voient pas ce nuage.
• Enfin, pour ceux qui voudraient encore développer des applications compatibles Web et Client Notes, il n'est pas possible d'utiliser cette méthode sur le client lourd.

Approche traditionnelle via LotusScript
Thomas Adrian utilise une méthode plus traditionnelle en utilisant un agent LotusScript. Le nuage de tags est calculé en temps réel par un agent LotusScript se basant sur un NotesViewNavigator et renvoie le résultat via des print. Le serveur est donc sollicité à chaque appel du nuage. Par contre, il génère une page Web qui pourra être proprement indexées auprès des moteurs de recherche. Bref les inconvénients de la première méthodes sont les avantages de celle-ci et inversement.

S'il fallait choisir une solution entre ces deux méthodes je privilégierai la première pour un Intranet avec un parc matériel et logiciel maitrisé, sans indexation auprès des moteurs de recherche et surtout où l'important est la vitesse de réponse du serveur. Par contre, la seconde approche est préférable pour une application à vocation publique.


Approche LotusScript/DXL
Christian Mueller propose une troisième approche pouvant répondre à tous les besoins exprimés en utilisant du LotusScript avec DXL. Le calcul du nuage de tag s'appuie exactement sur la même méthode que celle proposée via agent LotusScript par Thomas Adrian. La différence est qu'il n'envoie pas directement le résultat au navigateur Web mais créé un nouveau masque via DXL contenant ce nuage. La mise à jour de ce masque peut alors être recalculé uniquement lorsqu'un document est créé, modifié ou supprimé, bref lorsque le nuage est modifié.

Donc non seulement le serveur n'est pas sollicité lors de l'appel de cette page, le nuage est présentée sous forme HTML pour les moteurs de recherche mais en plus il est facilement présentable pour les utilisateurs de clients Lotus Notes.

Serait-ce la solution idéale ? Par rapport aux contraintes exposées précédemment, c'est sans conteste la meilleure solution. Reste le problème d'intégration et de maintenance de l'application. Le nombre de développeurs Lotus Notes utilisant et surtout maitrisant DXL est encore rare (du moins je n'en fait pas encore partie même si je prends des cours réguliers sur le blog de Yogi).

SITE - Version anglaise

Le peu d'articles de ces derniers jours n'est pas dût à manque d'inspiration ou pire à un manque de motivation. J'ai profité de la fin du mois d'Août pour mettre en ligne une version allégée de ce blog en anglais et en même temps tester la version Béta de la nouvelle version de Blogger.