Gatellier.be » Ajax

Ajouter de tags et de commentaires dans les vidéos avec Viddler

Marin — Thu, 11 Jan 2007 19:25:17 +0000

Viddler est un service de partage de vidéo en ligne pas comme les autres. Son gros avantage est de permettre d'attribuer des tags et de commenter des moments précis des vidéo.

Il permet aussi de référer une image figée lorsque l'on envoie la vidéo. Grâce à Viddler, vous ne devrez plus regarder l'entièreté de films qu'on vous envoie ou que vous trouvez sur internet pour voir une image particulière.

(...)
Read the rest of Ajouter de tags et de commentaires dans les vidéos avec Viddler (196 words)

iPhone : ça va switcher !

Marin — Wed, 10 Jan 2007 09:33:15 +0000

Tout le monde sait maintenant que l'iPhone de Apple sera bientôt disponible, on en parle partout :

via Technorati

Après l'excitation du moment, et la nuit portant conseil, voici une petite liste non exhaustive de mes remarques sur l'iPhone.

Les plus :

C'est un appareil convergent, regroupant appareil photo, gsm, console internet portable, lecteur multimédia
Il a un vrai browser web (Safari) donc j'espère qu'il supporte aussi Ajax.
Le design est quand même magnifique.

On ne parle pas de moi sur cette photo, mais bien d'un restaurant sushi dans Marin County à côté de San Francisco

Les moins :

Un module/application GPS.
Une interface Accessible
Une résolution de photo digne de ce nom (cfr. Nokia N95)
Des applications (type lecteur de Code QR)
Les vraies spécifications techniques (combien de RAM ? CPU ?)

Je recherche :

Un lien vers la photo que Steve Jobs a envoyée sur Flickr. Comme ça je pourrai me faire une idée de la qualité de l'appareil photo de l'iPhone

PS : Pour l'instant aucun résultat dans Flickr pour une recherche par marque sur "Apple". Et bien sûr, moi aussi, j'en veux un !

Liens relatifs :

Ajax: Reconnaissance de caractères japonais

Marin — Tue, 31 Oct 2006 14:57:14 +0000

Via Fabrice de Reviewing the Kanji et d'Emakina, je suis tombé sur une application de reconnaissance de caractères japonais en Ajax

Bon, même si les explications sont en japonais et que mon court séjour là-bas l'année passée ne m'a pas permis d'apprendre toutes les subtilités de la langue, le concept est très intéressant.

Une interface de dessin gérée via javascript enregistre les points qui ont été tracés.

Un post en Ajax vers le serveur permet de récupérer les différents caractères qui ont été compris par le serveur.

Utilisation d'Ajax appropriée.

L'utilisation d'Ajax est tout à fait appropriée dans ce cas-ci. Le visiteur dessine à l'écran (en créant des span ayant une certaine class). Si la page avait été rafraîchie lors de la soumission du formulaire, le serveur aurait du retourner: soit une image générée avec les coordonnées des points, soit la liste des points qui auraient du être retraités pour redessiner le dessin (ouf)...

Il ne me reste qu'à m'exercer sur mes Kanjis avant de retourner voir Linou au Japon.

Liens relatifs

Charles sniffe de l’Ajax et du swf

Marin — Tue, 17 Oct 2006 16:17:58 +0000

non je ne parles pas de mon (plus si) petit voisin

On a vu récemment que sous Firefox, il était très facile de tracer les requêtes Ajax avec l'extension Firebug.

Et pour Internet Explorer?

Il existe une application multi platforme (Win/MacOS/Linux) qui permet de renifler tout le traffic passant par les navigateurs. Le nom de ce bonheur pour les développeurs: Charles

Une fois installé et activé, Charles se comporte comme un serveur proxy et enregistre les différentes requêtes HTTP

L'analyse des données de la partie droite de l'écran permet de retrouver une foule d'informations sur la ressource demandée. Dans ce cas-ci, il s'agissait d'un flux RSS.

L'onglet Général nous indique tout ce qui est relatif au fichier demandé lui-même (taille, vitesse de téléchargement, etc), l'onglet Request reprend ce que le browser a demandé au serveur, et l'onglet Response reprend ce que le serveur a répondu.

Exactement ce qu'on cherche pour déboguer nos applications Ajax.

Comme ce programme se comporte comme un proxy, il capture tous le traffic, même les requêtes qui sont faites par des fichier .swf tels des diaporamas ou des applications FlashComm

Quand je vous disais que c'était le bonheur !

Disponible sur le site du développeur, la version d'essais est tout à fait fonctionnelle sauf qu'elle s'arrête après trente minutes (assez pour certains). Sinon, l'application coûte US$50,-. Pas si cher que ça.

Liens relatifs

Je (re)découvre Firebug ou le débogage facile

Marin — Wed, 11 Oct 2006 16:11:26 +0000

En préparant un petit article, je suis tombé sur cette vidéo qui montre comment déboguer avec Firebug.

