Ces adresses web abbréviées sont incluses dans le code source de la page d'une photo (récente) mais ne sont pas facile à copier/coller.

Voici donc le bookmarklet permettant de faciliter la copie des short URI flic.kr

Flic.kr

Je rappelle : un bookmarklet est une micro application JavaScript qui s'installe en glissant un lien dans ses bookmarks.

Pour les curieux, voici le code :

void((function(){
	var a=document.getElementsByTagName("link");
	for (var i=0,j=a.length;i<j;i++){
		if(a[i].href.indexOf(('flic.kr'))>-1){
			prompt("copy...",a[i].href);
		}
	}
})())

© Marin for Gatellier.be, 2009. | Permalink | 4 comments | Add to del.icio.us
Post tags: bookmarklet, flickr, javascript

Je me dis que ça pourrait aider du monde d'avoir une compilation des méthodes pour retrouver les versions des Frameworks JavaScript.

Vous n'avez qu'à entrer les lignes suivantes dans une console firebug ou en faire un alerte JavaScript.

jQuery

jQuery.fn.jquery;
//returns jQuery version number ie: "1.2.6"

Prototype JS

Prototype.Version;
//returns Prototype version number ie: "1.5.2_pre0"

Mootools

MooTools.version;
//returns MooTools version number ie: "1.2.0"

ExtJS

Ext.version;
//returns ExtJS version number ie: "2.2.1"

Yahoo! User Interface Library (YUI)

YUI v2

YAHOO.VERSION;
//returns YUI version number ie: "2.5.2"

YUI v3

YUI().Env.meta.version;
//returns YUI version number ie: "3.0.0pr2"

Dojo Toolkit

dojo.version;
/*
returns an object representing DOJO version number ie: "1.3.0 (16807)" major=1 minor=3 patch=0 revision=16807
with major, minor, patch and revision properties
dojo.version.major, dojo.version.minor, etc
*/

Si vous employez d'autres Frameworks JavaScript, n'hésitez pas à laisser un commentaire, je mettrai cette liste à jour.

© Marin for Gatellier.be, 2009. | Permalink | 5 comments | Add to del.icio.us
Post tags:

Un namespace, une petite expression régulières et on obtient ceci :

var YT=(function(){
	return {
		getId:function(u){
			var a=u.match(/(\/vi\/|v=)([^&]+)/);
			return (a&&a[a.length-1]);
		}
	};
})();
prompt("VideoId",YT.getId("http://www.youtube.com/watch?v=_TiQCJXpbKg&fmt=6"));

Cette version ne se base pas sur la longueur de l'id vu que les id's sont susceptibles de changer...

Si ça peut servir à quelqu'un d'autre...

© Marin for Gatellier.be, 2009. | Permalink | One comment | Add to del.icio.us
Post tags: javascript, regexp, Snippet, YouTube

Status actuel de la géolocalisation :

