<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" media="screen" href="/~d/styles/rss2full.xsl"?><?xml-stylesheet type="text/css" media="screen" href="http://feeds.feedburner.com/~d/styles/itemcontent.css"?><rss 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/" xmlns:feedburner="http://rssnamespace.org/feedburner/ext/1.0" version="2.0">

<channel>
	<title>Le blog de Webving</title>
	
	<link>http://www.webving.fr/blog</link>
	<description>Just another WordPress weblog</description>
	<lastBuildDate>Mon, 25 Jul 2011 11:22:43 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0</generator>
		<atom10:link xmlns:atom10="http://www.w3.org/2005/Atom" rel="self" type="application/rss+xml" href="http://feeds.feedburner.com/LeBlogDeWebving" /><feedburner:info uri="leblogdewebving" /><atom10:link xmlns:atom10="http://www.w3.org/2005/Atom" rel="hub" href="http://pubsubhubbub.appspot.com/" /><item>
		<title>Ruby on Rails, sur le PaaS Heroku avec MongoDB, et un peu de Google Font aussi</title>
		<link>http://feedproxy.google.com/~r/LeBlogDeWebving/~3/6nAEtrjgnbM/</link>
		<comments>http://www.webving.fr/blog/ruby-on-rails-sur-le-paas-heroku-avec-mongodb-et-un-peu-de-google-font-aussi/#comments</comments>
		<pubDate>Fri, 08 Oct 2010 07:10:26 +0000</pubDate>
		<dc:creator>Webving</dc:creator>
				<category><![CDATA[Service]]></category>
		<category><![CDATA[Technologie]]></category>
		<category><![CDATA[Tutoriel]]></category>

		<guid isPermaLink="false">http://www.webving.fr/blog/?p=146</guid>
		<description><![CDATA[Démonstration en vidéo: construire et déployer une application Rails fonctionnelle, sur une base de données en ligne, avec un look un peu moins pourri que le Scaffold. Le combo Rails-Heroku-MongoHQ-et-un-peu-de-Google-Font permet de se concentrer sur la création et le test de l'appli, et de ne plus perdre de temps sur le déploiement, le choix du serveur ou l'hébergement.]]></description>
			<content:encoded><![CDATA[<p>Dans cette vidéo qui prend son temps (1h), <a href="http://www.futurice.com/blog/the-future-is-here-rails-and-the-cloud-ecosystem">Harri Kauhanen</a> crée, met en production, teste et &#8216;scale&#8217; une petite application Rails sur le &#8216;Platform as a Service&#8217; <a href="http://heroku.com/">Heroku</a>. C&#8217;est une petite application qui fait des post-its colorés, avec une police provenant du <a href="http://code.google.com/webfonts">Google Font Directory</a>.</p>
<p>Je n&#8217;ai pas parlé de Heroku encore, il s&#8217;agit d&#8217;une solution pour déployer <a href="http://rubyonrails.org/">Ruby on Rails</a> en <a href="http://fr.wikipedia.org/wiki/Cloud_computing">Cloud Computing</a> et donc s&#8217;économiser le fastidieux et détestable (en tous cas pour moi) moment de mise en place de l&#8217;hébergement.</p>
<p>Par ailleurs, cette petite appli utilise une base de données (open source)qui monte: <a href="http://www.mongodb.org/">MongoDB</a>. Je n&#8217;ai pas trop étudié ce produit mais pour donner un aperçu de ses possibilités: on déclare les variables dans le modèle, quasi-dynamiquement puisqu&#8217;il est inutile de passer par les migrations. Heroku propose d&#8217;utiliser MongoDB en tant qu&#8217;Add-on avec <a href="https://mongohq.com/home">MongoHQ</a>, un service de MongoDB en cloud.</p>
<p>Un gros intérêt à tout ça, en plus de la simplicité de déploiement, c&#8217;est que c&#8217;est gratuit ! Tant que vous n&#8217;utilisez que peu de ressources et que votre appli n&#8217;a que des besoins frugaux, bien sûr.</p>
<p><iframe src="http://player.vimeo.com/video/15216785" width="400" height="300" frameborder="0"></iframe>
<p><a href="http://vimeo.com/15216785">Future is Here &#8211; Rails and Cloud Ecosystem</a> from <a href="http://vimeo.com/futurice">Futurice Ltd</a> on <a href="http://vimeo.com">Vimeo</a>.</p>
<p>J&#8217;avais testé Heroku il y a quelques mois sur une mini-appli utilisant l&#8217;<a href="http://code.google.com/intl/fr-FR/apis/picasaweb/overview.html">API de Picasa</a>, que j&#8217;ai très subtilement nommée <a href="http://piciso.heroku.com">Piciso</a>.</p>
<img src="http://feeds.feedburner.com/~r/LeBlogDeWebving/~4/6nAEtrjgnbM" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://www.webving.fr/blog/ruby-on-rails-sur-le-paas-heroku-avec-mongodb-et-un-peu-de-google-font-aussi/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		<feedburner:origLink>http://www.webving.fr/blog/ruby-on-rails-sur-le-paas-heroku-avec-mongodb-et-un-peu-de-google-font-aussi/</feedburner:origLink></item>
		<item>
		<title>La fidélisation sur le web, les techniques de base</title>
		<link>http://feedproxy.google.com/~r/LeBlogDeWebving/~3/yz5E_F2zsjo/</link>
		<comments>http://www.webving.fr/blog/lfidelisation-web-bases-rss-newsletter-social-bookmarking/#comments</comments>
		<pubDate>Thu, 10 Jun 2010 05:58:29 +0000</pubDate>
		<dc:creator>Webving</dc:creator>
				<category><![CDATA[Service]]></category>

		<guid isPermaLink="false">http://www.webving.fr/blog/?p=42</guid>
		<description><![CDATA[Entre un visiteur qui vient deux fois et trois visiteurs qui ne viennent qu&#8217;une fois, que préférez-vous ? Celui qui vient, qui revient, qui ramène ses copains, qui reviennent et qui ramènent leurs copains&#8230; En attendant d&#8217;avoir un service aussi viral, on peut s&#8217;arranger pour aider le premier à revenir. L&#8217;internaute &#8220;plus&#8221;, celui qui bouffe [...]]]></description>
			<content:encoded><![CDATA[<p>Entre un visiteur qui vient deux fois et trois visiteurs qui ne viennent qu&#8217;une fois, que préférez-vous ? Celui qui vient, qui revient, qui ramène ses copains, qui reviennent et qui ramènent leurs copains&#8230; En attendant d&#8217;avoir un service aussi viral, on peut s&#8217;arranger pour aider le premier à revenir.</p>
<p>L&#8217;internaute &#8220;plus&#8221;, celui qui bouffe du web toute la journée, est bombardé de signaux de multiples sources.<br />
L&#8217;internaute qui a une vie, qui se connecte une heure le soir pour vérifier ses mails et passer un peu sur ses quelques sites favoris, a peu de temps à vous consacrer.<br />
Pour l&#8217;un comme pour l&#8217;autre, il faut proposer des outils utiles et rapides pour accéder à votre service avec le moins d&#8217;effort possible, et surtout pas un effort de mémoire (&#8220;comment s&#8217;appelait ce site super que j&#8217;ai visité hier ?&#8221;). Autant d&#8217;usages que d&#8217;utilisateurs donc à partir d&#8217;un trafic conséquent, on a plus vraiment le choix et il faut proposer toute une gamme de services de fidélisation.</p>
<p>Je vais faire un petit récapitulatif des quelques outils courant de base dont l&#8217;usage commence à remonter à la préhistoire mais qu&#8217;il est toujours pertinent de connaître.</p>
<p><b>Disclaimer 1:</b> je sais que je suis mal chaussé et que Webving.fr n&#8217;applique pas encore tout ça (m&#8217;enfin vu le trafic et la cible, hors Rss peu de débouchés)<br />
<b>Disclaimer 2:</b> je vais enfoncer beaucoup de portes ouvertes, mais de ce que je vois ça et là sur le net, pas mal d&#8217;éditeurs semblent passer à coté de tout ça.<br />
<b>Disclaimer 3:</b> je parle surtout de mon expérience sur des sites Média, tout ceci n&#8217;est pas forcément optimisé pour du marchand, mais ça ne s&#8217;en éloigne pas trop non plus.</p>
<ul style="list-style-type:square;margin-left:20px;">
<li> <a href="#ping-utilisateurs">&#8220;pinguer&#8221; vos utilisateurs, une action toujours délicate</a>,</li>
<li> <a href="#bookmark-social-bookmarking">le bookmark, delicious et le social bookmarking</a>,</li>
<li> <a href="#rss">le rss</a>,</li>
<li> <a href="#newsletter">la newsletter</a>,</li>
<li> plus tard, un jour, peut-être, je prendrai le temps de parler des techniques plus complexes ou plus modernes: communautés et forums (pas neuf, mais toujours essentiel), du user-engagement en général, des réseaux sociaux&#8230;
</ul>
<div id="ping-utilisateurs">
<h3>Canal de ping et fidélisation</h3>
<p>J&#8217;appelle Ping l&#8217;action de lancer quelque chose vers l&#8217;utilisateur (dans le sens envoyer un email, publier une actu qui update le flux rss, publier un message sur votre page officielle facebook&#8230; pas dans le sens de lui lancer votre tatane gauche).</p>
<p>Quand vous publiez une information, elle ne touchera pas votre abonné/lecteur de la même façon selon le canal par lequel il la reçoit. Vous lui mangez une petite part d&#8217;intimité à chaque fois, un petit peu de ce temps précieux pour lui mais inutile pour vous, où il ne se trouve pas à surfer sur votre site. Plus on le touche dans son intimité, plus le message a de chances d&#8217;être perçu, mais plus il a de chances d&#8217;être mal perçu et d&#8217;aboutir à la perte de votre abonné.<br />
<a href="http://www.webving.fr/blog/wp-content/uploads/2010/06/intimitéfidélisation2.png"><img src="http://www.webving.fr/blog/wp-content/uploads/2010/06/intimitéfidélisation2.png" alt="fidélisation et intimité de l&#039;abonné" title="intimité fidélisation" width="700" class="alignleft size-full wp-image-126" /></a>
</div>
<div id="bookmark-social-bookmarking">
<h3>Le Bookmark et le social bookmarking (à la Delicious)</h3>
<p>Je passe vite fait sur le plus vieux truc de fidélisation du web : le lien ou bouton &#8220;ajouter à mes favoris&#8221;. A mettre bien visible, plutôt en haut de page en priant que quelques internautes cliquent dessus par flemme d&#8217;utiliser le gestionnaire de bookmarks de leur navigateur, ou que leur oeil passant dessus ils se souviennent de cette fonctionnalité. Certains outils de Web-Analytics vous permettront de mettre un tracker pour compter les visites qu&#8217;il génère, ce qui peut donner une indication de l&#8217;efficacité de la chose.<br />
Ce lien a tendance à disparaître, la place est cher sur une page web, et beaucoup d&#8217;éditeurs préfèrent l&#8217;utiliser pour les autres canaux.</p>
<p>Certains internautes ont pris l&#8217;habitude d&#8217;utiliser des outils de <a href="http://fr.wikipedia.org/wiki/Social_bookmarking">Social bookmarking</a>, utiles pour conserver ses liens dans le cloud, organisés par mots-clef. Le plus classique est <a href="http://delicious.com/">Delicious</a>, mais il en existe bien d&#8217;autres. Voir quelques exemples dans la case verte au bas des billets de ce blog, la zone &#8220;partager&#8221;. Notez qu&#8217;il y a un léger abus sémantique pour le mot &#8220;partager&#8221;: <strong>bookmarquer dans Delicious ou Google Bookmarks est une démarche d&#8217;utilité personnelle avant d&#8217;être sociale</strong>, au contraire de partager sur facebook ou twitter, qui n&#8217;a pour but que d&#8217;envoyer à ses contacts des liens susceptibles de les intéresser aussi. Personne, à moins de masochisme, n&#8217;utilise facebook ou twitter comme outil de bookmarking pure (pas d&#8217;historique, pas de mots-clefs&#8230;)</p>
<p>Il existe des générateurs de boutons tout prêt pour votre site comme <a href="http://www.addthis.com/">Addthis</a><br />
<a href="http://www.addthis.com/"><img src="http://www.webving.fr/blog/wp-content/uploads/2010/06/addthis-button-selection1.jpg" alt="" title="addthis-button-selection" width="700" class="alignleft size-full wp-image-129" /></a>
</div>
<div id="rss">
<h3>Les flux Rss</h3>
<p>Au cas où : <a href="http://fr.wikipedia.org/wiki/Flux_RSS">définition d&#8217;un flux Rss</a></p>
<p>Qu&#8217;on en propose un ou plusieurs, il faut au moins un gros bouton Rss bien visible sur toutes vos pages, et un petit lien près de tous vos contenus principaux.<br />
Le Rss a ceci de bien pour l&#8217;éditeur qu&#8217;il ne représente quasiment aucune contrainte technique pour peu qu&#8217;il héberge son service sur une plateforme CMS pas trop vieille.</p>
<p>L&#8217;abonné Rss consulte ses flux quand il le souhaite et une fréquence de publication élevée ne l&#8217;embarrassera pas outre-mesure.<br />
Le revers c&#8217;est que son implication est bien moindre qu&#8217;une newsletter, surtout que les utilisateurs de flux sont, d&#8217;après l&#8217;expérience empirique que j&#8217;en fait autour de moi, des infovores abonnés à des dizaines de sites. Difficile pour un éditeur de ressortir du lot quand il est perdu au milieu des flux de tous ses concurrents.</p>
<p>Beaucoup d&#8217;éditeurs n&#8217;y publient que le titre et le chapeau avec un lien vers l&#8217;article original. Certains autres y mettent le contenu intégral. Les raisons de ce choix sont souvent d&#8217;ordre économique: la plupart des médias web (sur)vivant grâce aux pubs affichées sur leur site, ils préfèrent inviter les internautes à s&#8217;y rendre pour le lire dans son contexte.</p>
<p>A une époque, j&#8217;ai cru qu&#8217;on verrait fleurir le choix pour l&#8217;internaute: un Rss avec les infos tronqués sans pub ou un Rss avec les articles complets avec la pub.<br />
Je me suis trompé: aujourd&#8217;hui on a partout des flux Rss tronqués avec la pub.</p>
<p>Les flux Rss étant récupérables sur d&#8217;autres plateformes (c&#8217;est le principe), on prendra soin de régulièrement chercher si des mange-merde ne le dupliquent pas sur leur propre site ou aggrégateur (ce que fait Glifr.com, je sais, je sais&#8230; Mais c&#8217;est une vraie remise en contexte et Glifr pointe vers les originaux en lien dur et sémantique, ce qui booste leurs référencements bien davantage que le sien). Google s&#8217;efforce de ne pas indexer les pages farcies de contenu dupliqué depuis quelques années, ce qui a affaibli cette menace.</p>
<p>L&#8217;icône du Rss s&#8217;est un peu faite dans le temps, il fut une époque où c&#8217;était un bouton &#8220;xml&#8221; ou &#8220;feed&#8221;, maintenant le point et ses deux quarts de cercle concentriques sont standards. Voici quelques exemples provenant de <a href="http://icones.pro">icones.pro</a> (vérifiez toujours la licence d&#8217;utilisation avant de vous servir de ce genre d&#8217;outil):</p>
<p><a href="http://icones.pro/rss-picto-flux-format-13-image-png.html"><img src="http://www.webving.fr/blog/wp-content/uploads/2010/06/rss-picto-flux-format-13-icone-6315-96.png" alt="" title="rss-picto-flux-format-13-icone-6315-96" width="96" height="96" class="alignleft size-full wp-image-96" alt="picto rss" /></a><a href="http://icones.pro/rss-picto-carre-07-image-png.html"><img src="http://www.webving.fr/blog/wp-content/uploads/2010/06/rss-picto-carre-07-icone-3882-96.png" alt="" title="rss-picto-carre-07-icone-3882-96" width="96" height="96" class="alignleft size-full wp-image-97" /></a><a href="http://icones.pro/rss-postit-ecran-flux-14-image-png.html"><img src="http://www.webving.fr/blog/wp-content/uploads/2010/06/rss-postit-ecran-flux-14-icone-7550-96.png" alt="" title="rss-postit-ecran-flux-14-icone-7550-96" width="96" height="96" class="alignleft size-full wp-image-98" /></a><a href="http://icones.pro/aliments-pour-animaux-des-lunettes-lecteur-rss-image-png.html"><img src="http://www.webving.fr/blog/wp-content/uploads/2010/06/aliments-pour-animaux-des-lunettes-lecteur-rss-icone-5999-96.png" alt="" title="lunettes-lecteur-rss-icone-5999-96" width="96" height="96" class="alignleft size-full wp-image-99" /></a><br />
(oui, j&#8217;aime bien les pictos)</p>
<p>En cas de forte affluence sur votre flux (si vous avez beaucoup d&#8217;abonnés), ou si vous voulez davantage de possibilités de customisation et de tracking, il existe un service bien pratique: <a href="http://feedburner.google.com">Feedburner</a>. Je viens de l&#8217;installer sur Webving, voici un screenshot qui peut vous donner une idée des fonctionnalités.<br />
<a href="http://www.webving.fr/blog/wp-content/uploads/2010/06/feedburner-accueil.jpg"><img src="http://www.webving.fr/blog/wp-content/uploads/2010/06/feedburner-accueil-150x150.jpg" alt="accueil feedburner" title="feedburner-accueil" width="150" height="150" class="alignleft size-thumbnail wp-image-109" /></a>
</div>
<div id="newsletter">
<h3>La newsletter</h3>
<p>Bien sûr, en 2010 la newsletter fait terriblement old-school, elle représente par rapport au Rss une somme pénible et coûteuse de problèmes techniques à gérer (routage, dossier de whitelistage auprès des fournisseurs de webmail et indexes anti-spam, gestion et maintenance du système d&#8217;abonnement, de compte, de sécurité de la base pour la confidentialité des données&#8230;) mais c&#8217;est un outil redoutable car <strong>elle tombe dans l&#8217;endroit le plus intime de l&#8217;internaute: sa boite email</strong> (même s&#8217;il est facile de créer des règles de redirections qui envoient directement l&#8217;email dans un dossier à part de la boite de réception). Et même s&#8217;il marque directement le message comme lu, ou qu&#8217;il le jette sans l&#8217;avoir ouvert, il y a des chances que son regard soit passé sur le titre et qu&#8217;une fois de temps à autres celui-ci l&#8217;interpelle. Dans tous les cas, voir le nom de l&#8217;émetteur vous rappelle à son bon souvenir.</p>
<p>Tant que la fréquence d&#8217;envoi ne l&#8217;incite pas à carrément se désabonner.</p>
<p>La fréquence d&#8217;envoi d&#8217;une newsletter dépend de la chaleur moyenne de la thématique et la perception de cette fréquence par l&#8217;abonné (trop rare, trop souvent&#8230;) dépend de son intérêt pour cette thématique. Proposer plusieurs fréquences d&#8217;abonnement (une quotidienne, une hebdomadaire, une mensuelle&#8230;) est utile pour l&#8217;internaute, mais gare à la complexité de la gestion d&#8217;un système pareil. X thématiques multipliées par Y fréquences = Cauchemar technique.</p>
<p>Voici un graphique assez évident pour résumer ça (enfoncer des portes ouvertes, je vous ai prévenu, mais j&#8217;aime bien les graphiques):<br />
<a href="http://www.webving.fr/blog/wp-content/uploads/2010/06/emailsannoyance2.png"><img src="http://www.webving.fr/blog/wp-content/uploads/2010/06/emailsannoyance2.png" alt="newsletter-frequence-envoi-lassitude" title="newsletter-frequence-envoi-lassitude" width="700" class="alignleft size-full wp-image-132" /></a></p>
<h4>Abonné content</h4>
<p>Etre dans la zone magique (&#8220;cool des nouvelles!&#8221;) n&#8217;est pas évident. L&#8217;idéal est d&#8217;être suffisamment attendu pour éviter que l&#8217;internaute prenne l&#8217;habitude se dire &#8220;je lirai ça plus tard&#8221;. Inversement, envoyer une newsletter par semestre risque de vous rendre un peu transparent.</p>
<p>Quelques exemples persos pour illustrer:</p>
<ul style="list-style-type:square;margin-left:20px;">
<li> Je reçois chaque jour la newsletter ZDNet.fr et l&#8217;ouvre parfois pour le détail de quelque titre intéressant, mais je suis loin de l&#8217;éplucher systématiquement ;</li>
<li> chaque newsletter de Terre d&#8217;aventure, envoyées sans fréquence particulière (parfois deux en une semaine, parfois rien pendant 2 mois) me fait lâcher ce que je faisais pour la lire du début à la fin (alors qu&#8217;il ne s&#8217;agit de rien de plus que d&#8217;une brochure-catalogue, mais les photos sont jolies, et peut-être qu&#8217;un jour quand je serai riche, ils me verront en client ; entre autres mais c&#8217;est important : <strong>parce qu&#8217;ils ne m&#8217;ont pas persécuté par email</strong>) ;</li>
<li> je me suis désabonné de tonnes de newsletters dont la thématique m&#8217;intéressaient tout autant, mais qui m&#8217;ont rendu fou à force d&#8217;envahir ma boite. Résultat: je ne sais même plus qui c&#8217;était.</li>
</ul>
<p>La zone magique a un autre effet: aujourd&#8217;hui tous les programmes d&#8217;emails (client et webmail) désactivent les images par défaut, et les utilisateurs peuvent les réactiver ponctuellement ou définitivement pour un émetteur donné. La classe américaine, c&#8217;est de faire partie de cette deuxième catégorie: <strong>votre lecteur vous a identifié comme une source de confiance</strong>, ce qui implique les avantages suivants:</p>
<ul style="list-style-type:square;margin-left:20px;">
<li>il bénéficiera du bien-être graphique de votre newsletter (car, reconnaissez-le, vous ne pouvez pas vous empêcher de mettre des photos et des jolis styles dans vos emails),</li>
<li>votre outil d&#8217;Analytics le comptera systématiquement à l&#8217;ouverture du mail,</li>
<li>il vous donne du crédit dans les indexes de filtres anti-spam</li>
</ul>
<p>Alors évidemment, ne changez pas le nom et l&#8217;email de l&#8217;émetteur à chaque envoie (si, si&#8230; j&#8217;en connais).</p>
<h4>Abonné pas content</h4>
<p>Comprendre qu&#8217;atteindre la zone critique (&#8220;je me désabonne&#8221;) pour certains internautes est inévitable. Le curseur de perception de la fréquence dépend de l&#8217;adéquation du message à l&#8217;intérêt du lecteur. S&#8217;abonner par erreur (un article d&#8217;un jour ne reflétant pas la thématique habituelle) ou juste pour essayer est fréquent. <strong>Tenter de conserver cet internaute égaré est néfaste</strong>.<br />
La procédure de désabonnement doit être facile (un seul clic), immédiate, et efficace. Le beau message &#8220;votre désabonnement a été pris en compte&#8221; doit être suivi d&#8217;effet, sinon vous allez subir le courroux légitime de votre ex-abonné(e) qui va vous cataloguer en spammeur, avec les conséquences suivantes:</p>
<ul style="list-style-type:square;margin-left:20px;">
<li>vous continuerez à payer un routage d&#8217;email inutile</li>
<li>vos taux d&#8217;ouverture et de clicks vont devenir ridicules, ce qui est idéal pour faire chuter le cpm de votre newsletter si elle est sponsorisée</li>
<li>les filtres anti-spam vont vous regarder de travers</li>
<li>ergo une proportion de plus en plus grande de vos abonnés ne recevront plus votre newsletter, et ceux qui s&#8217;en inquiètent et vont dans leur boite &#8220;spam&#8221; pour vous valider en source de confiance ne sont pas légion donc c&#8217;est la descente aux enfers assurée pour votre canal de fidélisation par email,</li>
<li>dans les soirées, tout le monde parlera de vous en termes grossiers et votre marque en pâtira. Plus personne n&#8217;ira sur votre site, vous serez socialement ruiné, grillé dans le milieu internet, et finirez par devoir prendre un boulot normal dans la vraie vie .Finit le champagne, les jacuzzis et les petits fours des soirées Web!</li>
</ul>
<p>Trop de sites pensent qu&#8217;en rendant le désabonnement complexe ils vont garder des abonnés. Imaginez que le vigile d&#8217;un magasin vous demande de sauter à cloche-pied en faisant trois tours sur vous-même pour vous laisser sortir. Ce n&#8217;est pas ça qui vous poussera à acheter un autre produit ou à revenir plus tard.</p>
<p>Est-il nécessaire de rappeler que <strong>proposer le désabonnement est légalement obligatoire</strong> ? Ha oui c&#8217;est nécessaire, je reçois plein d&#8217;emails qui ne le proposent pas (je ne parle pas des spams mais de vraies newsletters de magasins ayant pignon sur rue).</p>
<h4>Abonné utile</h4>
<p>Utile pour l&#8217;éditeur qui dispose d&#8217;une frappe marketing pour des actions comme &#8220;participez à notre enquête de satisfaction&#8221;, &#8220;scoop: un chien mord un facteur&#8221;, la base email doit également l&#8217;être pour l&#8217;abonné(e) : &#8220;Jeu concours réservé aux abonné(e)s: gagnez un weekend à Nevers&#8221;, &#8220;votre code d&#8217;invitation pour un nouveau service de musique illimitée&#8221;&#8230;</p>
<h4>Abonné absent</h4>
<p>Votre système de routage doit être en mesure de virer de la base les emails renvoyant une erreur. Pour les mêmes raisons qu&#8217;il faut laisser les gens se désabonner quand ils le veulent. En insistant sur des emails invalides, les serveurs de mail finiront par vous blacklister.<br />
Et puis vous encombrez la bande passante et vous ralentissez tout le monde, vous consommez de la charge serveur donc de l&#8217;électricité, donc contribuez au réchauffement climatique pour rien. Pollueur!</p>
<h4>Abonné nouveau</h4>
<p>Pour avoir plus d&#8217;abonnés, c&#8217;est facile.<br />
Le plus près possible de votre contenu, un petit champs texte &#8220;abonnez-vous à la newsletter&#8221; avec un bouton &#8220;ok&#8221; et hop! on le renvoit vers la page de création de compte. Il serait tentant de l&#8217;inscrire directement avec seulement l&#8217;email mais vous risquez de trouver dans votre base un paquet de victimes de farces qui vous marqueront spammeur sans chercher à comprendre pourquoi ils reçoivent vos messages.<br />
D&#8217;expérience, et de manière pas surprenante du tout: plus le bloc d&#8217;abonnement est visible, plus le process est rapide, plus il y a d&#8217;abonnés. Ce qui est moins évident: c&#8217;est qu&#8217;on peut passer du simple au quadruple selon comment il s&#8217;insère dans la page.</p>
<p>En tête de page aussi. N&#8217;oubliez pas de mettre un lien.</p>
<p>Coté graphique, une enveloppe c&#8217;est parlant, en voici quelques unes, toujours de <a href="http://icones.pro">icones.pro</a>:</p>
<p><a href="http://icones.pro/lettre-courrier-ouvert-recevoir-envoyer-image-png.html"><img src="http://www.webving.fr/blog/wp-content/uploads/2010/06/lettre-courrier-ouvert-recevoir-envoyer-icone-7756-48.png" alt="" title="lettre-courrier-ouvert-recevoir-envoyer-icone-7756-48" width="48" height="48" class="alignleft size-full wp-image-101" /></a><a href="http://icones.pro/lettre-4-image-png.html"><img src="http://www.webving.fr/blog/wp-content/uploads/2010/06/lettre-icone-9422-48.png" alt="" title="lettre-icone-9422-48" width="48" height="48" class="alignleft size-full wp-image-102" /></a><a href="http://icones.pro/lettre-message-image-png.html"><img src="http://www.webving.fr/blog/wp-content/uploads/2010/06/lettre-message-icone-4695-48.png" alt="" title="lettre-message-icone-4695-48" width="48" height="48" class="alignleft size-full wp-image-104" /></a><a href="http://icones.pro/enveloppe-courrier-4-image-png.html"><img src="http://www.webving.fr/blog/wp-content/uploads/2010/06/enveloppe-courrier-icone-6716-481.png" alt="" title="enveloppe-courrier-icone-6716-48" width="48" height="48" class="alignleft size-full wp-image-117" /></a><br />
(je suis obligé de mettre des pictos pour un peu aérer cet article, je n&#8217;ai vraiment pas le choix)</p>
<h4>Prestataires</h4>
<p>En cas de besoin de prestataire d&#8217;emailing pour vos newsletters, voici deux liens:<br />
<a href="http://forum.webrankinfo.com/quel-est-votre-meilleur-prestataire-emailing-web-t76350.html">http://forum.webrankinfo.com/quel-est-votre-meilleur-prestataire-emailing-web-t76350.html</a><br />
<a href="http://prestataires.journaldunet.com/competence/23/1/marketing_direct_emailing.shtml">http://prestataires.journaldunet.com/competence/23/1/marketing_direct_emailing.shtml</a><br />
Si ce n&#8217;est pas de première fraicheur, faites un up dans le forum webrankinfo plutôt que de créer un nouveau topic.</p>
<p>Il y a aussi des solutions plus simples et moins coûteuses à mettre en place, par exemple <a href="http://www.google.com/friendconnect">Google Friend Connect</a> propose de bons services de gestion de newsletter si passer par Google pour gérer vos abonnés ne vous pose pas de problème. Enfin, si vous utilisez Feedburner, il propose également un système très simple de gestion de votre newsletter.
</div>
<h3>Petit mot de fin de billet</h3>
<p>Ce billet est un gros fourre-tout pas vraiment relu et pas très bien organisé, mais j&#8217;espère qu&#8217;il aidera certains webmasters tout fraichou à avoir une idée plus claire de quelques outils utiles pour garder les utilisateurs à jour de leur publications.</p>
<img src="http://feeds.feedburner.com/~r/LeBlogDeWebving/~4/yz5E_F2zsjo" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://www.webving.fr/blog/lfidelisation-web-bases-rss-newsletter-social-bookmarking/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		<feedburner:origLink>http://www.webving.fr/blog/lfidelisation-web-bases-rss-newsletter-social-bookmarking/</feedburner:origLink></item>
		<item>
		<title>Tutoriel: premiers pas 3D avec x3dom</title>
		<link>http://feedproxy.google.com/~r/LeBlogDeWebving/~3/Fo1cXoMsCVA/</link>
		<comments>http://www.webving.fr/blog/tutoriel-3d-x3dom-javascript-x3d/#comments</comments>
		<pubDate>Wed, 03 Mar 2010 13:01:30 +0000</pubDate>
		<dc:creator>Webving</dc:creator>
				<category><![CDATA[Tutoriel]]></category>

		<guid isPermaLink="false">http://www.webving.fr/blog/?p=3</guid>
		<description><![CDATA[Nous allons voir comment s'amuser avec un peu de 3D dans le navigateur, pour rêver aux futures applications HTML5. Tout ceci n'est bien sûr qu'en alpha et certaines choses peuvent encore changer. Pour commencer, il vous faut un navigateur intégrant WebGL, ce qui n'est le cas que des navigateurs en développement (Minefield, le Firefox en production, ou Chrome DevChannel).]]></description>
			<content:encoded><![CDATA[<p><strong>Première chose : le navigateur</strong></p>
<p>Je fais mes tests avec Chrome DevChannel sous Windows.</p>
<p>Il se télécharge ici: <a href="http://www.google.com/chrome/eula.html?extra=devchannel">http://www.google.com/chrome/eula.html?extra=devchannel</a></p>
<p>Après l&#8217;avoir installé, il faut éditer l&#8217;icône de lancement : faites un clic-droit sur l&#8217;icône Chrome dans votre menu Démarrer et éditez les Propriétés en ajoutant &#8220;&#8211;enable-webgl &#8211;no-sandbox&#8221; à la fin de la partie &#8220;Cible&#8221; (après &#8220;chrome.exe&#8221;).</p>
<p>Puis (re)démarrez Chrome.</p>
<p>Pour les autres OS/navigateurs, voir sur la pge de X3dom dédiée: <a href="http://www.x3dom.org/?page_id=9">http://www.x3dom.org/?page_id=9</a>.</p>
<p>Pour les malheureux utilisateurs de Mac (en ce moment je suis un peu remonté contre Apple) sachez qu&#8217;il faut du Mac OS X 10.5 ou + sinon vous l&#8217;avez dans l&#8217;os.</p>
<p><strong>Ensuite, le fichier js</strong></p>
<p>Créez un répertoire pour vos tests (par exemple &#8220;\testx3dom&#8221;).</p>
<p>Le fichier js est ici: <a href="http://x3dom.org/x3dom/example/x3dom.js">http://x3dom.org/x3dom/example/x3dom.js</a></p>
<p>Enregistrez-le dans votre répertoire de test, ne pointez pas directement dessus dans vos fichiers sources, c&#8217;est impoli.</p>
<p>Et puis créez le fichier html.</p>
<p>Avec votre éditeur html préféré, créez un fichier &#8220;hello3d.html&#8221; dont la source sera:</p>
<div class="code">
<div>&lt;html&gt;</div>
<div>&lt;head&gt;</div>
<div>&lt;script type=&#8221;text/javascript&#8221; src=&#8221;x3dom.js&#8221;&gt;&lt;/script&gt;</div>
<div>&lt;/head&gt;</div>
<div>&lt;body&gt;</div>
<div>&lt;/body&gt;</div>
<div>&lt;/html&gt;</div>
</div>
<p>C&#8217;est la base.</p>
<div>
<p><strong>Créez la fenêtre x3d</strong></p>
<p>A l&#8217;intérieur du body, il faut déclarer la fenêtre x3d:</p>
<div>
<div class="code">
<div>&lt;x3d&gt;</div>
<div>&lt;scene&gt;</div>
<div>&lt;/scene&gt;</div>
<div>&lt;/x3d&gt;</div>
</div>
</div>
<p>En rechargeant la page, vous devriez avoir un rectangle noir qui est la fenêtre x3d. Si vous ne le voyez pas, c&#8217;est probablement un soucis entre le navigateur et WebGL (J&#8217;insiste, tout ceci est testé sur Windows + ChromeDevChannel).</p>
</div>
<p>Cette déclaration, même si elle fait bien apparaître quelque chose, est loin d&#8217;être parfaite et la balise x3d contient normalement plusieurs attributs dont l&#8217;utilité est dans le nom. Voici la balise un peu plus correctement déclarée:</p>
<div>
<div class="code">&lt;x3d xmlns=&#8221;http://www.web3d.org/specifications/x3d-namespace&#8221; showStat=&#8221;false&#8221; showLog=&#8221;false&#8221; width=&#8221;1000px&#8221; height=&#8221;700px&#8221; altImg=&#8221;"&gt;</div>
</div>
<div>
<ul>
<li>altimg défini une image par défaut si le navigateur n&#8217;utilise pas WebGL,</li>
<li>showStat et showLog, s&#8217;ils sont à &#8220;true&#8221; font apparaître quelques infos d&#8217;aide au codage,</li>
<li>width et height définisse largeur et hauteur de la fenêtre x3d.</li>
</ul>
</div>
<p>C&#8217;est à l&#8217;intérieur de &lt;scene&gt;&lt;/scene&gt; qu&#8217;on va commencer à créer nos premiers machins 3D.</p>
<p><strong>Le premier machin 3D</strong></p>
<p>Un cube. La forme de base qui permet de voir tout de suite si ça marche.</p>
<div class="code">
<div>&lt;shape&gt;</div>
<div>&lt;box&gt;&lt;/box&gt;</div>
<div>&lt;/shape&gt;</div>
</div>
<p>Tout simplement.</p>
<p>En rechargeant la page, vous devriez voir un carré au milieu et en cliquant dans la scène, vous pouvez le faire tourner.</p>
<p>Le code complet de la page doit maintenant ressembler à ceci:</p>
<div class="code">
<div>&lt;html&gt;</div>
<div>&lt;head&gt;</div>
<div>&lt;script type=&#8221;text/javascript&#8221; src=&#8221;x3dom.js&#8221;&gt;&lt;/script&gt;</div>
<div>&lt;/head&gt;</div>
<div>&lt;body&gt;</div>
<div>&lt;x3d xmlns=&#8221;http://www.web3d.org/specifications/x3d-namespace&#8221; showStat=&#8221;false&#8221; showLog=&#8221;false&#8221; width=&#8221;800px&#8221; height=&#8221;400px&#8221; altImg=&#8221;"&gt;</div>
<div>&lt;scene&gt;</div>
<div>&lt;shape&gt;</div>
<div>&lt;box&gt;&lt;/box&gt;</div>
<div>&lt;/shape&gt;</div>
<div>&lt;/scene&gt;</div>
<div>&lt;/x3d&gt;</div>
<div>&lt;/body&gt;</div>
<div>&lt;/html&gt;</div>
</div>
<p>Amusant mais un peu pauvre, on ne va pas passer des heures à faire tourner des cubes dans le vide.</p>
<p><img src="http://www.webving.fr/blog/wp-content/uploads/2010/03/x3d-simple-box1.jpg" alt="" title="x3d-simple-box" width="417" height="214" class="aligncenter size-full wp-image-15" /></p>
<p><strong>Un mot sur la navigation </strong></p>
<ul>
<li>Clic-gauche en laissant appuyé permet de faire tourner la scène.</li>
<li>Clic-droit en laissant appuyé permet d&#8217;avancer ou reculer la caméra.</li>
<li>La touche &#8220;a&#8221; permet de positionner la caméra sur un plan d&#8217;ensemble assez large englobant tous les objets de la scène. Très utile si vous ne savez plus où vous êtes.</li>
</ul>
<p><strong>Les formes de base</strong></p>
<p>Remplacez &lt;box&gt;&lt;/box&gt; par &lt;sphere&gt;&lt;/sphere&gt; et un globe apparaîtra à la place du cube.</p>
<p>Les formes de base:</p>
<ul>
<li>box</li>
<li>sphere</li>
<li>cylinder</li>
<li>cone</li>
<li>torus</li>
</ul>
<p>Toutes ces formes ont des attributs permettant d&#8217;ajuster la taille et l&#8217;affichage des faces. Par exemple :</p>
<p>&lt;box size=&#8221;2 .5 1&#8243;&gt;&lt;/box&gt;</p>
<p>Il y a deux nouvelles notions dans cette balise:</p>
<ul>
<li>les données x y z : dans notre environnement 3D, tout est référencé par ces coordonnées. Ici, ces données sont un attribut unique de la balise &lt;box&gt; et sont donc entre guillemets. Elles représentent largeur, hauteur et profondeur. Elles sont séparées par un espace.</li>
<li>&#8220;.5&#8243; est comme &#8220;0.5&#8243; inutile d&#8217;écrire le zéro.</li>
</ul>
<p>Pour le cylindre, on doit attribuer d&#8217;autres données:</p>
<p>&lt;cylinder radius=&#8221;2&#8243; height=&#8221;.5&#8243;&gt;&lt;/cylinder&gt;</p>
<p>Voici une page avec les références complètes de tous les attributs de toutes les formes:</p>
<p><a href="http://www.web3d.org/x3d/content/X3dTooltips.html#Cylinder">http://www.web3d.org/x3d/content/X3dTooltips.html</a></p>
<p>Notez bien que x3dom est en cours de développement et que beaucoup de choses n&#8217;ont pas encore été implémentées ! Par exemple si vous mettez :</p>
<p>&lt;cylinder top=&#8221;false&#8221;&gt;&lt;/cylinder&gt;</p>
<p>Le haut du cylindre devrait disparaître (utile pour économiser de la ressource de calcul si cette face ne doit jamais apparaître), mais à ce jour cela ne fonctionne pas encore.</p>
<p><strong>Un peu de couleur</strong></p>
<p>Le gris par défaut est un peu tristoune, changeons donc la couleur de notre cylindre.</p>
<p>Modifiez le code:</p>
<div class="code">&lt;shape&gt;<br />
&lt;cylinder radius=&#8221;2&#8243; height=&#8221;.5&#8243;&gt;&lt;/cylinder&gt;</p>
<p>&lt;/shape&gt;</p>
</div>
<p>Par:</p>
<div class="code">&lt;shape&gt;</p>
<p>&lt;appearance&gt;</p>
<p>&lt;material diffusecolor=&#8221;.9 .1 .1&#8243;&gt;&lt;/material&gt;</p>
<p>&lt;/appearance&gt;</p>
<p>&lt;cylinder radius=&#8221;2&#8243; height=&#8221;.5&#8243;&gt;&lt;/cylinder&gt;</p>
<p>&lt;/shape&gt;</p>
</div>
<p>Vous devriez après rechargement voir apparaître votre cylindre en rouge. L&#8217;attribut &#8220;diffusecolor&#8221; définit les couleurs rouge-vert-bleu, avec des valeurs comprises entre 0 et 1, et séparées par un espace.</p>
<p><img src="http://www.webving.fr/blog/wp-content/uploads/2010/03/x3d-red-cylinder1.jpg" alt="" title="x3d-red-cylinder" width="408" height="205" class="aligncenter size-full wp-image-14" /></p>
<p>Cet attribut appartient à l&#8217;élément &#8220;material&#8221; qui lui-même appartient à l&#8217;élément &#8220;appearance&#8221;. &#8220;appearance&#8221; peut également contenir un élément essentiel au look de vos objets: la texture. Collons donc une photo sur un cube (ça sera plus joli que sur un cylindre).</p>
<div class="code">&lt;shape&gt;</p>
<p>&lt;appearance&gt;</p>
<p>&lt;material diffusecolor=&#8221;.9 .1 .1&#8243;&gt;&lt;/material&gt;</p>
<p>&lt;imagetexture url=&#8221;http://lh6.ggpht.com/_opMtHwffI3M/Svf9kd91XCI/AAAAAAAAACc/SJs90lWQxtI/DSC_0084.JPG&#8221;&gt;&lt;/imagetexture&gt;</p>
<p>&lt;/appearance&gt;</p>
<p>&lt;box&gt;&lt;/box&gt;</p>
<p>&lt;/shape&gt;</p>
</div>
<p>Un sympathique phoque australien recouvre maintenant les six faces de notre cube. Pour bien faire, une image carrée eu été plus adaptée.</p>
<p><strong>Positionner dans l&#8217;espace</strong></p>
<p>Pour l&#8217;instant, nous nous sommes contenté d&#8217;un seul objet à l&#8217;écran. Il est temps de faire les choses en un peu plus grand.</p>
<p>Notre élément &#8220;shape&#8221; est pour l&#8217;instant directement attaché à la racine de la scène. Nous allons créer un élément intermédiaire qui nous permettra de le positionner dans l&#8217;espace à l&#8217;endroit de notre choix. C&#8217;est l&#8217;élément &#8220;transform&#8221; qui se charge de cela.</p>
<p>&#8220;transform&#8221; doit contenir &#8220;shape&#8221; comme ceci:</p>
<div class="code">&lt;transform&gt;</p>
<p>&lt;shape&gt;</p>
<p>&#8230;</p>
<p>&lt;/shape&gt;</p>
<p>&lt;/transform&gt;</p>
</div>
<p>&#8220;transform&#8221; a plusieurs attributs permettant de modifier (entre autres) la position et l&#8217;orientation de ce qu&#8217;il contient.</p>
<p>L&#8217;attribut de position s&#8217;appelle &#8220;translation&#8221; avec toujours les coordonnées x, y et z entre guillemets, séparées par un espace. Déplaçons notre cube un peu à gauche:</p>
<div class="code">&lt;scene&gt;</p>
<p>&lt;transform translation=&#8221;-2 0 0&#8243;&gt;</p>
<p>&lt;shape&gt;</p>
<p>&lt;appearance&gt;</p>
<p>&lt;imagetexture url=&#8221;http://lh6.ggpht.com/_opMtHwffI3M/Svf9kd91XCI/AAAAAAAAACc/SJs90lWQxtI/DSC_0084.JPG&#8221;&gt;&lt;/imagetexture&gt;</p>
<p>&lt;/appearance&gt;</p>
<p>&lt;box&gt;&lt;/box&gt;</p>
<p>&lt;/shape&gt;</p>
<p>&lt;/transform&gt;</p>
<p>&lt;/scene&gt;</p>
</div>
<p>En rechargeant la page, le cube apparaît plus à gauche que précédemment. Nous allons pouvoir créer plusieurs objets et les placer à divers endroits. Nous sommes débutants et donc un copier-coller avec changement de quelques paramètres suffira bien pour l&#8217;instant (plus tard il sera possible de concaténer ce bazar pour un code plus maigre).</p>
<div class="code">&lt;scene&gt;</p>
<p>&lt;transform translation=&#8221;-2 0 0&#8243;&gt;</p>
<p>&lt;shape&gt;</p>
<p>&lt;appearance&gt;</p>
<p>&lt;imagetexture url=&#8221;http://lh6.ggpht.com/_opMtHwffI3M/Svf9kd91XCI/AAAAAAAAACc/SJs90lWQxtI/DSC_0084.JPG&#8221;&gt;&lt;/imagetexture&gt;</p>
<p>&lt;/appearance&gt;</p>
<p>&lt;box&gt;&lt;/box&gt;</p>
<p>&lt;/shape&gt;</p>
<p>&lt;/transform&gt;</p>
<p>&lt;transform translation=&#8221;2 0 0&#8243;&gt;</p>
<p>&lt;shape&gt;</p>
<p>&lt;appearance&gt;</p>
<p>&lt;imagetexture url=&#8221;http://lh5.ggpht.com/_opMtHwffI3M/Svf9ki1v1OI/AAAAAAAAACo/AzM_Fq3rlFE/s144/DSC_0231.JPG&#8221;&gt;&lt;/imagetexture&gt;</p>
<p>&lt;/appearance&gt;</p>
<p>&lt;box&gt;&lt;/box&gt;</p>
<p>&lt;/shape&gt;</p>
<p>&lt;/transform&gt;</p>
<p>&lt;/scene&gt;</p>
</div>
<p>Voilà deux cubes côte-à-côte ayant des textures différentes.</p>
<p><strong><br />
Arbres d&#8217;éléments<br />
</strong></p>
<p>L&#8217;élément &#8220;transform&#8221; peut contenir d&#8217;autres éléments &#8220;transform&#8221; ce qui est très pratique pour manipuler plusieurs objets à la fois. Appliquons une rotation au cube de droite, pour l&#8217;orienter différemment de son voisin. L&#8217;attribut &#8220;orientation&#8221; de &#8220;transform&#8221; sert à ça:</p>
<p>&lt;transform orientation=&#8221;0 1 0 -1&#8243;&gt;</p>
<p>&#8230;</p>
<p>&lt;/transform&gt;</p>
<p>Cet attribut contient 4 données : les 3 axes, et une valeur d&#8217;angle. Le &#8220;0 1 0&#8243; signifie que la rotation va se faire autour de l&#8217;axe &#8220;y&#8221;. La valeur de l&#8217;angle est en radians, donc pour un demi-tour ça serait 3.14 (environ pi).</p>
<p>Imbriquons notre deuxième cube dans ce nouvel élément transform, lui-même dans le &#8220;transform&#8221; qui définissait sa position.</p>
<div class="code">&lt;scene&gt;</p>
<p>&lt;transform translation=&#8221;-2 0 0&#8243;&gt;</p>
<p>&lt;shape&gt;</p>
<p>&lt;appearance&gt;</p>
<p>&lt;imagetexture url=&#8221;http://lh6.ggpht.com/_opMtHwffI3M/Svf9kd91XCI/AAAAAAAAACc/SJs90lWQxtI/DSC_0084.JPG&#8221;&gt;&lt;/imagetexture&gt;</p>
<p>&lt;/appearance&gt;</p>
<p>&lt;box&gt;&lt;/box&gt;</p>
<p>&lt;/shape&gt;</p>
<p>&lt;/transform&gt;</p>
<p>&lt;transform translation=&#8221;2 0 0&#8243;&gt;</p>
<p>&lt;transform rotation=&#8221;0 1 0 -1&#8243;&gt;</p>
<p>&lt;shape&gt;</p>
<p>&lt;appearance&gt;</p>
<p>&lt;imagetexture url=&#8221;http://lh5.ggpht.com/_opMtHwffI3M/Svf9ki1v1OI/AAAAAAAAACo/AzM_Fq3rlFE/s144/DSC_0231.JPG&#8221;&gt;&lt;/imagetexture&gt;</p>
<p>&lt;/appearance&gt;</p>
<p>&lt;box&gt;&lt;/box&gt;</p>
<p>&lt;/shape&gt;</p>
<p>&lt;/transform&gt;</p>
<p>&lt;/transform&gt;</p>
<p>&lt;/scene&gt;</p>
</div>
<p>Et voilà.</p>
<p><img src="http://www.webving.fr/blog/wp-content/uploads/2010/03/x3d-textured-transformed-cubes1.jpg" alt="" title="x3d-textured-transformed-cubes" width="404" height="203" class="aligncenter size-full wp-image-16" /></p>
<p>Nous savons comment créer des formes, leur appliquer des textures, les positionner et les orienter dans l&#8217;espace. Il est possible de définir les valeurs de plusieurs attributs dans &#8220;transform&#8221; mais je le déconseille car les résultats sont un peu périlleux&#8230;</p>
<div><strong>Et maintenant, un peu de javascript</strong></div>
<div>Jusqu&#8217;ici, rien de fondamentalement nouveau pour ceux qui avaient l&#8217;habitude de x3d avec un plugin à l&#8217;ancienne.</div>
<div>La grande nouveauté avec x3dom est la facilité de brancher des commandes javascript là dessus.</div>
<div>Reprenons notre cube de base pour la simplicité du code et ajoutons une petite touche d&#8217;interactivité avec un petit onClick-alert&#8230;</div>
<div class="code">
<div>
<div>&lt;shape&gt;</div>
<div>&lt;box onClick=&#8217;alert(&#8220;touché !&#8221;);&#8217;&gt;&lt;/box&gt;</div>
<div>&lt;/shape&gt;</div>
</div>
</div>
<div>Voici votre cube devenu interactif avec votre document !</div>
<div>Pas très utile en soi mais c&#8217;est une étape pour la suite&#8230;</div>
<div>Il est possible de donner un Id aux objets x3d. Ces objets deviennent ainsi des enfants de l&#8217;objet &#8220;document&#8221; et donc accessibles par javascript.</div>
<div>Créons une fonction qui change la couleur de notre cube. Dans le header de votre fichier html, il faut rajouter:</div>
<div class="code">
<div>
<div>&lt;script type=&#8221;text/javascript&#8221;&gt;</div>
<div>function turnToGreen(materialId) {</div>
<div>var m = document.getElementById(materialId) ;</div>
<div>m.setAttribute(&#8220;diffuseColor&#8221;,&#8221;0 1 0&#8243;);</div>
<div>}</div>
<div>&lt;/script&gt;</div>
</div>
</div>
<div>La fonction récupère un id en paramètre. Cet Id doit être celui d&#8217;un élément &#8220;material&#8221; défini dans la scene x3d. Il faut donc un peu modifier notre cube comme ceci:</div>
<div class="code">
<div>
<div>&lt;shape&gt;</div>
<div>&lt;appearance&gt;</div>
<div>&lt;material id=&#8221;myColor&#8221; diffusecolor=&#8221;1 0 0&#8243;&gt;&lt;/material&gt;</div>
<div>&lt;/appearance&gt;</div>
<div>&lt;box onClick=&#8217;turnToGreen(&#8220;myColor&#8221;);&#8217;&gt;&lt;/box&gt;</div>
<div>&lt;/shape&gt;</div>
</div>
</div>
<div>Pour que l&#8217;action onClick appelle la fonction javascript &#8220;turnToGreen&#8221; avec l&#8217;identifiant de l&#8217;élément material de notre cube.</div>
<div>Notez que dans la fonction setAttribute, l&#8217;attribut est &#8220;diffuseColor&#8221; avec un C majuscule. A l&#8217;avenir x3dom devrait comprendre le tout minuscule (pour linstant les specs HTML5 et xHTML se téléscopent un peu sur ce projet).</div>
<div>Vous connaissez désormais les bases pour utiliser x3d et javascript grâce à x3dom. Pour la création à la volée d&#8217;objets x3d, il faudra utiliser document.createElement(&#8220;shape&#8221;) par exemple.</div>
<div>Pour aller plus loin:</div>
<div>
<ul>
<li>les specs et les tutoriaux x3d par le web3D consortium <a href="http://www.web3d.org/x3d/">http://www.web3d.org/x3d/</a></li>
<li>les exemples proposés par l&#8217;équipe x3dom : <a href="http://www.x3dom.org/?page_id=5">http://www.x3dom.org/?page_id=5</a></li>
</ul>
</div>
<div>Si vous avez lu jusque là, bravo pour votre ténacité ! Vous êtes un sacré passionné <img src='http://www.webving.fr/blog/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> </div>
<img src="http://feeds.feedburner.com/~r/LeBlogDeWebving/~4/Fo1cXoMsCVA" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://www.webving.fr/blog/tutoriel-3d-x3dom-javascript-x3d/feed/</wfw:commentRss>
		<slash:comments>5</slash:comments>
		<feedburner:origLink>http://www.webving.fr/blog/tutoriel-3d-x3dom-javascript-x3d/</feedburner:origLink></item>
		<item>
		<title>3D dans le navigateur Web, où en est-on ?</title>
		<link>http://feedproxy.google.com/~r/LeBlogDeWebving/~3/CVfzjKoORcw/</link>
		<comments>http://www.webving.fr/blog/3d-dans-le-navigateur-web-ou-en-est-on/#comments</comments>
		<pubDate>Tue, 23 Feb 2010 14:12:21 +0000</pubDate>
		<dc:creator>Webving</dc:creator>
				<category><![CDATA[Technologie]]></category>

		<guid isPermaLink="false">http://www.webving.fr/blog/?p=10</guid>
		<description><![CDATA[Depuis que j'ai découvert le vrml en 1999 (c'était à la University of Wolverhampton, en année Erasmus dans le cadre d'un module sur les méthodes graphiques et de visualisation dont il reste une page un peu perdue), j'ai toujours gardé un petit oeil sur les technologies de 3D embarquées dans le navigateur. Beaucoup de déceptions en 10 ans, mais quelques nouveautés prévues avec HTML5 pourraient relancer la machine.]]></description>
			<content:encoded><![CDATA[<div>
<p>update 3 mars 2010: j&#8217;ai fait <a hreflang="fr" href="http://90plan.ovh.net/post/tutoriel-3d-x3dom-javascript-x3d">un petit tutoriel ici</a></p>
<p>Attention, cet article contient peut-être quelques erreurs d&#8217;historique ou d&#8217;interprétation, je ne suis pas un super-spécialiste de la 3D, seulement un fan.</p>
<p>Ca faisait 10 que j&#8217;attendais une techno alliant la simplicité de déclaration du vrml, la standardisation d&#8217;un plugin ouvert, utilisant les ressources de l&#8217;objet javascript DOM, permettant des applications Ajax. Oulala que de jargon.</p>
<p><strong>Petit historique approximatif</strong></p>
<p>Le <a hreflang="en" href="http://www.web3d.org/">Web3D consortium</a>, une branche du W3C, avait posé au début des années 2000 les bases du successeur du vrml : <a href="http://www.web3d.org/about/overview/">X3D</a>. C&#8217;est la version XMLisée du vrml. Mais un problème subsistait: si le langage existait, les navigateurs ne l&#8217;avaient pas encore apprit, et il était nécessaire pour X3D comme pour vrml d&#8217;installer un plugin. Les <a href="http://www.web3d.org/x3d/content/examples/X3dResources.html#Applications">éditeurs de plugin X3D ou vrml</a> ne développant pas gratuitement, et les solutions open source n&#8217;étant pas parfaites ni multi-support, X3D est resté un truc de <a href="http://www.web3d-fr.com/">passionnés</a> ou de professionnels pendant quelques années sans vraiment décoller dans l&#8217;intérêt général des développeurs, qui attendaient probablement que tout le monde se mette d&#8217;accord, ou qu&#8217;un acteur majeur prenne le lead pour s&#8217;y mettre. Et la plupart des plugins n&#8217;acceptait qu&#8217;un ECMAscript interne complètement détaché de la page HTML dans laquelle l&#8217;objet s&#8217;affichait. Interactivité très limitée à une période où Ajax révolutionnait l&#8217;approche du développement Web.</p>
<p>Il y a eu un essai prometteur mais éphémère qui s&#8217;appelait Ajax3D (lien mort aujourd&#8217;hui&#8230;), basé sur les capacités du plugin de <a href="http://www.vivaty.com/">Vivaty</a> à communiquer avec le DOM object, donc avec le serveur pour manipuler les objets 3D depuis une base de données. Puis Vivaty, probablement en besoin de financement, a lancé son service un peu dérivé de Second Life dans la même vague que celle qui avait vu naître feu Google Lively et son plugin a été délaissé.</p>
<p>C&#8217;était à désespérer. Je n&#8217;en mangeais plus, mes amis se moquait de moi, on me montrait du doigt quand je marchais dans la rue et j&#8217;entendais les quolibets &#8220;regarde, c&#8217;est le type qui croit encore à la 3D dans le navigateur pouvant communiquer avec un serveur distant&#8221; &#8220;holala le has-been, il est grave trop web 1.0 ce guguss, je parie qu&#8217;il dépose des noms de domaines avec &#8216;oo&#8217; dedans&#8221;&#8230;</p>
<p>Je me suis caché en attendant et quand Google a lancé <a href="http://code.google.com/intl/fr-FR/apis/o3d/">O3D</a> j&#8217;ai voulu y croire. Le premier jour. Après j&#8217;ai commencé à lire les tutoriels et j&#8217;ai laissé tomber. Le deuxième jour. Encore un plugin, et surtout du code à décorner les boeufs. Rien de la magnificente simplicité d&#8217;apprentissage du X3D. Une grosse bibliothèque incompréhensible demandant un mois de formation et de solides connaissance en mathématique et en C pour dessiner un pauvre triangle.</p>
<p>Dernièrement j&#8217;ai même vu passer un <a href="http://www.bulletins-electroniques.com/actualites/62319.htm">truc bizarre</a> dans une des bulletins électroniques à propos d&#8217;un xml3D, une annonce probablement issue d&#8217;un ventilateur car je n&#8217;ai trouvé aucune doc technique.</p>
<p><strong>Et WebGL arriva&#8230;</strong></p>
<p><a href="http://fr.wikipedia.org/wiki/WebGL">WebGL</a>. Ca vous fait penser à <a href="http://fr.wikipedia.org/wiki/OpenGL">OpenGL </a>? Normal. C&#8217;est le chainon manquant entre la célèbre spécification couramment utilisée dans le développement de jeux vidéos et le navigateur.</p>
<p>Mais.</p>
<p>C&#8217;est encore un truc compliqué, en javascript certes, mais pas X3D compliant. Et puis il faut encore installer un plugin encore non-standard dans les navigateurs.</p>
<p>Flute alors.</p>
<p>Sauf que.</p>
<p><strong>Et X3Dom arriva&#8230;</strong></p>
<p><a href="http://www.x3dom.org/">X3Dom</a> est, en gros, un traducteur X3D-WebGL. C&#8217;est un gros fichier javascript qui interprète votre code X3D et appelle les fonctions webGL qui vont bien. C&#8217;est l&#8217;objet DOM qui reconnaît ses petits, même ceux 3D. Sans effort.</p>
<p>Certes c&#8217;est encore en même-pas-alpha, ça progresse au rythme de développeurs indépendants gratifiés de la seule reconnaissance de leurs fans, et il y manque des tas de <a href="http://www.web3d.org/x3d/content/X3dTooltips.html">fonctions des spécification X3D</a>. Mais que c&#8217;est prometteur !</p>
<p>On va enfin pouvoir jouer au Lego dans son navigateur.</p>
<p>Le gros plus de tout ça, c&#8217;est que WebGL devrait être intégré nativement dans tous les navigateurs à partir d&#8217;HTML5 et x3dom aussi puisque ça sera un simple fichier JS à appeler en header, ce qui lèvera le frein au développement qu&#8217;était la compatibilité des plugins (par ailleurs bien souvent propriétaires).</p>
<p>Youpi !</p>
<p>Prochain billet, un petit tutoriel pour commencer à s&#8217;amuser avec x3dom. Même votre chat saura bientôt faire de la 3D.</p>
</div>
<img src="http://feeds.feedburner.com/~r/LeBlogDeWebving/~4/CVfzjKoORcw" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://www.webving.fr/blog/3d-dans-le-navigateur-web-ou-en-est-on/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		<feedburner:origLink>http://www.webving.fr/blog/3d-dans-le-navigateur-web-ou-en-est-on/</feedburner:origLink></item>
		<item>
		<title>Incroyable Fusion Tables de Google</title>
		<link>http://feedproxy.google.com/~r/LeBlogDeWebving/~3/-01Rq7k4Wfg/</link>
		<comments>http://www.webving.fr/blog/incroyable-fusion-tables-de-google/#comments</comments>
		<pubDate>Tue, 15 Dec 2009 16:02:18 +0000</pubDate>
		<dc:creator>Webving</dc:creator>
				<category><![CDATA[Service]]></category>

		<guid isPermaLink="false">http://www.webving.fr/blog/?p=20</guid>
		<description><![CDATA[Le service de gestion de tables de données est tout simplement magnifique. Il intègre désormais une API et utilise les possibilités de Google Visualisation, le service de diagrammes de Google. Voici un exemple réalisé en moins de 5 minutes.]]></description>
			<content:encoded><![CDATA[<p><script src="http://www.gmodules.com/ig/ifr?url=http://www.google.com/ig/modules/geomap.xml&#038;up__table_query_url=http://tables.googlelabs.com/gvizdata?tq=select+gvizcountry(col0)%252Ccol5%252Ccol0+from+106533+where+col1+%253D+'Total'+skip+0+limit+208&#038;up__table_query_refresh_interval=0&#038;up_region=world&#038;up_dataMode=regions&#038;w=600&#038;h=400&#038;border=%23ffffff%7C3px%2C1px+solid+%23999999&#038;synd=open&#038;output=js"></script></p>
<p><a href="http://tables.googlelabs.com/Home" hreflang="en">Fusion Tables</a> permet d&#8217;importer de gros fichiers csv ou excel, du genre de taille que spreadsheet a encore du mal à gérer (je pronostique d&#8217;ailleurs un mix des deux outils dans les mois qui viennent).<br />
Ici il s&#8217;agit d&#8217;un fichier<a href="http://data.un.org/Data.aspx?q=population&amp;d=SOWC&amp;f=inID%3a105" hreflang="fr"> téléchargé directement du site des Nation Unies</a> dédié aux base de données statistiques mondiales.</p>
<p>L&#8217;ergonomie de Fusion Tables n&#8217;est pas des plus optimisées, mais la puissance du machin est hallucinante. En demandant une simple visualisation sur un IntensityMap, il a détécté tout seul la colonne avec les noms des pays, et la colonnes de données. J&#8217;ai ajouté un filtre pour prendre la population totale (le fichier initial comprenant plusieurs lignes par pays pour les tranches d&#8217;âge, ce qui faisait peiner la visualisation) et voilà.</p>
<p>On va encore dire que je fais le fan groupie de Google, mais bon sang que c&#8217;est beau&nbsp;!</p>
<p>Avec pas mal de boulot de merging de fichiers (leur système de merge n&#8217;est pas du tout optimisé, on ne peut choisir qu&#8217;une seule clé de regroupement) on peut s&#8217;amuser à reproduire <a href="/post/ted-videos-idees-inspiration-geopolitique-economie-demographie">les animations de Hans Rosling</a>:</p>
<p><script src="http://www.gmodules.com/ig/ifr?url=http://www.google.com/ig/modules/motionchart.xml&#038;up__table_query_url=http://tables.googlelabs.com/gvizdata?tq=select+col0%252Ccol1%252Ccol3%252Ccol5+from+107403++skip+0+limit+250&#038;up__table_query_refresh_interval=0&#038;w=600&#038;h=400&#038;border=%23ffffff%7C3px%2C1px+solid+%23999999&#038;synd=open&#038;output=js"></script></p>
<img src="http://feeds.feedburner.com/~r/LeBlogDeWebving/~4/-01Rq7k4Wfg" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://www.webving.fr/blog/incroyable-fusion-tables-de-google/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		<feedburner:origLink>http://www.webving.fr/blog/incroyable-fusion-tables-de-google/</feedburner:origLink></item>
		<item>
		<title>Sidewiki API: intégration des commentaires moins utiles et flux par domaine entier</title>
		<link>http://feedproxy.google.com/~r/LeBlogDeWebving/~3/jPDIKm7J7EE/</link>
		<comments>http://www.webving.fr/blog/sidewiki-api-integration-des-commentaires-moins-utiles-et-flux-par-domaine-entier/#comments</comments>
		<pubDate>Fri, 13 Nov 2009 16:07:54 +0000</pubDate>
		<dc:creator>Webving</dc:creator>
				<category><![CDATA[Service]]></category>

		<guid isPermaLink="false">http://www.webving.fr/blog/?p=22</guid>
		<description><![CDATA[Je ne sais pas s'ils l'ont fait juste pour moi, mais ce matin j'avais un mail venant du Google Group Sidewiki API m'informant de l'arrivée de ces deux nouvelles fonctionnalités. On va pouvoir commencer à vraiment s'amuser avec ce machin :)]]></description>
			<content:encoded><![CDATA[<p>&#8220;Allo Google ? Je voudrais commander un bouton qui fait tout s&#8217;il-vous-plaît.</p>
<p>_Pas<br />
de problème monsieur, c&#8217;est livré chez vous dans 24 heures !&#8221;</p>
<p>Dans le groupe de l&#8217;API sidewiki, j&#8217;ai demandé hier s&#8217;il serait possible que l&#8217;api puisse retourner le flux complet des entrées Sidewiki, et pas seulement celles que l&#8217;algo jugeait &#8220;utile&#8221;.</p>
<p>Et 24 heures plus tard <a hreflang="en" href="http://groups.google.com/group/google-sidewiki-api/browse_thread/thread/c6acdb7a238c2178">on me dit que c&#8217;est fait</a>. </p>
<p>Simple coïncidence car je suppose que les démarches qualités prennent plus de temps que ça, et que la fonctionnalité a passé quelques jours de béta-tests et autres validations de sécurité&#8230;</p>
<p>Hier, j&#8217;ai parlé des nouveautés Sidewiki trop tôt, je ne me doutais pas que ce matin on en aurait davantage. Voici donc ce qui est possible depuis cette nuit:</p>
<h3><strong>Obtenir toutes les entrées Sidewiki d&#8217;une url&nbsp;</strong></h3>
<p><a hreflang="en" href="http://code.google.com/intl/fr/apis/sidewiki/docs/2.0/reference_guide.html#Query_Params">http://code.google.com/intl/fr/apis/sidewiki/docs/2.0/reference_guide.html#Query_Params</a></p>
<p>A la fin de l&#8217;url de votre requête, ajoutez simplement &#8220;?includeLessUseful=true&#8221; et voilà l&#8217;intégralité des entrées dans votre flux. Je trouvais que c&#8217;était quand même bizarre de ne pas pouvoir le faire&#8230;</p>
<p>Voici par exemple le flux de mon premier tutoriel</p>
<p><a hreflang="fr" href="http://www.google.com/sidewiki/feeds/entries/webpage/http%3A%2F%2Fwww.webving.fr%2Fpost%2Ftutoriel-integrer-facilement-sidewiki-sur-votre-blog-avec-ajax-api-feed/default?includeLessUseful=true">http://www.google.com/sidewiki/feeds/entries/webpage/http%3A%2F%2Fwww.webving.fr%2Fpost%2Ftutoriel-integrer-facilement-sidewiki-sur-votre-blog-avec-ajax-api-feed/default?includeLessUseful=true</a></p>
<h3>Et la grosse nouveauté: toutes les entrées Sidewiki d&#8217;un domaine </h3>
<p>Chemin générique:</p>
<p>http://www.google.com/sidewiki/feeds/entries/domainpath/<em>domainPathEncoded</em>/<em>projection</em></p>
<p>Ce qui donne pour webving:</p>
<p><a hreflang="fr" href="http://www.google.com/sidewiki/feeds/entries/domainpath/www.webving.fr%2F/default?includeLessUseful=true">http://www.google.com/sidewiki/feeds/entries/domainpath/www.webving.fr%2F/default?includeLessUseful=true</a></p>
<p>Vous noterez que les &#8220;http://&#8221; encodé a disparu, si je le laisse ça ne marche pas et j&#8217;ai la flemme de chercher à comprendre pourquoi&#8230;</p>
<p>A noter également qu&#8217;il n&#8217;y a pas tout, même si je rajoute le paramètre &#8220;max-results=100&#8243;. Peut-être une limite de temps ?</p>
<p>Voici le billet officiel annonçant tout ça:</p>
<p><a hreflang="en" href="http://googleblog.blogspot.com/2009/11/google-sidewiki-first-50-days-of.html">http://googleblog.blogspot.com/2009/11/google-sidewiki-first-50-days-of.html</a></p>
<p>&nbsp;</p>
<p>En tous cas c&#8217;est cool de voir le service s&#8217;étoffer comme ça!</p>
<img src="http://feeds.feedburner.com/~r/LeBlogDeWebving/~4/jPDIKm7J7EE" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://www.webving.fr/blog/sidewiki-api-integration-des-commentaires-moins-utiles-et-flux-par-domaine-entier/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		<feedburner:origLink>http://www.webving.fr/blog/sidewiki-api-integration-des-commentaires-moins-utiles-et-flux-par-domaine-entier/</feedburner:origLink></item>
		<item>
		<title>Quelques nouveautés à propos de Sidewiki</title>
		<link>http://feedproxy.google.com/~r/LeBlogDeWebving/~3/E7WXj14lqfo/</link>
		<comments>http://www.webving.fr/blog/quelques-nouveautes-a-propos-de-sidewiki/#comments</comments>
		<pubDate>Thu, 12 Nov 2009 16:09:40 +0000</pubDate>
		<dc:creator>Webving</dc:creator>
				<category><![CDATA[Service]]></category>

		<guid isPermaLink="false">http://www.webving.fr/blog/?p=24</guid>
		<description><![CDATA[La documentation de l'API s'est bien étoffée et contient même des tutoriaux javascript pour intégrer facilement les entrées d'une page dans son contenu. Google me copie :) Egalement de nouvelles fonctionnalités de recherche.]]></description>
			<content:encoded><![CDATA[<p><strong>Du coté des problèmes de flux</strong></p>
<p>Vu dans le forum des développeurs Sidewiki: </p>
<p><a hreflang="en" href="http://groups.google.com/group/google-sidewiki-api/browse_thread/thread/40f25b2c6fc1f4fd">http://groups.google.com/group/google-sidewiki-api/browse_thread/thread/40f25b2c6fc1f4fd</a></p>
<p>Greg Hochmuth de l&#8217;équipe Sidewiki explique que les entrées visibles depuis les flux de l&#8217;API sont filtrées: seules les entrées notées utiles apparaissent.</p>
<blockquote><p>currently, it only returns entries above a certain quality threshold,<br />
<br /> so that set of entries may change over time</p>
</blockquote>
<p><strong>Du coté des nouveautés</strong></p>
<p>Dans la doc est apparue du code javascript à reprendre pour afficher les commentaires d&#8217;une page:</p>
<p><a hreflang="en" href="http://code.google.com/intl/fr/apis/sidewiki/docs/2.0/developers_guide_js.html#RetrievingWebpageEntries">http://code.google.com/intl/fr/apis/sidewiki/docs/2.0/developers_guide_js.html#RetrievingWebpageEntries</a></p>
<p>C&#8217;est peut-être un peu mieux que le code que je proposais dans mon précédent <a hreflang="fr" href="/post/tutoriel-integrer-facilement-sidewiki-sur-votre-blog-avec-ajax-api-feed">billet sur l&#8217;api sidewiki</a>.</p>
<p>Et on peut utiliser des paramètres de requêtes pour filtrer les flux. Lesquels ? Bin juste le nombre maximums d&#8217;entrées. Un peu faiblard, mais signe que l&#8217;équipe semble vouloir étoffer les possibilités de leur api.</p>
<p><strong>Du coté de l&#8217;adoption</strong></p>
<p>Je sais pas vous, mais moi parfois je me balade sur des profils Google croisés au hasard des sites utilisants Google Friend Connect. Et bien souvent les gens ont quelques entrées Sidewiki. Et bien souvent encore, la plus récente remonte à début octobre, un peu après le lancement. </p>
<p>Le succès de ce service serait-il faiblard ? </p>
<p>Je vois quelques raisons pouvant expliquer une certaine désertification dans la participation, passée les premiers tests:</p>
<ul>
<li>On voit son nom de profil Google apparaître, et souvent il s&#8217;agit du vrai nom et prénom. La grande majorité des gens préférant ne pas voir son nom affiché partout sur la toile, et peu de gens ayant l&#8217;envie de déconnecter/reconnecter sous un autre pseudo juste pour commenter, la barrière est haute. Si Google proposait un profil Sidewiki au lieu d&#8217;utiliser le profil générique, la participation serait plus grande (comme le risque de troll/spam),</li>
<li>Il faut absolument la barre d&#8217;outil Google dans le navigateur. Beaucoup de mes amis disent &#8220;beurk&#8221; et je les comprends,</li>
<li>C&#8217;est quand même un service de purs geeks&#8230;</li>
</ul>
<p>Je reste malgré tout ça assez fan du machin.</p>
<img src="http://feeds.feedburner.com/~r/LeBlogDeWebving/~4/E7WXj14lqfo" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://www.webving.fr/blog/quelques-nouveautes-a-propos-de-sidewiki/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		<feedburner:origLink>http://www.webving.fr/blog/quelques-nouveautes-a-propos-de-sidewiki/</feedburner:origLink></item>
		<item>
		<title>Tutoriel: tous vos commentaires Sidewiki repris sur votre blog</title>
		<link>http://feedproxy.google.com/~r/LeBlogDeWebving/~3/FH1c3ixoZ0w/</link>
		<comments>http://www.webving.fr/blog/tutoriel-tous-les-commentaires-google-sidewiki-d-une-personne-sur-une-page/#comments</comments>
		<pubDate>Fri, 25 Sep 2009 16:27:56 +0000</pubDate>
		<dc:creator>Webving</dc:creator>
				<category><![CDATA[Tutoriel]]></category>

		<guid isPermaLink="false">http://www.webving.fr/blog/?p=32</guid>
		<description><![CDATA[Les plus attentifs d'entre vous (et ils sont nombreux dans la foule innombrable de mes lecteurs) auront remarqué que j'ai rajouté une page à ce blog: http://www.webving.fr/pages/Google-Sidewiki-feed (oui elle n'est accessible que depuis le footer de la page d'accueil, c'est pas non plus le truc du siècle).

C'est une page qui affiche les derniers commentaires que j'ai laissé un peu partout sur la toile en utilisant SideWiki, l'outil de commentaire livré avec la toolbar Google.]]></description>
			<content:encoded><![CDATA[<p>Hier, on a vu comment basiquement <a href="../../post/tutoriel-tous-les-commentaires-google-sidewiki-d-une-personne-sur-une-page">afficher les commentaires Sidewiki d&#8217;une page</a><br />
sur cette même page. Aujourd&#8217;hui, il s&#8217;agit de reprendre sur une page<br />
les commentaires Sidewiki d&#8217;une seule personne, avec un peu plus de<br />
main sur la mise en forme. </p>
<p>Je précise tout de suite: en terme de SEO je crois que ça vaut pas un pet de grenouille. C&#8217;est juste pour le fun. Le contenu de cette page est en Javascript et les liens sont tous hachés par google.</p>
<h2>D&#8217;abord : générer une clef Ajax Api Feed</h2>
<p>Si vous n&#8217;en avez pas bien sûr.&nbsp; Sinon essayez de remettre la main dessus (Haha! &#8220;Mais qu&#8217;est-ce que j&#8217;ai bien pu faire de ce truc ?&#8221;) et passez cette étape.</p>
<p>C&#8217;est là : <a hreflang="en" href="http://code.google.com/apis/ajaxfeeds/key.html">http://code.google.com/apis/ajaxfeeds/key.html</a></p>
<p>Cette clef ouvre la porte des Apis Ajax de google.</p>
<h2>Ensuite, collez et éditez un peu de code:</h2>
<p>Allez chercher le flux RSS de vos commentaires Sidewiki sur votre profile Google.</p>
<p>Si vous n&#8217;avez aucune idée d&#8217;où se trouve votre profile Google, passez par là : <a hreflang="en" href="http://www.google.com/profiles">http://www.google.com/profiles</a></p>
<p>Vous trouverez vos commentaires Sidewiki en cliquant sur l&#8217;onglet pertinemment nommé &#8220;Sidewiki&#8221;, le flux rss se trouve en bas, copiez l&#8217;adresse du lien.</p>
<p>Sur votre page, à l&#8217;endroit où vous souhaitez voir apparaître vos commentaires, collez le code ci-dessous.</p>
<p><code>&lt;script type="text/javascript" src="http://www.google.com/jsapi?key=ICI_VOTRE_CLEF"&gt;&lt;/script&gt;<br />&nbsp;&nbsp;&nbsp; &lt;script type="text/javascript"&gt;</p>
<p>&nbsp;&nbsp;&nbsp; google.load("feeds", "1");</p>
<p>&nbsp;&nbsp;&nbsp; function initialize() {<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var feed = new google.feeds.Feed("ICI_LE_FLUX_RSS_DE-VOS_COMMENTAIRES_SIDEWIKI");<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; feed.setNumEntries(ICI_LE_NOMBRE_DE_COMMENTAIRES_A_AFFICHER);<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; feed.load(function(result) {<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; if (!result.error) {<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var container = document.getElementById("feed");<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; for (var i = 0; i &lt; result.feed.entries.length; i++) {<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var entry = result.feed.entries[i];<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var div = document.createElement("div");<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var h3 = document.createElement("h3");<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var a = document.createElement("a");<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var divIn = document.createElement("div");</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; h3.appendChild(document.createTextNode(entry.title));<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; a.href = entry.link;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; a.target = "_blank" ;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; a.appendChild(h3);</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; div.appendChild(a);<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; divIn.innerHTML = entry.content;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; div.appendChild(divIn);<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; container.appendChild(div);<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; });<br />&nbsp;&nbsp;&nbsp; }<br />&nbsp;&nbsp;&nbsp; google.setOnLoadCallback(initialize);</p>
<p>&nbsp;&nbsp;&nbsp; &lt;/script&gt;<br />&nbsp;&lt;div id="feed"&gt;&lt;/div&gt;</code></p>
<p>Donc les paramètres à éditer sont ceux écrit en majuscule dans le code: </p>
<ul>
<li>votre clef google ajax api</li>
<li>l&#8217;adresse de votre flux rss sidewiki</li>
<li>le nombre de commentaires que vous voulez voir</li>
</ul>
<h2>Enfin, personnalisez à votre goût</h2>
<p>Vous pouvez éditer le javascript pour changer les balises utilisées (h3&#8230;), et définir les styles de votre &lt;div id=&#8221;feed&#8221;&gt;</p>
<p>N&#8217;hésitez pas à mettre en commentaire de ce billet des liens vers la page où vous avez intégré votre flux <img src='http://www.webving.fr/blog/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' />  </p>
<p>Evidemment il ne faut pas grand chose pour adapter de bout de code à ce qui a été vu dans l&#8217;article sur <a href="/post/tutoriel-tous-les-commentaires-google-sidewiki-d-une-personne-sur-une-page">l&#8217;intgration des commentaires Sidewik</a>i d&#8217;une page et mettre une meilleure mise en forme.</p>
<img src="http://feeds.feedburner.com/~r/LeBlogDeWebving/~4/FH1c3ixoZ0w" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://www.webving.fr/blog/tutoriel-tous-les-commentaires-google-sidewiki-d-une-personne-sur-une-page/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		<feedburner:origLink>http://www.webving.fr/blog/tutoriel-tous-les-commentaires-google-sidewiki-d-une-personne-sur-une-page/</feedburner:origLink></item>
		<item>
		<title>Shelby Bonnie: “Tuons le CPM”</title>
		<link>http://feedproxy.google.com/~r/LeBlogDeWebving/~3/_fOqU9nczgI/</link>
		<comments>http://www.webving.fr/blog/shelby-bonnie-tuons-le-cpm/#comments</comments>
		<pubDate>Fri, 25 Sep 2009 16:13:24 +0000</pubDate>
		<dc:creator>Webving</dc:creator>
				<category><![CDATA[Marché]]></category>

		<guid isPermaLink="false">http://www.webving.fr/blog/?p=26</guid>
		<description><![CDATA[Quand un fondateur de CNET raconte ça dans Techcrunch, et qu'on a un doigt dans le web, on se sent obligé de le lire. Shelby expose les raisons qui l'amènent à s'engager pour la chasse à l'emblème de la pub à l'impression sur le web.]]></description>
			<content:encoded><![CDATA[<p>Explication pour mes amis non-geeks: le <a hreflang="fr" href="http://fr.wikipedia.org/wiki/Co%C3%BBt_pour_mille">CPM</a>, le Coût Pour Mille, c&#8217;est un modèle de publicité vieux comme le web. Depuis plus de 10 ans des éditeurs de sites vivent de ça. Ils vendent à des annonceurs des espaces sur leur site en leur garantissant un certain nombre d&#8217;affichage dans des navigateurs d&#8217;internautes en une certaine période de temps.<br />
Le CPM, c&#8217;est le prix payé par l&#8217;annonceur pour 1000 fois où sa pub aura été affichée dans un navigateur et donc, vue par un internaute. Le CPM varie surtout en fonction de l&#8217;adequation de l&#8217;audience par rapport à l&#8217;offre de l&#8217;annonceur. Quand IBM achète des pubs sur ZDNet pour vendre des serveurs, c&#8217;est un CPM probablement plus élevé que quand Cartier achète une pub sur lemonde.fr.</p>
<h3>Pourquoi Shelby s&#8217;emporte contre le CPM ?</h3>
<p>Shelby, c&#8217;est un pionnier, et quand on parle de lui, ça veut dire bien avant 2001. Il constate que vendre des impressions n&#8217;a plus de sens sur Internet qui est un espace infini, que les impressions dans un navigateur peuvent être facilement boostés artificiellement, que ce sont les utilisateurs qui au final en souffrent&#8230;</p>
<p>Selon lui, cette situation qui dure serait en grande partie due à&#8230; Une vieille habitude. Le web est jeune, et pourtant ça fait des années que des régies achètent des impressions et que les mêmes fichiers excel sont utilisés à chaque campagne vendue.</p>
<h3>Il propose quoi alors ?</h3>
<p>Il ne propose pas spécifiquement de solution alternative mais en donne les caractéristiques essentielles: simple pour tout le monde, open-source pour éviter qu&#8217;<a hreflang="fr" href="http://www.zdnet.fr/actualites/internet/0,39020774,39368694,00.htm">une seule boite aie la main sur tout un marché</a>, et il faut que ça soit un grand mouvement d&#8217;initiatives personnelles un peu partout sans avoir besoin d&#8217;un comité ou d&#8217;un bureau qui s&#8217;occupe de ça.</p>
<p>Surtout, il insiste sur le fait qu&#8217;on obtient ce qu&#8217;on paye. C&#8217;est à dire qu&#8217;en achetant des impressions, on obtient des impressions, et pas forcément des acheteurs, ou des passionnés curieux, ou des prospects intéressés. Le CPC (coût par click) et le CPA (coût par action) sont des modèles essentiellement adaptés pour du marchand mais pas du média, qui a un but plus informatif: &#8220;comment dire aux gens d&#8217;acheter un truc qu&#8217;ils ne connaissent pas encore ?&#8221;</p>
<p>Il y a donc plus de sens à vendre des utilisateurs engagés ou des &#8220;actions&#8221; (regarder une vidéo jusqu&#8217;au bout, cliquer sur le bouton &#8220;je suis fan&#8221;&#8230;) ou autres dispositifs signifiant que l&#8217;utilisateur à vu, compris et interagis avec le message.</p>
<h3>La suite ?</h3>
<p>de toute façons, le CPM moyen est en chute depuis des années, et les médias s&#8217;arrachent les cheveux depuis longtemps pour trouver d&#8217;autres types de financement. Les budgets pub se contractent et n&#8217;ont pas attendu le mot de Shelby. Cela fait peut-être plus longtemps en France qu&#8217;on s&#8217;en rend compte, car les grands groupes de presse américains ayant pu vivre sur leur trésorerie plus longtemps et ayant souvent des revenus partagés sur plusieurs médias (presse, tv, radio&#8230;) ont eu moins rapidement des difficultés à se financer.</p>
<p>Alors la solution ? Les <a hreflang="fr" href="/post/un-bouquet-d-abonnements-payants-aux-medias-rendra-t-il-le-sourire-a-leurs-comptables">bouquets d&#8217;abonnement en ligne</a> ? Le CPC et CPA en maîtres de la pub ? &#8230;</p>
<img src="http://feeds.feedburner.com/~r/LeBlogDeWebving/~4/_fOqU9nczgI" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://www.webving.fr/blog/shelby-bonnie-tuons-le-cpm/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		<feedburner:origLink>http://www.webving.fr/blog/shelby-bonnie-tuons-le-cpm/</feedburner:origLink></item>
		<item>
		<title>Tutoriel: intégrer facilement les commentaires SideWiki sur votre blog ou site</title>
		<link>http://feedproxy.google.com/~r/LeBlogDeWebving/~3/tVGhAmle3YM/</link>
		<comments>http://www.webving.fr/blog/tutoriel-integrer-facilement-sidewiki-sur-votre-blog-avec-ajax-api-feed/#comments</comments>
		<pubDate>Thu, 24 Sep 2009 16:29:27 +0000</pubDate>
		<dc:creator>Webving</dc:creator>
				<category><![CDATA[Tutoriel]]></category>

		<guid isPermaLink="false">http://www.webving.fr/blog/?p=35</guid>
		<description><![CDATA[SideWiki c'est formidable: les gens parlent de votre site, mais vous ne le savez pas forcément. Alors pour remédier à ça, on va faire un petit mashup Google Ajax Feed API avec l'API du tout nouveau service SideWiki.

En quelques mini bouts de code et en moins de 15 minutes, vous devriez voir vos nombreux commentaires SideWiki qui apparaissent sur toutes vos pages.]]></description>
			<content:encoded><![CDATA[<p style="border: 1px solid rgb(136, 51, 51);"><strong>MISE A JOUR 1er octobre 09:</strong> on dirait qu&#8217;une erreur js est apparue, plus rien ne se charge, donc le code ci-dessous est périmé. Mieux vaut utiliser la manière un peu plus complexe mais plus personnalisable décrite ici <a href="/post/tutoriel-tous-les-commentaires-google-sidewiki-d-une-personne-sur-une-page">d&#8217;intégrer les flux sidewiki</a> en changeant simplement l&#8217;url du feed.</p>
<p>Voici comment afficher sur une page ses commentaires SideWiki.</p>
<h2>Générer le code de lecture de flux</h2>
<p>Rendez-vous sur le <strong>Dynamic Feed Wizard</strong></p>
<p><a hreflang="en" href="http://www.google.com/uds/solutions/dynamicfeed/index.html">http://www.google.com/uds/solutions/dynamicfeed/index.html</a></p>
<p>et cliquez sur &#8220;start with the wizard&#8221;</p>
<p>Choisissez votre style, puis mettez ce que vous voulez qui marche dans le formulaire (un nom de site avec un flux RSS). Par exemple, j&#8217;ai tapé &#8220;webving&#8221; et il est allé me chercher mon flux Atom.</p>
<p>Cliquez sur Preview pour voir un peu ce que ça donne, puis cliquez sur &#8220;Generate Code&#8221;.</p>
<p>Vous voilà avec une belle floppée de lignes de JavaScript à copier dans votre template.</p>
<h2>Collez ce code dans votre template</h2>
<p>Sur dotclear je l&#8217;ai mis dans le fichier &#8220;post.html&#8221;, avant la ligne </p>
<blockquote><p>&lt;!&#8211; # Comments &#8211;&gt;</p>
</blockquote>
<p>C&#8217;est très sale. J&#8217;aime beaucoup.</p>
<p>Pour wordpress et autres plateformes, je vous renvoie à leurs docs respectives <img src='http://www.webving.fr/blog/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> </p>
<h2>Deux petites modifications</h2>
<p>Changer les lignes (qui seront différentes en fonction de ce que vous avez mis précédemment dans le formulaire de génération de code).</p>
<blockquote><p>var feeds = [<br />	{title: 'webving',<br />
<br />	 url: 'http://www.webving.fr/feed/atom'<br />
<br />	}];</p>
</blockquote>
<p>par ce code là:</p>
<blockquote><p>var feedurl = &#8216;http://www.google.com/sidewiki/feeds/entries/webpage/&#8217;+encodeURIComponent(document.URL)+&#8217;/default&#8217;<br />
<br />var feeds = [<br />
<br /> {title: 'Commentaires SideWiki',<br />
<br /> url: feedurl<br />
<br />
}];</p>
</blockquote>
<p>Juste un peu plus bas, dans les &#8220;options&#8221; il y a une autre variable &#8220;title:&#8221;, n&#8217;oubliez pas de la changer aussi.</p>
<h2>Admirez vos commentaires SideWiki</h2>
<p>Rechargez votre page. Voici qu&#8217;apparaissent les innombrables commentaires qu&#8217;elle a généré. </p>
<p>Les flux RSS ne sont pas d&#8217;une rapidité faramineuse, mais ça finit par apparaître.</p>
<p>Alors oui, c&#8217;est très basique, mais le Wizard Ajax Feed est très basique. Peut-être plus tard, si beaucoup me le demandent, une version plus customisée avec l&#8217;API Google Ajax Feed&#8230;</p>
<img src="http://feeds.feedburner.com/~r/LeBlogDeWebving/~4/tVGhAmle3YM" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://www.webving.fr/blog/tutoriel-integrer-facilement-sidewiki-sur-votre-blog-avec-ajax-api-feed/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		<feedburner:origLink>http://www.webving.fr/blog/tutoriel-integrer-facilement-sidewiki-sur-votre-blog-avec-ajax-api-feed/</feedburner:origLink></item>
	</channel>
</rss><!-- WP Super Cache is installed but broken. The path to wp-cache-phase1.php in wp-content/advanced-cache.php must be fixed! -->

