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

En sept jours, on a eu le temps de s'habituer aux nouveautés apportées à Firefox :

Quelques changements de Firefox 3 cosmétiques et fonctionnels :

• la "AwesomeBar"
• l'option de sauvegarde de session
• le gestionnaire de signets
• le gestionnaire de téléchargement

Quelques changements de Firefox 3 sous le capot :

• des API microformats,
• quelques éléments de HTML5,
• l'implémentation de JavaScript 1.8,
• des améliorations DOM et
• surtout des améliorations CSS

display:inline-block dans Firefox 2 et 3

Firefox 3 supporte enfin les propriétés d'affichage: display:inline-block et display:inline-table.

Pour nous, intégrateurs, ça veut dire qu'enfin, on pourra mettre se passer des propriétés fokloriques display:-moz-inline-box et display:-moz-inline-block pour avoir le même rendu.

Mais ce n'est pas encore pour tout de suite tant que le taux de pénétration ne sera pas encore suffisant.
En attendant, on n'oubliera pas de tester ses pages sur les différentes versions des navigateurs (en employant Firefox Portable).

On écrira du code compatible:

<style type="text/css">
.element {
	display:inline-block !important;
	display:-moz-inline-box;
}
</style>

En attendant, nous pouvons aussi faire du prosélitisme pour Firefox 3.

Taux de pénétration de Firefox 3

Je pense que le but de la tentative de record du monde était surtout de faire changer beaucoup de monde de Firefox 2 à Firefox 3 et donc d'augmenter le taux de pénétration.

Pour faire avancer la cause, je vous propose d'afficher les taux de pénétration des différents navigateurs visitant mon blog ainsi qu'un site "grand public" et de pouvoir les comparer de semaine en semaine. Et d'ainsi avoir une vue plus personnelle du taux de pénétration de Firefox 3

Semaine 1 - les navigateurs visitant ce blog :

Navigateurs 17/06/2008 - 24/06/2008

Pénétration Firefox 17/06/2008 - 24/06/2008

Pénétration Internet Explorer 17/06/2008 - 24/06/2008

Semaine 1 - les navigateurs visitant un site tout public :

Navigateurs 17/06/2008 - 24/06/2008

Pénétration Firefox 17/06/2008 - 24/06/2008

Pénétration Internet Explorer 17/06/2008 - 24/06/2008

A vous de jouer !

Je vous propose de participer à mon projet et de vous aussi afficher les statistiques des visites de vos site/blogs.

Et pour nous faire gagner du temps, allez chez vos parents, frère(s), sœur(s), voisin(s), connaissance(s) et faites leur connaître Firefox 3 ou tout autre navigateur respectant les standards du web.

Liens relatifs :

• Statistiques heure par heure depuis le lancement de Firefox 3
• Le blog Firefox Metrics tout sur le taux d'adoption
• Le groupe Firefox Stats

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

Ma version: Firefox 2.0.0.14 (2008040413)

Operating System: WINNT (x86-msvc)

• Adblock Plus 0.5.11.4
  Firefox 0.7 - 3.*
  Filters ads from web-pages. Now with whitelisting and synchronization.
• Better Flickr 0.2.1
  Firefox 0.8 - 3.0
  Enhances Flickr with Greasemonkey user scripts.
• BetterPrivacy 1.14
  Firefox 1.5 - 3.0.*
  Super-Cookie Safeguard
• Bloglines Toolkit 1.6.8
  Firefox 1.5 - 2.0+
  Browser utilities for use with Bloglines
• Colour Contrast Analyser 0.96
  Firefox 0.7 - 3.*
  Examines the colour contrast of elements in the DOM.
• Context Search 0.4.1
  Firefox 2.0a2 - 3.0b3pre
  Expands the context menu's 'Search for' item into a list of search engines.
• del.icio.us Complete 1.3
  Firefox 0.8 - 2.0.*
  del.icio.us is a social bookmarks manager. It allows you to easily add sites you like to your personal collection of links, to categorize those sites with keywords, and to share your collection not only between your own browsers and machines, but also with others.
• DevBoi 0.5.1
  Firefox 1.5 - 2.5
  Adds a sidebar with web-development references.
• DevBoi PHP Package 0.1.0
  Firefox 1.5 - 2.5
  Adds PHP reference to DevBoi
