Dans les nuages...

Ravalement de façade

Aurel — Fri, 10 Aug 2007 21:35:00 +0200

Comme vous l'avez sans doute remarqués, j'ai totalement revu le design de ce site à l'occasion du Concours Cascading Style Summer Refresh 2007. Il reste encore 2 ou 3 détails à régler mais je suis plutôt satisfait du résultat.

L'architecture de ce site s'appuie entièrement sur dotclear 2 avec les fonctionnalités multi-sites et les templates.

En effet, le site est en fait composé de 3 blogs : le blog en lui-même bien entendu mais aussi un blog pour la partie designs et un autre pour les projets. Ceci permet de proposer des fils RSS de partout, mais aussi autorise les visiteurs à commenter les designs ou les projets, sans parler de l'ajout de contenu facilité avec l'éditeur WISIWIG de Dotclear qui est particulièrement bien fait.

Bref, j'espère que vous aimez ce nouveau thème graphique

Les hazards de la pub sur Internet...

Aurel — Thu, 19 Jul 2007 22:52:00 +0200

Cet après-midi, je tombe sur cet article du Monde informatique à propos des salariés stréssés d'IBM France. Regardez la pub en bas à gauche :

Vous trouvez pas que le salarié d'IBM a l'air un poil dépressif ? Mais le meilleur est quand même le slogan "Reprenez le controle !"

Note pour plus tard

Aurel — Wed, 18 Jul 2007 10:27:00 +0200

C'est décidé, mon prochain PC est un Mac.

P.S. : Vista est une daube immonde !

Kuler, un selecteur de couleurs original

Aurel — Tue, 27 Mar 2007 22:47:00 +0200

Je viens de tomber sur un selecteur de couleur intéressant, par Adobe : Kuler. Tout en flash, bien conçu et avec une bonne touche de web 2.0.

En effet, Kuler permet aux utilisateurs de créer des harmonies de couleurs sur le site, de les sauvegarder, de les taguer, de noter les créations des autres et même de laisser des commentaires ! C'est la le principal intérêt de cette application web, puisqu'on a accès aux harmonies les plus populaires et les mieux notées, avec les flux RSS correspondants.

La partie création est quand a elle complète et intuitive, mais nécessite une authentification. On peut ensuite créer de nouvelles compositions de couleurs ou éditer celles des autres utilisateurs. Enfin, une fonction d'export direct vers les applications Adobe est disponible.

Cette application ne serait pas loin d'être parfaite si chaque harmonie sauvée sur le site aurait un lien permanent associé. Peut-être dans une prochaine mise-à-jour...

De quoi nourrir votre agrégateur...

Aurel — Mon, 19 Mar 2007 21:00:00 +0100

L'excellentissime Smashing Magazine vient de publier LA liste ultime des 40 meilleurs sites traitant de design/dev web. Un must have ;).

42 Design/Tech Magazines To Read

A propos de listes, j'ai récemment découvert Listible, une sorte de Digg-like de listes de toute sortes, allant du plus mauvais président des USA de l'histoire aux meilleurs sites de galeries CSS.

Passage à Dotclear 2

Aurel — Fri, 05 Jan 2007 22:11:00 +0100

Je suis passé à Dotclear 2 Beta 4 !

J'en avais marre de me faire inonder de spam a longueur de temps, je vais pouvoir tester le module Askimet fourni avec DC 2, on verra bien ce que ça donne...

Sinon il reste encore à migrer le thème du site vers DC 2, pour l'instant j'ai laissé celui fourni par défaut.

Ils sont parmi nous...

Aurel — Sat, 29 Jul 2006 11:01:00 +0000

Comme vous le savez certainement, une nouvelle crise secoue le tour de France, impliquant le maillot jaune en titre, Floyd Landis. Alors, dopage ou pas dopage ? La vérité est ailleurs...

Récapitulons les faits : Après 17e étape, durant laquelle Landis a parcouru un raid solitaire en montagne de 130 km, il a subi un test antidopage révélant aujourd'hui un taux inhabituellement élevé de testostérone. Scandale. Pour sa défense, notre ami déclare : J'entends prouver que mon niveau de testostérone est naturel et produit par mon propre corps. De plus, il avoue avoir bu plus que de raison la veille de l'étape susnommée...

