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)

Compte rendu de la conférence "Mobilité des villes" Biennale du Design Saint Etienne, Thème : La téléportation – 20 novembre 2010

La première partie de la conférence à été ouverte par l'intervention du maire de la ville de Saint Etienne : Maurice Vincent, accompagné de l'ancien maire de Curitiba (Brésil) : Jaime Lerner. La conférence fut (brillamment) animée par Constance Rubini.

Dans cette amphithéâtre futuriste qu'est l'auditorium de la cité du design l'ambiance est au préparatifs. Il est 13h 45, je suis un peu en avance et cela ce voit car la salle est vide d'auditeurs. Chose qui ne tarda pas à s'inverser, la conférence attira de nombreuses personnes que je devine designers ou étudiants en design à leur look soigné et leur gadgets issu d'une certaine firme à la pomme croquée. Les premiers intervenants s'installent, et je demande une feuille de papier à un jeune étudiant en Desgin originaire du Brésil. C'est à lui que je dois ce compte rendu, car c'est sur cette feuille que j'ai pu noter assidument tous les détails de ces 2 heures 30 de conférence.

La conférence commence, Constance Rubini ouvre le dialogue en posant une intrigue qui par sa formulation allait extirper tous le vocable qu'avait ces deux interlocuteurs sur la passion qu'ils avaient en commun : La passion de leur ville. Constance, leur demande alors en quoi leur cursus définissait leur approche de la ville.

Maurice Vincent emboite le pas sur sa propre approche qu'il qualifie d'économique, en évoquant le lien entre l'impact macro économique de la mondialisation dans la définition des villes modernes. Son constat était que la mondialisation allait vite, qu'elle échappait ainsi à notre contrôle et que ce système économique avait son équivalant dans la démographie des villes : Il s'agit du phénomène de « métropolisation ». L'expansion des villes non contrôlé, qui à pour principale conséquence l'étalement urbain.

Jaime Lerner intérvient alors, en évoquant sa propre expérience de gouverneur, face à ce problème majeur qui semble frapper toutes les métropoles actuelles. Il nous explique que chaque ville est unique, et a un « Design » particulier. Chaque ville procède à sa propre expansion. Cette expansion peut être schématisé avec un simple stylo dans un exemple qu'il nomme « Drawing the City » . Apparaît alors par de simples croquis, une description claire ou l'on vois dessiné différentes « structures de croissance » des villes, Curitiba dont il était responsable, et d'autre comme Rio. Le but de ces schémas simplistes étaient de nous faire comprendre que chaque ville est un cas de figure unique, et que une seule solution ne peut pas s'appliquer uniformément à toutes les villes. Ces schéma nous montrent une chose très importante, c'est que la forme de ces ville qu'il dessine doit être maitrisé. Une ville dont on ne maitrise pas la forme, est une ville dont on ne maitrise ni l'expansion, ni la circulation de sa population et c'est donc une ville sujette à son étouffement.

Quartiers défavorisés de Caracas

Jaime Lerner nous montre, par le biais d'un autre schéma représentant une torture, que lorsque cette expansion suit son cours sans contrôle elle fait place à une importante ségrégation des quartiers. La tendance actuelle des villes est à la séparation des populations en fonction de leur revenus, de leur religions ou de leur age. Chose que confirme le maire de Saint Etienne, c'est en effet un phénomène que l'on peut constater dans la plupart des grandes villes Françaises et il nous faut réapprendre à vivre ensemble. Cette croissance non maitrisée à son parfait exemple dans la ville de Caracas au Vénézuela, ville construite au pied d'un montagne qui a vu ses pentes être investies par toute une catégorie de population défavorisé. Cette expansion non prévue à laisser place à d'importants problèmes de transport et d'hygiène pour ces populations.

Face à cette croissance spontanée et non maitrisée il y a un moyen de reprendre le contrôle et de dessiner le schéma de croissance de la ville. La clé de ce contrôle est l'accès aux transports. En devançant une expansion diffuse par une expansion choisie selon des axes bien définis. Les transports jouent pour lui ce rôle fondamental tout en étant un excellent vecteur de sociabilisation.

