Chrome et Firefox sur mac, perfectibles performances.

Bien que je sois un inconditionnel utilisateur de Chrome sur mac, je m'étonne de l'écarts de performance entre ce navigateur et Safari le navigateur d'origine de Mac OSX. En effet en faisant des test sur une interface web utilisant Flash et javascript je me suis rendu compte que Chrome accusait d'un certain retard sur Safari en terme de performances dans la gestion de Flash et du Javascript. En testant d'autre navigateurs j'ai constaté que c'était également le cas de FireFox. Pour certain rendu Chrome et Firefox utilisaient près de 90% du CPU au lieu de 30% pour Safari. Opera, quand à lui se rapproche de Safari avec une consommation légèrement supérieure.

Pour en avoir le coeur net, vous pouvez faire un test. Jouez une animation Flash assez gourmande devant une image bitmap d'une assez grand taille. La propriété wmode du swf doit être transparente.

Résultat Chrome consomme énormément de CPU, si vous redimentionnez la page étrangement la consommation de cpu va baisser mais sans atteindre la quiétude d'un Safari. Mon hypothèse est que Chrome recalcule la superficie totale de l'image a chaque frame de l'élément Flash, au lieu de ne recalculer que la zone que celui ci occupe. Lorsque l'on redimentionne la fenêtre, Chrome redimentionne l'image de fond sans appliquer de traitement antialiasing, ce qui fait que l'image n'est pas totalement nette. Rendre une image sans traitement antialiasing est moins consommateur de CPU, la différence est flagrante quand l'image est générée 24 fois par seconde. Voir ci-dessous les performances de chaque navigateur.

Chrome rendu de base 

Chrome après rendimentionnement

Pour Firefox il se produit d'étranges phénomènes, selon la dimension de la fenêtre la consommation du cpu passe du simple au double. En réduisant la fenêtre, passé un certain seuil la consommation s'emballe. Et la, je n'ai aucune explication.

Firefox qui en chie (mystérieusement)

Firefox qui gère

Opera

Safari

Safari et Opera restent inébranlable dans leur traitements, le processeur ne s'emballe pas. Alors s'agit il alors d'une optimisation que les gars de chez Google et Mozilla auraient zapé dans la course? Ou bien serait ce parce que Apple conserve une certaine avance sur l'utilisation de ses propres outils ? N'empeche que Opera a bien réussi a talonner Safari. En définitive je conseille de rester sur Safari, le rendu des animations, la gestion du CSS3, du Flash… Même si pour moi Chrome est une merveille en terme d'ergonomie, sur un point purement technique Safari reste un maître.

Blocs aux coins arrondis de taille variable sans CSS3

Bon parce que ce blog est aussi mon fourre tout, voici un billet qui n'a rien a voir avec mes précédents articles. Voici donc un petit tutoriel HTML/CSS, pour tous ceux qui ont le soucis de rendre leur site web soigné ET performant.

Et oui je suis un grand fan des possibilités qu'apporte le CSS3. En 2 lignes il est possible d'arrondir un bloc et de lui mettre une ombre portée ce qui évite un travail fastidieux dans Photoshop ou Gimp. Malheureusement outre le fait que le CSS3 n'est pas encore pleinement géré dans tous les navigateurs, qu'il faille rajouter des "-webkit" et "-moz" pour que chaque navigateur compatible l'interprète… Et bien le CSS3 consomme encore pas mal de ressources. Si vous comptez réaliser un bloc de taille variable et qui en prime soit animé, il y a des chances que votre animation manque de fluidité, surtout sur les tablettes et smartphones. Ainsi donc voici un tuto basique qui vous montrera une possibilité parmi tant d'autre de créer un bloc aux bords arrondis, de taille variable, et qui s'anime de manière parfaitement fluide.

Tout d'abords réalisez votre bloc arrondis dans votre logiciel de dessin préféré.

L'art dans la réalisation d'un bloc de taille variable réside dans les propriétés repeat-x et repeat-y du CSS. il y a des zones dans les bordures qui seront dupliquées selon ces 2 axes. Pour ma part j'ai créé un bloc avec un degradé jusqu'à un certain niveau, je ne pouvait donc pas placer ma zone de duplication ou bon me semblait.

Disposez donc les règles qui vont délimiter les différentes portions du bloc. Si vous souhaitez que la taille du bloc ne varie que sur un axe alors découpez votre bloc en 3 morceaux et non en 9 comme je l'ai fait. La partie centrale du bloc, celle qui sera dupliquée doit toujours être la plus "mince" possible, du coup 1 pixel. Une fois vos règles positionnées le découpage peu commencer, faites 1 fichier pour chaque morceau. Attention certain morceau doivent avoir la même hauteur ou largeur sous peine d'être décalés.

Une fois le découpage effectué, il faut passer aux chose sérieuses et mettre le main dans le code.

Codez moi donc un joli tableau, de 3 ou 9 case selon le nombre d'axe que vous souhaitez faire varier la taille. Dans chaque case, mettez la taille de votre image, ainsi que l'image en question en background. A la fin n'oubliez pas de mettre les style de margin et de padding à 0, sous peine d'avoir des écarts entre les cases.

