Aller au contenu | Aller au menu | Aller à la recherche

vendredi, juillet 17 2009

Transformations 2D et 3D en CSS

Ainsi donc, webkit supporte maintenant les transformations 3D en CSS. Je trouve ça génial. J'apprécie déjà les transformations 2D (que j'utilise sur la page d'accueil de jelix.org). Mais là, ça ouvre encore plus de perspectives (c'est le cas de le dire ;-)).

Seulement, à travers les demos que j'ai ouvert dans mon Firefox (qui ne supporte pas les propriétés transform3D), j'ai remarqué que l'utilisation de ces transformations avaient un écueil : ça se dégrade très mal dans les navigateurs ne supportant pas ces propriétés. Du genre, les éléments s'affichent les uns sur les autres. Il y a certainement des améliorations possibles dans ces démos pour que ça se dégrade un peu mieux. Mais c'est certain qu'il va falloir faire attention...

Pour les plus curieux d'entre vous, les brouillons des spécifications sont disponibles sur le site du W3C : CSS3 3D transforms, CSS3 3D transforms.

mardi, juin 2 2009

Des problèmes XML dans webkit

Ici à Zoomorama, on hallucine sur les implémentations de XML dans les navigateurs. En effet, dans un de nos projets, on doit manipuler en javascript un document XML, créé à partir d'un DOMParser, et on a besoin de pouvoir propager un événement DOM sur des éléments XML. Et c'est loin d'être facile...

Lire la suite...

mercredi, mars 4 2009

Gnome : Mozilla ou Webkit ?

Dans le projet GNOME, les développeurs veulent mettre du web dans leur desktop. Ils cherchent donc un moteur de rendu qu'ils pourraient intégrer. Dans le monde open-source, il n'y a pas trop le choix : c'est Mozilla, ou Webkit. Mais lequel choisir ?

Un très intéressant billet sur le blog GNOME fait le topo sur les différences entre les deux projets, tant techniques que "philosophiques". Et ça me rappel la conférence de Paul Rouget (contributeur Mozilla) et de Julien Chaffraix (contributeur webkit) aux RMLL 2008, qui concluait : Mozilla est fait pour embarquer, Webkit est fait pour être embarqué.

Ce billet est d'autant plus sympa à lire qu'il n'y a ni troll, ni d'erreurs (enfin, pas au sujet de Mozilla à ma connaissance), et qu'il est vraiment très pragmatique. À lire pour avoir une vue d'ensemble des deux projets.

lundi, octobre 20 2008

Rendez vous à Paris Web 2008

Comme chaque année, je serais présent à Paris Web 2008. Et cette année encore, j'animerai un atelier le samedi (qui est en fait plus une conférence). J'expliquerai toutes les technologies qui ont ou vont débarquer dans vos navigateurs, et qui vont permettre aux développeurs web de faire des choses plus sympa et plus facilement que maintenant.

Cela sera accompagné de démonstrations sur les principaux navigateurs du marché dans leurs toutes dernières montures de développement : Firefox, Opera, Webkit... IE, on verra, je n'ai pas de windows, mais j'en parlerai aussi...

Rendez-vous donc à Paris-web, les 13, 14 et 15 novembre 2008 !

Ce sera aussi avec plaisir d'y retrouver des connaissances, dont Monique, qui a refait son apparition sur le web ! Bon retour sur le web Monique !

lundi, septembre 15 2008

Transformations en CSS3

Ce week-end, l'implémentation des propriétés de transformations CSS ont été incluses dans la version de développement de Firefox 3.1 (proposé par David Hyatt dans webkit il y a un an, et en partie au CSS working group, il y a 10 ans).

La propriété transform permet d'appliquer des transformations sur un élément : rotation, décalage, zoom, déformation, perspective. Je me suis amusé donc à faire quelques essais.

Je veux placer ce titre verticalement à gauche de la page :

Voici alors les styles appliqués :

 position: absolute;    /* pour sortir l'élement du flux normal */
 top:0; left:0;   /* on le place tout en haut à gauche */

 /* on fait une rotation de -90 degré, suivi d'une translation vers la gauche de 10em 
   10em étant à peu prés la longueur du texte */
 -moz-transform: rotate(-90deg) translate(-10em,0);

