tag:blogger.com,1999:blog-78503175182423908862024-03-13T12:35:19.893+01:00gronoblogLe blog du web et de l'informatique ouvert sur le mondeGronobohttp://www.blogger.com/profile/18438387378413235524noreply@blogger.comBlogger12125tag:blogger.com,1999:blog-7850317518242390886.post-46359365254125004792011-03-24T23:53:00.000+01:002011-03-24T23:53:47.324+01:00Quelle technologie RIA pour mon Application web ?Internet prend une place de plus en plus importante dans nos habitudes de consommation des médias au point qu'aujourd'hui les applications elles même sont déportées sur le net. Attention cependant toute application ne peut pas être adapté en webapp. Pourquoi ? Parce que le web n'offre pas les même possibilités de rendu, de performances, ni même d'animation pour les IHM. Pour une application présentant des données, permettant une saisie et affichant quelques graphiques, la web app est toute indiquée. Pour les applications plus gourmandes un autre choix s'impose, je vous invite pour cela à lire ce billet : <a href="http://gronoblog.blogspot.com/2011/01/informatique-client-leger-riche-ou.html">Client Riche, Léger ou Lourd ?</a><br />
<br />
Quelles sont les solutions qui se présentent à nous dans la réalisation de logiciel dit Client Léger ou Client Riche en ligne ?<br />
<br />
<u><b><span class="Apple-style-span" style="font-size: large;">Solution 1 : Pur Javascript</span></b></u><br />
<br />
Vous pouvez tout à fait programmer votre interface en pur HTML / Javascript. Cela à le mérite d'être rapide à mettre en place et de s'affranchir de l'apprentissage des langages plus complexes que sont Java ou ActionScript 3. Pour cela, l'Ajax sera de rigueur, vous connaissez surement cette technique qui permet de mettre à jour les données d'une page sans avoir à recharger celle-ci. Sinon jetez un coup d'oeil <a href="http://fr.wikipedia.org/wiki/Ajax_(informatique)">ici</a>. Grace à l'Ajax, le javascript à prit une place prépondérante dans le développement web. Aujourd'hui il existe de nombreux frameworks javascript qui permettent de réaliser de bout en bout une interface graphique. Je siterai par exemple <a href="http://jquery.com/">Jquery</a> (Mootools, Prototype que je n'ai pas manipulé) ainsi que <a href="http://dev.sencha.com/deploy/dev/examples/">Ext-js</a> qui est une librairie absolument phénoménale bourrée de composants graphiques complexes très utiles.<br />
<br />
Le javascript étant un langage de script ( comme son nom l'indique ), coder une interface complexe peu vite s'avérer lourd tant au niveau de la structure de l'application qu'au niveau du debuggage. Des outils comme <a href="http://documentcloud.github.com/backbone/">Backbones.js</a> existent pour tenter de structurer un peu le code, mais globalement je vous conseille de coder vos webapp en javascript que si elles restent de taille relativement modeste. Pour ma part je suis resté sur un design en HTML / CSS sans passer par un framework pour le coté graphique. Le fait de pouvoir designer ses composants comme on le fait quand on réalise un site web offre une liberté très appréciable. Je n'ai du coup utilisé le javascript que pour rapatrier les données, rafraichir l'interface et faire quelques animations, par le biais de Jquery qui offre une syntaxe très concise.<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://lh6.googleusercontent.com/-3O46godl8R8/TYvCAEkebkI/AAAAAAAAAD0/xowDlAtJ2Og/s1600/Capture+d%25E2%2580%2599e%25CC%2581cran+2011-03-24+a%25CC%2580+23.12.43.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="288" src="https://lh6.googleusercontent.com/-3O46godl8R8/TYvCAEkebkI/AAAAAAAAAD0/xowDlAtJ2Og/s400/Capture+d%25E2%2580%2599e%25CC%2581cran+2011-03-24+a%25CC%2580+23.12.43.png" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Exemple d'application HTML / Javascript avec un graphisme "fait maison"</td></tr>
</tbody></table><br />
<br />
<b><u><span class="Apple-style-span" style="font-size: large;">Solution 2 : Flex</span></u></b><br />
<br />
<a href="http://www.adobe.com/fr/products/flex/?promoid=BPBOD">Flex</a> est une technologie qui a eut un rôle précurseur dans le monde des RIA. Issue de la technologie Flash, elle a longtemps été regardée de manière incomprise par le monde des Flashers qui ne comprenaient pas l'intérêt de cette nouvelle plateforme. L'idée est pourtant simple, se servir du player Flash, présent sur 95% des ordinateurs pour afficher des interfaces aussi poussées que celles des logiciels type Client Lourd. Flex offre l'avantage par rapport à d'autre technologies de s'exécuter dans une machine virtuelle ce qui l'affranchie de toute contrainte liée aux langages web courant ( HTML , et Javascript ). La force de Flex réside dans ce que cette technologie hérite de son cousin Flash à savoir un environnement permettant la réalisation de composant riches et soignées, une réactivité et une capacité d'animation poussée. Néanmoins l'environnement Flash pèse lourd, et l'exécution d'une application Flex peut parfois s'avérer douloureuse pour le processeur. De plus la technologie Flash n'étant pas un standards mais la propriété de la société Adobe, elle tend à s'effacer face au couple HTML5 / CSS3 / JavaScript plus ouvert et de plus en plus impressionnant. En définitive Flex doit s'imposer à vous pour les besoins qui nécessite que vous fournissiez une interface extrêmement soigné et personnalisée, où l'animation et le sens du détails ont une importance capitale. A noter que le Flash, donc Flex ne s'exécute pas sur les terminaux d'Apple ce qui est bon de se rappeler :)<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://blog.solarweb.fr/images/flex2.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="310" src="http://blog.solarweb.fr/images/flex2.jpg" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Flash Builder, un outils bien sympa ( mais payant ) pour concevoir vos interfaces en Flex</td></tr>
</tbody></table><br />
<br />
<b><u><span class="Apple-style-span" style="font-size: large;">Solution 3 : JavaFX</span></u></b><br />
<br />
JavaFx, j'en parle juste parce que c'est une technologie qui à fait du bruit. Pour moi c'est un flop, un raté total, instable et bourré de bugs. Si j'en parle, c'est simplement pour que vous le l'envisagiez pas. Du moins pas pour l'instant, Oracle semble s'être rendu compte de l'état du projet et compte faire le ménage dans tous ça. En espérant qu'ils nous livrent une techno intéressante cette fois.<br />
<br />
<u><span class="Apple-style-span" style="font-size: large;"><b>Solution 4 : Silverlight et .Net</b></span></u><br />
<br />
Pendant un temps le grand concurrent de Flash / Flex, microsoft semble avoir mis un frein sur cette technologie au profit de HTML5. Pourtant Sliverlight s'avère convainquant notamment pour la question des performance et dans la gestion de la vidéo. La gestion du lissage des textes est cependant perfectible. Je ne sais quel avenir attend Silverlight, certain outils comme <a href="http://www.microsoft.com/expression/products/blend_overview.aspx">Expression Blend</a> permettent des rendu impressionnants, mais l'aspect libre du HTML5 semble prendre les devants.<br />
<br />
J'omet au passage de parler des solution basé sur l'environnement .Net de Microsoft et <a href="http://www.mono-project.com/Main_Page">Mono</a> son implémentation libre, car je ne les connais tout simplement pas :D Si vous avez travaillé sur cet environnement et que vous souhaitez en faire par laissez un commentaire ;)<br />
<br />
<b><u><span class="Apple-style-span" style="font-size: large;">Solution 5 : GWT</span></u></b><br />
<br />
Pour moi <a href="http://code.google.com/intl/fr-FR/webtoolkit/overview.html">GWT</a> est l'arlésienne des frameworks Client Léger. C'est pour moi la solution qui s'impose le plus souvent. Pourquoi ?<br />
<br />
Les performances : GWT c'est rapide. Pour peut que l'on aime mettre les main dans le cambouis il est possible de monter à un haut niveaux d'optimisation. Découpage du code en briques téléchargée à la demande, <a href="http://code.google.com/intl/fr-FR/webtoolkit/speedtracer/index.html">environnement de test complet</a>, cache des données en local...<br />
<br />
L'architecture du framework : Plus on passe de temps à utiliser GWT, plus on se dit que c'est bougrement bien conçut. GWT a su s'inspirer de Flex pour créer des interfaces déclarative en xml. Il reste néanmoins possible de programmer son IHM comme on peut le faire en swing. GWT gère l'historique du navigateur, le <a href="http://jab.developpez.com/tutoriels/dotnet/mvppattern/">pattern mvp</a> ( Model View Presenter ) bien que complexe à aborder induit une logique implacable dans la structure de votre application.<br />
<br />
Bref vous l'aurez compris GWT ça déchire :) Néanmoins il faut quand même garder à l'esprit 2 choses : GWT s'adresse avant tout à des développeur maitrisant Java EE ( attention Java != JEE ). L'avantage de cette techno est de pouvoir aisément se synchroniser avec des services web codés en java pour se passer des objets comme si la partie client et serveur étaient regroupées. Il reste tout de même possible de se passer des informations de manière traditionnelle avec des requêtes pour se connecter à des services écris dans un autre langage.<br />
<br />
Globalement le framework reste plus difficile à aborder que Flex, il fait appel à des patterns que l'on aborde lorsque l'on a un niveau ingénieur. Néanmoins lorsque l'on est familier avec ces patterns ( ou qu'on apprend à l'être comme moi ) on remarque que le tout est très structuré et extrêmement bien adapté aux applications de taille conséquente.<br />
<br />
Mais au fait, GWT c'est quoi ? GWT est un framework qui fourni simplement un écosystème familier pour tous développeur Java habitué à coder du Client Lourd en Awt, Swing ou Swt et qui souhaite développer une application web. A ceci près qu'il s'adapte aux contraintes techniques imposées par la génération de contenu web, et met en place une architecture orientée vers la productivité et les performances. Concrètement comment fait GWT pour créer une application web codé en Java ? Tout le code généré coté client, celui qu'interprète votre navigateur est du pur Javascript / HTML / CSS. Le code java est compilé en javascript et optimisé. Du coup cela permet au développeurs Java de coder une IHM sans avoir à apprendre les langages web. GWT étant parfaitement intégré à l'environnement <a href="http://www.eclipse.org/">Eclipse</a>, des fonctionnalités comme le debuggage, l'autocomplétion sont très appréciable en plus de bénéficier de la structure d'un projet Java.<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://lh5.googleusercontent.com/-wRxLsJtDG8Y/TYvI97HG8HI/AAAAAAAAAD4/KAMAxfjCJls/s1600/Capture+d%25E2%2580%2599e%25CC%2581cran+2011-03-24+a%25CC%2580+23.42.10.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="333" src="https://lh5.googleusercontent.com/-wRxLsJtDG8Y/TYvI97HG8HI/AAAAAAAAAD4/KAMAxfjCJls/s400/Capture+d%25E2%2580%2599e%25CC%2581cran+2011-03-24+a%25CC%2580+23.42.10.png" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Une GUI basique en GWT</td></tr>
</tbody></table><br />
<br />
GWT n'est cependant pas parfait, en effet, de base il n'intègre pas autant de composants ni de fonctionnalités que Flex. Il vous faudra donc créer vos propres composants.<br />
<br />
Autre solution : Vous n'avez pas le temps de développez de composants et avez besoins de widgets prêts à l'emplois. Alors vous vous tournerez surement vers les bibliothèques tierces comme <a href="http://code.google.com/p/smartgwt/">smartGWT</a> ou <a href="http://www.sencha.com/products/extgwt/">Ext-GWT</a> ( alias gxt a ne pas confondre avec gwt-ext qui est un projet mort). Je vous recommande cette dernière qui fournit des composants de très bonne qualité et de bien meilleures performances que SmartGWT. A noter que ces implémentations ont généralement 1 an de retards sur GWT, le temps d'implémenter les nouvelles fonctionnalités. GXT 3.0 qui devrait sortir courant 2011 semble combiner le meilleur des 2 mondes : la richesse des composant de la librairie Ext et la puissance de la structure de gwt (mvp, uibinder…).<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://lh6.googleusercontent.com/-sQ6P6yBack4/TYvKMlkcF1I/AAAAAAAAAD8/gXaln-ykRLk/s1600/Capture+d%25E2%2580%2599e%25CC%2581cran+2011-03-24+a%25CC%2580+23.47.55.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="215" src="https://lh6.googleusercontent.com/-sQ6P6yBack4/TYvKMlkcF1I/AAAAAAAAAD8/gXaln-ykRLk/s400/Capture+d%25E2%2580%2599e%25CC%2581cran+2011-03-24+a%25CC%2580+23.47.55.png" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Une interface réalisée avec Ext-GWT</td></tr>
</tbody></table><br />
<br />
Voici donc un tour d'horizon ( basique ) des technologies RIA du moment. J'en ai omise certaines ( Echo2, IceFaces, OpenLazlo… ) car ce serait trop long et de toute façon je ne les connait pas ^^ N'hésitez pas à poser vous commentaires si vous utilisez une des techno citées ou si simplement vous avez des questions.<br />
Bon codage :)Gronobohttp://www.blogger.com/profile/18438387378413235524noreply@blogger.com5tag:blogger.com,1999:blog-7850317518242390886.post-61496366620883460582011-02-19T18:08:00.001+01:002011-02-19T18:09:03.685+01:00Petites nouvelles d'un blogeur disparu<div style="text-align: justify;">Voila un mois que je n'ai rien posté, mais que ce passe t'il donc ? Nouveau job, nouvel emploi du temps, du coup mon blog est un petit peu délaissé. Dorénavant les billets de ce blog vont prendre une orientation un peu plus hardcode. Et oui, j'ai troqué le monde du Flash, du PHP et du graphisme pour celui de Java. Bon, bien sur, on ne change pas un homme comme ça, et je conserve tout de même beaucoup d'intérêt pour le web son rôle de précurseur sur la définition des interfaces de demain. Mais pour aujourd'hui il est temps de faire une petite mise à jour du coté fonctionnel, et je peu vous dire que venant du web, ça fait drôle ! La taille des projets n'est pas la même, cela m'a impressionné de voir un projet constitué de vingtaines de fichiers à leur tour encapsulés dans des dizaines de dossiers. Il me faut donc acquérir dans un laps de temps assez cours beaucoup de notions comme les design pattern, les outils de déploiements, le mappage objet - relationel, la persistance des objets. Et oui, l'univers JEE est bien différent de celui du web, et j'y consacrerai bientôt un parallèle pour que cet univers soit un peu mieux compris par les développeurs web.</div><div style="text-align: justify;"><br />
</div><div style="text-align: justify;">Alors un premier bilan après deux semaines à manger du Java ? Java est un langage que je connaissais bien, mais l'implémentation de ce langage pour les entreprises, JEE (Java Entreprise Edition) demande beaucoup plus de compétence que le langage à lui seul. Ce que je peu vous dire c'est que travailler dans un environnement JEE est très formateur. Java étant un langage assez bien foutu et plus haut niveau que le C/C++ il est possible de se concentrer d'avantage sur l'architecture de votre application plutôt que sur la gestion de concepts bas niveau comme la gestion de la mémoire. Et au niveau de l'architecture on voit que les grosses têtes de ce monde se sont amusés à créer des structures assez poussées. J'explore pour l'instant les plus basiques mais je doit avouer que je me régale. Au menu EJB3, Hibernate et GWT qui est une techno dont je parle depuis un bon moment et qui est très prometteuse. Pour plus tard j'espère pouvoir concilier la complexité des services que permet Java sur le serveur, avec des interface léchés, complexes et fonctionnelles coté client. Je vous tiens au jus ;)</div>Gronobohttp://www.blogger.com/profile/18438387378413235524noreply@blogger.com0tag:blogger.com,1999:blog-7850317518242390886.post-11676240707536906112011-01-21T10:19:00.001+01:002011-01-21T10:22:49.340+01:00Comment stimuler sa créativité<div style="text-align: justify;">Rendez vous compte qu'hier soir j'ai eu une illumination, et oui ! Alors que ma créativité est au plus bas dans cette période de stress professionnel, j'ai réussi à la retrouver, elle qui était si présente jadis. Bon je vous vois enjoué, j'en fais surement un peut trop. N'empêche que voici une astuce qui saura surement trouver son public.</div><div style="text-align: justify;"><br />
</div><div style="text-align: justify;">Tout d'abords c'est assez rageant lorsque l'on fait un métier créatif de voir que l'on a pas toujours la maitrise de notre créativité. Elle vient au grès du vent ou de son bon vouloir. Le processus créatif est quelque chose qui nous échappe. Ce n'est pas une compétence facile à apprivoiser et elle ne répond pas toujours aux mêmes logiques que la connaissances. Bref on ne sort pas une idée comme on sort une citation de Baudelaire :)</div><div style="text-align: justify;"><br />
</div><div style="text-align: justify;">Le processus créatif repose dans le subconscient ( je ne suis pas expert, mais si il y en a un ici qu'ils s'expriment ). On peut essayer de former une idée à partir de concepts que nous avons déjà aperçu et en touillant bien fort pour voir ce qu'il en ressort. Pour ma part il s'agit bien (trop) souvent d'idées chimériques. Bref le processus normal de créativité est un peu comme une roulette russe, on ne sait jamais sur quoi l'on va tomber, des bonnes idées, des mauvaises, des clones d'autres idées.</div><div style="text-align: justify;"><br />
</div><div style="text-align: justify;">Alors ou je veux en venir ? Et bien, si la créativité est de l'ordre de l'inconscient, alors il faut aller chercher ses idées... dans l'inconscience. Qu'est ce que cela veut dire ? Non, je ne vous inciterai pas à vous rendre ivre, ni même de travailler sous exta. Je me veux le promoteur d'une méthode plus douce : le sommeil.</div><div style="text-align: justify;"><br />
</div><div style="text-align: justify;">Ou plutôt l'avant sommeil, parce que une fois que l'on dors on est bien loin de nos soucis de travail ^^ Cette phase ou l'on se sent partir est l'instant clé. C'est le moment ou votre pensée laisse inconsciemment place à une réalité que vous avez imaginé. Essayer pendant cet instant de lutter, de vous raccrocher à la réalité et pensez à l'idée en question que vous aimeriez avoir. Jamais vos idées ne vous auront parut si apparente, si accessible, et même si crédible. Et elles le sont ! Si vous n'y parvenez pas directement, pensez au contexte, imaginez les éléments qui gravitent autours puis attaquez vous à ce que vous devez créer. Vous verrez que dans votre imaginaire cette part inexistante dans le réel l'est dans votre subconscient. Prenez toujours de quoi noter à proximité de votre oreiller, un bloc note, pour ma part mon iphone fait bien l'affaire même si je sais qu'a terme il m'aura grillé le cerveau.</div><div style="text-align: justify;"><br />
</div><div style="text-align: justify;">Alors oui, c'est la tout le secret. Tout ça pour ça ? Me direz vous. Tentez l'expérience et vous verrez que ce simple principe a de la valeur. N'hésitez pas à me faire vos retours, à me traiter de charlatan si vous le souhaitez ^^ Je vous souhaites à tous de bonne séances de sommeil créatif.</div>Gronobohttp://www.blogger.com/profile/18438387378413235524noreply@blogger.com2tag:blogger.com,1999:blog-7850317518242390886.post-17268655509986136522011-01-17T17:12:00.001+01:002011-01-18T09:56:45.076+01:00Animer un décor avec un travelling en html et javascript (jquery)<div style="font: 12.0px Helvetica; margin: 0.0px 0.0px 0.0px 0.0px;">Vous avez déjà pensé à réaliser un travelling pour votre site, mais l'idée vous à paru trop complexe, trop gourmande en ressource, ou bien vous vous sentiez obligé de passer par flash? Que néni ! Réaliser un travelling en plein écran c'est facile ! Et cela se prête à plein d'utilisations possible. Que ce soit comme animation d'arrière plan, ou dans le cadre d'une interactivité poussée, il est aujourd'hui aisée de faire un travelling avec Javascript.</div><div style="font: 12.0px Helvetica; margin: 0.0px 0.0px 0.0px 0.0px; min-height: 14.0px;"><br />
</div><div style="font: 12.0px Helvetica; margin: 0.0px 0.0px 0.0px 0.0px;">J'utilise personnellement la librairie Jquery, qui permet d'animer des éléments du DOM avec une simplicité déconcertante. Mais alors, comment fait on ? C'est le sujet de ce micro tutoriel.</div><div style="font: 12.0px Helvetica; margin: 0.0px 0.0px 0.0px 0.0px; min-height: 14.0px;"><br />
</div><div style="font: 12.0px Helvetica; margin: 0.0px 0.0px 0.0px 0.0px;">Pour bien faire il faut créer une structure basique pour son site avec quelques balises div. Les div sont des conteneurs qui par défaut se positionnent les un en dessous des autres. Ici il n'est point question de se prendre la tête avec le placement de ces div. Il n'y en a que deux ! Le premier div est en fait un conteneur global, c'est à l'intérieur de celui-ci que va se produire l'animation du travelling. Son rôle est de créer une zone de visibilité (ici égale a la taille totale de la fenêtre).</div><div style="font: 12.0px Helvetica; margin: 0.0px 0.0px 0.0px 0.0px;">Voici son style css : </div><div style="font: 12.0px Helvetica; margin: 0.0px 0.0px 0.0px 0.0px;"><br />
</div><div style="font: 12.0px Helvetica; margin: 0.0px 0.0px 0.0px 0.0px;">position:absolute; /* le bloc aura une position fixe */</div><div style="font: 12.0px Helvetica; margin: 0.0px 0.0px 0.0px 0.0px;">width:100%; /* il occupera toute la largeur de la fenêtre*/</div><div style="font: 12.0px Helvetica; margin: 0.0px 0.0px 0.0px 0.0px;">height:100%; /* ainsi que toute sa hauteur */</div><div style="font: 12.0px Helvetica; margin: 0.0px 0.0px 0.0px 0.0px;">overflow:hidden; /* tout ce qui dépassera les dimension de la fenêtre sera masqué, et il n'y aura pas d'ascenseur */</div><div style="font: 12.0px Helvetica; margin: 0.0px 0.0px 0.0px 0.0px; min-height: 14.0px;"><br />
</div><div style="font: 12.0px Helvetica; margin: 0.0px 0.0px 0.0px 0.0px;">A l'intérieur nous y trouverons un autre div, celui qui contiendra directement l'image de background. C'est ce div qui sera animé et qui donnera l'impression de travelling.</div><div style="font: 12.0px Helvetica; margin: 0.0px 0.0px 0.0px 0.0px;">style css : </div><div style="font: 12.0px Helvetica; margin: 0.0px 0.0px 0.0px 0.0px;"><br />
</div><div style="font: 12.0px Helvetica; margin: 0.0px 0.0px 0.0px 0.0px;">position: relative /* nécessaire pour que l'animation fonctionne */</div><div style="font: 12.0px Helvetica; margin: 0.0px 0.0px 0.0px 0.0px; min-height: 14.0px;"><br />
</div><div style="font: 12.0px Helvetica; margin: 0.0px 0.0px 0.0px 0.0px;">A l'intérieur de ce div, nous insérerons notre image, avec la balise img. L'image que vous placerez devra avoir une longueur conséquente (la mienne fait 2560 de long soit le double de ma largeur d'écran).</div><div style="font: 12.0px Helvetica; margin: 0.0px 0.0px 0.0px 0.0px; min-height: 14.0px;"><br />
</div><div style="font: 12.0px Helvetica; margin: 0.0px 0.0px 0.0px 0.0px;">Voila rien de plus pour les éléments, si on récapitule nous avons 2 blocs et une image. Chacun étant imbriqué dans l'autre ce qui nous donne quelque chose comme ceci : </div><div style="font: 12.0px Helvetica; margin: 0.0px 0.0px 0.0px 0.0px;"><br />
</div><div style="font: 12.0px Helvetica; margin: 0.0px 0.0px 0.0px 0.0px;">div</div><div style="font: 12.0px Helvetica; margin: 0.0px 0.0px 0.0px 0.0px;"><span class="Apple-tab-span" style="white-space: pre;"> </span>div</div><div style="font: 12.0px Helvetica; margin: 0.0px 0.0px 0.0px 0.0px;"><span class="Apple-tab-span" style="white-space: pre;"> </span>img</div><div style="font: 12.0px Helvetica; margin: 0.0px 0.0px 0.0px 0.0px;"><span class="Apple-tab-span" style="white-space: pre;"> </span>/div</div><div style="font: 12.0px Helvetica; margin: 0.0px 0.0px 0.0px 0.0px;">/div</div><div style="font: 12.0px Helvetica; margin: 0.0px 0.0px 0.0px 0.0px; min-height: 14.0px;"><br />
</div><div style="font: 12.0px Helvetica; margin: 0.0px 0.0px 0.0px 0.0px;">Voila, je vous conseille également de mettre ce style à votre body{</div><div style="font: 12.0px Helvetica; margin: 0.0px 0.0px 0.0px 0.0px;"><span class="Apple-tab-span" style="white-space: pre;"> </span>margin:0;</div><div style="font: 12.0px Helvetica; margin: 0.0px 0.0px 0.0px 0.0px;"><span class="Apple-tab-span" style="white-space: pre;"> </span>padding:0;</div><div style="font: 12.0px Helvetica; margin: 0.0px 0.0px 0.0px 0.0px;"><span class="Apple-tab-span" style="white-space: pre;"> </span>}</div><div style="font: 12.0px Helvetica; margin: 0.0px 0.0px 0.0px 0.0px;">Cela évitera qu'il y ai des bordures noires sur les cotés de votre navigateur.</div><div style="font: 12.0px Helvetica; margin: 0.0px 0.0px 0.0px 0.0px;"><br />
</div><div class="separator" style="clear: both; text-align: center;"><a href="http://1.bp.blogspot.com/_XU8RkqLv1J8/TTRo5YeyRYI/AAAAAAAAADE/MCRSxfSgNb4/s1600/infographie_traveling.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="243" src="http://1.bp.blogspot.com/_XU8RkqLv1J8/TTRo5YeyRYI/AAAAAAAAADE/MCRSxfSgNb4/s400/infographie_traveling.jpg" width="400" /></a></div><div style="font: 12.0px Helvetica; margin: 0.0px 0.0px 0.0px 0.0px;"><br />
</div><div style="font: 12.0px Helvetica; margin: 0.0px 0.0px 0.0px 0.0px; min-height: 14.0px;"><br />
</div><div style="font: 12.0px Helvetica; margin: 0.0px 0.0px 0.0px 0.0px;">Maintenant place à l'animation !</div><div style="font: 12.0px Helvetica; margin: 0.0px 0.0px 0.0px 0.0px; min-height: 14.0px;"><br />
</div><div style="font: 12.0px Helvetica; margin: 0.0px 0.0px 0.0px 0.0px;">L'animation va se faire grâce à un tout petit script Jquery. Je vous conseille de jeter un coup d'oeil à cette librairie javascript qui recèle de petites astuces bien sympa.</div><div style="font: 12.0px Helvetica; margin: 0.0px 0.0px 0.0px 0.0px; min-height: 14.0px;"><br />
</div><div style="font: 12.0px Helvetica; margin: 0.0px 0.0px 0.0px 0.0px;">Dans un premier temps, il faut bien sur que vous télécharger le .js de jquery, et que vous le rangier bien soigneusement non loin de votre page html pour pouvoir y accéder avec la balise script type="text/javascript" src="js/jquery-1.4.4.js"</div><div style="font: 12.0px Helvetica; margin: 0.0px 0.0px 0.0px 0.0px; min-height: 14.0px;"><br />
</div><div style="font: 12.0px Helvetica; margin: 0.0px 0.0px 0.0px 0.0px;">Voici ensuite le code javascript qui fera bouger votre décors ( à taper à l'intérieur de balise script bien sur ) : </div><div style="font: 12.0px Helvetica; margin: 0.0px 0.0px 0.0px 0.0px; min-height: 14.0px;"><br />
</div><div style="font: 12.0px Helvetica; margin: 0.0px 0.0px 0.0px 0.0px;">$(document).ready(function(){</div><div style="font: 12.0px Helvetica; margin: 0.0px 0.0px 0.0px 0.0px;"><span class="Apple-tab-span" style="white-space: pre;"> </span>jQuery.fx.interval = 20;</div><div style="font: 12.0px Helvetica; margin: 0.0px 0.0px 0.0px 0.0px; min-height: 14.0px;"><br />
</div><div style="font: 12.0px Helvetica; margin: 0.0px 0.0px 0.0px 0.0px;"><span class="Apple-tab-span" style="white-space: pre;"> </span>$('#bkgd').animate({</div><div style="font: 12.0px Helvetica; margin: 0.0px 0.0px 0.0px 0.0px;"> <span class="Apple-tab-span" style="white-space: pre;"> </span>left: '-=100%'</div><div style="font: 12.0px Helvetica; margin: 0.0px 0.0px 0.0px 0.0px;"><span class="Apple-tab-span" style="white-space: pre;"> </span>}, 2000);</div><div style="font: 12.0px Helvetica; margin: 0.0px 0.0px 0.0px 0.0px;">});</div><div style="font: 12.0px Helvetica; margin: 0.0px 0.0px 0.0px 0.0px; min-height: 14.0px;"><br />
</div><div style="font: 12.0px Helvetica; margin: 0.0px 0.0px 0.0px 0.0px;">Ahhh qu'est ce que cela veut dire (pour les non initiés ;p )</div><div style="font: 12.0px Helvetica; margin: 0.0px 0.0px 0.0px 0.0px; min-height: 14.0px;"><br />
</div><div style="font: 12.0px Helvetica; margin: 0.0px 0.0px 0.0px 0.0px;">jQuery.fx.interval = 20; /* question de performances, je limite le nombre d'images par secondes à 50 img/sec (1000/20 = 50)*/</div><div style="font: 12.0px Helvetica; margin: 0.0px 0.0px 0.0px 0.0px; min-height: 14.0px;"><br />
</div><div style="font: 12.0px Helvetica; margin: 0.0px 0.0px 0.0px 0.0px;">$('#bkgd').animate est la méthode qui permet d'animer en Jquery, ici nous allons demandé à notre bloc div contenant l'image, et dont la propriété id est égale à "bkgd" de translater vers la gauche, l'équivalent de la largeur de la fenêtre du navigateur : left: '-=100%' en 2 secondes.</div><div style="font: 12.0px Helvetica; margin: 0.0px 0.0px 0.0px 0.0px;"><br />
</div><div class="separator" style="clear: both; text-align: center;"><a href="https://docs.google.com/leaf?id=0ByCh3RzbkHp_ZDM1NWU0MmQtYzhiYi00NjQzLTgzNWMtMWM1OWRjNjU4NDYx&sort=name&layout=list&num=50"><img border="0" height="253" src="http://2.bp.blogspot.com/_XU8RkqLv1J8/TTRqCgc06XI/AAAAAAAAADI/4qf3DAn0FU0/s400/Capture+d%25E2%2580%2599e%25CC%2581cran+2011-01-17+a%25CC%2580+17.06.58.png" width="400" /></a></div><div style="font: 12.0px Helvetica; margin: 0.0px 0.0px 0.0px 0.0px;"><br />
</div><div style="font: 12.0px Helvetica; margin: 0.0px 0.0px 0.0px 0.0px; min-height: 14.0px;"><br />
</div><div style="font: 12.0px Helvetica; margin: 0.0px 0.0px 0.0px 0.0px;">Voilà alors bien sur, cette explication n'est que le décriptif de toute cette opération, et il se peut que vous ne réussissiez pas à faire un travelling fonctionnel avec ça, sinon c'est que vous êtes bon et tant mieux pour vous :p</div><div style="font: 12.0px Helvetica; margin: 0.0px 0.0px 0.0px 0.0px; min-height: 14.0px;"><br />
</div><div style="font: 12.0px Helvetica; margin: 0.0px 0.0px 0.0px 0.0px;">Je vous invite donc à jeter un coup d'oeil <a href="https://docs.google.com/leaf?id=0ByCh3RzbkHp_ZDM1NWU0MmQtYzhiYi00NjQzLTgzNWMtMWM1OWRjNjU4NDYx&sort=name&layout=list&num=50">aux sources</a>, et à vous rendre compte par vous même du type de rendu que l'on peut obtenir. Bon courage</div>Gronobohttp://www.blogger.com/profile/18438387378413235524noreply@blogger.com0tag:blogger.com,1999:blog-7850317518242390886.post-53387592053804607732011-01-06T17:29:00.006+01:002011-01-07T11:09:27.225+01:00Informatique Client Léger, Riche ou Lourd?<div style="font: 12.0px Helvetica; margin: 0.0px 0.0px 0.0px 0.0px;"><i>A qui s'adresse cet article? Aux débutants en programmation ou ceux qui se posent la question de ce qu'est ce charabia à propos des clients léger, lourd ou je ne sais quoi...</i></div><div style="font: normal normal normal 12px/normal Helvetica; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; min-height: 14px; text-align: justify;"><br />
</div><div style="font: normal normal normal 12px/normal Helvetica; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-align: justify;">L'informatique évolue constamment les pratiques qui en découlent aussi. Hier l'informatique ne passait que par les lignes de commandes, puis sont apparues les première interfaces graphiques qui ont décuplés le potentiel de l'outil l'informatique. Sont apparuent avec les nouveaux usages de cet outil les notions d'ergonomie et d'esthétique. Des notions sur lesquelles je ne m'attarderai pas. En effet pour ce billet je vais plutôt aborder le coté fonctionnel de l'informatique. Au cours de la conception d'un projet informatique plusieurs notions reviennent fréquemment. Les technologies employées, les langages, et les infrastructures. C'est sur cette dernière notion que je vais m'attarder. </div><div style="font: normal normal normal 12px/normal Helvetica; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; min-height: 14px; text-align: justify;"><br />
</div><div style="font: normal normal normal 12px/normal Helvetica; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-align: justify;">On peut distinguer 3 types d'infrastructures, les clients dit "Lourds" qui sont des logiciels dont tous les services s'exécutent sur le poste client. Les clients "Riches" qui, eux s'exécutent sur le poste client mais dont une partie du fonctionnement est déporté sur un serveur distant. Et enfin les clients "Légers" qui sont eux entièrement déporté sur le serveur, l'interface n'est pas stockée sur le poste client et le rendu de l'application est généré en fonction des données qu'envoi le serveur.</div><div style="font: normal normal normal 12px/normal Helvetica; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; min-height: 14px; text-align: justify;"><br />
</div><div style="font: normal normal normal 12px/normal Helvetica; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-align: justify;">Voici brièvement les 3 grands types d'infrastructures possibles. <i><b>Alors, pour mon application, quel type d'infrastructure dois-je adopter?</b></i> Comme vous avez pu le constater, il n'y a pas d'infrastructure surclassant les autres. Tous est affaire de besoins, et ce sont ces besoins que nous allons étudier en détails.</div><div style="font: normal normal normal 12px/normal Helvetica; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; min-height: 14px; text-align: justify;"><br />
</div><div style="font: normal normal normal 12px/normal Helvetica; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; min-height: 14px; text-align: justify;"><b><span class="Apple-style-span" style="font-size: small;">Le Client Lourd</span></b><span class="Apple-style-span" style="font-size: small;"> </span></div><div style="font: normal normal normal 12px/normal Helvetica; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; min-height: 14px; text-align: justify;"><br />
</div><div style="font: normal normal normal 12px/normal Helvetica; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-align: justify;">Si votre application ne nécessite pas de connexion à un serveur distant, c'est qu'à priori elle se suffit à elle même. Contrairement à un lecteur de flux RSS votre application ne nécessite pas de mise a jour fréquentes. Dans ce cas là le Client Lourd est tout indiqué. Avec le client Lourd vous aurez l'avantage de pouvoir faire une application mieux intégrée à l'OS, à condition de bien choisir son framework. Bien souvent il vous faudra choisir entre portabilité et intégration au système/ performances. Les application natives tirent mieux parti de la puissance de calcul de la machine. <i><b>Qu'est ce que cela signifie?</b></i> Si votre application nécessite une puissance de calcul importante, pour lire ou encoder une vidéo par exemple, ou afficher des modèles 3D, vous vous tournerez plutôt vers les librairies de votre <a href="http://fr.wikipedia.org/wiki/OS">OS</a>. Le langage le plus utilisé dans ce cas est le C/C++. Si la puissance vous importe peu, et que la portabilité de votre application est primordiale ce sera dans ce cas peut être vers JAVA que vous vous orienteriez, quoique le couple Qt/C++ soit aussi une solution intéressante.</div><div style="font: normal normal normal 12px/normal Helvetica; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-align: justify;"><br />
</div><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://3.bp.blogspot.com/_XU8RkqLv1J8/TSXsuD1q_dI/AAAAAAAAAC0/j449jBlQezk/s1600/maya.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="200" src="http://3.bp.blogspot.com/_XU8RkqLv1J8/TSXsuD1q_dI/AAAAAAAAAC0/j449jBlQezk/s320/maya.jpg" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Autodesk Maya, developpé en Qt/C++</td></tr>
</tbody></table><div style="font: normal normal normal 12px/normal Helvetica; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-align: justify;"><br />
</div><div style="font: normal normal normal 12px/normal Helvetica; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; min-height: 14px; text-align: justify;"><br />
</div><div style="font: normal normal normal 12px/normal Helvetica; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-align: justify;">Si votre application nécessite une connexion à un serveur, pour afficher du contenu en ligne, les données d'un compte bancaire, ou tout autres action qui nécessite que l'information soit centralisé sur des serveurs. Dans ce cas 2 choix s'offrent à vous : Le Client Riche et le Client Léger.</div><div style="font: normal normal normal 12px/normal Helvetica; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-align: justify;"><br />
</div><div style="font: normal normal normal 12px/normal Helvetica; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-align: justify;"><b><span class="Apple-style-span" style="font-size: small;">Le Client Riche</span></b></div><div style="font: normal normal normal 12px/normal Helvetica; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; min-height: 14px; text-align: justify;"><br />
</div><div style="font: normal normal normal 12px/normal Helvetica; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-align: justify;">Le Client Riche est en fait un client lourd, auquel on à greffé des capacités à se connecter, à chercher de l'information sur un réseau. Cela permet d'une part de rendre l'affichage des informations dynamique, mais aussi, dans certains cas d'alléger le traitement fait sur le poste client. En effet le serveur peut exécuter des traitements à la place du poste client. Dans le traitement des données par exemple, on aura tendance à déporter des calculs sur le serveur et à n'envoyer que le résultat au poste client. Cette infrastructure à l'avantage de repousser l'obsolescence du matériel des postes client, vu qu'on leur demande moins de puissance, tout en conservant un look & feel en accord avec le système d'exploitation de la machine. De plus cela permet toujours de demander au poste client d'exécuter des calculs lourds, comme des rendus 3D, ou des animations. Le client Riche s'impose donc lorsque l'on a un besoin de connectivité et de puissance et que l'on souhaite stocker des données sur le poste client.</div><div style="font: normal normal normal 12px/normal Helvetica; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-align: justify;"><br />
</div><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://3.bp.blogspot.com/_XU8RkqLv1J8/TSXtDpCbuaI/AAAAAAAAAC4/LSvwaV0YnoE/s1600/reeder-mac-1.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="198" src="http://3.bp.blogspot.com/_XU8RkqLv1J8/TSXtDpCbuaI/AAAAAAAAAC4/LSvwaV0YnoE/s320/reeder-mac-1.png" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Reeder pour mac</td></tr>
</tbody></table><div style="font: normal normal normal 12px/normal Helvetica; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-align: justify;"><br />
</div><div style="font: normal normal normal 12px/normal Helvetica; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; min-height: 14px; text-align: justify;"><br />
</div><div style="font: normal normal normal 12px/normal Helvetica; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; min-height: 14px; text-align: justify;"><b><span class="Apple-style-span" style="font-size: small;">Le Client Léger</span></b></div><div style="font: normal normal normal 12px/normal Helvetica; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; min-height: 14px; text-align: justify;"><br />
</div><div style="font: normal normal normal 12px/normal Helvetica; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-align: justify;">Enfin le Client Léger quand à lui dispose de l'extreme avantage ( pour le concepteur et le mainteneur ) de ne rien stocker sur le poste client. <i><b>Concrètement quels avantages cela apporte t'il ?</b></i><b> </b>Simplement dans la question des mises à jours de l'application cela est un énorme avantage. En effet la mise a jour se fait de manière totalement transparente, vu que l'interface est téléchargée depuis le serveur à chaque lancement. Le client léger s'impose donc lorsque l'on a la nécessité de mettre à jours fréquemment l'application, tant dans son fond, que dans sa forme. Le désavantage de cette solution est que pour l'instant les composants de l'application ne permettent pas d'obtenir les mêmes rendus que les composants natifs du poste client. Du moins on est limité aux capacité du web ou des frameworks <a href="http://fr.wikipedia.org/wiki/Rich_Internet_Application">RIA.</a> Le plus souvent, l'application est isolée dans une fenêtre de navigateur, mais certaines solution, comme Adobe Air permettent d'obtenir une application indépendante du navigateur et plus ou moins "maquillée" comme une application native.</div><div style="font: normal normal normal 12px/normal Helvetica; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-align: justify;"><br />
</div><div style="font: normal normal normal 12px/normal Helvetica; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-align: justify;">De nombreux frameworks existent pour faire du client léger, je ne vous citerai que <a href="http://code.google.com/intl/fr/webtoolkit/">GWT</a> (Google Web Toolkit, permet de créer des interfaces renduent en HTML en codant en JAVA) et <a href="http://fr.wikipedia.org/wiki/Adobe_Flex">Adobe Flex</a> ( Détournement de la technologie Flash pour faire des interfaces en ligne avec une intégration de la vidéo et des animations que le HTML ne permet pas ). Vu que le client léger n'a pas accès aux données du poste client par mesure de sécurité ( ce que l'on appelle "sandbox" ), il n'est pas possible de stocker directement ou de lire des informations en local. Tous est déporté sur le serveur. Il existe grâce à <a href="http://www.adobe.com/fr/products/air/">Air</a> un moyen de porter des applications créées avec les technologies du web sur le poste client. On peut ainsi repousser ces limites du clients léger en stockant en local, mais au final on perd l'intérêt du client léger pour revenir vers du client riche. Enfin il vous reste l'option de passer par la méthode traditionnelle, à savoir le HTML + CSS + Javascript, qui permet elle aussi de créer des applications (certes de moindre importance, car le type de code ne permet pas une bonne maintenance sur les gros projets), à la manière d'un site web.</div><div style="font: normal normal normal 12px/normal Helvetica; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-align: justify;"><br />
</div><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://2.bp.blogspot.com/_XU8RkqLv1J8/TSXtM_Al-AI/AAAAAAAAAC8/jr1tis5Dqek/s1600/gwt.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="251" src="http://2.bp.blogspot.com/_XU8RkqLv1J8/TSXtM_Al-AI/AAAAAAAAAC8/jr1tis5Dqek/s320/gwt.jpg" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Application faite avec Ext-GWT</td></tr>
</tbody></table><div style="font: normal normal normal 12px/normal Helvetica; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-align: justify;"><br />
Pour faire le point voici une infographie très parlante de <a href="http://www.camilleroux.com/">Camille Roux</a> permettant de faire le point sur les différentes technologies en matière d'interfaces selon l'axe que nous avons abordé.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="http://3.bp.blogspot.com/_XU8RkqLv1J8/TSbmRREs53I/AAAAAAAAADA/fX_-yeK2s5o/s1600/desktop-rda-ria-site-web.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="163" src="http://3.bp.blogspot.com/_XU8RkqLv1J8/TSbmRREs53I/AAAAAAAAADA/fX_-yeK2s5o/s320/desktop-rda-ria-site-web.jpg" width="320" /></a></div><br />
</div><div style="font: normal normal normal 12px/normal Helvetica; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; min-height: 14px; text-align: justify;"><br />
</div><div style="font: normal normal normal 12px/normal Helvetica; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; text-align: justify;">J'espère qu'au final ce billet aura éclairé vos lanternes. Je pense dans un futur plus ou moins certain me pencher sur la création d'un article ou je détaillerai les différentes technologies pour chacune de ces infrastructures. N'hésitez pas à laisser vos avis si vous pensez que je me suis lamentablement gouré sur un point ^^ Bonne continuation.</div>Gronobohttp://www.blogger.com/profile/18438387378413235524noreply@blogger.com0tag:blogger.com,1999:blog-7850317518242390886.post-82662708665926846702010-12-25T22:19:00.058+01:002010-12-25T23:42:51.124+01:00Chrome 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.<br />
<br />
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.<br />
<br />
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.<br />
<br />
<div style="float: left; margin: 5px;"><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://4.bp.blogspot.com/_XU8RkqLv1J8/TRZgOSwy0eI/AAAAAAAAACA/8aT7bKw4S3U/s1600/Capture+d%25E2%2580%2599%25C3%25A9cran+2010-12-25+%25C3%25A0+21.44.29.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="200" src="http://4.bp.blogspot.com/_XU8RkqLv1J8/TRZgOSwy0eI/AAAAAAAAACA/8aT7bKw4S3U/s200/Capture+d%25E2%2580%2599%25C3%25A9cran+2010-12-25+%25C3%25A0+21.44.29.png" width="181" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Chrome rendu de base </td></tr>
</tbody></table></div><div style="float: left; margin: 5px;"><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://2.bp.blogspot.com/_XU8RkqLv1J8/TRZghHz7d7I/AAAAAAAAACI/A7lIEe-sITw/s1600/Capture+d%25E2%2580%2599%25C3%25A9cran+2010-12-25+%25C3%25A0+21.44.57.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="200" src="http://2.bp.blogspot.com/_XU8RkqLv1J8/TRZghHz7d7I/AAAAAAAAACI/A7lIEe-sITw/s200/Capture+d%25E2%2580%2599%25C3%25A9cran+2010-12-25+%25C3%25A0+21.44.57.png" width="182" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Chrome après rendimentionnement</td></tr>
</tbody></table></div><div style="clear: both;"></div><div style="text-align: center;"><br />
</div><div><br />
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.</div><div><br />
</div><div><div style="float: left; margin: 5px;"><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://3.bp.blogspot.com/_XU8RkqLv1J8/TRZhIPci2cI/AAAAAAAAACY/BfDMExCB7P8/s1600/Capture+d%25E2%2580%2599%25C3%25A9cran+2010-12-25+%25C3%25A0+21.43.58.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="188" src="http://3.bp.blogspot.com/_XU8RkqLv1J8/TRZhIPci2cI/AAAAAAAAACY/BfDMExCB7P8/s200/Capture+d%25E2%2580%2599%25C3%25A9cran+2010-12-25+%25C3%25A0+21.43.58.png" width="200" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Firefox qui en chie (mystérieusement)</td></tr>
</tbody></table></div><div style="float: left; margin: 5px;"><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="http://3.bp.blogspot.com/_XU8RkqLv1J8/TRZg8LOMjXI/AAAAAAAAACQ/KgRR6dI68Fc/s1600/Capture+d%25E2%2580%2599%25C3%25A9cran+2010-12-25+%25C3%25A0+21.43.26.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="198" src="http://3.bp.blogspot.com/_XU8RkqLv1J8/TRZg8LOMjXI/AAAAAAAAACQ/KgRR6dI68Fc/s200/Capture+d%25E2%2580%2599%25C3%25A9cran+2010-12-25+%25C3%25A0+21.43.26.png" width="200" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Firefox qui gère</td></tr>
</tbody></table></div><div style="clear: both;"></div><div style="text-align: center;"><br />
</div><div style="text-align: center;"><br />
</div></div><div style="float: left; margin: 5px;"><table 1em;="" align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" left;"="" margin-right:="" text-align:=""><tbody>
<tr><td style="text-align: center;"><a href="http://3.bp.blogspot.com/_XU8RkqLv1J8/TRZhkVtdo7I/AAAAAAAAACo/8JbCYSfuvUk/s1600/Capture+d%25E2%2580%2599%25C3%25A9cran+2010-12-25+%25C3%25A0+21.46.30.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="200" src="http://3.bp.blogspot.com/_XU8RkqLv1J8/TRZhkVtdo7I/AAAAAAAAACo/8JbCYSfuvUk/s200/Capture+d%25E2%2580%2599%25C3%25A9cran+2010-12-25+%25C3%25A0+21.46.30.png" width="180" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Opera</td></tr>
</tbody></table></div><div style="float: left; margin: 5px;"><table 1em;="" align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" left;"="" margin-right:="" text-align:=""><tbody>
<tr><td style="text-align: center;"><a href="http://4.bp.blogspot.com/_XU8RkqLv1J8/TRZhXO1E3bI/AAAAAAAAACg/5feuMCFtJX8/s1600/Capture+d%25E2%2580%2599%25C3%25A9cran+2010-12-25+%25C3%25A0+21.45.49.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="200" src="http://4.bp.blogspot.com/_XU8RkqLv1J8/TRZhXO1E3bI/AAAAAAAAACg/5feuMCFtJX8/s200/Capture+d%25E2%2580%2599%25C3%25A9cran+2010-12-25+%25C3%25A0+21.45.49.png" width="199" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Safari</td></tr>
</tbody></table></div><div style="clear: both;"></div><br />
<div>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.</div>Gronobohttp://www.blogger.com/profile/18438387378413235524noreply@blogger.com2tag:blogger.com,1999:blog-7850317518242390886.post-18728455233542369092010-12-22T12:38:00.021+01:002011-01-17T21:23:30.142+01:00Blocs aux coins arrondis de taille variable sans CSS3<div class="p1" style="text-align: justify;">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.</div><div class="p1" style="text-align: justify;">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.</div><div class="p1">Tout d'abords réalisez votre bloc arrondis dans votre logiciel de dessin préféré.<br />
<br />
</div><div class="separator" style="clear: both; text-align: center;"><a href="http://1.bp.blogspot.com/_XU8RkqLv1J8/TRHjy1w4TQI/AAAAAAAAAAs/4ZAkS1FM6Kk/s1600/1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="200" src="http://1.bp.blogspot.com/_XU8RkqLv1J8/TRHjy1w4TQI/AAAAAAAAAAs/4ZAkS1FM6Kk/s200/1.png" width="160" /></a><a href="http://2.bp.blogspot.com/_XU8RkqLv1J8/TRHkWELxBEI/AAAAAAAAAA0/B0SEr8NzLwk/s1600/2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="200" src="http://2.bp.blogspot.com/_XU8RkqLv1J8/TRHkWELxBEI/AAAAAAAAAA0/B0SEr8NzLwk/s200/2.png" width="157" /></a></div><br />
<div class="p1" style="text-align: justify;">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.</div><div class="p2" style="text-align: justify;"><br />
</div><div class="p1" style="text-align: justify;">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.</div><div class="p2" style="text-align: justify;"><div class="separator" style="clear: both; text-align: center;"><br />
</div><div class="separator" style="clear: both; text-align: center;"><a href="http://3.bp.blogspot.com/_XU8RkqLv1J8/TRHkloSHAhI/AAAAAAAAAA8/c6lRrpMFv_E/s1600/3.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://3.bp.blogspot.com/_XU8RkqLv1J8/TRHkloSHAhI/AAAAAAAAAA8/c6lRrpMFv_E/s1600/3.png" /></a><a href="http://3.bp.blogspot.com/_XU8RkqLv1J8/TRHkvRKtcoI/AAAAAAAAABE/NeZeUdpbNtc/s1600/4.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://3.bp.blogspot.com/_XU8RkqLv1J8/TRHkvRKtcoI/AAAAAAAAABE/NeZeUdpbNtc/s1600/4.png" /></a></div><br />
</div><div class="p1">Une fois le découpage effectué, il faut passer aux chose sérieuses et mettre le main dans le code.</div><div class="p1"><div class="separator" style="clear: both; text-align: center;"><a href="http://2.bp.blogspot.com/_XU8RkqLv1J8/TRHluSImw0I/AAAAAAAAABM/KW_DJIRK_vI/s1600/8.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="77" src="http://2.bp.blogspot.com/_XU8RkqLv1J8/TRHluSImw0I/AAAAAAAAABM/KW_DJIRK_vI/s320/8.png" width="320" /></a></div><br />
</div><div class="p1" style="text-align: justify;">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. </div><div class="separator" style="clear: both; text-align: center;"><br />
</div><div class="separator" style="clear: both; text-align: center;"><a href="http://2.bp.blogspot.com/_XU8RkqLv1J8/TRHmD6EqShI/AAAAAAAAABU/HgCabpJzh34/s1600/6.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="200" src="http://2.bp.blogspot.com/_XU8RkqLv1J8/TRHmD6EqShI/AAAAAAAAABU/HgCabpJzh34/s200/6.png" width="170" /></a></div><div class="p2" style="text-align: justify;"><br />
</div><div class="p1">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.</div><div class="p2">- C'est bien beau tous ça mais ou je met mon contenu dans ce bloc?</div><div class="p1" style="text-align: justify;">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.<br />
<br />
</div><div style="text-align: left;"><div class="separator" style="clear: both; text-align: center;"></div><div class="separator" style="clear: both; text-align: center;"><a href="http://3.bp.blogspot.com/_XU8RkqLv1J8/TRHr80Wj8-I/AAAAAAAAABk/ikVmZCAsAgg/s1600/9.png" imageanchor="1" style="clear: left; display: inline !important; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="320" src="http://3.bp.blogspot.com/_XU8RkqLv1J8/TRHr80Wj8-I/AAAAAAAAABk/ikVmZCAsAgg/s320/9.png" width="152" /><span class="Apple-style-span" style="-webkit-text-decorations-in-effect: none; color: black;"></span></a><a href="http://4.bp.blogspot.com/_XU8RkqLv1J8/TRHsFDb_TsI/AAAAAAAAABs/485SD0d4dsw/s1600/10.png" imageanchor="1" style="clear: left; display: inline !important; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="138" src="http://4.bp.blogspot.com/_XU8RkqLv1J8/TRHsFDb_TsI/AAAAAAAAABs/485SD0d4dsw/s200/10.png" width="200" /></a></div><a href="http://4.bp.blogspot.com/_XU8RkqLv1J8/TRHsFDb_TsI/AAAAAAAAABs/485SD0d4dsw/s1600/10.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><span class="Apple-style-span" style="-webkit-text-decorations-in-effect: none; color: black;"></span></a><br />
<div class="separator" style="clear: both; text-align: center;"><a href="http://4.bp.blogspot.com/_XU8RkqLv1J8/TRHsFDb_TsI/AAAAAAAAABs/485SD0d4dsw/s1600/10.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"></a></div><br />
</div><div>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 <a href="https://docs.google.com/leaf?id=0ByCh3RzbkHp_NGI3Y2NkMDAtODlmNS00MWUxLTkwNjAtNWZkYTk4OTAxNTk3&sort=name&layout=list&num=50">ce lien</a>. N'hésitez pas à posez vos question si vous en avez. Allez bon courage.</div>Gronobohttp://www.blogger.com/profile/18438387378413235524noreply@blogger.com1tag:blogger.com,1999:blog-7850317518242390886.post-81662209686315237092010-12-20T06:49:00.023+01:002010-12-21T15:07:48.238+01:00Bande de VeinardsA 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 <a href="http://www.citedudesign.com/">cité du Design de Saint Etienne</a>. 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.<div><br /><div><a href="http://www.flickr.com/photos/gronobo/5279795775/" title="affiche biennale by gronobo, on Flickr"><img src="http://farm6.static.flickr.com/5246/5279795775_2e5a3a4bf8.jpg" width="500" height="375" alt="affiche biennale" /></a></div><div><br /></div><div style="float:left;margin:10px;"><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://4.bp.blogspot.com/_XU8RkqLv1J8/TQ75nFffRNI/AAAAAAAAAAk/5cfrNuRXAk4/s1600/biennale2.jpg"><img style="cursor:pointer; cursor:hand;width: 105px; height: 320px;" src="http://4.bp.blogspot.com/_XU8RkqLv1J8/TQ75nFffRNI/AAAAAAAAAAk/5cfrNuRXAk4/s320/biennale2.jpg" border="0" alt="" id="BLOGGER_PHOTO_ID_5552649840478864594" /></a></div><div style="float:left;"><a href="http://www.flickr.com/photos/gronobo/5276602840/" title="hirondelle Saint Etienne by gronobo, on Flickr"><img src="http://farm6.static.flickr.com/5204/5276602840_8c9bf6c4ca_m.jpg" width="240" height="320" alt="hirondelle Saint Etienne" /></a></div><div><a href="http://www.flickr.com/photos/gronobo/5276602840/" title="hirondelle Saint Etienne by gronobo, on Flickr"></a></div><div style="clear:both;"></div><div style="float:left;"><img src="http://1.bp.blogspot.com/_XU8RkqLv1J8/TQ7yC1_VYZI/AAAAAAAAAAc/GPQdXRM7yTg/s320/biennale3.jpg" style="cursor:pointer; cursor:hand;width: 145px; height: 320px;" border="0" alt="" id="BLOGGER_PHOTO_ID_5552641521260781970" /></div><div style="float:left;"><img src="http://3.bp.blogspot.com/_XU8RkqLv1J8/TQ7xJmsE50I/AAAAAAAAAAU/-vMkOLrog64/s320/biennale1.jpg" style=" margin-left:10px; cursor:pointer; cursor:hand;width: 189px; height: 320px;" border="0" alt="" id="BLOGGER_PHOTO_ID_5552640537900934978" /></div></div>Gronobohttp://www.blogger.com/profile/18438387378413235524noreply@blogger.com0tag:blogger.com,1999:blog-7850317518242390886.post-35831793201899312332010-12-16T20:36:00.012+01:002010-12-16T20:50:55.936+01:00Mes photos<p> Parce que j'aime la photo,et que je suis très narcissique voici quelques clichés que vous pourrez trouver sur mon <a href="http://www.flickr.com/photos/gronobo/">photostream Flickr</a></p><br /><div style="float:left;margin:10px;"><img src="http://farm6.static.flickr.com/5165/5263643456_18fbe03c76_m.jpg" width="200" height="240" alt="L'ère du pétrole" /></div><div><br /></div><div style="float:left;margin:10px"><img src="http://farm5.static.flickr.com/4128/5095965271_4d4270f8cb_m.jpg" width="240" height="180" alt="Un champ" /></div><br /><div style="clear:both"></div><br /><div style="float:left;margin:10px"><img src="http://farm5.static.flickr.com/4125/5096561390_c73b49dd9f.jpg" width="180" height="240" alt="and Again" /></div><div style="float:left;margin:10px"><img src="http://farm5.static.flickr.com/4124/5096561182_e2f71d3b51.jpg" width="240" height="180" alt="Les courses" /></div>Gronobohttp://www.blogger.com/profile/18438387378413235524noreply@blogger.com0tag:blogger.com,1999:blog-7850317518242390886.post-22478462761648065162010-12-16T16:00:00.019+01:002011-01-07T09:56:32.933+01:00Où 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 ?<br />
<br />
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.<br />
<br />
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.<br />
<br />
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 : <a href="http://www.diogene.ch/article.php3?id_article=1491">"La volonté de paresse, de Philippe Godard, Paul Lafargue, Raoul Vaneigem, Pauline Wagner"</a> qui à su mettre des mots sur ce que je ressentais.<br />
<div><a href="http://4.bp.blogspot.com/_XU8RkqLv1J8/TRPFaJ-2kcI/AAAAAAAAAB0/7ckER1Z5JXs/s1600/paresse.jpg"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5553999818624766402" src="http://4.bp.blogspot.com/_XU8RkqLv1J8/TRPFaJ-2kcI/AAAAAAAAAB0/7ckER1Z5JXs/s320/paresse.jpg" style="cursor: pointer; height: 300px; width: 183px;" /></a></div>Gronobohttp://www.blogger.com/profile/18438387378413235524noreply@blogger.com0tag:blogger.com,1999:blog-7850317518242390886.post-58240633136190994022010-12-10T13:01:00.001+01:002010-12-23T22:59:55.540+01:00Qui suis-je?<div class="separator" style="clear: both; text-align: center;"><a href="http://1.bp.blogspot.com/_OTPtFOdZic4/TQIUA1lp6AI/AAAAAAAAABk/KNyPiE712vk/s1600/Capture+d%25E2%2580%2599e%25CC%2581cran+2010-12-10+a%25CC%2580+12.49.32.png" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="183" src="http://1.bp.blogspot.com/_OTPtFOdZic4/TQIUA1lp6AI/AAAAAAAAABk/KNyPiE712vk/s200/Capture+d%25E2%2580%2599e%25CC%2581cran+2010-12-10+a%25CC%2580+12.49.32.png" width="200" /></a></div><div class="p1"><div style="text-align: justify;">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.</div><br />Voici quelques applications que j'ai pu développer.<br /><br /><br /><b>Interface de gestion interne de l'entreprise en JAVA/GWT</b><br /><object height="385" width="480"><param name="movie" value="http://www.youtube.com/v/KhvNQbh91H4?fs=1&hl=fr_FR"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/KhvNQbh91H4?fs=1&hl=fr_FR" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="480" height="385"></embed></object><br /><br /><br /><b>Interface de suivi des dépenses clients en JAVA/GWT</b><br /><object height="385" width="480"><param name="movie" value="http://www.youtube.com/v/B3JKwCCA9uk?fs=1&hl=fr_FR"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/B3JKwCCA9uk?fs=1&hl=fr_FR" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="480" height="385"></embed></object><br /><br /><br /><b>Interface de connexion et de jeu pour les enfants en HTML/JavaScript (Jquery)</b><br /><object height="385" width="480"><param name="movie" value="http://www.youtube.com/v/BUtVnC6gwnA?fs=1&hl=fr_FR"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/BUtVnC6gwnA?fs=1&hl=fr_FR" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="480" height="385"></embed></object></div>Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-7850317518242390886.post-91897919172946714832010-11-24T11:27:00.006+01:002010-12-22T13:19:13.939+01:00Compte rendu de la conférence "Mobilité des villes" Biennale du Design Saint Etienne, Thème : La téléportation – 20 novembre 2010<div style="text-align: justify;">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 <a href="http://fr.wikipedia.org/wiki/Curitiba">Curitiba</a> (Brésil) : Jaime Lerner. La conférence fut (brillamment) animée par <a href="http://www.telerama.fr/scenes/constance-rubini-le-bel-objet-c-est-quand-il-n-y-a-plus-rien-a-retirer-ni-a-ajouter,61262.php">Constance Rubini</a>.</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;"><br /></div><div style="text-align: justify;"><i>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.</i></div><div><div style="text-align: justify;"><br /></div></div><div><div><div class="separator" style="clear: both; text-align: center;"></div><div style="text-align: justify;">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.</div></div><div><div style="text-align: justify;"><br /></div></div><div><div class="separator" style="clear: both; text-align: center;"></div><div class="separator" style="clear: both; text-align: center;"></div><div style="text-align: justify;">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 <a href="http://fr.wikipedia.org/wiki/%C3%89talement_urbain">l'étalement urbain</a>. </div></div><div><div style="text-align: justify;"><br /></div></div><div><div style="text-align: left;"><a href="http://3.bp.blogspot.com/_OTPtFOdZic4/TOzgb5SqCqI/AAAAAAAAABM/NYzVjvDAU7U/s1600/P1010880.JPG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="150" src="http://3.bp.blogspot.com/_OTPtFOdZic4/TOzgb5SqCqI/AAAAAAAAABM/NYzVjvDAU7U/s200/P1010880.JPG" width="200" /></a></div><div style="text-align: justify;">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.</div></div></div><div><div style="text-align: justify;"><br /></div></div><div><div class="separator" style="clear: both; text-align: center;"></div><div class="separator" style="clear: both; text-align: center;"></div><table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: right; margin-left: 1em; text-align: right;"><tbody><tr><td style="text-align: center;"><a href="http://3.bp.blogspot.com/_OTPtFOdZic4/TOzg6OfCxdI/AAAAAAAAABQ/imIKx8Afh7U/s1600/caracas.jpg" imageanchor="1" style="clear: right; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img border="0" height="150" src="http://3.bp.blogspot.com/_OTPtFOdZic4/TOzg6OfCxdI/AAAAAAAAABQ/imIKx8Afh7U/s200/caracas.jpg" width="200" /></a></td></tr><tr><td class="tr-caption" style="text-align: center;">Quartiers défavorisés de Caracas</td></tr></tbody></table><div style="text-align: justify;"> 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 <a href="http://fr.wikipedia.org/wiki/Caracas">Caracas</a> 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.</div></div><div><div style="text-align: justify;"><br /></div></div><div><div style="text-align: justify;">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.</div></div><div><div style="text-align: justify;"><br /></div></div><div><div class="separator" style="clear: both; text-align: center;"></div><div style="text-align: justify;">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 <a href="http://fr.wikipedia.org/wiki/Tram-train">tram-train</a>.<i> 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.</i></div><div style="text-align: justify;"><br /></div><table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: right; margin-left: 1em; text-align: right;"><tbody><tr><td style="text-align: center;"><a href="http://1.bp.blogspot.com/_OTPtFOdZic4/TOzkdSaP3QI/AAAAAAAAABY/UmBpG30bZH8/s1600/Manufacture-Chemetoff.jpg" imageanchor="1" style="clear: right; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img border="0" height="215" src="http://1.bp.blogspot.com/_OTPtFOdZic4/TOzkdSaP3QI/AAAAAAAAABY/UmBpG30bZH8/s320/Manufacture-Chemetoff.jpg" width="320" /></a></td></tr><tr><td class="tr-caption" style="text-align: center;">Espace Manufacture Plaine Achille - Saint Etienne</td></tr></tbody></table><div style="text-align: justify;"><i></i>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.</div></div><div><div style="text-align: justify;"><br /></div></div><div><div style="text-align: justify;">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.</div></div><div><div style="text-align: justify;"><br /></div></div><div><div style="text-align: justify;">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.</div></div><div><div style="text-align: justify;"><br /></div></div><div><div class="separator" style="clear: both; text-align: center;"><a href="http://4.bp.blogspot.com/_OTPtFOdZic4/TOzlI9IyVGI/AAAAAAAAABc/AUCoEXwVjR0/s1600/vue-saint-etienne.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://4.bp.blogspot.com/_OTPtFOdZic4/TOzlI9IyVGI/AAAAAAAAABc/AUCoEXwVjR0/s1600/vue-saint-etienne.jpg" /></a></div><div class="separator" style="clear: both; text-align: center;"><br /></div><div style="text-align: justify;">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'<a href="http://maps.google.fr/maps?f=q&source=s_q&hl=fr&q=Yverdon-les-Bains,+Jura-Nord+vaudois,+Vaud,+Suisse&sll=46.754917,1.73584&sspn=8.083679,17.885742&ie=UTF8&oi=geospell&cd=1&geocode=FbzHyQIdDlVlAA&split=0&hq=&hnear=Yverdon-les-Bains,+Jura-Nord+vaudois,+Vaud,+Suisse&z=14">Yverdon-les-bains</a> 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.</div></div><div><div style="text-align: justify;"><br /></div></div><div><div style="text-align: justify;"><i>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.</i></div></div><div><div style="text-align: justify;"><br /></div></div><div><div style="text-align: justify;">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.</div></div><div><div style="text-align: justify;"><br /></div></div><div><div style="text-align: justify;"><i>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 : <a href="http://fr.wikipedia.org/wiki/Michel_Corajoud">Michel Corajoud</a>. 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.</i></div></div><div><div style="text-align: justify;"><br /></div></div><div><div style="text-align: justify;"> 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.</div></div><div><div style="text-align: justify;"><br /></div></div><div><div style="text-align: justify;">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. <i>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.</i></div></div><div><div style="text-align: justify;"><br /></div></div><div><div><div style="text-align: justify;"> 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 : <i><b>« Dégage, j'aménage »</b></i> qui montre à quel points certains paysagistes peuvent se fourvoyer dans leur métiers. Phrase qu'il compléta par la suivante : <i><b>« On tue la vie en croyant l'introduire »</b></i>. </div></div></div><div><div style="text-align: justify;"><br /></div></div><div><div><div class="separator" style="clear: both; text-align: center;"></div><table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: right; margin-left: 1em; text-align: right;"><tbody><tr><td style="text-align: center;"><a href="http://1.bp.blogspot.com/_OTPtFOdZic4/TOzlhxAe7yI/AAAAAAAAABg/SjAo8-ELIdI/s1600/le-quai-colbert-en-2009_620x465.jpg" imageanchor="1" style="clear: right; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img border="0" height="186" src="http://1.bp.blogspot.com/_OTPtFOdZic4/TOzlhxAe7yI/AAAAAAAAABg/SjAo8-ELIdI/s200/le-quai-colbert-en-2009_620x465.jpg" width="200" /></a></td></tr><tr><td class="tr-caption" style="text-align: center;">Quai de Bordeaux</td></tr></tbody></table><div style="text-align: justify;">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 <i><b>« qui se dressent face à nous tel des guillotines »</b></i>. La ville d'avenir pour lui, sera une ville <i><b>« poreuse »</b></i> ou il mettrai de <i><b>« grands coups de marteau-piqueur dans ces amas géométriques pour que revienne s'y loger la vie »</b></i> 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 <i><b>« Je me fou des plantes »</b></i> d'un air provocateur, <i><b>« tout ce qui me préoccupe c'est le bonheur des gens »</b></i>. 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 <i><b>« 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é »</b></i>.</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">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 <a href="http://www.biennale2010.citedudesign.com/">biennale du Design</a> à Saint Etienne. Une version PDF est disponible <a href="https://docs.google.com/viewer?a=v&pid=explorer&chrome=true&srcid=0ByCh3RzbkHp_NzA2NTRiYTItZDQ5OC00YmRjLWFhYmQtMThiMWE5M2YyN2Nh&hl=en&authkey=CMiH278O">ici</a>.</div></div></div>Unknownnoreply@blogger.com0