Je ne connais pas trop Nine Inch Nails, mais ce live filmé avec un Canon 5D Mark II directement depuis la scène rend superbement bien. La qualité est excellente.

Selon StatCounter, il y a aujourd’hui davantage d’utilisateurs de Firefox 3 que de IE6! En faites-vous partie ?

En regardant la liste des plus vieux sites en .com, on remarque que peu d’entre eux sont connus. A part IBM, Intel ou Apple, beaucoup sont inconnus. Comme le premier de la liste : Symbolics.

Ce qui m’étonne, c’est de voir dans le code, du vieux HTML Transitional (avec ses majuscules, ses <font> et autre <BR>) mélangé à quelques <DIV>, <SPAN> et des CSS inline… Curieux mix.

Suite au précédent billet, voici une info incroyable : Firefox est le seul navigateur utilisé dans plus de 14% des continents. La preuve :

Bravo à l’Antarctique. 🙂

Ayant été à New York récemment, je m’amuse à observer cette série de photos en noir et blanc de New York pour tenter d’y reconnaître ce que j’ai visité. La démesure urbaine y a commencé très tôt.

Fabchannel est un site unique qui diffuse des centaines de vidéos de concert au Paradiso d’Amsterdam. Mon cousin y travaille en tant que réalisateur. Malheureusement, le site va fermer parce que les labels refusent de leur laisser les droits de diffusion. C’est très dommage, étant donné les artistes qui y sont passés:

• Bloc Party
• Arcade Fire
• MGMT
• Of Montreal
• The Libertines
• Cold War Kids
• Deus
• Shout Out Louds
• The Rakes
• The Pipettes
• Nada Surf
• Andrew Bird
• Lambchop
• Stereophonics
• Lily Allen
• etc.

Il reste 2 jours pour regarder les vidéos.

Tout simplement génial: idaft.

Il existe aussi une autre version très sympa aussi.

jQuery gestures est un plugin qui permet de naviguer en dessinant avec la souris.

D’abord, activez le plugin (en cliquant sur le lien ou en maintenant la touche Ctrl enfoncée pendant que vous dessinez).

1. Image suivante

Cliquez, déplacez vous vers la droite, puis relâchez. Hop! Vous êtes sur l’image suivante.

2. Ouvrir la page Flickr

Vers le bas, puis vers la gauche, et la page Flickr s’ouvre.

3. Afficher/masquer l’aide

Bas, haut, droite bas (on dirait un cheat code). Et ça forme un « h ». J’adore.

Je trouve cette utilisation de jQuery particulièrement intéressante. Il faut voir maintenant si on peut le mettre en pratique à d’autres fins.

Avec un ami, nous sommes allés à New York fin janvier. Après avoir vu la vidéo « This Is Japan! », j’ai eu envie de faire la même chose, même si je suis un photographe totalement amateur. J’ai donc pris énormément de photos (1602 en tout) pour avoir assez de photos correctes et réaliser cette vidéo.

NYC 09 from Jeremy Thomas on Vimeo.

Processus de fabrication

La musique

Tout est parti du morceau: LCD Soundsystem – Someone Great. J’ai eu tout de suite l’idée d’utiliser cette chanson, avant même d’acheter l’appareil photo (un Canon EOS 1000D). James Murphy représente musicalement l’esprit de New York. Je pouvais difficilement utiliser un autre artiste, et un autre album.

La synchronisation

A partir de là, j’ai calculé le BPM pour que les photos soient synchronisées avec la musique. J’ai utilisé MixMeister BPM Analyzer pour trouver que le morceau était à 113 BPM. Cela équivaut à 0,53 secondes (60/113) environ. Il faut donc que chaque photo apparaisse pendant ce temps exactement.

Une vidéo est divisé en un certain nombre d’images/sec (en général 25 ou 30 images/sec). Donc 0,53 sec correspond environ à 15 images si la vidéo est en 30 images/sec. Mais en réalité, ça donne 0,50 img/sec et non pas 0,53. Il me fallait donc me rapprocher un maximum de ce nombre pour que le décalage ne soit pas visible au fil du temps.

J’ai fait des calculs. J’ai multiplié la ratio 60/113 par plusieurs valeurs d’images/sec, en commençant par 10 jusqu’à 40. J’ai remarqué qu’un des résultats se rapprochait d’un nombre entier: en 32 img/sec, 0,53 sec correspond quasiment à 17 images. J’ai donc fait ma vidéo en 32 img/sec, où chaque photo apparaissait pendant 17 images. Il n’y alors aucun décalage visible avec le son.

Les photos

