WordPress + Google Maps = contolini.com

Contolini Blog

Les blogs, il y en a des tonnes, et beaucoup sont motorisés par WordPress. Comment lui donner de l’originalité et ainsi se démarquer? Outre le fait d’avoir un contenu intéressant et régulièrement mis à jour (une règle d’or d’un bon site), il est possible d’agir sur l’interface pour se distinguer. C’est ce qu’à fait Chris Contolini en ajoutant du GeoTagging à son blog par le biais de Google Maps. Le résultat est une application qui, par sa nature, évolue constamment. La navigation n’est pas des plus aisées mais ce blog est l’exemple d’une combinaison de deux outils pour une émulation surprenante.
Lire la suite

Google Maps + magazine = zkimmer.com

Previews Magazine sur zkimmer.com

Je viens de tomber sur une alternative au PDF pour lire un magazine sur un ordinateur. Il s’agit d’une interface utilisant des images et Google Maps. Regardez cet exemple : Previews International sur zkimmer.com . Il existe tous types de publications à lire avec cette interface. Simple et astucieux non ?

Le Google des hackers

600673

Un Google pour hackers qui donne les résultats de Google dans un frameset. Vous aurez au moins l’impression d’avoir trouvé une faille dans Google. Ou pas.

Au fait, avez-vous remarqué la nouvelle favicon de Google ?

MySpace se paye une refonte totale

MySpace refonte

MySpace vous connaissez ? Ce site archi populaire qui a fait régresser le web design de plusieurs années, à cause de son code illisible, de son système de fourre-tout indécent et de ses bugs innombrables. MySpace c’est un peu le Skyblog international. Le seul intérêt que je lui trouve c’est de pouvoir facilement uploader ses morceaux de musique et de les partager (ce qu’a fait bon nombre de groupes de musique professionnels). Mis à part ça, comparé à un autre site très populaire de web social (Facebook), MySpace est vraiment une calamité.

Mais MySpace prépare une refonte totale. Au premier coup d’oeil, le design est bien plus sympa. Ok, génial.
Mais là n’est pas le point le plus important. En effet, MySpace s’est associé à Adaptive Path, une boîte spécialisée dans l’expérience utilisateur. C’est eux par exemple qui avaient créé Measure Map, un outil d’analyse de blog. Un peu comme Google Analytics vous me dites ? Vous ne croyez pas si bien dire : Measure Map a rapidement été racheté par Google en 2006, notamment pour son interface claire et intuitive. Bref, un outil très bien pensé par Adapative Path, dont le blog est particulièrement riche en idées.

Ceci me rend confiant dans la direction que veut prendre MySpace, non seulement pour la qualité du web en général, mais aussi en perspective d’un combat rapproché avec son principal concurrent Facebook, qui lui aussi prépare une refonte (moins fonctionnelle que visuelle).

La voiture Google Maps arrêtée

Voiture Google Maps arrêtée

« Les sous-marins sont interdits en ville. »

Netvibes I’m leaving you

J’ai toujours été fan de Netvibes. Ce fut ma première expérience Ajax. L’interface customizable m’avait bluffée. J’ai rapidement adopté Netvibes en tant que page d’accueil. Les widgets mails étaient un argument de poids : consulter ses boites mails en un seul endroit. Rapidement, j’ai intégré d’autres widgets, qu’ils proviennent de Netvibes (bloc-notes, météo, calendrier…) ou de tiers (Digg, del.icio.us, YouTube…). Mais j’ai surtout utilisé Netvibes comme lecteur de flux RSS, ce qui m’a amené à l’adorer, puis à le quitter.

Netvibes : méga lecteur de flux RSS

Par « méga », je parle de quantité de flux. En effet, il est très facile d’ajouter des flux RSS : non seulement pas 1 par 1, mais groupes par groupes. Netvibes fonctionne par onglets et l’on pouvait (parce que je ne le retrouve plus) télécharger des onglets entiers remplis de flux RSS (onglets proposés par les utilisateurs). Je me retrouvais avec une douzaine d’onglets, parlant de Web Design, de E-Commerce, de Jeux Vidéo, de Sport, d’Interface, de Photo… C’était la quantité, et souvent la qualité.

