En attendant le prochain bdbx (déjà prêt), je vous propose 5 bonnes pratiques en CSS. A force de bosser des feuilles de style, il m’arrive de ne plus faire quelques erreurs même si je n’arrive pas encore à toujours trouver la solution optimale directement. Ici, je ne parlerai pas de pratiques basiques plutôt évidentes (comme par exemple d’utiliser un maximum les notations raccourcies), mais d’autres plus subtiles auxquelles je ne pensais pas auparavant.

1. Ne pas utiliser de position:absolute sur un élément dont on ne connaît pas la hauteur
2. Bien notifier qu’un lien est en display:block
3. Ajouter un background-color avec le background-image
4. Utiliser le position:relative en dernier recours
5. Mettre un id au body

Lire la suite

Dans l’ère moderne, nous ne sommes plus que de simples consommateurs, rien de plus. Pourquoi ne pas nous attribuer un code barre ? A défaut de vraiment en avoir un collé dans sa nuque (aaah… 47…), vous pouvez déjà connaître votre code barre personnel. Il suffit de répondre à quelques questions pas trop indiscrètes, et le tour est joué. A quoi ça sert ? A rien.

Sur le même site vous pouvez trouver un truc encore plus sympa : un widget horloge en code barre (hébergé chez Apple). « Non cet écran n’est pas à vendre. »

Ah Guitar Hero… Le jeu qui fait passer les gamers pour de (fausses) rock stars. Parce que ce jeu n’apprend pas à jouer de la guitare, mais permet « seulement » de jouer à Guitar Hero (Stanley et Kyle de South Park l’apprendront à leurs dépens…). Les vrais gratteux détestent souvent ce jeu pour ce degré d’imposture.

GameTank a donc décidé de créer un mix des deux mondes pour essayer de les réconcilier (et surtout surfer sur la belle vague) et sort le jeu : Guitar Rising.

Comment ça marche ? Il faut brancher sa guitare par USB ou directement à la carte son, ou on peut utiliser un microphone. Le jeu sera disponible sous PC et Mac.
Au niveau du contenu, ça manque encore de morceaux connus mais ils y travaillent. Il y aura plusieurs modes de difficultés, histoire d’évoluer progressivement, et permettre, selon GameTank, de pouvoir apprendre à jouer de la guitare.

Je pense personnellement que ça n’est pas un très bon moyen d’apprendre, mais l’idée de me défouler sur quelques morceaux sympas me passe par la tête.

Via Gizmodo.

Une fois n’est pas coutume, une blague d’une amie (elle se reconnaîtra, hihi). Visitez son site : le blog de Pulupulu.

A peine ai-je fini mon nouveau header que je me rend compte qu’il fait pâle figure face à d’autres : 73 superbes headers de site. Je viens de tomber sur ce post de noupe.com qui offre une riche et jolie dose d’inspiration. Voici mes préférés.

Next2Friends

Ce style ne m’est pas inconnu… En effet, le designer n’est autre que Nick de N.Design Studio (au header déjà grandiose), dont le projet parallèle Web Designer Wall possède un design génial (header compris).

Casio Exilim Lab

Une multinationale qui s’offre un mini-site au design léger et coloré, très attrayant, avec son côté artisanal. En prime, un menu qui se déroule littéralement, et vers le haut svp!

Art-zen

Header fluide et coloré pour ce blog tout récent (pas grand chose qui fonctionne), mais on peut encore accéder à l’ancien portfolio.

Zinaz

Sur Zinaz, un autre header particulièrement florissant sur un site où l’homogénéité se voit de haut en bas.

Cult-foo

Très clean, Cult-foo possède un magnifique header aussi lumineux qu’attractif. Admirez la réalisation admirable des oiseaux!

Un autre excellent article à lire en tant que web designer (et designer en général) : 10 Mistakes in Icon Design, par TurboMilk. L’auteur établit une liste très pertinente et variée d’erreurs à éviter lors de la création d’une icône (traduction personnelle à la volée) :

1. Différenciation insuffisante
2. Icône surchargée
3. Eléments inutiles
4. Manque d’homogénéité
5. Perspective et ombres inutiles
6. Etre trop original
7. Oublier les différences culturelles
8. Incorporer des éléments réels
9. Avoir du texte incorporé à l’icône
10. Pixellisation approximative

En tant que web designer, on peut être amené à créer des icônes, sans doute pas pour un programme mais pour illustrer un site, un menu de navigation. C’est toujours très attrayant mais aussi utile pour guider l’utilisateur et différencier les actions qui s’offrent à lui.

