Katamari Hack : un Katamari Damacy en HTML5

Katamari Damacy est un jeu japonais totalement déjanté dans lequel vous contrôlez un petit prince de l’univers dont le but est de faire des grosses boules (des « Katamari« ). Chaque partie démarre avec une petite boule que vous faites roulez et sur laquelle viennent se scotcher les objets sur lesquels vous roulez. Plus vous ramassez d’objets, plus votre boule grossit, et plus vous pouvez ramasser de nouveaux objets. Un super jeu, avec un univers très coloré et très drôle, avec un premier opus sorti sur Playstation 2 en 2004 et une dernière version sortie sur iPhone en 2008.

Katamari Damacy

Si je vous raconte tout ça, c’est parce qu’une petite équipe de développeurs à recréé le concept du jeu en HTML5, dans un bookmarklet appelable depuis n’importe quelle page web. Ca s’appelle Katamari Hack (http://www.kathack.com/), et c’est une magnifique démo de ce que peut faire HTML5, et plus précisémment Canvas et les transformations CSS3. Même si ça rame un petit peu sur des grosses pages (genre… ici). Pour l’essayer, vous pouvez cliquez sur l’image ci-dessus. N’oubliez pas d’activer la musique pour retrouver l’ambiance du jeu original. Naaa-na-na-na-na-na-na-na, na-na-na-na-na-naaaaah !

La page 404 de Google

La page 404 de Google

La semaine dernière, Google a mis à jour sa page 404. « Hein quoi ? Google a une page 404 ? » Avec plusieurs milliards de pages vues par jour, il y a forcément bien un moment où un petit pourcentage d’internaute se retrouve face à une URL obsolète. La page en elle même est déjà assez rigolote, avec le langage technique commenté en gris clair « 404. Ca c’est une erreur ». Mais surtout, comme souvent avec Google, le code source de la page est un petit bijou d’optimisation d’intégration.

Le code source de la 404 de Google

Voici une petite liste non exhaustive des pratiques de Google permettant d’avoir une page super optimisée et totalement standard :

  • Doctype HTML5, carrément plus courte que les anciennes Doctype
  • Pas de quotes autour des attributs dans les balises
  • Styles compressés en une ligne dans une balise <style>
  • Image du robot encodée en Base64 directement dans les styles
  • Lien et image débutant par « // », relatifs au protocole de l’URL, permettant d’accéder à la page en HTTP ou HTTPS
  • Pas de <head>, pas de <body>
  • Pas de fermeture des balises <p>

En temps normal, ça ferait vomir plus d’un intégrateur pour l’intégration d’un site. Ce serait aussi un peu risqué pour la compatibilité entre navigateurs avec un design plus complexe. Mais pour une page aussi simple, et en particulier pour une 404, tous ces choix d’intégration sont on ne peut plus pertinent. Bien joué, Google, bien joué.

Adobe Wallaby et sa conversion Flash/HTML5

WallabyEntre le succès d’iOS et toute la com’ autour d’HTML5, Adobe a bien du soucis à se faire pour l’avenir de Flash. Il y a quasiment 1 an, Steve Jobs publiait ses pensées sur Flash, fermant définitivement tout espoir de voir le plugin d’Adobe apparaître un jour sur la plate-forme d’Apple. Kevin Lynch, responsable technique chez Adobe, répondait quelques jours plus tard « [qu’ils avaient décidé] de s’éloigner de l’iPhone et de l’iPad aussi bien pour le Flash Player que pour AIR« . Retournement de situation hier, avec la sortie en version prerelease d’Adobe Wallaby, un convertisseur d’animations Flash en HTML5 pour Webkit. Lire la suite de mon premier essai de Wallaby

Firefox et sa mise à jour alarmiste

Firefox et le plugin Flash
Si vous avez lancé Firefox aujourd’hui, vous avez eu droit à une mise à jour de sécurité, en prévision du concours de hacking Pwn2Own. Comme d’hab, les principales failles du navigateur viennent du plugin Flash. Bon courage à Adobe pour convaincre le grand public qu’il y a du bon en Flash.

Les Trois Lois du Développeur d’Apple

  1. Un développeur ne peut porter atteinte à Apple, ni, restant passif, permettre qu’Apple soit exposé au danger.
  2. Un développeur doit obéir aux ordres que lui donne Apple, sauf si de tels ordres entrent en conflit avec la première loi.
  3. Un développeur doit protéger son existence tant que cette protection n’entre pas en conflit avec la première ou la deuxième loi.
Cet article est la traduction de Apple’s Three Laws of Developers du blog d’isaiah. Et si vous n’avez rien compris, go wiki.

Des démos WebGL

Vendredi dernier, Chrome 9 est sorti avec pour la première fois dans un navigateur en version finale : WebGL. Si comme moi vous vous étiez jusqu’alors désintéressé de WebGL (la flemme d’activer WebGL dans Chrome ou Firefox 4), voici l’occasion de se rattraper avec cette petite sélection personnelle. Pour voir ces démos, vous aurez besoin de Chrome 9 ou Firefox 4 (beta).

Google Body

Google Body : Après la cartographie Terrestre, Google a lancé en décembre dernier cette application en ligne permettant d’explorer le corps humain. Grâce à WebGL, vous pouvez tourner le corps de la charmante cobaye sous toutes les coutures, zoomer à travers les différentes couches du corps humain pour faire apparaître nos différents organes.

Quake II WebGL

Quake 2 : En avril 2010, deux illuminés se sont mis en tête de faire un portage WebGL de Quake 2. Résultat : le jeu mythique d’ID Software est désormais partiellement jouable dans un navigateur, sans aucun plugin à installer. ID Software avait déjà sorti en 2007 Quake Live, une version jouable dans un navigateur de Quake III Arena, mais il fallait obligatoirement installer un plugin pour y jouer. Des fans ont déjà réalisé des démos de portage de Quake III en WebGL (Copperlicht Demo Quake 3 Level et Q3Tourney2). De là à rêver d’une version officielle et jouable complète en ligne avec WebGL, il n’y a qu’un pas (que je fais en bunnyhop doublé d’un rocket jump sans hésiter).

Minecraft WebGLMinecraft : Bon OK, ce n’est pas LE Minecraft, mais juste une démo d’un moteur 3D qui ressemble à Minecraft. Mais quand même, l’idée de pouvoir passer sa vie dans une mine pour construire le PlanetExpress de Futurama, ça fait rêver non ?

Nine Point FiveNine Point Five est un site permettant de visualiser les tremblements de terre au cours de ces 30 dernières années. Cliquez sur une des entrées sur la droite pour visualiser le séisme et sa magnitude.

Collectibles PainterCollectible painter vous permet de créer votre propre figurine.  La 3D n’est pas forcément très poussée, mais l’expérience est quand même sympa.

WebGL FieldsWebGL Field est une simple simulation de champs (agricole, hein, pas de formulaire, tsss).  Mais avec un petit effet de flou, la lumière, et le vent qui balaye chaque brindille, ça donne un bon aperçu des capacités de WebGL.

Aquarium WebGLAquarium est une démo qui porte bien son nom. Des petits poissons qui tournent dans leur bocal. Mais du coup, ça donne une bien chouette démo avec pleins d’effets 3D et des animations calculée par votre navigateur.

Voilà pour ma petite sélection personnelle. En farfouillant encore un peu plus sur le web, vous pourrez trouver des tonnes d’autres démos, comme par exemple sur le site officiel de WebGL, le célèbre Flight of the Navigator des gens de Mozilla, ou encore d’autres démos répertoriées par Google.

L’hypocrisie de la navigation privée

La génération actuelle de navigateur a vu apparaître une nouvelle fonctionnalité très attendue des internautes : la navigation privée, aussi appelé « private browsing » en anglais, ou « porn-mode » par le commun des mortels. Ainsi, on peut se vider les *bip* sans avoir à vider son historique. Mais comment font les navigateurs pour mettre ça en avant ?

Firefox

Opera

Chrome

Safari

Internet Explorer

Heureusement que cette parodie des publicités Microsoft rétablit un tout petit peu la vérité.

IBM : « They were there »

http://www.youtube.com/watch?v=XrhDaAmn5Uw

A l’occasion de son centième anniversaire, IBM a fait un petit documentaire sur son histoire, sa vie, son oeuvre. Ca aurait pu tourner à l’auto-promo sans intérêt, mais au lieu de ça, c’est une immersion complète dans l’informatique des années 50 à nos jours. Donc si vous avez 30 minutes, vous pourrez voir comment on faisait avant pour réserver un billet d’avion sans système informatique, les propositions graphiques concurrentes des code-barres ou encore à quoi ressemble la femme qui a inventé la carte-mère. Oh, et la musique est de Philip Glass.

PS : Je sais que ça n’a aucun rapport avec l’intégration HTML (à part peut-être le type qui tient une pancarte « INTEGRATION IS THE LAW » à 9:54), mais j’ai trouvé ça très très bien, alors je partage. Nah.

Ce soir sur M6

L'amour est dans le <pre>

Mes prédictions pour 2011

Ca y est, on y est ! Bonne année, bonne santé ! Meilleurs voeux, 1920×1280, tout ça, tout ça… Bien décidé à mettre à jour ce blog plus régulièrement, je me prête au jeu des prédictions pour l’année 2011, mais pour ce qui touche plus ou moins à l’intégration web.

1. Vers une meilleure répartition des navigateurs

Je vais prendre le 30/30/30

Si on regarde les statistiques des navigateurs de ces 2 dernières années, les chiffres sont clairs : Internet Explorer chute, Firefox stagne, et Chrome grimpe à toute allure.  Du coup, c’est pas bien difficile de deviner la tendance pour l’année prochaine. Mozilla va poursuivre sa non-progression, le retard pris dans la sortie de Firefox 4 et la lourdeur du logiciel n’aidant pas. Microsoft va continuer sa dégringolade, et l’adoption de IE9 (nécessitant obligatoirement Vista ou 7) risque d’être très difficile. Tout ça au profit du petit dernier, Chrome, qui va continuer sa croissance impressionante. On arriverait ainsi à une répartition de 30/30/30 entre les 3 principaux navigateurs. Les 10% restants se répartiraient majoritairement entre Safari (ultra populaire grâce à l’iPhone) et Opera.

2. L’arrivée des applications web

HTML5 say tro supair

Je me réjouis du succès des applications mobiles (iPhone, Android) ces dernières années. Mais au fond de moi, je suis convaincu que l’avenir est à l’application web. Un seul code compatible avec tous les navigateurs récents, pour toutes les plate-formes. Si 2010 a été une année plutôt théorique pour HTML5, 2011 sera l’année de la mise en pratique. Du coup, je sens une recrudescence dans l’arrivée de web-apps, consultables offline grâce aux préconisations du W3C. Le site Deezer a déjà annoncé migrer en partie vers une solution HTML5 (sauf pour la lecture audio). De son côté, Google a lancé tout récemment son Chrome Web Store qui permet dores et déjà de distribuer et vendre (pour l’instant aux US uniquement) des applications web. Tout ça bien sûr en préparation de la sortie cette année de Chrome OS, « l’ordinavigateur » de Google. Finies les applications desktop : place au cloud, au code universel et à HTML5.

3. L’explosion des navigateurs mobiles

iBoard : Ceci est une révolution

En 2010, Apple a fait renaître avec l’iPad une plate-forme jugée morte depuis 2 décennies. Les modèles concurrents commencent à se multiplier, nulle doute que la tendance va se poursuivre en 2011, avec très certainement la sortie de l’iPad 2. Mais surtout, le web va vraiment devenir mobile avec la démocratisation des smartphones chez tous les opérateurs à des prix plus accessibles pour le grand public. Nintendo pourrait aussi peser dans la balance avec la sortie en début d’année de la 3DS, petite soeur de la DS avec un écran 3D, un système d’exploitation multi-tâches et un navigateur web intégré.

2010 : une année en navigateurs

Nous sommes le 31 décembre 2010, et nous voici à l’heure quasi-obligée du bilan. L’année dernière, au même moment, je ne savais pas ce qu’était une vuvuzela, je ne jouais pas à Minecraft, je n’avais pas de compte Twitter ni de blog, et encore moins d’iPad.

Côté intégration web, 2010 a été l’arrivée massive d’HTML5, CSS3 et autres joyeuses nouveautés. IE6 passe doucement sous la barre des 5% d’utilisateurs, IE7 sous la barre des 10%, et l’avenir s’annonce presque heureux si on oublie quelques instants IE8 et IE9. Pour la première fois, j’ai utilisé abusivement du CSS3 dans des projets clients, ainsi que certaines API HTML5 (File, Drag&Drop) dans des projets internes (promis je vous en dit plus l’année prochaine). J’ai aussi pour la première fois réalisé des wireframes complets de sites web en HTML, en oubliant définitivement la case Powerpoint. Et en cette toute fin d’année, j’ai travaillé sur des maquettes graphiques de grands comptes directement dans le navigateur, en mettant quasi-définitivement Photoshop de côté. Bref, je sens qu’il fera bon être intégrateur en 2011.

Reste que si la course au HTML5 est lancée, et que les fabriquants de navigateurs utilisent ce terme abusivement pour vanter les mérites de leurs dernières betas, l’année est restée relativement calme au niveau des sorties officielles de versions de navigateurs. Calme ? Oui, mais pas pour tout le monde…

Plus fort qu'un Final Fantasy, Chrome est déjà en version VIII

Le 31 décembre 2009, Chrome était en version 3. Le 31 décembre 2010, Chrome est en version 8. Et les betas des 9 et 10 sont déjà bien avancées. Et tout ça sans aucun retéléchargement d’exécutable et réinstallation complète du navigateur (hein Firefox), et même sans aucun redémarrage complet de la machine (hein IE9 Preview). Du coup, ce versioning n’a plus vraiment de sens : il aura fallu 5 ans à Microsoft pour passer d’IE6 à IE7, et seulement 2 mois à Google pour passer de Chrome 6 à Chrome 7. Mais les résultats sont là pour les internautes : Chrome est passé de 5% d’utilisateurs à environ 15%, là où Firefox stagne depuis deux ans autour de 25%, et Microsoft continue sa dégringolade de 55% à environ 45%.

Sur ce, je souhaite une très bonne année à mes 3 ou 4 lecteurs. Et si vous devez prendre une résolution pour 2011… dites au moins 1920×1280. Ca fait 10 ans que tout le monde fait la blague avec 1024×768, il serait peut être temps de vous mettre à jour, vous aussi.

L’évolution des technologies web

PS : Joyeux Noël/Kwanza/Hannukah et bonne année !

Joyeux Halloween !

Sa-sa-sa-sammmy !

Pour Halloween, HTML, CSS et Javascript ont décidé de se déguiser.

HTML s’est déguisé en Javascript :
<div id="citrouille" onclick="alert('Bouh !');"></div>

Javascript s’est déguisé en CSS :
var citrouille = document.getElementById('citrouille');
citrouille.style.color = "orange";
citrouille.style.backgroundColor = "black";

Et CSS s’est déguisé en HTML :
#citrouille:before {
content: "Joyeux Halloween !";
}

