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

Mot-clé - standards web

Fil des billets - Fil des commentaires

jeudi, mars 21 2013

Openweb a dix ans

Il y a tout juste dix ans, le premier site français entièrement dédié aux standards du web ouvrait ses portes : Openweb.eu.org. Il fut le résultat du travail de 11 passionnés du web : Tristan Nitot, Laurent Denis, Pascale Lambert-Charreteur, Florian Hatat, Fabrice Bonny, Emmanuel Clément, Mathieu Pillard, Denis Boudreau, Olivier Meunier, Samuel Latchman et moi même. Nous publions tous un peu de notre coté des articles sur les standards (je venais d'ouvrir mon blog deux mois auparavant), et un jour nous nous étions dis que cela serait bien de rassembler toutes ces ressources en un seul lieu.

La magie du web a permis cela, bien que nous soyons tous aux quatre coins de la France (et du canada !).

Je me rappelle encore de certains soirées à coder chez moi dans mon bureau, ou encore cette seule et unique réunion IRL pour discuter du projet, dans les locaux d'AOL où Tristan travaillait. J'y rencontrais donc pour la première fois celui qui allait devenir le président de Mozilla Europe. Je crois aussi que j'avais croisé très furtivement à la cantine d'AOL celui qui allait devenir mon patron 1 an et demi plus tard, Daniel, chez Disruptive Innovations. En effet, les locaux abritaient ce qui restait de Netscape France (Daniel, Tristan, Peter...), filiale de la société à l'origine du projet Mozilla.

Depuis la publication des premières pages d'Openweb.eu.org, de l'eau a coulé sous les ponts. Les personnes qui animent le site ont changé, mais le site est toujours là et est encadré par des gens tout aussi passionnés par le web. Et malgré des périodes d'inactivité il y a quelques années, des articles continuent à paraitre régulièrement. Avec cette "monoculture" webkit qui menace, les standards du web sont plus que d'actualité.

Pour ma part, j'ai tourné la page "openweb" depuis quelques années. Mais j'en suis toujours aussi fier et je continue à soutenir les standards du web. Ce projet fut pour moi le départ de beaucoup de choses, comme mon aventure dans le projet Mozilla, qui démarra avec l'ouverture de xulfr.org dont je fêterai aussi les 10 ans cette année.

Bon anniversaire Openweb !

jeudi, juin 24 2010

IE9 a quasi rattrapé son retard

La troisième preview de IE9 est sortie. J'avoue être plutôt impressionné par toutes les améliorations qu'ils ont encore apporté. IE9, une fois que la version finale sera sortie, sera vraiment dans la cour des grands et aura rattrapé tout son retard technologiquement parlant.

Une partie des questions que je me posais il y a quelques mois ont maintenant une réponse : c'est implémenté.

  • Support de SVG (en partie)
  • éléments HTML5 <video>, <audio>, <canvas>,
  • support DOM largement amélioré: DOM traversal, DOM level3 core, DOM level3 events,
  • fontes téléchargeable WOFF, support complet CSS 2.1, support des media queries CSS3, selecteurs CSS3, bordures CSS3, background CSS3
  • un moteur javascript complet et aussi rapide que celui des autres navigateurs (je ne tiens pas compte des pouillèmes de milli secondes de différences entre chacun, à ce niveau, ce n'est plus tellement significatif)

Bref, tout plein de choses à se mettre sous la dent, avec un score acid3 qui grimpe à 83[1]. Sans parler d'un support très avancé de l'accélération graphique matérielle.

Il lui manque toutefois encore des technologies qu'ont déjà les concurrents, comme :

  • les WebWorkers
  • les WebSockets
  • formulaires HTML5, HTML5 File API, et autres éléments de sections HTML5 probablement
  • transitions CSS3, transformations CSS3, animations CSS3, gradients,
  • WebGL
  • SMIL
  • Évènements DOM multi touch, support accéléromètre, support géolocalisation
  • base IndexedDb
  • API Drag and drop (à vérifier)

Et j'en oublie certainement[2]. Ils ont donc encore du chemin à rattraper, et je ne doute pas que certaines de ces technos seront implémentés dans la version finale de IE9. Pour moi, on pourra qualifier IE9 de navigateur moderne. Car une chose est sûre, les développeurs web auront déjà suffisamment de technologies pour faire des sites modernes qui soient compatibles avec la majorité des navigateurs.

Le rouleau compresseur Microsoft a mis du temps à se mettre en route. Il est maintenant en marche, et pas qu'un peu. Mozilla, Apple, et Google ne devront pas s'endormir sur leurs lauriers. Cette nouvelle guerre de navigateurs initiée par Mozilla devient vraiment intéressante.

Notes

[1] Même si, comme je l'ai déjà dit, ce test n'est pas vraiment significatif

[2] je me suis en partie basé sur la liste des fonctionnalités qui sont implémentés dans Firefox 3.6 ou 4

vendredi, octobre 16 2009

Transitions CSS

La version de développement du futur Firefox 3.7 implémente depuis quelques jours les transitions CSS. Vous avez peut être pu le voir, en lisant Paul qui a parlé discrètement sur son blog, en même temps que la nouvelle implémentation de l'API de l'accéléromètre. Vous pouvez voir une démo de Paul avec les transitions CSS.

Le principe est assez simple:

  • avec la propriété transition-property, vous indiquez les propriétés CSS qui seront concernées par la transition, c'est à dire, quand leur valeur changera, il y aura une transition entre l'ancienne valeur vers la nouvelle valeur, le changement ne sera donc pas immédiat.
  • transition-duration permet d'indiquer la durée de la transition, pour chacune des propriétés
  • transition-timing-function, indique la fonction de transition, c'est à dire la manière dont la transition sera faite. Par exemple la fonction ease-in-out fait une transition rapide au début, lente au "milieu", et rapide à la fin. On a ainsi des fonctions pour faire des effets élastiques, smooth etc..
  • transition-delay pour indiquer à partir de combien de temps la transition doit être faite, à partir du moment où la valeur est changée.
  • transition pour indiquer tout ça en une seule instruction.

Voir la spécification complète sur le site du W3C (spécification qui est encore un brouillon).

Un exemple :

  .mydiv {
     width: 100px;
     transition: width 1s linear;
  }

 .mydiv:hover {
    width:200px;
 }

Quand on passera la souris au dessus de l'élément, sa largeur changera à 200px. Avec la propriété transition, ce changement ne sera pas immédiat. La largeur passera de 100px à 200px en 1 seconde, de manière linéaire. Bien sûr, ce changement de valeur peut être fait via javascript plutôt que sur un :hover, par exemple: document.querySelector(".mydiv").style.width="200px";.

Le gros intérêt de ces propriétés CSS, c'est que ça va rendre obsolète beaucoup de fonctions d'animations que l'on retrouve dans beaucoup de frameworks javascript (jquery, mootools...). Ça permettra des pages plus légères (les frameworks seront moins lourds à terme) et plus rapide.

C'est donc implémenté dans webkit (donc dans Safari, et Chrome je crois), et dans une future version de Firefox, en utilisant bien entendu les prefixes -webkit- et -moz- sur les propriétés pour que ça fonctionne.

Et, comme je l'avais déjà dis il y a quelques mois dans un billet sur notre technologie à Zoomorama, c'est aussi implémenté dans notre browser (développé en actionscript 3). J'ai mis en ligne deux démos faites par David Marteau, et c'est utilisable dés maintenant dans vos fichiers ZML :-)

vendredi, septembre 25 2009

Agenda d'octobre chargé

Que d'évènements en ce mois d'octobre à venir !

  • Du 2 au 4, je serais à Pragues, pour le MozCamp 2009
  • Le 8 et le 9, je serais aux conférences Paris Web. je crois qu'il reste encore des places, allez-y ! C'est un évènement à ne pas manquer pour les développeurs web, chefs de projets etc. Tous les ans, ce sont des conférences d'excellentes qualités, faites par des vrais professionnels du métier, et organisées par une équipe au top ! Le prix est ridicule (surtout pour une boîte), en regard des connaissances enrichies qui vous seront transmises.
  • Enfin, du 19 au 23, Fabien Cazenave (monsieur Kompozer) et moi allons dispenser des cours sur les technologies Mozilla, à l'université d'Evry. C'est le projet Comete. Une première en France :-)

vendredi, septembre 11 2009

XRX, un doux rêve ?

Tangi vient de publier un billet très intéressant sur une nouvelle façon de faire une application web, une architecture XRX, qui utilise XForms, Rest, et XQuery. Vu de loin, ce triplet à l'air sexy, et fait renaître l'idée de faire du XML de bout en bout, sans avoir à taper une ligne de code "fonctionnelles". Et pour Tangui, cela apporte beaucoup de simplicité par rapport au triptique Javascript/PHP/MYSQL. Sur ce point, je ne suis pas d'accord avec lui.

Lire la suite...

jeudi, juin 18 2009

La technologie Zoomorama

Une fois n'est pas coutume, je vais vous parler de ce qu'on fait dans la boîte où je travaille, Zoomorama, ou plus exactement, de la technologie que l'on a crée ou utilisé.

Lire la suite...

mercredi, juin 17 2009

Des articles intéressants sur hacks.mozilla.org

Zut, j'ai oublié de vous signaler la publication de ma démo sur hacks.mozilla.org, que je vous avez promis. Je ne suis plus au point en matière de teasing, vous avez connu mieux sur ce blog, n'est-ce pas ? :-)