Une icône qu’on est tous amené à réaliser est la favicon (la petite icône de la barre d’adresse). Et elle est très importante! Lorsqu’un internaute parcourt ses favoris, il sera particulièrement aidé si le site qu’il recherche possède sa favicon, et qu’elle se distingue des autres. D’ailleurs, j’ai des difficultés à bookmarker un site qui n’en a pas. Je trouve ça joli et utile, pourquoi s’en priver ?

Plus généralement, on peut appliquer certains conseils de cette liste à la création d’un logo. Il faut songer à sa portabilité (selon la taille, le support, le contexte), son originalité (savoir différencier sans s’égarer), et son interprétation (est-ce le bon message qui est véhiculé ?). Autant de choses qui demandent, certes du talent, mais surtout de la réflexion.

Voici ce que m’a inspiré la St Valentin.

Portal est mon jeu de l’année 2007. Gameplay révolutionnaire, fps de réflexion, atmosphère pesante et hilarante. Une tuerie. Sans doute sera-t-il fondateur dans plusieurs domaines du jeu vidéo.

Pour les gamers qui ont adoré le jeu, Portal est devenu une religion. Le genre de celles qui amènent leur lot de fanatisme démesuré et un référencement culturel intensif. Entre citations quotidiennes et self-made objects, Portal s’est rapidement fait une place dans le monde des jeux cultes. Petit tour d’horizon.
Lire la suite

Quelques trucs intéressants et/ou drôles dénichés par ci-par là. On parlera ici :

• de design foireux
• de proposition de mariage
• de montagnes russes mortelles
  
• de bibliothèque
• et bien sûr, de Portal !

Lire la suite

Adorable et hilarant.

En regardant cette vidéo, j’ai eu du mal à esquisser ne serait-ce qu’un sourire. La blague que ces parents ont faite à leur fils est horrible. La réaction du fils n’est pas celle d’un gosse qui fait son caprice car il n’a pas eu ce qu’il voulait. Il est tout simplement anéanti.

Je viens de tomber sur le trailer d’un nouveau jeu qui semble excellent! C’est un mix de :

• Battlefield 1942 (dans le gameplay et les maps)
• Team Fortress 2 (dans le style cartoon et système de classes)

Ce jeu sortira en été 2008 et sera entièrement gratuit. Les persos seront hautement customizables et il y aura un système de ranking qui garantira le fait de toujours jouer avec des gens de notre niveau. Bref, ça a l’air super sympa !

Voir le trailer (qui est lui aussi très sympa)

UPDATE : Foxmarks s’appelle désormais XMarks

UPDATE 2 : XMarks n’existe plus ! Il faut utiliser Firefox Sync.

Il y a quelques mois je cherchais un outil pour synchroniser mes bookmarks Firefox entre mon pc à la maison et celui au travail. Je voulais que chaque ajout, modification ou suppression sur un ordinateur se répercute sur l’autre. J’avais alors testé 4 outils :

• Foxmarks Bookmark Synchronizer, mais le serveur du site était inlassablement saturé, donc je ne pouvais pas uploader mes favoris.
  
• Box.net Bookmarks Synchronizer, qui semblait marcher car j’avais réussi à uploader facilement mes bookmarks, mais il fut impossible de les récupérer sur l’autre ordinateur.
  
• Bookmark Sync and Sort, qui n’a pas réussi à se connecter à mon ftp (je n’ai pas cherché plus loin).
  
• Delicious Bookmarks, du fameux site.

Je me retrouvais donc à utiliser le plugin de del.icio.us mais vraiment par défaut d’avoir mieux. Parce que del.icio.us fonctionne avec des tags, et en uploadant mes favoris, cela a généré automatiquement des tags à gogo, ce qui a foutu un bordel pas possible au final. Il y avait notamment le tag « barre personnelle » sur tous mes favoris… Génial…

La semaine dernière, je me dis que j’allais retenter le plugin Foxmarks, et j’arrive enfin à me connecter! J’installe le module sur les deux pc. Résultat : la synchronisation marche parfaitement.

La démarche à suivre est très simple:

• Il vous faut un compte sur Foxmarks (gratuit)
• La première synchro demande soit de garder les favoris du serveur et ceux du pc, soit l’un des deux
• Une icône en bas à droite de la fenêtre Firefox affiche le statut de Foxmarks (« prêt », « en cours de synchronisation », « nouveaux favoris à synchroniser », « un problème est survenu »…)
• Je vous conseille d’activer la synchronisation automatique, qui permet de récupérer au démarrage et « silencieusement » les derniers favoris du serveur
• Ensuite, activez aussi la synchro à la fermeture (et de décocher la case « d’abord demander »), histoire de ne rien perdre en partant.