Joyeux Halloween à tous !

Cet article est la traduction de Happy Halloween chez CSS-Tricks. Je n’ai aucun mérite pour l’ingéniosité de ce code. Je suis même super jaloux en fait de pas avoir trouvé ça par moi même…

L’actu de la semaine (vol.1)

La semaine dernière, j’étais en vacances. Du coup, plus de Twitter, Reader, Gmail, etc… Du coup, j’ai passé mon dimanche après-midi à tenter de rattraper tout ça. Plutôt que de pourrir la timeline de mes gentils followers sur Twitter, voici un bref résumé des articles qui m’ont plu et que j’aurais sans doute Tweeté.

Pour commencer, une citation toute bête vue, mais tellement vraie, chez l’excellent blog de 37signals :

L’idée qu’on puisse faire un site web sans connaître HTML me retourne la tête, car c’est comme construire un immeuble sans savoir ce qu’est une brique. Vous pouvez être un magicien des CSS ou vous pouvez connaître les bases, mais vous devez au moins avoir un savoir de base sur vos matériaux de construction.

Voir le reste des articles

Les logos de Google font la nique à Firefox

Ce matin, tout le monde s’est réveillé en découvrant sur Google un logo pour le moins rebondissant. Ce week-end, Google avait déjà lancé un premier logo animé à l’occasion du 25ème anniversaire de la découverte des molécules de carbone. Sauf qu’aujourd’hui, tout le monde se demande en quel honneur on a le droit à ce logo animé ? Tellement que « google logo » et « google balls » sont en ce moment les 2 premiers sujets des « Hot trends » sur Google.

