LESS, le js qui réinvente la façon de faire de la css !
Hier j'ai découvert, à ma grande satisfaction l'existence de LESS, une nouvelle façon de faire de la css.
Pour ma part quand je pense à la css, je pense à quelque chose de très répétitif parfois, qui est dû au manque d'automatisation de certaines tâches. C'est la qu'intervient LESS. Avec on peut faire de la css dynamiquement, avec des variables et des fonctions.
Avant de voir tout cela je vais vous montrer comment intégrer tout ça sur votre site internet.
Tout d'abord il y a l'intégration coté serveur grâce à node.js, si cela vous intéresse je vous laisse aller sur le site pour voir comment faire : LESS server-side usage.
Ici je vais vous montrer comment l'intégrer coté client, grâce a less.js. Vous devez faire un lien vers votre fichier dont l'extension sera .less et non .css ainsi qu'un lien vers less.js:
<link rel="stylesheet/less" type="text/css" href="styles.less"> <script src="less.js" type="text/javascript"></script>
Il ne faut pas oublier que lorsque vous télécharger le js il ressemble à less-1.0.41.min.js, alors soit vous changer son nom en less.js soit vous changer le lien (personnellement j'ai changé le lien, comme ça je connais quelle version de less.js j'utilise).
Une autre manière de faire est de compiler soit même le code, j'ai trouvé ca pour os X : http://incident57.com/less/, un plugin pour coda (toujours os X) http://incident57.com/coda/index2.php. Bon je n'utilise pas os X, mais sur archlinux il m'a suffit de faire un ptit "yaourt less css" et trouver un compilateur, il en existe peut être ailleurs aussi, je vous laisse chercher au cas où la solution javascript ne vous plait pas.
Maintenant que cela est fait on peut passer au fun et commencer à voir ce que LESS apporte.
Et comme son nom l'indique on a besoin de moins de ligne de code et donc de moins de temps pour faire ce que l'on souhaite. La première chose qui me permet de dire ça c'est la possibilité d'utiliser des variables, et comme un exemple est plus parlant que du blabla :
@vert: #BAC99F;
@ombre-marron: #8A8966;
@jaune-orange: #F2B530;
.pixel {
font-family: "MunroRegular", Calibri, "Helvetica Neue", Arial, sans-serif;
font-weight: bold;
text-shadow: 1px 1px 0 #000000, 2px 2px 0 @ombre-marron, 3px 3px 0 @ombre-marron, 4px 4px 0 @ombre-marron, 5px 5px 0 @ombre-marron;
color: @vert;
}
Ce qui nous donne en css normale :
.pixel {
font-family: "MunroRegular", Calibri, "Helvetica Neue", Arial, sans-serif;
font-weight: bold;
text-shadow: 1px 1px 0 #000000, 2px 2px 0 #8A8966, 3px 3px 0 #8A8966, 4px 4px 0 #8A8966, 5px 5px 0 #8A8966;
color: #BAC99F;
}
En mettant de bon noms de variables on peut ainsi rendre le code plus compréhensible (à moins que vous ne compreniez l'hexadécimal...).
Mais si il n'y avait que cette fonctionnalité cela n'aurait peut être pas valu le coup de s'y intéresser. Laissez-moi vous montrer une des fonctionnalité qui m'a fait penser à "je le veux!".
Comme d'habitude mieux vaut un exemple, pour cela je vais reprendre mon bout de code, et suivez bien car cette fois je vais vous montrer deux fonctionnalités !
.logo a,
nav a{
.pixel;
font-size: 1.5em;
&:hover{
text-decoration:none;
color: @jaune-orange;
}
}
Et oui on peut réutiliser les propriétés d'une classe dans une autre ! On peut aussi ajouter un pseudo-élément, ce qui nous permet d'éviter de devoir doubler les propriétés (une sans le hover, une avec le hover).
Enfin j'aimerais vous parler de la fonctionnalité qui m'a le plus enthousiasmé : la possibilité d'imbriquer ! Cette fois je vais prendre un exemple du site officiel :
#header {
color: black;
.navigation {
font-size: 12px;
}
.logo {
width: 300px;
&:hover { text-decoration: none }
}
}
Ce qui donne en css :
#header { color: black; }
#header .navigation {
font-size: 12px;
}
#header .logo {
width: 300px;
}
#header .logo:hover {
text-decoration: none;
}
Personnellement je trouve cette façon de faire bien plus intuitive et qui respecte plus facilement la hiérarchie de votre page.
Maintenant que vous avez un petit aperçu, je pense qu'il est temps d'aller tester tout ça, c'est par ici que ça se passe : http://lesscss.org/, et vous trouverez d'autres fonctionnalités telle qu'assombrir une couleur, la désaturer
Le seul reproche que je peux lui faire, c'est que si on fait une erreur dans son code ça casse quasiment tout, m'enfin c'est pas plus mal ça permet de repérer directement si on a fait une erreur.
ps : vous pouvez importer de cette manière : @import "lib.less"; (voir importer un .css), malheureusement je ne sais pas pourquoi je n'ai pas réussis à le faire avec une url externe... mais bon il suffit de le faire dans une css normale et voila.
Blender 2.57, première version stable de la branche 2.5x
MàJ: La version 2.57a est sortie aujourd'hui (22/04), cette version est la pour corriger quelques bug présent dans la 2.57, le lien de téléchargement n'a pas changé.
Cela faisait longtemps que je n'aavais pas écrit d'articles sur mon blog, quoi de mieux pour reprendre que de vous présenter la nouvelle version de mon logiciel préféré de modélisation 3D : Blender.
Le 13 avril, la première version stable de la branche 2.5x de Blender est sortie.
Cette version est la plus grosse évolution (à ma connaissance) que Blender ai jamais connue.
Pour se rendre compte il faut savoir que cette branche (la 2.5) a commencé en 2007, pendant que les dernières version de la branche 2.4x continuaient encore d'être développée.
Cette version fut crée afin de faire un nouveau départ. Il s'agit là de refaire quasiment tout le code de Blender, de repenser l'UI (user interface).
En gros nous avons le droit à un tout nouveau Blender qui ne ressemble que peu à l'ancien.
splash screen de blender 2.57
interface par défaut au lancement
blender 2.49b, l'ancienne version
outliner + menu principal
La plus grosse différence que l'on voit avec cette nouvelle interface est la prise en compte du nouveau standard concernant les résolutions d'écrans qui sont quasiment tous passé au 16/10eme ou 16/9eme.
Avec un écran plus large, on voit que la disposition du menu principal est devenue verticale et non plus horizontale.
Le outliner est aussi ajouté de base au dessus du menu, afin de retrouver plus vite les objets qui sont dans la scène.
On notera aussi un object tool qui se trouve sur la gauche de chaque vue 3d, et que l'on peut faire apparaître et disparaître en appuyant sur la touche T.
Maintenant que le plus flagrant est passé je vais vous faire une petite liste des nouveautés qui me paraissent les plus intéréssantes. Pour une liste plus complète vous pouvez aller sur ce lien : http://www.blender.org/development/release-logs/blender-257/
Tout d'abord comme je vous l'ai dit il y a l'interface qui a été revue entièrement, d'un aspect plus sombre mais aussi plus professionnelle (à mon avis).
Une des possibilités de la nouvelles interface est aussi de proposer plusieurs fenêtres pour gérer blender, un peu à la façcon de gimp. Cela s'avère très utile lorsque l'on a deux écrans, je l'utilise en général pour avoir une vue de la caméra sur mon écran de droite.
Pour faire une nouvelle fenêtre il suffit de cloner une des vue, pour cela il suffit simplement d'aller en haut a droite de la vue, de cliquer sur la hachure tout en appuyant sur la touche maj.
exemple de plusieurs fenêtres
Le sculpt mod a été revue et est désormais capable d'afficher beaucoup de faces sans ramer, on peut dire qu'il se rapproche de la qualité de Zbrush à ce niveau la.
exemple de sculpt (45 millions de polygones)
Désormais "tout" est animable avec les f-curve, et il y a maintenant des modifiers pour ces courbes, tandis qu'avant cela était réservé aux objets.
L'une des grandes innovation est le simulateur de fumée, qui n'existait pas auparavant. On peut aussi faire le rapprochement avec le rendu des volumes possible (pour les nuages par exemple)
Comme la vidéo le montre on peut colorer cette fumée comme on veut.
Le bump mapping est aussi amélioré.
Enfin une nouveauté qui ravira beaucoup ceux qui veulent utilisé un autre moteur de rendu que celui interne (qui lui aussi a eux beaucoup de modifications). Il est désormais possible pour les développeurs d'intégrer leur exportateur dans blender, afin que lorsque l'on choisit ce moteur externe, l'interface de blender ne propose que les matériaux correspondant au moteur, ainsi que les spécificités du rendu. on peut notamment voir que Luxrender propose déjà des versions pour blender 2.5, mais cela reste encore difficile à installer.
Bien sur de nombreux autres moteur de rendu devraient proposer rapidement des exportateurs intégrés à blender du fait de la sortie d'une version stable.
Blender 2.57 est la première version stable de la branche 2.5x, mais il est déjà prévu de faire une version 2.58 d'ici un mois ou deux, mais le développement n'est pas finis !
En effet il y a encore plein de projets en cours qui ne peuvent pas encore être intégré, mais ces projets vont faire partie de la branche 2.6x, et parmis ces projets notons le plus attendu d'entre eux : Bmesh, il permet à blender d'utiliser des faces à plus de 4 points : les N-gon. Bmesh est une refonte en profondeur de la façon de modéliser et apportera son lot de nouveautés car beaucoup de projets dépendent de lui.
Il y aussi l'unlimited clay qui permet de faire du sculpt comme sur de l'argil mais avec un matériau illimité (d'ou le nom) ! Une petite vidéo pour vous montrer les possibilités (par contre l'auteur a un gout musical spécial...) :
Malheureusement pour ce projet il risque de prendre plus de temps car le développeur a été engagé par 3D coat, mais le développeur a dit qu'il ne laissait pas pour autant tomber le développement...
ps : pour retrouver une fonction qui était présente dans les betas mais plus dans la stable, il suffit d'aller dans file/user preference, ensuite d'aller dans l'onglet input et de cocher le continuous grab. La fonction peut être explicite pour certain, mais je vous laisse découvrir ce que cela fait!
il y a aussi pas mal de chose qui ne sont pas présentes par défaut, mais on peut les retrouver facilement dans l'onglet add-ons de ces préférences. une fois que vous avez tout configurer il vous reste plus qu'a fermer la fenêtre et d'enregistrer vos préférences en faisant ctrl+ U (attention cela sauvegarde toute vos préférences, dont la scène et vos viewport, faites donc cette manipulation avec un blender fraichement lancé !)
pps : voila cette présentation de blender 2.57 est finie, mais il se peut que je modifie l'article afin de compléter les nouveautés de cette version dont j'aurai pu oublier (cela fait plusieurs années que je n'utilise plus que cette version, je ne me rappelle donc plus de tout ce qui est nouveau ou tout ce qui était déjà la avant 
)
Pour le téléchargement cela se passe par ici : http://www.blender.org/download/get-blender/
Très beau court métrage de la part de supinfocom de Arles : Mett Buck (oui c'est bien de la 3D)
très bon article sur HTML5 RT @picodix HTML5 et l'avenir du web: Tour d'horizon sur ce futur nouveau standard >> http://bit.ly/4FnbAi
Message test afin de configurer le css spécial pour mes tweet sur mon blog, petit bonus cette vidéo : http://bit.ly/aEPmZQ
Tablette wacom et Alchemy
Cela fait un bon moment que je n'ai pas fait de nouveaux articles, mais en voila un!
Je viens de faire l'acquisition d'une tablette graphique wacom, la bamboo pen & touch :
Je me suis donc dit qu'il serait intéressant d'essayer cette tablette avec des logiciels libre tel que MyPaint et Alchemy. L'idée venant principalement de la présentation faite par David Revoy (Deevad), une des personnes du projet Sintel.
En effet David Revoy utilise beaucoup ces outils, ils en a fait aussi un "training DVD" pour la Blender Foundation accessible ici : Chaos and Evolutions et pour le téléchargement (légal puisque libre) : torrent
Au final je me suis plus intéressé à Alchemy étant donné que je suis très mauvais dessinateur, je me voyait mal faire des miracles avec ma tablette. J'ai donc choisis l'option "Chaos" pour au final avoir quelque chose qui devrait être travaillé par la suite avec autre chose (comme MyPaint si 2D ou Blender pour la 3D )
Voici donc l'image que j'ai réussi à avoir après plusieurs tentative : 
(clic sur l'image pour l'avoir en grand)
A l'utilisation je trouve qu'une tablette est un peu difficile à prendre en main, je suis encore loin d'avoir maitrisé cela, mais après ces quelques test je sais déjà un peu mieux l'utiliser.
Alchemy est vraiment un logiciel à part, il permet de trouver une idée en venant du "Chaos", et franchement c'est bien ce qu'il me fallait. Je ne suis pas déçu du logiciel, il faut se faire au fait qu'annuler quelque chose n'est pas disponible dans ce logiciel (pas de ctrl + z), mais cela ne doit pas être un frein (bien au contraire).
En tout cas j'espère vous avoir donner envie d'essayer tout ça, et je pense que même sans tablette on peut des truc sympa.
Bientôt d'autres images viendront, et qui sait, peut être que je ferait un personnage 3D avec blender avec l'un de ces gabarits!
Teaser de Sintel (projet Durian) enfin dévoilé!
Et voila le teaser de Sintel, le projet Durian de la blender foundation est enfin disponible.
Comme vous pouvez le voir ce court métrage à l'air très prometteur.
Si vous voulez l'avoir sur vous et le montrer, ou que sais-je encore, il est disponible en téléchargement ici en plusieurs formats : http://durian.blender.org/download/
Et selon leur annonce il ne leur resterait que 2 mois pour tout bouclé! Ca avance à grand pas 
Pub de Google pour Chrome
Et voilou en me promenant sur le JDG je suis tombé sur une pub pour Chrome, le navigateur de google.
Voici ce que cela donne :
ps : prenez chromium a la place de chrome, c'est en gros la version libre qui est derrière chrome (et qui est donc plus en avance )
Démo HTML5 étonnante!
En me baladant sur blendernation.com j'ai trouvé une démo de ce que l'on peut faire avec l'HTML5 et c'est vraiment hallucinant.
En effet on peut faire exploser une vidéo en plusieurs carré avec un simple clic sur la vidéo.
Voyez par vous même sur ce site : http://craftymind.com/factory/html5video/CanvasVideo.html
Il vous faudra juste un navigateur capable d'utiliser l'HTML5 et canvas, j'ai testé sur chromium (mon navigateur par défaut) et aucun soucis, pas de lag, et sur firefox 3.6, que je trouve un peu moins réactif, mais cela fonctionne quand même. Pour ce que est de IE j'ai même pas tenté
1ère minute de Sintel (Durian)
Bon je sais que ca fait longtemps que je n'ai pas posté, mais je travail en ce moment donc je n'ai pas trop le temps, pour vous faire patienter avant un bon petit article (j'ai quelques idées en tête) voici la 1ère minute du court métrage Sintel, qui vient de la blender foundation :