Je me retrouvais avec des tonnes de flux RSS, répartis entre divers onglets. Beaucoup de contenu intéressant, peu de temps pour les lire. Netvibes n’offre par défaut que le titre d’un élément du flux (il faut cliquer pour obtenir le contenu). Je me fiais donc à ce titre pour savoir quel contenu lire.

Productivité décroissante

Au fil du temps, je perdais beaucoup de temps à lire mes flux RSS (alors que j’en avais supprimé une bonne moitié). Les 2 éléments qui causaient cette lenteur étaient :

  1. l’Interface
  2. le JavaScript

Naviguer à travers les onglets est devenu fastidieux : il n’y a pas de ligne directrice visuelle pour lire les flux sans perte de temps. On vérifie à l’oeil que chaque bloc n’a pas de nouvel élément, et si oui, on lie le titre, et éventuellement on lit le contenu. Cette non mise en avant du contenu est problématique parce qu’un titre en dit souvent très peu (et les titres racoleurs ne m’attirent guère). Résultat : je passais potentiellement à côté de contenu intéressant.

Autre point sensible : le temps de chargement. Et oui : Firefox + JavaScript = lenteur. Même si c’est moins vrai avec FF3, ça reste pénalisant pour un site qui utilise autant de JS que Netvibes. L’interface est très jolie mais est-ce bien ce que l’on demande d’un flux RSS ?

Vers Google Reader

On m’a initié à ce concurrent qui n’en est pas vraiment un puisque l’équivalent de Netvibes chez Google, c’est iGoogle. Tiens : Google a 2 lecteurs de flux RSS ? Oui, et c’est là d’où venait mon problème.

Google Reader est un vrai lecteur de flux RSS : l’emphase est mise sur le contenu. La mise en forme est basique, l’interface est très pratique (j’adore l’utilisation du scroll), le moteur est rapide.

iGoogle et Netvibes peuvent être utilisés comme lecteur de flux RSS, mais leur atout principal sont les widgets, la personnalisation, les fonctionnalités riches.

Alors me direz-vous, pourquoi est-ce que j’utilisais Netvibes comme lecteur de flux ? Tout simplement parce que tout s’y prête :

  • à chaque flux RSS disponible sur un site on trouve ce logo
  • Firefox propose lui même dans sa liste déroulante Netvibes comme lecteur de flux
  • lorsqu’on veut « Ajouter du contenu » sur Netvibes, un élément principal est l’ajout de flux (avec possibilité d’importer un fichier OPML)

C’était mon erreur : utiliser Netvibes pour une fonctionnalité non optimisée.

Que faire avec Netvibes ?

Si j’aimais assez les widgets, je l’utiliserais encore. Mais ils me sont trop peu utiles. C’est juste une préférence personnelle et je comprends que certains apprécient ces multiples widgets.

Je pense néanmoins que la fonctionnalité la plus intéressante (et une des plus récentes) est la page publique Netvibes. Je l’ai découvert par le biais du Vanksen Group : comparez la page Netvibes avec le site « normal ».

Non seulement le design est nettement plus intéressant sur Netvibes, mais le contenu l’est aussi! La page publique Netvibes permet pour une entreprise d’afficher très facilement son actualité, sa personnalité, ses préférences. Tout ceci est très facile à gérer étant donné la nature dynamique des widgets (par exemple, uploadez une photo sur Flickr, elle s’affichera sur votre page Netvibes).

Cette page publique permet d’apparaître « moderne » et ouvert, surtout si l’entreprise travaille dans le secteur du web. C’est facile, joli et intéressant.

Conclusion

La nature même de Netvibes m’a amené à ne plus l’utiliser. La beauté du site et l’expérience fournie m’éloignaient du contenu, seul élément important chez les flux RSS.

