Maurice Svay

Comme chaque année depuis 2006, a lieu Paris Web, LA conférence qui s'adresse à ceux qui font le Web. Contrairement à d'autres conférences, Paris Web est une conférence réellement utile, où on apprend des choses. On y retrouve bon nombre d'experts pour discuter des sujets qui font le Web: technologies, design, accessibilité, standards, etc. Cette année encore, on retrouvera des têtes francophones connues comme Tristan Nitot, Daniel Glazman ou Amélie Boucher, mais également des orateurs internationaux comme Molly Holzschlag ou Nicole Sullivan. Tous les témoignages sont d'accord, Paris Web est l'une des meilleures conférences sur le sujet. Et pourtant, le tarif est très abordable. Tout ça pour dire qu'il ne faut pas rater cette conférence, donc foncez VOUS INSCRIRE!

Il n'y a pas très longtemps, j'ai trouvé des lunettes 3D sur une boîte de Chocapics. Ca m'a rappelé les essais d'images en 3D que je faisais il y a quelques années. La recette est super simple: on prend deux images, une pour l'oeil gauche et l'autre pour l'oeil droit. De l'une, on prend la composante rouge et de l'autre, la composante cyan (bleu+vert). On mélange le tout et... paf! Ca fait un anaglyphe!

Ayant joué récemment avec Javascript et l'élément canvas, je me suis dit que ça pourrait se faire facilement avec ces deux technologies. Après quelques essais, j'ai obtenu un Anaglyph generator qui fonctionne à peu près avec un Firefox, un Safari ou un Opera récent. Concernant Internet Explorer, aucune chance pour le moment: excanvas ne supporte pas encore getImageData ni putImageData.

Pour générer un anaglyphe, il suffit d'indiquer deux URLs d'images et de presser le bouton. Pour simplifier, le resultat est toujours affiché en 640x480 (N'hésitez pas à poster l'URL de votre anaglyphe dans les commentaires!).

Ceux que ça intéresse, peuvent jeter un oeil au code. C'est plutôt simple:

• on charge deux images;
• on attend qu'elles soient complètement chargées;
• on crée deux canvas pour y copier les images;
• on remplace la composante rouge d'un canvas par la composante rouge de l'autre;
• et on affiche le résultat!

Les pièges à éviter

Même si la technique est simple, il y'a tout de même quelques pièges à contourner.

Le premier est la politique de sécurité du navigateur. Comme pour les requêtes XMLHttpRequest, le navigateur ne permet d'accéder aux pixel que des images du même domaine. Du coup, pour pouvoir afficher une image venant d'ailleurs, il faut passer un proxy.

Voilà à quoi ressemble le proxy:

<?php
if (isset($_GET['url']) && preg_match('/^http/i', $_GET['url'])) {
    $url = $_GET['url'];
    if (preg_match('/.png$/i', $url)) {
        header('Content-type: image/png');
    }elseif (preg_match('/.jpg$/i', $url)) {
        header('Content-type: image/jpg');
    }
    readfile($url);
}

Le second, est qu'il faut s'assurer que les images sont bien chargées. En local, ça va forcément très vite et on n'a jamais de problème. Avec des images distantes, ça peut mettre un peu de temps et empêcher le script de fonctionner. Pour résoudre ce problème, deux trucs:

• utiliser setTimeout pour attendre en boucle que les images soient chargées. La fonction Anaglyph.wait vérifie si les images sont totalement chargée en regardant l'attribut complete. Si ce n'est pas le cas, elle va attendre un peu et s'appeler elle-même à nouveau. Une fois que les deux images sont chargées, elle peut appeler Anaglyph.make qui va générer l'anaglyphe.
• imbriquer le code qui manipules les canvas dans un try/catch pour éviter que le code ne casse.

Si l'élément canvas vous intéresse, il y'a déjà pas mal de ressources intéressantes sur le sujet:

• L'élément Canvas sur DevMo
• Les posts parlant de Canvas de Jacob Seidelin
  • en particulier, la cheat sheet Canvas
