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:

Internet Explorer et le vertical-align

En cause, Internet Explorer dans les versions 6 et 7 (je ne parle même pas des versions antécédantes) ne supportent pas correctement la propriété CSS display:table-cell.

En effet, le seul moyen correct de centrer verticalement un élément est de faire en sorte que l'élément parent se comporte comme une cellule de tableau (d'où des réactions folkloriques).

Le display:table-cell a été introduit dans Internet Explorer 8. Avant ça, toutes les solutions avaient leurs revers : line-height qui ne permet pas d'avoir des espacements de lignes correct, hauteur des éléments impérativement fixe, hacks CSS mystérieux (dont on ne connaîtra pas le comportement dans les futurs navigateurs).

Bref, rien qui ne me satisfait pleinement.

CSS vertical-align:middle;

Dans Firefox 2 (pc), Firefox 3 (pc/mac), Chrome 1.0.154, Safari (4 pc, 3.2.1 mac), Opera 9.64 (pc/mac), Camino, Shira, IE8, le code suivant est bien rendu.

Le code HTML

<div class="v">
	<div>Ce texte devrait être centré verticalement</div>
</div>

Le code CSS

<style type="text/css">
.v {
	display:table-cell;
	vertical-align:middle;
	/*les 3 lignes suivantes ne sont pas nécessaires*/
	background:#900;
	height:250px;
	width:150px;
}
.v div {
	/*non nécessaire, juste de la décoration pour mieux visualiser*/
	background:#090;
}
</style>

Par contre dans IE 6 et 7, l'alignement vertical n'est pas pris en compte et la boîte de texte reste en haut de la boîte bleue.

Expressions CSS à la rescousse

Encore une fois, les expressions CSS d'Internet Explorer – qui, je sais, ne sont pas recommandées pour des raisons de performances et qui ont été supprimées d'IE8 – peuvent nous être bien utiles.

Code

<!--[if lt IE 8]>
<style type="text/css">
.v {
	position:relative;
	width:expression(this.childNodes[0].offsetWidth+"px");
}
.v div {
	position:absolute;
	top:50%;
	margin-top:expression(-this.offsetHeight/2);
}
</style>
<![endif]-->

Le contenu sera positionné en absolu, à cinquante pourcent du top, par rapport à son conteneur. Il aura aussi une marge négative de la moitié de sa hauteur.

Comme, le contenu est placé en absolu, il sort du flux de la page. Sa largeur est donc reportée sur le conteneur.

Remarques et limitations :

• voir la démo
• Les commentaires conditionnels sont employés pour cibler les version d'Internet Explorer inférieures à 8.
• Les expressions css ne sont pas exécutées si le navigateur à le JavaScript désactivé.
• Les impacts de preformance sont à tenir en compte : les expressions CSS sont recalculées à chaque changement de propriétés CSS dans la page (redimensionnement du navigateur etc,...)
• Le comportement d'un élément en display:table-cell est différent de celui d'un display:block. S'il doit prendre la largeur d'un conteneur, il faudra spécifier celle-ci.

© Marin for Gatellier.be, 2009. | Permalink | 6 comments | Add to del.icio.us
Post tags: bugfix, expression, fix, vertical-align

Alerte de sécurité sur IE < 8.

Security Information

This page contains both secure and unsecure items.

Do you want to display the nonsecure items?

[Yes] [No] [More Info]

Ou en français :

Information sur la sécurité

Cette page contient des éléments sécurisés et non sécurisés.

Souhaitez-vous afficher les éléments non sécurisés ?