Je suis presque tombé de ma chaise. Je ne connaissais pas la moitié des capacités de cette merveilleuse extension de débogage pour FireFox, que j'emploie quand même depuis un bout de temps (v0.2 si les souvenirs sont bons).

Avant, je ne l'employais que pour tracer mes appels Ajax et les réponses du serveur et tester des variables et fonctions, le tout dans la console.

Je n'avais pas vraiment vu la puissance du débogueur.

Une petit explication s'impose.

Pour que Firebug s'arrête à chaque erreur, il faut que l'option soit activée. (onglet "Debugger", menu "Options").

Je pensais que toutes les options étaient regroupées à un seul endroit. Soit, je m'encroûte, soit l'interface n'est pas super parlante.

Bon maintenant regardons tout ce que l'on peut faire avec ce débogueur.

Le principe est le suivant : on appelle des méthodes de l'objet console en lui passant des paramètres.

console.log("message" [,objects])
console.debug("message" [,objects])
console.info("message" [,objects])
console.warn("message" [,objects])
console.error("message" [,objects])
etc...

La liste complète des méthodes de Firebug est bien évidemment disponible en ligne.

Vraiment bien fait ces petites méthodes (surtout celles qui permettent d'évaluer le temps qu'un javascript met).

Adopté par toute l'équipe des intégrateurs, et certains développeurs. Merci Joe Hewitt !

Liens relatifs :

Firebug, l'extension de débogage pour Firefox
Le blog du développeur de l'extension Firefox
La vidéo explicative - qui m'a révélé le potentiel de Firebug
Un autre article intéressant sur Firebug

Vérifier la disponibilité d’un nom de domaine avec Ajax

Marin — Sat, 02 Sep 2006 16:05:54 +0000

Vérifier la disponibilité d'un nom de domaine est désormais plus rapide grâce à AjaxWhois.

Vous entrez le nom de domaine convoité dans le champs et après quelques secondes, vous saurez si le nom est libre ou déjà enregisté.

L'avantage est que la page n'est pas rafraîchie, le curseur de l'utilisateur reste dans le champs donc, dès que l'utilisateur reçoit une réponse, il peut directement entrer un autre terme de recherche.

Il y a un petit incovénient: comme le service vérifie en direct la disponibilité de différents TLD (.com, .net, .org, .be), ça prend un peu de temps.

Lien relatif :

AjaxWhois

Vous pouvez aider Google Image Labeler

Marin — Fri, 01 Sep 2006 20:34:13 +0000

Un petit jeu qui sert aussi (surtout chez Google) : Google Image Labeler

Le but est simple, face à un concurrent apparemment réel, vous devez découvrir ce que représent l'image proposée par Google. Des points sont attribués à chaque bonne réponse aussi bien à vous qu'à votre partenaire de jeu par mot trouvé. Une façon très ludique de faire participer ses utilisateurs à une tâche fastidieuse qui serait de tagger la quantité pharaonique d'image de leur base de données. En plus, un humain est capable de beaucoup plus de détections qu'un ordinateur. Le tout en Ajax pour faciliter les rafraîchissements de page. Ils sont fort chez Google quand même. Au fait, le premier gagne quoi?

Liens relatifs

Google Image Labeler
via ADN

Gucci 2.0 avec protype et script.aculo.us

Marin — Wed, 23 Aug 2006 08:05:22 +0000

Gucci, fabriquant et vendeur de luxe, vient de redesigner son site. Au menu, pas de flash mais l'utilisation des librairies prototype et script.aculo.us.

Le site tout en largeur est tout en transitions (scroll, apparitions,...), les pages de galerie peuvent être mises en favoris, mon dieu que c'est bien fait.

(bon, être riche et avoir mauvais goût - cf la veste pour toutou)

A voir absolument.

Liens relatifs :

le site Gucci
télécharger la librairie javascript prototype
télécharger la librairie javascript script.aculo.us
via: Ajaxian

Créer des icônes “chargement en cours” pour ses applications Ajax

Marin — Mon, 21 Aug 2006 12:03:43 +0000

Dans la série, internet peut m'aider à créer des images (logo ou bouton) en ligne, voici le service de création d'icônes "loading", qui sont souvent utilisées pour les applications Ajax pour montrer aux utilisateurs que "quelque chose se passe" après une interaction du visiteur.

Quelques exemples d'icônes via ajaxload :

Verdict :

Ce qui est bien, c'est la possibilité de changer le type d'icône, les couleurs d'avant et d'arrière plan de l'image, et mettre la couleur de fond transparente (attention avec ceci, il s'agit d'une transparence gif couleur index).

Quel gain de temps !

J'espère quand même qu'on ne va pas trop abuser de ces icônes parce que ça risquerait de finir comme les "skip intro" des film flash d'il y a quelques temps.

Bizarrement, chez moi, le service ne marche pas sur Firefox.

Liens relatifs :

ajaxload.info : le site pour créer des icônes "chargement en cours" pour ses applications Ajax.
Créer son logo Web2.0 en ligne
Créer ses boutons en ligne: Buttonator

Ajouter un chat à son site: Gabbly