Netvibes est sans doute trop élaboré pour n’être qu’un « simple » lecteur. Il peut faire beaucoup plus et c’est dans ce domaine là qu’il excelle.

Nouveaux boutons Gmail

J’ai remarqué ce matin une refonte des boutons Gmail. Je pensais d’abord à une mise à jour de Chrome qui stylerait différemment les input « button ». Mais en regardant sous Firefox, j’ai constaté le même redesign.

gmail-buttons

J’apprécie particulièrement les boutons « Move to » et « Labels » qui se débarassent de leur scroll irritant.

move-to-labels

Chrome Experiments : des démos JavaScript pour Chrome

google-chrome

Vous savez sans doute que Google Chrome est réputé pour ses performances, notamment en JavaScript. C’était un de ses principaux arguments au lancement.

Pour le prouver, Google a lancé Chrome Experiments : une galerie de démonstrations JS qui marchent surtout dans Chrome. J’ai essayé de lancer différentes démos dans Firefox et c’était loin d’être fluide.

Exemple de démo surprenante: Ball Pool (restez appuyé sur le clic).

ball-pool

Il y a aussi:

J’adore le label des boutons lorsqu’on essaye de lancer une expérience sur un navigateur autre que Chrome : « I’m gonna roll the dice » ou bien « I prefer to live dangerously ». Génial.

Le Lead Visual Designer de Google s’en va

stopdesign

Douglas Bowman, l’homme derrière l’excellent stopdesign, quitte Google. Arrivé  il y a presque 3 ans, il a introduit la notion de design dans les interfaces web de Google. La dernière création en date: les boutons Gmail.

Pourquoi partir ?

Malgré la qualité de son travail, Douglas Bowman n’a apparemment pas le pouvoir de prendre des décisions importantes en termes de design. Il lui est incapable d’amener Google dans une direction parce que Google a déjà choisi sa direction.

A priori, Douglas Bowman a le statut pour jouer un rôle important, responsable et légitime. Mais ça ne se concrétise pas dans son travail à cause de raisons stratégiques et sans doute, politiques. Il a le désir de faire avancer les choses mais ses mains sont liées. Je vois très bien ce qu’il veut dire.

Sunday Morning : un traducteur en jQuery

sunday-morning

jQuery + Google Translation = Sunday Morning

Avec ce plugin, vous pouvez offrir à vos visiteurs un traducteur très simple et très léger qui utilise Google comme traducteur. Plusieurs langues sont disponibles. Vous pouvez customiser le délai d’affichage, les coordonnées de la bulle, l’élément déclencheur…

sunday-morning-languages1

Plusieurs langues sont disponibles.

Un bookmarklet très utile

Vous pouvez créer un bookmarklet qui permet d’avoir les mêmes fonctionnalités sur n’importe quel site. Lorsque vous visitez une page en langue étrangère, cliquez sur le bookmarklet puis double-cliquez sur le(s) mot(s) à traduire et une bulle s’affiche. En créant le bookmarklet, vous pouvez choisir la langue et l’interface.

sunday-morning-nytimes

Exempe de traduction sur le site du New York Times

keyboardr : le moteur de recherche le plus rapide ?

keyboardr

Pour chercher sur Google, Wikipedia ou Youtube, simultanément et rapidement, je dois dire que keyboardr a trouvé une formule efficace, en utilisant uniquement les flèches et la touche « Entrée » pour naviguer.

recherche-tres-rapide

Acrobat.com : le Google Docs d’Adobe

acrobat.com

Acrobat.com sort de sa beta et devient public. Il consiste en plusieurs services :

  • Adobe Buzzword : un excellent éditeur de document en Flex. L’édition, le formatage, l’ajout de commentaires sont très bien réalisés.
  • Création de PDF : à partir d’un fichier .rtf par exemple
  • Partage de fichiers : une interface pour uploader des fichiers et envoyer une notification par mail à ses contacts
  • Adobe ConnectNow : visio-conférence, partage d’écrans, chat…
  • My Files : pour accéder à ses fichiers de n’importe où

