JT Yeek : cadeaux originaux geek et design

bbxdesign

CSS + WordPress + Web Design

Mode normal → (affichage complet du blog)

Suivant

Précédent

google

bd cinéma couleur css firefox google gratuit ie6 interface iphone javascript jeu musique navigateur new york photo photoshop police vidéo wordpress

Les mauvais conseils de Google en CSS

Billet

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!

Acrobat.com : le Google Docs d’Adobe

Billet

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.

keyboardr : le moteur de recherche le plus rapide ?

Billet

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

Google et ses designers : le divorce

Billet

Le constat

Les départs du pôle design de Google (et part “design”, je parle avant tout de “user experience“, “interface”) se suivent :

Les raisons d’un divorce

L’essence de Google : les chiffres

Google est rempli d’ingénieurs, de développeurs, de mathématiciens, de statisticiens… C’est la source, le coeur de leur métier, et avant tout, de leur réussite. Il y a d’abord eu l’imperturbable moteur de recherche. Puis il y a eu tout le reste, toutes les applications, qui ont soutenu et renforcé l’emprise de Google sur le web.

Google vit de chiffres et d’algorithmes. Le facteur humain existe (ce qui l’a différencié d’autres moteurs de recherche notamment) mais reste marginal. Tout se calcule, se mesure, et s’appuie sur des données : un monde binaire et quantifié où les données ne mentent pas.

Le design ne se calcule pas

Il est compliqué dans un environnement pareil pour un designer de faire comprendre que son travail peut rarement être mesuré. Il existe le A/B testing pour certains cas de figure, mais lorsque l’on voit ce genre de test utilisé pour se décider entre 41 teintes de bleu (et voir lequel est le plus efficace), on s’imagine que les données prennent ici trop d’importance.

Le rôle d’un designer est d’imaginer de nouvelles expériences, des intéractions innovantes. C’est un travail bien plus global et intéressant que de choisir une couleur ou la taille d’une bordure. Les conversations dans Gmail, le scroll actif de Reader ou les timezone de Google Calendar sont autant d’exemples de design réfléchi, original et efficace, qui n’auraient pu être réalisés arithmétiquement.

Les designers de Google ont eu leur mot à dire. Les résultats sont là. Mais leur influence n’a cessé de décroître ces derniers temps, et cet âge d’or est désormais révolu. Les designers sont, contre leur gré, moins des actifs que des consultants.

Opinion versus tests

Le “user testing” est loin d’être infaillible, et bride fortement l’innovation, la prise de risque, lorsqu’on en abuse. Le vice d’un tel processus est de se retrouver rapidement dans l’impasse, à court d’éléments sur lesquels s’appuyer.

Il faut souvent laisser la décision à une seule personne, légitime et consciencieuse, qui par son expérience, a une opinion fiable sur la solution au problème. Même s’il est difficile de faire comprendre à des ingénieurs qu’un tel choix est le meilleur, car non démontré dans l’absolu, il est indispensable d’agir de cette manière pour éviter des incohérences regrettables et contre-productives.

En soi, Google est l’opposé d’Apple, où les designers (Steve Jobs en premier) ont un souhait souvent difficile à réaliser que les ingénieurs doivent à tout prix concrétiser. Et ces derniers y arrivent avec succès.

Et la suite ?

Je suis admiratif de Google. Si je ne l’étais pas, je ne prendrai pas le temps d’écrire ce post pour tenter de comprendre cette rupture nette et, pour ma part, inattendue. Ces départs multiples de cadres me semblent inquiétants, parce que j’ai l’impression que l’on n’a pas tenté de les empêcher. Est-ce que Google peut se permettre de se séparer d’autant de talents ? Peut-être qu’ils pensent que oui, et l’avenir dira s’ils s’en mordront les doigts ou pas.

Peut-être que l’erreur de Google est d’avoir recruté ces designers pour un poste qui ne leur correspond pas. Lorsque l’on recrute des compétences, il faut en avoir la nécessité, et non pas recruter un statut à qui l’on exigerait des travaux discordants. Le risque est que ces designers ne puissent même plus exercer leur travail, parce que l’essence même de leur profession leur a été subtilisée par quelqu’un d’autre. La confiance entre l’entreprise et le salarié est alors brisée, et le divorce inévitable.

Sunday Morning : un traducteur en jQuery

Billet

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

Le Lead Visual Designer de Google s’en va

Billet

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.

Chrome Experiments : des démos JavaScript pour Chrome

Billet

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.

Nouveaux boutons Gmail

Billet

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

Netvibes I’m leaving you

Billet

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.

Google Chrome peut utiliser ce que vous écrivez

Billet

N’étant pas chez moi, je n’ai pas pu installer Google Chrome encore. Mais j’ai pu lire un extrait du EULA (End-User License Agreement) :

11.1 (…) By submitting, posting or displaying the content you give Google a perpetual, irrevocable, worldwide, royalty-free, and non-exclusive license to reproduce, adapt, modify, translate, publish, publicly perform, publicly display and distribute any Content which you submit, post or display on or through, the Services.

De quoi ? Lorsque je poste quelque chose en utilisant Google Chrome (un commentaire, une adresse, un billet…), Google a le droit irrévocable de redistribuer, modifier voire publier ces informations ? Ca m’étonne que personne n’en ai parlé. J’ai raté quelque chose ?

Populaire Tutoriels Fun