/* le centre de rotation se situe en haut à droite de la boite h1 */
 -moz-transform-origin: top right;

Et le résultat :

Imaginons maintenant que je veuille mettre une belle icône "nouveau" sur un article, en travers du titre de cet article. Plutôt que de faire une image comme on doit le faire dans les navigateurs actuels, faisons tout ça en CSS/HTML. Le HTML est le suivant:

 <h2><span>Nouveau ! </span>Lecteur MP3 Syno XZ-789</h2>

Appliquons maintenant le style de transformation :

 -moz-transform: rotate(-20deg);
 -moz-transform-origin: center center;

On obtient ceci :

Habillons le maintenant en utilisant border-image et cette image

 border-width: 15;
 -moz-border-image: url(etoile.png) 15 15 15 15 round round;

Et voici notre super logo :

Vous remarquerez qu'il apparaît de fines lignes blanches en pointillé, je suppose que c'est un bug qui j'espère n'existera plus dans Firefox 3.1 :-)

J'ai essayé rapidement aussi d'avoir des en-tête de colonnes obliques dans un tableau :

Mais ça ne donne pas un résultat vraiment interressant. Déjà la taille des colonnes restent les mêmes, mais aussi les bordures entre cellules ne sont pas prisent en compte...Il faudrait que je triture un peu plus la feuille de style je pense...

lundi, juillet 7 2008

Retour des RMLLs

C'était la première fois que je participais aux RMLLs, et cette édition 2008 me laisse une bonne impression, malgré quelques frayeurs Mardi lors de mon arrivée :

Heureusement le temps s'est rafraichit dans la semaine, les visiteurs sont venus, et j'ai pu avoir une solution de secours pour faire mes conférences. Comme à chaque meeting sur les logiciels libres, c'est l'occasion de revoir ou de rencontrer d'autres libristes, de troller discuter entre nous, en particulier lors des "nocturnes". J'ai pu aussi serrer la pince à deux contributeurs de Jelix, Bast et Bibo.

Lors de mes présentations Jeudi sur Etna et Jelix, il y avait je pense une quinzaine-vingtaine de personnes environ, ce qui est relativement positif, vu le nombre de conférences qu'il y avait pendant ces 5 jours. Par contre, à l'atelier Jelix de Vendredi : 2 personnes, en plus de 2-3 autres spectateurs arrivés par la suite. Faut dire aussi que jeudi soir c'était festif (le "repas du libre"), et l'atelier commençait tôt, à 9h00...

J'ai assisté à la conférence sur Copix, mais aussi sur "Webkit vs Mozilla". Très intéressant, car cela m'a permis d'en savoir plus sur le projet webkit, et sur les grosses différences "philosophique" et techniques, malgré l'objectif commun des deux projets : faire du web un web encore plus ouvert. Et contrairement à ce que peut laisser penser le titre, la conférence ne fut pas un champs de bataille pour trolls en tout genre. Les deux conférenciers, Julien Chaffraix (qui développe actuellement l'implémentation de XBL2 dans Webkit) et Paul Rouget (de Xulfr et contributeur Mozilla), ont bien préparé cette conférence de manière à avoir un "débat" équilibré (M'enfin, on a bien chambré ce pauvre Julien pendant ces 5 jours, lui tout seul face à 5 Mozilliens :-) ).

Au niveau organisation, ce n'était pas mal dans l'ensemble, pas de gros problèmes de mon point de vue (sauf les problèmes techniques pour filmer les conférences, et donc vous n'aurez pas la vidéo de mes présentations, ni celle sur Webkit vs Mozilla). Le seul souci je trouve est qu'il y avait des sites éloignés des uns et des autres. Quand on est à pied, ce n'est pas évident, même si il y avait des navettes... Bravo quand même aux organisateurs, je pense qu'à l'heure actuelle ils doivent tous être sur les rotules :-)

Pour ce qui est des slides, vous les trouverez sur le site des RMLL : Jelix, Etna.