Donc pour résumer, Landis aurait réussi une échappée de 130 km sans dopage, le lendemain d'une grave défaillance, le tout avec la gueule de bois ? Chapeau l'artiste ! Non, plus sérieusement, un secret inavouable entoure Floyd Landis... Une vérité terrible, qui dépasse l'entendement...

Floyd Landis est... Testostéro !

Et oui, le vainqueur du tour de France 2006 est un mutant, de la même trempe que Wolverine, Storm ou Magneto. Testsotéro, c'est son nom, est un X-Men à la capacité de faire varier son taux de testostérone comme bon lui semble afin de développer sa masse musculaire. Souvenez-vous de sa déclaration : mon niveau de testostérone est (...) produit par mon propre corps. Plus aucun doute n'est permis !

Comment va réagir le reste du monde face à une telle révélation ? Testostéro est-il un gentil X-Men ou un méchant X-Men ? Sera il au casting de X-Men 4 ? Tant de questions sans réponses, ça donne mal à la tête...

Non, je ne suis pas mort !

Aurel — Sun, 23 Jul 2006 18:39:29 +0000

Oui, c'est vrai, ça fait un certain temps que je n'ai plus posté ici, mais depuis que je suis passé du monde universitaire au monde de l'entreprise, je manque de temps et d'idées...

Bon, c'est promis, je vais remédier à cet état de fait à partir d'aujourd'hui !

Un lifting pour Google

Aurel — Sun, 12 Mar 2006 14:44:00 +0000

Après de longues heures de travail, j'ai enfin terminé un petit projet qui me trottait dans la tête après la découverte de cette superbe maquette dont je me suis largement inspiré : le redesign de la page d'accueil de Google.

Ce projet se présente sous la forme d'un userscript GreaseMonkey. Si vous utilisez Firefox, vous pouvez modifier l'apparence de google sur votre navigateur, la procédure à suivre est décrite sur la page du projet.

Voici un petit aperçu du redesign :

J'améliorerais sûrement le design dans un futur proche, quand j'aurais le temps...

Créez votre propre web radio !

Aurel — Sun, 05 Mar 2006 22:59:00 +0000

Voici une brève présentation de deux web radios que je trouve particulièrement intéressantes.

Je viens de tomber sur un excellent billet du blog de Drcerveau & Raoul présentant une web radio originale : Pandora.

Le principe est très simple, vous choisissez un artiste ou un morceau, et Pandora jouera des morceaux qui ressemblent à vos choix. Vous pouvez apprendre vos goùts au système en indiquant les titres que vous aimez ou pas. Enfin, ces paramètres sont mémorisés sur forme d'une station, et vous pouvez partager vos stations avec vos amis !

Dans le même style, on peut trouver Last.fm qui se présente sous la forme d'un petit lecteur audio à télécharger. Mais avant d'écouter vos premiers titres, vous pouvez télécharger un plug-in pour votre lecteur audio favori qui va scanner votre médiathèque afin d'analyser vos goùts. Ensuite, le lecteur de Last.fm vous propose une liste de "voisins", c'est à dire des personnes qui ont les mêmes goùts que les votres et passe de la musique que vous ne connaissez pas mais que vous pourriez d'aimer.

Bien sur, ces deux web radios sont gratuites et sans pubs, ce qui ne gache rien.

En vrac

Aurel — Mon, 30 Jan 2006 18:46:45 +0000

Good-Tutorials.com, un site rempli d'excellents tutoriels Photoshop classés par catégories, par exemple retouche photo, design web, pour débutants...
Internet Explorer 7 Beta 2 Preview est disponible, ainsi que SeaMonkey 1.0.
Un peu d'humour : le futur boys band qui va tout déchirer.

Le point sur les PNG transparents sous IE6

Aurel — Tue, 24 Jan 2006 19:31:00 +0000

