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

Super Mario Bros 2 en mode HARDCORE

Vous avez joué à cette merde qu’est Super Mario Bros 2 (qui n’est qu’un rip-off d’un jeu jap où Nintendo a juste modifié les sprites) ? Avez vous joué en mode hardcore ?

10/GUI : le futur de l’interface tactile de bureau

10-gui-interface-tactile-futur
Pour interagir avec notre ordinateur, on utilise le combo inévitable : clavier + souris. Ca fait plus de 25 ans que ça existe et depuis, cette interface basique mais riche et accessible n’a peu ou pas évolué.

Interface tactile : bureau versus mobile

Depuis quelques années, des interfaces tacticles ont fait leur apparition dans le grand public. Je pense notamment à l’ordinateur HP avec écran tactile. Et puis il y a aussi l’iPhone qui, malgré son nom, ressemble davantage à un mini pc qu’à un téléphone portable.

D’ailleurs le côté tactile de l’iPhone est excellent, que ce soit au niveau technique qu’à celui de l’interface. Par contre, au niveau bureau, on est loin du compte.

Problèmes physiques des interfaces tactiles de bureau

Il y a plusieurs problèmes aux interfaces actuelles :

  • avoir à tendre le bras en continu pour utiliser l’écran face à nous
  • garder la tête penchée en bas pour utiliser un écran posé sur la table
  • les mains masquent l’écran

Problèmes de l’interface graphique

Graphiquement, et sans que ce soit lié au côté tactile, l’interface basée sur des fenêtres disposées en vrac sur un plan 2D pose problème. Certaines interfaces ont essayé l’approche 3D, sans grand succès.

On fait comment alors ?

10/Gui (alias Clayton Miller) propose une solution innovante et claire : écran + tablette tactile (10 doigts) + disposition horizontale des fenêtres (con10uum).

Tout dépend du nombre de doigts utilisés :

  • 1 doigt : action dans l’application locale
  • 2 doigts : scroll et zoom
  • 3 doigts : bouger et redimensionner les fenêtres
  • 4 doigts : scroll et zoom de l’espace entier

Matez ça, c’est magique.

10/GUI from C. Miller on Vimeo.

Le HTML 5 en 1998

« It’s not the language you use ; it’s what you do with it. »

Le HTML 5 se popularise. Ok. Mais même avec un code propre et valide dans un langage novateur, tout le monde est libre d’y appliquer le design qu’il veut.
html5-1998

Cube 02 : une police cubique

Sur Fontfabric, une police où tout part d’un simple cube : Cube 02.

police-cubique

Via SimpleBits

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

A quoi me sert Firefox aujourd’hui ?

En surfant un peu sur le web (avec Chrome), je remarquais une fenêtre Firefox ouverte mais inutilisée. En l’ouvrant, je vis à quoi me servait véritablement Firefox.

En tout, 8 plugins que j’utilise +/- régulièrement :

  • Shareaholic pour partager des articles
  • Page Saver pour sauvegarder le screenshot d’une page entière
  • Adblock Plus pour bloquer toutes les pubs (même celles en fond d’un site)
  • Web Developer : le couteau suisse d’un développeur
  • Colorzilla pour trouver le code couleur de n’importe quel pixel de la page mais aussi obtenir la palette de couleur d’un site
  • Echofon (anciennement Twitterfox), l’excellent client Twitter pour Firefox
  • Firebug : le meilleur plugin jamais conçu pour un intégrateur.
  • XMarks pour synchroniser ses favoris sous Firefox

Et au beau milieu, une page web vide.

a-quoi-sert-firefox

Eh oui : Chrome s’ouvre aussi vite qu’un explorateur Windows. Et va aussi vite que Notepad++.

UPDATE : je m’explique dans les commentaires. 🙂

La refonte perpétuelle

Le web est un média en mouvement continu. Comme chaque web designer qui se respecte, je fais ma veille régulière et relativement abondante, qu’il s’agisse de graphisme, de connaissances, d’astuces de code, de design, de tendances, d’outils, d’acteurs du web. Avec toute cette masse d’information, textuelle et visuelle, j’ai sans cesse envie d’intégrer de nouvelles idées graphiques et techniques dans ce blog, et je commence souvent des thèmes wordpress sans les terminer au final.

