Plugins Web
Un site sans connexion Internet ? Google Gears arrive !
Parlons un peu de Google aujourd’hui ! (D’ailleurs je fais une petite parenthèse pour vous signaler que Talus a des vidéos sur une conférence Google, si ça vous branche allez voir l’article concerné)
Je ne vais pas vous parler de la firme en général mais plutôt d’un de ses produits qui est encore en version bêta : Google Gears !
Je vous vois déjà venir : “De quoi s’agit-il ? Et pourquoi ça me dit (peut-être) quelque chose ?”
Bon, tout d’abord si cela vous dit (peut-être) quelque chose c’est parce que Wordpress l’utilise, mais ça ne vous explique pas son utilité hein ?
Il s’agit d’un plugin web que l’on peut installer sur n’importe quel OS et qui vient s’intégrer à votre navigateur (dans la liste de ceux compatibles bien sûr : IE, Firefox, Chrome, Safari). Son intérêt réside avant tout dans la possibilité de sauvegarder votre site web sur le PC de l’utilisateur et ainsi permettre son affichage même sans connexion à Internet.
Venons-en au détail :
Google Gears est composé de 3 modules principaux (et plusieurs autres “secondaires”) ayant chacun une fonction bien spécifique :
- LocalServer : Mot à mot, il s’agit d’un serveur local, mais en fait ce n’est pas exactement ça, il s’agit surtout d’un simple espace de stockage car il est incapable d’exécuter le moindre code PHP, tout doit passer par le Javascript (et cay bien). En fait on peut l’assimiler à un gestionnaire SVN car il récupère les fichiers (automatiquement ou manuellement) qui ont été mis à jour sur le site web de l’application (d’ailleurs il ne récupère que les fichiers mis à jour, donc ça évite les téléchargements superflus =p ).
- Database : Je pense que vous avez compris, il s’agit effectivement d’une base de données. Celle-ci est accessible par le biais du Javascript et est basée sur SQLite donc il n’y a pas de quoi s’inquiéter : On peut faire autant de choses qu’avec une BDD classique.
- WorkerPool : Alors ça j’ai mis un moment avant de comprendre son utilité, il s’agit d’un gestionnaire de tâches asynchrones. Plus simplement, ce module permet de lancer des tâches en arrière-plan afin de ne pas bouffer tout le proco. Mais qu’est-ce que ça vient foutre là en fait ? C’est quoi le rapport ? Eh bien il se trouve que c’est déjà utile rien que pour le téléchargement des fichiers sur le serveur local, sans lui l’interface se bloquerait.
Il a aussi d’autres utilités mais c’est le module que j’ai le moins étudié pour le moment donc je peux pas vous dire grand chose de plus.
Il y a aussi quelques autres modules mais un peu plus secondaires, on peut citer parmi eux celui qui permet de créer des icônes de raccourci sur le Bureau, dans la barre de lancement rapide ainsi que dans le menu Démarrer, il y a aussi un système de géolocalisation qui fonctionne bien mais dont je ne comprends pas l’utilité…
Bref, bien qu’étant encore en version bêta (v0.5.4.2 à l’heure où j’écris ces lignes), Google Gears est pour le moment très complet. Et d’ailleurs c’est bien pour cela que j’ai commencé à m’y intéresser. Tiens, puisqu’on parle de ça on va voir un peu “la partie code”.
Tout d’abord, je tiens à féliciter l’équipe de développeurs pour leur Doc qui est très complète, j’ai pas eu de gros problèmes pour apprendre à me servir de Gears (faut comprendre l’anglais technique quoi…).
La structure de Google Gears est plutôt bien réalisée, on a une classe d’ensemble (nommée “factory” mais qui sera peu à peu abandonnée dans la version finale de Gears) qui permet de créer un objet pour chaque module (Localserver, Database, etc…). Et chacun de ces objets possède des méthodes et des attributs permettant de gérer le domaine qui leur est attribué.
Comme je m’explique mal je vais faire un exemple pour le serveur local :
var localserver = google.gears.factory.create(‘beta.localserver’);
// On ouvre maintenant le gestionnaire de fichiers locaux :
var store = localserver.createManagedStore(‘my_store’);
// On peut maintenant commencer les opérations sur le serveur local :
store.manifestUrl = ‘manifest.txt’ // On spécifie le "manifest" à utiliser.
store.checkForUpdate(); // Permet de vérifier les mises à jour des fichiers.
C’est pas bien sorcier hein ? Bon, les deux dernières lignes ne sont pas importantes, c’est juste pour vous montrer qu’il y a des méthodes et des attributs de disponibles.
Mais, concrètement, comment fonctionne le serveur local ? Comme je l’ai déjà dit plus haut, il s’agit avant tout d’un espace de stockage avec mise à jour des fichiers, rien de plus. Mais là où ça prend tout son intérêt c’est que, dorénavant, ce sont les fichiers enregistrés sur votre ordinateur qui seront chargés et non pas ceux disponibles sur Internet, c’est donc beaucoup plus rapide. Certains me diront que le cache fait ça tout aussi bien mais ce n’est pas vraiment le cas car Gears est quand même plus rapide et lui il peut enregistrer absolument tout et sans limite de temps, contrairement au cache de votre navigateur.
Venons-en maintenant au module Database, je vais faire court. Celui s’initialise de la même façon que le serveur local (en fait tous les modules s’initialisent de la même façon, c’est plus simple) et permet de créer plusieurs BDD pour un seul site web. La syntaxe d’écriture pour commander à la BDD reste très simple, on l’utilise à peu près de la même façon qu’une BDD classique.
Voilà, je ne pense pas qu’il soit nécessaire d’en dire plus.
Concernant le WorkerPool, je ne vais pas en parler vu que je n’ai pas vraiment étudié le truc.
Bref, tout ça c’est bien beau mais qu’est-ce qu’on pourrait bien faire d’utile et qui utilise Gears à bon escient ? Je me suis effectivement posé cette question moi aussi et en fait la réponse est simple : Gears n’a pas été conçu pour faire des sites webs disponibles hors-ligne mais pour créer des applications !
Des applications ? Oui ! Je pense que vous connaissez tous ce système d’éditeur de texte en ligne, il en existe plusieurs mais on ne peut y accéder que en ligne. Alors pourquoi ne pas le rendre compatible avec Google Gears ? Ainsi l’accès à l’éditeur se ferait depuis n’importe où, et ce, même sans connexion Internet.
On constate d’ailleurs que Google a commencé à exploiter son propre plugin, l’entreprise a déjà rendu plusieurs de ses applications compatibles avec Gears, on peut notamment citer : Gmail, Calendar, Youtube aussi ! Je crois qu’il y en a d’autres mais je ne les connais pas tous.
Bref, je crois avoir fait le tour sur ce plugin. Pour ceux qui voudraient éventuellement essayer, j’ai réalisé une petite page web exploitant le Localserver (pas de Database non, la flemme). Et pour ceux qui voudraient en voir plus alors je vous redirige vers le site de développement où on peut trouver quelques exemples.
Ah, dernière chose ! Si vous êtes tentés par l’aventure (autrement dit, si vous voulez coder pour Gears), ne vous étonnez pas de voir des bugs, Gears est encore en version bêta ! D’ailleurs si vous en trouvez un je vous recommande de le rapporter ici, j’en ai moi-même rapporté deux (ici et là).
Voilà tout, à la prochaine !
Nes’
Quand le web rencontre la 3D : Cooliris
Bien, maintenant que ce blog est ouvert, il faut le remplir ! Je vais donc commencer par parler de Cooliris.
Mais introduisons tout d’abord le problème :
Alors que depuis plusieurs années Internet se développe à une vitesse folle, faisant même apparaître le fameux Web 2.0 censé améliorer la communication entre le client et le serveur (grâce à diverses technologies telles que l’Ajax) on constate qu’il manque une chose que beaucoup de monde voudrait voir venir un jour : le Web 3D !
Bien sûr, je ne parle pas d’une interface révolutionnaire digne des films de science-fiction mais plutôt d’une interface agréable permettant de naviguer de façon simple et ludique sur un site. Seulement, pour le moment on ne voit rien venir… En cause, on retrouve la difficulté de ce genre projet (coder une interface 3D n’est pas une chose facile), mais aussi une standardisation quasi-inexistante (il existe bien quelques règles mais elles sont minimes).
Certains me diront : “Mais le web 3D existe déjà ! Tu as oublié Flash ?”. Certes, mais ce n’est que très peu répandu et cette technologie n’est pas la plus pratique pour la 3D, de plus, au niveau de l’accessibilité c’est zéro pointé ! (Et puis tout le monde le sait : SilverLight est mieux =° )
Bref, c’est la pagaille…
La solution ? Aucune pour le moment, mais Cooliris ouvre le bal !
Ce dernier est en fait un plugin qui vient s’intégrer à votre navigateur web (compatible avec IE6+, Firefox et Safari, on regrettera que Opera ne soit pas encore supporté) et permet d’afficher une galerie d’images dans une interface 3D en un simple clic. Pour cela, le site source doit être compatible (j’en reparlerai plus bas) mais les avantages sont là ! Alors, certes, on est encore loin de l’interface 3D complète d’un site web mais c’est déjà une belle avancée.
Afin de vous présenter cela, je vais prendre un exemple : vous vous trouvez sur une galerie d’images avec environ une vingtaine d’images par page et un lien sur chacune d’entre elles pour la voir en plus grand. C’est bien, mais les chargements sont bien trop nombreux et vous ne pouvez pas naviguer “au pif” très rapidement. Maintenant, admettons que ce site soit compatible avec le plugin Cooliris : il vous suffit alors de cliquer sur un bouton et vous êtes immédiatement transporté dans une interface 3D plein écran qui permet de visualiser toutes les images du site ! Mais quand je dis toutes c’est vraiment toutes (à condition que le site en offre la possibilité) ! Vous n’avez qu’à vous déplacer grâce à la souris (le clavier est utilisable lui aussi, vive l’accessibilité) et vous pouvez feuilleter des centaines de pages sans aucun rechargement de page. Au pire, il vous faudra attendre un peu que les miniatures se chargent mais ce n’est pas vraiment un problème.
Bref, je vous ai expliqué le principe, voici donc ce que j’en pense : ce n’est pas mal du tout ! J’ai essayé sur plusieurs sites (les plus grands sites comme Google, deviantArt, Flickr, etc… sont compatibles) et l’effet obtenu est vraiment agréable. Voici donc ce que l’on obtient en visualisant deviantArt :
Aperçu de l'interface
Comme vous pouvez le constater, l’interface est assez épurée et permet de visualiser un grand nombre d’images rapidement (on peut zoomer et dézoomer avec la molette).
- En haut à gauche vous avez donc la connexion à un compte (je n’en ai pas personnellement), l’image du site visité (facultative) et un menu nommé Discover qui permet de visualiser divers contenus éparpillés sur plusieurs sites.
- En haut à droite vous avez la recherche (sur plusieurs sites différents) ainsi que les boutons pour fermer ou réduire l’interface (voici à quoi ressemble l’interface une fois réduite, simple non ?).
- En bas à gauche se trouve un bouton permettant d’agrandir une image et donc de la mettre en plein écran de cette façon (la même chose peut se faire en double-cliquant sur l’image en question).
- Et enfin, la barre en bas au milieu permet de vous déplacer parmi les miniatures et aussi de voir combien d’entre elles vous pouvez visualiser en même temps.
Concernant l’affichage des images, vous n’êtes pas obligé de le faire constamment en plein écran, vous pouvez très bien faire un simple clic sur l’image en question, ce qui vous permettra de la visualiser de cette façon :
Après un simple clic sur une image
Bref, l’interface est vraiment super bien fichue et je vous propose d’aller essayer immédiatement sur le site officiel.
Concernant les performances, je n’ai relevé aucun problème et pas de chargements intempestifs (et pourtant mon PC n’est pas un monstre). Je n’ai pas eu le moindre bug non plus, à priori l’équipe n’a pas chômé. Il n’y a que l’affichage des vidéos (car, oui, on peut visualiser des vidéos !) provenant de Youtube qui foire pour le moment…
Un point noir par contre concernant l’interface : j’aurais apprécié que tout se fasse dans celle dernière comme parcourir, visualiser mais aussi enregistrer les images ! Or cette dernière fonction est inexistante, à la place on a un bouton permettant d’afficher l’image dans le navigateur mais rien de plus, c’est dommage…
Bref, c’est bien beau tout ça mais parlons maintenant de l’implémentation de Cooliris sur un site web : comment faire ? Étant assez prudent, je m’attendais à voir des trucs pas possibles et pourtant j’ai été bluffé : un simple flux RSS suffit oO ! Alors bien sûr il y a quand même quelques trucs à indiquer mais c’est assez dingue de simplicité.
Pour mettre une galerie d’images en place, il vous faudra donc créer un fichier XML en utilisant la syntaxe de “Media RSS Feed” (plus d’infos sur le site de Cooliris) puis déclarer votre flux RSS dans le header de votre page HTML.
J’ai moi-même fait un essai et ça fonctionne parfaitement. Vous constaterez par ailleurs que la visualisation d’un nombre restreint d’images n’est pas superbe, il en faut minimum une trentaine pour un effet sympathique… et si vous ne l’avez pas encore fait, allez donc visiter le site de deviantArt afin d’avoir un paquet d’images à regarder, l’effet sera tout de suite plus agréable.
Dernière chose concernant certains petits ajouts pratiques :
- Lorsque vous visualisez une image en plein écran vous pouvez lancer un diaporama automatique;
- Quand vous visualisez une image en plein écran, les images suivantes sont chargées à l’avance;
- Les images sont mises dans le même cache que celui du navigateur : un seul téléchargement à faire donc;
Bon, je crois avoir tout dit… j’espère que vous aurez trouvé ce billet intéressant (peut-être un peu trop long non ?) et moi je vous laisse !
Nes’
PS : Certains n’ont pas compris on dirait… le plugin ne se lance pas automatiquement ! Il faut cliquer sur l’icône située en haut à droite de votre navigateur.