Certains pensent que ce logo est là pour vanter les mérites d’HTML5. Sauf que ce logo n’a rien à voir avec HTML5. Quelques divs et des border-radius en CSS3 pour recréer le logo, et un bon gros javascript pour animer le tout, et le tour est joué. D’autres pensent que c’est pour l’anniversaire de John Dalton, à l’origine des tests permettant de détecter le daltonisme. Sauf que son anniversaire, c’était hier.

De mon côté, je pense que Google en profite surtout pour démontrer la rapidité de son navigateur Chrome. En effet, en se cantonnant à des technologies déjà en place depuis des années (HTML et Javascript), Google démontre la rapidité d’exécution de son moteur Javascript. Si l’animation fonctionne également sur Safari, Internet Explorer 8 et Firefox, ces derniers n’offrent pas une animation aussi fluides. En mai dernier, Google avait déjà créé la panique chez les utilisateurs de Firefox avec son logo Pacman, jouable et sonorisé. Sur Firefox, les sons du logo continuaient de jouer même lorsque la fenêtre ou l’onglet étaient en arrière plan. Le site de support de Firefox avait été submergé de messages d’incompréhension.

Combien d’heures ont été perdues sur IE6 ?

Vendredi 27 août dernier, nous avons pu fêter les 9 ans d’Internet Explorer 6. Enfin, fêter, c’est un bien grand mot. Ce serait plutôt comme l’anniversaire d’un arrière grand-père super riche dont on n’attends qu’une chose… Et à l’heure où beaucoup prônent la mort d’IE6, il est l’heure de faire les comptes. Avec plusieurs centaines de milliers de développeurs web à travers le monde, avec plusieurs heures par semaine à s’arracher les cheveux, combien d’heures la planète entière a-t-elle perdue sur IE6 ? Découvrez la réponse en cliquant sur la grand-mère.