Le dernier en date, débuté il y a 2 mois déjà, s’appelle bbxjulie (en référence au morceau « Julie with… » de Brian Eno). J’y ai beaucoup bossé, je l’ai fignolé et je l’ai même intégré en thème wordpress. La seule qui manque est la page portfolio (une Page WP custom que j’ai pas pris le temps de faire). D’ailleurs, vous pouvez voir sur ce blog le thème bbxjulie.

Lorsque je l’ai commencé, j’étais très enthousiaste et plutôt content du rendu. C’est un des rares thèmes que je n’ai pas laissé tomber au bout de 3 jours, et je me disais qu’il allait être très complet et surtout : qu’il allait durer. Mais au final, même en y ayant passé beaucoup de temps, il ne me plaît pas. Je sais pas pourquoi. Plusieurs éléments me plaisent, notamment la sidebar avec les vignettes du portfolio et le champ de recherche. Mais c’est tout.

Pourquoi une refonte ?

La réponse que je me donne à cette question est très simple : je n’aime plus mon thème actuel. Il est ennuyeux et loin d’être ce que je voulais qu’il soit. Et l’intégration de nouveaux outils implique selon moi une refonte graphique.

Pourquoi ça bloque ?

Le manque d’inspiration, c’est évident. Mais surtout, le flou dans l’identité que je veux donner à ce blog. Ca doit être lié au rôle de ce blog.
Mais d’ailleurs, il me sert à quoi ce blog ? A parler, réponse évidente.
Mais de quoi ? De web design, de jeux vidéo, d’humour, de musique, de multimédia, de technologie, de code.
De moi ? Oui et non. Oui parce que l’intérêt principal d’un blog et la subjectivité affichée de l’auteur. Non parce que je ne parle pas de moi directement.
Quoiqu’il en soit, je me suis toujours refusé à essayer d’établir une charte éditoriale. Sans doute parce qu’il n’y en avait pas au départ et qu’il est compliqué d’en définir une en cours de route.

Résultat : ce blog est en roue libre depuis quelques temps, une sorte de hérisson à la dérive qui s’affiche et se manifeste lorsqu’il ne s’amuse pas à traverser des tunnels.

URL ABC : l’alphabet de votre barre d’adresse

Le très intéressant Tim Van Damme a démarré un nouveau jeu : URL ABC

L’idée :

  • ouvrez votre navigateur préféré (ou le plus utilisé ces derniers mois)
  • tapez la 1ère lettre de l’alphabet : « a » (pour ceux qui ne le sauraient pas…)
  • notez le site qui s’affiche en 1er (a priori le site dont l’url commence par cette lettre et que vous visitez le plus)
  • recommencez pour les 25 lettres suivantes 🙂

Lire la suite

Les cartouches d’encre sont-elles trop chères ? Oui.

Imaginons que je veuille acheter une imprimante couleur (parce que j’en ai pas).
Imaginons que j’aille sur le très peu ergonomique Fnac.com (clic du milieu inactif sur les listes produits, colonnes non triables, version flash à pleurer… bref).
Je tombe sur l’imprimante Canon Pixma IP 2600 à 39,90€ (livrée avec une cartouche noire et une cartouche couleur).

Ok cool. J’ai mon imprimante. Puis quelques mois plus tard, je n’ai plus d’encre noire, ni couleur. Alors je veux en acheter sur Fnac.com (parce que je suis maso). Il me faut (selon le site Canon) :

Vous avez fait le calcul ? 2 cartouches d’encre, c’est plus cher qu’une nouvelle imprimante.

Les cartouches livrées avec la nouvelle imprimante ne sont sans doute pas remplies en entier, mais quand même…

The Third & The Seventh : un film 100% images de synthèse vraiment incroyable