• Les articles de Dev.Opera sur Javascript

Plein de choses intéressantes ont déjà été faites avec canvas: de la 3D, de la visualisation de musique, de la retouche d'images, des trucages vidéos, etc. Il y'a sûrement encore plein d'autres choses à faire. De quoi me faire réfléchir toute la nuit encore...

Cet article va expliquer comment créer une application Twitter simple, qui fonctionne qu’on soit connecté ou non. Pour celà, nous allons utiliser des technologies Web, en particulier des nouveautés de HTML5 qui permettent de stocker des données côté client et de mettre des fichiers en cache. Le navigateur Safari de l’iPhone se prête bien à l’exercice, puisqu’il supporte ces technologies.

Les plus pressés peuvent tester immédiatement la démo.

Le squelette de l'application

Tout d’abord, il faut créer le squelette HTML de notre application. Ce fichier HTML devrait faire l’affaire:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; UTF-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Language" content="en" />
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=1;"/>
<style type="text/css">
    body {
        font-family: sans-serif;
        margin: 0;
        padding: 0;
    }
    #toolbar {
        background: #EFEFEF;
        padding: 5px;
        border-bottom: 1px solid #a3a3a3;
    }
    #toolbar button {
        border: 1px solid #a1a1a1;
        -webkit-border-radius: 3px;
        background: #F3F3F3;
        padding: 0.5em;
    }
    ol {
        margin: 0; padding: 0;
    }
    ol li{
        list-style: none;
        border-bottom: 1px solid #CCC;
        margin: 0;
        padding: 0.5em;
        overflow: auto;
    }
    span.text {
        display: block;
        margin-left: 29px;
    }
    li img {
        float: left;
    }
    .date {
        font-size: 0.8em;
        color: #AAA;
    }
</style>
<title>iPhone Twitter</title>
</head>

<body>
<div id="toolbar">
    <button id="load">&#8635; Refresh</button>
</div>
<ol id="timeline"></ol>

<script type="text/javascript" src="twitter.js"></script>
<script type="text/javascript">
<!--
window.onload = function() {
    Twitter.init();
    document.getElementById('load').onclick = function() {
        Twitter.load();
    }
}
-->
</script>
</body>
</html>

Ce fichier se décompose de la manière suivante:

• L’entête HEAD avec le doctype HTML5, une balise META spécifique à l’iPhone, un peu de CSS (et même un peu de CSS3);
• Le corps BODY qui contient une toolbar et une liste ordonnée vide;
• L’inclusion d’un fichier JS et un peu de code pour démarrer l’application et ajouter un le comportement à notre toolbar.

Passons maintenant au fichier twitter.js

Accès à la base de données

La première chose, est d’ouvrir la base de données. Si elle n’existe pas, elle sera créée automatiquement.

var db = null;
try {
    if (window.openDatabase) {
        db = openDatabase("Twitter", "1.0", "Twitter Feed", 200000);
    }
} catch(err) {}

La fonction openDatabase prend 4 paramètres:

• le nom de la base
• la version de la base
• le nom long (ou description)
• la taille attendue de la base

La base sera accessible à travers la variable globale db.

L'objet Twitter

On va ensuite créer un objet Twitter qui va contenir le code pour le chargement et l’affichage des tweets.

var Twitter = {
    count: 20
}

Pour le moment il ne contient qu’un attribut de configuration: le nombre de tweets à télécharger à chaque rafraîchissement. Mais nous allons tout de suite lui ajouter des méthodes dans le chapitre suivant.

Création de la table et affichage des tweets

Au chargement de l’application, nous allons tenter de créer la table (si elle n’existe pas) et lire les tweets qu’elle contient pour les afficher. Comme les données sont stockée en local, les tweets s’afficheront, même si la connexion Internet est interrompue.

En revanche, si la base de données n’est pas disponible, nous allons récupérer les tweets directement en ligne.

On va donc ajouter la méthode init qui suit:

