Numabilis Mettre l'informatique au service de ses utilisateurs

Aller au contenu | Aller au menu | Aller à la recherche

Les lois de la simplicité 2 : Organisation

Photo d'illustration de Martin Burns

La seconde loi de la simplicité énoncée par John Maeda, dans son livre The laws of simplicity est l'organisation. En organisant les éléments d'une interface, celle-ci parait plus simple, plus claire, plus intuitive. John Maeda propose une méthode pour organiser les éléments, qu'il nomme CLAP et qui est celle du tri de cartes bien connu en ergonomie web :

  • CHOISIR : inscrire le nom des éléments sur des cartes et les regrouper en ensembles logiques.
  • LABELLISER : nommer chaque ensemble à l'aide d'un nom représentatif.
  • AGRÉGER : regrouper les ensembles qui peuvent l'être afin de réduire leur nombre.
  • DÉFINIR DES PRIORITÉS : définir les ensembles prioritaires, c'est à dire ceux qui sont le plus utiles.

Les différents éléments, regroupés en ensembles, doivent ensuite être présentés de manière à mettre en évidence l'organisation définie. La présentation n'est pas toujours évidente à trouver comme nous le montre l'étude des différentes versions du iPod :

iPod_evolution.pngUn outil pertinent est l'école psychologie de la Gestalt.

Les lois de la simplicité 1 : Réduction

Photo d'illustration de Themis Chapsis