Donc voilà ma démo, à tester avec Firefox 3.5b99 au moins. Si des développeurs spécialisés sur Webkit (Riiiiik !), Opera ou Konqueror, pouvaient jeter un coup d'oeil voir si je peux améliorer ça pour leur navigateur préféré respectif... (Ouai, je m'y prend un peu tard, mais là, je n'ai plus la tête hors de l'eau, tellement ma todo list est lourde, et j'ai un tuba pour éviter de me noyer).

Bon sinon, sur hacks.mozilla.org, il y a des articles que j'ai vraiment aimé jusqu'ici, et finalement bien plus impressionnant que ma petite démo, et que je veux vous faire partager (pour ceux qui ne suivent pas hacks.m.o) :

Et puis il y a aussi ce débat (ici et ) sur la qualité de Theora par rapport à ce qu'on peut avoir dans YouTube par ex. Conclusion, Theora, c'est bon, mangez-en !

Et ce n'est pas fini, mon petit doigt me dit qu'il va y avoir encore de belle demo sur les nouvelles technologies web :-)

jeudi, mai 28 2009

La balise <video> chez Dailymotion

L'adoption du format Ogg Theora fait son chemin : DailyMotion viennent d'annoncer sur leur blog (et via un communiqué de presse) qu'ils vont prendre en charge la balise <video> de HTML5, en particulier avec Firefox 3.5 qui sortira dans quelques jours en RC.

