Le rendu de texte sous Safari

Si l’on considère que le web design, c’est à 95% de la typographie (et c’est sans doute grandement vrai), le moteur de rendu du texte d’un navigateur devient un élément primordial dans le choix de ce dernier. Dans les navigateurs les plus répandus, il en existe un qui se démarque particulièrement dans ce domaine : Safari (que ce soit sous Windows ou Mac).
Lire la suite

La guerre des navigateurs illustrée

Parfois, un dessin vaut mieux qu’un long discours… ou pas. Ca reste néanmoins très joli.

La guerre des navigateurs

Ouvrir des liens non cliquables

Ça ne vous arrive jamais de lire un article très intéressant sur un site, où l’auteur copie-colle des url dans son texte sans qu’elles soient cliquables ? Ma phrase n’étant pas très explicite, je vous offre un exemple :

http://www.monsupersite.com

Vous voudriez cliquer sur ce lien qui a la syntaxe et l’apparence d’un lien mais qui n’est malheureusement pas cliquable. Il faut sélectionner fastidieusement le lien, le copier, ouvrir un nouvel onglet, coller et appuyer sur Entrée. Rhaaa!

Deux solutions :

  • modifier ces liens non cliquables en liens cliquables sur tous les sites de l’Alpha à l’Omega
  • télécharger l’addon Text Link pour Firefox qui rend ces liens accessibles en double-cliquant dessus

Personnellement, j’ai choisi mon camp. J’ai déjà modifié 8432 liens.

Un thème aérien pour KDE 4.3

Petit à petit, KDE semble devenir la distribution l’environnement de bureau à absolument adopter pour Linux. Que ce soit au niveau fonctionnel ou au niveau graphique, comme avec le thème AIR par Pinheiro :

kde-air

kde-air-dock

13 citations de programmeurs

Le développement de logiciel est une tâche ardue, à en croire les programmeurs eux-mêmes : 13 citations de programmeurs.

I have always wished for my computer to be as easy to use as my telephone; my wish has come true because I can no longer figure out how to use my telephone.

Firefox 3 dépasse IE6!

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

firefox3-ie6

Firefox a 100% de parts de marché dans plus de 14% des continents

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

firefox-antartica

Bravo à l’Antarctique. 🙂

NYC 09 : vidéo de notre voyage à New York

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.

Prototype de l’interface de Firefox 3.2

firefox-32

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.

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.

Microsoft lance Internet Explorer 8 à 18h

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.

Emuler IE7 avec IE8

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 2009 : Safari, IE8 et Firefox se font hacker mais pas Chrome

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.

bbxpress : un thème WordPress gratuit

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.

bbxpress

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

bbxpress01

bbxpress02

bbxpress03

bbxpress04

bbxpress05

bbxpress06

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

17 navigateurs Windows sous Mac

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.

L’iPhone n’aime pas les podcasts

A voir les podcasts gérés par iTunes, on pourrait croire que l’iPhone/iPod sait bien les gérer aussi. Mais non.

Une petite liste de désagréments :

  • les chapitres des podcasts n’apparaissent pas en entier
  • pas de Cover Flow pour les podcasts
  • on ne peut regarder le contenu d’un podcast sans le lancer automatiquement
  • lorsqu’un podcast se termine et passe au suivant, la liste des chapitres ne se rafraichît pas (mais le titre oui)
  • le Shuffle (déjà très ennuyeux par défaut) ira piocher dans les albums mais ne passera pas par les podcasts

C’est peut-être le format spécial des podcasts qui les rendent si peu pratiques. J’espère que le firmware 3.0 corrigera ces défauts, qui ne me semblent pas insurmontables.

IE8 distribué via des mises à jour IE6/IE7

Ceci est la meilleure news de la semaine, que dis-je, de l’année pour un impécrateur intégrateur!

Microsoft va mettre en place des mises à jour automatiques vers IE8 pour ceux ayant encore IE6 ou IE7 !

mise-a-jour-ie8

Est-ce que le parc IE6 va considérablement diminuer avec ce plan de modernisation ? Je l’espère!

Pulp Fiction + navigateurs = Pulp Browsers

Rappelez-vous cette scène culte de Pulp Fiction où Samuel L. Jackson s’emporte un peu… Remplacez les protagonistes par des navigateurs et vous obtenez Pulp Browsers. Ou comment IE7 se fait remonter les bretelles par Firefox et Safari.

pulp-fiction-navigateur

PS : la version typographique de cette scène est superbe.

Un mode Windows XP pour Windows 7

Pour ceux qui n’ont pas aimé Vista (je n’en fais pas partie) à cause notamment de problèmes de compatibilité, sachez que Windows 7 aura un mode Windows XP.

Nommé le XPM (pour XP Mode), ce mode consiste en un Virtual PC doté d’une version XP SP3 mais tournant sur le même bureau que Windows 7. On pourra donc avoir IE6 et IE7 sur la même machine, et sans avoir besoin d’une version stand-alone crackée. Le XPM n’est pas inclus de base dans Windows 7 mais il sera téléchargeable gratuitement pour ceux qui souhaiteront avoir Windows 7 et XP simultanément.

Ce concept établit de facto une compatibilité proche de 100% pour Windows 7 avec les logiciels tiers, notamment ceux n’étant plus mis à jour.

Si IE6 n’existait plus…