La première loi de la simplicité énoncée par John Maeda, dans son livre The laws of simplicity est la réduction. Pour simplifier l'interface d'un objet il faut commencer par retirer toutes les fonctionnalités dont on peut se passer. L'ergonomie est l'art de trouver l'équilibre entre simplicité et complexité en procédant d'abord par réduction méthodique, (i.e. supprimer tout ce qui peut l'être). La simplification peut être prolonger en réalisant trois actions (AMI) :

Atténuer : donner une apparence délicate et fragile contrastant avec l'utilité de l'objet dont l'aspect et la petite taille ne laisse pas imaginé sa puissance.

Masquer : cacher la complexité, comme des boutons d'une télécommande derrière un clapet, ne laissant visible que les bouton des fonctions principales.

Insuffler : augmenter la qualité réelle, en utilisant des matériaux de luxe par exemple, ou perçue, via un marketing ingénieux ou grâce à des astuces trompant nos sens (alourdir une télécommande par exemple pour donner l'impression de solidité).

La simplification d'une interface est une recherche d'équilibre faisant intervenir plusieurs disciplines (ingénierie, design, marketing) nécessitant un travail en équipe dans laquelle chacun doit respecter le travail des autres dans l'unique but de réaliser un produit exceptionnel.

Ergonomie : l'art de l'évidence

Photo d'illustration de larou

L'ergonomie a cette particularité frustrante, quand elle est bien pratiquée de passer totalement inaperçue, parce qu'alors tout devient simple et évident. Sa mise en oeuvre au sein de petites structures est d'autant plus difficile qu'elle est à la croisée de plusieurs disciplines dont les experts maisons ont tous un avis bien tranché (programmeurs et graphistes en particulier). Il n'existe pas de recette toute faite, au grand désespoir des décideurs qui ne savent plus à qui confier cette responsabilité pourtant importante puisque les clients se plaignent de la difficulté d'utilisation du produit ! Et c'est vrai que la technologie rend notre vie moins confortable. Les utilisateurs demandent avant tout qu'un logiciel ou un appareil technologique soit simple à utiliser. John Maeda, dans son livre The laws of simplicity (traduction française : De la simplicité) propose dix « lois » et trois principes pour simplifier une interface homme machine que nous détaillerons prochainement dans de nouveaux billets.

Dix lois :

  • RÉDUCTION. Pour atteindre la simplicité, le mieux est la réduction méthodique.
  • ORGANISATION. Avec de l'organisation, un ensemble composé de nombreux éléments semble plus réduit.
  • TEMPS. En économisant son temps, on a le sentiment que tout est plus simple.
  • APPRENTISSAGE. La connaissance simplifie tout.
  • DIFFÉRENCES. La simplicité et la complexité ont besoin l'une de l'autre.
  • CONTEXTE. Ce qui se trouve à la périphérie de la simplicité n'est absolument pas périphérique.
  • ÉMOTION. Mieux vaut plus d'émotion que moins.
  • CONFIANCE. Dans la simplicité, nous avons confiance.
  • ÉCHEC. Certaines choses ne peuvent jamais être simplifiées.
  • LOI CARDINALE. La simplicité consiste à soustraire ce qui est évident et à ajouter ce qui a du sens.

Trois principes :

  • AU LOIN. Plus semble moins si l'on s'en tient éloigné, très éloigné.
  • OUVERTURE. L'ouverture simplifie la complexité.
  • PUISSANCE. Se servir de moins, en tirer plus.

Numabilis reloaded

Photo d'illustration de Laure Wayaffe

J'ai créé Numabilis en 2006 alors que j'étais indépendant, avec comme leitmotiv « Mettre l'informatique au service de ses utilisateurs ». Je suis salarié depuis octobre 2007 chez Omnikles où j'occupe le poste de directeur des services et chef du produit OK-OFFRE. Je gère les équipes support et projets, interfaces entre les utilisateurs de nos applications web et la société.

Je réactive ce blog pour partager mes expériences qui sont maintenant plus managériales que techniques et entrepreneuriales (avant que cela ne me reprenne), mais je ne m'en tiendrai pas à une ligne éditoriale rigoureuse et de nombreux sujets pourront être abordés ici, à un rythme... tranquille.

Le syndrome facebook [deuxième édition]

Billet initialement publié le 25 octobre 2007 et supprimé à la demande du client. Depuis la société qui créait des questionnaires ludiques et des gadgets autour de l’information n'existe plus ou quasiment : Newzwag a été un échec complet...

Le 17 septembre dernier, l'AFP m'a annoncé que le projet de site de news social (web 2.0) sur lequel notre équipe travaillait depuis novembre 2006 était abandonné au profit d'une application facebook ! À supposer qu'il ne s'agisse pas d'une simple excuse pour mettre brutalement fin à nos contrats, je crois que cette réorientation stratégique est une erreur monumentale.

Le prototype du site newzwag (finalisé dès février 2007) est à mon avis le site que beaucoup attendent :

  • Il permet aux utilisateurs de réagir, commenter, tagguer, noter une actualité de grande qualité (AFP) livrée de manière factuelle brute, répondant ainsi à la question de Francis Pisani A quoi ça sert l’actu ?
  • Les différents modes de présentation/navigation permettent à chacun de trouver la façon de consommer l'actualité selon ses besoins : live (affichage en temps réel des infos quand elle arrivent), selon la vue éditoriale (à la façon d'un journal), selon la vue communautaire (ordre donné par les votes des utilisateurs), par nuage de tags (éditeurs et communautaire). Il répond à la demande de Francis Pisani L’actu comme rivière et autres représentations : « Je rêve d’un site qui me permettrait de lire l’info qu’il me propose en passant par la Une traditionnelle, ou en rivière, ou en suivant la hiérarchisation des usagers, ou sous forme de nuages de tags ou de carte... ».
  • Les plus ardents utilisateurs peuvent participer à des débats et s'organiser en groupes d'intérêt via des fonctionnalités de réseau social. Le réseau n'est pas une fin mais un moyen pour les utilisateurs les plus mordus et les plus impliqués d'assouvir leur soifs de débattre, échanger, communiquer autour d'une actualité thématique.

De l'autre côté, une application facebook a toute les chances de faire une flop, à l'image des applications lancées par le Washington Post (The Compass) ou par le New York Times (The New York Times News Quiz) ayant moins de 3 000 et 1 500 utilisateurs respectivement ! Ces applications ne drainent pas de visiteurs vers leur sites comme cela est signalé dans le billet New York Times Launches Facebook App, et ne génèrent aucun revenus. Il est encore plus dur de prendre des parts d'audience dans le domaine de l'actualité sur facebook depuis que Google y est présent.

Je suis persuadé que le buzz facebook a atteint le pic de la courbe de l'esbroufe (Gartner Hype Cycle) avec la prise de participation de Microsoft. L'avenir est à l'intégration de fonctionnalités de réseau social au sein de sites axés sur les centres d'intérêts de ses utilisateurs. Quel va être l'actualité de Newzwag dans les mois qui viennent : application facebook sans utilisateur ou site web communautaire ? Wait and see ? Quoiqu'il en soit : bonne chance.

Google Maps API : gestionnaire automatique de marqueurs

Comme nous l'avons vu dans le billet précédent sur le gestionnaire de marqueurs, l'API Google Maps ne gère pas automatiquement le remplacement d'un groupe de marqueurs proches par un marqueur unique à faible facteur de zoom. Heureusement, Jef Poskanzer a écrit une librairie implémentant cette fonctionnalité : Clusterer.

Partons de l'exemple 9 qui est identique à l'exemple 4 d'un précédent billet auquel j'ai ajouter une concentration importante de marqueurs à l'est de Paris. Déclarons la librairie dans l'en-tête HTML :

<script src="http://www.acme.com/javascript/Clusterer2.jsm" type="text/javascript"></script>
La gestion automatique se fait en déclarant une variable clusterer, instanciée dans la fonction load :
var clusterer; function load() { if (GBrowserIsCompatible()) { map = new GMap2(document.getElementById("map")); map.addControl(new GLargeMapControl()); map.addControl(new GMapTypeControl()); map.setCenter(new GLatLng(46.85, 1.75), 6); clusterer = new Clusterer(map); clusterer.SetMaxVisibleMarkers(10); clusterer.SetMinMarkersPerCluster(5); GDownloadUrl("exemple10.json", setup_json); } else { alert("Desole, l'API Google Maps n'est pas compatible avec votre navigateur."); } }

Un objet Clusterer possède 4 méthodes :

  • SetMaxVisibleMarkers(n) : définie le nombre de marqueurs au delà duquel le clustering est mis en place (150 par défaut).
  • SetMinMarkersPerCluster(n) : définie le nombre minimum de marqueurs constituant un cluster (5 par défaut).
  • SetMaxLinesPerInfoBox(n) : définie le nombre de ligne s'affichant dans la fenêtre d'information du marqueur correspondant au cluster (10 par défaut).
  • SetIcon(icon) : définie l'icône du marqueur correspondant au cluster si celui par défaut ne convient pas.

Il suffit ensuite de remplacer chaque appel à map.addOverlay(marker) par un appel à clusterer.AddMarker(marker, title) (où title est la ligne du marqueur réel qui s'affichera dans la fenêtre d'information du marqueur correspondant au cluster) et chaque appel à map.removeOverlay(marker) par un appel à clusterer.RemoveMarker(marker). Exemple dans la fonction setup_json :

setup_json = function(json, status) { var data = eval('(' + json + ')'); for (var i=0; i<data.markers.length; i++) { var point = new GLatLng(data.markers[i].lat, data.markers[i].lng); var marker = createMarker(point, data.markers[i].html); clusterer.AddMarker(marker, data.markers[i].html); } }

Le résultat est visible sur l'exemple 10.

Cette solution permet de rendre de bons services, mais n'est toute fois pas idéale. En effet, le clustering est lié au nombre de marqueurs plutôt qu'à leur densité. Ainsi, deux marqueurs supperposés ne seront vus que comme un seul marqueur à fort grossissement (en l'absence de clustering). D'autre part, l'algorithme n'est pas très précis : sur l'exemple 10, le marqueur placé sur Le Havre a été intégré au cluster bien qu'il en soit assez éloigné !

Les autres billets de cette série sur l'API Google Maps :

Google Maps API : gestionnaire de marqueurs

Reprenons notre exploration de l'API Google Maps pour résoudre le problème suivant : comment afficher un unique marqueur regroupant plusieurs marqueurs lorsque le niveau de zoom est faible ? En effet, lorsque le nombre de marqueurs est très important sur une petite région, la carte est difficile à lire et lente à s'afficher. La réponse semble être le gestionnaire de marqueurs GMarkerManager.

Partons de l'exemple 4 d'un précédent billet dans lequel nous déléguons l'affichage des marqueurs à un gestionnaire de marqueurs. Pour cela, on déclare une variable mgr, que l'on instancie dans la fonction load :

var mgr; function load() { if (GBrowserIsCompatible()) { map = new GMap2(document.getElementById("map")); map.addControl(new GLargeMapControl()); map.addControl(new GMapTypeControl()); map.setCenter(new GLatLng(46.85, 1.75), 6); mgr = new MarkerManager(map); GDownloadUrl("exemple04.json", setup_json); } else { alert("Desole, l'API Google Maps n'est pas compatible avec votre navigateur."); } }

L'ajout des marqueurs se fait dans la fonctions setup_json en créant d'abord un tableau de marqueurs, markers, ajouter en une fois à la carte via la fonction addMarkers prenant comme second paramètre le niveau de zoom minimum en deçà duquel les marqueurs ne sont pas affichés, et un troisième argument optionnel, le niveau de zoom maximum au delà duquel les marqueurs ne sont pas affichés :

setup_json = function(json, status) { var data = eval('(' + json + ')'); var markers = new Array(); for (var i=0; i<data.markers.length; i++) { var point = new GLatLng(data.markers[i].lat, data.markers[i].lng); var marker = createMarker(point, data.markers[i].html); markers.push(marker); } mgr.addMarkers(markers, 5); mgr.refresh(); }

Le résultat est visible sur l'exemple 8.

On peut appeler plusieurs fois la méthode addMarkers avec différents tableaux de marqueurs pour différents niveau de zoom et gérer ainsi, à la mano, les regroupements de marqueurs. Cela implique donc de calculer, sur le serveur, l'emplacement des marqueurs qui prendront la place d'un ensemble de marqueurs et du niveau de zoom auquel on affiche chacun... Pas simple ! Heureusement il existe une solution toute faite via une librairie JavaScript... Suite au prochain épisode !

Les autres billets de cette série sur l'API Google Maps :

Le syndrome facebook

Billet supprimé à la demande de mon ancien client car il divulguait des « sensitive information ».

Mise à jour 21/06/2010 : Billet remis en ligne.

Principes de base pour des applications facebook réussies

Pourquoi certaine applications facebook sont de véritables succès tandis que d'autres sont des flops certains ? Selon Jesse farmer, de 20bits, il y aurait six principes de base :

  1. Simplicité. Comme toujours, plus votre application est simple à utiliser, plus ses chances de succès sont élevées.
  2. Socialisation. Facebook étant avant tout un réseau social, ses utilisateurs l'utilisent pour cela. Les fonctionnalités de votre application doivent être sociales avant tout, c'est à dire, présenter certaines facettes (goûts, activités, caractéristiques, etc) d'un utilisateur à d'autres utilisateurs.
  3. Viralité. Plus votre application est intrinsèquement virale, plus elle aura de succès. Certaines ne sont même que des idées virales : Vampires, WereWolves et... Vampires vs. Werewolves
  4. Cohérence. Votre application doit être cohérente avec la philosophie et les fonctionnalités du réseau social. Beaucoup d'applications réussies ne font qu'étendre les fonctionnalité de base de facebook.
  5. Originalité. Certains types d'applications sont déjà sur-représentés, comme les applications de citations (52 à ce jour depuis Dr. Martin Luther King Jr. quotes jusqu'à The Simpsons Quotes). Ne faites pas une n-ième application de ce genre sous peine de faire un flop.
  6. Qualité. Votre application doit être de grande qualité, en particulier, sans bug, rapide et robuste. Les utilisateurs n'hésitent pas à désinstaller une application boguée, lente ou inaccessible, quelqu'en soi l'origine.
Rien de nouveau ici : simplicité, cohérence, originalité et qualité sont des principes universels. S'y ajoutent socialisation et viralité qui sont deux principes extrêmement efficaces sur un réseau social, mais beaucoup plus complexes à mettre en œuvre. L'application doit en effet porter en elle-même ces deux principes, sans pour autant n'être que purement artificielle (comme Vampires par exemple) au risque d'avoir un succès... très éphémère.
Enfin, l'application doit être rentable, c'est à dire générer des revenus, car la popularité à un coût.

Les digg-like : une fausse bonne idée

La recherche d'information intéressante est un problème récurrent sur le web auquel les digg-like ont cru apporté une solution. J'expose, dans ce billet, ma théorie pour expliquer cet échec et aborde les solutions qui, à mon avis, vont émerger.

Dans Blogasty et les limites du web 2.0, j'avais abordé le problème de l'intelligence collective et la qualité car blogasty promettait de « promouvoir les blogs selon la qualité de leurs billets ». Mais il est évident que d'une part la qualité est subjective et d'autre part l'information qui m'intéresse n'est pas toujours de qualité. J'aime assez le site Je galère au taff bien que je ne le considère pas comme un site de qualité. Les digg-like s'appuient sur la courbe popularisée par Chris Anderson dans son article La Longue Traîne traduisant le fait qu'une minorité d'articles est plébiscité par un majorité de personne.

Dessin de la courbe longue traine
La La longue traîne est représentée en jaune (image Wikipédia)

Mais cette image est trompeuse pour deux raisons :

  • Un contenu populaire n'est plébiscité que par un petit nombre d'utilisateur.
  • Ma courbe d'intérêt ne se superpose pas à celle-ci.

Ne disposant pas de données chiffrées, j'expose ma théorie avec des données purement fictives, qu'il serait très intéressant de confronté à la réalité pour confirmer ou infirmer ce modèle.Prenons l'exemple d'un site de social news (mais ce pourrait être un [site de e-]commerce) comportant 1 000 000 articles et ayant 10 000 utilisateurs actifs. La courbe ressemblerait à quelque chose comme ça :

Courbe
Distribution des articles en fonction de leur popularité décroissante

La popularité d'un article est le rapport, exprimé en pourcentage, entre le nombre de personne ayant voté pour un article et le nombre d'utilisateur du site. Ici l'article le plus populaire, le blockbuster a un score de Pmax = 1 % : il a obtenu 100 votes (je pense que dans la réalité, ce score est inférieur). Un article populaire n'intéresse qu'un faible pourcentage de lecteur.

Plaçons-nous, maintenant du point de vue d'un lecteur ayant lu 100 articles qu'il a classé du moins intéressant (score = 1) au plus intéressant (score = 100). Si l'on ne conserve, sur la courbe précédente, que ces 100 articles et que l'on superpose la courbe des scores de notre lecteur, je pense que nopus obtiendrons une courbe ressemblant à la suivante :

Courbes représentant la distribution des articles lus en fonction de leur popularité décroissante et de leur score
Distribution des articles en fonction de leur popularité décroissante superposée au score obtenu

Les articles qui m'intéressent le plus sont les moins populaires ! Dans ce cas comment un digg-like peut-il m'aider à trouver des articles intéressants ?

Il est assez amusant de constater que les algorithmes de recommandation soient très populaires dans le monde du e-commerce, ainsi que pour la musique et les DVD, mais pas du tout dans le monde l'information textuelle (journalisme, blogosphère, etc.) geekomatik est le seul exemple dans ce domaine, à ma connaissance. Malheureusement, le système de recommandation est, à mon avis, perdu au milieu de fonctionnalités peu ergonomiques et sans valeur ajouté, ce qui limite l'attrait du site, limite la taille de la communauté et limite donc la pertinence des recommandations. (Alexis, je suis prêts à reprendre nos échanges si tu le souhaites.)

Que pensez-vous de cette théorie ?

Ça bastonne dur sur les blogs !

J'avais l'intention de faire une suite à mon billet 5 blogs dont je peux me passer : l'anti chaîne, en particulier pour m'excuser auprès de Stéphane Thomas et rebalancer une série de cinq blogs supprimés de mon lecteur de flux. Je passe donc, hier, sur Tapahont avant de me désabonner. Je lis, comme ça son billet BlogDay 2007 qui me fait découvrir le BloodDay tout à fait dans l'esprit de l'anti-chaîne, même si ceux qui participent au BloodDay participe également au BlogDay, dans la liste duquel on trouve... Tapahont !

Et puis coup sur coup : My Day blog : Mes 5 blogs les plus inutiles que je ne lirai jamais, on a touché le fond ! et Blog dayprime : un véritable feu d'artifice !

Mon dilemme : dois-je supprimer Tapahont ?

Développer en local une application mashup (Google Maps API, facebook, etc)

Le développement d'une application s'appuyant sur un service externe (mashup) tel que Google Maps ou facebook nécessite de le faire sur un serveur accessible depuis Internet. Cela est imposé par le fournisseur du service qui soit délivre une clé liée au nom du serveur (Google Maps par exemple), soit fait des requêtes directement sur le serveur (facebook). Voici une adaptation d'un tutoriel permettant de développer une telle application sur votre propre poste de développement local (si vous maîtrisez votre réseau).

Il n'y a pas de solution miracle. La seule possibilité est de mettre son poste de développement (le PC) sur Internet. Cela implique de pouvoir faire de la translation de port sur votre routeur NAT. Cette opération varie d'un routeur à un autre. Mais vous aurez généralement besoin de connaître l'adresse IP du PC sur le réseau interne ainsi que son adresse MAC. Pour cela il suffit de taper la commande ifconfig eth0 qui vous sort un truc comme ça (les adresses ci-dessous sont fictives) :

eth0 Lien encap:Ethernet HWaddr 00:12:62:4A:BA:28 inet adr:192.168.0.13 Bcast:192.168.0.255 Masque:255.255.255.0 adr inet6: fa70::153:73ef:fb9a:da16/64 Scope:Lien UP BROADCAST RUNNING MULTICAST MTU:1500 Metric:1 Packets reçus:55899 erreurs:0 :0 overruns:0 frame:0 TX packets:49661 errors:0 dropped:0 overruns:0 carrier:0 collisions:0 lg file transmission:1000 Octets reçus:62053810 (59.1 MiB) Octets transmis:8498200 (8.1 MiB) Interruption:16

L'adresse IP du PC sur le réseau interne est donc 192.168.0.13 et son adresse MAC 00:12:62:4A:BA:28.

Il suffit de configurer son routeur pour lui indiquer que l'adresse MAC 00:12:62:4A:BA:28 doit toujours être associée à l'adresse IP 192.168.0.13 et que les requêtes reçu par le routeur sur le port 80 doivent être renvoyées vers le port 80 de la machine d'adresse IP 192.168.0.13.

Vous pouvez chercher la procédure adaptée à votre routeur sur le site Port Forward. Dans le cas d'une freebox, il suffit d'aller sur la page de configuration accessible après login, et de remplir le formulaire :


Exemple de configuration sur la Freebox
Exemple de configuration sur la Freebox (agrandir)

Vérifiez que cela fonctionne en pointant votre navigateur vers l'adresse IP publique de votre routeur, récupérable via son interface de configuration ou via le service web What is my IP (88.171.154.137 par exemple). Vous devez voir la racine de votre serveur web... Vous pouvez même donner un nom DNS à cette adresse IP. Il ne vous reste plus qu'à générer la clé du service pour cette adresse IP !

5 blogs dont je peux me passer : l'anti chaîne

Beaucoup de blogueurs influents m'insupportent de plus en plus. Entre les sujets repris de blog en blog sans apporter la moindre information, les interviews croisées entre blogueurs influents, les billets type « 10 astuces pour faire parler de son blog », les chaînes auxquelles ne peuvent participer que les blogueurs du sérail et autres classements des X premiers blogs de la blogosphère francophone, la blogatie (tiens ! tous les noms de domaine sont disponibles) ressemble de plus en plus à cette aristocratie de fin de règne : dégénérée par endogamie. D'ailleurs la recette pour devenir un véritable blogueur web 2.0 est bien connue et même les plus grands reconnaissent que le blogueur devint con et qu'ils ont le blues, qu'ils ne sont plus influents.

Aussi, après les chaînes buzziphériquambolesques à la Si je ne pouvais lire que 5 blogs, voici venu le temps de l'anti-blog-chaîne (à ne pas confondre avec l'antiblog). Le principe :

  • Vous choisissez un sujet politiquement incorrect portant sur une quantité (5 semble être très prisé).
  • Vous publiez un billet sur ce sujet.
  • Vous ne refilez le bébé à personne, de sorte que tout le monde puisse écrire un billet sur le sujet, sans y avoir été invité.