Si seulement on avait eu du blanco pour corriger les erreurs d'IE...

Combien d’heures ont été perdues sur IE6 ?

Les puces pas carrées de Firefox

Carré, Carrey, pas carré

La semaine dernière, j’ai rencontré une joyeuseté de Firefox. A priori, il y a un code magique qui fait que sur une liste avec des puces carrées, ces dernières ne sont pas toujours vraiment carrées. Une fois sur [INSERT_RANDOM_NUMBER_HERE], on se retrouve avec un semblant de carré ratatiné (un rectangle, quoi). Peu importe la doctype, seul le code suivant suffit.

<style>
  li { list-style:square; }
</style>
<ul>
  <li>Un</li>
  <li>Deux</li>
</ul>

Je n’ai pas trouvé de solution pour corriger ce problème. Par contre, la bonne nouvelle c’est que c’est corrigé sur les nouvelles beta de Firefox 4. C’est déjà ça.

Flash et son bug des fenêtres pas redimensionnables

Si comme moi vous faites du Flash de temps en temps, vous vous êtes sûrement déjà arraché les cheveux avec certaines horreurs de l’interface du logiciel d’Adobe. Hier, c’est un de mes collègues qui a rencontré le problème suivant sur lequel j’étais déjà tombé.

Parfois, certaines fenêtres contextuelles (comme la console de sortie, ou la fenêtre de code) deviennent anormalement hautes, et dépassent le bas de l’écran. Il est alors impossible de les redimensionner car le coin bas-droite de la fenêtre est désormais inaccessible. Sous Mac, avec Flash CS3, on peut facilement redimensionner la fenêtre par en haut. Par contre, sous Windows 7, avec la CS5, c’est à priori impossible. Vous aurez beau cliquer sur tous les boutons, masquer ou réduire la fenêtre, rien n’y fait. Rien ? Si vous suivez les étapes suivantes, et uniquement dans ce cas là, vous pourrez vous en sortir comme par magie. Vous avez le droit de devenir rageux au passage.