Création de la table:

//Create table
init : function() {
    console.log('init');
    
    if (db) {
        //Have database? Read data
        db.transaction(function(tx) {
            tx.executeSql(
                "CREATE TABLE IF NOT EXISTS status (id REAL UNIQUE, username TEXT, created_at TEXT, text TEXT, avatar TEXT)", 
                [], 
                function(result) {
                    Twitter.readStatus();
                }, 
                function(tx, error) {
                    Twitter.readStatus();
                }
            );
        });
    } else {
        //No database? Just load data and display
        Twitter.load();
    }
},

Si la base de données est bien là et la table créée, nous pouvons faire une requête pour récupérer les tweets:

//Read statuses
readStatus : function() {
    console.log('read');
    db.transaction(function(tx) {
        tx.executeSql("SELECT id, username, created_at, text, avatar FROM status ORDER BY id DESC", [], function(tx, result) {
            
            var timeline = document.getElementById('timeline');
            timeline.innerHTML = '';
            
            for (var i = 0; i < result.rows.length; ++i) {
                var row = result.rows.item(i);
                Twitter.display(row);
            }
        }, function(tx, error) {
            // Couldn't retrieve tweets
            return;
        });
    });
},

Rien de très compliqué: la requête de type SELECT récupère les données et on passe chaque ligne résultat à une fonction qui va se charger de les afficher.

L’affichage d’un tweet est effectué par une fonction qui va simplement généré un LI pour l’ajouter à notre liste ordonnée:

//Display statuses
display : function(row) {
    console.log('display');
    var timeline = document.getElementById('timeline');
    
    var li = document.createElement('LI');
    var d = new Date();
    d.setTime(Date.parse(row['created_at']));
    li.innerHTML = 
        '<img src="'+row['avatar']+'" alt="" height="24" widht="24"/>'+
        '<span class="text">'+
        '<strong>'+row['username'] + '</strong> ' +
        row['text'] +
        ' <span class="date">' + prettyDate(d) + '</span>'+
        '</span>';
    timeline.appendChild(li);
},

Notez que cette fonction utilise une autre fonction prettyDate qui formatte la date pour la rendre lisible. Je ne documenterai pas cette fonction mais vous la trouverez dans la démo.

Remplissage de la base de données

Pour le moment, notre table ne contient aucun tweet, donc rien ne s’affiche. Nous allons charger les données twitter, les stocker et les afficher.

Pour faire simple, nous allons utiliser l’API JSONP de Twitter pour charger les 20 derniers tweets. La méthode load fait plusieurs choses:

• nettoyer les <script> précédents qui auraient pu être ajouté par un précédent chargement
• donnée un feedback visuel pour indiquer que le chargement a démarré
• charger les tweets en insérer le fichier JSONP en tant que <script> dans le <head>
• indiquer que le chargement est terminé lorsque les données sont là

Comme la timeline est protégée par un login et un password, il faudra les entrer lorsque le navigateur le demande.

load : function() {
    console.log('load');
    //Remove JSONP scripts
    var head = document.getElementsByTagName('head')[0];
    var scripts = null;
    while ((scripts = head.getElementsByTagName('script')).length > 0 ) {
        head.removeChild(scripts[0]);
    }
    
    document.getElementById('load').innerHTML = 'Refreshing...';
    
    var now = new Date();
    var url = 'http://twitter.com/statuses/friends_timeline.json?callback=Twitter.twitterCallback&count={count}&random={random}';
    var script = document.createElement('script');
    script.setAttribute(
        'src', 
        url.replace('{count}',Twitter.count)
           .replace('{random}',now.getTime())
    );
    script.onload = function() {
        document.getElementById('load').innerHTML = '↻ Refresh';
    }
    console.log(script);
    head.appendChild(script);
},

Une fois le chargement terminé, un callback est automatiquement appelé. Si la base de données existe, il va simplement extraire les données qui nous intéressent et les stocker dans la base de données. Sinon, il va afficher chaque tweet.