Je commence. À l'occasion d'un grand ménage d'été dans mes flux RSS, j'ai décidé de supprimer (entre autres) les 5 suivants :

  1. Kelblog : la réussite de ce gars ne peut être qu'un hasard... D'ailleurs il me rappelle beaucoup mon ancien PDG, co-fondateur d'Unilog, vice-président du syntec, multimillionnaire et futur-ex-PDG-à-2-balles de la société en perdition Adesium. Tous deux ont fait un gros coup, et passent depuis leur temps à mettre du fric dans des boîtes qui ne rapporteront jamais un rond...
  2. TechCrunch : le seul site à faire des billets entiers sur des sites sans aborder (ou à peine) leur finalité en terme d'usages... Seuls les aspects financiers semblent l'intéresser.
  3. Ergonomic Garden parce que c'est nul.
  4. Simple Entrepreneur parce que je l'ai invité (mais peut-être ne suis-je pas le seul) sur blogasty et qu'il ne m'a jamais remercié...
  5. Commentaires sur Woohoo! I'm on TV! parce qu'il n'y a plus de commentaires depuis bien longtemps et que Bertrand (embrasse Gégé et les filles de ma part) étant un ami (même s'il travaille pour le diable), je lui fait cadeau de ce backlink. Ouais ! moi aussi je peux me la jouer blogueur influent.