Le maire de Saint Etienne rebondit sur ces propos pour nous faire pars des projets d'avenir concernant sa ville en matière de gestion des transports. On notera dans ses propos le projet d'ouvrir la ville sur son agglomération : Rive de gier, Terrenoir, Andresieux, Firminy grâce au tram-train. Le tram-train est un projet assez en vogue en ce moments dans beaucoup de grande villes. J'ai moi même pu voir la mise en place d'un projet similaire sur l'agglomération ouest de Lyon.

Espace Manufacture Plaine Achille - Saint Etienne

Le but du tram-train est de créer un moyen de transport « hybride » qui puisse à la fois emprunter le réseau ferroviaire SNCF et le réseaux de tramway interne aux villes. Cela permettra d'acheminer directement les habitants des agglomérations dans le centre des villes. De ce fait, en reliant les villes proches de taille plus modeste aux grande ville, on éspere, par l'utilisation de ces nouveaux moyens de transport, limiter l'étalement urbain. Le développement des moyens de transport ferroviaire est également la clé de voute du désengorgement des centre villes par les automobiles. En incitant d'avantage les gens à utiliser ces nouveaux moyens de transport on pourra ainsi libérer de l'espace en ville pour les mode de transport plus saint comme le vélo, la marche à pied ou développer d'autres lignes de tram. Les automobiles pourront quand à elle toujours être déposés dans des parking relais à l'entrée de la ville, comme on peut le voir sur Lyon avec le parking de Gorge de Loup ou de Vaise. Maurice Vincent corrobore ces propos théoriques par un projet bien concret : Le projet « Manufacture Plaine Achille », qui vise à transformer un ancien grand parking, situé en centre ville, en un parc vert et ouvert, et d'y aménager un pôle d'enseignement supérieur.

Jaime Lerner nous raconte ensuite que le salut d'une ville moderne passe en premier lieu par l'intégration de son histoire, on ne crée pas une ville nouvelle simplement en suivant les règles de l'esthétique moderne, mais en intégrant en son cœur son passé, c'est ce qui fait son identité, ses fondations et son charme. La ville moderne ne doit pas être une façade ou le reflet de la modernité aurai effacé le passé devenu obsolète de la ville. Le bonheur des citadins est dans l'identité de leur propre ville.

Maurice Vincent cite pour exemple sa ville, dont l'identité repose fortement sur son passé industriel avec notamment les mines, la sidérurgie, et les manufactures comme celle dans laquelle nous nous trouvons actuellement ( ancienne manufacture d'arme ). Saint Etienne est une ville au passé d'ouvriers, c'est une ville en plein changement mais qui ne renie aucunement son histoire, car c'est son identité. Aujourd'hui comme beaucoup de ville qui ont le soucis de limiter les désastres de l'étalement urbain Saint Etienne est une ville qui voue à se densifier et à se moderniser en son sein, « reconstruire la ville sur la ville » en mêlant modernité et histoire. Le but étant aussi de préserver les espaces naturels qui entourent la ville et font de Saint Etienne une ville qui puise également son identité dans la proximité de la nature.

La place fut ensuite accordé à deux nouveaux intervenents : Laurence Madrelle et Ruedi Baur. Le sujet était ici centré sur la signalétique en ville. La ville d'Yverdon-les-bains avait lancé un appel à projet pour rehausser l'attractivité de sa ville qui souffrait de la proximité de ses grandes soeurs Lausanne et Genève.

Le challenge était ici de taille, car à priori je ne voyais pas comment la signalétique pouvait changer quelque chose à l'attractivité d'une ville. Différents projets nous sont montrés, on y vois quelques panneaux aux formes psychédéliques, ou bien de grandes lettrines disposés sur une colline manière « Hollywood ». Rien de bien transcendant jusque là. Quand vint le tour du projet gagnant.

L'intérêt de cette intervention n'était pas dans la réalisation finie du projet car celui ci n'était encore pas lancé. Mais dans la réflexion qui a mené ce projet à surpasser toutes les autres propositions. En effet, une importante phase d'étude avait été mené au préalable. Comment rendre une ville attrayante? Plutôt que de se basé sur les concepts en vogue, l'équipe s'est avant tout penché sur le contexte historique et géographique de la ville. La ville d'Yverdon est situé près l'un lac et est traversé par de nombreux canaux, surplombé par de nombreux ponts. L'idée originale de l'équipe était de faire de chaque pont un pont unique et reconnaissable parmi les autres. La manière de différencier ces ponts n'est à ce jour pas encore établie, mais on peut imaginer que la signalétique de la ville disposera d'un système d'orientation unique. « Au pont de la tête du Lion tu prend à gauche, et au pont du Y à droite » un exemple parmi tant d'autres. De nombreuses esquisses et projets pas encore adopté on été présentés. Mais l'intérêt de cette intervention n'est pas dans le concret mais bien dans l'étude préalable qui a permis à cette agence de décrocher le contrat. L'aménagement urbain est un métier ou les responsabilités son lourdes et ou le contexte de chaque ville est un élément non négligeable.