Les CGI (ou Computer-generated imagery, ou encore Images de synthèse en français), c’est une sorte d’évolution perpétuelle et rapide depuis plus de 30 ans, qui s’affiche principalement au cinéma.
En 1995, la course s’est accélérée avec la sortie de Toy Story, 1er film entièrement en images de synthèse.
Depuis, c’est devenu commun, voire banal d’en voir au cinéma, que ce soit dans le Seigneur des Anneaux, le Jour d’Après, ou le médiocre Avatar. Trop lisse et trop frimeur à la fois.

Il faut parfois un seul homme, Axel Roman, pour redonner du goût et de l’espoir dans les productions de synthèse, et en l’occurence, exclusivement en images de synthèse.

Les images du film The Third & The Seventh (en HD) sont entièrement générées par ordinateur. C’est beau et humain. A voir en plein écran et en HD. (Et regardez le making-of ensuite).

The Third & The Seventh from Alex Roman on Vimeo.

Récupérer sa clé de CD Windows XP avec Ubuntu

Un billet un peu à part pour simplement partager une astuce pour récupérer le CD Key de son installation Windows alors que vous êtes sous Ubuntu.

Comment j’en suis arrivé là ?

Un beau matin, mon Win XP ne démarre plus. J’ai même plus l’écran de chargement Windows. J’ai tenté une réinstall avec un CD de Win XP, rien n’y fait. Heureusement j’ai encore Ubuntu.

Différence ProductID / Product Key

J’ai envie de récupérer la clé de CD de mon Windows XP (officiel, acheté). Mais j’ai perdu mon CD. Et le registre Windows ne contient que l’ID du produit.
A partir de cet ID, il faut utiliser un logiciel spécial pour retrouver la clé du CD : Magical Jelly Bean Keyfinder.

Donc en gros : ProductID -> Magical Jelly Bean Keyfinder -> Clé du CD original

Le seul problème : Magical Jelly Bean ne fonctionne que sous Windows XP… et justement, ce dernier ne marche plus chez moi. Je peux utiliser Wine sous Ubuntu pour utiliser ce programme, mais il me faut le registre Windows de mon install foireuse d’abord…
Lire la suite

bbxwall : mon 7ème thème WordPress


Avant d’arriver à mon 5e thème, bbxwall, et quelques semaines après avoir jeté aux oubliettes le thème bbxjulie (du nom d’un morceau de Brian Eno), je suis passé par pas mal de thèmes depuis 2 ans et demi.
Lire la suite

Désactiver les notifications mail de Google Buzz

Je vous le dis tout de suite : il n’y a pas d’option actuellement pour avoir Buzz dans GMail sans avoir les notifications mail. Mais il y a une astuce toute bête que j’avais partagée sur mon Buzz.

Filtrer les Buzz entrants

Chaque notification de Buzz arrivant dans la boîte mail obtient d’office 2 étiquettes :

  • is:buzz
  • label:buzz (vous noterez d’ailleurs qu’il n’est plus possible de créer un label « Buzz » car étant réservé par GMail)

Il suffit d’utiliser ces étiquettes (l’une ou l’autre) pour sélectionner les mails Buzz et leur faire faire ce que l’on veut.
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;}

Refonte et thème tumblr pour Waker

Waker, c’est un site de bêtises trop fréquentes et trop futiles pour être postées ici.

Au départ, c’était un WordPress avec un thème pas trop travaillé, mais j’aimais bien la palette de couleurs. Et puis je me suis rendu compte que poster avec WordPress était trop contraignant, car trop long. Même avec le bookmarklet Press This, poster un simple lien ou une photo prenait trop de temps.

Résultat : je prends un tumblr tout simplement. Le bookmarklet est très efficace : il récupère facilement les photos ou la vidéo de la page où l’on est, et l’upload est direct. Au début, j’ai pris mon thème bbxtumblr, mais il manquait d’identité pour Waker.

Donc, j’en ai fait un autre.

Thème Tumblr Waker

Navigation au clavier