Flash et son bug de redimensionnement des fenêtres

C’est bien sûr totalement la qualité attendue d’un logiciel professionnel qui coûte 837€. Et ça encore, c’est rien comparé aux énormes erreurs qui jonchent tous les solutions de la suite Adobe, dont vous pouvez vous délecter sur l’excellent blog Adobe UI Gripes.

Gmail et les marges sous les images

Le bug des marges avec les images dans Gmail

Depuis mai 2010, Gmail affiche une marge sous chaque image. C’est bien embêtant puisqu’un e-mail est composé principalement d’images, de tableaux et d’offres pour du viagra. Heureusement, il y a une solution toute simple proposée entre autres par CampaignMonitor. Il suffit d’ajouter sur chaque image concernée un style="display:block;" directement dans votre balise img. Vous obtiendrez alors quelque chose comme ça : <img src="ch34p_v14gr4.jpg" style="display:block;" />. Tadam !

Ce problème n’est pas directement lié à Gmail, mais à HTML5. En effet, en passant une page en doctype HTML5, les navigateurs affichent différemment les images, probablement en prenant en compte une hauteur de ligne (line-height) différente.

Le robots.txt de Last.fm est drôle

En plus d’être un très bon service, le site Last.fm fait preuve d’humour, jusque dans son fichier robots.txt. Après quelques règles classiques interdisant l’accès à certaines rubriques du site, on y trouve les 3 lignes suivantes.

Disallow: /harming/humans
Disallow: /ignoring/human/orders
Disallow: /harm/to/self

Il s’agit bien entendu d’une référence aux Trois lois de la robotique énoncées par Isaac Asimov. Son auteur, Jonty Wareing, a officialisé sur Twitter la découverte de son easter-egg il y a quelques heures. Le code était en ligne depuis 5 mois !

« Articles plus récentsArticles plus anciens »