twitterCallback : function(obj) {
    console.log('callback');
    
    if (db) {
        var inserts = [];
        for (var i=0, l=obj.length; i<l; i++) {
            var status = [
                obj[i].id,
                obj[i].user.screen_name,
                obj[i].text,
                obj[i].created_at,
                obj[i].user.profile_image_url
            ]
            inserts.push(status);
        }
        Twitter.insert(inserts, Twitter.readStatus);
    } else {
        //No database? just display
        for (var i=0, l=obj.length; i<l; i++) {
            Twitter.display({
                'id' : obj[i].id,
                'username' : obj[i].user.screen_name,
                'text' : obj[i].text,
                'created_at' : obj[i].created_at,
                'avatar' : obj[i].user.profile_image_url
            });
        }
    }
},

Il faut savoir que l‘INSERT est asynchrone et risque de lancer l’affichage avant que nos données soient entièrement stockées. Nous utilisons donc notre propre fonction Twitter.insert qui va faire les insertions et n’afficher qu’à la fin.

Voilà notre méthode d’insertion qui simule une insertion synchrone. Elle prend deux paramètres: le tableau de données et un callback à executer en find d’insertion.

//Synchronous insert
insert : function(arStatus, callback) {
    var status = arStatus.pop();
    var sql = "INSERT INTO status (id, username, text, created_at, avatar) VALUES (?,?,?,?,?)";
    
    db.transaction(
        function (tx) {
            tx.executeSql(
                sql,
                status,
                function(tx, result){
                    if (arStatus.length > 0) {
                        Twitter.insert(arStatus, callback);
                    } else {
                        callback();
                    }
                },
                function(tx, error){
                    if (arStatus.length > 0) {
                        Twitter.insert(arStatus, callback);
                    } else {
                        callback();
                    }
                }
            );
        }
    );
}

Voilà, nous avons tout le code nécessaire pour récupérer des tweets, les stockers localement et les afficher sans repasser par le serveur.

Cache d'applications offline

Jusque là, nous avons créé une application web qui conserve des données en local. Une connexion reste néanmoins nécessaire pour afficher la page HTML et charger le javascript. Heureusement, HTML5 offre un mécanisme qui permet de garder ces deux fichiers en cache et d’y accéder même sans connexion Internet. Cette fonctionnalité est offerte par le cache-manifest, un fichier qui indique au navigateur la liste des fichiers à garder en cache. Ces fichiers ne seront plus jamais rafraichis, à moins que le cache-manifest ne change.

Ce fichier doit être envoyé avec le bon type MIME Content-type: text/cache-manifest (avec PHP par exemple) pour fonctionner. Notez qu’on inclue un commentaire avec la date pour versionner ce fichier. Il suffira de changer la date pour forcer un rechargement complet de l’application.

CACHE MANIFEST
#20090201-1731
index.html
twitter.js

Un fois ce fichier créé, il suffit de l’inclure dans le fichier HTML en modifiant la balise HTML:

<html manifest="cache-manifest.php">

Conclusion

Si vous avez bien suivi toutes les étapes (et si j’ai bien expliqué), vous devriez avoir une application qui fonctionne totallement offline. Lors de la première connexion, la page HTML et le JS se chargent et sont mis en cache. Ils pourront être accédés n’importe quand par la suite, même sans connexion. L’application permet ensuite d’afficher des tweets stockés localement, sans téléchargement quelque donnée.

Pour télécharger les fichiers complet et tester l’application, tout est disponible à cette adresse: http://svay.com/experiences/iphone-twitter/

Cet exemple est plutôt basique et vous aurez certainement des idées d’applications plus élaborées. D’ailleurs, il semblerait que Google lance dans peu de temps une version offline de GMail pour iPhone en utilisant les même technologies.

Enfin, voilà les liens qui ont servi à préparer ce tuto:

• Offline Web Applications sur le site du W3C
• WebKit Does HTML5 Client-side Database Storage sur le blog de Webkit