La grande particularité est d’avoir intégré grâce à une lib JavaScript, la navigation au clavier comme pour Google Reader ou FFFFOUND, c’est à dire la touche « J » pour suivant et « K » pour précédent, sachant qu’elle gère aussi la pagination dès que vous arrivez en haut ou en bas de la page.

Et si vous voulez savoir pourquoi ça s’appelle « Waker », et bien voilà pourquoi.

Ambilight en HTML 5

Vous connaissez la technologie Ambilight de Philips ? Bon. Imaginez ça dans votre navigateur.

Ambilight en HTML 5

Si vous avez aimé le Sublime Video, vous aimerez l’Ambilight en HTML5 (qui reprend d’ailleurs la même vidéo).
Par contre, j’ai pas trop compris les explications en russe

(via Beautiful Pixels)

CSS3 Please : un générateur de CSS3

Si vous voulez déjà utiliser des propriétés CSS3, vous devez savoir qu’elles sont implémentées sur plusieurs navigateurs mais avec des dénominations différentes.
Par exemple border-radius (pour obtenir des coins arrondis)  :

  • -moz-border-radius sous Firefox
  • -webkit-border-radius sous Chrome et Safari
  • border-radius sous Opera et le prochain IE9

Etant donné qu’il est assez laborieux de trouver chacune des dénominations pour une seule et même propriété, CSS3 Please vous sera d’une grande aide. Il vous permet d’éditer les valeurs pour chaque propriété CSS3 puis de les copier et les utiliser sur (quasiment) tous les navigateurs, que ce soit :

  • les ombres
  • les dégradés
  • les fonds semi transparents en RGBA
  • la rotation
  • les arrondis
  • @font-face (pour inclure la police qu’on veut)

Quelques-unes de ces propriétés marchent même sous IE6 et IE7!

Dessiner en HTML 5, c’est gagner

Harmony est un outil simple et sympa, qui permet de dessiner dans son browser. Rien de bien méchant apparemment. C’est juste qu’il est en HTML 5 couplé avec des algorithmes en JS. L’auteur s’est beaucoup inspiré de Scribbler, l’équivalent en Flash.

Perso, je suis nul en dessin, mais Pulupulu sait y faire.

Il existe même une fan page Facebook avec pleins d’autres jolis dessins.

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.

allRGB : des images avec 16 millions de couleurs

Vous connaissez les écrans qui affichent + de 16 millions de couleurs ? Bon. Ben là c’est pas des écrans mais des images de 16 millions de couleurs. Et plus précisément : 16 777 216 couleurs. Autrement dit : TOUTES les couleurs disponibles en RGB (où chaque couleur, je le rappelle, correspond à l’addition de trois longueurs d’ondes pour chacune des trois couleurs Rouge, Vert, Bleu pour lesquelles il existe 256 longeurs d’onde chacune). Et ça donne allRGB.

Si vous avez du temps et des compétences en création d’algorithmes

Tutoriel : formulaire 100% CSS3 sans image et sans JavaScript

Je vous invite à aller lire le tutoriel complet sur le CSS que j’ai écrit.

Après avoir expliqué comment réaliser un bon formulaire HTML, pourquoi ne pas en réaliser un uniquement en CSS3 ?

Screenshot formulaire CSS3
Lire la suite

La vérité sur les sondages

Je pense qu’il y a une donnée inhérente à tout sondage, c’est qu’ils concernent tous uniquement les personnes désirant être sondées, ou que ça ne dérange pas. Au final, ça restreint grandement le panel! Quel pourcentage de personnes dans la rue s’arrête pour répondre à un sondage ? Personnellement, je ne l’ai jamais fait. Et je n’ai jamais contacté ou été contacté par un institut de sondage. Et je réponds très rarement à un sondage sur le net (et lorsque je le fais, je choisis « NSP »). Bref, je ne dois pas être dans la cible (on me le dit souvent). Et étant donné que je ne dois pas être le seul, je remets systématiquement en doute la pertinence des sondages.

Je rappelerai cette fameuse phrase (reprise notamment par Mark Twain) :

There are three kinds of lies: lies, damned lies, and statistics

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