Marin — Fri, 09 Jun 2006 10:43:30 +0000

Pour chatter en direct sur un site web, jusqu'ici, il n'y avait pas grand chose de simple.

Avant Gabbly, il fallait installer des scripts (type cgiirc), créer des mini-applications qui tournent sous ~~FlashComm~~ Flash Media Server ou encore employer des messageries instantanées.

Gabbly vient de faciliter tout cela.

Installer son chat.

Partiquement: en rajoutant votre nom de domaine (www.votredomaine.com) après l'url de Gabbly (http://www.gabbly.com/) vous avez un chat sur votre site. C'est aussi simple que ça. Et si vous n'avez pas tout compris, vous pouvez toujours passer par le site Gabbly.

Vous pouvez discuter en direct avec les visiteurs qui passent par la même adresse que vous (http://www.gabbly.com/www.votredomaine.com).

Technique:

Une iframe pointe vers votre url, une autre contient la fenêtre de chat. Ajax pour les rafraîchissement de la fenêtre de discussion, JSon pour la librairie javascript. La fenêtre de chat est drag-droppable, dockable, et positionnable. Par contre, je n'ai pas compris ce que signifait l'icône flux rss dans la fenêtre...

Très bien fait et facile à installer, que demander de plus?

Attention: les historiques des discussions restent même si vous fermez la fenêtre de chat.

Lien relatif:

Un chat sur votre site sans peine: Gabbly

Créer ses boutons en ligne: Buttonator

Marin — Wed, 31 May 2006 14:40:29 +0000

Vous avez besoin de boutons pour vos pages web et vous êtes loin de votre station de travail favorite (avec tous vos logiciels préférés) : Buttonator est là pour vous sauver.

C'est une petite application web (toujours en beta et un peu lente) qui vous permettra de choisir entre divers types de boutons et de les paramètrer à votre goût:

Choix de police (Arial, Arial Narrow, Book Antiqua, Bookman Old Style, Century Gothic, Courier New, Times New Roman, Verdana),
quelques tailles de caractères,
gras et italique sont à votre disposition.

Vous pourrez aussi choisir la taille de votre bouton ainsi que la couleur de fond. Le tout saupoudré avec un petit peu d'Ajax

Voilà le résultat:

Carnets de voyages 2.0

Marin — Sun, 14 May 2006 15:34:47 +0000

Vous voulez faire un tour du monde ou suivre les traces d'autres aventuriers? Le service proposé par TripTracker.net est dans l'air du temps:

une communauté, des partages de photos, de l'Ajax, une carte du monde par satellite, des flux rss, un usage des géotags, et ce site est encore en beta...

Prochain achat: un système gps.

Ajax à la rescousse de l’Information Contextuelle

Marin — Thu, 04 May 2006 21:06:32 +0000

Je ne sais pas depuis combien de temps la fonctionnalité existe, mais je suis impressionné par le système d'information contextuelle du site du Wall Street Journal.

En selectionnant un mot ou une phrase, puis en cliquant avec le bouton droit de votre souris dans n'importe quelle page du site, une fenêtre s'affiche proposant aux visiteurs de consulter des articles sur la même thématique que le mot/phrase qu'ils ont surligné. Les browsers ont tous un menu contextuel (clic-droit de la souris ou +clic sur les Macs sans MightyMouse) qui permet d'afficher différentes actions possibles pour un élément (ici une page web). Dans ces actions, il existe souvent une possibilité de faire une recherche sur le mot sélectionné. La bonne idée qui est mise en oeuvre ici est de faire remonter de l'information sur un sujet qui intéresse le visiteur.

Ajax et DHTML

Côté technique, un bon vieux javascript interroge un serveur web sur le terme séléctionné via Ajax. Le serveur retourne des informations relative à la requête. Ces informations sont ensuite parsées et affichées dans un layer via DHTML.

"Unobtrusive"

Un autre exemple d'information contextuelle existe déjà depuis quelques temps: les IntelliTXT

Un idée qui était très intéressante à la base (pour afficher des informations contextuelles) mais évidemment, la pub s'en est mêlée et maintenant, j'assimile ces intelliTXT à du spam. (que j'ai combattu en ajoutant leur domaine dans ma liste de filtres AdBlock)

Un vrai concept Web2.0.

On y retrouve Ajax, des intéractions vraiment intelligentes avec le surfeur, le tout sans forcer la main de l'utilisateur. Il ne reste plus qu'à optimiser le positionnement et la taille de la fenêtre d'affichage ("overLayer" - dans notre jargon) de ces informations contextuelles et appliquer cette techniques à d'autres sites (a-t-on légalement le droit de reprendre de tels concepts?) et on aura vraiment un meilleur web!!! Un tout grand merci à mon collègue, Adrien Noterdaem d'Emakina, qui m'a fait découvrir ceci.

Liens relatifs:

Information contextuelle sur le Wall Street Journal - la page exemple
En espérant que ce ne soit pas détourné vers un IntelliTXT de VibrantMedia
du javascript à tout va