Et comme je ne sais rien de mes quelques visiteurs (à part, ceux qui se sont manuellement inscrits sur ma communauté MyBlogLog, et je les en remercie du fond du cœur)[1] et que ce serait contraire au troisième principe, je n['|e] relai | tag | passe le relai | refile le questionnaire à | envoie la patate à | emmerde] personne.

[1] D'un autre côté, c'était peut-être une erreur de jeunesse de leur part et ils ne lisent plus du tout ce blog depuis bien longtemps, mais n'osent pas se retirer (ou n'en n'ont rien à faire de le faire). Par contre moi, je me tire de ces communautés...

Édition 02/08/2007 : Aymeric Jacquet fait aussi ce constat dans un billet intitulé La tentation de "Buzzer" doit être grande.

Édition 07/08/2007 : Stéphane Thomas m'a envoyé un mail expliquant que le l'invitation envoyée par blogasty donne l'impression d'être un mail automatique, limite SPAM, et qu'il n'avait pas compris d'où il venait (d'autant plus que nous ne nous connaissons pas). Il est en effet impossible de personnaliser le mail d'invitation, ce qui peut provoquer des incompréhension.

Google Maps API : coordonnées d'un marqueur

Ce sixième et dernier billet (pour le moment du moins) sur l'API Google Maps vous apprendra à récupérer les coordonnées d'un marqueur déplaçable.