En 113 BPM, pour un morceau de 6min 30sec, il me faut 735 photos. J’ai trié, redimensionné et recadré les photos en enlevant notamment celles qui étaient mauvaises (surtout celles prises de nuit).

Le montage

En utilisant After Effects, j’ai mis à la suite les 735 photos. J’ai malheureusement dû le faire à la main parce que je n’ai pas réussi à automatiser cette tâche bien laborieuse. Si vous savez comment le faire, dites-le moi parce que je ne le referrai plus!

Le rendu

J’ai eu des problèmes de synchronisation au rendu que je n’avais pas dans After Effects. Je n’ai toujours pas compris d’où ça venait. Au final, j’ai encodé en Xvid pour un fichier de 374mo.

Je déteste faire de la vidéo parce qu’un simple changement dans le fichier source doit être suivi d’un rendu d’une dizaine de minutes. Niveau productivité, c’est très différent du web.

J’espère que vous apprécierez cette vidéo autant que j’ai aimé la réaliser.

Information Architects (les auteurs de l’excellent Web Trend Map) ont réalisé un mockup de ce que pourrait être l’interface d’un prochain Firefox. Ils avaient déjà été consultés en 2000 pour les débuts de Firefox et ils avaient annoncés: « Onglets ». Aujourd’hui, ils disent « Oubliez les onglets! »

« Forget Tabs! »

Les indispensables onglets du navigateur (introduits en 2000 par Opera 4) seraient dépassés. A priori, leur utilité décroit à partir de 8 onglets ouverts, notamment à cause de leur hétérogénéité (il y a peu souvent un lien entre deux onglets). L’organisation se ferait par dossiers.

J’avoue être peu enthousiaste à cette disparition des onglets parce que j’ai une forte tendance à en ouvrir beaucoup simultanément. Par exemple, je suis actuellement à 18 onglets et tous me sont utiles. Peut-être pas en même temps, mais sur une période d’une heure, je les visite tous.

Navigateur = Système de fichiers multimédia

Le navigateur est davantage un système d’exploitation qu’une application d’affichage des données.

Le web n’a pas arrêté d’évoluer et aujourd’hui, on y retrouve les mêmes éléments que sur un ordinateur personnel: applications (mail, management, utilitaires, jeux), multimédia (vidéo, photo, musique), documents (word, excel, powerpoint), communication… Je balance un peu en vrac les différents domaines mais vous voyez l’idée. On peut faire énormément en ouvrant uniquement son navigateur. Et si le cloud computing se démocratise, ça ne saurait que se confirmer.

Avec cette idée en tête, Information Architects voit Firefox gérer le web comme iTunes gère la musique. Le logiciel s’occupe de tout organiser et l’internaute n’a plus qu’à trouver facilement ce qu’il cherche, d’une manière ou d’une autre. Le but est d’accéder le plus rapidement possible à ce que l’on veut.

Ceci reste un prototype, une approche radicale qui change totalement l’utilisation d’un navigateur. A tester.

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).

Il y a aussi:

• Google Gravity : la page d’accueil Google s’effondre!
• Monster : un monstre généré en 3D
• ColorsCube : un cube multicolore en 3D

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.

A midi (EST), IE8 sera lancé officiellement.

Est-ce que je vais le télécharger?

Non.

Est-ce que beaucoup de gens vont le télécharger?

Autant que ceux qui ont téléchargés IE7 à mon avis.

Est-ce que IE6 va en pâtir?

Pas du tout. Je pense que la sortie d’IE8 ne change en rien le problème de mise à jour de IE6 vers un navigateur plus moderne. Ceux qui utilisent encore IE6  le font, non pas parce qu’ils ne veulent pas de meilleur navigateur, mais parce qu’ils ne peuvent/savent pas mettre à jour.

Passer de IE6 à IE8, c’est comme passer de IE6 à IE7. Ceux qui le feront l’ont en fait, déjà fait.

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.

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…

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.

Exempe de traduction sur le site du New York Times

Si vous n’avez pas eu la chance de tester la compatibilité de votre site avec le tout récent Internet Explorer 8, ne vous inquiétez pas! Rajoutez cette ligne de code sur tout votre site et il sera compatible IE7:

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

Merci à David Walsh pour cette astuce.

Pwn2Own est un concours officiel de hackers où le but est de trouver la faille dans des logiciels populaires, en l’occurence des navigateurs internet.

Il y a en tout 5 navigateurs à hacker:

• IE8, Firefox et Chrome sur Windows 7 (Sony VAIO)
• Safari et Firefox sur Mac OS (MacBook Air)