Ils ont ouvert un site en test diffusant les vidéos au format Ogg Theora, openvideo.dailymotion.com à visiter avec Firefox 3.5. Ils ont également fait une page de démonstration montrant les possibilités de l'utilisation de la balise <video>, conjointement avec les autres technologies web comme javascript, css, svg etc...

Qu'un site majeur dans la diffusion de vidéos sur Internet utilise ces technologies, promet un bel avenir à Theora. Bien que les encodeurs actuels pour Theora soient de moins bonne qualité que pour le H264 par exemple, un travail est en cours (sponsorisé notamment par Mozilla), pour les améliorer, tant au niveau de la qualité de l'image, que la taille des fichiers. Voir par exemple une de ces améliorations faite au début du mois.

Pour rappel, Ogg Theora est un format libre et ouvert pour stocker de la vidéo. Pour en savoir plus sur la balise <video>, vous pouvez lire un de mes billets précédents sur le sujet.

Go Theora ! Go !

vendredi, avril 24 2009

Quand une nouveauté CSS en chasse une autre...

Les nouvelles propriétés CSS qui arrivent dans nos navigateurs permettent de faire des choses plus sophistiquées mais de façon plus simple qu'avant.

J'avais déjà montré cette facilité en appliquant des styles d'ombrages et de rotation sur la page d'accueil de jelix.org. Mais il n'y a pas que les sites web qui vont pouvoir profiter de ces avancées, il y a aussi Firefox.

Comme vous le savez certainement déjà, Firefox utilise un langage XML, le XUL, pour son interface graphique et CSS pour le design de cette interface. Je vais prendre un exemple de l'utilisation des nouvelles propriétés CSS dans Firefox : la barre de boutons de la boite de dialogue des extensions, sous MacOSX.

Dans Firefox 3.0, ça donne ça :

toolbar dans Firefox 3.0 sur MacOSX

C'est assez sobre. Pour les arrondis sur les boutons droite et gauche, border-radius[1] est utilisée, et sur tout les boutons, il y a une simple image de fond avec un léger dégradé.