Finies les sessions de copier-coller de favoris. Foxmarks marche exactement comme je le voulais.

Le site officiel IEBlog vient d’annoncer que Internet Explorer 8, par défaut, respectera les standards du web (le mieux qu’il pourra bien sûr). C’est a priori une grande annonce car après la réussite du test Acid2, il semble que Microsoft change la politique de son navigateur. Mais doit-on célébrer cette annonce ? Non.

La première chose à dire est :  » Il était temps! « . Que ce soit Opera, Firefox ou Safari, les principaux navigateurs concurrents respectaient en grande partie les standards. Microsoft est sur ce point le dernier de la classe, non pas par défaut de capacité mais par désintérêt total. La position dominante de son navigateur fétiche (quelle que soit la version) permettait à MS d’établir ses propres standards, au détriment de l’intercompatibilité des sites web. Un abus de pouvoir en quelque sorte. Alors n’allons pas remercier MS de ne plus le faire. L’article de IEBlog n’hésite pas à se jeter quelques fleurs au passage.

We want to make IE8’s Standards mode much, much better than IE7’s Standards mode.

Le challenge ne sera pas grand, car d’autres l’ont fait. Et c’est la moindre des choses.

the web moves gradually from the large quantity of legacy content authored around IE7’s behaviors to a new era of much more interoperable and web standards compliant browsers

Ce n’est pas nouveau et ceci démontre que IE8 respectera les standards en conséquence du succès des autres navigateurs. En d’autres termes, MS n’aurait pas décidé de son plein gré de le faire, et s’y trouve quelque peu contraint.

Now, IE8 will show pages requesting “Standards” mode in IE8’s Standards mode. Developers who want their pages shown using IE8’s “IE7 Standards mode” will need to request that explicitly

Comprenez là que IE8 utilisera par défaut son propre « moteur » et pas celui d’IE7. Cela me semble étonamment évident! Par respect pour les web designers (qui se heurtent souvent à la rétro-compabilité de leurs sites) et dans l’idée d’évolution du web, c’est la meilleure chose à faire. Je ne comprends vraiment pas pourquoi MS hésitait entre ça et utiliser le moteur d’IE7 par défaut! Pour ceux qui voudront néanmoins le faire (jetons leur la première pierre), il faudra le spécifier dans la balise meta.

Bref, cette annonce est semblable à celle d’un académicien qui se déciderait à parler correctement français.

De temps en temps, j’ai juste envie de poster un truc étonnant. Comme l’histoire de Buster Martin, un anglais (né en France). Il a 101 ans, court le marathon, adore la bière, fume, et il est actuellement le plus vieil employé d’Angleterre. Accessoirement, il a 17 enfants.

Le weekend dernier, il a couru un semi-marathon (21km) en un peu plus de 5 heures. Le plus incroyable, c’est qu’au milieu de la course, il s’est’arrêté pour une bière et une cigarette! C’est une habitude qu’il a prise.
En avril, il va tenter de battre le record du plus vieux participant à un marathon, à l’occasion du marathon de Londres.

Courir, boire, fumer à 101 ans… Cet homme est mon nouvel héros.

Source : ABC News

PS : j’oubliais de dire que l’an dernier il a mis la misère à 3 mioches qui voulaient le dépouiller.

Je suis tombé sur le site Flash d’une agence allemande : WM Team.

Ils sont spécialisés dans le design et l’animation Flash, et créent non seulement des bannières et des sites, mais aussi des jeux très sympas. Leur site est un parfait exemple de leur créativité et leur humour. L’introduction sonore et visuelle est tout d’abord très sympa. Puis vous verrez aussi les transitions entre les différentes catégories qui sont autant d’animations originales et réussies. Par exemple, une énorme main gonflable qui viendra « attraper » le menu, ou bien un jeu de tir où il faut viser la tête d’un membre de l’équipe pour voir son profil.

L’intérêt de telles animations est surtout d’inciter le visiteur à parcourir l’ensemble du site. Pas forcément pour le contenu, mais pour découvrir toutes les animations variées qui existent. Et au final, on se retrouve quand même à s’intéresser au contenu. On en oublie même la typographie assez peu réussie du site, et on s’amuse à visiter les réalisations de cette agence bien sympa (qui cherche un webdesigner… oooh…).