• DevBoi: Prototype JS Reference (1.5.1) 0.0.3
  Firefox 1.5 - 3.0
  Adds Prototype JavaScript Library reference to DevBoi
• DOM Inspector 1.8.1.14
  Firefox 2.0.0.14 - 2.0.0.14
  Inspects the structure and properties of a window and its contents.
• Dublin Core Viewer 0.5
  Firefox 1.5 - 3.0a1
  Displays Dublin Core Metadata embedded into the <head> section of an XHTML Web page using the <meta> and <link> elements.
• Dust-Me Selectors 2.0
  Firefox 1.5 - 2.0.0.*
  Finds unused CSS selectors
• Extension List Dumper 1.13.1
  Firefox 1.5 - 3.0b5
  Dumps a list of the installed extensions.
• Fangs 1.0.3
  Firefox 1.0 - 2.0+
  Renders a text version of a web page similar to screen reader output.
• Firebug 1.05
  Firefox 1.5 - 2.0.0.*
  Web Development Evolved
• Firecookie 0.0.6
  Firefox 2.0 - 3.0b5pre
  Cookie manager for Firebug. Firebug has to be installed in order to use this extension.
• Firefox Accessibility Extension 1.4.0.4
  Firefox 1.5 - 3.0b5pre
  Adds tools for accessible navigation and the development of accessible web content.
• Firefox Throttle 1.00
  Firefox 1.5 - 2.0.0.*
  Bandwidth utilization throttling plug-in for Firefox.
• Geo 0.8
  Firefox 1.5 - 3.0.*
  Opens useful sites for pages geographically marked with ICBM or geo.position META tags.
• Gmail Notifier 0.6.3.3
  Firefox 1.5 - 3.0
  A notifier for Gmail accounts.
• Go Up 1.0
  Firefox 1.5 - 2.0.0.*
  Easily navigate 'up' a level in a web site
• Google Gears 0.3.14.2
  Firefox 1.5 - 2.0.*
  These are the gears that power the tubes!
• Google Notebook 1.0.0.20
  Firefox 1.5 - 3.0.*
  Allows notetaking while browsing
• Google Pagerank Status 0.9.8
  Firefox 1.5 - 2.0+
  Display the Google PageRank in your browser's status bar.
• Greasemonkey 0.7.20080121.0
  Firefox 1.5 - 3.0b5
  A User Script Manager for Firefox
• How'd I Get Here 0.1.2
  Firefox 1.5 - 2.0.0.*
  Helps you remember how you first discovered a site.
• Html Validator 0.8.4.0
  Firefox 1.0 - 2.0.0.*
  Adds HTML validation to the View Page Source of the browser. The validation is done by Tidy from W3c.
• IE View 1.3.7
  Firefox 1.0 - 3.0.*
  Open pages in IE via Firefox menus
• JavaScript Debugger 0.9.87.3
  Firefox 0.9 - 3.0pre
  JavaScript debugger and profiler
• keyconfig 20060828.1
  Firefox 1.5.0.6 - 2.0.0.14
  Rebind your keys.
• KGen 0.3
  Firefox 1.0 - 3.0.*
  Display strongest keywords of a webpage
• LinkChecker 0.6.2
  Firefox 1.5 - 3.0b5
  Check the validity of links on any webpage.
• Linky 2.7.1
  Firefox 0.7 - 2.0+
  Open/download/validate links and pictures in tabs or windows
• Live HTTP Headers 0.14
  Firefox 0.8 - 3.0.*
  View HTTP headers of a page and while browsing.
• Longdesc 0.6
  Firefox 1.5 - 3.0.*
  Makes an image's longdesc link attribute accessible via context menu.
• Mobile Barcoder 0.1.4
  Firefox 1.0 - 3.0b4
  Generate on-the-fly barcodes to zap with your mobile device
• ocawatoolbar 1.1.6.2
  Firefox 1.5 - 2.1
  Check accessibility of your web site.
• Operator 0.9.3
  Firefox 2.0 - 3.0.*
  The Semantic Web in Action
• OperaView 0.6.1
  Firefox 1.0 - 3.0.*
  Open pages in Opera from Firefox, Mozilla, Flock and Netscape 8 context menus.
• pageaddict 0.4
  Firefox 1.5 - 3.0b4pre
  Monitor your internet addiction