Durant le développement de Firefox 3.5, est arrivé la propriété border-image (Voir un de mes billets sur ce sujet). Un contributeur s'est dit, "utilisons là", pour rendre ces boutons plus jolis. Et les boutons sont devenus ceci, comme on peut le voir dans Firefox 3.1 beta3:

toolbar dans Firefox 3.1 beta 3 sur MacOSX

Comme vous le voyez, avec border-image, on peut faire des bordure plus sympa et assez facilement en CSS. D'ailleurs l'auteur en a profité pour ajouter des "effets" selon l'état du bouton (voir par exemple le bouton "extension" sur lequel j'ai le bouton de la souris enfoncé). Le seul souci de cette approche est que ça utilise pas mal d'images. Déjà, il y a trois types de boutons (gauche, milieu, centre), mais en plus il y a plusieurs états du boutons : relâché, sélectionné, enfoncé, actif etc... Voici par exemple trois de ces images pour le bouton de droite :

images pour réaliser une toolbar dans Firefox

Pour réaliser des bordures complexes, on n'a toutefois pas le choix.

Mais que remarque-t-on sur ces images ? En fait elles ne font que reproduire des effets d'ombres.

Des ombres ? Ça tombe bien, il y a une autre nouvelle propriété dans Firefox 3.5 pour faire des ombres : box-shadow. Et si on l'utilisait ? C'est ce que s'est dit un contributeur. Hop, quelques lignes de css à modifier, suppression de toutes ces images (70ko en moins) et le résultat que vous pourrez admirer dans Firefox 4[2] :

toolbar dans Firefox 3.6a1 sur MacOSX

On obtient quasiment la même chose qu'avec la technique du border-image précédente, mais sans images donc plus léger, avec une manière plus simple de créer et modifier le design.

Notes

[1] ou plutôt -moz-border-radius, cette propriété n'étant pas encore un standard dans CSS3, Mozilla l'a préfixé avec -moz- comme le permet la spécification CSS, tout comme box-shadow

[2] pas sûr que le patch sera intégré dans Firefox 3.5

jeudi, avril 23 2009

Interface de la balise video dans Firefox

Depuis quelques heures, des améliorations sur l'interface utilisateur de la balise video ont été incluses dans le trunk et pour la prochaine beta de Firefox (cliquez sur l'image pour la voir en taille réèlle)

capture de l'interface de la balise video dans Firefox 3.5b4pre

Les améliorations en questions :

  • réglette pour choisir le volume sonore (tout à droite)
  • affichage du temps total de la vidéo
  • affichage du temps écoulé, dans la petite bulle au dessus de la barre de progression, petite bulle qui sert également à aller directement à l'endroit voulu dans le film en la déplaçant.
  • affichage de la progression du téléchargement dans la barre de progression de lecture (je ne sais plus si ça n'y était pas déjà dans la beta précédente)

Bref, on commence à avoir une interface par défaut plutôt complète. Notez que cette interface n'apparaît que si la souris est au dessus de l'élément <video>, et seulement si l'attribut controls est présent.

Ce qui est interressant à savoir, c'est la façon dont cette barre de contrôle est implémentée dans Firefox. En fait, ce n'est pas le code de la balise vidéo qui effectue directement cet affichage, mais un simple composant XBL qui est attaché à cet élément.

Pour rappel, XBL est un langage XML (en cours de normalisation au W3C) qui permet de définir le contenu d'un élément en indiquant les éléments fils (anonymes) à ajouter, ainsi que son comportement, c'est à dire un ensemble de méthodes javascript pour son API, et également des fonctions appelées sur des événements DOM (sur le click etc). Dans un fichier XBL, on peut ainsi définir plusieurs éléments.

Comme on peut le voir dans ce fichier XBL de l'élément video, les contrôles sont en fait des éléments XUL. Et sur les click et autre de ces élements XUL, le code javascript appel l'API native de l'élément video.

Le design est déclaré via une feuille CSS. Dans la feuille de style dédiée, on peut voir que tout est quasiment fait en CSS, que ce soit les arrondis, les couleurs, les opacités etc. Les seules images utilisées concernent juste les symboles play/pause, le dessin du haut parleur, et la bulle du temps écoulé.

Bref, on utilise des technos du web pour implémenter en partie... des technos du web :-)

