Amusons-nous avec HTML5 et la balise Canvas

Je me suis un peu amusé avec la nouvelle balise HTML5 Canvas et l'API Javascript associée...
Si vous avez un navigateur récent, vous devriez pouvoir voir et contrôler les flammes :

Sleep (ms) :
Atténuation :
Fire seed :
Black seed :

Je vous invite à regarder le code source de la page pour plus de détails !

Le point sur les nouvelles API HTML 5

Voici le compte-rendu de la conférence "Dans la tête de Peter Lubbers" organisée par Zenika mercredi dernier.

Peter Lubbers est directeur de la formation chez Kaazing, une société spécialisée dans le streaming de données en temps réel pour le web ; leur produit phare, le WebSocket Gateway, exploite au maximum les dernières API de communication proposées par HTML5. Peter était donc l'homme de la situation pour nous donner les dernières nouvelles du front, en attendant la sortie de son livre "Pro HTML5 Programming", prévue pour avril.

La conférence s'organisait autour de 5 points : le bilan des technologies actuelles, les WebSockets, les Server-sent Events, l'objet XmlHttpRequest version 2, et le Cross-document messaging.

Lire la suite...

Java Barcamp #4 : compte-rendu (1/2)

Barcamp_small.pngLe 31 mars dernier, Google France nous faisait l'honneur de nous accueillir pour le 4° Java Barcamp. Leurs locaux place de l'Opéra sont superbes, et correspondent bien à l'image que l'on peut s'en faire, à la fois sérieux et un brin déjantés : couleurs vives, salles communes avec des poufs douillets aux couleurs de la société, et bien sûr les fameuses fiches "Tech on the toilet". J'ai même croisé un panda géant dans les couloirs !

Au niveau des sujets, on a réussi à sortir des marronniers habituels et à s'aventurer sur des sujets plus exotiques comme le Domain Driven Development (DDD), les avancées de HTML5 ou le Cloud Computing.
Pour ma part, j'ai assisté à la séance HTML5, auquel je m'intéresse, puis à celle sur le DDD, dont j'ignorais tout.

(Attention : la plupart des liens ci-dessous pointent sur la spécification HTML5, uniquement disponible sous la forme d'une sympathique page web de 3.8 Mo qui risque de stresser quelque peu votre navigateur...)

Lire la suite...

Opera : HTML5, SVG & SMIL

Je vous invite à visionner cette courte démonstration des technologies HTML5, SVG et SMIL réalisée par Opera Software.

Amusant de voir les derniers soubresauts des standards de rendu et d'animation pour le web, qui tentent vainement de rattraper leur retard sur Flash / Flex (Adobe) et Silverlight (Microsoft).
Car de toute façon, au vu des parts de marché actuelles des navigateurs web, SVG, SMIL et compagnie n'ont aucune chance de réellement décoller tant qu'Internet Explorer ne les supporte pas convenablement. Ce qui n'est pas près d'arriver, au regard du long passé de Microsoft en matière d'ouverture et de respect des standards...

MoreCSS : javascript au secours de CSS

La librairie Javascript MoreCSS permet d'appliquer des fonctions Javascript à des éléments HTML simplement en les stylant à l'aide de propriétés CSS spéciales. Cette approche, bien qu'assez surprenante au premier abord, permet de bénéficier à la fois de la simplicité de la syntaxe CSS et de la puissance du code Javascript.

On peut en revanche regretter que le code du fichier javascript soit obfusqué, malgré la licence Creative Commons...

CSS : "grid-based design"

Le site "960 Grid System" propose une approche intéressante à la mise en page pour le web :

All modern monitors support at least 1024 × 768 pixel resolution. 960 is divisible by 2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40, 48, 60, 64, 80, 96, 120, 160, 192, 240, 320 and 480. This makes it a highly flexible base number to work with.

Il fournit un ensemble de guides pour Flash, Photoshop..., mais surtout une feuille de style CSS facilitant l'implémentation de ce système en HTML, ainsi que le montre la page de démonstration.

De son côté, Google fournit également un framework CSS, basé sur une grille de 950px : Google CSS Blueprint.

Mais bien sûr, vous pouvez toujours créer votre propre système de grille grâce au "Grid Designer".

CSS : cross-browser "min-height" et "min-width"

Voici les propriétés CSS à utiliser pour obtenir les effets "min-height" et "min-width" portables sur tous les principaux navigateurs :

Pour la hauteur :

  1. min-height: 100px;
  2. height: auto !important;
  3. height: 100px;

Pour la largeur :

  1. min-width: 100px;
  2. width: auto !important;
  3. width: 100px;

Il faut bien entendu remplacer "100px" par votre valeur.
Des explications sur leur fonctionnement sont disponibles sur le blog original.

W3C : 130 millions de DTD, et moi, et moi, et moi...

Le W3C, organisme qui définit les normes d'Internet, lance un cri d'alarme : il ne pourra bientôt plus servir toutes les demandes de DTD et de Schémas XML...

Lire la suite...