Partons de l'exemple 6 du billet précédent. Les coordonnées sont des propriétés du marqueur qu'il suffit de récupérer à la fin d'un glisser/déposer dans la fonction createMarker :

GEvent.addListener(marker, "dragend", function() { htm = html + '<br />Lat_1 = ' + point.lat() + ' Lat_2 = ' + marker.getPoint().lat(); htm = htm + '<br />Lng_1 = ' + point.lng() + ' Lng_2 = ' + marker.getPoint().lng(); marker.openInfoWindowHtml(htm); });

Voilà ! Nous avons tout ce dont nous avons besoin pour faire un formulaire d'enregistrement de coordonnées en plus de l'affichage de marqueurs correspondants à des emplacements fournis sous forme de données JSON.

Le résultat est visible sur l'exemple 7.

Les autres billets de cette série sur l'API Google Maps :

Google Maps API : un marqueur déplaçable

Ce cinqième billet sur l'API Google Maps vous apprendra à créer un marqueur déplaçable par simple glisser/déposer (drag and drop).

Partons de l'exemple 5 du billet précédent dont nous allons simplement modifier la fonction de création de marqueur createMarker :

function createMarker(point,html) { var icon = new GIcon(G_DEFAULT_ICON); icon.image = "http://www.numabilis.com/files/demos/google-maps/blue-dot.png"; var options = { icon: icon, draggable: true }; var marker = new GMarker(point, options); GEvent.addListener(marker, "dragstart", function() { map.closeInfoWindow(); }); GEvent.addListener(marker, "dragend", function() { marker.openInfoWindowHtml(html); }); GEvent.addListener(marker, "click", function() { marker.openInfoWindowHtml(html); }); return marker; }