La troisième et dernière partie accueillait 3 jeunes paysagistes ainsi qu'un homme qui m'aura stupéfait par la simplicité et la vérité ses propos : Michel Corajoud. Je ne m'attarderai pas trop sur cette intervention car c'est un experience très personnelle que j'ai vécu loin de ma feuille et de mon stylo.

Les trois paysagistes nous ont présenté leur dernier projet : l'aménagement d'un jardin au dessus du périphérique parisien. Il s'agit du jardin «Serge Gainsbourg ». Tout au long de cette présentation était décrit le processus de recherche, de l'histoire du lieu, de la conception, des matériaux choisis. Cela fut très intéressant, mais ce n'est après que je reconnu un grand maitre s'exprimer.

Michel Corajoud sous son allure de vieux bonhomme, recourbé sur son siège, pris le micro pour extraire de sa bouche quelques mots simples qui à eux seuls auraient pu résumer les 15 minutes de paroles des trois autres. Je me suis rendu compte à quel point le métier de paysagiste est bien plus complexe qu'il n'y parait. Bien que je ne me destine pas à ce métier, ses propos simples et criards de vérité m'ont laissé ébahi face à son travail.

Là ou tout le monde semblait se concerter c'est que le métier de paysagiste demande maintenant une réflexion digne d'un psychologue. Avant de bâtir un espace, il faut prévoir quel utilisation en feront ses occupant. Entre autres Michel Corajoud sorti cette phrase : « Dégage, j'aménage » qui montre à quel points certains paysagistes peuvent se fourvoyer dans leur métiers. Phrase qu'il compléta par la suivante : « On tue la vie en croyant l'introduire ».

Quai de Bordeaux

L'aménagement du paysage urbain est un art qui demande une grande réflexion, car c'est dans l'organisation de cet espace que se noue le lien social. Il cite l'exemple d'un banc long de 60 mètres qu'il a créé et qui maintenant laisse place à des phases d'approche ou les gens vont avoir tendance à « glisser » les uns vers les autres le long de ce banc. Michel Corajoud explique également « sa » vision de la ville, une vision bien personnelle que ne partage pas tous les paysagiste et urbaniste mais qui ensembles structurent la vie des villes de demain. Pour lui les villes d'aujourd'hui ne sont que des monolithes rapproché les uns des autres. Des bâtiments à la géométrie parfaite, à l'aspect tranchant qui ont perdu tout l'héritage de la nature et « qui se dressent face à nous tel des guillotines ». La ville d'avenir pour lui, sera une ville « poreuse » ou il mettrai de « grands coups de marteau-piqueur dans ces amas géométriques pour que revienne s'y loger la vie » peu importe sous quelle forme. Cette phrase traduit une tendance générale dans l'urbanisme qui vise a densifier les logement tout en dégageant des espaces ou la vie pourrait réinvestir les lieux. Un peu plus tard il lance à ses anciens élève cette phrase « Je me fou des plantes » d'un air provocateur, « tout ce qui me préoccupe c'est le bonheur des gens ». Il présenta alors son travail sur l'aménagement des quai de bordeaux, qui est un travail remarquable, plein de réflexion notamment sur la question de l'ombre et de la lumière. Le soucis de l'esthétique du lieu, du bien être des futurs promeneurs était omniprésent dans sa réflexion. Seul un aspect sur des lampions fut décrié, et il dit alors « dans un aménagement il faut toujours créer quelque chose sujet aux critiques car sinon c'est l'ensemble du projet qui est critiqué ».

Sur ces belles phrases se termine la conférence si vous l'avez raté j'espère vous en avoir convenablement transmis l'essentiel, si vous regardé ce billet et que vous n'êtes pas en 2015 mais plutôt avant le 5 décembre 2010 je vous invite vivement à allez faire un tours à l'espace « La ville mobile » de la biennale du Design à Saint Etienne. Une version PDF est disponible ici.