Voici la deuxième Experimental Box utilisant la techno WebRTC permettant de manipuler facilement des flux venant d’une webcam depuis Three.js.

Cette démo s’appuie sur l’exemple du site Learningthreejs.

Pour visualiser la démo il vous faudra utiliser le navigateur expérimental de Google: Chrome Canary. Une fois Canary installé et lancé, tapez dans la barre d’adresse:

chrome://flags/

puis activez le module MediaStream WebRTC. Ce-dernier permet aux navigateurs web d’obtenir des fonctionnalités de communication en temps réel au travers d’interfaces de programmation JavaScript. On peut donc envisager des services de visioconférence en Javascript/Html sans aucune techno Flash ! Aujourd’hui WebRTC n’est pas encore supporté par défaut par les navigateurs mais cela va venir On peut donc s’attendre à des applis web de plus en plus poussées …

Une fois ceci fait vous pouvez essayer la démo ! (il vous faut évidemment une webcam)

Voici une petite vidéo montrant le rendu final:

Ce tutoriel va vous permettre de réaliser facilement un chat style facebook avec les technos Node.js et NowJS.

Pour ce tutoriel vous aurez besoin d’installer node.js, vous pouvez suivre les indications ici. Une fois node.js installé, faites de même avec NowJS. Ce-dernier est un framework vous permettant de réaliser des applications node.js plus facilement. En effet, il permet de simplifier la communication entre la partie client et serveur de votre application node. Une fois cet environnement configuré on peut se lancer !

Partie serveur

Je n’expliquerai pas en détail chaque ligne: de bons exemples et doc sont disponibles sur le site de NowJS . Commençons par initialiser notre serveur et le lier avec notre interface client.  Dans mon cas le serveur sera lancé sur le port 1337 et mon interface client sera dans le fichier chatfb.html.

J’initialise également un tableau clients qui va contenir tous nos clients. Attention à bien initialiser celui-ci par { } et non par [ ] car cela provoque un bug chez nowJS pour l’échange de la variable avec le client:

var html = require('fs').readFileSync(__dirname+'/chatfb.html');
var server = require('http').createServer(function(req, res){
    res.end(html);
});
server.listen(1337);

var nowjs = require("now");
var everyone = nowjs.initialize(server);
var clients = {};

Il nous faut tout d’abord une fonction traitant l’arrivée d’un nouveau client:

everyone.now.newClient = function(name){
    //On ajoute le client au tableau en renseignant son pseudo et son statut (connecté ou non)
    clients[this.user.clientId] =  {login: name,statut: 1 };
    // On met à jour la liste des connectés
    for(var c in clients) {
        nowjs.getClient(c, function(err) {
            this.now.updateClientList(clients);
        });
    }
};

Ensuite une fonction qui va créer un groupe afin que deux clients puissent parler entre eux. L’identifiant du chat sera la somme des deux id des clients. Pour créer un canal propre aux deux clients on crée un groupe avec cet identifiant et on les ajoute dedans:

everyone.now.openChat = function(idClient){
    var idChat = parseInt(idClient)+parseInt(this.user.clientId);
    var newChat = nowjs.getGroup(idChat);
    newChat.addUser(this.user.clientId);
    newChat.addUser(idClient);
    newChat.now.addChat(idChat,idClient,clients[idClient].login,clients[this.user.clientId].login);
};

Une fois le groupe crée, on peut traiter l’envoie d’un message entre les deux clients. Si le groupe contient une seule personne alors cela veut dire que l’autre personne s’est déconnectée on renvoie donc un message pour lui signaler, sinon on relaie le message:

everyone.now.sendMessage = function(message, room){
    var group = nowjs.getGroup(room);
    var idSender = this.user.clientId;
    group.count(function (ct) {
        if(ct <= 1) group.now.displayMessage(room, "Your friend isn't connected");
        else group.now.displayMessage(room, clients[idSender].login+': '+clean(message));
    });
};

Enfin on gère la déconnexion d’un client (suppression du client dans le tableau et mise à jour de la liste des connectés):

nowjs.on('disconnect', function() {
    for(var i in clients) {
        if(i == this.user.clientId) {
            delete clients[i];
            break;
        }
    }
    for(var i in clients) {
        nowjs.getClient(i, function(err) {
            this.now.updateClientList(clients);
        });
    }
});