A part Buzzword, j’avais jamais entendu parler de ce service. J’ai pas l’impression qu’il y aie eu de grosse annonce. En tout cas, Adobe marche sur les plate-bandes de Google Docs : des outils de collaboration en ligne, gestion/création de documents, partage de fichiers…

C’est en fait la concurrence Flash vs HTML/Ajax (et bientôt HTML 5).

Personnellement, je ne compte pas m’inscrire pour utiliser ce nouveau service. Il n’a pas l’air très rôdé. Et puis Google Docs me convient très bien pour ce dont j’ai besoin. Et y a le côté Google, toujours innovant, très fiable et intégrant parfaitement ses différents services (Mail,Reader,Calendar…) qui me rend fidèle.

Les mauvais conseils de Google en CSS

google-code

L’objectif de Google, avant tout, c’est la performance. Ils publient d’ailleurs des conseils pour optimiser l’affichage du navigateur.
A la trappe les standards, la beauté, la clarté du code. Extraits choisis.

Prefer class and ID selectors over tag selectors

Mettre uniquement des .class et des #id et pas de a{ color:#0072c;} ou de input{ font-family:Arial,sans-serif;}. Mouais. Faut mettre une classe sur tous ses liens alors ? Génial.

Remove class selectors qualified by tag selectors (when a class is only used for one tag, which is a good design practice anyway)

En gros, pas de a.maClasse et de p.maClasse. Créer plutôt 2 classes : .maClassePourUnLien et .maClassePourUnParagraphe, même si les deux classes partagent les mêmes propriétés, à une près (sinon quel intérêt de les différencier). Mouais, bof. Si je veux que .maClasse soit d’un style particulier mais que les liens ayant .maClasse aient une propriété différente, je vais pas m’amuser à créer une autre classe juste pour ça.

Use class selectors instead of descendant selectors

Je reprends le mauvais exemple de Google :

/* Ne pas mettre */
ul li {color: blue;}
ol li {color: red;}
/* Mais mettre */
.unordered-list-item {color: blue;}
.ordered-list-item {color: red;}

Bien sûr. Je vais mettre une classe sur tous mes <li>…

Avoid the :hover pseudo-selector for non-anchor elements

Pas de :hover en CSS mais des onmouseover en JS. Et si le gars a pas de JS ?

Bref, pour optimiser votre code, mettez des classes sur tous vos éléments! Merci Google!

Mais arrêtez avec IE6!

Je le dis et je le répète : il faut arrêter de s’acharner à faire fonctionner parfaitement son site sous IE6. Chaque semaine, il y a un nouvel article qui prône cette idée, et c’est très bien.

stop-ie6

Est-ce qu’un site doit apparaître exactement pareil sous chaque navigateur ?

Pour ceux qui ne le sauraient pas encore : la réponse est non.

Notez l’adverbe « exactement ». Parce que d’un côté, il faut que l’utilisateur puisse reconnaître un site, quel que soit le navigateur utilisé. Mais des différences (plus ou moins) légères dans le graphisme sont non seulement tolérées mais parfaitement admises. Ne pas avoir de coins arrondis (par CSS ou PNG), de dégradés complexes (par PNG), des ombres portées… sous IE6 n’est pas un problème.

C’est surtout qu’un utilisateur d’IE6 ne verra aucune dégradation dans sa version vu qu’il ne verra pas la « bonne version »!

Et puis d’abord, tout le monde n’a pas toutes les polices utilisées sur un site (Arial inexistant sous Linux ?), donc il y a déjà obligatoirement des différences, et des grosses différences : la typographie c’est au moins la moitié du design.
Lire la suite

Lecteur de PDF exportable, par Google

Le blog non officiel Google Operating System a découvert une feature cachée de Google Docs, à savoir la possibilité d’avoir un lecteur de PDF dans sa page web, grâce à Google Docs.

En fait, c’est une iframe qui pointe vers Google Docs, avec en paramètre de l’url et bien l’adresse du fichier PDF.