Mais ce n'est pas tout !

Cette interface par défaut ne vous plaît pas ? Faites une extension qui propose un nouveau XBL en remplacement de l'original ! Ou une autre feuille de style CSS ! Où les deux !

Aaah, c'est beau les technos Mozilla, n'est-ce pas ? :-)

dimanche, février 1 2009

Relativisons les resultats du test acid3

Frédéric Bezies a fait remarquer que Netscape 7.0.1 (vieux de 6 ans) a un meilleur score au test acid3 par rapport à IE8 RC1.

On peut trouver ça dommage et se moquer de IE8, mais il faut quand même relativiser.

Lire la suite...

dimanche, novembre 23 2008

Ma présentation à ParisWeb 2008

Je viens de mettre en ligne les slides de ma présentation à Paris Web 2008. Elle contient un peu plus de précisions et de liens par rapport à la version présentée en live.

lundi, novembre 17 2008

Succès de Paris Web 2008

Je suis sorti ravi des 3 jours de conférences de Paris Web 2008. Un succès sur toute la ligne de mon point de vue. Des conférences très intéressantes, faites encore et toujours par des personnes de qualité, Par exemple, "Accessibilité : des volontaires ?" faite par Stéphane Deschamps et Aurélien Levy fut grandiose, très démonstrative sur l'accessibilité.

Mais le must fut d'avoir pu rassembler des représentants de chaque équipe de développements des principaux navigateurs du marché :

  • Chris Wilson, "Platform Architect " dans le projet Internet Explorer 8
  • Julien Chaffraix, contributeur pour WebKit (Safari)
  • Paul Rouget, tech evangelist chez Mozilla
  • Charles Mac Cathie Neville pour Opera.

Je pense que c'est un événement très rare au monde de pouvoir les avoir tous autour d'une table ronde. J'ai trouvé Chris un peu sur la défensive, mais il y a de quoi, assailli de questions qu'il fut (sans parler de la barrière de la langue). Il faut dire que IE8 rattrape vite son retard, bien que technologiquement parlant, il sera encore en deça de la concurrence, Et il est attendu au tournant par les développeurs web. Chris est l'un de ceux qui poussent à l'implémentation des standards chez Microsoft. Aussi l'avenir de IE est prometteur pour le web.

Vivement Paris-Web 2009 !

PS: pour les slides des conférences, ils seront tous en ligne via le site de paris-web. Un peu de patience donc :-)

jeudi, octobre 30 2008

Venez à Paris Web 2008

Il reste encore des places pour Paris Web 2008 ! Il y a un tas de conférences intéressantes, faites par des professionnels du web de renom (je ne dis ça pas pour moi :-)). Inscrivez vous !

paris web 2008

jeudi, octobre 23 2008

Questions réponses sur l'élement video

Au mois d'aout dernier, Schrep avait écrit un article sur son blog, répondant à certaines questions sur l'existance de cette nouvelle balise video, et surtout sur l'utilisation du format ogg theora par défaut.

Cet article vient d'être traduit en français sur framablog. À lire !

En résumé :

  • La spécification de la balise video n'impose pas un format, tout comme la balise img. Et on se rend compte que seul quelques formats d'images sont vraiment utilisés. Il en sera certainement de même pour les formats video.
  • Il faut cependant promouvoir un format libre, ne nécessitant pas de plugins propriétaires. En effet, ces plugins ne sont que très rarement présent sur les mobiles. Or ce genre de plate-forme est en pleine expansion. Et même sur les desktops, il y a des chances que ces plugins ne soient pas installés. (Note de moi même: flash fait quand même exception)
  • ogg theora n'est pas très répandu, mais une fois Firefox 3.1 sorti et d'autres (200 millions d'utilisateurs), ça le sera très certainement, tout comme cela a été pour le H264, qui n'était pas très répandu il y a quelques années..
  • utiliser un format libre, cela veut dire que n'importe quel navigateur, n'importe quel appareil, peut l'utiliser librement, pas de royalties. Cela veut donc dire aussi que quiconque embarque Firefox, Fennec, Gecko dans son appli ou son mobile, peut utiliser librement ogg theora, peut afficher de la video sans souci. Ce ne serait pas le cas si l'implémentation de Mozilla reposait sur des formats non libres, puisque cela voudrait dire utilisation de bibliothèques non libre, payement de royalties etc. Et cela rendrait Firefox non libre.
  • pas de brevet logiciels à l'horizon sur ogg theora. Mais il peut exister des brevets "cachés". Cependant, c'est la même problématique que pour tout développeur de logiciels. Personne n'est à l'abri. Si cela arrive, Mozilla fera tout pour invalider ces brevets, ou pour utiliser librement le format ogg theora.

Le reste chez framablog

mercredi, octobre 22 2008

Des news sur XBL2

Un billet de Daniel nous donne des informations très intéressantes sur XBL2 :

  • Il est en cours d'implémentation chez Opéra
  • Il est en cours d'implémentation dans Webkit (comme je l'avais déjà évoqué il y a quelques mois, coucou Julien !)
  • Ça intéresse apparemment l'équipe d'Internet Explorer

