Au choix :

• HavenWorks
• Yvette’s

Franchement, j’hésite…

Il faut manger 5 fruits et légumes par jour. Le problème, c’est que la SPA va nous tomber dessus… Et après avoir vu ces photos, je m’y reprendrai à 2 fois avant de manger une banane…

Quelques jours après la sortie de la version beta d’Internet Explorer 8, Mozilla a sorti une version beta de Firefox 3. Qu’en est-il de cette nouvelle version du navigateur favori des web designers ? Quelles sont les nouveautés ? Mais surtout : est-ce que les gros défauts de Firefox 2 (notamment l’utilisation de mémoire) ont été gommés ?

Interface

L’interface de Firefox m’a toujours plu, car elle est sobre mais fonctionnelle. La version 3 apporte son lot de nouveautés, plus ou moins intéressantes.

Bouton « Précédent » grossi

Ca saute aux yeux. Personnellement, j’utilise plutôt le raccourci clavier mais pour les fans de la souris, c’est un détail très pratique, conséquence de l’utilisation plus importante de ce bouton par rapport au bouton « Suivant ».

Barre d’adresses enrichie

Sous FF2, elle offrait déjà l’url et le titre de la page. De plus, elle mettait en premier les sites les plus visités. Avec FF3 s’ajoutent la favicon et une icône si elle est dans les favoris, avec en prime un design plus pratique pour bookmarker directement un site.

Gestion des favoris

Elle s’est bien développée. Les favoris seront gérés comme une mini-base de données, avec moteur de recherche, historique, gestion des tags… Les plugins de favoris ne seront plus nécessaires.

Performances

Mémoire

C’est le gros point noir de Firefox 2 : il utilise énormément de mémoire, sans compter celle que les plugins utilisent. Les développeurs ont beaucoup travaillés dessus. Stuart Parmenter, un développeur de Mozilla, explique comment ils sont arrivés petit à petit à gagner en performances. Le test consistait à ouvrir 29 pages dans 30 fenêtres, et ceci, 11 fois d’affilée, en fermant au fur et à mesure les fenêtres pour en garder 30 ouvertes à chaque instant. A la fin, une seule fenêtre restait ouverte pour voir si les navigateurs (ici FF2, FF3 Beta et IE7) récupéraient de la mémoire.

On voit que IE7 n’arrive pas à récupérer de la mémoire, même en laissant une seule fenêtre ouverte. Et on voit que le maximum qu’atteint FF3 est moins grand que ce que FF2 obtient au final.

N’oublions pas Safari et l’excellent Opera, qui ont été testés dans cet article et dont résulte ce graphique. Firefox 3 reste le plus performant.

Javascript

Le Javascript est omniprésent (notamment avec l’AJAX) que ses performances sont primordiales aussi. Là aussi, FF3 est le plus rapide.

Utilisation

Un navigateur se doit aussi de respecter l’internaute, et d’améliorer son expérience.

Sécurité

Ce n’est pas le point faible de FF2 mais mieux vaut prévenir que guérir. FF3 inclura un outil pour avoir directement des informations sur les sites qu’on visite, et aura un outil anti-phishing plus performant.

Standards du Web

En tant que web designer, cela nous intéresse. Au test Acid 3 (plus bas dans la page), FF3 s’en sort remarquablement.

Firefox semble devancer largement ses concurrents, et on espère que les plugins seront rapidement mis à jour, parce que c’est pour moi le point fort de Firefox.

MAJ : Safari est lui aussi en phase de beta test mais n’était pas inclus dans les résultats ci-dessus, faute de tests. Plus d’informations dans les commentaires ci-dessous.

J’avais déjà parlé d’une belle erreur Photoshop. En voici un florilège : PhotoshopDisasters répertorie les pires erreurs Photoshop (ou les meilleures, selon votre point de vue). Que ce soit un léger oubli, une erreur de jugement ou même un changement radical, ces images sont l’oeuvre de « graphistes » peu recommandables (ou alors tellement doués qu’on ne reconnaît rien de l’original). Bref, amusant et instructif.

Et bien oui, le rêve devient réalité : Portal existe. Il suffit de voir ces deux portails (un orange, un bleu) situés à deux endroits différents, et à travers lesquels passe un cube cœur. Ca se passe à Toronto et c’est l’œuvre de Posterchild. Le plus intéressant est qu’à travers un portail on peut voir ce qui se trouve de l’autre côté de l’autre portail. Par exemple, à travers le portail jaune, on peut voir marqué « Bar & Eatery », et l’on voit sur cette photo qu’il y a en face du portail bleu un magasin qui se nomme ainsi.