Voici un article récapitulatif à propos des différentes façons d'afficher des PNG transparents sous IE.

Comme vous le savez certainement, la gestion de la transparence des images au format PNG n’est pas complète sous Internet Explorer 6, contrairement à d’autres navigateurs respectueux des standards comme Firefox ou Opera. En effet, on observe un fond gris à la place de la transparence voulue :

Dans une page web, il y a deux façons d’afficher une image :

A l’aide de la balise <img>
Via une feuille de style CSS et la propriété background-image.

Les méthodes de contournements de l’affichage défectueux d’IE sont différentes selon l’origine de l’image :

Images provenant de balises <img>

Il existe des scripts JavaScript qui permettent d’obtenir un affichage correct de ces images. Vous pourrez trouver une solution sur ce site, ainsi que le script JavaScript. Ensuite, il faut appeler ce script dans vos pages seulement si le navigateur est IE, pour cela on utilise les commentaires conditionnels :

<!--[if lt IE 7]>

<script defer type="text/javascript" src="http://catinon.info/blog/post/2006/01/24/pngfix.js"></script>

<![endif]-->

Le mot-clé defer permet de transformer les images avant de les afficher, ce qui permet d’éviter l’affichage de fond gris pendant le chargement de la page.

Images provenant de feuille de style CSS

La marche à suivre pour permettre l’affichage de PNG transparents par l’intermédiaire de CSS est plus fastidieuse puisqu’il faut cette fois ajouter deux propriétés pour chaque images. Si l’on veut par exemple assigner l’image image.png à un élément HTML, on utilise la propriété suivante :

background-image: url("image.png");

Pour obtenir le même rendu sous IE 6, il faut utiliser les propriétés suivantes :

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=crop src=image.png');

background-image: none;

L’utilisation de ce hack CSS peut provoquer un problème sur les liens de la page que l’on résout avec la règle suivante :

a, input

{

position: relative;

z-index: 1;

}

Je vous conseille de réunir toutes les règles de corrections des problèmes liés à IE dans un même fichier CSS, appelé par exemple iefix.css, que l’on appellera seulement si le navigateur est IE, ce qui donne au final :

<!--[if lt IE 7.]>

<script defer type="text/javascript" src="http://catinon.info/blog/post/2006/01/24/pngfix.js"></script>

<link rel="stylesheet" type="text/css" href="http://catinon.info/blog/post/2006/01/24/iefix.css"/>

<![endif]-->

Définir la couleur de fond d’un fichier PNG

Dans le cas où l’on ne veut pas (ou peut pas) utiliser de code JavaScript ou hack CSS, il existe un moyen de choisir la couleur de fond de l’image PNG à la place du fond gris visible par défaut sous IE. Il est en effet possible de choisir une couleur de fond lors de l’enregistrement du fichier. Cette manipulation n’est pas possible avec Photoshop (ou alors je l’ai loupé) mais disponible avec The GIMP.

Lors de l’enregistrement de l’image, choissiez une couleur d’arrière-plan, puis enregistrez l’image au format PNG. Lorsque la boite de dialogue enregistrer au format PNG s’affiche, cochez l’option enregistrer la couleur d’arrière-plan, comme le montre la capture suivante :

L’image s’affichera avec un fond de la couleur choisie à la place du gris hideux par défaut.

Voila ! J’espère que ce petit récapitulatif vous sera utile !

De l'inspiration pour vos designs web

Aurel — Sat, 21 Jan 2006 11:55:10 +0000

Le site Web creme est une sorte d'annuaire de designs, avec un classement par couleurs dominantes.

C'est un site à visiter absolument si vous recherchez de l'inspiration, les sites référencés sont tous très réussis. En Enfin, ce qui ne gâche rien, 5 nouveaux sites sont ajoutés chaque jour.

Premier billet

Aurel — Thu, 19 Jan 2006 12:39:00 +0000

Le voici enfin, mon blog est ouvert !

Je ne sais pas encore de quoi je vais bien pouvoir parler ici, mais on verra bien ! Je vais quand même essayer de poster de façon régulière.