Voila, normalement vous y êtes et pour faire varier la taille de ce bloc, il ne reste plus qu'a jouer sur la taille de la case centrale de votre tableau.

- C'est bien beau tous ça mais ou je met mon contenu dans ce bloc?

Ahah, en effet, l'astuce réside dans la création d'un bloc "div" en dessous de votre joli tableau, et ensuite de lui affecter un margin-top négatif pour le remonter et le superposer devant votre tableau. Mettez votre contenu dans ce bloc et n'oubliez pas de rajouter un style "position:relative;" pour que IE ne fasse pas sa crise.

Voilà, vous avez normalement un joli bloc de taille variable, personelement j'anime ensuite ce bloc via JQuery, et ça marche nikel. J'espère avoir été assez clair dans ce petit tuto qui est aussi mon premier :) Je vous met un zip avec les sources via ce lien. N'hésitez pas à posez vos question si vous en avez. Allez bon courage.

Bande de Veinards

A tous ceux que je croyait perdu, vous avez de la chance, car oui, l'exposition "La ville mobile" reste ouverte jusqu'au 3 mars 2011 à la cité du Design de Saint Etienne. Pour tous ceux qui auraient raté l'évenement, je vous encourage vivement à aller y faire un tour si vous êtes dans la région. Pour vous motiver voici un avant goût de ce que vous y trouverez.

Mes photos

Parce que j'aime la photo,et que je suis très narcissique voici quelques clichés que vous pourrez trouver sur mon photostream Flickr

Où chercher le bonheur ?

Combien d'entre nous ont la conviction de faire un métier utile ? A t'on besoin d'une raison pour se lever le matin et vivre une journée en tous points similaire à la précédente ? Certains me diront que non et qu'il faut se contenter de ce que nous avons, car d'autres n'ont pas notre chance… Je ne suis pas de ceux là. Face au rythme oppressant que nous impose la société il est difficile de prendre le temps de ce poser ces questions pourtant nécessaire. A quoi cela sert il de courir, si on ne sait même pas ou l'on va ? Beaucoup d'entre nous ne sont pas heureux, ou pleinement épanoui. La véritable question est pourquoi ? Que nous manque t'il ? Et que faut il faire pour enfin trouver son bonheur ? Monter sa société ? Gagner au loto ? Achetez une maison avec un grand terrain ?

Si la recette du bonheur existe, ne pensez vous pas que l'on ai déjà pensé à vous la vendre ? Tous les jours, on nous vend des produits censés nous rendre heureux. Le tendance, le confortable, le pratique, le spacieux, le compact, le léger, l'indispensable… Aujourd'hui, toutes ces notions, parce qu'elles ont su brasser de l'argent, ont rendu flou celle du bonheur. Le bonheur est un peu comme ces légendes que l'on racontait autrefois. On en parle en se demandant si il a un jour existé. On l'imagine sans le voir, on se dit qu'il nous attend peu être dans une autre vie. Le constat est nombre d'entre nous, ne savons pas vivre heureux.

Pourtant le bonheur peut être simple, bien plus simple et accessible que nous l'imaginons. Le bonheur ne s'achète pas avec un crédit sur vingt ans. Le bonheur est un peu comme la plante du fond du jardin que nous ne prenons pas le temps d'entretenir. Il est la, sous nos yeux, mais nous sommes trop pressé pour y faire attention. Je ne pense pas que le bonheur ait une forme universelle, mais que la recherche du bonheur est une quête personnelle, dont seul vous avez la réponse.

Je vous invite donc à prendre le temps de chercher par vous même ou se cache le bonheur. Recherchez au sein de vous, le dernier moment ou vous avez le souvenir d'avoir été heureux. De cet instant, identifiez les raisons qui ont fait que vous étiez heureux. Imaginez vous un quotidien articulé autours de ces raisons, dans un monde détaché de toutes les contraintes qui vous pèsent. De cette vie rêvée je vous invite a penser plus globalement, à un système de vie ou les autres personnes puissent profiter elles aussi de ce bonheur afin que celui ci ne reste pas un privilège. Si cette réflexion a aboutie n'hésitez pas à partager vos commentaires sur votre vision d'un monde dans lequel chacun pourrait être heureux. Je ne saurait d'ailleurs que trop vous conseiller cette ouvrage : "La volonté de paresse, de Philippe Godard, Paul Lafargue, Raoul Vaneigem, Pauline Wagner" qui à su mettre des mots sur ce que je ressentais.

Qui suis-je?

Développeur pour une société d'activités en ligne pour les enfants de 3 à 6 ans. Je cultive ma passion pour l'informatique appliquée aux enjeux culturels, sociaux et écologique de notre époque. L'ergonomie, la performance, et l'économie des ressources sont des points cruciaux dans mon travail car il sont nécessaire pour produire une application agréable à utiliser et respectable de l'environnement. Ma vocation est de faire en sorte que l'outils informatique puisse être abordé simplement, et librement afin de limiter le stress lié à l'utilisation de ces outils et de se dégager du temps pour les moments importants de la vie.

Voici quelques applications que j'ai pu développer.


Interface de gestion interne de l'entreprise en JAVA/GWT



Interface de suivi des dépenses clients en JAVA/GWT



Interface de connexion et de jeu pour les enfants en HTML/JavaScript (Jquery)