Geotagging Bookmarklet

ou I CAN HAZ GEOTAGZ?

Status actuel de la géolocalisation :

Geotag bookmarklet

Via les spécifications disponibles et méthodes les plus faciles, je viens donc d’écrire un bookmarklet qui rajoute votre position géographique dans n’importe quel page web.

GeoTag Bookmarket

Pour l’installer, il suffit de glisser déposer le lien ci-dessus dans votre barre de favoris.

En cliquant dessus, le bookmarket rajoutera votre position (s’il la trouve) au premier champ textarea de la page que vous visitez. Parfait pour Twitter.com

Le script de mon Geotag bookmarklet

var GT=(function(){
	var P=4,u="undefined",d=document;
	var format=function(n,c){
		var m=Math.pow(10,c);
		return Math.round(n*m)/m;
	};
	var addMarker=function (p){
		var t=d.getElementsByTagName("textarea")[0];
		if(t.value.indexOf("#geo")<0){t.value+="#geo:"+format(p.latitude,P)+","+format(p.longitude,P);}
	};
	this.getLocation=function(){
		var p=google.loader.ClientLocation;
		if (p!==null){addMarker(p);}
	};
	this.tag=function(){
		if(typeof(navigator.geolocation)!=u){
			//https://developer.mozilla.org/En/Using_geolocation || geode
			navigator.geolocation.getCurrentPosition(function(p){addMarker(p);});
		} else {
			////code.google.com/apis/ajax/documentation/#ClientLocation
			if (typeof(google)==u){
				var jsapi=document.createElement("script");
				jsapi.src="//www.google.com/jsapi?callback=GT.getLocation";
				d.getElementsByTagName("body")[0].appendChild(jsapi);
			}
		}
	};
	return {tag:tag,getLocation:getLocation};
})();
GT.tag();

Mon script vérifie si l’objet navigator.geolocation existe (donc, si c’est FF3.1b2 ou si Firefox a l’addon Geode installé), sinon, il utilisera les méthodes fournies par le JSAPI de Google.

Bugs connus :

  • Si vous passez par un server proxi pour vous connecter à internet ou si simplement les services de géolocalisation ne reconnaissent pas, aucun tag ne sera affiché.
  • Internet Explorer 6 ne supporte pas les longs bookmarklets, je vous recommande donc d’installer un autre navigateur.
  • La géolocalisation avec Firefox 3.1 beta 2 ne marche pas encore super bien.
  • Je limite la précision à quatre décimales.
  • J’emploie le système de géotagging employé BrightKite (par soucis de brièveté pour le status Twitter #geo:<lat>,<long>) et pas celui recommandé par Flickr (geo:lat=<lat>,geo:lon=<long>)

Liens relatifs :

Posté le 04/01/2009 à 15h53 dans :
Addons, browsing, Code, Firefox, geotagging, javascript, Twitter, utilitaire

3 commentaires 

Status 503 pour vos sites en maintenance

Lorsque vous faites des mises à jour importantes sur votre site, il est judicieux de mettre celui-ci en mode “maintenance“.

En effet, vos visiteurs peuvent être perturbés par les erreurs éventuelles de design et de code. De même, les moteurs de recherche peuvent indexer votre site pendant les opérations de mise à jour.

Bref, imaginez les effets néfastes d’une telle opération…

Les recommandations Google : le status 503 (service non disponible)

De plus Google recommande de renvoyer une erreur 503:

If my site is down for maintenance, how can I tell Googlebot to come back later rather than to index the “down for maintenance” page?
You should configure your server to return a status of 503 (network unavailable) rather than 200 (successful). That lets Googlebot know to try the pages again later.

Ce qui se traduit en gros par :

Si mon site est en mode de maintenance, comment puis-je indiquer à Google revenir plus tard au lieu d’indexer une page “Site en maintenance”?
Vous devriez configurer votre serveur pour qu’il renvoie un status 503 (réseau indisponible) plutôt qu’un status 200 (requête satisfaite). Ceci fait comprendre à Googlebot qu’il doit retester ces pages plus tard.

Maintenant qu’on sait ce qu’il faut faire, voici comment le faire :

Lire la suite…

Posté le 04/04/2008 à 22h43 dans :
Bonnes pratiques, Code, tutorial

3 commentaires 

CSS: Pseudo classes sur Internet Explorer

Grâce aux expressions CSS d’Internet Explorer, il y a moyen de simuler les pseudo-classes qui ne sont pas supportées par IE6.

Les expressions CSS d’Internet Explorer

En effet, les expressions CSS (apparues avec IE5) permettent de calculer dynamiquement (via JScript) les différentes propriétés stylistiques.

On attribue une valeur calculée par JScript à une propriété CSS d’un élément html. Les différents objets du DOM sont supportés

#centeredDiv {
	position:absolute;
	left:
		expression(
			(document.body.clientWidth/2)-
			(this.offsetWidth/2)
		);
	top:
		expression(
			(document.body.clientHeight/2)-
			(this.offsetWidth/2)
		);
}

Sur Internet Explorer, cet exemple positionnerait l’élément ayant un id centeredDiv au centre de la page en le positionnant à la différence de la moitié hauteur de la page (document.body.clientHeight/2) et de la moitié de sa hauteur (this.offsetWidth/2). Notez que this représente l’objet en lui-même.

Lire la suite…

Posté le 09/04/2007 à 17h42 dans :
Code, CSS, html, javascript, productivité, tutorial

14 commentaires 

Utilisabilité et flash : menus contextuels (m.à.j.)

Ceci est une mise à jour de mon article sur les liens utilisables dans flash à l’aide de menus contextuels.

Un développeur flash d’Emakina a remanié mon script, avec une classe ActionScript 2, pour faciliter l’intégration des menus contextuels sur les liens dans les animations flash.