• PicLens 1.6.4.3021
  Firefox 2.0 - 2.0.0.*
  Discover More
• SecurePassword Generator 0.5.1
  Firefox 0.7 - 2.*
  Creates a toolbar icon and dialog which helps to create secure passwords.
• Stylish 0.5.7
  Firefox 1.5 - 3.0.*
  Customize the look of websites and of the user interface.
• Tab Clicking Options 0.6.9
  Firefox 1.0 - 3.0.*
  Assign tab related actions to clicking events on a tab or the tabbar
• Tails Export 0.3.2
  Firefox 1.5 - 2.0.0.*
  Extension for Showing and Exporting Microformats.
• Tamper Data 10.0.4
  Firefox 2.0 - 3.0.*
  View and modify HTTP/HTTPS headers etc. Track and time requests.
• Unicode converter/Input Tool 2.099
  Firefox 1.5 - 3.0b2
  Converts character references, etc. into Unicode and back
• User Agent Switcher 0.6.11
  Firefox 1.0 - 3.0.*
  Adds a menu and a toolbar button to switch the user agent of the browser.
• View Cookies 1.6
  Firefox 1.0 - 2.0.0.*
  View cookies of the current web page.
• View Dependencies 0.3.2.2
  Firefox 1.0 - 2.0.0.*
  Adds a tab listing dependencies and their sizes in the Page Info window.
• ViewSourceWith 0.1.1
  Firefox 1.5 - 3.0.*
  View page source with external application
• Web Developer 1.1.6
  Firefox 1.0 - 3.0.*
  Adds a menu and a toolbar with various web developer tools.
• XHTML Mobile Profile 0.5.3
  Firefox 1.0 - 3.0b5
  Allows XHTML Mobile Profile to be displayed in the browser.
• YSlow 0.9.5b1
  Firefox 1.5 - 3.0b5
  Make your pages faster with Yahoo!'s performance lint tool.

Je teste aussi évidemment mon code sur IE 6, 7, 8 (et des fois sur 5.5), Opera 9.27, 9.5b, FF 3RC1, Safari etc...

© Marin for Gatellier.be, 2008. | Permalink | 7 comments | Add to del.icio.us
Post tags: addons, emakina, extensions, Firefox, integrator

Reçu récemment à la réception d'Emakina : la carte de vœux d'Anysurfer.be.

Même si je n'ai pas tout compris (et si quelqu'un peut m'aider...), j'ai trouvé la démarche vraiment sympatique.

Il s'agit en fait d'un cécogramme comme on peut en envoyer sur le site Braillepost. Notre carte de remerciement est bien sûr passée par ce service.

C'est clair que maintenant, je suis concerné. J'en reparlerai.

Liens relatifs :