[Oui] [Non] [Plus d'infos]

Alerte de sécurité sur IE8b2.

A l'heure actuelle, la version finale d'IE8 n'est pas encore sortie. J'ai donc fait des tests sur la version bêta 2.

Security Warning

Do you want to view only the webpage content that was delivered securely?

This webpage contains content that will not be delivered usin a secure HTTPS connection, which could compromise the security of the entire webpage.

[More Info] [Yes] [No]

Notez la tournure de la phrase qui est completement l'inverse du message de sécurité des versions précédantes...

Examples d'alerte de sécurité.

Démonstration.

J'ai mis en place une page démontrant cette popup de sécurité. Je sais que le certificat n'est pas valable pour le domain, d'où la première alerte.

Cette page est servie via le protocole sécurisé https et contient un lien vers une image servie via http.

Sur Internet Explorer, vous devriez avoir le message d'alerte ci-dessus.

Code.

<div>
<img src="http://noscript.be/demo/https-mixed-content-warning/404.jpg" alt="Un chat dans un pc démonté" title="src: http://www.catswhocode.com/blog/404" />
</div>

Supprimer l'alerte de sécurité une fois pour toute.

Il y a plusieurs solutions pour cela. Dont une consiste à changer les paramètres d'IE.

Je me vois mal conseiller à mes clients de changer leurs paramètres.

La seule solution est d'employer correctement le Common Internet Scheme Syntax, en supprimant le protocole.

Démonstration.

Dans cet exemple, le protocole https du lien vers l'image à simplement été supprimé.

Le message de sécurité n'apparaît plus.

Code.

<div>
<img src="//noscript.be/demo/https-mixed-content-warning/404.jpg" alt="Un chat dans un pc démonté" title="src: http://www.catswhocode.com/blog/404" />
</div>

Notez que la même technique est d'application pour les fichiers .swf que vous pourriez avoir dans vos pages sécurisées.

<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="//download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"
WIDTH="550" HEIGHT="400" id="myMovieName">
<PARAM NAME=movie VALUE="myFlashMovie.swf">
<PARAM NAME=quality VALUE=high>
<PARAM NAME=bgcolor VALUE=#FFFFFF>
<EMBED src="/support/flash/ts/documents/myFlashMovie.swf"quality=high bgcolor=#FFFFFF WIDTH="550" HEIGHT="400"
NAME="myMovieName" ALIGN="" TYPE="application/x-shockwave-flash"
PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer">
</EMBED>
</OBJECT>

code vu sur la base de connaissance Macromedia

J'ai enlevé le protocole http de l'attribut codebase du tag object.

Maintenant, ceux qui utilisent encore Internet Explorer (et qui devraient vraiment essayer un meilleur browser) n'ont plus de raisons de se plaindre de ces messages d'alerte !

© Marin for Gatellier.be, 2009. | Permalink | 2 comments | Add to del.icio.us
Post tags: https, IE, scheme, security, url, warning

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

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 :

© Marin for Gatellier.be, 2008. | Permalink | 3 comments | Add to del.icio.us
Post tags: .htaccess, application.cfc, Bonnes pratiques, coldfusion, iis, maintenance, mise à jour, mise en production, web serveur

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:

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:

Spécifiez les répertoires à valider, et scannez. Tidybot génèrera un rapport complet pour les pages contenant des erreurs de syntaxe (x)html voir l'exemple de rapport de page Tidybot.

Des paramètres avancés vous permettent de spécifier, entre autres, de ne pas afficher tel type fichier ou tels types d'erreurs.

Dommage seulement de ne pas pouvoir vérifier des pages en ligne. Disponible pour Window et Unix avec ou sans interface

Liens relatifs :

• La page du validateur Tidybot
• L'exemple de rapport de page tidybot
• Via : l'excellent WATS.ca (excellente ressource d'outils de développement).

© Marin for Gatellier.be, 2007. | Permalink | No comment | 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:

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:

Online Status pour Skype

Il existe depuis un bout de temps le plugin Jyve pour la messagerie instantanée Skype.

Plus récemment, Skype a ajouté la possibilité d'afficher, en 4 clics de souris, son status en ligne avec les Skype Buttons.

Online Status pour MSN Messenger

Je viens de tomber sur un service similaire pour MSN Messenger.

Le principe est simple:

Il vous faudra trouver votre msn uid.
Il faut se connecter (rajouter à sa liste de contacts) à un bot. Ce bot est la pour vous guider: avec la commande !findbot, vous trouverez une adresse d'un autre bot qui pourra vous donner votre uid via la commande !uid.

Une fois que vous avez votre uid, vous n'avez qu'a insérer une image dans votre page pointant vers votre uid: http://www.bencastricum.nl/msn/status.php/.png

Protocole MSNIM pour MSN Messenger 7.5

De plus, depuis la version 7.5, MSN Messenger a rajouté les protocoles msnim:

De sorte qu'il vous est dorénavant possible de faire un lien vers des actions Messenger:

• ajouter un contact avec le lien msnim:add?contact=adresse@hotmail.com
• commencer une conversation chat avec le lien msnim:chat?contact=adresse@hotmail.com
• commencer une conversation vidéo avec le lien msnim:video?contact=adresse@hotmail.com
• commencer une conversation audio avec le lien msnim:voice?contact=adresse@hotmail.com

Liens relatifs

• Présence en ligne via le plugin Jyve pour Skype
• Présence en ligne via les Skype Buttons
• Présence en ligne via le bot Bencastricum
• Informations sur le protocole MSNIM sur Mess.be

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

Le concept: une application en Flex qui permet de partager des tâches entre différents utilisateurs. Ce qui est fort, c'est que le système publie le contenu des Notes dans un blog pour le contenu (Blogger ou TypePad) et classifie ces notes via Del.icio.us (par système de tags).

Très Web2.0 !

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

• soit en prenant le raccourcis clavier Shift+F8
• soit en cliquant une de vos barre d'outils avec le bouton droit de votre souris et en choisissant l'option "Customize"
• soit encore en sélectionnant le menu "Options" puis "Customize" de vos barres de menu.

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

A quoi servent-ils? A suivre de l'information rapidement sans devoir charger tout un site.

Normalement, on emploie un aggrégateur de flux pour les parcourir d'un coup d'oeil. Il en existe de nombreux logiciels ou sous forme de site web.

Grâce à mon aggrégateur préféré, je surveille presque quotidiennement une bonne 50taine de sites grâce à leurs rss. Un titre m'article m'intéresse? Hop, je clique et je lis.

Un RSS lisible

Là où le bât blesse, c'est quand un utilisateur non-confirmé clique un lien pointant vers le fichier rss. Il se trouve confronté à une page incompréhesible faite de code. Ce sera une expérience vraiment mauvaise.

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