Posterchild a posté les photos du portail bleu et du portail jaune sur son site. Personnellement, je l’avais vu sur daily dose of imagery (qui se trouve dans ma blogoliste). Du fan art très réussi.

Rien de bien intéressant à dire sur cette photo ci-dessus ? On voit la Chose dans une salle de ciné. Tout le sens de cette image s’explique par une photo prise sous un autre angle. Une oeuvre de l’artiste Justen Ladda qui a réalisé de nombreuses installations de ce type.

Vous connaissez tous la pub du MacBook Air ? Voici une très chouette parodie réalisée par The Bureau, un groupe d’universitaires du Maryland : MacBook Air Parody. C’est ainsi qu’ils ont imaginé la réponse que Dell ferait à Apple…

Nous sommes le 1er avril. Allez sur Youtube. Cliquez sur n’importe quelle vidéo de « La sélection » (qui sont des vidéos choisies par Youtube). Et oui : you just got RickRolled. Et le blagueur est YouTube même.

Je trouve très drôle le fait que YouTube, un des sites les plus visités au monde, ne se prenne pas au sérieux de la sorte. Un moyen comme un autre de faire parler de soi. Et au lieu de condamner le phénomène RickRoll, ils surfent dessus.

Et oui… Après Mario, Resident Evil ou encore Doom, voici The Legend Of Zelda qui arrive bientôt sur nos écrans! Voici déjà la bande-annonce sur IGN. Bon ok, il me restait quelques dizaines de minutes pour poster ce truc le « bon » jour. Voici d’ailleurs une liste de bons blagueurs du web en ce jour fatidique.

Prenez un appareil photo. Ajoutez un long temps d’exposition, un soupçon de créativité et une tonne de fun. Vous obtenez des graffitis de lumière. C’est franchement plus sympa que certaines créations « lumineuses » sous Photoshop.

Je suis tombé sur une vidéo fort intéressante : Music and Life. Il s’agit d’une courte animation où Alan Watts fait une analogie entre la musique et la vie. Elle est produite par Trey Parker et Matt Stone, les créateurs de South Park.

La bataille très fructueuse des navigateurs continue. Un nouveau comparatif de performances JavaScript de Firefox 3.0 Beta 5 et Safari 3.1 sur Mac OS X nous montre que Firefox est plus rapide (de peu). Il est intéressant de noter que Firefox est encore en beta tandis que Safari est dans sa version stable. Ces deux là ne cessent de se battre au coude à coude. Une chose est sûre : nous (utilisateurs et web designers) sommes les grands gagnants de cette course vers la performance et le respect des standards.

Dans la panoplie de films suédés sortis sur YouTube suite à la sortie du (très bon) film Be Kind Rewind, voici l’inévitable Star Wars. Il s’agit de l’Episode IV et de l’Episode V.

Vous en avez marre du plancher des vaches ? Vous voulez manger un repas léger ? Voici pour vous Dinner in the Sky. Le concept : une table, une grue et des sensations. Attention à ne pas faire tomber sa fourchette, vous risquez de tuer quelqu’un.

Sur les pages web, nous sommes limités à 9 polices de caractères (Arial, Verdana, Times…). Cela semble peu (et ça l’est). Mais même avec ce faible nombre de polices, on peut jouer sur la taille, l’alignement, les couleurs, le type, l’espacement… pour apporter de la variété et du dynamisme à une page web. Il faut pour cela tester, et cela prend pas mal de temps, de taper une à une les propriétés CSS puis observer les changements, et comparer avec d’autres possibilités. Si vous voulez gagner du temps, je vous propose un outil très pratique (et très bien foutu) : Typetester.

Il s’agit d’un outil pour comparer des polices, sur la base de 3 colonnes (pratique pour voir les différences au premier coup d’oeil). Les modifications se font en « live » et tous les types (gras, italique, small-caps…) sont disponibles. On peut aussi copier-coller les propriétés d’une colonne vers une autre. Cerise sur le gâteau : on peut choisir dans la liste déroulante les polices installées sur son ordinateur, pour ainsi tester d’éventuelles créations d’images.

Vous êtes programmeur ? Vous connaissez plusieurs langages de programmation ? Vous pensez être doué ? Testez vos capacités en admirant la fameuse phrase « Hello World! » déclinée en 366 langages de programmation : The Hello World Collection.

Je n’imaginais pas qu’il y avait autant de langages de programmation. Il faut dire que dans le lot, il y en a des particuliers. Entre le plus long, le plus naturel et le plus farfelu, les différences sont extrêmes.

Les web designers sont confrontés au problème du nombre de polices disponibles lorsqu’il s’agit de texte html. 9 polices (dont Arial, Verdana, Times…), ça semble peu. Et pourtant, il existe des solutions pour habiller une page rien qu’en jouant sur les variations d’une même police.