• Le service d'envoi de cécogrammes.
• Les directives pour obtenir le label Anysurfer.
• à étudier : OpenWeb pour les Standard du web.
• à mettre en favori : le blog de Webatou (coucou Monique !)

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

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 qui, si vous cliquez avec le bouton droit de la souris sur l'un des trois derniers boutons, devrait donner ceci.

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,"http://www.google.be");
new addContextMenuLink(advancedButton2,"http://www.gatellier.be/blog/");
new addContextMenuLink(advancedButton3,"http://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 :

• Téléchargez les fichiers source de cet article.
• Le blog de Sakanadesign qui a écrit la classe actionscript.

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

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

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 :

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="http://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 :

• Le fichier source de l'animation flash de cette page (.zip - 6KB)
• Plus d'infos sur la classe ActionScript 2.0 ContextMenuItem.
• Inspiration : le petit lien sur la splash page de Néa (mais la en AS 3)

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

Viddler est un service de partage de vidéo en ligne pas comme les autres. Son gros avantage est de permettre d'attribuer des tags et de commenter des moments précis des vidéo.

Il permet aussi de référer une image figée lorsque l'on envoie la vidéo. Grâce à Viddler, vous ne devrez plus regarder l'entièreté de films qu'on vous envoie ou que vous trouvez sur internet pour voir une image particulière.

(...)
Read the rest of Ajouter de tags et de commentaires dans les vidéos avec Viddler (196 words)

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

via Technorati

Après l'excitation du moment, et la nuit portant conseil, voici une petite liste non exhaustive de mes remarques sur l'iPhone.

Les plus :

• C'est un appareil convergent, regroupant appareil photo, gsm, console internet portable, lecteur multimédia
• Il a un vrai browser web (Safari) donc j'espère qu'il supporte aussi Ajax.
• Le design est quand même magnifique.

On ne parle pas de moi sur cette photo, mais bien d'un restaurant sushi dans Marin County à côté de San Francisco

Les moins :

• Un module/application GPS.
• Une interface Accessible
• Une résolution de photo digne de ce nom (cfr. Nokia N95)
• Des applications (type lecteur de Code QR)
• Les vraies spécifications techniques (combien de RAM ? CPU ?)

Je recherche :

Un lien vers la photo que Steve Jobs a envoyée sur Flickr. Comme ça je pourrai me faire une idée de la qualité de l'appareil photo de l'iPhone

PS : Pour l'instant aucun résultat dans Flickr pour une recherche par marque sur "Apple". Et bien sûr, moi aussi, j'en veux un !

Liens relatifs :

• le minisite iPhone d'Apple
• le graphe actualisé Technorati sur les tag iPhone

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

Format XML OpenSearch

Les définitions des différents éléments composant un XML OpenSearch nous aident à composer notre propre plugin de recherche.
Pour une installation standard de Firefox, vous trouverez les plugins déjà installés dans le répertoire C:\Program Files\Mozilla Firefox\searchplugins. Normalement ce répertoire ne contient que des fichiers .xml qui sont les définitions des plugins. Prenons-en un, le fichier amazon.xml

<SearchPlugin xmlns="http://www.mozilla.org/2006/browser/search/">
<ShortName>Amazon.com</ShortName>
<Description>Amazon.com Search</Description>
<InputEncoding>ISO-8859-1</InputEncoding>
<Image width="16" height="16">data:image/x-icon;base64,iVBORw0KGgoA...=</Image>
<Url type="text/html" method="GET" template="http://www.amazon.com/exec/obidos/external-search/">
	<Param name="field-keywords" value="{searchTerms}"/>
	<Param name="mode" value="blended"/>
	<Param name="tag" value="mozilla-20"/>
	<Param name="sourceid" value="Mozilla-search"/>
</Url>
<SearchForm>http://www.amazon.com/</SearchForm>
</SearchPlugin>

SearchPlugin

Définition du namespace des différents nodes du fichier xml (dans ce cas-ci, on parle de la définition de Firefox)

ShortName

Nom du plugin de recherche

Description

Description du plugin de recherche

InputEncoding

Encodage des caractères du formulaire

Image

Définition de l’icône qui sera ajoutée dans l’interface de recherche encodée en Base64

Url

Contient les différents attributs du formulaire de recherche

type

Format dans lequel les données sont envoyées au serveur

method

GET ou POST méthode d’envoi des données au serveur

template

C’est l’ACTION du formulaire de recherche

Param

Les différents champs qui sont passées au formulaire. Le champ sur lequel se fait la requête doit avoir la value="{searchTerms}". C’est les termes qui seront entrés dans le formulaire de recherche de Firefox

SearchForm

C’est le lien vers les soumissions de formulaires vides iront.

Analyse d’un formulaire à convertir en plugin.

Pour un premier exemple, je me suis basé sur la page d’accueil de Tutmaks.com (excellente ressource de tutoriels). Le moteur de recherche du site ne fonctionnant pour l’instant que sur des pages /index.php et pas sur les pages de détail /story.php.

A l’aide de l’Inspector de Firebug, j’ai facilement repéré que le nom du champ du formulaire était “search” l’action est vide (d’où l’erreur ci-dessus).

<InputEncoding>ISO-8859-1</InputEncoding>
<Url type="text/html" method="GET" template="http://tutmarks.com/index.php">
	<Param name="search" value="{searchTerms}"/>
</Url>

Pour un second exemple, j’ai pris la recherche inversée de numéros de téléphone sur 1307.be.

Il y a plusieurs champs cachés dans ce formulaire-ci. J’ai repris les nom et valeurs de ces champs en tant que Param de mon XML

<InputEncoding>ISO-8859-1</InputEncoding>
<Url type="text/html" method="POST" template="http://1307.be/fr/servlets/ReverseServlet">
	<Param name="number" value="{searchTerms}"/>
	<Param name="iso_language" value="fr"/>
	<Param name="template" value="1x07be"/>
</Url>

Ajout de l’icône du plugin de recherche.

J’ai repris les favicônes des sites repectifs. Je les ai enregistrées sur mon ordinateur et je les ai converties en base64 avec cet outil. De ce fait, les images sont transformées en code et sont plus facilement transportable d’un environnement à un autre (les images sont incluses dans le fichier XML sous forme de code).

La documentation OpenSearch précise qu’on peut aussi mettre une url vers une icône de favori ou autre image.

<Image height="16" width="16" type="image/x-icon"><br />
http://example.com/favicon.ico<br />
</Image><br />

Code à rajouter dans les pages html.

Pour que le plugin soit à la disposition de tout le monde, il faut l’insérer dans les pages de votre site.

Cela se fait aisément en ajoutant une balise link real="search" dans le header de la page html.

<link rel="search" type="application/opensearchdescription+xml" title="Tutmarks.com" href="/chemin-vers/définition.xml">

Ajouter les plugins créés à Firefox 2.

Quand un plugin de recherche a été trouvé par Firefox, l’icône de la liste des moteurs de recherche prend un fond bleuté.

En cliquant sur cette icône, on peut voir la liste des plugins de recherche. Dans le bas du menu, on peut rajouter les différents plugins de recherches.

L’ordre des moteurs de recherche peut être modifié et on peut aussi en supprimer via l’interface de gestion des plugins de recherche

Le plugin de recherche Tutmarks pour Firefox 2 prêt à l’usage.

Liens relatifs

• l’organisation OpenSearch
• Documentation sur le site Mozilla des plugin OpenSearch
• Tutorial pour les extensions Firefox avant la version 2
• Encoder et décoder en Base64 en ligne

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

© Reblog for Gatellier.be, 2006. | Permalink | 13 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:

about:config, la base de registre de FireFox

En entrant about:config dans la barre d'adresse de FireFox, vous arrivez dans l'espace de configuration de FireFox. J'avoue, l'interface est un peu austère.

Cette interface présente toutefois champs permettant de faciliter les recherches.
Quatre colonnes sont présentes: Preference Name, Status, Type et Value.

La colonne Preference Name reprend les différentes propriétés des différents éléments de Firefox de manière assez compréhensible. Préférences d'accessibilité, du browser, des extensions,...

La colonne Status nous dit si la valeur a été modifiée (soit par une extension, soit par une préférence, soit a la main dans la console de configuration). Dans ce cas, la ligne sera en corps gras et la valeur sera user set. Dans le cas contraire, le corps sera normal et la valeur default

La colonne Type reprend le type de donnée que la propriété peut avoir. Boolean pour une valeur vraie ou fausse, Integer pour un nombre entier et String pour toute valeur texte.

Enfin la colonne Value qui contient les valeurs des différentes propriétés. C'est cette colonne qui nous intéresse. Vous pouvez changer ces valeurs la double-cliquant. Pour les types Integer et String un boîte de dialogue apparaitra et vous pourrez entrer une nouvelle valeur. Pour le type Boolean, le double-clic changera la valeur de vrai à faux et vice-versa.

Alors comment on réactive les anciennes extensions ?

Il faut simplement trouver la clef extensions.disabledObsolete et changer sa value à false pour ne pas désactiver les extensions obsolètes (qui sont prévues pour des versions précédentes de Firefox).

D'autres entrées sont très intéressantes entre autre la collection browser.tabs qui contient différentes options de configuration par rapport aux tabs/onglets.

Pour que tout ces changements soient effectifs, redémarrez Firefox.

A vous de jouer mais, attention, vous modifiez ces valeurs à vos risques et périls!

Liens relatifs:

• Comment mettre à jour une extension Firefox
• Extension del.icio.us pour Firefox 2
• Extension bloglines pour Firefox 2
• Téléchargez d'urgence Firefox 2

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

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

On a vu récemment que sous Firefox, il était très facile de tracer les requêtes Ajax avec l'extension Firebug.

Et pour Internet Explorer?

Il existe une application multi platforme (Win/MacOS/Linux) qui permet de renifler tout le traffic passant par les navigateurs. Le nom de ce bonheur pour les développeurs: Charles

Une fois installé et activé, Charles se comporte comme un serveur proxy et enregistre les différentes requêtes HTTP

L'analyse des données de la partie droite de l'écran permet de retrouver une foule d'informations sur la ressource demandée. Dans ce cas-ci, il s'agissait d'un flux RSS.

L'onglet Général nous indique tout ce qui est relatif au fichier demandé lui-même (taille, vitesse de téléchargement, etc), l'onglet Request reprend ce que le browser a demandé au serveur, et l'onglet Response reprend ce que le serveur a répondu.

Exactement ce qu'on cherche pour déboguer nos applications Ajax.

Comme ce programme se comporte comme un proxy, il capture tous le traffic, même les requêtes qui sont faites par des fichier .swf tels des diaporamas ou des applications FlashComm

Quand je vous disais que c'était le bonheur !

Disponible sur le site du développeur, la version d'essais est tout à fait fonctionnelle sauf qu'elle s'arrête après trente minutes (assez pour certains). Sinon, l'application coûte US$50,-. Pas si cher que ça.

Liens relatifs

• Charles Web Debugging Proxy
• Déboguer grâce à Firebug

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

Ce weekend était jour d'élections en Belgique, j'ai eu une dispense de ma tâche civile d'assesseur (que j'aurais quand même bien voulu accomplir) pour cause de travail.