Le marqueur est donc construit en passant des options au constructeur : l'URL (absolue) d'une icône (pour différencier le marqueur déplaçable des autres) et un simple booléen indiquant que le marqueur est déplaçable ! Il est également possible, comme dans cet exemple de définir des fonctions appelées au début et à la fin du déplacement.

Le résultat est visible sur l'exemple 6.

Les autres billets de cette série sur l'API Google Maps :

Google Maps API : géolocalisation (geocoding)

Ce quatrième billet sur l'API Google Maps vous apprendra à afficher la carte d'un lieu à partir de son adresse. C'est ce que l'on nomme geocoding dans l'API, opération réalisée grâce à un objet JavaScript, le geocoder.

Partons de l'exemple 4 du billet précédent auquel nous ajoutons la variable globale geocoder. Le chargement du fichier JSON est remplacé par l'instanciation du geocoder dans la fonction load :

var geocoder; function load() { if (GBrowserIsCompatible()) { map = new GMap2(document.getElementById("map")); map.addControl(new GLargeMapControl()); map.addControl(new GMapTypeControl()); map.setCenter(new GLatLng(46.85, 1.75), 6); geocoder = new GClientGeocoder(); } else { alert("Desole, l'API Google Maps n'est pas compatible avec votre navigateur."); } }

