GeekFG Blog - Francois Guillaume Ribreau

Configurer Bonjour Mounter pour utiliser votre compte Box.net

2009-05-16T17:50:00.002+02:00

Bonjour Mounter (téléchargeable ici) est une application Mac permettant de monter automatiquement des disques réseaux (afp, smb, cifs, webdav et ftp). Ayant eu beaucoup de difficultés à monter mon compte Box.net, voici une capture avec les réglages fonctionnels:

Le champs "server" n'accepte pas de "http://" ou de "https://" et l'adresse ne doit pas contenir de "/" terminateur. C'est uniquement grâce à l'application "Messages Console" et Bonjour Mounter en mode Debug que j'ai pu découvrir d'où venait le problème.

Gérer les éléments input radio avec jQuery

2009-03-24T18:18:00.003+01:00

J’ai eu hier une question sur la manipulation des éléments radio en Javascript. La personne voulait vérifier que pour chacun de ses groupes de radio, au moins un radio était sélectionné.

Plusieurs solutions en Javascript “pur” existent sur Internet mais aucune ne semblait simple à appliquer par cette personne. Je propose donc ici quelques snippets jQuery pour exploiter simplement les éléments Radio.

Nous partirons donc d’une page incluant la librairie jQuery et le code XHTML suivant :

<form action="?" method="get" id="monForm">
<input type="radio" name="opt1" value="1" checked="checked"  />
<input type="radio" name="opt1" value="2" />
<input type="radio" name="opt1" value="3"/>

<input type="radio" name="opt2" value="1" />
<input type="radio" name="opt2" value="2" checked="checked" />
<input type="radio" name="opt2" value="3" />

<input type="radio" name="opt3" value="1" checked="checked" />
<input type="radio" name="opt3" value="2" />
<input type="radio" name="opt3" value="3"/>
</form>

Accéder aux inputs de type radio en jQuery

Il existe plusieurs façon d’accéder aux inputs de type radio en jQuery, j’ai réalisé quelques tests afin de définir quelles expressions étaient les plus rapides :

Il en ressort que l’expression input[type=radio] est plus rapide que input:radio (mais est-elle autant générique ?)