Dans un mois, il y a aussi des élections aux États-Unis.

En allant faire le tour des places connues sur Google Earth (l'événement Burning Man 2006 [kmz] entre autres), je me suis rendu compte que des petites étoiles décoraient les différents états de la Confédération.

A première vue, je me suis dit: Chouette des infos géographiques (pour mieux gagner à Géosense) puis, j'ai cliqué une de ces étoiles.

C'est une bonne chose que Google rappelle aux Américains du Nord que, bien que le vote n'est pas obligatoire chez eux, c'est important de voter !

Pour ceux qui n'en n'ont rien à faire: ces petites étoiles peuvent êtres désactivées dans la partie "layers" (couches) de l'interface de Google Earth

Liens relatifs

• Le post de Soph sur ces élections belges
• Le site qui m'a bien (en tout cas beaucoup) tenu occupé ce dernier mois

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

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

QR Code, Code barre 2D

Les Code QR (Quick Response - Réponse Rapide), ou code barre 2D sont en fait les successeurs des codes barres traditionnels que l'on connait bien chez nous.

Ils contiennent des informations relatives à un produit ou à un service.

Les avantages des Codes QR est que ces données sont :

• une compression plus grande que les codes barres traditionnels
• ils supportent les caractères exotiques (accentués et japonais)
• ils peuvent être lu même quand ils sont abimés (dégradation de max. 30%)

Lisibles sur GSM

Le grand plus, par rapport aux codes barres traditionnels, est que les Codes QR peuvent être lus par des gsm.

QuickMark met à votre disposition des logiciels de reconnaissance de Code QR.

Sur ce site, j'ai reconnu mon Qtek 8310, j'ai téléchargé le fichier .cab et je l'ai installé sur mon smartphone.

En pointant son gsm vers un code QR, le logiciel QuickMark signale que le code a été reconnu et il propose directement la fonction adéquate en fonction du contenu du code :

Si le code encodé est une adresse web (URL), QuickMark demande si on veut ouvrir le lien dans un navigateur web. On peut aussi créer un code qui contient un numéro de téléphone, le logiciel proposera de d'effectuer un appel téléphonique; un sms ou un texte libre.

Vraiment impressionnant !

Usages possibles

Le premier usage des code QR est de donner des raccourcis d'url pour les utilisateurs de gsm : en rue, ils peuvent directement avoir accès à de l'information sur un produit juste en pointant leur gsm (avec appareil photo et connection internet).

Un usage que j'aimerais bien serait d'encoder des lattitudes et longitudes géographique et une fois décodées ces informations pourraient être directement traîtées par un logiciel GPS (quelqu'un se porte volontaire pour développer une telle application ?).

Comme cette technologie est encore récente dans nos contrées, certains en ont profité pour lancer des affichettes pour des profils particulier (geeks de mon genre quoi).

Génération et lecture de codes QR en ligne

Bon c'est bien de pouvoir décoder ces codes QR mais encore devrait-on aussi pouvoir en créer soi-même. Il existe de nombreux sites qui permettent de générer les codes en ligne, mon préféré est: qrcode de Kaywa. Hafenscher permet quant à lui de créer des codes et de pouvoir les décoder en ligne pour ceux qui n'ont pas de gsm compatible. Il existe aussi une extension Firefox (Mobile Barcoder, l'image du haut) qui crée un code QR par page web, pour faciliter le surf sur gsm. Et tout ça, gratuitement.

Pour moi, on est près en Europe de voir déferler ces codes.

Liens relatif

• QuickMark pour l'iPhone sur l'App Store
• Créer des Codes QR avec Kaywa
• QuickMark pour décoder les QR sur votre GSM
• Denso Wave, le créateur des codes QR
• Mobile Barcoder, l'extension Firefox
• T-shirt QR
• des exemples d'usages de code QR au Japon
• comment faire un gâteau représentant un code QR

Ai-je été clair ? Si vous n'avez pas tout compris n'hésitez pas à laisser un commentaire ou prendre contact j'essaierai de mieux vous éclairer.

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

A qui est destiné RSS ? A tous ceux qui souhaitent diffuser rapidement des communiqués de presse et des dépêches à grande échelle, comme par exemple les porte-parole et les responsables de la communication. RSS n?R(TM)est pas seulement intéressant pour les individus mais permet aussi à des sites web de publier du contenu supplémentaire d?R(TM)autres sites sur le site propre.

Lien relatif

• webguide.fgov.be

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

On peut maintenant parcourir la mappemonde Google Earth à la recherche d'une destination exotique et trouver directement l'aéroport et un hôtel le plus proche.

Convergence.

J'aime vraiment bien la convergence entre un support désormais traditionnel (site web) et une application beaucoup plus orientée utilisateur, visiteur (Google Earth). Cela permet aux bourlingueurs de voir une carte de manière conventionnelle et de directement trouver de l'information relative.

Les points faibles.

Le gros point faible reste quand même le processus d'enregistrement des vols ( "booking engine" ) qui est toujours pénible.

Une autre possibilité d'amélioration ce serait d'employer un fichier XML dynamique (plutôt que le fichier statique actuel) dans lequel des offres promotionnelles ponctuelles seraient mises à jour automatiquement.

A quand l'intégration avec GPS et Google Maps sur les téléphones mobiles?

Liens relatif

• British Airways et sa page pour télécharger le fichier kmz en question
• Google Earth
• Google Maps sur les téléphones mobiles
• via : vnunet

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

Vous entrez le nom de domaine convoité dans le champs et après quelques secondes, vous saurez si le nom est libre ou déjà enregisté.

L'avantage est que la page n'est pas rafraîchie, le curseur de l'utilisateur reste dans le champs donc, dès que l'utilisateur reçoit une réponse, il peut directement entrer un autre terme de recherche.

Il y a un petit incovénient: comme le service vérifie en direct la disponibilité de différents TLD (.com, .net, .org, .be), ça prend un peu de temps.

Lien relatif :

• AjaxWhois

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

Liens relatifs

• Google Image Labeler
• via ADN

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

1. Petite-Etoile
2. Veerle
3. Tutoweb
4. NemStudio
5. Délirium très mince

hors concours: Linou (mon pied à terre au Japon) et 64k (on en trop en commun).

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

Liens relatifs :

• Le blog officiel d'Emakina
• Le blog web2.0 d'Emakina

© Marin for Gatellier.be, 2006. | Permalink | 3 comments | 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:

Sur une grille que vous pouvez agrandir ou rétrécir, vous sélectionnez votre couleur préférée et vous remplissez les cases. La prévisualisation du fond de la page est instantanée.

Une fois que vous êtes fiers de votre dessin, vous pouvez le télécharger au format .png.

A votre disposition aussi, la galerie des réalisation, par type (icône ou image de fond) ou par nombre de téléchargement.

ça me rappelle que je dois encore mettre un favicon sur mon blog.

Liens relatifs :

• bgMaker
• via: le blog du patron d'un éditeur de bien jolis tshirts
• Créer des icônes 'chargement en cours' pour ses applications Ajax
• Créer son logo Web2.0 en ligne
• Créer ses boutons en ligne: Buttonator

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