Premiers pas avec GEO

Le but de ce blog est de faire la démonstration d'un site web geolocalisable en utilisant le web sémantique, les microformats et la classe geo. Je vous propose donc de construire un blog autour de Google Maps et de son Api JavaScript. Pour ce faire je vous convie à une visite guidé de Marseille et des alentours. Avant de passer aux choses sérieuses, il faut posséder un blog ou en créer un chez Blogger. J'ai ajouté de suite et sans réfléchir les codes pour avoir des stats et le référencèrent Google, bien sur ce n'est pas obligatoire. La transposition vers d'autres systèmes ne devrait pas être trop difficile.

1. Ajout du code Google Analytics : Paramètres Analytics > Paramètres de profil > Code de suivi
2. Copiez le bloc de code Javascript dans chaque page Web dont vous souhaitez effectuer le suivi, en le plaçant juste avant la balise ◄/body►
3. Ajout du code Outils Google pour les webmasters : Tableau de bord > Votre blog > Outils > Gérer la validation de site
4. Copiez la balise META mentionnée en la plaçant juste avant la balise ◄/head►. " Plus d'infos ici...

Notre-Dame-de-la-Garde

• Notre-Dame-de-la-Garde workrue du Fort du Sanctuaire 13006 Marseille.

Notre-Dame-de-la-Garde, également appelée "Bonne mère", est l'une des basiliques mineures de l'Église catholique. Elle est située sur les hauteurs de Marseille à 162 m d'altitude, au sud du Vieux-Port.

• Source

Geo est un simple format pour baliser l'information WGS84 des coordonnées géographiques (latitude, longitude), adaptable pour embarquement dans le HTML ou XHTML, Atom, RSS et le XML arbitraire. geo est une représentation 1:1 de la propriété "geo" dans le standard vCard Notre aventure peut commencer en incluant notre premiére balise geo dans une page:

1. Ajouter la balise à votre code HTML.

Notre-Dame-de-la-Garde
Ce qui nous donne : Notre-Dame-de-la-Garde. Il n'y a rien de visible sauf en passant le curseur sur le texte. La balise ABBR nous renvoie les coordonnées Latitude longitude de la celebre basilique de Marseille. Le but des micro-formats étant de rendre compréhensible par une machine, un programme, des informations humaines, il va bien sur falloir un peu travailler. A noter que certain "Parser" de microformats ne reconnaisse que la balise ABBR, ce qui est absurde, mais autant faire avec. Avant d'aller plus loin je vous propose juste de rajouter une balise CSS à votre blog, pour visualiser les Microformats Geo.

1. Tableau de bord > Mise en page > Modifier le code HTML
2. Ajouter les lignes suivantes juste avant : ]]◄/b:skin►

/* Microformat */ .geo { border:1px solid #000000; }

• Notre-Dame-de-la-Garde.

Et sur une carte Google Maps ?

• http://maps.google.com/?hl=FR&ie=UTF8&ll=43.284008,5.371059&spn=0.002062,0.004034&t=h&z=18.

Le parametre ll=43.284008,5.371059 est le même que celui de notre balise. Une prochaine approche consiteras à trouver cette information.