J’avais lu un article sympa il y a quelques jours : « 10 cool things we’ll be able to do once IE6 is dead« . Je me suis dit que j’allais me faire une petite liste perso.

Si IE6 n’existait plus :

  • les dégradés, ombres portées, arrondis… ne me prendraient plus la tête ! Je vous aime les PNG.
  • je n’aurais plus besoin de mettre des display:inline à mes float
  • j’utiliserais les pseudo-classes :first-child, :after, :lang…
  • les hacks du type * html ou _left iront aux oubliettes
  • j’arrêterais les <input class= »text » type= »text » /> parce que je pourrais mettre input[type=text]. Ah les sélecteurs d’attributs
  • les overflow:hidden seraient réduits de 95%
  • je mettrais des :hover sur ce que je veux
  • plus besoin de li{ display:inline;}
  • je pourrais sélectionner les enfants directs (p > a)
  • je n’aurais plus besoin de twitter mon score face à IE6 (actuellement IE6 mène 4 à 3 )
  • j’installerai IE8 sur mon PC à la maison
  • je passerais 50% de mon temps à faire autre chose
  • je devrais trouver un autre bouc-émissaire
  • je ne stresserais plus en appuyant sur F5

En attendant, je galère encore.

Windows 7 a de jolis fonds d’écran

La Release Candidate 1 de Windows 7 a de jolis fonds d’écran par défaut. En voici une poignée :

windows-7-fond-decran-01

windows-7-fond-decran-03

windows-7-fond-decran-02

Le graphiste a un peu fumé pour le premier, mais au moins, ça nous change des méga jeux de lumière et autres prairies faussement paisibles.

Le premier navigateur Web

Le premier navigateur Web dénommé « WorldWideWeb » créé par Tim-Berners Lee tournait sous un ordinateur NeXT, et faisait office d’éditeur aussi. A la base un outil pour aider les scientifiques à s’échanger des informations, le Web a pris une dimension bien plus grande.

If households nowadays want a computer, it is not to compute, but to go on the Web.

Le premier navigateur web

WorldWideWeb : le premier navigateur web

Mozilla Jetpack : des plugins Firefox en HTML/CSS/Javascript

mozilla-jetpack

Encore des plugins Firefox ? Oui, mais là, c’est différent :

In short, Jetpack is an API for allowing you to write Firefox add-ons using the web technologies you already know.

En gros, pour faire des plugins Jetpack, il suffit de s’y connaître en HTML/CSS mais surtout en Javascript. Tiens, « plugins »… « Javascript »… Ca rappelle exactement le plugin (XPI lui) Greasemonkey. Et dans un sens, ça rappelle aussi les bookmarklets.
Lire la suite

Demain, Opera réinvente le web

opera-freedom

Opera, peut-être le meilleur navigateur qui soit, réinvente le web demain.

Petit rappel des innovations Opera

L’annonce peut sembler prétentieuse mais je pense que c’est à prendre avec une touche d’humour. Et puis, Opera est un pionnier en termes d’innovations. Opera était le premier pour :

  • Speed Dial (2007) : une mosaïque des sites les plus visités, repris par Chrome et Safari
  • Navigation par onglets (1994) : repris et amélioré par NetCaptor en 1997, puis repris par tout le monde
  • Sessions (1996) : la possibilité de récupérer une session qui s’est crashée
  • Bloqueur de pop-ups (2000) : comment l’envisager sans aujourd’hui ?
  • Zoom entier (1996) : d’habitude un zoom n’agrandit que la taille de la police, et à moins d’avoir un design élastique (et non pas fixe ou fluide) comme ici sur bbxdesign, la structure de la page ne s’agrandit pas à moins d’avoir un zoom entier.
  • BitTorrent (2006) : un client BitTorrent intégré au navigateur
  • Suppression des données personnelles (2000) : en deux clics, on peut supprimer les cookies, le cache, l’historique, les mots de passe…
  • Mouse gestures (2001) : navigation par gestuelle de la souris

C’est quoi cette nouveauté alors ?

Je n’ai personnellement aucune idée de ce que peut être cette « réinvention du web ». Hicksdesign pense que ça sera tout internet sur une clé usb. 🙂

The peer-to-peer Web

Le blog assertTrue() a une autre idée, très intéressante : Opera intègerera un serveur web. En lançant Opera, on pourra partager ses favoris, des fichiers, des contacts, des pages web… Chaque navigateur sera alors un serveur web. Ca sera du P2P mais en utilisant du HTTP.

Mmmh, ça reste une spéculation mais ça ne m’étonnerait pas et j’aimerais beaucoup voir ça!

Si je pouvais utiliser toutes mes extensions Firefox avec Opera, je serais déjà utilisateur d’Opera à plein-temps. C’est pour moi le meilleur navigateur qui soit, suivi par Chrome et Firefox. Je suis très déçu par le score que fait Opera : 3,69%.

Ok, je suis web designer, j’ai besoin d’utiliser Firefox, c’est mon outil de travail principal. Mais tous ceux qui ne font pas de web, pourquoi n’utilisent-ils pas Opera ? La cause principale c’est justement parce que les gens ne font pas de web qu’ils ne connaissent pas Opera. C’est le même problème que pour Chrome. Les gens utilisent encore IE (surtout 7 maintenant).

Il me faudrait Firebug sous Opera et je pense que je switcherais définitivement. Dragonfly a l’air pas mal. Je vais tester ça. Et demain, grosse annonce d’Opera alors!

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.