Nous ajoutons à la page un formulaire permettant la saisie de l'adresse cherchée. La validation du formulaire est interceptée par la fonction geocode qui prend en paramètre l'adresse saisie :

<form onsubmit="return geocode(this.address.value);"> Adresse : <input type="text" size="80" name="address" /> <input type="submit" value="GO" /> </form>

Cette fonction geocode, qui va faire tout le travail, est extrêmement simple :

function geocode(address) { geocoder.getLatLng( address, function(point) { if (!point) { alert(address + " not found"); } else { map.setCenter(point, 13); var marker = createMarker(point, address); map.addOverlay(marker); marker.openInfoWindowHtml(address); } } ); return false; }

Elle consiste à appeler la fonction getLatLng du geocoder en lui passant en paramètre l'adresse saisie et une fonction appelée par le geocoder au retour de la requête HTTP. En cas de succès, on centre la carte sur le point correspondant à l'adresse, on créé un marqueur que l'on ajoute sur la carte et on affiche la fenêtre d'information.

Le résultat est visible sur l'exemple 5.

Les autres billets de cette série sur l'API Google Maps :

Google Maps API : affichage des données d'un fichier JSON

Ce troisième billet sur l'API Google Maps vous apprendra à afficher des données distantes au format JSON (produites dynamiquement par un serveur par exemple). L'API peut utiliser le format XML. Je préfère cependant utiliser le format JSON, plus compact et plus rapide à traiter en JavaScript, mais aussi plus complexe.

Partons de l'exemple 3 du billet précédent dont nous supprimons la création du marqueur lors du chargement de la page (fonction load) pour la remplacer par un appel à la fonction GDownloadUrl. Cette fonction permet de charger une ressource de manière asynchrone et prends deux paramètres :

  • url : l'URL de la ressource, exemple04.json dans notre exemple.
  • onload : la fonction à appeler après le chargement de la ressource. Cette fonction doit avoir deux paramètres :
    • text : le texte du document téléchargé.
    • status : le code du statut de la réponse HTTP.
    En cas de timeout de la requête, la fonction est appelée avec null et -1 comme arguments.

Nous avons donc la fonction load suivante :

function load() { if (GBrowserIsCompatible()) { map = new GMap2(document.getElementById("map")); map.addControl(new GLargeMapControl()); map.addControl(new GMapTypeControl()); map.setCenter(new GLatLng(46.85, 1.75), 6); GDownloadUrl("exemple04.json", setup_json); } else { alert("Desole, l'API Google Maps n'est pas compatible avec votre navigateur."); } }