Voici l’exemple :

Exemple de menu contextuel sur les liens en flash avec une classe ActionScript 2

Exemple qui, si vous cliquez avec le bouton droit de la souris sur l’un des trois derniers boutons, devrait donner ceci.

Menu contextuel sur les liens dans flash via une classe ActionScript 2

Utilisation :

Cette fois-ci, c’est encore plus simple :

Vous importez un fichier actionscript dans votre fichier .fla et, lorsque vous avez un lien, au lieu d’appeler la fonction .getURL(), vous employez la classe new addContextMenuLink() avec deux paramètres.

  1. le nom de l’instance d’un movieclip ou d’un bouton,
  2. l’url qui sera appelée lors du clic du lien.

Exemple :

Voici le code source de l’exemple ci-dessus :

import addContextMenuLink.as;
new addContextMenuLink(advancedButton,"//www.google.be");
new addContextMenuLink(advancedButton2,"//www.gatellier.be/blog/");
new addContextMenuLink(advancedButton3,"//blog.sakanadesign.com");

Les trois boutons derniers boutons de l’animation ont été nommés respectivement advancedButton, advancedButton2 et advancedButton3. Chacun de ces trois boutons aura la série de liens contextuels pour ouvrir les url vers laquelle ils pointent, dans la même fenêtre, dans une nouvelle fenêtre et pour copier cette url dans votre clipboard.

Liens relatifs :

Si vous avez des remarques ou des améliorations à apporter, n’hésitez pas à m’en faire part au travers des commentaires.

Posté le 20/01/2007 à 17h49 dans :
browsing, Code, emakina, Flash, tutorial, usability

3 commentaires 

Utilisabilité et flash : menus contextuels

Une version plus récente de cet article (avec l’emploi de classe ActionScript 2) est désormais disponible.
date d’édition : 20/01/2007

Voici une animation flash que je viens de créer : elle contient tout simplement deux boutons.

Ces deux boutons font apparemment la même chose.

Cliquez maintenant les deux boutons avec le bouton droit de votre souris (touche control et clic pour ceux qui n’ont qu’un bouton à leur souris.)

Un clic droit sur le second bouton devrait donner quelque chose comme ceci :

Capture d'écran d'un menu contextuel d'un fichier flash permettant d'ouvrir les liens dans une nouvelle fenêtre ou copier l'url du lien

Un menu contextuel permettant soit d’ouvrir le lien dans la même page, soit de l’ouvrir dans une nouvelle fenêtre, soit de copier le lien dans le clipboard.

Enfin un fichier flash mieux utilisable !

Le code ActionScript :

J’ai créé un fichier flash à votre disposition (.zip – 6KB) contenant deux boutons (que j’ai nommés simpleButton pour le premier bouton et advancedButton pour le second) dans lequel j’ai écrit le code suivant :

var url="//www.gatellier.be/blog/";
//creation des éléments d'un menu contextuel
var usableContextMenu=new ContextMenu();
//les valeurs par défaut sont cachées
usableContextMenu.hideBuiltInItems();
usableContextMenu.customItems.push(
	//rajout d'un élément menu
	new ContextMenuItem(
		//définition du label du menu
		"&Open Link",
		//définition de la fonction qui sera exécutée
		function(){
			getURL(url,"_self");
		}
	)
);
usableContextMenu.customItems.push(
	new ContextMenuItem(
		"Open Link in New &Window",
		function(){
			getURL(url,"_blank");
		}
	)
);
usableContextMenu.customItems.push(
	new ContextMenuItem(
		"&Copy Link to Clipboard",
		function(){
			System.setClipboard(url);
		}
	)
);
//association du contexte menu à mon bouton
advancedButton.menu=usableContextMenu;

Explications :

aUR la ligne 3, je crée une instance d’un objet ContextMenu, je la nomme usableContextMenu.

La ligne 5 me sert à cacher les éléments par défaut d’un menu contextuel d’une animation flash.

Les lignes 8, 17 et 25 ajoutent un élément menu contextuel à mon menu. Chacun des ces éléments est défini en tant que ContextMenuItem avec un label, et une action.

Pour les trois liens, je reprends la variable définie ligne 1 : url. Mais chaque fois de manière différente :

  1. Ligne 13 : pour ouvrir le lien dans la même fenêtre.
  2. Ligne 21 : pour ouvrir le lien dans une nouvelle fenêtre.
  3. Ligne 29 : pour copier dans le clipboard.

aUR ligne 34, je défini la propriété menu de l’objet advancedButton (le bouton que j’ai créé) comme étant l’objet menu que j’ai créé à la ligne 3 usableContextMenu

J’ai aussi des petites actions sur les deux boutons pour qu’ils réagissent à un clic gauche de la souris.

Petit Truc :

Pour que les liens soient encore un petit peu plus accessibles, j’ai rajouté des raccourcis claviers (qui ne seront visibles qu’avec le menu contextuel ouvert et la touche ALT du clavier enfoncée).

Pour rajouter ces raccourcis clavier, il suffit de rajouter un & devant la lettre définie comme raccourcis.

Je me suis basé pour ces raccourcis aux mêmes raccourcis que l’interface de Firefox pour plus de cohérence.

Usage :

L’usage de ce type de liens contextuels dans les animations flash n’a de sens, évidemment, que lorsque les liens appelés sont des liens externes. Ou que les différentes parties de l’animation ont une adresse propre.

Merci déjà à tous les flasheurs d’employer des menus contextuels sur les liens de leurs animations flash.

Liens relatifs :

Posté le 17/01/2007 à 17h01 dans :
browsing, Code, Flash, tutorial, usability

7 commentaires 

← Previous Page — Next Page →