Le résultat sont très variable lorsque l’on précise un contexte (ici #monForm) et un grand nombre de radio. Je pense donc que les trois dernières expressions ne sont pas à prendre en compte dans l’analyse, du moins pour le moment. (Je travaille actuellement à améliorer mon outils de Benchmark afin que chacun puisse tester ses propres expressions jQuery).

Récupérer tout les input radios appartenant à un même groupe

$('input[type=radio][name=opt1]');//ici retourne 3 éléments input

Connaître si un groupe de radio à une valeur

$('input[type=radio][name=opt1]:checked').length; // Doit être égal à 1 si un radio à été sélectionné dans le groupe de opt1.

Vérifier que tout les radios ont été sélectionnés

$('input[type=radio]:checked').length; // Si au moins un radio est sélectionné pour chaque groupe, ce snippet retourne 3 (dans notre exemple)

Récupérer la valeur d’un groupe de radio

$('input[type=radio][name=opt1]:checked').attr('value'); //Retourne la valeur du radio sélectionné dans le groupe opt1. Retourne vide si aucun radio sélectionné

Trouver le style réellement appliqué sur un élément (sans jQuery)

2009-03-12T22:29:00.001+01:00

Etant en train de développer un addon pour Firefox/Firebug qui aidera plus d’un développeur (en tout cas moi) j’ai eu besoin de connaitre le fontFamily d’un élément. Dans cet article je ne traiterai donc que de la façon de récupérer un fontFamily. Cependant la récupération d’autres propriétés CSS (via une fonction générique par exemple) est tout à fait possible.

Si le fontFamily a directement été défini (in-line) sur l’élément

<span id='monEl' style='font-family:Tahoma'>Javascript</span>

... alors un simple :

document.getElementById('monEl').style.fontFamily;

$('#monEl').css('fontFamily');

... suffit pour récupérer la valeur de la propriété fontFamily de l’élément.

Maintenant si l’on supprime l’attribut style de notre span#monEl le code suivant retournera une chaine vide :

document.getElementById('monEl').style.fontFamily;//retourne ""

Cependant le code jQuery, lui, fonctionnera.

Arriver à nos fin sans jQuery

Au début je pensait qu’il suffirait d’effectuer une boucle sur les éléments parents du DOM : remonter à chaque fois d’un élément et dès qu’un élément a un fontFamily de valide, stopper la boucle et retourner sa valeur. Mais il y a beaucoup plus simple.

jQuery procède d’une façon différente. En regardant son code de plus près j’ai découvert qu’il avait recourt à la méthode DOM de niveau 2 getComputedStyle() pour récupérer la valeur d’un attribut CSS hérité d’un élément parent. Malheureusement cette méthode ne semble pas être intégré sous IE qui lui dispose de la propriété currentStyle.

Voici donc une fonction (basé sur le code utilisé par jQuery) qui retourne, pour un élément donné, la valeur du fontFamily associé :

function getFontFamily(el){    
    var ret;     
    if (el.style && el.style['fontFamily'])//Si l'élément a déjà la propriété de définie     
        ret = el.style['fontFamily'];     
    else if (document.defaultView.getComputedStyle){//Firefox, Opera     
        var computedStyle = document.defaultView.getComputedStyle(el, null );     
    
        if(computedStyle)     
            ret = computedStyle.fontFamily;     
    }     
    else if (el.currentStyle)//Internet Explorer     
        ret = el.currentStyle['fontFamily'];     
    return ret;     
}

Testé sous Firefox et Chrome.

Réaliser une copie profonde d’objet (deep copy) en Javascript

2009-02-25T00:46:00.000+01:00

Un des problèmes récurrent avec Javascript est qu’il est difficile de savoir si une variable passée par référence ou par valeur.

En VB (VB6, VB.NET) il est possible de déclarer dans l’entête de la fonction by val ou by ref pour préciser le mode de passage mais ce n’est pas le cas en Javascript.

//Création de l'objet monObjet   
var monObjet = new Object(); 

// monDeuxiemeObjet réfère à l'objet monObjet   
var monDeuxiemeObjet = monObjet; 

// On modifie une propriété du premier objet   
monObjet.unePropriete = true; 

// Les changements sont aussi appliqué sur le second objet   
// (Le deuxième objet réfère au premier objet)    
alert( monObjet.unePropriete === monDeuxiemeObjet.unePropriete );//affiche true

Dans cette exemple, la copie de monObjet dans monDeuxiemeObjet à été effectuée par référence, ce qui signifie que monDeuxiemeObjet pointe vers l’adresse de monObjet (même si la réalité est un peu plus complexe que cela…monDeuxiemeObjet pointe sur la référence de l’objet final monObjet mais c’est une autre histoire).

Seulement dans certains cas, il arrive que nous ayons besoin de réaliser une vrai copie. Par exemple sauvegarder monObjet dans une variable temporaire et effectuer des traitements uniquement sur cette variable sans que cela n’affecte monObjet. Dans certains cas là méthode que je vous propose n’est pas indispensable notamment dans le cas où l’objet à copier n’est pas complexe.

Heureusement jQuery intègre la méthode extend. Basiquement elle permet de gérer l’héritage d’un objet vers un à plusieurs autres objets. Mais elle permet aussi la copie profonde (deep copy) d’un objet vers un autre et donc une copie par valeur (et non plus par référence) via son paramètre optionnel “deep”.

jQuery.extend( [deep], target, object1, [objectN] )

//Création de l'objet monObjet    
var monObjet = new Object();     
    
var monDeuxiemeObjet = {};     
$.extend(true,monObjet,monDeuxiemeObjet);//deep copy     
    
// On modifie une propriété du premier objet     
monObjet.unePropriete = true;     
    
// Les changements ne sont pas appliqué sur le second objet     
// monDeuxiemeObjet.unePropriete est indéfini     
alert( monObjet.unePropriete === monDeuxiemeObjet.unePropriete );//affiche false

Ici, monDeuxiemeObjet ne réfère plus à monObjet. Ces deux objets possèdent chacun leurs propres adresses mémoires, il est ainsi possible de travailler sur l’un sans modifier l’autre.

Modifier openWYSIWYG afin qu’il supporte Google Chrome

2009-02-21T00:38:00.001+01:00

L’outil pour ajouter sa signature HTML à Gmail utilise l’éditeur openWYSIWYG que j’apprécie particulièrement pour son côté cross-browser, open-source et son interface très léger. Seulement, même la dernière version ne supporte pas Google Chrome.

Après un bref regard sur le code, je me suis aperçu que la vérification de la compatibilité s’effectuait au niveau de la méthode isBrowserCompatible :

isBrowserCompatible: function() {    
// Validate browser and compatiblity     
if ((navigator.userAgent.indexOf('Safari') != -1 ) || !document.getElementById || !document.designMode){     
//no designMode (Safari lies)     
return false;     
}     
return true;     
},

N’ayant pas Safari et ne pouvant donc pas vérifier si oui ou non “Safari lies” j’ai préféré simplement ajouter le support de Chrome tout en laissant le blocage de Safari. Il suffit donc de modifier le test et d'y ajouter l'expression booléen suivante :

if ((navigator.userAgent.indexOf('Safari') != -1 && navigator.userAgent.indexOf('Chrome') == -1 ) || !document.getElementById || !document.designMode){

C’est fini ? Eh bien non, après un test cela ne fonctionnait toujours pas, Chrome retournait une erreur Uncaught TypeError: Object # has no method 'insertAdjacentHTML'. Un recherche plus tard, je découvre ce block de code :

/**    
* Emulates insertAdjacentHTML(), insertAdjacentText() and     
* insertAdjacentElement() three functions so they work with Netscape 6/Mozilla     
* by Thor Larholm me@jscript.dk     
*/     
if(typeof HTMLElement!="undefined" && !HTMLElement.prototype.insertAdjacentElement){ HTMLElement.prototype.insertAdjacentElement = function (where,parsedNode){     
    HTMLElement.prototype.insertAdjacentElement = function (where,parsedNode) {.. };     
        HTMLElement.prototype.insertAdjacentHTML = function (where,htmlStr) {…}; 
        HTMLElement.prototype.insertAdjacentText = function (where,txtStr) {… };      
}

Or sous Chrome l’objet HTMLElement ET sa méthode insertAdjacentElement existe, mais pas sa méthode insertAdjacentHTML. Cette condition n’était donc pas validée. Il suffisait donc de modifier la condition comme ceci pour que openWYSIWYG supporte Chrome :

if((typeof HTMLElement!="undefined" && (!HTMLElement.prototype.insertAdjacentElement || !HTMLElement.prototype.insertAdjacentHTML))){

Remarque: il est préférable ici de ne pas agir en fonction du navigateur (donc un test sur le user-agent) mais plutôt sur la présence ou non de la fonctionnalité sur le navigateur. En utilisant cette méthode on code ainsi de façon plus générique et les scripts deviennent compatibles (ou inversement) avec les mises à jour des navigateurs.

Ps : En bon webnaute j’ai proposé cette modification sur le forum dédié afin qu’elle soit intégrée à la prochaine release.

Algorithme tri de couleur (+ demonstration javascript)

2009-02-15T16:28:00.001+01:00

Il y a 3 semaines, j’expliquais sur ce blog comment créer un algorithme qui était capable de définir automatiquement la couleur d’un texte par rapport à son arrière plan. Aujourd’hui, je vous propose de trier un set (ou une palette) de couleur.

Pour vous faciliter nous faciliter la tâche voici quelques restrictions :

Notre set (ou palette) sera composé de 5 couleurs
Les couleurs devront être triées de la plus claire à la plus foncée (l’inverse est tout aussi possible)

En fidèle lecteur de ce blog vous vous souvenez sans doute de cet article où j’expliquais comment réaliser une fonction de tri simple. Grâce à ces deux précédents articles nous sommes capable de réaliser de réaliser une fonction de tri de couleur.

La théorie

Pour savoir si une couleur est plus clair ou plus foncée qu’une autre, il suffit de se référer à la luminance de leurs codes HSL. Au lieu de trier des nombres du plus petit au plus grand il faut donc trier les couleurs par leurs composantes HSL de la plus grande (100% : blanc) à la plus petite (0% : noir).

L’algorithme

Ce qui nous donne cet algorithme :

tabCouleur = ["0B8C8F", "FCF8BC", "CACF43","2B2825","D6156C"]    
    
//Convertir de HEX en HSL     
convertirTableauCouleurHEXversHSL(tabCouleur);     
    
//Le tableau est maintenant de la forme :     
//tabCouleur = [[,,], [,,], [,,], [,,], [,,]]     
    
//Luminance de la première couleur : tabCouleur[0][2]     
    
Faire     
    Si(tabCouleur[0][2] < tabCouleur[1][2])     
        tabCouleur.intervertir(0,1);     
    SinonSi(tabCouleur[1][2] < tabCouleur[2][2])     
        tabCouleur.intervertir(2,3);     
    SinonSi(tabCouleur[2][2] < tabCouleur[3][2])     
        tabCouleur.intervertir(2,3);     
    SinonSi(tabCouleur[3][2] < tabCouleur[4][2])     
        tabCouleur.intervertir(3,4);     
TantQue(!(    tabCouleur[0][2] >= tabCouleur[1][2]     
        &&     tabCouleur[1][2] >= tabCouleur[2][2]     
        &&     tabCouleur[2][2] >= tabCouleur[3][2]     
        &&     tabCouleur[3][2] >= tabCouleur[4][2]))     
    
//Convertir de HSL -> HEX     
convertirTableauCouleurHSLversHEX(tabCouleur);

L’équivalent Javascript n’est pas très différent. Les fonctions convertirTableauCouleurHEXversHSL et convertirTableauCouleurHSLversHEX vont en fait transformer le code HEXA en RGB puis en HSL et inversement.

Pour ce qui est de la méthode intervertir. Elle ne fait rien d’autre qu’une inversion (swap) entre 2 éléments (spécifiés par leurs index) d’un même tableau. Le code Javascript est donc :

var tmp=tabCouleur[x];    
tabCouleur[x]=tabCouleur[y];     
tabCouleur[y]=tmp;

Démonstration en javascript

J’ai réalisé une démonstration en javascript de cet algorithme sur le sous domaine projets. Le script importe dynamiquement (via l’API de ColourLovers) des palettes de couleurs il vous suffit alors de cliquer sur une palette pour la trier.

A chaque chargement de l’API, une seconde palette est générée et contient toutes les couleurs des autres palettes le temps de tri est légèrement plus long mais le résultat est là.

Pour accéder à la démo de tri des couleurs en javascript c’est par ici.

Remarque : Certaines palettes ont déjà leurs couleurs de triées de la plus foncées à la plus clair.

Mise à jour : Bookmarklet pour avoir une signature HTML sous Gmail

2009-02-10T21:01:00.001+01:00

Petite note de service pour vous informer de la mise à jour de mon générateur de bookmarklet permettant d’insérer une signature HTML sous Gmail. J’avais réalisé la première version dans mes débuts avec jQuery et je ne connaissais pas la méthode .prepend() : maintenant la signature s’ajoute tout en haut de votre email, il vous suffit donc de l’ajouter puis d’écrire ensuite votre message.

D’ailleurs Ghacks proposait aujourd’hui un article, qui (…outre le fait d’y intégrer un lien vers mon générateur ^^) propose 90 outils et astuces pour devenir un Pro de Gmail.

Si vous avez des suggestions concernant le bookmarklet, j’en tiendrais compte pour la prochaine version.

Liste des programmes et manipulations effectuées après un formatage

2009-02-07T11:00:00.000+01:00

En début de semaine j’ai dû formater mon ordinateur pour y ré-installer XP Pro SP3 (en attendant Windows 7) sur mon disque dur principal.

Voici la liste exhaustives des programmes que j'ai installé après le formatage :

Développement

Outils
- 7-zip (léger et puissant)
- UltraMon (pour la gestion du double écran)
- Adobe Air/Flash / Silverlight
- VLC
- Wireshark
Bureautique
- Microsoft Office
- Foxit PDF Reader
Graphisme
- Photoshop (même si je n’y connais pas grand chose je le préfère à The GIMP)
- Paint.NET
Navigateur
- Mozilla Firefox
- Google Chrome
- (MultiplieIE, Opera, Safari pour le test)
Protection
- PeerGuardian
Personnalisation
- QT Tabbar (pour le système d’onglet sur l’explorer)
- Uxtheme patch
- VistaStartMenu (pour la recherche comme sous Vista)
- SuperCopier 2
Communication/Social
- Windows Live Writer (que j’utilise pour bloguer)
- Windows Live Messenger
  - Messenger Plus Live!
- Twhirl (Twitter)
- Google Talk
Virtualisation
- Virtual PC
- VMWare

Ensuite au niveau du registre pour une ouverture automatique de la session et l’activation au démarrage de Verr. Num. Voici le code à modifier puis enregistrer dans un *.reg et enfin exécuter.

Windows Registry Editor Version 5.00   
    
[HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows NT\CurrentVersion\Winlogon]    
"DefaultUserName"="monCompteUtilisateur"    
"DefaultPassword"="monMotDePasse"    
"AutoAdminLogon"="1"    
    
[HKEY_USERS\.DEFAULT\Control Panel\Keyboard]     
"InitialKeyboardIndicators"="2"

Au niveau de la configuration de Windows :

Suppression de l’écran de veille et de tout les sons Windows.
“Afficher les fichiers & dossiers cachés”, “afficher les extensions des fichiers”, “ne pas masquer les fichiers protégés”.
Désactivation de la surveillance de l’antivirus & du pare-feu depuis le centre de sécurité.
Suppression de la barre de langue.
Etc…

Note de service : flux RSS du site

2009-02-06T12:13:00.001+01:00

Certains d’entre vous l’on peut-être remarqué. L’ancienne adresse du flux RSS redirige vers http://feeds2.feedburner.com/geekfg. Cette adresse est donc la nouvelle adresse du flux, pensez à mettre à jour vos Netvibes, Google Reader et autres agrégateurs RSS.

Choix automatique de la couleur d'un texte en fonction de sa couleur d'arrière plan

2009-01-25T19:00:00.001+01:00

Ou en terme plus technique, comment créer un algorithme qui retourne un foregroundColor adéquate en fonction d'un backgroundColor variable.

Dans le cadre de mon stage @ Zlio Nantes, j'ai eu besoin de créer un algorithme qui, à partir de n'importe quelle couleur d'arrières plans, serait capable de définir si la couleur du texte (blanc ou noir) afin que ce dernier soit toujours visible.

Postulat : Pour la démonstration, nous prendrons un vert foncé comme couleur d'arrière plan

#155147 = rgb(21, 81, 71); //RGB (Red, Blue, Green) ou RVB (Rouge, Vert, Bleu)

Méthode rapide

La première idée qui pourrait vous venir à l'esprit serait d' additionner les composantes RVB :

21+81+71 = 173

Or, au maximum il est possible d'obtenir une somme de

255+255+255 = 765

Donc il suffirait donc de regarder si la somme des composantes et supérieur ou inférieur à 382,5 (765/2) pour savoir s'il faut mettre le texte en blanc (donc plus clair) ou en noir (plus foncé). Ce qui pourrait donner cet algorithme :

var couleurRGB = [21,81,71]; Si couleurRGB[0]+couleurRGB[1]+couleurRGB[2] > 382 Alors //#FFFFFF Sinon //#000000 FinSi

En réalité cet approche est fausse. D'ailleurs en utilisant la couleur de l'exemple, l'algorithme nous propose d'utiliser du noir. Voici le résultat :

En testant on constate que le texte n'est clairement pas visible et que le blanc aurait été un meilleur choix.

En baissant la valeur seuil à 170 notre algorithme retourne une couleur correcte (blanc) pour notre exemple, mais qu'en est-il pour ces autres couleurs ? rgb(4, 1, 31), rgb(9, 23, 9), rgb(29, 50, 3), rgb(27, 15, 27). La somme de leurs composantes ne dépasse pas 170 et pourtant la proposition est fausse, notre algorithme propose du noir.

Pour corriger cela nous pourrions baisser la valeur seuil. Lors de mes tests j'ai réussi à obtenir de très bon résultat avec une valeur seuil à 86 mais il reste encore une infinité de cas où notre algorithme propose une couleur erronée.

A ce stade, 2 possibilités. Soit nous complexifions notre algorithme en étudiant chacune des composants les une après les autres et en réalisant un savant mélange de test,... Soit nous passons à la méthode fiable.

Méthode fiable

La méthode fiable consiste à convertir le format de gestion de couleur de RGB vers HSL (Hue, Saturation, Lightness) soit TSL (Teinte, Saturation, Lumière) en français. C'est la composante lumière qui nous intéresse :

La lumière est la luminosité (depuis 0 % qui correspond au noir jusqu'à 100 %, luminosité maximale permise par le support, le blanc dans le cas des écrans).

Une fois la conversion effectuée ils nous suffira de définir si la composante "L" est supérieur ou inférieur à 50% et d'en déduire la couleur à appliquer en premier plan. Notre algorithme devient donc :

var couleurRGB = [21,81,71];    
var couleurHSL = RGBtoHSL(couleurRGB);     
    
Si couleurHSL[2] > 0.5 Alors //0.5 = 50%  
     //#000000     
Sinon     
     //#FFFFFF     
FinSi

Et voila ! Cette méthode est légèrement plus lente en calcul processeur car elle nécessite une conversion supplémentaire mais elle est 100% fiable.

[MAJ] La démo est disponible en ligne ici, elle intègre le code javascript fonctionnel des deux algorithmes ainsi qu'un script de test pour comparer automatiquement leurs valeurs de retour.

Débugger avec Firebug sous Firefox en testant en parallèle avec IE, Opera et Chrome

2009-01-12T14:03:00.001+01:00

Si vous développez et débuggez votre application sous Firefox et utilisez les méthodes de l’objet console de Firebug, tel que :

console.debug(maVariable);    
console.info('Hello World :', monApplication.version);     
console.log('Logged in');

Il vous est alors impossible de tester votre code en parallèle sous Internet Explorer, Opera et Chrome^[1] sans voir apparaitre un de ces messages :

/* IE */    
Erreur : 'console' est indéfini     
    
/* Opera */     
Error:     
name: ReferenceError     
message: Statement on line 437: Undefined variable: console     
    
/* Chrome (v1.x.xxx.x) */     
Uncaught TypeError: Object #<a console="console"> has no method 'debug'

Commençons donc par un petit rappel sur les moyens de débug offert par ces différents navigateurs :

Internet Explorer

Il n’existe pas de console en natif qui propose les mêmes fonctionnalités que celles offertes par Firebug. Cependant des plugins tel que DebugBar devraient permettre cela.

Opera

Opera possède sa propre méthode postError() mais son utilisation est limitée car elle n’affiche pas le contenu des objets

opera.postError([1,2,3,4,5]);//Affiche: 1,2,3,4,5 
opera.postError('Mon tableau',[1,2,3,4,5]);//Affiche: Mon tableau,1,2,3,4,5 
opera.postError({maPropriete: 'Hello', maMethode : function(){return 'World';}});//Affiche: [object Object]

Google Chrome

Dans ses dernières versions (testé sous 2.0.156.1) Chrome supporte partiellement, via sa Console Javascript (Ctrl+Maj+J) les méthodes suivantes :

console.debug(); 
console.info(); 
console.log();

Partiellement car il est actuellement impossible de passer plusieurs objets/tableaux via un seul appel

monTableau = [1,2,3,4,5,6]; 
monObjet = {maPropriete : 'Hello', maMethode : function(){return 'World';}}; 
console.debug(monTableau,monObjet);//Affiche: [1, 2, 3, 4, 5, 6] Object 
console.debug(monObjet);//Affiche le contenu de l'objet monObjet

La solution

Voici un bout de code (snippet) à placer avant tout appel aux méthodes console.debug, console.info et console.log.

//On créé l’objet console s’il n’existe pas (sous d’autre navigateur que Firebox & Chrome)  
if(typeof console !== 'object') 
     console = {};  
if((typeof console.debug) !== 'function')//On pourrait aussi vérifier pour console.info et console.log  
{ 
     if(typeof opera === 'object')//On redirige les appels vers opera.postError(); 
         console = {debug : function(){return opera.postError(arguments);}, info : function(){this.debug('[INFO] ',arguments);}, log : 
function(){this.debug('[LOG] ',arguments);}}; 
     else//Ne rien afficher sur les autres navigateurs 
         console = {debug : function(){return true;},info : function(){return true;}, log : function(){return true;}};  
}

Il vous est maintenant possible de tester (voir même de debugger si vous êtes sous Chrome et/ou Opera) votre application sans vous soucier de supprimer les lignes de debug pour Firebug. Je vous conseille toutefois de placer ce bout de code dans l’événement DomReady afin d’éviter tout problème de chargement.

DomReady avec jQuery :

$(document).ready(function(){ /* bout de code à copier ici */ });

DomReady avec MooTools:

window.addEvent('domready', function() { /* bout de code à copier ici */ });

[1] Versions 1.x.xxx.x de Chrome

Savoir si les librairies JavaScript jQuery, Prototype, Mootools, YUI et DOJO sont présentes sur une page web

2009-01-03T01:19:00.001+01:00

Voici plusieurs bouts de code qui vous permettrons de savoir si tel ou tel libraire est présente (mais pas forcément initialisées) dans une page web. Très utile lorsque vous devez réaliser un script reposant sur l'une de ces librairies, il vous est alors possible d'éviter de ré-inclure la librairie. Pour cela il suffit d'utiliser un bootstrap (Facebook appelle cela un bootloader).

bootstrap : petit programme d'amorçage qui permet d'en lancer un plus gros. (Wikipedia)

JQuery :

var JQuery_estPresent = (typeof jQuery != "undefined")?true:false;

Prototype :

var Prototype_estPresent = (typeof Prototype != "undefined")?true:false;

Mootools :

var MooTools_estPresent = (typeof MooTools != "undefined")?true:false;

YUI :

var YahooUI_estPresent = (typeof YAHOO != "undefined")?true:false;

Dojo :

var Dojo_estPresent = (typeof dojo != "undefined")?true:false;

Exemple d'utilisation via un BootStrap depuis une page web

var hasJQuery = (typeof jQuery != "undefined")?true:false;//retourne un booléen selon la présence de jQuery sur la page   
var scrpt = document.createElement('script');     
scrpt.src = 'http://monsite.com/script/monscript.js.php?' + (hasJQuery?'besoinDeJquery=true':'');//préparation de l'URL     
document.body.appendChild(scrpt);//ajout du script

Le fichier monscript.js.php se chargera d'inclure ou non la librairie jQuery en fonction de la variable besoinDeJquery.

De nombreuses autres utilisations de ces informations sont bien entendu possible.

Retrouver le chemin XPath d'un élément html via Javascript

2008-12-20T22:24:00.001+01:00

Après de nombreuses recherches mais en vain, j'ai décidé de coder cette fonction qui permet de retourner le chemin XPath d'un élément html.

//@el élément HTML    
function getXpath(el){     
    
XPath = '/'+el.nodeName     
+ (el.id?'[@id=\''+ el.id +'\']':(el.className?'[@class=\''+ el.className+'\']':''));     
    
while(el.parentNode && el.parentNode.nodeName !== '#document')//on monte d'un élément à chaque itération     
{     
el = el.parentNode;     
XPath = '/'     
+ el.nodeName     
+ (el.id?'[@id=\''+ el.id +'\']':(el.className?'[@class=\''+ el.className+'\']':''))     
+ XPath;     
}     
    
return XPath.toLowerCase();     
}

Si vous souhaitez retourner uniquement le chemin XPath de l'élément père, il suffit de remplacer cette ligne :

XPath = '/'+el.nodeName    
+ (el.id?'[@id=\''+ el.id +'\']':(el.className?'[@class=\''+ el.className+'\']':''));

Par :

XPath = '';

Exemple d'utilisation pour une div ayant une valorisation de l'ID à post-845 :

alert(getXpath(document.getElementById('post-845'))); //retourne par exemple : /html/body/div/div[@id='page']/div[@id='content']/div[@id='post-845']

Testé sous Firefox 3, Chrome, IE7, IE8. Tout les chemins retournés jusqu'à présent ont été valide mais il est possible d'affiner la précision en spécifiant l'index de l'élément. C'est utile lorsque, par exemple, il existe plusieurs éléments enfants de même type pour un unique élément parent.

Création d’un keygen (générateur de clés) à partir d’un algorithme

2008-12-12T22:13:00.000+01:00

Il y a quelques jours, j’ai travaillé sur la sécurité d’une application web. Cette dernière demandait à l’utilisateur de payer une licence afin de faire disparaitre le texte “version demo”. Je montrerai le travail de recherche et d’analyse du code PHP et Javascript la semaine prochaine, pour le moment intéressons nous à la création d’un keygen (générateur de clé) à partir d’un algorithme donné. Je précise une fois de plus que cet article a pour but de faire “découvrir” une petite partie de la “sécurité informatique” et non d’inciter au piratage.

Rappel sur les keygens :

Un générateur de clés, aussi appelé keygenerator ou tout simplement keygen, est un logiciel générant des numéros de série afin d'installer/déverrouiller/lancer une application.

Un générateur de clés a deux moyens pour trouver une clé-cd valide : la méthode brute force et la méthode qui consiste à reconstituer l'algorithme utilisé par la société éditrice du logiciel.

Source Wikipedia

J’en profite aussi pour préciser les expressions algorithmiques utilisées dans cet article :

POS(X) : retourne le caractère à la position X, en partant de 0, d’une string quelconque.
X MOD Y : retourne X modulo Y
LEN(STR) : retourne la longueur d’une string

Les postulats sur lesquels nous nous baserons :

On se basera sur la string DK suivante (si quelqu’un connait le nom technique je suis intéressé) : 123456789ABCDEFGHJKLMNPQRSTUVWXYZ
La clé (licence key) que doit entrer l’utilisateur est de 11 caractères ou plus.
Nous comptons, pour les positions de caractère par exemple, à partir de 0.

Une fois la clé de licence spécifiée, le programme va effectuer les traitements suivants afin de définir la validité d’une clé :

Création d’une seconde clé (clé temporaire/intermédiaire à partir de la clé de licence entrée par l’utilisateur) sous la forme : [11][0][8][12]
- [11] est la caractère en 11ème position de la licence originale
- Si la licence originale est ZK5JC9EO6IEGP alors la clé intermédiaire sera GZ6P
On vérifie à partir de cette clé intermédiaire que :
- Le modulo de la position du second caractère sur DK est différent de 1. On trouvera alors [0] c’est à dire le caractère en 0ème position de notre clé de licence finale.
  - Par exemple pour 12 :
  - 12 MOD 5 = 2 //12 est valide (modulo différent de 1) on cherche donc le caractère correspondant POS(12) = C //C est donc un caractère possible en position 1 pour notre clé intermédiaire et en position 0 pour notre clé finale [0] = C
- On prends aléatoirement les positions des 0ème et 2ème caractères sur DK
- La position du 3ème caractère doit être égale à (j'ai décomposé le code pour une lecture plus aisée) :
  - X = POS([11]) + POS([8]) //on additionne les positions sur DK de 0ème et 3ème caractère X *= 9 X = X Mod (Len(DK) - 1) //on repositionne X sur DK [12] = POS(X) //le 3ème caractère de notre clé intermédiaire est donc à la position X sur DK

L’idée est donc de générer aléatoirement des licences qui correspondent à cet algorithme. Voici un code VB6 permettant de résoudre cette problématique :

Randomize '(re)initialisation du moteur de nombre aléatoire    
Dim dK as String     
dK = "123456789ABCDEFGHJKLMNPQRSTUVWXYZ"     
Dim sr(12) As String 'clé de licence finale que nous allons générer     
    
'#########################################      
' Traitement sur la clé intermédiaire       
'#########################################     
Dim tmp0, tmp1, tmp2, tmp3 As Integer     
    
'Recherche du 2ème caractère     
tmp = 1     
Do While ((tmp Mod 5) = 1)     
tmp = rand(1, Len(dK))     
Loop     
sr(1) = Mid(dK, tmp, 1)     
    
'On créé le 0ème & 2ème caractère     
tmp0 = rand(0, Len(dK) - 1)     
tmp2 = rand(0, Len(dK) - 1)     
    
sr(0) = Mid(dK, tmp0 + 1, 1)     
sr(2) = Mid(dK, tmp2 + 1, 1)     
    
'Le 3ème caractère doit être égal à     
tmp3 = tmp0 + tmp2     
tmp3 = tmp3 * 9     
tmp3 = tmp3 Mod (Len(dK) - 1)     
sr(3) = Mid(dK, tmp3 + 1, 1)     
    
'#########################################      
' On en déduit ensuite la clé finale       
'#########################################     
'Ordre : [11][0][8][12]     
sr(11) = sr(0)     
sr(0) = sr(1)     
sr(8) = sr(2)     
sr(12) = sr(3)     
    
sr(1) = Mid(dK, rand(1, Len(dK)), 1)     
sr(2) = Mid(dK, rand(1, Len(dK)), 1)     
sr(3) = Mid(dK, rand(1, Len(dK)), 1)     
sr(4) = Mid(dK, rand(1, Len(dK)), 1)     
sr(5) = Mid(dK, rand(1, Len(dK)), 1)     
sr(6) = Mid(dK, rand(1, Len(dK)), 1)     
sr(7) = Mid(dK, rand(1, Len(dK)), 1)     
sr(9) = Mid(dK, rand(1, Len(dK)), 1)     
sr(10) = Mid(dK, rand(1, Len(dK)), 1)     
'La clé finale = Join(sr, "")

J’utilise des variables intermédiaires et de nombreux appelles à la fonction rand. Ce code est très facilement optimisable mais j’ai préféré le décomposer afin de faire ressortir l’algorithme de base et pour que cet article soit accessible au plus grand nombre.

Si vous avez aimé cet article ou si vous avez des demandes particulières, n’hésitez pas à le faire savoir en commentaire. N’oubliez pas de vous inscrire au flux rss du blog :).

Un jeu caché (easter-egg) sur le site de Jquery ?

2008-12-04T20:11:00.002+01:00

En "triffouillant" un peu sur le site de JQuery, j'ai découvert ces quelques lignes :

// Hehe.   
if ( window.addEventListener ) {    
var kkeys = [], konami = "38,38,40,40,37,39,37,39,66,65";    
window.addEventListener("keydown", function(e){    
kkeys.push( e.keyCode );    
if ( kkeys.toString().indexOf( konami ) >= 0 )    
window.location = "http://ejohn.org/apps/hero/";    
}, true);    
}

On voit donc que :

Le script enregistre toutes les touches pressées au clavier dans un tableau kkeys
Il vérifie à chaque fois si la combinaison de touche contenu dans konami à été saisie ou non, et si c'est le cas, la page est redirigée vers le jeu.

Si vous êtes de ceux qui préfère tester ce easter-egg plutôt que d'entrer directement l'adresse dans votre navigateur, il vous suffit d'appuyer sur les touches de votre clavier dans cet ordre depuis le site de JQuery :

2x flèche haut
2x flèche bas
flèche gauche
flèche droite
flèche gauche
flèche droite
b
a

Et voila !

Pour ma part je connaissais déjà ce Guitar Hero Like de John Resig (qui est le fondateur de JQuery) mais je dois avouer que j'ai été surpris par ces quelques lignes de code.

Amusons-nous avec Sébastien Chabal (…ou comment “profiter” du buzz d’Orange)

2008-11-25T18:57:00.001+01:00

Vous le savez peut-être, Orange vient de lancer une campagne marketing au doux nom de Chabal Le Duel. Visitez-donc le site si vous ne connaissez pas. L’idée est vraiment excellente : recevoir un appel personnalisé de Sébastien Chabal qui vous demande de l’aide pour marquer un but. En plus l’impression de réelle est augmentée par la synchronisation entre le mini-film que vous voyez à l’écran et ce qui se dit dans votre téléphone.

Avertissement : Je vois fleurir ce type de site (appel téléphonique + vidéo) depuis un bon moment. Cet article n’est que le résultat d’une (petite) réflexion que je me suis permis de me poser il y à maintenant 30 minutes. Mon but est de montrer comment il est possible de “dévier” (légèrement) l’utilisation d’une telle plateforme et en aucun cas de réaliser des actions malhonnêtes, je vous demanderai donc d’en faire autant.

Oui et alors ?

Alors je me suis intéressé un peu plus aux échanges client(flash)/serveur. Une fois le formulaire (où l’on doit remplir son nom, prénom, email et numéro de téléphone) envoyé ces échanges se forment et voici un résumé :

#request# GET http://as00.estara.com/OneCC/200106295512/checkPhone.php?phone1=336XXXXXXXX

(Hypothèse) : “vérification si le numéro de téléphone est correcte”, retourne le nombre d’appels envoyés vers ce téléphone par la plateforme.

#request# POST http://as00.estara.com/OneCC/200106295512/email.php (+ paramètres)

(Hypothèse) : page pour l’enregistrement de l'email, nom, prénom, numéro de téléphone et options diverses.

#request# POST http://as00.estara.com/OneCC/200106295512/mpc2.php

Paramètres :

phone1=336XXXXXXXX Numéro de téléphone au format international     
&ord=0%2F5684821980666167     
&name=FRANCOIS Prénom à utiliser

Ce script permet d'établir l'appel avec le numéro précisé et de spécifier le prénom que le Chabal virtuel devra employer.

Retourne :

STATUS_URL=http://paetec-2901.estara.com/vxml/contact/status.php?confid=e56978910e2936d11fae5ca9d5hh5bv6     
DISCONNECT_URL=http://paetec-2901.estara.com/vxml/contact/disconnect.php?confid=e56978910e2936d11fae5ca9d5hh5bv6

Puis, pour garder la synchronisation entre le téléphone et la vidéo, il y a un appel récurrent de :

#request# POST http://paetec-2601.estara.com/vxml/contact/status.php

Paramètres :

nbrequest=1    
&confid=e56978910e2936d11fae5ca9d5hh5bv6     
&ord=0%2F5684821980666167

Constat après quelques tests

La variable ord peut être vide lors de l’appel de mpc2.php la communication avec le téléphone sera quand même effectuée
Si name n’est pas dans la liste pré-enregistrée, ou s’il n’est pas défini, le Chabal virtuel dira “salut l’ami”
Si ord n’est pas défini, alors l’appel ne sera plus en mode inconnu mais par un numéro en 01…

Il est donc tout à fait possible d’effectuer directement une requête POST sur mpc2.php afin de lancer un appel vers un numéro de téléphone prédéfini.

Quels déviances sont possibles ?

Sachant ce que l’on sait maintenant il nous est possible de détourner ce système de son utilisation principale, on pourrait donc :

Flooder un ami…ou enemi
Créer un bash ou un programme qui appelle, via Curl ou autre, à intervalle régulier, via un cron par exemple, le script mpc2.php. Ce qui pourrait permettre en pratique de faire téléphoner Chabal à minuit tout les soirs à un “amis”.
…et sans doute d’autres détournements dont je n’ai pas l’idée à l’heure où j’écris ces lignes.

Beaucoup trop de site “full flash”, en plus du fait qu’ils ne sont vraiment pas agréable et lent (point de vue personnel) oublient l’aspect de sécurisation des données qui transitent, un simple chiffrage des valeurs serait déjà mieux.

[Mini-Projet VB6] Machine à sous - Jackpot

2008-11-22T00:00:00.002+01:00

Dans le cadre d’un cours de VB6 à l’EPSI Nantes, il nous a été demandé de créer une machine à sous en VB6.

Le cahier des charges était le suivant :

Au démarrage l’utilisateur entre la somme à versée en banque
3 libellées qui feront défiler des chiffres de 1 à 9
L’utilisateur choisit sa mise

7x1 : on gagne 5 fois la mise
7x2 : on gagne 10 fois la mise
7x3 : on gagne 100 fois la mise
Aucun 7 : on perds la mise

Afficher le taux de réussite
Lorsque l’utilisateur perds, si son taux de réussite est supérieur à 25% on lui propose d’enregistrer son score

Interface du jeu une fois lancé

Ici aucun 7, on perds donc la mise.

En réalité, j’ai d’abord réalisé une version répondant exactement au cahier des charges lors du cours. La version que je vous propose ici est un peu plus “fantaisiste” et comme vous pouvez le voir j’en ai profiter pour me remettre à Photoshop. L’installeur du mini-projet peut être téléchargé ici, d’autres captures sont disponibles sur mon flickr.

Activer les fonctionnalités cachées de Windows Seven build 6801

2008-11-21T13:05:00.001+01:00

Continuons sur notre lancée à la découverte de Windows Seven. Aujourd’hui voyons comment débloquez en un clic les fonctions de multitouch, diaporama d’arrière plan (slideshow wallpapers) et bien plus. Cependant avant d’appliquer ce patch sauvegardez les fichiers suivant :

\Windows\Explorer.exe  
\Windows\System32\wisptis.exe   
\Windows\System32\ieframe.dll   
\Windows\System32\shell32.dll   
\Windows\System32\stobject.dll   
\Windows\System32\TabletPC.cpl   
\Windows\System32\themecpl.dll   
\Windows\System32\themeui.dll   
\Windows\System32\powercfg.cpl

Ensuite téléchargez le patch pour architecture x86. La version pour x64 serait disponible demain.

Pour plus de capture rendez-vous sur mon Flickr.

Comment débloquer la nouvelle barre de tâche de Windows Seven

2008-11-09T13:16:00.002+01:00

Présentée lors de la dernière PDC, la nouvelle barre de tâche de Windows Seven a de quoi intriguer. Seulement, Microsoft a annoncer qu’elle ne serait pas présente dans les différentes versions données aux développeurs lors de la conférence du fait de son instabilité.

Cependant Rafael de WithinWindows déjà connu pour ses patchs Uxtheme nous propose une manipulation pour activer cette fonctionnalité.

Téléchargez d’abord le zip suivant votre plateforme x86 ou x64 que vous devrez extraire dans le dossier windows.
Ouvrez ensuite une console en mode Administrateur et exécutez les commandes suivante :
- takeown /f %windir%\explorer.exe
- cacls %windir%\explorer.exe /E /G %username%:F (remplacez “username” par votre nom d’utilisateur)
- taskkill /im explorer.exe /f
- cd %windir%
- start unlockProtectedFeatures.exe

Ayant moi même réalisé la manipulation, j’ai rencontré un problème au niveau des commandes takeown et cacls, si vous rencontrez les mêmes difficultés :

Clic droit sur “explorer.exe”
Onglet sécurité
Ajoutez-vous dans la liste des utilisateurs et vérifiez bien que vous avez coché toutes les propriétés

Via.

Mon test de Windows Seven M3 Build 6801

2008-11-07T22:20:00.001+01:00

Voici quelques captures d’écrans de Windows Seven Milestone 3 Build 6801 (flickr) réalisées lors de mon test. N’hésitez pas à afficher les informations complémentaires lors de la visualisation du diaporama.

Il s’agit d’une Milestone donc il ne faut en tirer aucune conclusion, on se souviendra de Longhorn lors d’une précédente PDC et sa différence avec Vista. Mais pour le moment, j’en retiens une certaine stabilité, un réel progrès pour ce qui est de l’utilisation mémoire ainsi que du temps de démarrage (qui sont les principaux objectifs de Microsoft).

Comparaison entre DomainR et DomainFinder

2008-10-24T18:59:00.003+02:00

Vous l’avez peut-être vu, un nouveau service vient de voir le jour sur internet : DomainR. Il fait exactement la même chose que DomainFinder et c’est d’ailleurs cela qui me chagrine un peu. Le minimum quand on reprends l’idée de quelqu’un d’autre c’est de l’améliorer, surtout quand cette idée est assez originale. C’est donc pour cela que j’ai décider de faire un petit comparatif entre ces deux services, ceci, bien entendu dans la plus grande objectivité possible (du moins je vais essayer).

Le nom

En effet, Domainr est déjà un nom plus “tendance” pour un service de ce genre. Et c’est un fait, DomainFinder est un nom que j’ai du trouvé dans l’empressement, ce qui m’intéressai à la réalisation de ce projet était les fonctionnalités que j’allais y mettre et non ce qu’on en percevrait au premier regard c’est à dire le nom et le design.

Le design

Lorsque j’ai découvert DomainR, c’est la première chose qui m’à frapper, une simple textbox, aucun bouton, un texte descriptif et un logo. Simple et clair c’est l’essence même d’un service web 2.0. C’était bel et bien mon idée initiale à la création de DomainFinder mais quand je le regarde maintenant je me dit qu’il y a beaucoup trop d’informations complémentaires. Le footer de DomainFinder n’est pas assez clair, trop brouillon, contenant des éléments de tailles différentes. L’utilisation de cadres pour séparer les zones à l’écran et leurs dispersions (en haut à gauche, en haut à droite, au milieu, en bas à gauche et en bas à droite) empêche l’utilisateur d’avoir une vision globale de la page.

DomainR - DomainFinder

Le concept

Pour le moment DomainR est une simple copie du concept de DomainFinder, l’utilisateur propose un mot, une expression, et le service cherche les domaines, sous domaine correspondant.

Les fonctionnalités

La vérification de disponibilité des domaines : sur une même expression, par exemple “francois guillaume”, DomainFinder indique la disponibilité de chaque domaine alors que DomainR n’informe que pour 2 domaines.
Le nombre de résultat : DomainFinder fourni l’intégralité des possibilités ce qui n’est pas le cas de DomainR (voir capture). Ainsi sur l’expression “let’s rock”, DomainR donne 4 résultats et DomainFinder 10.
Les extras : DomainFinder permet à l’utilisateur de recevoir par email les résultats de sa recherche, DomainR permet d’avoir des informations supplémentaires sur le TLD (Top Level Domain) via des sites extérieurs.

En pratique

Après 6 requêtes sur les deux services, DomainFinder fourni deux fois plus de résultat et indique 33% de domaines valides (ou non) en plus.

Le document recueillant les différents tests est disponible sur Google Document pour les intéressés. Certains diront que seulement 6 tests ne permettent pas d’avoir une bonne idée et c’est tout à fait vrai. Mais en vu des premiers résultats, je ne pense pas que DomainR puissent avoir une quelconque chance (en terme de résultat j’entends) contre DomainFinder.

Récupérer une photo Flickr protégée

2008-10-15T17:19:00.001+02:00

Avertissement : La méthode que je présente ici n’est à utiliser que si les photos vous appartiennent et que vous avez perdu vos identifiants Flickr.

Vous l’avez peut-être remarqué, il est “impossible” de récupérer certaines photos sous Flickr en effectuant un clic droit puis Enregistrer l’image sous…. Vous obtiendrez alors une image transparente.

Pourquoi ? L’idée pour “protéger” une photo est de lui superposer une autre image de même taille et transparente (ou un filigrane). Ainsi la majorité des utilisateurs ne pourrons pas enregistrer l’image. Cette technique est aussi utilisée par les sites de vente de fonds d’écrans pour téléphone portable et bien d’autre à vous de voir lequel.

Donc, il suffit simplement d’enlever l’image de “protection” pour pouvoir atteindre le saint graal. Pour cela, j’aurai pu créer un bookmarklet pour Flickr, mais quid des autres sites ? Donc je vais simplement donner une des manipulations possibles et qui me semble la plus rapide.

Allez par exemple sur cette page Flickr qui contient une photo protégée, puis :

Ouvrez Firebug
Inspecter
Clic sur la photo que vous souhaitez “déprotéger”
Clic droit sur la partie de code html qui à été surlignée dans Firebug
Supprimer l’élément
Fermez firebug
Maintenant vous pouvez enregistrer l’image, ou simplement l’afficher séparément.

Algorithme et code C d’une fonction de tri croissante

2008-10-01T10:42:00.003+02:00

Dans le cadre d’un cours de C à l’EPSI Nantes, il nous a été demandé de créer une fonction qui permettra de trier de façon croissante (ou décroissante, c’est simplement l’algorithme inverse) une série de 5 nombres entrée par l’utilisateur. Il est à noter que la fonction ne pourra pas utiliser de tableau, ni de pointeur, ni les fonctions de tris disponibles en C.

Je vais donc vous proposer dans cet article un des algorithmes possible pour répondre à cette problématique.

procedure tri E: entier : x1,x2,x3,x4,x5; debut Si x1 > x2 Alors tri(x2,x1,x3,x4,x5) SinonSi x2 > x3 tri(x1,x3,x2,x4,x5) SinonSi (x3 > x4) tri(x1,x2,x4,x3,x5) SinonSi (x4 > x5) tri(x1,x2,x3,x5,x4) FinSinonSi //Test si x1 > x2 et x2 > x3 ... //Afficher les nombres dans le bon ordre

Et le code C :

void tri(float x1, float x2, float x3, float x4, float x5){

   if(x1 > x2) 
      tri(x2,x1,x3,x4,x5); 
   else if(x2 > x3) 
      tri(x1,x3,x2,x4,x5); 
   else if(x3 > x4) 
      tri(x1,x2,x4,x3,x5); 
   else if(x4 > x5) 
      tri(x1,x2,x3,x5,x4);
   //Test si x1 > x2 et x2 > x3 ...
   //Afficher les nombres dans le bon ordre

Il est alors facilement imaginable d’améliorer l’algorithme : avec un nombre x d’entier ou de réel au lieu de 5, d’utiliser un tableau et des pointeurs.

Mise à jour de PlurkCounter et du Widget Karma Plurk

2008-08-20T17:01:00.001+02:00

Petite note de service pour vous informer que PlurkCounter et le widget Karma n'était plus fonctionnel depuis un certain temps. Dès constatation du problème une mise à jour à été effectuée afin de corriger l'erreur (qui était dû à une mise à jour de Plurk) les services sont donc à nouveaux opérationnelles.

Regarder les Jeux Olympiques en live via internet

2008-08-08T09:57:00.005+02:00

Si comme moi vous souhaitez regarder les JO pendant vos vacances (ou plus précisément au travail) vous serez content d'apprendre que France Télévision à pensé à nous !

La page du flux live du Direct des Jeux Olympique existe en deux versions, l'une en silverlight (vive les interfaces riches) et l'autre incorpore un simple lecteur.

Sinon vous pouvez accéder directement au flux live à cette adresse.