Safari hacké en quelques secondes

Le navigateur qui aura tenu le moins longtemps est Safari sur Mac OS. Il aura résisté quelques secondes face au hacker Charlie Miller, qui gagne ainsi $10,000 et la MacBook Air.

Le plus surprenant est de savoir que la faille utilisée existait déjà l’an dernier. Une seule faille suffisant pour être vainqueur, Charlie Miller (déjà vainqueur l’an dernier), gardait cette seconde faille au chaud pour cette année.

Et la citation qui fait mal:

Hacking into Macs is so much easier. You don’t have to jump through hoops and deal with all the anti-exploit mitigations you’d find in Windows.

IE8 hacké, Firefox difficilement hacké

Le hacker Nils est le seul à avoir réussi à hacker les 3 navigateurs principaux: IE8, Firefox et Safari, gagnant $5,000 pour chaque faille. Selon Charlie Miller, Firefox sous Windows était le plus dur à hacker.

Google Chrome, seul rescapé

Le seul navigateur à être resté inviolé est Google Chrome. Les deux raisons principales sont la qualité de sa sécurité et sa sortie récente. Il y a des bugs, mais ils sont dur à exploiter. Mais surtout, les hackers ont passés moins de temps dessus. Il est plus intéresssant de s’attarder sur les navigateurs les plus populaires que sur Chrome. Etant donné les gains relativement faibles par rapport au travail fourni, il est peu rentable de hacker Chrome.

Twitter sert à tout et à rien. Parmi toutes les utilisations (f)utiles que l’on peut en faire, en voici une assez curieuse (et peu recommandable): administrer ses serveurs en twittant des messages.

Avec Twitter et du Python, vous pouvez ainsi contrôler à distance (et sans SSH direct) vos serveurs, et vos amis peuvent faire de même. L’auteur n’y trouve lui-même pas grand intérêt mais voulait partager cette méthode.

Depuis le temps que je voulais en faire un, voici bbxpress, un thème pour WordPress. C’est une première version, donc n’hésitez pas à faire des retours si vous l’utilisez.

Le but est d’offrir un thème passe-partout, facile à utiliser. Voici quelques caractéristiques :

• sidebar avec widgets (très facile à gérer dans l’admin)
  
• compatible IE6
• onglets listant les pages WordPress
• gravatar dans les commentaires
• s’affiche correctement en 800×600
• aucun plugin n’est nécessaire pour le faire fonctionner

Les icônes utilisées proviennent de Jonas Rask (un lien existe dans le footer). Pour l’instant, le thème est en anglais (une version française est envisagée, si besoin est).

Screenshots

Télécharger ou prévisualiser le thème

Vous pouvez prévisualiser le thème ou télécharger le thème bbxpress v1.0

iPhone Mockup est à l’iPhone ce que Balsamiq est au web : une appli web pour faire des croquis d’interface. (D’ailleurs, Balsamiq inclut depuis peu des éléments d’iPhone).

Attention : l’appli est en version alpha et peut disparaître à tout moment (c’est ce que dit l’auteur 🙂 ).

Je suis tombé sur ce post qui recense des sites d’applications iPhone, où le téléphone en lui-même s’avère être un élément de design redoutable. Mais au-delà du contenu de ce billet, ce qui m’a beaucoup plu c’est la manière dont un lien visité est marqué. Pour ceux qui ne le sauraient pas, il est possible de styler différemment les liens qui ont déjà été visités. Par défaut, les liens nouveaux sont bleus, les liens visités sont violets.

Bref, voici comment ils apparaissent sur ce site :

J’ai trouvé ça très sympa et très pratique : rajouter une image par-dessus les liens visités grâce à la CSS.

Je viens de lancer un nouveau blog dont voici le concept :

Tous les jours, je passe au moins 29 minutes à apprendre un nouveau langage et je poste quotidiennement mon avancée. C’est ma solution pour lutter contre la procrastination.

Plus d’informations dans le premier billet de 29minparjour.

Si vous êtes un web designer sous Mac (le cliché) et que vous voulez tester la compatibilité de vos sites sur les navigateurs Windows, voici l’outil qu’il vous faut : Alkaline.
Vous n’avez pas besoin d’avoir une licence Windows ou une machine virtuelle.

Ce service est gratuit pour Internet Explorer 7 et Firefox 2. Pour les autres navigateurs, il faut s’abonner, et ça devient moins avantageux. Mais ça peut toujours dépanner.

Sachez qu’Alkaline peut être installé en plugin pour Coda ou TextMate.

http://www.youtube.com/watch?v=iVGbwUBPl98&flip=1