Notons au passage que la vairable map a été sortie de la fonction afin de la rendre globale et de pouvoir y accéder dans la fonction set_json :

setup_json = function(json, status) { var data = eval('(' + json + ')'); for (var i=0; i<data.markers.length; i++) { var point = new GLatLng(data.markers[i].lat, data.markers[i].lng); var marker = createMarker(point, data.markers[i].html); map.addOverlay(marker); } }

Le résultat est visible sur l'exemple 4.

Plus de précisions : Data in JSON files.

Les autres billets de cette série sur l'API Google Maps :

Le ratage USA Today : 4 mois après

Début mars, USA Today sortait une nouvelle version de son site très web 2.0, provoquant une avalanches de commentaires négatifs. Alors que je prévoyais une chute du lectorat, certains commentateurs ont affirmé, qu'au contraire, le trafic avait augmenté (selon une source bien informée... USA Today).

4 mois après, le bilan est sans appel : le ratage est total. Compete mesure une chute de près de 70 % du trafic sur un an, et près de 60 % depuis mars dernier ! Par contre l'activité des utilisateurs y est plus forte que sur les sites concurrents comme le remarque Josh Catone sur Read/WriteWeb.


Courbe représentant l'évolution du trafic sur USA Today depuis un an
Évolution du trafic sur USA Today depuis un an

En satisfaisant le 1 % de ses utilisateurs actifs, USA Today est en passe de perdre les 90 % de ses lecteurs, certes passifs, mais générateurs de la plus grosse part des revenus... Tant mieux ! Cela laisse de la place pour d'autres acteurs !

Télé2 Mobile n'assure pas le portage du numéro vers... Télé2 Mobile !

Aussi étonnant que cela puisse paraître, Télé2 Mobile assure la portabilité du numéro vers les opérateurs concurrents, mais pas vers lui même ! Quel intérêt de vouloir porter son numéro vers l'opérateur dont on est déjà client, me direz-vous... Et bien, quand on a un contrat client comportant deux lignes et donc deux numéros et que l'on souhaite séparer ces deux numéros sur deux contrats différents. Dans ce cas, Télé2 vous offre la possibilité de ne conserver qu'un seul numéro sur les deux ! La seule façon de conserver les deux numéros est donc d'en porter un vers un autre opérateur. Mais si vous avez un engagement de duré en cours... et bien cela se complique : c'est même l'impasse.

J'avais déjà expérimenté le portage du numéro depuis Orange vers Télé2  (coupure de ligne d'une semaine et changement de numéro au final, sans compter les heures passées avec le support cient), je vais probablement expérimenter maintenant la dénonciation de contrat...

En conclusion Télé2 Mobile est un MVNO a fuir comme la peste et pour vous en convaincre, lisez les avis de clients.

Google Maps API : marqueurs et fenêtres d'informations

Ce second billet vous apprendra à ajouter des marqueurs affichant une fenêtre d'information lorsque l'on clique dessus.

Partons de l'exemple 2 du billet précédent auquel nous ajoutons le bloc suivant dans le corps, afin de prévenir les utilisateurs ne disposant pas de JavaScript :

<noscript> <b>JavaScript doit être activé pour utiliser Google Maps.</b> Il semblerait que JavaScript soit désactivé ou non supporté par votre navigateur. Pour visualiser les cartes Google Maps, activez JavaScript dans les options de votre navigateur et réessayez. </noscript>

Prévenons aussi les utilisateurs dont le navigateur n'est pas compatible avec l'API Google Maps en définissant la clause else du test de compatibilité dans la fonction load :

if (GBrowserIsCompatible()) { // ... } else { alert("Desole, l'API Google Maps n'est pas compatible avec votre navigateur."); }

Ajoutons ensuite, lors de la création de la carte, dans la fonction load, l'affichage du contrôle de positionnement et de zoom :

map.addControl(new GLargeMapControl());

ainsi que le contrôle du type de carte (plan, satellite ou mixte) :

map.addControl(new GMapTypeControl());

Définissons un premier marqueur sur Mantes-la-Jolie (de coordonnées 48.9908338, 1.717222) :

var point = new GLatLng(48.9908338,1.717222); var marker = createMarker(point,'Ici, c\'est chez moi !') map.addOverlay(marker);

La fonction createMarker est la suivante :

function createMarker(point,html) { var marker = new GMarker(point); GEvent.addListener(marker, "click", function() { marker.openInfoWindowHtml(html); }); return marker; }

Le résultat est visible sur l'exemple 3.

La fenêtre d'information affiche du HTML standard et il est possible de définir autant de marqueur que l'on souhaite...

Plus de précisions : Markers and info windows.

Les autres billets de cette série sur l'API Google Maps :

- page 1 de 4