<iframe src="http://docs.google.com/gview?url=http://www.adobe.com/devnet/livecycle/articles/lc_pdf_overview_format.pdf&embedded=true" style="width:500px; height:400px;" frameborder="0"></iframe>

Moteur multi-recherche Google, Wikipedia, YouTube et Twitter

Même si la home page de Google est brevetée, y en a qui s’amusent à faire leur propre version. Comme les gars de chez Infinise Design qui ont fait une version super light de Google, en incluant aussi Wikipedia, YouTube et Twitter dans le moteur de recherche.

redesign-google

recherche-wikipedia

recherche-youtube

recherche-twitter

Google lance son service de musique avec Lala et iLike (MySpace)

Google vient de lancer officiellement son offre de musique : il s’agit d’un partenariat avec Lala (streaming mp3) et MySpace (qui a acheté iLike).


Lire la suite

Empêcher la redimension des textarea dans Google Chrome

Si vous êtes vous aussi ennuyé de temps à autre par la possibilité dans Google Chrome de redimensionner les textarea à la guise de l’utilisateur (ce qui, en soit, est très bénéfique pour l’utilisateur parce qu’il a la main sur un élément de l’interface, mais qui, du point de vue du designer, peut amener à des aberrations graphiques), alors voici une astuce en CSS.

Avant

Textarea avec flèche

Après

Textarea sans la flèche

Code CSS

textarea{ resize:none;}

Lorsque Google Maps prend vie

Google Maps, ce n’est pas seulement des schémas de routes et d’intersections sans vie. Enfin, à en croire le My Way de Christoph Niemann.

L’URL Shortener de Google génère des codes QR

Vous connaissez les codes QR ? Ces code-barres en 2D très utilisés dans le domaine du mobile.
Et vous savez que Google a son propre URL shortener ? Par exemple, pour mon article sur le formulaire CSS3, Google a généré l’URL http://goo.gl/fb/HioT
Si vous ajoutez .qr à la fin, vous obtenez son code QR!

Via Matt Cutts

Google Web Fonts Families

Because web designers want font families, not just fonts.

Je ne l’aurais pas mieux dit. En effet, le seul souci de Google Web Fonts, c’est qu’il sépare les polices appartenant à une même famille.

Le premier design de Google Calendar

La perfection au niveau des couleurs, du contraste, de l’espacement, de la hiérarchie, de l’équilibre.

Bon sang, je ne peux m’empêcher de regretter le passé ce coup ci.

Se passer de Google Analytics

Je demandais récemment à une amie si je devais ajouter un code Google Analytics sur mon dernier site : Cambodia Vietnam 2010. J’avais déjà prévu de ne pas le faire, mais je voulais avoir une réaction externe. Sa réponse était sans appel :

Ah oui, tout de même !!

Pourtant, aucun de mes derniers sites ne s’est vu inclure un code Analytics CSS : l’Art et la Science ou WordPress : le tutoriel pour créer son site de A à Z.

Lire la suite

Retour à Firefox

Chrome m’avait énormément séduit. Rapidité ? Incroyable. Système d’onglets ? Révolutionnaire. Interface ? Impeccable.

Mais je ne me suis jamais mis aux extensions, ni aux thèmes, parce qu’ils étaient soit inefficaces, soit inefficients (perte de performance notable), soit moches. Je voulais juste surfer, rapidement.

Puis, dernièrement, le Panda Rouge open source a su me séduire à nouveau…

Lire la suite

Kevin Rose rejoint Google

Ce qui est curieux, voire marrant, c’est que Google le recrute sans doute pour ses capacités et connaissances en matière de « social » online. Le souci, c’est qu’il a défoncé sa vache à lait, Digg, au moment de la v4 (remember?) en lui ajoutant des fonctionnalités pseudo-sociales, et que son réseau social Pownce n’a jamais, mais jamais, décollé (mais qui était néanmoins joli).

Du coup, je me pose vraiment la question : que va-t-il apporter à Google ??