J’ai aussi utilisé cette petit fonction afin de nettoyer les messages échangés et ainsi éviter des injections XSS:

function clean(html){
    return String(html).replace(/&(?!\w+;)/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
}

Partie client

Passons donc à l’interface client. Tout d’abord voici la structure HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Facebook Chat Like in NodeJS</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
        <script src="http://adressedevotresite:votreport/nowjs/now.js"></script>
        <link rel='stylesheet' href='fbchat.css' type='text/css' media='screen' />
    </head>
    <body>
        <div id="loginbox">
            Hi guy ! What's your name ?</br>
            <input type="text" id="login"/><input type="button" value="Go" id="launch">
        </div>
        <div id="nav-right">
            <ul id="clientList">
            </ul>
        </div>
        <div id="chatList">
        </div>
    </body>
</html>

Notez qu’il faut remplacer la ligne suivante avec vos valeurs afin que NowJS soit bien chargé (pour le port utilisez celui renseigné dans la partie serveur):

<script src="http://adressedevotresite:votreport/nowjs/now.js"></script>

Ensuite voyons le code javascript à insérer entre la balise <head>:

 <script>
    $(document).ready(function(){
       // Code javascript client
    });
</script>

Commençons par l’initialisation du chat, on demande le pseudo de l’utilisateur et on le connecte au serveur:

$('#launch').click(function() {
    startApp();
});

function startApp(){
    if($('#login').val() != ""){
        now.name = $('#login').val();
        now.ready(function(){
            $('#loginbox').css("display","none")
            // On signal l'arrivée d'un nouveau client
            now.newClient(now.name);
        });
    }
}

Lorsque l’utilisateur clique sur une personne dans la liste des connectés on va lancer un chat entre ces deux personnes. Si le chat existe déjà on l’affiche sinon on envoie une requête à notre serveur pour qu’il crée celui-ci:

// Demande d'ouverture d'un chat avec la personne
$('#clientList a').live('click',function(){
    var idClient = $(this).attr('id');
    // L'id du chat est égal à la somme des id des deux clients
    var idChat = parseInt(idClient)+parseInt(now.core.clientId);
    if ($('#'+idChat).length == 0){
        now.openChat(idClient);
    } else {
        $('#'+idChat).css('display','block');
    }
});

La fonction précédente demande au serveur de créer un chat. La fonction suivante créée le chat coté client suite à la confirmation du serveur:

// Ajout du chat dans l'interface
now.addChat = function(idChat,idRecever,recever,sender){
    var login;
    if(idRecever == now.core.clientId) login = sender;
    else login = recever;
    $('#chatList').append('<div class="popup-chat" id="'+idChat+'"><div class="popup-chat-header">'+login+' <a href="#null" rel="'+idChat+'"><img src="img/close.gif" alt="" /></a></div><div class="popup-chat-talk"></div><div class="popup-chat-input"><input name="'+idChat+'" id="msg-'+idChat+'" type="text" /></div></div></div>');
    $('#msg-'+idChat).focus();
}

Lorsque l’utilisateur appuie sur la touche « entrée » (key 13) on envoie le message au destinataire:

// Lorsque l'on presse entrée on envoie le message
$(document).keypress(function(e) {
    if(e.keyCode == 13) {
        var id = e.target.name;
        if($('#msg-'+id).val() != ''){
            var msg = $('#msg-'+id).val();
            $('#msg-'+id).val('');
            now.sendMessage(msg,id);
        }
    }
});

On récupère les messages des clients pour les afficher:

// Affichage des messages reçus
now.displayMessage = function(idChat, message){
    $('#'+idChat).css('display','block');
    $('#'+idChat+' .popup-chat-talk').append('<div class="user-msg"><div class="user-avatar"><img src="img/avatar.gif" width="32" height="32"></div><div class="user-text">'+message+'</div></div>');
}

On offre la possiblité de masquer le chat lors du clic sur la croix:

// Masquer un chat
$('.popup-chat-header a').live('click',function(){
    var idChat = $(this).attr('rel');
    $('#'+idChat).css('display','none');
});

Enfin, la dernière fonction permettant de mettre à jour la liste des utilisateurs connectés:

// Fonction mettant à jour la liste des connectés
now.updateClientList = function(clients){
    var c=0;
    $("#clientList").html('');
    for(var i in clients) {
        if(i != now.core.clientId) {
            c++;
            $('#clientList').append('<a id="'+i+'" href="#null"><li><img alt="'+clients[i].login +'" src="img/avatar.gif" width="28" height="28"><div>'+clients[i].login +'</div></li></a>');
        }
    }
    if(c == 0) $('#clientList').append("<li class='alone'>Mmh... You're alone !</li>");
}

Les sources du projet (avec les images et le CSS) sont disponibles ici:

Si vous avez des questions ou des problèmes n’hésitez pas à poster un commentaire

L’HTML5 commence à se répandre peu à peu sur la toile. On y voit des exemples de plus en plus concrets & intéressants. Afin de ne pas manquer le virage, j’ai décidé de me lancer dans quelques expérimentations …

Je lance donc une série d’expérimentations appelée les «Experimental Box» des petites créations faisant appel aux dernières technos & librairies de l’univers web.

Au menu pour cette première box:

• WebGL
• Three.js
• Node.js

La démo est uniquement compatible avec les navigateurs supportant WebGL et est optimisée pour Chrome.

Le tout se trouve ici !

Qwiki n’est pas un moteur de recherche comme les autres. Devant le manque d’innovation dans ce secteur, Qwiki innove en restituant les données d’une manière impressionnante. 

Start-up fondé par Louis Monier (qui a entre autre travaillé chez Google et Ebay), Qwiki s’appuie sur la technologie du web sémantique.

Le web sémantique

Petit rappel, le web sémantique  — concept très en vogue en ce moment — vise à donner du sens aux données sur le web afin qu’elles soient exploitables par n’importe quel agent du web. L’utilisation du web sémantique permet de repérer des entités classées dans différentes catégories (Personne, Société, Pays …). Ces dernière disposent d’attributs (pour la catégorie Personne nous aurons le nom, prénom, date de naissance, etc …). Le but est donc de modéliser l’ensemble du web comme une sorte de base de données que l’on pourra interroger grâce à des requêtes à l’image de SQL. Si vous voulez en savoir plus sur le web sémantique, je vous invite à lire cette très bonne introduction.

Qwiki en action

Qwiki tire donc profit de cette technologie de manière pertinente et présente les données de façon naturelle. Lors de la recherche Qwiki propose en temps réel les entités reconnues afin de générer une présentation multimédia synthétique.

Cette présentation est une restitution de l’article wikipedia de l’entité. Qwiki génère une sorte de diaporama synchronisé avec l’article et lu par une voix de synthèse.

Qwiki ne s’arrête pas là, puisqu’il propose également un résumé quotidien thématique (sport, cinéma …) de l’actualité en représentant les divers news des sites comme Google News ou Yahoo.

Même si Qwiki se limite à la recherche/restitution d’articles sur Wikipedia, il offre une nouvelle façon de présenter les données et exploite totalement le principe du web sémantique. La startup marque une nouvelle étape dans la restitution des données et pourrai bien être l’un des premiers services grand public s’appuyant sur le web sémantique.

Qwiki étant en version alpha on ne peut t’être qu’enthousiaste quant à son futur. A suivre …

Visiter Qwiki →

C’est un peu le concept du moment, le paradigme qui va rendre votre application web incroyable, je parle bien sur de la gamification. 

Pour rappel, la gamification (ou ludification pour les anti oncle sam) consiste à utiliser des mécaniques des jeux vidéos dans une application dans le but d’en augmenter l’acceptabilité. (dixit le père Wikipedia)

La dernière génération d’internautes (digital natives) ont grandis dans un monde ludique et ont connu des vagues successives les familiarisant avec l’univers des jeux vidéos. C’est pourquoi on assiste aujourd’hui à la démocratisation de la gamification. En immisçant des éléments issus des jeux vidéo dans un service, on va fidéliser l’utilisateur, améliorer  l’intérêt et la concentration de ce dernier. Quels sont donc ces éléments ?

Quelques éléments de gamification

Les barres de progression permettent à l’utilisateur d’avoir un repère sur son état d’avancement dans l’application. Cela permet par exemple d’inciter l’utilisateur à finir la tâche qu’il a entrepris

Les niveaux ou « levels » permettent de fidéliser l’utilisateur. Pour passer au niveau supérieur, l’utilisateur devra effectuer des tâches (objectifs) il participera donc à la dynamique de votre application. Les niveaux permettent d’instaurer de la notoriété et inciteront les bas niveaux à gravir les échelons.

Les badges / trophés sont des moyens efficaces pour inciter l’utilisateur à effectuer une action (exemple: poster 100 commentaires débloque le badge Super Loquace)

Les classements permettent d’établir une concurrence positive au sein de votre communauté. Ils peuvent être établis selon différents critères (popularité, activité, investissement …)

Comment expliquer ce phénomène?

Il faut tout d’abord considérer un jeu comme un système ayant des contraintes: une map, un niveau, un plateau. Ces-dernières délimitent l’action dans l’espace et dans le temps. Les jeux disposent également de règles limitant la liberté d’action du joueur. Ce sont ces contraintes qui vont participer à la satisfaction mentale du joueur, ainsi ce dernier s’affranchit de « l’angoisse de la liberté ».« Le joueur ne connaît pas l’angoisse de la liberté » En nous donnant des objectifs clairs et bien définis, les jeux nous épargnes la tâche difficile de définir ce qu’est la réussite; avec les points, les classements, les indicateurs, ils nous disent exactement quand nous avons réussis. Les êtres humains sont friands de ce genre de structure, probablement parce qu’il en existe bien peu dans la vie réelle.

Les jeux exploitent cette insécurité fondamentale. Ils sont conçus comme une succession de cycles courts, chaque actions constituant une petite expérience qui se conclut en quelques minutes, voire en quelques secondes, avec des conséquences concrètes: on gagne des points ou en perd. Ces cycles dynamiques nous maintiennent constamment engagés. On ne peut s’empêcher de continuer encore et encore, de progresser dans le jeu, l’oeil rivé à son score …

Des exemples de gamification

Mindbloom est un site censé améliorer votre qualité de vie grâce à des objectifs de bien-être personnel classés selon différentes catégories (travail, créativité, santé, relations …). L’exécution de ces tâches débloque des récompenses, points, badges.

Foursquare est un des premiers sites à avoir utiliser le concept de gamification, il permet de transformer votre environnement réel en un « plateau de jeu ». Le but est simple: vous êtes dans un bar sympa, un simple « check-in » sur Foursquare permet de signaler votre position à votre réseaux Foursquare. Mais ce-dernier propose de remplir des objectifs, par exemple « Effectuer 5 check-in après 3 heures du matin » débloquera le badge « Fêtard » …

The Email Game facilite la gestion de vos mails. S’appuyant sur Gmail, il permet d’obtenir le « Boite de réception (0) », en proposant régulièrement d’effectuer un petit clean de votre bal grâce à une interface gamifiée (points, jauge de temps …). Par exemple la suppression d’un message non-lu vous fera perdre un certain nombre de points, en revanche y répondre vous en fera gagner …

Pour finir voici une vidéo TED où Seth Priebatsch présente les 4 caractéristiques vitales du processus de gamification:

Si vous souhaitez approfondir le sujet, je vous recommande vivement la lecture de l’article d’Internet-Actu.

Sources: Courrier International, fredcavazza.com
Image Threadless

L’astuce qui va vous faire gagner 2s lorsqu’il s’agira de mettre votre HP TouchPad dans le panier du site rueducommerce.com …

Vous vous êtes déjà logué sur le site, vous avez copié vos coordonnées bancaires dans le bloc-note, il ne vous manque plus que l’optimisation ultime pour choper la TouchPad avant tout le monde ! En regardant le code du site j’ai trouvé une petite bidouille afin d’ajouter les articles …

1/ Rendez-vous sur la fiche produit du TouchPad 16Go

2/ Activer l’extension Firebug

3/ Dans la console javascript de Firebug rentrez le code suivant:
var cidsBase = "30";var pidsBase ="4848681";var qtysBase = "1";var rba = "";var BAId = "30-4848681-38983051469A926F37E29766A886A428";var pp = "30|4848681";purchaseProductServices(2)

Le produit est alors dans votre panier !

Voici le code pour le Pre3
var cidsBase = "4";
var pidsBase = "4847983";
var qtysBase = "1";
var rba = "";
var BAId = "4-4847983-443FA0B0944FEB779729EE0C43380594";
var pp = "4|4847983";
purchaseProductServices(2)

Pour le 32Go
var cidsBase = "30";var pidsBase ="4849308";var qtysBase = "1";var rba = "";var BAId = "30-4849308-38983051469A926F37E29766A886A428";var pp = "30|4849308";purchaseProductServices(2)