Concernant Mozilla, je ne sais pas où ça en est. C'est prévu bien entendu, mais apparemment pas encore démarré, Cependant, on a déjà XBL 1 :-)

Si Internet Explorer implémente XBL2 dans un futur proche (IE9 ou IE10), en plus d'Opera, Mozilla et Webkit, ça sera géant pour le web !!! Aller, on croise les doigts !

Pour en savoir plus sur XBL2, voir mes précédents billets dessus :

lundi, octobre 20 2008

Animations CSS, ou SMIL/SVG ?

Daniel demande si on aimerait avoir des propriétés d'animations en CSS[1]. Les développeurs de webkit proposent en effet une spécification pour pouvoir faire des animations en CSS.

Il faut savoir qu'en SVG, nous avons de quoi faire des animations. Une partie de ces balises et attributs proviennent d'ailleurs du langage SMIL, avec quelques trucs en plus.

Alors, pour faire des animations, CSS ou SMIL ?

Avantages de CSS
  • ça a l'air plus simple à écrire, c'est moins verbeux.
  • on peut utiliser la cascade CSS pour redéfinir des propriétés d'animations. Cette redéfinition peut être utile aussi dans les feuilles de style utilisateurs.
  • en théorie, cela fonctionne pour n'importe quel langage XML, puisque CSS n'est pas dédié uniquement à (x)HTML, bien que SMIL 3.0 le permette plus ou moins, mais c'est plus intrusif.
Avantages de SMIL[2]
  • les séquences de transformation et d'animations peuvent être modifiées dynamiquement, de manière plus simple je trouve, puisqu'il suffit d'utiliser les fonctions DOM classiques. Tandis que pour CSS, faut se coltiner le DOM CSS qui n'est pas très pratique je trouve.
  • SMIL est beaucoup plus riche et plus précis (en tout cas,par rapport à l'état actuel de la spécification de webkit)
  • SMIL est du contenu XML, donc utilisable par autre chose qu'un navigateur graphique. Au niveau accessibilité donc, il apporte des informations, permettant de retranscrire l'animation oralement par exemple (même si ça doit être difficile à écouter :-))
Conclusion

Je pense que les animations CSS ont leur place, surtout pour les petites animations qui sont purement décoratives. Pour les animations qui ont plus de sens, une animation dans un tutoriel par exemple, montrant vraiment quelque chose d'informatif, on préférera SMIL. C'est un peu la même chose entre choisir background-image et l'élément HTML img pour afficher une image.

Donc je dis oui aux animations CSS :-)

Notes

[1] Pour ceux qui n'ont pas trop suivi, il est en plein meeting du CSS Working Group au W3C à Mandelieu

[2] je ne suis pas un expert sur SMIL et les animations SVG, donc j'ai pu raté des avantages ou inconvénients sur ces langages

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...

vendredi, août 29 2008

Drag and drop HTML5 dans Firefox

Après les améliorations qui viennent d'être apportées sur le moteur Javascript qui fait repasser Gecko 1.9.1 devant Webkit au niveau des performances de l'execution des scripts JS, voici que Neil Deakin (développeur Mozilla de son état), vient de terminer l'implémentation de l'API drag and drop de HTML5.

On peut donc apporter des fonctions de drag'n'drop dans une page web, tout aussi facilement que ce que l'on peut faire avec des bibliothèques comme jQuery. Sauf qu'il n'y a plus besoin de charger des kilos de scripts JS :-)

Lire la suite...

- page 1 de 9