<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>css 4 design &#187; Ajax</title>
	<atom:link href="http://css4design.com/tag/ajax/feed" rel="self" type="application/rss+xml" />
	<link>http://css4design.com</link>
	<description>Le blog de l&#039;intégrateur web</description>
	<lastBuildDate>Sun, 05 Feb 2012 18:10:56 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
	<atom:link rel='hub' href='http://css4design.com/?pushpress=hub'/>
		<item>
		<title>Le web 2.0 peut être dangereux&#8230; pour vos profits</title>
		<link>http://css4design.com/le-web-20-peut-etre-dangereux-pour-vos-profits</link>
		<comments>http://css4design.com/le-web-20-peut-etre-dangereux-pour-vos-profits#comments</comments>
		<pubDate>Mon, 17 Dec 2007 19:40:44 +0000</pubDate>
		<dc:creator>Bruno Bichet</dc:creator>
				<category><![CDATA[Conception de site web]]></category>
		<category><![CDATA[Ergonomie & Accessibilité]]></category>
		<category><![CDATA[Web 2.0]]></category>
		<category><![CDATA[Ajax]]></category>
		<category><![CDATA[E-commerce]]></category>
		<category><![CDATA[Ergonomie]]></category>

		<guid isPermaLink="false">http://www.css4design.com/index.php/2007/12/17/184-le-web-20-peut-etre-dangereux-pour-vos-profits</guid>
		<description><![CDATA[Le gourou de l&#8217;utilisabilité, de l&#8217;ergonomie et du design web (au sens d&#8217;architecture web) Jakob Nielsen nous propose de réfléchir sur le web 2.0 du point de vue des fonctionnalités et de leur adéquation avec les besoins et les attentes de l&#8217;utilisateur. Voici un rapide résumé de son alertbox. Ajax, interfaces riches, mashups, web social et User Generated Content ajoutent souvent plus de complexité qu&#8217;ils n&#8217;offrent de solution. Ce web 2.0 détourne les ressources graphiques et prouve (une fois encore) que le ramage ne se rapporte pas toujours au plumage : Ajax et les interfaces riches : trop de complexité, [...]]]></description>
			<content:encoded><![CDATA[<div class="tweetmeme_button" style="float: right; margin-left: 18px;">
			<a href="http://api.tweetmeme.com/share?url=http%3A%2F%2Fcss4design.com%2Fle-web-20-peut-etre-dangereux-pour-vos-profits">
				<img src="http://api.tweetmeme.com/imagebutton.gif?url=http%3A%2F%2Fcss4design.com%2Fle-web-20-peut-etre-dangereux-pour-vos-profits&amp;source=br1o&amp;style=normal&amp;service=bit.ly&amp;service_api=R_0c1ee4b64f105d1b2672690740a77d6a&amp;b=2" height="61" width="50" />
			</a>
		</div><p>Le gourou de l&#8217;utilisabilité, de l&#8217;ergonomie et du design web (au sens d&#8217;architecture web) <a href="http://www.useit.com/jakob/">Jakob Nielsen </a>nous propose de réfléchir sur le web 2.0 du point de vue des fonctionnalités et de leur adéquation avec les besoins et les attentes de l&#8217;utilisateur. Voici un rapide résumé de son <a href="http://www.useit.com/alertbox/web-2.html">alertbox</a>.<span id="more-162"></span></p>

<p>Ajax, interfaces riches, <em>mashups</em>, web social et <em>User Generated Content</em> ajoutent souvent plus de complexité qu&#8217;ils n&#8217;offrent de solution. Ce web 2.0 détourne les ressources graphiques et prouve (une fois encore) que le ramage ne se rapporte pas toujours au plumage :</p>

<ul>
    <li> Ajax et les interfaces riches : trop de complexité,</li>
    <li> Réseaux sociaux et <em>User Generated Content</em> : trop peu d&#8217;utilisateurs,</li>
    <li><em> Mashups</em> :  confusion des marques,</li>
    <li> Modèle économique basé sur la publicité : bulle 2.0,</li>
    <li> Sites web qui &laquo;&nbsp;déchirent&nbsp;&raquo; : non-représentatifs des sites commerciaux.</li>
</ul>

<h3>En bref</h3>

<p>Ajoutez une pincée de fonction web 2.0, mais concentrez-vous sur le coeur de votre service ! Pour nous guider, Jakob propose de doser l&#8217;infusion des fonctionnalités web 2.0 en fonction  des différentes sortes d&#8217;expérience utilisateur :</p>

<ul>
    <li>Information, marketing (corporate, gouvernemental ou associatif) : 10%,</li>
    <li>E-commerce : 20%,</li>
    <li>Médias : 30%,</li>
    <li>Intranets : 40%,</li>
    <li>Applications web : 50%.</li>
</ul>

<h3 class='related_post_title'>Articles sur le même sujet</h3>

<ul class='related_post'><li><a href='http://css4design.com/le-design-serait-inutile-dans-80-des-cas' title='Le Design serait inutile dans 80% des cas'>Le Design serait inutile dans 80% des cas</a></li><li><a href='http://css4design.com/l-experience-utilisateur-au-centre-de-l-ergonomie-des-sites-web' title='L&#039;expérience utilisateur et l&#039;ergonomie des sites web'>L&#039;expérience utilisateur et l&#039;ergonomie des sites web</a></li><li><a href='http://css4design.com/quels-sont-les-services-web-2-0-que-j-ai-utilises-aujourdhui' title='Quels sont les services web 2.0 que j&#039;ai utilisés aujourd’hui ?'>Quels sont les services web 2.0 que j&#039;ai utilisés aujourd’hui ?</a></li><li><a href='http://css4design.com/css-naked-day-copaing-lyon-blog-css2-pratique-du-design-web' title='CSS Naked Day + Copaing + Lyon Blog + CSS2 Pratique&#8230;'>CSS Naked Day + Copaing + Lyon Blog + CSS2 Pratique&#8230;</a></li><li><a href='http://css4design.com/netvibes-web-2-0-vs-google-reader-plus-1' title='Netvibes : web 2.0 vs Google Reader : +1'>Netvibes : web 2.0 vs Google Reader : +1</a></li></ul>
 <p><a href="http://css4design.com/?flattrss_redirect&amp;id=162&amp;md5=a6dfebc7afd0b37f6458013776bffdfe" title="Flattr" target="_blank"><img src="http://css4design.com/wp-content/plugins/flattr/img/flattr-badge-large.png" alt="flattr this!"/></a></p>]]></content:encoded>
			<wfw:commentRss>http://css4design.com/le-web-20-peut-etre-dangereux-pour-vos-profits/feed</wfw:commentRss>
		<slash:comments>8</slash:comments>
		<atom:link rel="payment" href="http://css4design.com/?flattrss_redirect&amp;id=162&amp;md5=a6dfebc7afd0b37f6458013776bffdfe" type="text/html" />
	</item>
		<item>
		<title>Quels sont les services web 2.0 que j&#039;ai utilisés aujourd’hui ?</title>
		<link>http://css4design.com/quels-sont-les-services-web-2-0-que-j-ai-utilises-aujourdhui</link>
		<comments>http://css4design.com/quels-sont-les-services-web-2-0-que-j-ai-utilises-aujourdhui#comments</comments>
		<pubDate>Fri, 29 Jun 2007 12:42:49 +0000</pubDate>
		<dc:creator>Bruno Bichet</dc:creator>
				<category><![CDATA[Web 2.0]]></category>
		<category><![CDATA[Ajax]]></category>
		<category><![CDATA[Blog]]></category>
		<category><![CDATA[Dotclear]]></category>
		<category><![CDATA[Google]]></category>
		<category><![CDATA[Réseaux sociaux]]></category>
		<category><![CDATA[WordPress]]></category>

		<guid isPermaLink="false">http://www.css4design.com/blog-reloaded/?p=98</guid>
		<description><![CDATA[Le Prince d&#8217;OpenLaszlo vient de me convier à poursuivre une chaîne initiée par Jacques Froissant d&#8217;Altaïde &#8211; probablement le chasseur de tête 2.0 le plus chassé d&#8217;internet ;) &#8211; dont le but est de dire quelques mots sur les services web 2.0 que l&#8217;on utilise tous les jours, ou presque. Communication Gmail : la boite mail accessible partout que j&#8217;utilise depuis un peu plus d&#8217;un an maintenant. J&#8217;ai quand même configuré Opera pour avoir une copie locale de ma correspondance. J&#8217;apprécie particulièrement la réactivité globale, les filtres (règles de messages), la gestion très souple du classement par Labels (tags) même [...]]]></description>
			<content:encoded><![CDATA[<div class="tweetmeme_button" style="float: right; margin-left: 18px;">
			<a href="http://api.tweetmeme.com/share?url=http%3A%2F%2Fcss4design.com%2Fquels-sont-les-services-web-2-0-que-j-ai-utilises-aujourdhui">
				<img src="http://api.tweetmeme.com/imagebutton.gif?url=http%3A%2F%2Fcss4design.com%2Fquels-sont-les-services-web-2-0-que-j-ai-utilises-aujourdhui&amp;source=br1o&amp;style=normal&amp;service=bit.ly&amp;service_api=R_0c1ee4b64f105d1b2672690740a77d6a&amp;b=2" height="61" width="50" />
			</a>
		</div><p>Le <a href="http://www.misterpatate.fr/?p=254" title="aka Mister Patate" hreflang="fr">Prince d&#8217;OpenLaszlo</a> vient de me convier à poursuivre une chaîne initiée par <a href="http://altaide.typepad.com/about.html" hreflang="fr">Jacques Froissant</a> d&#8217;<a href="http://altaide.typepad.com/" hreflang="fr">Altaïde</a> &#8211; probablement le chasseur de tête 2.0 le plus chassé d&#8217;internet ;) &#8211; dont le but est de dire quelques mots sur les services web 2.0 que l&#8217;on utilise tous les jours, ou presque.<span id="more-108"></span></p>

<h3>Communication</h3>

<ul>
    <li> <a href="http://mail.google.com" hreflang="fr">Gmail</a> : la boite mail accessible partout que j&#8217;utilise depuis un peu plus d&#8217;un an maintenant. J&#8217;ai quand même configuré <a href="http://www.opera.com/" hreflang="fr">Opera</a> pour avoir une copie locale de ma correspondance. J&#8217;apprécie particulièrement la réactivité globale, les filtres (règles de messages), la gestion très souple du classement par Labels (tags) même si un peu de rigueur dans l&#8217;organisation aide aussi ;) J&#8217;arrive à 37% d&#8217;utilisation sur les 3 Giga disponibles (je me sers de <a href="http://fr.wikipedia.org/wiki/Gmail_Drive" hreflang="fr">Gmail Drive</a> pour quelques sauvegardes).</li>
    <li> <a href="http://twitter.com/br1o" hreflang="en">Twitter</a> : Parce que je le veux bien ;) Pratique pour être en contact avec des personnes que l&#8217;on n&#8217;a pas forcément parmi ses contacts MSN&#8230;</li>
    <li> <a href="http://www.windowslive.fr/messenger/default.asp" hreflang="fr">MSN Messenger</a> : disponible sur tous les ordinateurs de France, de Navarre et hors de nos frontières, et puis tout le monde n&#8217;est pas sur Twitter :p</li>
</ul>

<h3>Page personnalisable</h3>

<ul>
    <li> J&#8217;utilise de moins en moins <a href="http://www.netvibes.com/" hreflang="fr">Netvibes</a> à cause des ralentissements désagréables qu&#8217;il provoque dans mon Firefox sous w2k. Et puisque <a href="http://www.google.fr/ig" hreflang="fr">iGoogle</a> est définitivement trop moche &#8211; les widgets sont tous plus affreux les uns que les autres, et le pire, c&#8217;est que leurs laideurs n&#8217;arrivent même pas à s&#8217;harmoniser entre elles &#8211; je n&#8217;utilise plus de page personnalisable. Na !</li>
</ul>

<h3>Organisation</h3>

<ul>
    <li> <a href="http://entreprise.01net.com/windows/Bureautique/agenda/fiches/30844.html" hreflang="fr">Post-it</a> : Pour prendre des notes avec une page web sous les yeux.</li>
    <li> <a href="http://www.google.com/notebook/" hreflang="en">Google Notebook</a> : Très pratique pour structurer les notes un peu longues prises avec <em>Post-it</em>.</li>
    <li> <a href="http://www.google.com/calendar/" hreflang="fr">Google Calendar</a> : Je m&#8217;y met doucement et je suis vraiment emballé par l&#8217;ergonomie et les fonctions de partage d&#8217;agenda.</li>
    <li> <a href="http://www.43things.com/" hreflang="en">43Things</a> : pour se fixer des objectifs (plutôt sur le long terme) en organisant le suivi avec la tenue d&#8217;un mini-blog pour faire le point sur les étapes accomplies et obtenir l&#8217;avis de ceux qui partagent le même but. Bon, j&#8217;avoue que je ne l&#8217;utilise pas vraiment tous les jours, mais il y a du potentiel quand on se lance dans un projet complexe qui nécessite un <em>feed back</em> de la part d&#8217;une communauté. Bon, en même temps on peut aussi ouvrir un blog dédié&#8230;</li>
</ul>

<h3>Bureautique</h3>

<ul>
    <li> <a href="http://docs.google.com/" hreflang="fr">Google Document &amp; Tableur</a> : super pratique pour ouvrir un document <em>Office</em> depuis <em>Gmail</em> sans le télécharger pour autant (bien plus rapide que de l&#8217;ouvrir avec <a href="http://fr.openoffice.org/" hreflang="fr">OpenOffice.org</a>).</li>
    <li> <a href="http://entreprise.01net.com/windows/Bureautique/agenda/fiches/30844.html" hreflang="fr">Post-it</a> : je commence presque toujours mes textes avec ce petit utilitaire astucieux pour les continuer sur <em>OOo</em> ou sur <em>Google Document</em>.</li>
</ul>

<h3>blogs</h3>

<ul>
    <li> <a href="http://wordpress.org/" hreflang="en">WordPress</a> : Code Quantum!</li>
    <li> <a href="http://www.dotclear.net/" hreflang="fr">DotClear</a> : Da Vinci Code!</li>
    <li> <a href="http://www.google.com/reader/" hreflang="fr">Google Reader</a> : celui que j&#8217;utilise le plus. Je teste également <a href="http://www.bloglines.com/" hreflang="en">bloglines</a> et <a href="http://www.newsgator.com/" hreflang="en">newsgator</a>.</li>
</ul>

<h3>Statistiques</h3>

<ul>
    <li> <a href="http://www.google.com/analytics/" hreflang="en">Google Analytics</a> : indispensable. Devient par la force des choses la référence en matière de mesure d&#8217;audience. La nouvelle version satisfera les petits et les grands.</li>
    <li> <a href="http://www.iminr.com/" hreflang="fr">iMinr</a> : il est possible de configurer soi-même les données à analyser. Nécessite quand même : 1) de savoir ce que l&#8217;on veut, et 2) de savoir le programmer.</li>
    <li> <a href="http://www.toutlemondeenblogue.com/" hreflang="fr">TLMEB</a> : Ce site propose un classement des blogs sur une donnée très pertinente : le nombre de visiteurs uniques sur 7 jours glissants par catégorie thématique. Les chiffres sont fournis grâce à un script à installer soi-même. C&#8217;est apparemment la même personne (ou société) qui est à l&#8217;initiative de <em>iMinr</em>.</li>
    <li> <a href="http://spongestats.sourceforge.net/" hreflang="fr">Spongestats</a> : Développé par <a href="http://www.gougueule.com/" hreflang="fr">un lyonnais passionné</a> professionnel et rigoureux, Spongestats carbure à l&#8217;Ajax et m&#8217;apporte mes résultats quotidien sur un plateau.</li>
    <li> <a href="http://www.phpmyvisites.net/" hreflang="fr">phpMyVisites</a> : pas très beau, pas très web 2.0, mais contient des morceaux d&#8217;Ajax. Je ne sais pas si c&#8217;est l&#8217;habitude (c&#8217;est le premier outil statistique que j&#8217;ai installé) mais les données essentielles sont accessibles très rapidement. Quelques problèmes en revanche avec le <em>time limit</em> de 30 sec. pour afficher les statistiques mensuelles. Mais bon, je m&#8217;en sers surtout pour les vues quotidiennes et hebdomadaires.</li>
    <li> <a href="http://www.mybloglog.com/buzz/members/br1o/" hreflang="fr">MyBlogLog</a> : Les chiffres fournis par <acronym title="MyBlogLog">MBL</acronym> sont parfois fantaisistes, mais l&#8217;outil donne une petite idée des liens sortants les plus cliqués.</li>
    <li> <a href="http://www.hittail.com/" hreflang="en">HitTail</a> : pour savoir si la longue traine de mes mots-clés vaut de l&#8217;or. Ou pas.</li>
    <li> <a href="http://www.feedburner.com/" hreflang="en">Feedburner</a> : j&#8217;espère que le rachat par Google permettra de fusionner les chiffres fournis par Google Analytics en tenant compte des clics en provenance du flux RSS&#8230;</li>
    <li> <a href="http://technorati.com/" hreflang="en">Technorati</a> : inscris depuis presque un an, j&#8217;ai commencé à l&#8217;utiliser régulièrement depuis peu pour avoir une idée des sites participants à la chaîne Kawa-Yaka. Depuis, j&#8217;ai peur de devenir accro ;)</li>
</ul>

<h3>Publicités</h3>

<ul>
    <li> <a href="http://www.text-link-ads.com" hreflang="en">Text-Link-Ads</a> : prometteur.</li>
    <li> <a href="http://www.google.com/adsense" hreflang="en">Google Adsense</a> : très intéressant pour connaitre le positionnement d&#8217;un billet en terme de mots-clés ;)</li>
</ul>

<h3>Réseaux sociaux</h3>

<ul>
    <li> <a href="http://www.copaing.net/" hreflang="fr">Copaing</a> : un &laquo;&nbsp;copain d&#8217;avant&nbsp;&raquo; d&#8217;aujourd&#8217;hui qui nous veut du <em>bieng</em> (gratuit) ;)</li>
    <li> <a href="http://www.viadeo.com/" hreflang="fr">Viadeo</a> : Le seul réseau où j&#8217;ai réussi à renseigner mon profil à au moins 90%.</li>
    <li> <a href="http://www.ziki.com/fr/people/bruno/ziki" hreflang="fr">Ziki</a> : Pas mal d&#8217;inscrits parmi lesquels il est possible de faire des recherches selon de très nombreux critères. Je m&#8217;en sers de plus en plus pour centraliser mes différents profils. Permet également d&#8217;être visible sur Google et Yahoo!</li>
    <li> <a href="http://www.facebook.com/" hreflang="en">Facebook</a> : je suis (du verbe suivre) le mouvement twitterien&#8230; on verra bien, s&#8217;il en reste quelque chose&#8230;</li>
    <li> <a href="http://twitter.com/" hreflang="en">Twitter</a> : pour réseauter entre messagerie instantanée, <em>micro-blogging</em> et <em>Google News</em> de proximité.</li>
</ul>

<h3>Bookmark</h3>

<ul>
    <li> <a href="http://blogmarks.net" hreflang="fr">blogmarks</a> : vraiment top, avec des fonctions de réseaux d&#8217;amis pour partager ses blogmarks. A réussi à importer plus de 2000 bookmarks sans problème alors que <a href="http://del.icio.us/" hreflang="en">del.icio.us</a> a calé&#8230;</li>
</ul>

<h3>Musique</h3>

<ul>
    <li> <a href="http://www.radioblogclub.com/" hreflang="en">radioblog</a> : pour écouter de la musique et en mettre sur votre blog.</li>
    <li> <a href="http://www.blogmusik.net/fr/" hreflang="fr">blogmusik</a> : pour écouter de la musique et en mettre sur votre blog. En mieux ! L&#8217;ajout d&#8217;un titre par glissé-déposé dans une <em>playlist</em> est un vrai régal.</li>
</ul>

<h3>Quelques liens pour approfondir la question</h3>

<p>Comme j&#8217;ai déjà eu l&#8217;occasion de décrire plus en détail certains services mentionnés plus haut, j&#8217;en profite pour redonner un coup de <em>boost</em> à des billets qui sont toujours d&#8217;actualité :</p>

<ul>
    <li><a href="http://www.css4design.com/index.php/2007/03/26/71-netvibes-web-2-0-vs-google-reader-plus-1" hreflang="fr">Netvibes et Google Reader</a></li>
    <li><a href="http://www.css4design.com/index.php/2006/11/08/48-reseaux-sociaux-et-esprit-web-2-0" hreflang="fr">Les réseaux sociaux</a></li>
    <li><a href="http://www.css4design.com/index.php/2006/10/18/45-gerard-m-ajax-mashup-et-web-20" hreflang="fr">Les mashups web 2.0</a></li>
    <li><a href="http://www.css4design.com/index.php/2006/09/22/40-walk-like-an-ajaxian-avec-le-web-2-0" hreflang="fr">Walk like an ajaxian avec Copaing, mybloglog, blogmarks&#8230;</a></li>
    <li><a href="http://www.css4design.com/index.php/2007/04/29/83-43-things-what-do-you-want-to-do-with-your-life" hreflang="fr">43Things</a></li>
    <li><a href="http://www.css4design.com/index.php/2007/04/14/79-twitter-signal-social-microblogging-et-moblogging-web-20" hreflang="fr">Twitter</a></li>
    <li><a href="http://www.css4design.com/index.php/2006/11/16/51-mesure-d-audience-google-ecriture-des-mots-clefs-au-clickrank" hreflang="fr">Mesure d&#8217;audience</a></li>
</ul>

<p>Pfiou&#8230; Fait :) Bon, je passe la patate chaude à <a href="http://arbon2.celeonet.fr/dotclear/index.php?" hreflang="fr">Laeti</a>, <a href="http://www.odd-tales.com/" hreflang="fr">myev</a> et <a href="http://www.pixellum.com/" hreflang="fr">Blazouf</a></p>

<h3 class='related_post_title'>Articles sur le même sujet</h3>

<ul class='related_post'><li><a href='http://css4design.com/twitter-signal-social-microblogging-et-moblogging-web-20' title='Twitter : Signal social, microblogging et moblogging'>Twitter : Signal social, microblogging et moblogging</a></li><li><a href='http://css4design.com/css-naked-day-copaing-lyon-blog-css2-pratique-du-design-web' title='CSS Naked Day + Copaing + Lyon Blog + CSS2 Pratique&#8230;'>CSS Naked Day + Copaing + Lyon Blog + CSS2 Pratique&#8230;</a></li><li><a href='http://css4design.com/mon-top-5-des-outils-pour-bloguer' title='Mon Top 5 des outils pour bloguer'>Mon Top 5 des outils pour bloguer</a></li><li><a href='http://css4design.com/mesure-d-audience-google-ecriture-des-mots-clefs-au-clickrank' title='Mesure d&#039;audience : des mots-clefs au ClickRank'>Mesure d&#039;audience : des mots-clefs au ClickRank</a></li><li><a href='http://css4design.com/reseaux-sociaux-et-esprit-web-2-0' title='Les réseaux sociaux et l&#039;esprit web 2.0'>Les réseaux sociaux et l&#039;esprit web 2.0</a></li></ul>
 <p><a href="http://css4design.com/?flattrss_redirect&amp;id=108&amp;md5=45fcbe7651f30bb90b5b986b02dac085" title="Flattr" target="_blank"><img src="http://css4design.com/wp-content/plugins/flattr/img/flattr-badge-large.png" alt="flattr this!"/></a></p>]]></content:encoded>
			<wfw:commentRss>http://css4design.com/quels-sont-les-services-web-2-0-que-j-ai-utilises-aujourdhui/feed</wfw:commentRss>
		<slash:comments>6</slash:comments>
		<atom:link rel="payment" href="http://css4design.com/?flattrss_redirect&amp;id=108&amp;md5=45fcbe7651f30bb90b5b986b02dac085" type="text/html" />
	</item>
		<item>
		<title>L&#039;expérience utilisateur et l&#039;ergonomie des sites web</title>
		<link>http://css4design.com/l-experience-utilisateur-au-centre-de-l-ergonomie-des-sites-web</link>
		<comments>http://css4design.com/l-experience-utilisateur-au-centre-de-l-ergonomie-des-sites-web#comments</comments>
		<pubDate>Sun, 08 Apr 2007 00:29:12 +0000</pubDate>
		<dc:creator>Bruno Bichet</dc:creator>
				<category><![CDATA[Ergonomie & Accessibilité]]></category>
		<category><![CDATA[Traductions]]></category>
		<category><![CDATA[Ajax]]></category>
		<category><![CDATA[Commentaires conditionnels]]></category>
		<category><![CDATA[Conception de site web]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[Ergonomie]]></category>
		<category><![CDATA[Hacks CSS]]></category>
		<category><![CDATA[Hover]]></category>
		<category><![CDATA[Javascript]]></category>
		<category><![CDATA[Standards web]]></category>
		<category><![CDATA[Web 2.0]]></category>

		<guid isPermaLink="false">http://www.css4design.com/blog-reloaded/?p=74</guid>
		<description><![CDATA[Pour faire bonne impression sur les visiteurs, il suffit d&#8217;anticiper leurs besoins. Dans ce domaine, ce sont souvent les détails qui comptent le plus. Améliorer l&#8217;expérience utilisateur et adapter les fonctionnalités d&#8217;un site web en fonction des attentes de chacun permet de satisfaire : ceux qui veulent consulter un site web ergonomique offrant un contenu facilement accessible ; ceux qui veulent un design attractif ; et enfin, ceux qui veulent le grand jeu avec Ajax à tous les étages. Ce billet est ma traduction du dernier article d&#8217;Aaron Gustafson Ruining the user experience paru sur A List Apart le 27 [...]]]></description>
			<content:encoded><![CDATA[<div class="tweetmeme_button" style="float: right; margin-left: 18px;">
			<a href="http://api.tweetmeme.com/share?url=http%3A%2F%2Fcss4design.com%2Fl-experience-utilisateur-au-centre-de-l-ergonomie-des-sites-web">
				<img src="http://api.tweetmeme.com/imagebutton.gif?url=http%3A%2F%2Fcss4design.com%2Fl-experience-utilisateur-au-centre-de-l-ergonomie-des-sites-web&amp;source=br1o&amp;style=normal&amp;service=bit.ly&amp;service_api=R_0c1ee4b64f105d1b2672690740a77d6a&amp;b=2" height="61" width="50" />
			</a>
		</div><p><img src="/images/billet/ruining/ruining-user-experience.png" class="il" alt="Ruiner l'expérience utitilisateur ? Quelle idée ^^" title="Ruining the user experience" /> Pour faire  <em>bonne impression</em> sur les visiteurs, il suffit d&#8217;anticiper leurs besoins. Dans ce domaine, ce sont souvent les détails qui comptent le plus. Améliorer l&#8217;<em>expérience utilisateur</em> et adapter les fonctionnalités d&#8217;un site web en fonction des attentes de chacun permet de satisfaire : ceux qui veulent consulter un site web ergonomique offrant un contenu  facilement accessible ; ceux qui veulent un design attractif ; et enfin, ceux qui veulent le grand jeu avec <em>Ajax</em> à tous les étages. Ce billet est ma traduction du dernier article d&#8217;Aaron Gustafson  <a href="http://www.alistapart.com/articles/ruininguserexperience/" title="Ruining the User Experience">Ruining the user experience</a> paru sur <em>A List Apart</em> le 27 mars dernier.<span id="more-83"></span></p>

<h2>Ruiner l&#8217;expérience utilisateur</h2>

<p>Pendant un récent voyage d&#8217;affaire à <em>Seattle</em>, j&#8217;ai passé deux soirées à déguster la cuisine locale. Je me suis régalé à chaque repas, mais je garde de l&#8217;un deux un souvenir bien plus marqué. Mais pourquoi ?</p>

<p>Les deux restaurants présentaient de nombreux points communs : les plats étaient alléchants et présentés avec goût ; l&#8217;atmosphère était sympathique et chaleureuse ; les menus offraient un large choix de plats tout deux à un prix raisonnable, et le personnel était aux petits soins. Alors qu&#8217;est-ce qui fait que le second restaurant m&#8217;a laissé un bien meilleur souvenir que le premier ?</p>

<p>Comme souvent dans la vie, ce sont les détails qui comptent le plus. Prenez un verre d&#8217;eau, par exemple. Un serveur négligent peut le servir glacé, ou pire encore, vous laisser mourir de soif avant de vous resservir. Alors qu&#8217;un serveur bienveillant s&#8217;assurera que le niveau de l&#8217;eau ne descendra jamais plus bas que la moitié du verre ; les meilleurs vous feront la surprise de trouver le verre que vous venez de finir, rempli à ras bord une nouvelle fois.</p>

<p>Pour nous les ergonomes du web, Il y a beaucoup à apprendre d&#8217;une chose aussi simple qu&#8217;un verre d&#8217;eau.</p>

<h3>Qui est le client ?</h3>

<p>Quand vous êtes serveur dans un restaurant, vous savez que les gens viennent avec certains besoins et, parfois même, avec quelques attentes. Souvent, le verre d&#8217;eau est le &laquo;&nbsp;premier contact&nbsp;&raquo; avec le client. S&#8217;il est rempli rapidement, vous marquez un point, mais ce n&#8217;est que le début. En effet, certaines personnes boivent plus vite que d&#8217;autres et demandent à être resservies plus souvent. Certains clients ne boiront pas avant d&#8217;avoir les plats devant eux. D&#8217;autres encore ne toucheront pas à leur bouteille d&#8217;eau&#8230; ou demanderont peut-être un peu de thé glacé, ou encore autre chose. Au départ, vous ne pouvez vraiment pas savoir à qui vous avez à faire. Et lorsqu&#8217;il s&#8217;agit d&#8217;une table de 4, 6 ou même 10 personnes il vaut mieux s&#8217;être préparé à l&#8217;avance&#8230;</p>

<p>Sur le web, c&#8217;est la même chose. Nous faisons de beaux sites qui (nous l&#8217;espérons) font une excellente première impression, mais nous devons nous assurer que chaque point d&#8217;interactivité renforce cet avis favorable tout au long de la navigation, sinon nous risquons de dilapider le peu de crédit acquis au départ. Ce type de pensée à donné naissance au concept d&#8217;<a href="http://en.wikipedia.org/wiki/Progressive_enhancement" title="amélioration progressive.">amélioration progressive</a></p>

<p>Sur le web, nous ne savons rien à propos de la personne qui vient visiter notre site. Nous ne connaissons pas le navigateur utilisé. Nous ignorons si le serveur est interrogé depuis un téléphone portable. Nous ne savons pas si le clavier est préféré à la souris. Nous ne savons pas si Javascript (ou même CSS) est activé. Nous ne savons pas si la page doit être imprimée. Nous ne savons pas si l&#8217;utilisateur consulte le site à l&#8217;aide d&#8217;un lecteur d&#8217;écran. Nous ne savons vraiment rien&#8230;</p>

<p>Alors, que fait-on quand on ne sait rien ? On an-ti-ci-pe.</p>

<p>En tant que développeurs, nous devons pouvoir satisfaire les besoins de nos clients. Et si nous sommes assez pointus, nous pouvons régler leurs problèmes sans qu&#8217;ils ne se rendent compte de notre intervention.</p>

<h3>Une  douche froide ?</h3>

<p><a href="http://lala.com/" title="Lala.com">Lala.com</a> est un site bâti autour d&#8217;une communauté de gens qui aiment la musique. Le système facilite l&#8217;échange de <abbr title="Compact Disc">CD</abbr> dans toute la communauté par la poste.</p>

<p>Je ne dirais pas que leur <a href="http://www.alistapart.com/d/ruininguserexperience/lala-home.png" title="Figure 1-1. Lala homepage." rel="splash.image|lala">site web</a> est attractif, mais il est utilisable&#8230; sauf si Javascript est <a href="http://www.alistapart.com/d/ruininguserexperience/lala-home-no-js-old.png" title="Figure 1-2. Lala sans JavaScript, circa July 2006." rel="splash.image|lala">désactivé</a>.</p>

<p>Vous apprécierez le fait qu&#8217;il y a un message indiquant un <em>Chargement en cours</em> alors que rien ne se charge.</p>

<p>Pour régler le problème (la copie d&#8217;écran ci-dessus a été prise entre le moment où j&#8217;ai commencé à me servir du site comme exemple de ce qu&#8217;il ne fallait <strong>pas</strong> faire et la finalisation de l&#8217;article), tout ce qu&#8217;ils ont été capable de faire, c&#8217;est de ressortir ce <a href="http://www.alistapart.com/d/ruininguserexperience/no-js-message.png" title="Figure 1-3. Lala brings back fond memories." rel="splash.image|lala">vieux message</a> au parfum entêtant datant de la dernière guerre des navigateurs.</p>

<p>Le problème ici n&#8217;est pas que le site utilise Javascript, mais qu&#8217;il ne fonctionne pas sans. La raison ? Et bien, apparemment, les concepteurs se font plaisir en  <em>Ajax-isant</em> tout le contenu. Dans leur précipitation, ils ont entassés tous les trucs du <em>web 2.0</em> sous le capot et se sont aliénés une bonne partie des utilisateurs du <em>web 1.0</em>, et une part importante du marché des appareils mobiles. Et <a href="http://www.google.com/search?q=must+have+JavaScript+enabled&amp;start=0">ils ne sont pas les seuls</a>.</p>

<p>Pensez à ceci : vous êtes un utilisateur de Lala.com, vous êtes proche d&#8217;un magasin de disque et vous vous arrêtez sur l&#8217;album des <em>Fatals Picards</em> ["Arcade Fire" dans la version originale, NdT]. Vous n&#8217;avez pas réalisé qu&#8217;il était sorti et voulez l&#8217;ajouter à votre liste de souhaits avant de l&#8217;oublier. Si votre téléphone mobile ne supporte pas Javascript (ou si vous l&#8217;avez désactivé pour réduire le temps/coût de chargement), vous allez vous retrouver devant un écran qui vous donne des <a href="http://www.alistapart.com/d/ruininguserexperience/lala-mobile.png" title="Figure 1-4. Lala a-no-go." rel="splash.image|lala">informations pertinentes</a> sur Lala, suivies malheureusement du message indiquant que Javascript est nécessaire pour utiliser le site.</p>

<p>Vous ne pouvez pas accéder à votre liste de souhaits ou à quoi que ça soit d&#8217;autre, d&#8217;ailleurs. Même le champs de recherche (en bas de la page) ne fonctionne pas. Pour une application de type intranet, cela peut être acceptable, mais pour un site web grand public, c&#8217;est un désastre.</p>

<h3>Réfléchissez avant de servir</h3>

<p>Nous avons déjà établi qu&#8217;en tant que développeur web nous sommes généralement dans le brouillard quant aux desiderata de nos utilisateurs. Le mieux que nous puissions faire est d&#8217;anticiper ce que pourrait être leurs besoins et s&#8217;assurer qu&#8217;ils sont pris en compte à tout les niveaux pour apporter la meilleure expérience possible. C&#8217;est là que l&#8217;amélioration progressive entre en scène. Nous devons penser aux besoins des différents types d&#8217;utilisateurs et leur apporter une réponse.</p>

<ol>
    <li>
<h4>Niveau 1 : pas de fioriture</h4>
Certains utilisateurs veulent seulement accéder au contenu. Ils peuvent surfer depuis un appareil mobile, chercher à imprimer quelques informations, ou utiliser toutes sortes de périphériques d&#8217;assistance pour naviguer. Ils peuvent même avoir désactivé l&#8217;affichage des images. En gardant un marquage propre et bien-ordonné et en respectant la sémantique associée aux balises HTML, vous répondrez aux besoins de ces utilisateurs qui veulent consommer léger et afficher les pages rapidement, sans chichi.</li>
    <li>
<h4>Niveau 2 : faites joli</h4>
D&#8217;autres, aiment les belles vitrines (ou une tranche de citron). Pour eux, concevez un design graphique visuellement attractif. Vous pouvez même ajouter quelques fioritures visuelles (ou un peu de Flash) et ils seront contents. Aussi longtemps qu&#8217;il n&#8217;y a pas de confusion entre les éléments de décoration et le contenu de la page, que vous avez réalisé tout vos tests sur les navigateurs (ou que vous fournissez quelques styles basiques pour les médias alternatifs), ça devrait le faire.</li>
    <li>
<h4>Niveau 3 :  c&#8217;est la fête !</h4>
D&#8217;autres encore, veulent le grand jeu. Pour ceux-là, vous pouvez faire sauter le bouchon et créer une merveilleuse application web 2.0 avec fondu-enchainé, <em>widget</em> en veux-tu en-voilà, et Ajax en abondance.

Gardez toutefois à l&#8217;esprit, que ces niveaux ne sont pas toujours aussi clairement identifiables. Un palier intermédiaire entre les niveaux 1 et 2 sera peut-être nécessaire pour donner à <em>Netscape 4.x</em> et <em>IE5/Mac</em> quelques styles typographiques spécifiques. Ou vous pouvez avoir envie d&#8217;offrir des raffinements Javascript selon les navigateurs, ou encore injecter un peu de <em>crème au nougat</em> entre les niveaux 2 et 3&#8230;</li>
</ol>

<h3>Passer inaperçu</h3>

<p>Une fois que vous avez décidé des niveaux à prendre en compte, vous pouvez construire votre site.</p>

<p>Commencez par le contenu. Quelquefois, les webdesigners et les développeurs oublient que les gens viennent surtout pour ça. Travaillez-le avec amour sans noyer vos visiteurs sous les informations. N&#8217;empilez pas les blocs comme pour un buffet. La production du contenu demande toujours beaucoup de travail. Mettez-le en valeur.</p>

<p>Lorsque le  contenu est balisé, il est temps d&#8217;établir le <em>look and feel</em> du site. Concevez un design adapté à vos utilisateurs en utilisant pour chaque niveau les différentes techniques à votre disposition : cachez certains fichiers CSS aux navigateurs les plus anciens et donnez des styles spécifiques à ceux qui demandent un peu plus d&#8217;attention. Les <a href="http://msdn.microsoft.com/workshop/author/dhtml/overview/ccomment_ovw.asp" title="Les commentaires conditionnels">commentaires conditionnels</a> sont réellement <a href="http://www.brucelawson.co.uk/index.php/2005/future-proof-your-css-with-conditional-comments/" title="Donnez un futur à vos CSS avec les commentaires conditionnels">vos amis pour la vie</a> en la matière. Mais n&#8217;oubliez pas les vieilles recettes comme les <a href="http://www.ericmeyeroncss.com/bonus/trick-hide.html" title="hacks CSS pour cacher des règles à certains navigateurs">règles @import et les combinaisons pour les médias spécifiques</a> qui permettent d&#8217;offrir sélectivement un parfum différent pour les navigateurs collés au radiateur du fond de la classe.</p>

<p>Vérifiez la présentation de votre contenu à l&#8217;impression et son affichage sur les périphériques mobiles. A ce propos, envisagez-vous une mise en pages spécifique ou seulement un traitement basique en terme de couleur ou de typographie ? Quel sort réservez-vous aux images et aux formulaires ? Essayez d&#8217;anticiper les fonctionnalités qu&#8217;un utilisateur mobile voudrait, et ôtez le superflu ! Si vous utilisez la <em>pseudo-classe</em> <samp>:hover</samp> sur un lien, n&#8217;oubliez pas de considérer également la <em>pseudo-classe</em> <samp>:focus</samp>, et les utilisateurs de claviers ou d&#8217;appareils mobiles vous remercieront.</p>

<p>Lorsque le design est validé, ajoutez quelques étincelles avec une pincée de Javascript non-intrusif. Vous connaissez déjà les méthodes de détection pour savoir si un script peut fonctionner sur tel navigateur ? Considérez aussi comment <a href="http://sourcelabs.com/ajb/archives/2005/05/ajax_mistakes.html" title="Erreurs communes avec Ajax">vos scripts peuvent interférer avec les interactions communes aux navigateurs telles que &laquo;&nbsp;bookmarker&nbsp;&raquo; un lien ou utiliser le bouton retour</a>. Et n&#8217;oubliez pas l&#8217;interdépendance qui peut exister entre des scripts différents : votre site deviendrait-il inutilisable si un script fonctionnait et pas un autre ?</p>

<p>Si vous créez un <em>widget</em> ou autre interface de contrôle, générez le marquage additionnel quand avez déterminé qu&#8217;il  est prêt à être utilisé, et que tout le reste fonctionne encore. Et si vous <a href="http://www.quirksmode.org/archives/2005/07/benchmark_tests.html">séparez les CSS liées à votre widget de votre code Javascript</a> comme un <em>bon petit soldat des standards</em>, assurez-vous que les styles ne sont pas actifs tant que le script n&#8217;a pas indiqué que le <em>widget</em> peut être utilisé. Une <em>bonne pratique</em> est d&#8217;utiliser l&#8217;échange de classe (cf. Table 1) :</p>

<table style="border-bottom: 3px solid #b2b2b2; margin: 0pt 0pt 2em; text-align: left" summary="Exemples d'échange de classes CSS appliquées aux widgets">
<thead>
<th scope="col" style="border-style: solid solid solid none; border-color: rgb(204, 204, 204) rgb(204, 204, 204) rgb(204, 204, 204) -moz-use-text-color; border-width: 0pt 0pt 1px medium; padding: 0.5em 1em">Widget</th>
<th scope="col" style="border-style: solid; border-color: #cccccc; border-width: 0pt 0pt 1px 1px; padding: 0.5em 1em">Au repos</th>
<th scope="col" style="border-style: solid; border-color: #cccccc; border-width: 0pt 0pt 1px 1px; padding: 0.5em 1em">Activé</th>
</tr>
<tr>
<th scope="row" style="border-style: solid solid solid none; border-color: rgb(204, 204, 204) rgb(204, 204, 204) rgb(204, 204, 204) -moz-use-text-color; border-width: 0pt 0pt 1px medium; padding: 0.5em 1em">Navigation par onglets</th>
<td style="border-style: solid; border-color: #cccccc; border-width: 0pt 0pt 1px 1px; padding: 0.5em 1em"><code>.onglet</code></td>
<td style="border-style: solid; border-color: #cccccc; border-width: 0pt 0pt 1px 1px; padding: 0.5em 1em"><code>.onglet-on</code></td>
</tr>
<tr>
<th scope="row" style="border-style: solid solid solid none; border-color: rgb(204, 204, 204) rgb(204, 204, 204) rgb(204, 204, 204) -moz-use-text-color; border-width: 0pt 0pt 1px medium; padding: 0.5em 1em">Formulaire à soumission automatique</th>
<td style="border-style: solid; border-color: #cccccc; border-width: 0pt 0pt 1px 1px; padding: 0.5em 1em"><code>.auto-submit</code></td>
<td style="border-style: solid; border-color: #cccccc; border-width: 0pt 0pt 1px 1px; padding: 0.5em 1em"><code>.auto-submit.actif</code></td>
</tr>
</table>

<p>Au final, si vous envisagez d&#8217;utiliser <em>Ajax</em>, faites-le avec discernement : il n&#8217;est pas nécessaire de charger l&#8217;ensemble de la page via des appels asynchrones qui finissent par devenir une barrière entre l&#8217;utilisateur et votre contenu. Paradoxalement, cela peut entraîner une <a href="http://www.devwebsphere.com/devwebsphere/2006/04/the_hidden_cost.html" title="Augmentation de la charge serveur : les coûts cachés">augmentation de la charge serveur</a>, rendre votre <a href="http://searchenginewatch.com/showPage.html?page=sew_print&amp;id=3624222" title="Ajax et les moteurs de recherche">contenu invisible pour les moteurs de recherche</a>, et rendre votre site <a href="http://www.sitepoint.com/article/ajax-screenreaders-work" title="Ajax et les lecteurs d'écran">inutilisable pour quiconque utilise un lecteur d&#8217;écran</a> ou un mobile.</p>

<p>Ne me faites pas dire ce que je n&#8217;ai pas dit, <em>Ajax</em> a sa place, mais il est important de savoir laquelle, et plus encore, de savoir où elle n&#8217;est pas.</p>

<h3>Conclusion</h3>

<p>Anticipez les besoins de l&#8217;utilisateur avec précaution et occupez-vous d&#8217;eux en vous faisant remarquer le moins possible. C&#8217;est la clé pour laisser une première bonne impression. Comme avec un verre d&#8217;eau, vos utilisateurs ne devraient jamais avoir à réclamer pour être servi.</p>

<h4>Crédits et remerciements</h4>

<p>Traduit avec la permission de <a href="http://www.alistapart.com/" title="A List Apart Magazine">A List Apart Magazine</a> et de l&#8217;auteur.</p>

<p><em>Malgré tout le soin apporté à cette traduction, il est possible que des erreurs préjudiciables à la pensée de l&#8217;auteur se soient glissées : je vous conseille vivement de lire l&#8217;article original. Profitez-en pour me signalez les erreurs ou les contresens, ou tout simplement les améliorations que vous jugez utiles pour coller au plus près de l&#8217;article. <del>D&#8217;ailleurs, ce billet reste en version bêta quelques temps ;)</del></em></p>

<p><em>Merci à <a href="http://absolutvero.over-blog.com/">Véro</a> pour son coup de main quand j&#8217;étais &laquo;&nbsp;Lost in translation&nbsp;&raquo; ;) </em></p>

<p><em><strong>Note du 24/05/07 : </strong>Merci à <a href="http://blog.userland.fr/">Goulven</a> pour sa relecture et les améliorations qu&#8217;il a apportées à cette traduction.</em></p>

<p>PS : d&#8217;autres traductions d&#8217;articles sur les sujets du web sont disponibles dans la catégorie <a href="http://www.css4design.com/articles/traductions">Traductions</a>.</p>

<h3 class='related_post_title'>Articles sur le même sujet</h3>

<ul class='related_post'><li><a href='http://css4design.com/framework-jquery-pour-ecrire-du-javascript-non-intrusif' title='Framework JQuery pour écrire du Javascript non-intrusif'>Framework JQuery pour écrire du Javascript non-intrusif</a></li><li><a href='http://css4design.com/css-naked-day-copaing-lyon-blog-css2-pratique-du-design-web' title='CSS Naked Day + Copaing + Lyon Blog + CSS2 Pratique&#8230;'>CSS Naked Day + Copaing + Lyon Blog + CSS2 Pratique&#8230;</a></li><li><a href='http://css4design.com/quelques-notes-sur-xhtml-et-css-au-fil-de-l-eau' title='Quelques notes sur XHTML et CSS, au fil de l&#8217;eau&#8230;'>Quelques notes sur XHTML et CSS, au fil de l&#8217;eau&#8230;</a></li><li><a href='http://css4design.com/css-toolbox' title='Trucs et astuces CSS'>Trucs et astuces CSS</a></li><li><a href='http://css4design.com/le-petit-journal-du-web-les-fruits-de-la-veille-ont-garde-leur-fraicheur' title='Le petit journal du web &#8212; Les fruits de la veille ont gardé toute leur fraicheur'>Le petit journal du web &#8212; Les fruits de la veille ont gardé toute leur fraicheur</a></li></ul>
 <p><a href="http://css4design.com/?flattrss_redirect&amp;id=83&amp;md5=18cc9cbe0d6e957ac89198fa4f231be7" title="Flattr" target="_blank"><img src="http://css4design.com/wp-content/plugins/flattr/img/flattr-badge-large.png" alt="flattr this!"/></a></p>]]></content:encoded>
			<wfw:commentRss>http://css4design.com/l-experience-utilisateur-au-centre-de-l-ergonomie-des-sites-web/feed</wfw:commentRss>
		<slash:comments>14</slash:comments>
		<atom:link rel="payment" href="http://css4design.com/?flattrss_redirect&amp;id=83&amp;md5=18cc9cbe0d6e957ac89198fa4f231be7" type="text/html" />
	</item>
		<item>
		<title>CSS Naked Day + Copaing + Lyon Blog + CSS2 Pratique&#8230;</title>
		<link>http://css4design.com/css-naked-day-copaing-lyon-blog-css2-pratique-du-design-web</link>
		<comments>http://css4design.com/css-naked-day-copaing-lyon-blog-css2-pratique-du-design-web#comments</comments>
		<pubDate>Wed, 04 Apr 2007 15:26:08 +0000</pubDate>
		<dc:creator>Bruno Bichet</dc:creator>
				<category><![CDATA[Le petit journal du web]]></category>
		<category><![CDATA[Accessibilité]]></category>
		<category><![CDATA[Ajax]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[HTML]]></category>
		<category><![CDATA[Réseaux sociaux]]></category>
		<category><![CDATA[Standards web]]></category>
		<category><![CDATA[Web 2.0]]></category>
		<category><![CDATA[XHTML]]></category>

		<guid isPermaLink="false">http://www.css4design.com/blog-reloaded/?p=73</guid>
		<description><![CDATA[Un petit mix pour commencer le mois. Demain c&#8217;est Show Time pour ce blog qui dévoilera ses dessous pour la bonne cause, au moment même où mes Copaings font leur apparition&#8230; Et dire que ça se passe peut-être près de chez vous : si vous habitez la région lyonnaise, venez noyer votre chagrin football-istique (pourtant le nom d&#8217;une liste ordonnée aurait pu être de bonne augure, mais bon&#8230;) en compagnie de Lyon-Blog qui prépare sa V2. En parlant de V2, il y a aussi du nouveau du côté de chez Alsacreations. CSS Naked Day Demain, ce blog fait son full [...]]]></description>
			<content:encoded><![CDATA[<div class="tweetmeme_button" style="float: right; margin-left: 18px;">
			<a href="http://api.tweetmeme.com/share?url=http%3A%2F%2Fcss4design.com%2Fcss-naked-day-copaing-lyon-blog-css2-pratique-du-design-web">
				<img src="http://api.tweetmeme.com/imagebutton.gif?url=http%3A%2F%2Fcss4design.com%2Fcss-naked-day-copaing-lyon-blog-css2-pratique-du-design-web&amp;source=br1o&amp;style=normal&amp;service=bit.ly&amp;service_api=R_0c1ee4b64f105d1b2672690740a77d6a&amp;b=2" height="61" width="50" />
			</a>
		</div><p><img class="il" title="CSS Naked Day + Copaing + Lyon Blog + CSS2 Pratique..." src="/images/billet/en-vrac.png" alt="Ca part en vrac ?" /> Un petit <em>mix</em> pour commencer le mois. Demain c&#8217;est <em>Show Time</em> pour ce blog qui dévoilera ses dessous pour la bonne cause, au moment même où mes Copaings font leur apparition&#8230; Et dire que ça se passe peut-être près de chez vous : si vous habitez la région lyonnaise, venez noyer votre chagrin football-istique (pourtant le nom d&#8217;une liste ordonnée aurait pu être de bonne augure, mais bon&#8230;) en compagnie de Lyon-Blog qui prépare sa V2. En parlant de V2, il y a aussi du nouveau du côté de chez Alsacreations.</p>

<p><span id="more-81"></span></p>

<ol>
    <li>
<h3>CSS Naked Day</h3>
Demain, ce blog fait son <em>full monty</em> en participant à l&#8217;opération lancée par <a hreflang="en" href="http://www.dustindiaz.com/">dustindiaz</a> pour promouvoir les standards web dans leur plus simple appareil.

En désactivant les feuilles de style CSS, vous mettez votre <samp>body</samp> à nu et montrez que vous utilisez un marquage HTML sémantique et structuré. Pour participer <a hreflang="en" href="http://naked.dustindiaz.com/">inscrivez votre site</a> sur la liste !

Pour ma part, je commence le <em>strip</em> soit dans la nuit, soit jeudi en début de matinée.</li>
    <li>
<h3>Du nouveau sur Copaing</h3>
Si vous aimez taquiner la molette, vous avez peut-être remarqué le <em>widget</em> Copaing qui a fait son apparition sur ce blog. Vous voulez le même ? Alors inscrivez-vous vite et encouragez vos amis à faire pareil. Vous n&#8217;avez pas d&#8217;amis ? Raison de plus pour quitter ce blog de N0L1F3 et rejoindre Copaing, le site gratuit pour <a hreflang="fr" href="http://www.copaing.net/">retrouver vos anciens copains de classe</a> et les localiser grâce à l&#8217;API Google Maps.</li>
    <li>
<h3>Lyon-Blog : ça se passe près de chez vous (ou pas)</h3>
<a hreflang="fr" href="http://www.lyon-blog.fr/">Lyon Blog</a> prépare sa V2 et nous attendons vos <a hreflang="fr" href="http://www.lyon-blog.fr/forum/viewtopic.php?pid=1373">suggestions</a> ou simplement vos encouragements. Si vous éditez un blog dans la région lyonnaise, <a hreflang="fr" href="http://www.lyon-blog.fr/?blogs_lyonnais#formulaire">inscrivez-vous</a> et participez aux célèbres Apéros Blog !</li>
    <li>
<h3>CSS2 Pratique du design web v2.0</h3>
<q cite="http://blog.alsacreations.com/2007/03/29/341-css2-pratique-du-design-web-v20">Aujourd&#8217;hui, 29 mars 2007, la seconde édition du livre &laquo;&nbsp;CSS2 : pratique du design web&nbsp;&raquo; voit officiellement le jour et commence à être diffusée chez les distributeurs.</q>

L&#8217;année dernière, j&#8217;ai lu la 1<sup>ère</sup> édition du livre de Raphael Goetter qui m&#8217;a été particulièrement utile pour mieux comprendre les questions relatives au positionnement relatif ou absolu. Cette année, j&#8217;achète la 2<sup>ème</sup> édition qui fait le point, entre autre, sur la prise en charge des CSS par IE7.

La liste des nouveautés présentes sur <a hreflang="fr" href="http://blog.alsacreations.com/2007/03/29/341-css2-pratique-du-design-web-v20">CSS2 Pratique du design web</a> est disponible sur le blog de l&#8217;auteur.</li>
    <li>
<h3>Principes pour des sites ergonomiques</h3>
Pendant que j&#8217;étais sur Alsacreations, je (re)trouvé une page très complète sur les éléments à prendre en compte pour <a hreflang="fr" href="http://css.alsacreations.com/Tutoriels-et-articles-divers/Principes-a-suivre-pour-un-site-web-de-qualite-Ergonomie-Compatibilite-Accessibilite">faire des sites web de qualité</a> centrés sur l&#8217;utilisateur. Enjoy!</li>
</ol>

<h3 class='related_post_title'>Articles sur le même sujet</h3>

<ul class='related_post'><li><a href='http://css4design.com/petit-bilan-statistique-du-css-naked-day' title='Petit bilan statistique du CSS Naked Day'>Petit bilan statistique du CSS Naked Day</a></li><li><a href='http://css4design.com/formation-integrateur-html5-css3' title='CSS Sans Stress &#8212; Une formation intégrateur HTML &amp; CSS'>CSS Sans Stress &#8212; Une formation intégrateur HTML &#038; CSS</a></li><li><a href='http://css4design.com/je-teste-mon-navigateur-sous-acid2-cest-grave-docteur' title='Je teste mon navigateur sous Acid2, c&#039;est grave, docteur ?'>Je teste mon navigateur sous Acid2, c&#039;est grave, docteur ?</a></li><li><a href='http://css4design.com/5-reset-css-a-la-loupe-pour-une-remise-a-zero-des-valeurs-par-defaut-des-navigateurs' title='5 Reset CSS à la loupe pour une remise à zéro des valeurs par défaut des navigateurs'>5 Reset CSS à la loupe pour une remise à zéro des valeurs par défaut des navigateurs</a></li><li><a href='http://css4design.com/quelques-notes-autour-du-design-fluide-avec-3-colonnes-du-collectif-alsacreations' title='Quelques notes autour du design fluide avec 3 colonnes du collectif Alsacréations'>Quelques notes autour du design fluide avec 3 colonnes du collectif Alsacréations</a></li></ul>
 <p><a href="http://css4design.com/?flattrss_redirect&amp;id=81&amp;md5=f237e26603e14d90fa69c810d2208ab4" title="Flattr" target="_blank"><img src="http://css4design.com/wp-content/plugins/flattr/img/flattr-badge-large.png" alt="flattr this!"/></a></p>]]></content:encoded>
			<wfw:commentRss>http://css4design.com/css-naked-day-copaing-lyon-blog-css2-pratique-du-design-web/feed</wfw:commentRss>
		<slash:comments>2</slash:comments>
		<atom:link rel="payment" href="http://css4design.com/?flattrss_redirect&amp;id=81&amp;md5=f237e26603e14d90fa69c810d2208ab4" type="text/html" />
	</item>
		<item>
		<title>Netvibes : web 2.0 vs Google Reader : +1</title>
		<link>http://css4design.com/netvibes-web-2-0-vs-google-reader-plus-1</link>
		<comments>http://css4design.com/netvibes-web-2-0-vs-google-reader-plus-1#comments</comments>
		<pubDate>Mon, 26 Mar 2007 01:32:13 +0000</pubDate>
		<dc:creator>Bruno Bichet</dc:creator>
				<category><![CDATA[Web 2.0]]></category>
		<category><![CDATA[Ajax]]></category>

		<guid isPermaLink="false">http://www.css4design.com/blog-reloaded/?p=70</guid>
		<description><![CDATA[J&#8217;ai souvent écris tout le bien que je pensais de Netvibes. Mais depuis les deux dernières releases, mon Netvibes n&#8217;a plus la vibes ! Il peine tellement à rapatrier les flux RSS que j&#8217;ai parfois l&#8217;impression qu&#8217;il carbure plus au Sjax qu&#8217;à l&#8217;Ajax ! c&#8217;est dire&#8230; Et moi pendant c&#8217;temps-là&#8230; bref, mon PC rame comme un forçat. Du coup, j&#8217;ai récupéré mon fichier OPML que j&#8217;ai importé dans Google Reader. Je pense que l&#8217;apathie de mon pauvre PIII 866 Mhz y est pour beaucoup, mais je n&#8217;envisage pas de le changer pour l&#8217;instant. Et surtout pas pour une application en [...]]]></description>
			<content:encoded><![CDATA[<div class="tweetmeme_button" style="float: right; margin-left: 18px;">
			<a href="http://api.tweetmeme.com/share?url=http%3A%2F%2Fcss4design.com%2Fnetvibes-web-2-0-vs-google-reader-plus-1">
				<img src="http://api.tweetmeme.com/imagebutton.gif?url=http%3A%2F%2Fcss4design.com%2Fnetvibes-web-2-0-vs-google-reader-plus-1&amp;source=br1o&amp;style=normal&amp;service=bit.ly&amp;service_api=R_0c1ee4b64f105d1b2672690740a77d6a&amp;b=2" height="61" width="50" />
			</a>
		</div><p><img class="il" title="netvibes vs google reader ?" src="/images/billet/google-reader.png" alt="netvibes vs google reader ?" /> J&#8217;ai souvent écris tout le bien que je pensais de Netvibes. Mais depuis les deux dernières <em>releases</em>, mon Netvibes n&#8217;a plus la <em>vibes</em> ! Il peine tellement à rapatrier les flux <abbr title="Really Simple Syndication">RSS</abbr> que j&#8217;ai parfois l&#8217;impression qu&#8217;il carbure plus au <abbr title="Synchronous JavaScript and XML">Sjax</abbr> qu&#8217;à l&#8217;<abbr title="Asynchronous JavaScript and XML">Ajax</abbr> ! c&#8217;est dire&#8230; <em>Et moi pendant c&#8217;temps-là&#8230;</em> bref, mon PC rame comme un forçat. Du coup, j&#8217;ai récupéré mon fichier <abbr title="Outline Processor Markup Language">OPML</abbr> que j&#8217;ai importé dans <em>Google Reader</em>.<span id="more-78"></span></p>

<p>Je pense que l&#8217;apathie de mon pauvre <em>PIII 866 Mhz</em> y est pour beaucoup, mais je n&#8217;envisage pas de le changer pour l&#8217;instant. Et surtout pas pour une application en ligne, fut-elle Web 2.0 !</p>

<h3>Du côté de chez Google Reader</h3>

<p>Si j&#8217;appréciais beaucoup le système des onglets <a hreflang="fr" href="http://www.netvibes.com/">Netvibes</a>, j&#8217;ai trouvé quelques fonctions intéressantes chez <a hreflang="en" href="http://www.google.fr/reader/">Google Reader</a> pour me consoler :</p>

<ul>
    <li>L&#8217;affichage de la liste des derniers flux non lus permet de se concentrer sur les nouveautés. Chez Netvibes, les flux déjà lus grisés, reviennent parfois comme non lus, mais restent qu&#8217;on le veuille ou non parmi les xx derniers billets affichés. C&#8217;est perfectible.</li>
    <li>Comme souvent chez Google, il est possible de mettre une étoile (bookmark) sur ses billets préférés pour tous les retrouver d&#8217;un clic,</li>
    <li><em>Reading trends</em> : affiche les tendances de ma consommation de flux RSS : nombre de lecture, pourcentage de billets lus par flux. Pratique pour savoir quels sont les flux auxquels je me suis abonné sans les lire.</li>
    <li>Le système de navigation se fait principalement via une liste des flux RSS sur la gauche qui affiche à droite : soit l&#8217;ensemble des flux classés sous le tag sélectionné, soit l&#8217;ensemble des billets du flux que vous avez choisi.De prime abord, la liste de gauche semble classée par dossier. Or ces noms de dossiers sont les tags eux-mêmes. Tout d&#8217;un coup, cette liste qui semblait un peu monolithique devient beaucoup plus amusante.

Les éléments du flux qui s&#8217;affichent sur la droite contiennent le titre et le texte du billet à la fin duquel se trouvent des options permettant :

<ol>
    <li>d&#8217;ajouter une étoile,</li>
    <li>de partager le billet,</li>
    <li>de l&#8217;envoyer par email,</li>
    <li>de le marquer comme lu (mais ça se fait aussi de façon automatique),</li>
    <li>d&#8217;ajouter, modifier, supprimer des tags.</li>
</ol>
</li>
</ul>

<p>Le point n° 2 correspond à l&#8217;<a hreflang="en" href="http://eco.netvibes.com/">écosystème</a> de Netvibes sous une forme un peu différente. Chez Google, <a hreflang="fr" href="http://www.google.com/reader/shared/18385213655509565132">partager des billets</a> de la sorte revient à créer une page web accessible au public et&#8230; un <a hreflang="fr" href="http://www.google.com/reader/public/atom/user/18385213655509565132/state/com.google/broadcast">flux RSS</a> correspondant ! La boucle est bouclée.</p>

<h3>Et les modules de Netvibes ?</h3>

<p>Google Reader n&#8217;a pas vocation à remplacer Netvibes. Pour cela, il faut se tourner vers la <a hreflang="fr" href="https://www.google.com/ig">page d&#8217;accueil personnalisée</a> sur laquelle il est également possible d&#8217;afficher des onglets ou d&#8217;ajouter des modules comme :</p>

<ul>
    <li>bloc-notes,</li>
    <li>liste de tâche,</li>
    <li>dictionnaires,</li>
    <li>Google Reader (boucle sans fin ?),</li>
    <li>MSM Messenger 2.0,</li>
    <li>et pleins d&#8217;autres dont l&#8217;énumération serait fastidieuse.</li>
</ul>

<h3>Pour résumer</h3>

<p>Le point faible de la page personnalisée de Google réside peut-être dans son look. Là où Netvibes propose des thèmes élégants, Google Reader fait plus <em>brut de fonderie</em> tout en restant intuitif, lisible et simple d&#8217;utilisation&#8230;. et surtout rapide.
Moralité : <em>Netvibes : trop de vibes tue la vibes, et Google Reader : c&#8217;est Twix&#8230;</em></p>

<h3 class='related_post_title'>Articles sur le même sujet</h3>

<ul class='related_post'><li><a href='http://css4design.com/le-web-20-peut-etre-dangereux-pour-vos-profits' title='Le web 2.0 peut être dangereux&#8230; pour vos profits'>Le web 2.0 peut être dangereux&#8230; pour vos profits</a></li><li><a href='http://css4design.com/quels-sont-les-services-web-2-0-que-j-ai-utilises-aujourdhui' title='Quels sont les services web 2.0 que j&#039;ai utilisés aujourd’hui ?'>Quels sont les services web 2.0 que j&#039;ai utilisés aujourd’hui ?</a></li><li><a href='http://css4design.com/l-experience-utilisateur-au-centre-de-l-ergonomie-des-sites-web' title='L&#039;expérience utilisateur et l&#039;ergonomie des sites web'>L&#039;expérience utilisateur et l&#039;ergonomie des sites web</a></li><li><a href='http://css4design.com/css-naked-day-copaing-lyon-blog-css2-pratique-du-design-web' title='CSS Naked Day + Copaing + Lyon Blog + CSS2 Pratique&#8230;'>CSS Naked Day + Copaing + Lyon Blog + CSS2 Pratique&#8230;</a></li><li><a href='http://css4design.com/reseaux-sociaux-et-esprit-web-2-0' title='Les réseaux sociaux et l&#039;esprit web 2.0'>Les réseaux sociaux et l&#039;esprit web 2.0</a></li></ul>
 <p><a href="http://css4design.com/?flattrss_redirect&amp;id=78&amp;md5=afe5a20271df3823dcffbac632c10970" title="Flattr" target="_blank"><img src="http://css4design.com/wp-content/plugins/flattr/img/flattr-badge-large.png" alt="flattr this!"/></a></p>]]></content:encoded>
			<wfw:commentRss>http://css4design.com/netvibes-web-2-0-vs-google-reader-plus-1/feed</wfw:commentRss>
		<slash:comments>5</slash:comments>
		<atom:link rel="payment" href="http://css4design.com/?flattrss_redirect&amp;id=78&amp;md5=afe5a20271df3823dcffbac632c10970" type="text/html" />
	</item>
		<item>
		<title>Les réseaux sociaux et l&#039;esprit web 2.0</title>
		<link>http://css4design.com/reseaux-sociaux-et-esprit-web-2-0</link>
		<comments>http://css4design.com/reseaux-sociaux-et-esprit-web-2-0#comments</comments>
		<pubDate>Wed, 08 Nov 2006 23:54:07 +0000</pubDate>
		<dc:creator>Bruno Bichet</dc:creator>
				<category><![CDATA[Web 2.0]]></category>
		<category><![CDATA[Ajax]]></category>
		<category><![CDATA[Réseaux sociaux]]></category>

		<guid isPermaLink="false">http://www.css4design.com/blog-reloaded/?p=47</guid>
		<description><![CDATA[Je me suis inscris sur plusieurs sites de social networking. Si leurs objectifs sont différents, ils proposent tous un ensemble de fonctions pour se faire connaitre et rencontrer d&#8217;autres profils personnes. Les sites évoqués dans la suite de ce billet apportent leur touche personnelle au web 2.0 dans ce qu&#8217;il a de mieux : faciliter les échanges entre les internautes. C&#8217;est pourquoi, plutôt qu&#8217;un comparatif pour choisir le meilleur, je vous invite à les essayer pour partager à votre tour votre sentiment sur la question. business is business Un rapide coup d&#8217;œil permet de dégager plusieurs catégories. Pour commencer, on [...]]]></description>
			<content:encoded><![CDATA[<div class="tweetmeme_button" style="float: right; margin-left: 18px;">
			<a href="http://api.tweetmeme.com/share?url=http%3A%2F%2Fcss4design.com%2Freseaux-sociaux-et-esprit-web-2-0">
				<img src="http://api.tweetmeme.com/imagebutton.gif?url=http%3A%2F%2Fcss4design.com%2Freseaux-sociaux-et-esprit-web-2-0&amp;source=br1o&amp;style=normal&amp;service=bit.ly&amp;service_api=R_0c1ee4b64f105d1b2672690740a77d6a&amp;b=2" height="61" width="50" />
			</a>
		</div><p><img class="il" title="static.flickr.com/1/184964553_58296ff831_m.jpg" src="/images/billet/social-networking.png" alt="social-networking.png" /> Je me suis inscris sur plusieurs sites de <em>social networking</em>. Si leurs objectifs sont différents, ils proposent tous un ensemble de fonctions pour se faire connaitre et rencontrer d&#8217;autres <del>profils</del> personnes. Les sites évoqués dans la suite de ce billet apportent leur touche personnelle au <em>web 2.0</em> dans ce qu&#8217;il a de mieux : faciliter les échanges entre les internautes. C&#8217;est pourquoi, plutôt qu&#8217;un comparatif pour choisir le meilleur, je vous invite à les essayer pour partager à votre tour votre sentiment sur la question.</p>

<p><span id="more-57"></span></p>

<h3>business is business</h3>

<p>Un rapide coup d&#8217;œil permet de dégager plusieurs catégories. Pour commencer, on trouve des réseaux sociaux orientés <em>business</em> : <strong>Viaduc</strong>, <strong>6nergie</strong>, et <strong>LinkedIn</strong>. Vous pourrez peut-être vous y faire des amis, mais  il s&#8217;agit surtout de trouver des clients, des fournisseurs, des employeurs ou des collaborateurs.</p>

<h4>Viaduc, un pont entre nous ?</h4>

<p><img class="il" title="viaduc" src="/images/billet/viaduc.png" alt="viaduc.png" /> Sur Viaduc, tout se joue sur la distance qui vous sépare d&#8217;un contact. Le site peut vous mettre en relation avec les amis de vos amis sur quatre niveaux, ce qui peut très vite représenter plusieurs centaines de contacts. Pour devenir le contact direct de quelqu&#8217;un, on peut soit lui demander, soit faire passer le message à tous ceux qui vous séparent de lui, le cas échéant.</p>

<p>La différence ? Le prix&#8230; Malheureusement, cette petite merveille a un coût plutôt élevé quand on ne peut pas le faire passer en note de frais&#8230; En fonction de votre abonnement, vous aurez droit à un certains nombre de mises en relations directes. Lors de l&#8217;inscription, j&#8217;ai eu droit à quelques mises en relations gratuites, ce qui est suffisant pour tester le service.</p>

<p>Cerise sur le gâteau, Viaduc a mis en place de nombreux <em>Hubs</em> (forums) thématiques libre d&#8217;accès ou sur invitation, modérés ou pas. Vous trouverez à coup sûr votre bonheur : les sujets abordés sont aussi divers que l&#8217;architecture, les associations d&#8217;anciens élèves, l&#8217;externalisation, la titrisation, le graphisme ou le développement web.</p>

<p>A titre d&#8217;exemple, voici <a title="Un intégrateur x-html css sur Viaduc" href="http://www.viaduc.com/public/profil/?memberId=0021djy8d50k5tk3">mon profil sur Viaduc</a>.</p>

<h4>6nergie, une facturation innovante</h4>

<p><img class="il" title="6nergie" src="/images/billet/6nergie.png" alt="6nergie.png" /> <a title="6nergie" href="www.6nergies.net/">6nergie</a> développe quant à lui, votre identité numérique et votre capital relationnel. Le site propose de développer votre activité, d&#8217;être plus visible des chasseurs de tête ou de Google&#8230;</p>

<p>Le principe de mise en relation est simple : en effectuant une recherche de contact (par nom, secteur ou tag) et vous obtenez une liste de personnes que vous pourrez ajouter à votre réseau via un formulaire dans lequel vous devrez détailler les raisons de votre demande.</p>

<p>Sur ce site la &laquo;&nbsp;qualification&nbsp;&raquo; des profils se fait grâce à un système de modération par les &laquo;&nbsp;anges du service&nbsp;&raquo; pour éviter les profils fantaisistes ou le spam. Le &laquo;&nbsp;plus&nbsp;&raquo; revendiqué par le service est la bonne visibilité de votre profil sur Google. <a href="http://www.google.fr/search?hl=fr&amp;q=%22bruno+bichet%22+6nergie&amp;btnG=Rechercher&amp;meta=">Pour l&#8217;instant c&#8217;est pas ça</a> ;)</p>

<p>Combien ça coûte ? C&#8217;est vous qui décidez de la valeur du service, étonnant, non ? Et en plus les comptes <a title="PayPal" href="https://www.paypal.com/fr/cgi-bin/webscr?cmd=_registration-run">PayPal</a> sont acceptés. Vous bénéficiez de quelques avantages comme la création de groupe, le choix du mode de contact, des annonces exclusives, etc.</p>

<h4>LinkedIn, trop gros ?</h4>

<p><img class="il" title="linkedin" src="/images/billet/linkedin.png" alt="linkedin.png" /> Ce site propose de rechercher des personnes, de promouvoir votre entreprise, de trouver un emploi, mais aussi de retrouver des camarades de classe ou d&#8217;anciens collègues de travail.</p>

<p>On retrouve le système de proximité à plusieurs niveaux avec en plus le nombre de fois où le profil a été recommandé, ainsi que le nombre de personnes auquel il est relié. Ce qui donne assez rapidement une idée de la popularité de la personne (nombre de connexions) et de sa fiabilité (nombre de recommandations).</p>

<p>A la différence des deux autres, ce site est en anglais, ce qui lui permet d&#8217;avoir une audience internationale, mais qui ne favorise peut-être pas les contacts de proximité (encore que c&#8217;est peut-être un à-priori). Néanmoins, avec ses 8 millions d&#8217;inscrits dans plus de 130 pays, vous avez là un réservoir de contact rempli à ras bord ;)</p>

<p>C&#8217;est gratuit ? L&#8217;ensemble du site <del>est</del> semble gratuit avec toutefois des options payantes : publier une offre d&#8217;emploi ou entrer directement en contact avec quelqu&#8217;un via le service <em>inMail</em>. Comme pour Viaduc, il semble que l&#8217;accès gratuit ne permet pas un nombre infini de mises en relations.</p>

<p>Les fonctionnalités du site semblent aussi puissantes que nombreuses. Peut-être un peu trop. A force de vouloir tout faire, les fonctions disponibles émergent lentement. Mais c&#8217;est sans doute le lot des sites &laquo;&nbsp;baleine&nbsp;&raquo;, comme eBay, de demander à l&#8217;utilisateur de prendre le temps de la découverte. Malgré tout, l&#8217;ergonomie, la navigation et le design sont un modèle dans le genre et méritent le détour.</p>

<p>A titre d&#8217;exemple, voici <a title="Mon profil web designer intégrateur x-html css sur LinkedIn" href="http://www.linkedin.com/pub/2/8a7/664">mon profil sur LinkedIn</a>.</p>

<h3>Et les échanges désintéressés dans tout ça ?</h3>

<p>A côté des sites de rencontres (professionnelles&#8230;), on trouve des sites centrés sur la diffusion de votre profil (ce que proposent déjà les sites orientés <em>business</em>), mais surtout (et ça va intéresser toutes celles et ceux qui tiennent un blog) sur la promotion de votre contenu. A titre d&#8217;exemple voici mes profils <a title="Un web designer html et css sur Ziki" href="http://www.ziki.com/people/bruno">Ziki</a> et  <a title="Un intégrateur web sur MyBlogLog" href="http://www.mybloglog.com/buzz/members/br1o/">MyBlogLog</a>.</p>

<h4>Ziki, le kiki de tout les kikis ?</h4>

<p><img class="il" title="ziki" src="/images/billet/ziki.png" alt="ziki.png" /> A l&#8217;affichage des profils, les différences sautent aux yeux : là où Ziki veut centraliser tout ce qui me concerne, MyBlogLog s&#8217;intéresse plutôt à la fréquentation de mes blogs. En effet, Ziki permet d&#8217;afficher plusieurs flux RSS, d&#8217;indiquer ses autres profils (astucieuse manière de renforcer la centralisation des informations personnelles) et d&#8217;ajouter d&#8217;autres personnes à son réseaux. Pour cela, c&#8217;est très simple, vous pouvez commencer par visiter les profils de ceux qui visitent le vôtre, et hop ! c&#8217;est parti ;)</p>

<p>Le point faible, c&#8217;est peut-être que les fonctions ne sautent pas aux yeux : je suis resté un petit moment devant mon profil à me demander ce que je pouvais faire ensuite ;) (Dans une moindre mesure, c&#8217;est aussi le cas pour MyBlogLog : au début, on se demande ce qu&#8217;on peut bien faire là. Les réseaux sociaux, c&#8217;est tout nouveau, tout beau&#8230; Reste à inventer <del>la vie</del> les usages sociaux qui vont avec.</p>

<p>Je me rend compte que plus je veux parler de Ziki, plus le clavier me pousse sur MyBlogLog ! Il manque peut-être à Ziki un peu de chaleur communautaire&#8230; Faisons confiance à son nouveau <a title="Directeur Général France" href="http://www.webdeux.info/mon-nouveau-job-directeur-general-de-ziki-france">DG</a> pour mettre le feu ;).</p>

<h4>MyBlogLog, c&#8217;est pas que des logs</h4>

<p><img class="il" title="mybloglog" src="/images/billet/mybloglog.png" alt="mybloglog.png" /> Sur MyBlogLog, on commence par indiquer les blogs dont on est l&#8217;auteur. Chaque blog devient une communauté à laquelle d&#8217;autres <em>BlogLogueur</em> peuvent s&#8217;inscrire. Un service de <em>tracking</em> vous permet de consulter les statistiques d&#8217;accès à votre blog : d&#8217;où viennent les visiteurs, que visitent-ils, mais le plus intéressant, sur quels liens cliquent-ils pour quitter votre prose.</p>

<p>L&#8217;accès aux statistiques est gratuit si vous vous contentez des dix premières entrées. Sinon, il faut payer :( Oui, tout de suite, c&#8217;est moins drôle&#8230; Mais bon, pour avoir des stats il y a heureusement de nombreux services gratuits. Ceux que les liens sortants intéressent pourront en savoir un peu plus dans cet ancien billet sur le <a hreflang="fr" href="http://www.css4design.com/index.php/2006/06/18/10-tracker-les-liens-sortants">tracking</a>.</p>

<p>Ce que je trouve intéressant sur MyBlogLog, c&#8217;est que de profil en profil, mes lectures se sont diversifiées ; mon horizon internet qui se bornait aux langages du web englobe désormais des thématiques variées. Finalement, les blogs, c&#8217;est comme les légumes : on devrait en lire une dizaine par jour sur des sujets différents pour améliorer son transit intellectuel ;)</p>

<h3>Et la tendresse, b&#8230; !</h3>

<p>Pour conclure sur ces deux sites, je donnerais un bon point à MyBlogLog :  dès votre inscription, vous avez un ami qui vous veux du bien et qui répond à vos questions. Ca parait bête comme choux, mais ça permet d&#8217;aborder les autres profils avec la tête haute (genre, moi aussi j&#8217;ai un ami) ; le web 2.0, ce n&#8217;est pas que de la technique !</p>

<p>Si vous désirez en savoir un peu plus sur ces services, lisez <a href="http://leromanais.free.fr/?p=627">MyBlogLog, le sympathique mouchard du net</a> pour avoir un autre point de vue sur MyBlogLog. Et <a href="http://www.webdeux.info/ziki-un-reseau-social-20-davenir-interview-de-patrick-chassany">ziki, un réseau social d&#8217;avenir</a> pour en savoir plus sur Ziki.</p>

<h3>Et pour les copaings on fait comment, hein ?</h3>

<p><em>&lt;copinage&gt;</em></p>

<p>C&#8217;est vrai, <a hreflang="fr" href="http://gameplayer.free.fr/">Gameplayer</a> a raison : ce billet ne serait pas complet si je ne disais un mot des sites qui permettent de retrouver ceux qu&#8217;on a perdus de vue, qu&#8217;ils soient copaings de classe ou collègues de travail. Pour le coup, je tiens à préciser qu&#8217;il s&#8217;agit là de pur copinage (c&#8217;est le cas de le dire ;) ) car au départ, j&#8217;avais fait l&#8217;impasse sur les sites de rencontres de type <a hreflang="fr" href="http://www.meetic.fr/">Meetic</a> ou les sites de retrouvailles comme <a hreflang="fr" href="http://copainsdavant.linternaute.com/">Copains d&#8217;avant</a>.</p>

<h4>Copaing, c&#8217;est bien !</h4>

<p><img class="il" title="copaing" src="/images/billet/copaing.png" alt="copaing.png" /> <a title="retrouver des anciens amis et camarades de classe" hreflang="fr" href="http://www.copaing.net/">Copaing</a>, c&#8217;est avant tout un site pour <em>retrouver des anciens amis et camarades de classe</em>, mais après réflexion, <em>Copaing</em> a lui aussi de nombreux atouts pour être utilisé comme réseau social.</p>

<p>Pour commencer, beaucoup d&#8217;inscrits se connaissent déjà et forment par ailleurs une ou plusieurs communautés comme <a title="Communauté de blogs lyonnais" hreflang="fr" href="http://www.lyon-blog.fr/">lyon-blog</a> notamment. De plus, les fonctionnalités du site permettent de contacter d&#8217;autres Copaings, de leur envoyer des messages ou de vous tenir au courant de leur actualité.</p>

<p>Dans tout réseau social qui se respecte, le nerf de la guerre, c&#8217;est le profil. Sur Copaing, votre présentation est dans un bel écrin grâce aux talents de <a hreflang="fr" href="http://www.chez-xuxu.net/">xuxu</a>. L&#8217;ensemble du site peut servir de modèle dans l&#8217;utilisation judicieuse des technologies dites <em>web 2.0</em> comme <a hreflang="fr" href="http://fr.wikipedia.org/wiki/Asynchronous_JavaScript_and_XML">Ajax</a> avec <a hreflang="fr" href="http://xhrconnection.sutekidane.net/">XHRConnection</a> ou l&#8217;API Google Maps pour localiser vos copaings.</p>

<p>Praline sur la brioche, on peut ajouter des photos à son album personnel qui s&#8217;afficheront sous la forme d&#8217;un diaporama du plus bel effet !</p>

<p>A titre d&#8217;exemple, voici <a title="Mon profil intégrateur web sur Copaing.net" href="http://www.copaing.net/br1o/">mon profil sur Copaing</a>.</p>

<p><em>&lt;/copinage&gt;</em></p>

<p>Bon réseaux !</p>

<h4 class="listLink">Linkographie :</h4>

<dl class="linkArticle"> <dt><strong>Les réseaux sociaux</strong></dt> <dt> <a title="viaduc" hreflang="fr" href="http://www.viaduc.com/">www.viaduc.com/</a> </dt> <dd> Viaduc, aujourd&#8217;hui viadeo. C&#8217;est drôle, parce que pour faire international les <em>anglo-américains</em> s&#8217;expriment en anglais (normal, vous me direz) et nous en France pour faire international, on parle Latin&#8230; </dd> <dt> <a title="6nergies" hreflang="fr" href="http://www.6nergies.net/">www.6nergies.ne</a> </dt> <dd> 6nergie développe votre identité numérique et votre capital relationnel. Toujours pas au top question référencement, mais une facturation et des services originaux. </dd> <dt> <a title="linkedin" hreflang="en" href="http://www.linkedin.com/">www.linkedin.com</a> </dt> <dd> linkedin : avec plus de 8 millions d&#8217;utilisateurs vous y retrouverez certainement votre bonheur ;) </dd> <dt> <a title="zik" hreflang="fr" href="http://www.ziki.com/">www.ziki.com/</a> </dt> <dd> Ziki, tient votre identité numérique bien au chaud. </dd> <dt> <a title="mybloglog" hreflang="en" href="http://www.mybloglog.com/">www.mybloglog.com</a> </dt> <dd> mybloglog : pour découvrir pleins de blog, connaître l&#8217;audience du vôtre. </dd> <dt> <a title="copaing" hreflang="fr" href="http://www.copaing.net/">www.copaing.net</a> </dt> <dd> Copaing c&#8217;est bieng pour retrouver vos anciens camarades de classe ou collègues de travail. Dans une ambiance conviviale, vous découvrirez les albums photo des uns et des autres, leur actualité, et bien sûr leurs parcours. Gratuitement ? Oui ! </dd> </dl>

<h3 class='related_post_title'>Articles sur le même sujet</h3>

<ul class='related_post'><li><a href='http://css4design.com/quels-sont-les-services-web-2-0-que-j-ai-utilises-aujourdhui' title='Quels sont les services web 2.0 que j&#039;ai utilisés aujourd’hui ?'>Quels sont les services web 2.0 que j&#039;ai utilisés aujourd’hui ?</a></li><li><a href='http://css4design.com/css-naked-day-copaing-lyon-blog-css2-pratique-du-design-web' title='CSS Naked Day + Copaing + Lyon Blog + CSS2 Pratique&#8230;'>CSS Naked Day + Copaing + Lyon Blog + CSS2 Pratique&#8230;</a></li><li><a href='http://css4design.com/le-web-20-peut-etre-dangereux-pour-vos-profits' title='Le web 2.0 peut être dangereux&#8230; pour vos profits'>Le web 2.0 peut être dangereux&#8230; pour vos profits</a></li><li><a href='http://css4design.com/43-things-what-do-you-want-to-do-with-your-life' title='43 Things : what do you want to do with your life?'>43 Things : what do you want to do with your life?</a></li><li><a href='http://css4design.com/twitter-signal-social-microblogging-et-moblogging-web-20' title='Twitter : Signal social, microblogging et moblogging'>Twitter : Signal social, microblogging et moblogging</a></li></ul>
 <p><a href="http://css4design.com/?flattrss_redirect&amp;id=57&amp;md5=4ef9caa11665e3bff708aa161b6c3ddd" title="Flattr" target="_blank"><img src="http://css4design.com/wp-content/plugins/flattr/img/flattr-badge-large.png" alt="flattr this!"/></a></p>]]></content:encoded>
			<wfw:commentRss>http://css4design.com/reseaux-sociaux-et-esprit-web-2-0/feed</wfw:commentRss>
		<slash:comments>16</slash:comments>
		<atom:link rel="payment" href="http://css4design.com/?flattrss_redirect&amp;id=57&amp;md5=4ef9caa11665e3bff708aa161b6c3ddd" type="text/html" />
	</item>
		<item>
		<title>Gérard M&#039;Ajax, mashup et web 2.0</title>
		<link>http://css4design.com/gerard-m-ajax-mashup-et-web-20</link>
		<comments>http://css4design.com/gerard-m-ajax-mashup-et-web-20#comments</comments>
		<pubDate>Wed, 18 Oct 2006 11:25:10 +0000</pubDate>
		<dc:creator>Bruno Bichet</dc:creator>
				<category><![CDATA[Web 2.0]]></category>
		<category><![CDATA[Ajax]]></category>

		<guid isPermaLink="false">http://www.css4design.com/blog-reloaded/?p=44</guid>
		<description><![CDATA[Un mashup est un site web qui utilise le contenu de plusieurs sources pour créer un service totalement nouveau. Le tout devient supérieur à l&#8217;ensemble des parties qui le compose, ou pour dire les choses plus simplement : 1 + 1 = 3 ! Ce concept de mélange, de mixage (voire de recyclage), suit de près celui de web 2.0, à croire que sans le premier, le second n&#8217;existerais pas. A moins, bien entendu, que ça ne soit l&#8217;inverse&#8230; Dans tous les cas, la formule est simple : Mashup Web = API (A) + API (B)&#8230; Mashup ? Articulez, on [...]]]></description>
			<content:encoded><![CDATA[<div class="tweetmeme_button" style="float: right; margin-left: 18px;">
			<a href="http://api.tweetmeme.com/share?url=http%3A%2F%2Fcss4design.com%2Fgerard-m-ajax-mashup-et-web-20">
				<img src="http://api.tweetmeme.com/imagebutton.gif?url=http%3A%2F%2Fcss4design.com%2Fgerard-m-ajax-mashup-et-web-20&amp;source=br1o&amp;style=normal&amp;service=bit.ly&amp;service_api=R_0c1ee4b64f105d1b2672690740a77d6a&amp;b=2" height="61" width="50" />
			</a>
		</div><p><img class="il" title="la magie m'Ajax" src="/images/billet/majax.png" alt="La magie m'Ajax" /> Un <em>mashup</em> est un site web qui utilise le contenu de plusieurs sources pour créer un service totalement nouveau. Le tout devient supérieur à l&#8217;ensemble des parties qui le compose, ou pour dire les choses plus simplement :  1 + 1 = 3 ! Ce concept de mélange, de mixage (voire de recyclage), suit de près celui de <em>web 2.0</em>, à croire que sans le premier, le second n&#8217;existerais pas. A moins, bien entendu, que ça ne soit l&#8217;inverse&#8230; Dans tous les cas, la formule est simple : <samp>Mashup Web = <abbr title="Application Programming Interface ou Interface de programmation">API</abbr> (A) + API (B)</samp>&#8230;</p>

<p><span id="more-54"></span></p>

<h3>Mashup ? Articulez, on ne vous comprend pas&#8230;</h3>

<p>Autrement dit, c&#8217;est de l&#8217;agrégation de contenu exogène. Vous l&#8217;aurez compris, les définitions ne manquent pas, tout comme le nombre de sites permettant à l&#8217;utilisateur de réunir et d&#8217;organiser à sa guise dans une page web du contenu provenant d&#8217;autres sites web.</p>

<p>C&#8217;est assez large. Néanmoins, parmi la multitude de services nouvelle génération, j&#8217;ai dégagé pour vous trois tendances qui regroupent la majeure partie de l&#8217;offre actuelle en matière de <em>web 2.0</em> :</p>

<h3><a hreflang="fr" href="http://maps.google.fr/">Google Maps</a> + <a hreflang="en" href="http://www.flickr.com/">Flickr</a> = <a hreflang="en" href="http://www.earthalbum.com">Earth Album</a></h3>

<p><strong>Les sites qui vous proposent un contenu spécifique</strong> comme <em>Earth Album</em>. Sur ce site vous parcourez le monde visuellement grâce à l&#8217;API <em>Google Maps</em>, en regardant les photos les plus appréciées du site <em>Flickr</em> en relation avec la zone géographique sur laquelle on a cliqué. Très cool. Un clic sur une des vignettes affiche une photo en grand format que l&#8217;on peut déplacer sur la carte.</p>

<p><strong>Dans le même registre :</strong> <a hreflang="en" href="http://www.gpeters.com/celeb/celebrity-ranker.php">Celebrity Ranker</a>, <a hreflang="en" href="http://www.liveplasma.com">Liveplasma</a>, <a hreflang="en" href="http://www.gurulib.com">Organize Home Library</a></p>

<h3>Actualités + Participation = <a hreflang="fr" href="http://www.wikio.fr">Wikio</a></h3>

<p><strong>Les sites qui vous demanderont de participer à la création du contenu</strong>. Dans <a href="http://www.wikio.fr/">wikio</a> le contenu provient de l&#8217;extraction automatisée d&#8217;actualités à partir de nombreuses sources d&#8217;information et des soumissions spontanées d&#8217;articles de la part des internautes.</p>

<p>Pour finir, c&#8217;est le vote des visiteurs en faveur de tel ou tel article ou catégorie qui qualifie le contenu. A noter qu&#8217;un espace <em>Mon Wikio</em> vous propose de personnaliser votre page avec les thèmes qui vous intéressent le plus.</p>

<p><strong>Dans le même registre :</strong> <a hreflang="fr" href="http://www.scoopeo.com/">Scoopeo</a>, <a hreflang="fr" href="http://www.fuzz.fr/">Fuzz</a>, <a hreflang="en" href="http://www.digg.com/">Digg</a>, et coup de cœur pour l&#8217;excellent <a hreflang="fr" href="http://tutmarks.com/">Tutmarks.</a></p>

<h3>Flux RSS + Modules = <a hreflang="fr" href="http://www.netvibes.com/">Netvibes</a></h3>

<p><strong>Les sites permettant d&#8217;organiser des contenus hétérogènes</strong>. Dans une application comme <a href="http://www.netvibes.com">Netvibes</a>, vous piochez dans une bibliothèque de contenu (flux RSS), de web services ou de mini applications à utiliser en ligne sous forme de modules.</p>

<p>Dans ces modules on trouve de tout : <em>post-it</em>, <em>todolist</em>, calendrier, recherche internet, bookmarks en ligne dont notamment <a hreflang="fr" href="http://www.blogmarks.net/">Blogmarks</a> ou <a hreflang="en" href="http://del.icio.us/">del.icio.us</a> qui sont elles aussi des applications web 2.0&#8230;</p>

<p>Un outil de recherche de module API pour chercher votre bonheur dans l&#8217;<a hreflang="en" href="http://eco.netvibes.com/">écosystème Netvibes</a> est même disponible ! Ca va des grilles de Sudoku, à une version spécifique de MSN.</p>

<p>Une fois installés, ces services vous suivent à chaque connexion : pratique quand on change souvent d&#8217;ordinateur, ou tout simplement quand on veut tout avoir dans le même onglet <a hreflang="fr" href="http://www.mozilla-europe.org/fr/products/firefox/">Firefox</a>.</p>

<p>Pour d&#8217;autres informations concernant le web 2.0 et Netvibes en particulier, cf. le billet <a hreflang="fr" href="http://www.css4design.com/index.php/2006/09/22/40-walk-like-an-ajaxian-avec-le-web-2-0">Walk like an ajaxian</a>.</p>

<p><strong>Dans le même registre :</strong> <a hreflang="fr" href="http://www.google.fr/ig">Accueil personnalisé</a> de Google, <a hreflang="en" href="http://www.google.com/reader/view/">Google Reader</a> ou <a hreflang="en" href="http://www.webwag.com/">Webwag</a>.</p>

<h3>Et sous le capot, c&#8217;est comment ?</h3>

<p>Le web 2.0 c&#8217;est aussi pas mal de technique. D&#8217;abord, pour qu&#8217;on puisse dire d&#8217;un service ou site qu&#8217;il est «web 2.0», il doit carburer à l&#8217;<abbr title="Asynchronous JavaScript and XML">Ajax</abbr>. L&#8217;utilisateur doit vraiment avoir l&#8217;impression d&#8217;être au cinéma : de l&#8217;action, des effets <em>fan.tas.ti.culo.us</em> pilotés par des véhicules prototypes tout terrain&#8230;</p>

<p>Pas de temps mort ? Oui, grâce à l&#8217;objet <a hreflang="fr" href="http://fr.wikipedia.org/wiki/Asynchronous_JavaScript_And_XML">XMLHttpRequest</a>, mon navigateur est devenu hyperactif : il fait des va-et-vient sur la toile sans que je m&#8217;en aperçoive. En gros, ce n&#8217;est plus la peine d&#8217;attendre la réponse du serveur pour voir sa commande arriver sur un plateau. Reste la note. Mais chut&#8230; Il parait que cette fois encore, c&#8217;est la bulle qui paie !</p>

<h4 class="listLink">Linkographie :</h4>

<dl class="linkArticle"> <dt><strong>Articles sur le web 2.0</strong></dt> <dt> <a title="http://www.fredcavazza.net/index.php?2005/08/24/808-web-20-une-premiere-definition" hreflang="fr" href="http://www.fredcavazza.net/index.php?2005/08/24/808-web-20-une-premiere-definition">http://www.fredcavazza.net/&#8230;</a> </dt> <dd> Web 2.0 : une première définition ? </dd> <dt> <a title="http://xmlfr.org/actualites/decid/051201-0001" hreflang="fr" href="http://xmlfr.org/actualites/decid/051201-0001">http://xmlfr.org/actualites/&#8230;</a> </dt> <dd> Entre mythes et réalité qui accompagnent le dernier sujet à la mode. </dd> <dt> <a title="http://www.internetactu.net/?p=6144" hreflang="fr" href="http://www.internetactu.net/?p=6144">http://www.internetactu.net/&#8230;</a> </dt> <dd> Qu’est-ce que le web 2.0 ? </dd> <dt><strong>l&#8217;Ajax facile avec XMLHttpRequest</strong></dt> <dt> <a title="http://xhrconnection.sutekidane.net/" hreflang="fr" href="http://xhrconnection.sutekidane.net/">http://xhrconnection.sutekidane.net</a> </dt> <dd> XHRConnection est une classe qui permet de simplifier l&#8217;utilisation de l&#8217;objet XMLHttpRequest. </dd> <dt> <a title="http://qwix.media-box.net/index.php/2005/01/21/45-XmlhttprequestEtPhp" hreflang="fr" href="http://qwix.media-box.net/index.php/2005/01/21/45-XmlhttprequestEtPhp">http://qwix.media-box.net/&#8230;</a> </dt> <dd> XmlHttpRequest et PHP </dd> <dt> <a title="http://www.sutekidane.net/creer-un-moteur-de-recherche-avec-xmlhttprequest-et-php.html" hreflang="fr" href="http://www.sutekidane.net/creer-un-moteur-de-recherche-avec-xmlhttprequest-et-php.html">http://www.sutekidane.net/&#8230;</a> </dt> <dd> Créer un moteur de recherche avec XmlHttpRequest et PHP </dd> </dl>

<h3 class='related_post_title'>Articles sur le même sujet</h3>

<ul class='related_post'><li><a href='http://css4design.com/le-web-20-peut-etre-dangereux-pour-vos-profits' title='Le web 2.0 peut être dangereux&#8230; pour vos profits'>Le web 2.0 peut être dangereux&#8230; pour vos profits</a></li><li><a href='http://css4design.com/quels-sont-les-services-web-2-0-que-j-ai-utilises-aujourdhui' title='Quels sont les services web 2.0 que j&#039;ai utilisés aujourd’hui ?'>Quels sont les services web 2.0 que j&#039;ai utilisés aujourd’hui ?</a></li><li><a href='http://css4design.com/l-experience-utilisateur-au-centre-de-l-ergonomie-des-sites-web' title='L&#039;expérience utilisateur et l&#039;ergonomie des sites web'>L&#039;expérience utilisateur et l&#039;ergonomie des sites web</a></li><li><a href='http://css4design.com/css-naked-day-copaing-lyon-blog-css2-pratique-du-design-web' title='CSS Naked Day + Copaing + Lyon Blog + CSS2 Pratique&#8230;'>CSS Naked Day + Copaing + Lyon Blog + CSS2 Pratique&#8230;</a></li><li><a href='http://css4design.com/netvibes-web-2-0-vs-google-reader-plus-1' title='Netvibes : web 2.0 vs Google Reader : +1'>Netvibes : web 2.0 vs Google Reader : +1</a></li></ul>
 <p><a href="http://css4design.com/?flattrss_redirect&amp;id=54&amp;md5=0175315f3f18b7819efafb7683486db0" title="Flattr" target="_blank"><img src="http://css4design.com/wp-content/plugins/flattr/img/flattr-badge-large.png" alt="flattr this!"/></a></p>]]></content:encoded>
			<wfw:commentRss>http://css4design.com/gerard-m-ajax-mashup-et-web-20/feed</wfw:commentRss>
		<slash:comments>5</slash:comments>
		<atom:link rel="payment" href="http://css4design.com/?flattrss_redirect&amp;id=54&amp;md5=0175315f3f18b7819efafb7683486db0" type="text/html" />
	</item>
		<item>
		<title>Walk like an ajaxian</title>
		<link>http://css4design.com/walk-like-an-ajaxian-avec-le-web-2-0</link>
		<comments>http://css4design.com/walk-like-an-ajaxian-avec-le-web-2-0#comments</comments>
		<pubDate>Fri, 22 Sep 2006 06:02:09 +0000</pubDate>
		<dc:creator>Bruno Bichet</dc:creator>
				<category><![CDATA[Web 2.0]]></category>
		<category><![CDATA[Ajax]]></category>

		<guid isPermaLink="false">http://www.css4design.com/blog-reloaded/?p=39</guid>
		<description><![CDATA[Les applications Web 2.0 qui doivent changer notre vie, tiennent-elles paroles ? En prenant du recul vis-à-vis des promesses de bonheur numérique qu&#8217;est censé nous apporter le web 2.0, j&#8217;ai fais le point sur mon utilisation personnelle des sites communautaires. Vous savez : Flickr, YouTube, DailyMotion, Netvibes, Writely, Wikipedia, Myspace, Gmail, Wikio, Blogmarks, Zlio, Ziki, et tant d&#8217;autres. J&#8217;ai tendance à tester les nouveaux services : je m&#8217;inscris, je jette un œil pour me faire une idée et&#8230; et la plupart du temps, je me connecte deux ou trois fois, et j&#8217;y pense et puis j&#8217;oublie ! Pour commencer, c&#8217;est [...]]]></description>
			<content:encoded><![CDATA[<div class="tweetmeme_button" style="float: right; margin-left: 18px;">
			<a href="http://api.tweetmeme.com/share?url=http%3A%2F%2Fcss4design.com%2Fwalk-like-an-ajaxian-avec-le-web-2-0">
				<img src="http://api.tweetmeme.com/imagebutton.gif?url=http%3A%2F%2Fcss4design.com%2Fwalk-like-an-ajaxian-avec-le-web-2-0&amp;source=br1o&amp;style=normal&amp;service=bit.ly&amp;service_api=R_0c1ee4b64f105d1b2672690740a77d6a&amp;b=2" height="61" width="50" />
			</a>
		</div><p><img class="il" title="web 2.0 : visuel originaire de  http://blog.icicom.up.pt/archives/2006_01.html" src="http://www.css4design.com/images/billet/web-2-0-bis.gif" alt="web 2.0" /> Les applications Web 2.0 qui doivent changer notre vie, tiennent-elles paroles ? En prenant du recul vis-à-vis des promesses de bonheur numérique qu&#8217;est censé nous apporter le web 2.0, j&#8217;ai fais le point sur mon utilisation personnelle des sites communautaires. Vous savez : Flickr, YouTube, DailyMotion, Netvibes, Writely, Wikipedia, Myspace, Gmail, Wikio, Blogmarks, Zlio, Ziki, et tant d&#8217;autres.</p>

<p><span id="more-49"></span></p>

<p>J&#8217;ai tendance à tester les nouveaux services : je m&#8217;inscris, je jette un œil pour me faire une idée et&#8230; et la plupart du temps, je me connecte deux ou trois fois, et j&#8217;y pense et puis j&#8217;oublie ! Pour commencer, c&#8217;est pénible d&#8217;avoir sa vie numérique éparpillée aux quatre coins de la toile. Et puis, tout ces formulaires de connexion, <em>sign in</em>, <em>login</em>, <em>logout</em>&#8230; pfff, quelle plaie !</p>

<p>Sans compter l&#8217;ingéniosité de nos serials entrepreneurs en tous genre qui nous proposent toujours plus de solutions pour centraliser tout ça. Le problème, c&#8217;est qu&#8217;ils sont nombreux, trop nombreux déjà, et ce n&#8217;est que le début, d&#8217;accord, d&#8217;accord&#8230;</p>

<h3>Et 1, et 2, et 3 zéro ?</h3>

<p>Je ne rentrerais pas dans les aspects polémiques concernant les <a hreflang="fr" href="http://www.omacronides.com/news/0207-une-definition-du-web-2-0">objectifs du Web 2.0</a> ou les <a hreflang="fr" href="http://sig.levillage.org/2005/09/06/critiques-du-web-semantique/">tirs de snipers</a> entre ceux qui échangeraient volontiers un web taxonomique à tendance sémantique contre deux web folksonomiques à tendance commerciale&#8230; Pour ma part, je pense que trois web sémantiques à tendance folksonomique avec une pincée de <a hreflang="fr" href="http://microformats.org/wiki/Main_Page-fr">microformats</a> devrait le faire pour les cinq années à venir. Après, on verra ;)</p>

<p>De toute manière, la vie numérique obéit aux mêmes lois de l&#8217;évolution phylogénétique que l&#8217;autre (vous savez, celle qu&#8217;on appelle la vrai) : ce qui ne sert pas, disparait. Faut voir le nombre de sites où je me suis inscrit par rapport à ceux que j&#8217;utilise vraiment régulièrement :</p>

<ol class="olExempleList">
    <li> <a title="Netvibes.com est une solution de page d'accueil personnalisée" href="http://www.netvibes.com/">Netvibes</a> :  pour l&#8217;aggrégation des flux <abbr title="Really Simple Syndication">RSS</abbr> et la rédaction de mes brouillons grâce aux <em>Webnotes</em>. Le système des <em>To Do List</em> me rappelle de mettre des images pour illustrer mes billets. L&#8217;économie de temps et de clics est réelle, puisque, grâce à Netvibes, je peux me passer de Writely, des autres aggrégateurs, de Google News&#8230; De plus, avec les nombreux modules disponibles, j&#8217;affiche la météo, les flux <abbr title="Really Simple Syndication">RSS</abbr> de photos en provenance de Flickr ; j&#8217;ai aussi la possibilité de suivre mes achats et ventes sur eBay et de consulter ma boite Gmail. Je vous laisse découvrir par vous-même les autres fonctionnalités.</li>
    <li> <a title="Bienvenue dans l'ère du social bookmarking" href="http://www.blogmarks.net">Blogmarks</a> : pour centraliser les marque-pages. L&#8217;économie ? J&#8217;ai abandonné del.icio.us (un peu lent à certaine heures, comme beaucoup de site US, amha) ; j&#8217;utilise de moins en moins les bookmarks enregistrés dans Firefox : trop fatiguant&#8230; faut tout faire soi-même, alors que là, si vous faites une sélection avant de cliquer sur <em>Add to BM</em>, le champ description est pré-rempli par le contenu du presse-papier. A noter que Netvibes propose d&#8217;afficher le contenu de vos <em>blogmarks</em> avec les tags, les miniatures, et les descriptions. Cerise sur le gâteau, on peut s&#8217;y faire des amis. Si si&#8230; vous allez aussi faire faire des économies de bande passante à Meetic ;)</li>
    <li> <a title="Understand, connect and engage with your readers like never before" href="http://www.mybloglog.com">MyBlogLog</a>. Site communautaire <em>triple play</em> : les éditeurs de blog  peuvent faire connaissance avec leurs visiteurs et les faire se rencontrer entre eux. Un service de <em>tracking</em> affiche la provenance des visites, les pages visitées et les liens sortants. J&#8217;en vois au fond que ça a l&#8217;air d&#8217;intéresser&#8230;</li>
    <li> <a title="retrouver des membres en fonction des établissements qu'ils ont fréquenté" href="http://www.copaing.net">copaing</a>. Tout nouveau, tout beau, c&#8217;est le dernier service Web 2.0 proposé par <a hreflang="fr" href="http://www.chez-xuxu.net/">xuxu</a>. Ce site permet de retrouver gratuitement nos anciens camarades de classes (et les anciens collègues de travail, qui s&#8217;y colle ?). Le tout dans une ambiance sympatique et dans un cadre qui ne l&#8217;est pas moins. Economie ? Allez, faites pas semblant de ne pas savoir à quel site je pense ;)</li>
</ol>

<h3>Une petite conclusion, peut-être ?</h3>

<p>Vous le voyez, dans mon cas beaucoup d&#8217;élus mais peu d&#8217;appelés. Pour voir si vous avez bien compris les objectifs du Web 2.0, je vais vous donner un petit devoir à rendre sur votre utilisation &#8211; ou non &#8211; de ces outils à la pointe de la technologie, en deux parties quatre sous-parties ;)</p>

<h3 class='related_post_title'>Articles sur le même sujet</h3>

<ul class='related_post'><li><a href='http://css4design.com/le-web-20-peut-etre-dangereux-pour-vos-profits' title='Le web 2.0 peut être dangereux&#8230; pour vos profits'>Le web 2.0 peut être dangereux&#8230; pour vos profits</a></li><li><a href='http://css4design.com/quels-sont-les-services-web-2-0-que-j-ai-utilises-aujourdhui' title='Quels sont les services web 2.0 que j&#039;ai utilisés aujourd’hui ?'>Quels sont les services web 2.0 que j&#039;ai utilisés aujourd’hui ?</a></li><li><a href='http://css4design.com/l-experience-utilisateur-au-centre-de-l-ergonomie-des-sites-web' title='L&#039;expérience utilisateur et l&#039;ergonomie des sites web'>L&#039;expérience utilisateur et l&#039;ergonomie des sites web</a></li><li><a href='http://css4design.com/css-naked-day-copaing-lyon-blog-css2-pratique-du-design-web' title='CSS Naked Day + Copaing + Lyon Blog + CSS2 Pratique&#8230;'>CSS Naked Day + Copaing + Lyon Blog + CSS2 Pratique&#8230;</a></li><li><a href='http://css4design.com/netvibes-web-2-0-vs-google-reader-plus-1' title='Netvibes : web 2.0 vs Google Reader : +1'>Netvibes : web 2.0 vs Google Reader : +1</a></li></ul>
 <p><a href="http://css4design.com/?flattrss_redirect&amp;id=49&amp;md5=79f62ca745435dbfc0b9f2a68e3c9673" title="Flattr" target="_blank"><img src="http://css4design.com/wp-content/plugins/flattr/img/flattr-badge-large.png" alt="flattr this!"/></a></p>]]></content:encoded>
			<wfw:commentRss>http://css4design.com/walk-like-an-ajaxian-avec-le-web-2-0/feed</wfw:commentRss>
		<slash:comments>6</slash:comments>
		<atom:link rel="payment" href="http://css4design.com/?flattrss_redirect&amp;id=49&amp;md5=79f62ca745435dbfc0b9f2a68e3c9673" type="text/html" />
	</item>
		<item>
		<title>My Timelines : traversez une ligne temporelle Ajax</title>
		<link>http://css4design.com/my-timelines-traversez-une-ligne-temporelle-ajax</link>
		<comments>http://css4design.com/my-timelines-traversez-une-ligne-temporelle-ajax#comments</comments>
		<pubDate>Tue, 01 Aug 2006 11:45:05 +0000</pubDate>
		<dc:creator>Bruno Bichet</dc:creator>
				<category><![CDATA[Web 2.0]]></category>
		<category><![CDATA[Ajax]]></category>
		<category><![CDATA[Javascript]]></category>

		<guid isPermaLink="false">http://www.css4design.com/blog-reloaded/?p=31</guid>
		<description><![CDATA[My Timelines affiche une ligne temporelle dynamique sur votre site. A partir de n&#8217;importe quel flux RSS, Atom ou RDF, elle vous permettra de naviguer à travers le contenu de n&#8217;importe quel site en ayant une représentation graphique de la distribution des billets dans le temps. Comment ça marche ? Cette ligne du temps est composée de deux parties que l&#8217;on peut faire glisser vers la gauche ou vers la droite : du passé vers l&#8217;avenir. Selon les options sélectionnées, vous aurez les semaines en bas et les jours en haut. Chaque partie permet de naviguer d&#8217;un billet à l&#8217;autre [...]]]></description>
			<content:encoded><![CDATA[<div class="tweetmeme_button" style="float: right; margin-left: 18px;">
			<a href="http://api.tweetmeme.com/share?url=http%3A%2F%2Fcss4design.com%2Fmy-timelines-traversez-une-ligne-temporelle-ajax">
				<img src="http://api.tweetmeme.com/imagebutton.gif?url=http%3A%2F%2Fcss4design.com%2Fmy-timelines-traversez-une-ligne-temporelle-ajax&amp;source=br1o&amp;style=normal&amp;service=bit.ly&amp;service_api=R_0c1ee4b64f105d1b2672690740a77d6a&amp;b=2" height="61" width="50" />
			</a>
		</div><p>My Timelines affiche une ligne temporelle dynamique sur votre site. A partir de n&#8217;importe quel flux RSS, Atom ou RDF, elle vous permettra de naviguer à travers le contenu de n&#8217;importe quel site en ayant une représentation graphique de la distribution des billets dans le temps.</p>

<p><span id="more-40"></span></p>

<h3>Comment ça marche ?</h3>

<p>Cette ligne du temps est composée de deux parties que l&#8217;on peut faire glisser vers la gauche ou vers la droite : du passé vers l&#8217;avenir. Selon les options sélectionnées, vous aurez les semaines en bas et les jours en haut.</p>

<p>Chaque partie permet de naviguer d&#8217;un billet à l&#8217;autre à une vitesse proportionnelle à la périodicité choisie (rassurez-vous c&#8217;est beaucoup plus clair quand on le voit !)&#8230; Nous pouvons donc parcourir rapidement les jours, les semaines ou les mois, puis affiner l&#8217;affichage des billets par heure, par jour ou par semaine.</p>

<p>Pour afficher cette <em>Timeline</em>, c&#8217;est très simple. Rendez vous à l&#8217;adresse <a href="http://www.mytimelines.net/create-a-timeline/" hreflang="en" title="Pour créer votre Timelines">http://www.mytimelines.net/create-a-timeline/</a> et commencez par indiquez l&#8217;adresse du flux et la périodicité voulue : choisissez <em>Hour/Day</em> si vous publiez plusieurs billets par jour, <em>Day/Week</em> si vous écrivez plusieurs billets par semaine, ou bien <em>Day/Month</em> pour quelques billets par mois, ou encore <em>Week/Month</em>&#8230;</p>

<p>Il ne reste que la police, la hauteur et la largeur à choisir pour obtenir le code qui insérera, via un script appelant des fonctions Ajax, cette fameuse ligne de temps dans une <samp>div</samp> vide au départ. Le code à copier-coller se compose de deux lignes de Javascript à insérer entre les balises <samp>head</samp>, et de quelques lignes de code à coller à l&#8217;endroit où vous voulez afficher la <em>timeline</em>.</p>

<p>Notez qu&#8217;il est possible de styler certains éléments avec CSS ; vous trouverez quelques conseils en la matière sur le site. Garder également à l&#8217;esprit que ce script ne fonctionnera pas si vous tenter de le coller ailleurs qu&#8217;entre les balises <samp>head</samp>.</p>

<h3>Les petits plus</h3>

<p>Cerise sur le gâteau, un clic sur le titre du billet, affiche ce dernier dans une élégante bulle <em>scrollable</em>. Un autre point positif à noter, c&#8217;est que la timeline s&#8217;affiche correctement sur IE comme sur Firefox. Avec tout de même un léger avantage pour ce dernier ! De toute manière, l&#8217;équipe qui développe <em>Timelines</em>  &#8211; mais qui possède d&#8217;autres co(r)des à son arc &#8211; a l&#8217;air de prendre soin de produire des scripts utilisables par un maximum d&#8217;agents utilisateurs.</p>

<h3>Attention quand même !</h3>

<p>Très cool, <em>Timelines</em> n&#8217;en est pas moins (un peu) longue à se charger. Il y a deux appels de script sur des serveurs certainement surchargés. Après avoir installé le script dans le <em>Template</em> de dotclear, je me suis décidé à créer une page séparée en raison du temps de chargement. Autre petit soucis, les caractères accentués ne s&#8217;affichent pas correctement !</p>

<h3>Conclusion</h3>

<p>Malgré ces inconvénients perfectibles, ce script risque bien de devenir indispensable si vous voulez offrir une nouvelle expérience de navigation à vos visiteurs. Rien de moins ! En ce qui me concerne, vous pouvez <a href="/share/related/timelines.php" hreflang="fr">voir My Timelines en action</a>. C&#8217;est gris, c&#8217;est pratique !</p>

<h3 class='related_post_title'>Articles sur le même sujet</h3>

<ul class='related_post'><li><a href='http://css4design.com/l-experience-utilisateur-au-centre-de-l-ergonomie-des-sites-web' title='L&#039;expérience utilisateur et l&#039;ergonomie des sites web'>L&#039;expérience utilisateur et l&#039;ergonomie des sites web</a></li><li><a href='http://css4design.com/le-web-20-peut-etre-dangereux-pour-vos-profits' title='Le web 2.0 peut être dangereux&#8230; pour vos profits'>Le web 2.0 peut être dangereux&#8230; pour vos profits</a></li><li><a href='http://css4design.com/quels-sont-les-services-web-2-0-que-j-ai-utilises-aujourdhui' title='Quels sont les services web 2.0 que j&#039;ai utilisés aujourd’hui ?'>Quels sont les services web 2.0 que j&#039;ai utilisés aujourd’hui ?</a></li><li><a href='http://css4design.com/css-naked-day-copaing-lyon-blog-css2-pratique-du-design-web' title='CSS Naked Day + Copaing + Lyon Blog + CSS2 Pratique&#8230;'>CSS Naked Day + Copaing + Lyon Blog + CSS2 Pratique&#8230;</a></li><li><a href='http://css4design.com/netvibes-web-2-0-vs-google-reader-plus-1' title='Netvibes : web 2.0 vs Google Reader : +1'>Netvibes : web 2.0 vs Google Reader : +1</a></li></ul>
 <p><a href="http://css4design.com/?flattrss_redirect&amp;id=40&amp;md5=8c4ae535d906282b181311cfe79c906f" title="Flattr" target="_blank"><img src="http://css4design.com/wp-content/plugins/flattr/img/flattr-badge-large.png" alt="flattr this!"/></a></p>]]></content:encoded>
			<wfw:commentRss>http://css4design.com/my-timelines-traversez-une-ligne-temporelle-ajax/feed</wfw:commentRss>
		<slash:comments>3</slash:comments>
		<atom:link rel="payment" href="http://css4design.com/?flattrss_redirect&amp;id=40&amp;md5=8c4ae535d906282b181311cfe79c906f" type="text/html" />
	</item>
	</channel>
</rss>

<!-- Performance optimized by W3 Total Cache. Learn more: http://www.w3-edge.com/wordpress-plugins/

Page Caching using disk: enhanced (User agent is rejected)

Served from: css4design.com @ 2012-02-08 11:01:39 -->