Un exemple : la page du Seed Conference.
1 police (Times) et de nombreuses variations (taille, couleur, type…) créent une page relativement jolie.

Encore plus intéressant : Phineas Jones a réalisé exactement la même page mais en utilisant des em (cadratin). Le résultat est excellent. Changez la taille de la police (Ctrl + et Ctrl – sous Firefox) : le redimensionnement est parfait. On croirait un pdf! Comparez avec la page originale, vous verrez la différence.

Via Simple Bits

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 ?

Les dessins isométriques ont un look retro et attrayant. La forme la plus connue est le pixel art isométrique. Même si le résultat a l’air basique, le processus de création n’est pas si simple. C’est pour ça que The Man in Blue s’est amusé à développer un outil basique pour dessiner en isométrique : Cubescape. Rien d’extraordinaire, mais on peut bien s’amuser, et c’est là tout l’intérêt.

Quelques exemples

Mario

Lire la suite

Cette vidéo de 6 minutes est un screencap d’un projet sous Illustrator. Pour un novice (comme moi) d’Illustrator, c’est particulièrement intéressant : Science Machine

Les CV, il y en a de toutes sortes. Dans la masse de ceux qui passent entre les mains des employeurs, comment se démarquer ? Surtout pour un graphiste, il faut chercher à être original sans trop fatiguer le lecteur avec du design lourd et inutile, qui ne sert à rien. Voici donc une alternative intéressante : Curriculum Vitae de Greg Dizzia. Une sorte d’infographie de son parcours, qui même si elle n’est pas exempt de défaut, a le mérite d’oser l’originalité en introduisant une structure bien particulière qui permet non seulement d’égayer le CV mais aussi de lui donner une utilité non négligeable. Réalisé avec Adobe Illustrator CS3.

L’autre soir, envie de regarder un film. Je regarde dans les dvd que j’ai. Tiens, « Dr Strangelove« . Ca faisait longtemps. Le revoir a conforté son statut de chef d’oeuvre. Pour ceux qui ne connaîtraient pas, voici l’histoire en bref : un général américain parano et patriote, à la tête d’une base américaine, lance une attaque nucléaire contre la Russie, sans aucune concertation. Le président des Etats-Unis, alerté, rassemble l’état-major militaire pour résoudre en urgence ce problème. Entre-temps, les bombardiers américains filent droit sur le territoire russe. Commence alors le compte à rebours…

Dr Strangelove est un film sur la guerre, mais plus particulièrement une comédie sur la guerre. On assiste à un véritable de théâtre de l’absurde, totalement ancré dans son temps. Malgré cet humour noir très présent, le discours du film reste très sérieux. Ceci vient surtout de la précision historique que Kubrick a apporté au scénario, entre le processus d’attaque ou la réunion des dirigeants. Peter Sellers, qui joue ici 3 rôles (bien) différents, est flamboyant.

Il faut voir l’histoire comme un problème évident de communication (l’annonce ou non de l’existence du « doomsday device ») où la stratégie illogique de suicide indirect est le principal moteur. La population n’est pas vu comme des humains mais comme des chiffres, qui ne représentent que des paramètres dans les décisions de guerre, et permettent ainsi à une minorité d’assouvir ses désirs personnels. L’humour omniprésent illustre cette grande farce qui même si elle fait sourire, condamne allègrement le raisonnement délirant de la classe dominante.

Je ne saurais en dire davantage. Il vaut mieux le voir (si ce n’est déjà fait) pour en tirer toutes les leçons. Et éclater de rire.

Une chose que l’on nous apprend en CSS c’est d’utiliser les web-safe fonts. Ce sont en fait une dizaine de polices qui sont a priori existantes sur tous les ordinateurs. Ca permet à l’utilisateur de voir le site correctement, tel qu’il était prévu. Parmi ces polices il y a Arial, Verdana, Times…

Par conséquent, les intégrateurs se sont naturellement limités à utiliser les polices de cette liste. Mais en réalité, rien n’empêche d’en utiliser d’autres. C’est juste qu’en général, on ne prend pas ce risque là, parce qu’on ne connait pas la disponibilité des autres polices.

C’est pour ça que 3.7 Designs a établi une liste de 8 polices qu’on n’utilise pas en CSS mais qu’on devrait. Tahoma, Century Gothic, Palatino… Ce sont des polices qui sont très répandues, que ce soit sur Mac ou PC. On peut donc aisément les utiliser, en songeant bien sûr à spécifier des polices alternatives au cas où elles viendrait à manquer.