• Le Groupe de Travail du W3C sur la géolocalisation est en place depuis peu, avec pour but de mettre sur pied des recommandations pour la fin de l'année.
• Firefox 3.1 promet l'implémentation d'une API de géolocalisation (pas encore de tests concluants sur la v3.1b2).
• Une série de providers (tels MaxMind) fournissent des services de conversion d'adresse ip vers un pays ou une adresse
• L'extension Firefox Loki permet une localisation précise sur base de la triangulation des signaux des routeurs wifi alentours.
• L'extension Firefox Geode promet d'employer les futures spécifications (navigator.geolocation.getCurrentPosition())
• Google Gears a aussi une API de géolocalisation
• Google JSAPI (qui permet d'ajouter dans vos sites les librairies JavaScript les plus employées) a des méthodes pour retrouver la position du visiteur.
• BrightKite permet de Twitter et géotagguer directement les photos prises avec son iPhone

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 {
			//http://code.google.com/apis/ajax/documentation/#ClientLocation
			if (typeof(google)==u){
				var jsapi=document.createElement("script");
				jsapi.src="http://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 :

• Le script de Dion Almaer qui emploie aussi Google Gears (via Ajaxians)
• 6 technologies de 2008 que vous devez utiliser maintenant (dont la géolocalisation) sur Wired
• Exemple de Tweet géotaggué via BrightKite

© Marin for Gatellier.be, 2009. | Permalink | 3 comments | Add to del.icio.us
Post tags: Firefox, gears, geode, geolocalisation, geolocation, geotagging, google api, Twitter

Prérequis

Quelques ingrédients sont nécessaires pour avoir une signature automatique :

• Un navigateur internet (Firefox/Safari/Chrome/Opera/IE)
• L'addon GreaseMonkey pour Firefox ou équivalent :
  • GreaseMetal pour Chrome
  • SIMBL et GreaseKit pour Safari MacOSX
  • gm4ie pour Internet Explorer
  • rien de spécial pour Opera, on peut directement exécuter des userscripts
• Un fichier JavaScript.

Amicalement, Greasemonkey

Greasemonkey est une extension qui vous permet d'écrire des scripts pour modifier les pages que vous visitez.

Voici le script :

//<![CDATA[
// ==UserScript==
// @name		Amicalement Greasemonkey
// @author		Marin Gatellier
// @namespace	http://www.gatellier.be/blog/
// @description	Ads your signature into textareas
// @include		*
// ==/UserScript==
(function(){
	var t=document.getElementsByTagName("TEXTAREA");
	var signature="\n\nAmicalement,\nGreasemonkey";
	for (var i=0,j=t.length;i<j;i++){
		if (t[i].value.indexOf(signature)<0){
			t[i].value=t[i].value+signature;
		}
	}
})()
//]]>

Vous devez évidemment modifier la variable signature (ligne 10) avec votre propre signature.

Petites astuces :

\n

représente une nouvelle ligne

\t

représente un tab

\\

représente un backslash

Une fois installé, ce petit script ajoutera automatiquement votre signature à chaque textearea de chaque site web (peut être customisé par site)

Installer le script Amicalement Greasemonkey

© Marin for Gatellier.be, 2008. | Permalink | 4 comments | Add to del.icio.us
Post tags: greasemonkey signature

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.

© Marin for Gatellier.be, 2007. | Permalink | 14 comments | Add to del.icio.us
Post tags:

Toutefois, il existe des cas concrets où le flash a des avantages non négligeables.

On connaissait SIFR - qui permet de changer les typos de texte à l'aide de javascript, de css et de flash - ses avantages et ses inconvéniants (sur des grosse pages pleines de titres, le contenu est parfois vraiment long à s'afficher sur un vieux pc).

Dans la même optique, vient d'arriver swfIR pour swf Image Replacement.

Il permet d'ajouter des ombres portées, des bords arrondis et des rotations (choses qu'on ne peut pas faire en css/javascript) à vos images sans devoir passer par votre éditeur d'image favori.

Pour cela, on a juste besoin d'insérer un javascript dans sa page, d'avoir le fichier .swf adéquat dans sa page et d'appeler une fonction javascript qui remplacera votre image par le fichier flash en question.

sir = new swfir();
sir.specify("border-width", "20");
sir.specify("border-color", "#fff");
sir.specify("src", "/swfir.swf");
sir.swap("#example img");

Les méthodes specify définissent les propriétés de l'image et la méthode swap remplace l'élément passé en paramètre (via la méthode DOM document.getElementsBySelector - que je ne connaissais pas)

Je pense qu'on va voir cette méthode fleurir aux quatres coins du web.

Liens relatifs

• swfIR
• plus d'exemples de swfIR en action
• via : A List Apart

© Marin for Gatellier.be, 2007. | Permalink | 11 comments | Add to del.icio.us
Post tags:

Bon, même si les explications sont en japonais et que mon court séjour là-bas l'année passée ne m'a pas permis d'apprendre toutes les subtilités de la langue, le concept est très intéressant.

Une interface de dessin gérée via javascript enregistre les points qui ont été tracés.

Un post en Ajax vers le serveur permet de récupérer les différents caractères qui ont été compris par le serveur.

Utilisation d'Ajax appropriée.

L'utilisation d'Ajax est tout à fait appropriée dans ce cas-ci. Le visiteur dessine à l'écran (en créant des span ayant une certaine class). Si la page avait été rafraîchie lors de la soumission du formulaire, le serveur aurait du retourner: soit une image générée avec les coordonnées des points, soit la liste des points qui auraient du être retraités pour redessiner le dessin (ouf)...

Il ne me reste qu'à m'exercer sur mes Kanjis avant de retourner voir Linou au Japon.

Liens relatifs

• L'application Ajax de reconnaissance de caractères japonais
• Afficher les caractères japonais
• Débogage avec Firebug
• via Fabrice Denis

© Marin for Gatellier.be, 2006. | Permalink | 2 comments | Add to del.icio.us
Post tags:

Je suis presque tombé de ma chaise. Je ne connaissais pas la moitié des capacités de cette merveilleuse extension de débogage pour FireFox, que j'emploie quand même depuis un bout de temps (v0.2 si les souvenirs sont bons).

Avant, je ne l'employais que pour tracer mes appels Ajax et les réponses du serveur et tester des variables et fonctions, le tout dans la console.

Je n'avais pas vraiment vu la puissance du débogueur.

Une petit explication s'impose.

Pour que Firebug s'arrête à chaque erreur, il faut que l'option soit activée. (onglet "Debugger", menu "Options").

Je pensais que toutes les options étaient regroupées à un seul endroit. Soit, je m'encroûte, soit l'interface n'est pas super parlante.

Bon maintenant regardons tout ce que l'on peut faire avec ce débogueur.

Le principe est le suivant : on appelle des méthodes de l'objet console en lui passant des paramètres.

console.log("message" [,objects])
console.debug("message" [,objects])
console.info("message" [,objects])
console.warn("message" [,objects])
console.error("message" [,objects])
etc...

La liste complète des méthodes de Firebug est bien évidemment disponible en ligne.

Vraiment bien fait ces petites méthodes (surtout celles qui permettent d'évaluer le temps qu'un javascript met).

Adopté par toute l'équipe des intégrateurs, et certains développeurs. Merci Joe Hewitt !

Liens relatifs :

• Firebug, l'extension de débogage pour Firefox
• Le blog du développeur de l'extension Firefox
• La vidéo explicative - qui m'a révélé le potentiel de Firebug
• Un autre article intéressant sur Firebug

© Marin for Gatellier.be, 2006. | Permalink | No comment | Add to del.icio.us
Post tags:

Le site tout en largeur est tout en transitions (scroll, apparitions,...), les pages de galerie peuvent être mises en favoris, mon dieu que c'est bien fait.

(bon, être riche et avoir mauvais goût - cf la veste pour toutou)

A voir absolument.

Liens relatifs :

• le site Gucci
• télécharger la librairie javascript prototype
• télécharger la librairie javascript script.aculo.us
• via: Ajaxian

© Marin for Gatellier.be, 2006. | Permalink | 3 comments | Add to del.icio.us
Post tags:

une communauté, des partages de photos, de l'Ajax, une carte du monde par satellite, des flux rss, un usage des géotags, et ce site est encore en beta...

© Marin for Gatellier.be, 2006. | Permalink | One comment | Add to del.icio.us
Post tags:

Ajax et DHTML

"Unobtrusive"

Un vrai concept Web2.0.

Liens relatifs:

• Information contextuelle sur le Wall Street Journal - la page exemple
• En espérant que ce ne soit pas détourné vers un IntelliTXT de VibrantMedia
• du javascript à tout va

© Marin for Gatellier.be, 2006. | Permalink | 3 comments | Add to del.icio.us
Post tags:

Il y a plusieurs solutions possible:

• une page html reprenant avec des vignettes à cliquer qui pointe vers, à chaque fois, vers une autre page reprenant le détail de la photo.
  
  Avantage: un très bon référencement.
  Inconvéniant: peut-être compliqué parce que si on n'emploie pas d'outils pour générer ces pages, le travail peut être fastidieux. -> employer une base de donnée et une technologie server-side
  l'ergonomie de l'interface est assez limitée.
  
  ex: pupius, photos tchorski
• un diaporama en javascript permet de visualiser toutes les images sur un seul écran
  
  Avantage: l'interface peut être plus ergonomique; toutes les images peuvent tenir dans un écran
  Inconvéniant: portabilité cross-platform/cross-media, la mise en oeuvre peut-être plus complexe pour des novices.
  
  ex: couloir.org
• un diaporama en flash bien construit pourrait-être la solution idéale. J'ai essayé slideshowpro.net et, à vrai dire, j'aime bien
  
  Avantage: l'interface est complètement modulable, les images sont gérés par un fichier xml, les pages sont "bookmarkables", le player flash est disponible sur beaucoup de plateformes, etc
  Inconvéniant: slideshowpro.net est une solution payante ($20) et elle requiert le logiciel Macromedia Flash

Verdict? personnellement, je vote pour la solution flash. Et vous?

© Marin for Gatellier.be, 2006. | Permalink | 12 comments | Add to del.icio.us
Post tags: