<?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>Blogue de Axial Développement</title>
	
	<link>https://www.axialdev.com/blogue</link>
	<description>Un blogue consacré au Web</description>
	<lastBuildDate>Wed, 23 May 2012 13:17:17 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.2.1</generator>
		<atom10:link xmlns:atom10="http://www.w3.org/2005/Atom" rel="self" type="application/rss+xml" href="http://feeds.feedburner.com/axialdev" /><feedburner:info uri="axialdev" /><atom10:link xmlns:atom10="http://www.w3.org/2005/Atom" rel="hub" href="http://pubsubhubbub.appspot.com/" /><feedburner:emailServiceId>axialdev</feedburner:emailServiceId><feedburner:feedburnerHostname>http://feedburner.google.com</feedburner:feedburnerHostname><item>
		<title>Un outil Web pour remplacer Photoshop</title>
		<link>http://feedproxy.google.com/~r/axialdev/~3/XbSLf9Zv8IQ/</link>
		<comments>https://www.axialdev.com/blogue/2012/05/un-outil-web-pour-remplacer-photoshop/#comments</comments>
		<pubDate>Wed, 23 May 2012 13:17:17 +0000</pubDate>
		<dc:creator>Pierre-Luc Ayotte</dc:creator>
				<category><![CDATA[Général]]></category>
		<category><![CDATA[Gestion de contenu]]></category>
		<category><![CDATA[Trucs et astuces]]></category>
		<category><![CDATA[Tutoriels]]></category>

		<guid isPermaLink="false">http://www.axialdev.com/blogue/?p=1760</guid>
		<description><![CDATA[Parfois, certains clients nous soumettent des demandes qu&#8217;ils désireraient faire eux-mêmes. Évidemment, il n&#8217;est pas toujours évident de découper une image ou de changer une couleur de fond. Cependant, le plus grand défi consiste à connaitre les principaux outils à &#8230; <a class="more-link" href="https://www.axialdev.com/blogue/2012/05/un-outil-web-pour-remplacer-photoshop/">Continuer la lecture <span class="meta-nav">&#8594;</span></a>]]></description>
			<content:encoded><![CDATA[<div class="tweetmeme_button" style="float: right; margin-left: 10px;">
			<a href="http://api.tweetmeme.com/share?url=https%3A%2F%2Fwww.axialdev.com%2Fblogue%2F2012%2F05%2Fun-outil-web-pour-remplacer-photoshop%2F"><br />
				<img src="http://api.tweetmeme.com/imagebutton.gif?url=https%3A%2F%2Fwww.axialdev.com%2Fblogue%2F2012%2F05%2Fun-outil-web-pour-remplacer-photoshop%2F&amp;source=axialdev&amp;style=normal&amp;service=bit.ly&amp;b=2" height="61" width="50" /><br />
			</a>
		</div>
<p>Parfois, certains clients nous soumettent des demandes qu&#8217;ils désireraient faire eux-mêmes. Évidemment, il n&#8217;est pas toujours évident de découper une image ou de changer une couleur de fond. Cependant, le plus grand défi consiste à connaitre les principaux outils à utiliser et le logiciel approprié. Voici donc un logiciel gratuit, en ligne et facile d&#8217;utilisation.</p>
<h2>1. L&#8217;éditeur</h2>
<p>Voici donc le logiciel en ligne que vous pouvez utiliser : <a href="http://pixlr.com/editor/" target="_blank">http://pixlr.com/editor/</a>.</p>
<p>Vous aurez alors 4 choix, créer une nouvelle image, ouvrir une image de votre ordinateur, ouvrir une image avec son lien Web ou l&#8217;ouvrir à partir d&#8217;une bibliothèque existante (connexion avec vos différents comptes).</p>
<h2><a href="http://www.axialdev.com/blogue/wp-content/uploads/2012/05/capt12.png"><img class="alignnone size-full wp-image-1786" title="capt1" src="http://www.axialdev.com/blogue/wp-content/uploads/2012/05/capt12.png" alt="" width="804" height="845" /></a></h2>
<h2>2. Ouvrir une image pour débuter</h2>
<p>Ouvrons simplement une image afin de voir l&#8217;étendue des options disponibles.</p>
<p><a href="http://www.axialdev.com/blogue/wp-content/uploads/2012/05/capt2.png"><img class="alignnone size-full wp-image-1787" title="capt2" src="http://www.axialdev.com/blogue/wp-content/uploads/2012/05/capt2.png" alt="" width="617" height="480" /></a></p>
<h2>3. Résultat de l&#8217;image ouverte dans l&#8217;éditeur</h2>
<p>Vous devriez obtenir ce résultat :</p>
<p><a href="http://www.axialdev.com/blogue/wp-content/uploads/2012/05/Capture-d’écran-2011-11-04-à-09.34.231.png"><img class="alignnone size-full wp-image-1765" title="Capture d’écran 2011-11-04 à 09.34.23" src="http://www.axialdev.com/blogue/wp-content/uploads/2012/05/Capture-d’écran-2011-11-04-à-09.34.231.png" alt="" width="960" height="931" /></a></p>
<h2>4. Le zoom</h2>
<p>Commencez par agrandir votre fenêtre d&#8217;image et utilisez la loupe pour agrandir votre image. Il sera plus facile alors de voir le résultat de chaque outil. Tout au long des images, vous remarquerez que l&#8217;outil dont je parle se trouve sélectionné dans la barre de gauche de l&#8217;application.</p>
<p><a href="http://www.axialdev.com/blogue/wp-content/uploads/2012/05/Capture-d’écran-2012-05-22-à-09.17.50.png"><img class="alignnone size-full wp-image-1791" title="Capture d’écran 2012-05-22 à 09.17.50" src="http://www.axialdev.com/blogue/wp-content/uploads/2012/05/Capture-d’écran-2012-05-22-à-09.17.50.png" alt="" width="1345" height="902" /></a></p>
<h2>5. Recadrer une image</h2>
<p>Pour recadrer une image de la dimension désirée, l&#8217;outil de recadrage est là pour ça! Sélectionnez le partie en haut à gauche ou en haut à droite, et ensuite glissez par-dessus la zone que vous désirez garder. Ensuite, appuyez sur sur entrée et l&#8217;image sera recadrée.</p>
<p><a href="http://www.axialdev.com/blogue/wp-content/uploads/2012/05/Capture-d’écran-2012-05-22-à-09.39.35.png"><img class="alignnone size-full wp-image-1792" title="Capture d’écran 2012-05-22 à 09.39.35" src="http://www.axialdev.com/blogue/wp-content/uploads/2012/05/Capture-d’écran-2012-05-22-à-09.39.35.png" alt="" width="1345" height="902" /></a></p>
<h2>6. Sélection d&#8217;image</h2>
<p>2 choix s&#8217;offrent à vous pour sélectionner une partie de l&#8217;image afin de la modifier. L&#8217;outil de sélection ou bien l&#8217;outil lasso. L&#8217;outil de sélection lasso se trouve tout de suite à droite de celui sélectionné. L&#8217;outil de sélection traditionnel vous permet de sélectionner une forme pré-établie, carré ou ovale. Le lasso vous permet quant à lui de dessiner la forme que vous désirez sélectionner, que ce soit en mode libre ou en mode lignes droites. Les options secondaires d&#8217;un outil se trouvent dans la 2e barre grise à partir du haut.</p>
<p><a href="http://www.axialdev.com/blogue/wp-content/uploads/2012/05/Capture-d’écran-2012-05-22-à-10.02.05.png"><img class="alignnone size-full wp-image-1793" title="Capture d’écran 2012-05-22 à 10.02.05" src="http://www.axialdev.com/blogue/wp-content/uploads/2012/05/Capture-d’écran-2012-05-22-à-10.02.05.png" alt="" width="1345" height="902" /></a></p>
<h2>7. Utilisation de la baguette magique</h2>
<p>La baguette magique sert à sélectionner une couleur, une forme ou autre. Elle peut vous aider à détourer un élément pour supprimer une couleur ou simplement enlever des parties d&#8217;une image. La tolérance que vous pouvez ajuster vous servira à choisir le degré d&#8217;acceptation d&#8217;une couleur. Une tolérance plus basse ignorera les différentes teintes d&#8217;une couleur et au contraire, une tolérance trop élevée acceptera toutes les couleurs d&#8217;une image.</p>
<p><a href="http://www.axialdev.com/blogue/wp-content/uploads/2012/05/Capture-d’écran-2011-11-04-à-09.37.00.png"><img class="alignnone size-full wp-image-1769" title="Capture d’écran 2011-11-04 à 09.37.00" src="http://www.axialdev.com/blogue/wp-content/uploads/2012/05/Capture-d’écran-2011-11-04-à-09.37.00.png" alt="" width="960" height="931" /></a></p>
<h2>8. Outils de colorisation</h2>
<p>Plusieurs outils de colorisation se trouvent à votre disposition à partir du crayon jusqu&#8217;au dégradé. Testez-les, vous verrez leur utilité!</p>
<p><a href="http://www.axialdev.com/blogue/wp-content/uploads/2012/05/Capture-d’écran-2012-05-22-à-10.26.57.png"><img class="alignnone size-full wp-image-1794" title="Capture d’écran 2012-05-22 à 10.26.57" src="http://www.axialdev.com/blogue/wp-content/uploads/2012/05/Capture-d’écran-2012-05-22-à-10.26.57.png" alt="" width="1345" height="902" /></a></p>
<h2>9. Créer une forme</h2>
<p>Vous servira à créer un carré, un carré aux coins arrondis, un rond et une ligne. Vous pouvez choisir l&#8217;opacité, la couleur, la bordure, etc.</p>
<p><a href="http://www.axialdev.com/blogue/wp-content/uploads/2012/05/Capture-d’écran-2012-05-22-à-11.04.27.png"><img class="alignnone size-full wp-image-1796" title="Capture d’écran 2012-05-22 à 11.04.27" src="http://www.axialdev.com/blogue/wp-content/uploads/2012/05/Capture-d’écran-2012-05-22-à-11.04.27.png" alt="" width="1345" height="902" /></a></p>
<h2>10. Outils de transformation visuelle</h2>
<p>Quelques outils complémentaires qui vous serviront occasionnellement. Le premier étant la goutte d&#8217;eau, qui permet de rendre l&#8217;image plus floue. Ensuite l&#8217;outil netteté (pyramide) qui rend les contours moins flous. La main qui pointe avec un doigt, permet d&#8217;étirer certaines parties de l&#8217;image. L&#8217;éponge vous servira à modifier la saturation des couleurs. Moins technique, c&#8217;est-à-dire que la couleur va se modifier. Les outils de densité + et densité &#8211; éclaircissent ou assombrissent l&#8217;image. J&#8217;ai utilisé en ordre, chacun des outils précédents, sur l&#8217;image ci-dessous en sélectionnant chaque lettre. Le i et le téléphone n&#8217;ont pas été utilisés.</p>
<p><a href="http://www.axialdev.com/blogue/wp-content/uploads/2012/05/Capture-d’écran-2012-05-22-à-11.17.20.png"><img class="alignnone size-full wp-image-1797" title="Capture d’écran 2012-05-22 à 11.17.20" src="http://www.axialdev.com/blogue/wp-content/uploads/2012/05/Capture-d’écran-2012-05-22-à-11.17.20.png" alt="" width="1345" height="902" /></a></p>
<h2>11. Autres outils</h2>
<p>Vous pouvez aussi y trouver une fonction pour effacer les yeux rouges, pour grossir une section en forme de bulle, créer l&#8217;effet inverse (outils fluidité et contraction), un outil de prélèvement de couleurs ainsi qu&#8217;une option pour écrire du texte. Vous pouvez y trouver beaucoup d&#8217;autres options dans le menu gris foncé en haut complètement (éditer, image, calque, réglage, filtre et visualiser). Vous pouvez aussi modifier la langue via ce menu.</p>
<h2>12. En conclusion</h2>
<p>Vous pouvez utiliser cet outil en ligne et gratuit pour vos besoins personnels lorsque certaines retouches s&#8217;imposent. Ceci dit, ce logiciel n&#8217;est pas un logiciel professionnel, n&#8217;hésitez pas à demander conseil lorsque le besoin s&#8217;impose!</p>
<img src="http://feeds.feedburner.com/~r/axialdev/~4/XbSLf9Zv8IQ" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>https://www.axialdev.com/blogue/2012/05/un-outil-web-pour-remplacer-photoshop/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		<feedburner:origLink>https://www.axialdev.com/blogue/2012/05/un-outil-web-pour-remplacer-photoshop/</feedburner:origLink></item>
		<item>
		<title>Recherche Clinique Sherbrooke: Un partenariat est né</title>
		<link>http://feedproxy.google.com/~r/axialdev/~3/Ima3V5a8KFM/</link>
		<comments>https://www.axialdev.com/blogue/2012/05/recherche-clinique-sherbrooke/#comments</comments>
		<pubDate>Mon, 07 May 2012 20:32:26 +0000</pubDate>
		<dc:creator>Axial Developpement</dc:creator>
				<category><![CDATA[Création sites Internet]]></category>
		<category><![CDATA[Général]]></category>
		<category><![CDATA[Réalisation]]></category>
		<category><![CDATA[réalisations]]></category>
		<category><![CDATA[site web]]></category>

		<guid isPermaLink="false">http://www.axialdev.com/blogue/?p=1746</guid>
		<description><![CDATA[C&#8217;est ce matin que naissait officiellement un nouveau partenariat dans le domaine de la recherche clinique : Recherche Clinique Sherbrooke, l&#8217;union des forces de quatre grand centres de recherches en Estrie : Centre de recherche clinique Étienne-Le Bel Centre de &#8230; <a class="more-link" href="https://www.axialdev.com/blogue/2012/05/recherche-clinique-sherbrooke/">Continuer la lecture <span class="meta-nav">&#8594;</span></a>]]></description>
			<content:encoded><![CDATA[<div class="tweetmeme_button" style="float: right; margin-left: 10px;">
			<a href="http://api.tweetmeme.com/share?url=https%3A%2F%2Fwww.axialdev.com%2Fblogue%2F2012%2F05%2Frecherche-clinique-sherbrooke%2F"><br />
				<img src="http://api.tweetmeme.com/imagebutton.gif?url=https%3A%2F%2Fwww.axialdev.com%2Fblogue%2F2012%2F05%2Frecherche-clinique-sherbrooke%2F&amp;source=axialdev&amp;style=normal&amp;service=bit.ly&amp;b=2" height="61" width="50" /><br />
			</a>
		</div>
<p>C&#8217;est ce matin que naissait officiellement un nouveau partenariat dans le domaine de la recherche clinique : <a href="http://recherche-clinique-sherbrooke.com/" target="_blank">Recherche Clinique Sherbrooke</a>, l&#8217;union des forces de quatre grand centres de recherches en Estrie :</p>
<ul>
<li><a href="http://www.crc.chus.qc.ca/" target="_blank">Centre de recherche clinique Étienne-Le Bel</a></li>
<li><a href="http://www.csss-iugs.ca/?L=fr" target="_blank">Centre de recherche sur le vieillissement</a></li>
<li><a href="http://www.diex.ca/" target="_blank">Diex Recherche</a></li>
<li><a href="http://www.qtrecherche.com/" target="_blank">Q&amp;T Recherche</a></li>
</ul>
<p><a href="http://recherche-clinique-sherbrooke.com/" target="_blank">Recherche Clinique Sherbrooke</a> est un portail Web conçu par Axial Développement présentant les essais cliniques offerts dans la région de l&#8217;Estrie.</p>
<div><a href="http://www.recherche-clinique-sherbrooke.com/" target="_blank"><img class="aligncenter size-full wp-image-1747" title="Page d'accueil Recherche clinique Sherbrooke" src="http://www.axialdev.com/blogue/wp-content/uploads/2012/05/Page-daccueil.png" alt="Page d'accueil Recherche clinique Sherbrooke" width="1265" height="860" /></a></div>
<p>Une conférence de presse avait lieu ce matin au Musée de la Nature et des Sciences de Sherbrooke afin de présenter ce nouveau portail Web.</p>
<div><a href="http://www.axialdev.com/blogue/wp-content/uploads/2012/05/conférence-de-presse-recherche-clinique-sherbrooke-1.jpg"><img class="aligncenter size-large wp-image-1750" title="conférence de presse recherche clinique sherbrooke 1" src="http://www.axialdev.com/blogue/wp-content/uploads/2012/05/conférence-de-presse-recherche-clinique-sherbrooke-1-1024x768.jpg" alt="" width="640" height="480" /></a><a href="http://www.axialdev.com/blogue/wp-content/uploads/2012/05/conférence-de-presse-recherche-clinique-sherbrooke-2.jpg"><img class="aligncenter size-large wp-image-1751" title="conférence de presse recherche clinique sherbrooke 2" src="http://www.axialdev.com/blogue/wp-content/uploads/2012/05/conférence-de-presse-recherche-clinique-sherbrooke-2-1024x768.jpg" alt="" width="640" height="480" /></a></div>
<div><a href="http://www.axialdev.com/blogue/wp-content/uploads/2012/05/conférence-de-presse-recherche-clinique-sherbrooke-3.jpg"><img class="aligncenter size-large wp-image-1752" title="conférence de presse recherche clinique sherbrooke 3" src="http://www.axialdev.com/blogue/wp-content/uploads/2012/05/conférence-de-presse-recherche-clinique-sherbrooke-3-1024x768.jpg" alt="" width="640" height="480" /></a><a href="http://www.axialdev.com/blogue/wp-content/uploads/2012/05/conférence-de-presse-recherche-clinique-sherbrooke-5.jpg"><img class="aligncenter size-large wp-image-1753" title="conférence de presse recherche clinique sherbrooke 5" src="http://www.axialdev.com/blogue/wp-content/uploads/2012/05/conférence-de-presse-recherche-clinique-sherbrooke-5-1024x768.jpg" alt="" width="640" height="480" /></a></div>
<p><strong>Félicitations à tous les partenaires.  Nous sommes très fiers d&#8217;avoir collaboré à la réussite de ce projet unique en Estrie, si ce n&#8217;est au Canada!</strong></p>
<img src="http://feeds.feedburner.com/~r/axialdev/~4/Ima3V5a8KFM" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>https://www.axialdev.com/blogue/2012/05/recherche-clinique-sherbrooke/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		<feedburner:origLink>https://www.axialdev.com/blogue/2012/05/recherche-clinique-sherbrooke/</feedburner:origLink></item>
		<item>
		<title>Savez-vous ce que regardent les internautes sur votre page Facebook ?</title>
		<link>http://feedproxy.google.com/~r/axialdev/~3/tEKZ_2MTdbQ/</link>
		<comments>https://www.axialdev.com/blogue/2012/05/couverture-timeline-facebook/#comments</comments>
		<pubDate>Fri, 04 May 2012 12:38:50 +0000</pubDate>
		<dc:creator>Alice Allary</dc:creator>
				<category><![CDATA[Création sites Internet]]></category>
		<category><![CDATA[Facebook]]></category>
		<category><![CDATA[Général]]></category>
		<category><![CDATA[Marketing Internet]]></category>
		<category><![CDATA[Réalisation]]></category>
		<category><![CDATA[Réseaux sociaux]]></category>
		<category><![CDATA[facebook]]></category>
		<category><![CDATA[médias sociaux]]></category>
		<category><![CDATA[Timeline Facebook]]></category>

		<guid isPermaLink="false">http://www.axialdev.com/blogue/?p=1711</guid>
		<description><![CDATA[Le 30 mars dernier, le Timeline Facebook est devenu obligatoire pour les pages entreprises. Ce format a changé la façon dont les internautes portent attention à votre page. Voici  ce que les internautes regardent sur votre «Fan page» avant et après &#8230; <a class="more-link" href="https://www.axialdev.com/blogue/2012/05/couverture-timeline-facebook/">Continuer la lecture <span class="meta-nav">&#8594;</span></a>]]></description>
			<content:encoded><![CDATA[<div class="tweetmeme_button" style="float: right; margin-left: 10px;">
			<a href="http://api.tweetmeme.com/share?url=https%3A%2F%2Fwww.axialdev.com%2Fblogue%2F2012%2F05%2Fcouverture-timeline-facebook%2F"><br />
				<img src="http://api.tweetmeme.com/imagebutton.gif?url=https%3A%2F%2Fwww.axialdev.com%2Fblogue%2F2012%2F05%2Fcouverture-timeline-facebook%2F&amp;source=axialdev&amp;style=normal&amp;service=bit.ly&amp;b=2" height="61" width="50" /><br />
			</a>
		</div>
<p>Le 30 mars dernier, le Timeline Facebook est devenu obligatoire pour les pages entreprises. Ce format a changé la façon dont les internautes portent attention à votre page. Voici  ce que les internautes regardent sur votre «Fan page» avant et après Facebook Timeline.</p>
<p style="text-align: center;"><a href="http://mashable.com/2012/04/30/facebook-timeline-eyetrack-study/#61171The-Muppets-Visual-Attention-Level" target="_blank"><img class="aligncenter size-full wp-image-1712" title="Timeline Facebook" src="http://www.axialdev.com/blogue/wp-content/uploads/2012/05/Facebook.jpg" alt="" width="616" height="425" /></a></p>
<p>La couverture est donc une partie importante de votre page Facebook pour les internautes  et il faut y accorder une attention particulière.</p>
<p>Voici quelques-unes de nos réalisations :</p>
<p style="text-align: center;"><a href="https://www.facebook.com/MaisonduPere" target="_blank"><img class="aligncenter size-full wp-image-1728" title="Maison du pere" src="http://www.axialdev.com/blogue/wp-content/uploads/2012/05/Maison-du-pere.jpg" alt="" width="872" height="550" /></a></p>
<p style="text-align: center;"><a href="https://www.facebook.com/promenadekia" target="_blank"><img class="aligncenter size-full wp-image-1737" title="Kia" src="http://www.axialdev.com/blogue/wp-content/uploads/2012/05/Kia.jpg" alt="" width="866" height="564" /></a><a href="https://www.facebook.com/pages/Bureau-de-Conf%C3%A9renciers-OriZon/171498706281263" target="_blank"><br />
<img class="aligncenter size-full wp-image-1714" title="Orizon" src="http://www.axialdev.com/blogue/wp-content/uploads/2012/05/Orizon.jpg" alt="" width="868" height="548" /></a></p>
<p style="text-align: center;"><a href="https://www.facebook.com/pages/Le-Regroupement-des-gens-daffaires-de-la-Capitale-nationale-RGA/235852749829830" target="_blank"><img class="aligncenter size-full wp-image-1715" title="RGA" src="http://www.axialdev.com/blogue/wp-content/uploads/2012/05/RGA.jpg" alt="" width="869" height="578" /></a></p>
<p style="text-align: center;"><a href="https://www.facebook.com/axialdev" target="_blank"><img class="aligncenter size-full wp-image-1739" title="axial" src="http://www.axialdev.com/blogue/wp-content/uploads/2012/05/axial1.jpg" alt="" width="866" height="553" /></a></p>
<p><strong>Vous voulez optimiser votre page Facebook ? <a href="http://www.axialdev.com/fr/a-propos/nous-joindre">Contactez-nous!</a></strong></p>
<img src="http://feeds.feedburner.com/~r/axialdev/~4/tEKZ_2MTdbQ" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>https://www.axialdev.com/blogue/2012/05/couverture-timeline-facebook/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		<feedburner:origLink>https://www.axialdev.com/blogue/2012/05/couverture-timeline-facebook/</feedburner:origLink></item>
		<item>
		<title>Comment et pourquoi adapter son infolettre pour l’affichage mobile</title>
		<link>http://feedproxy.google.com/~r/axialdev/~3/n_Efpjpi_F8/</link>
		<comments>https://www.axialdev.com/blogue/2012/05/adapter-infolettre-pour-laffichage-mobile/#comments</comments>
		<pubDate>Wed, 02 May 2012 19:24:23 +0000</pubDate>
		<dc:creator>David Gagnon Marchand</dc:creator>
				<category><![CDATA[Marketing Internet]]></category>
		<category><![CDATA[Site Web mobile]]></category>
		<category><![CDATA[Trucs et astuces]]></category>
		<category><![CDATA[infolettre]]></category>
		<category><![CDATA[mobile]]></category>
		<category><![CDATA[site mobile]]></category>

		<guid isPermaLink="false">http://www.axialdev.com/blogue/?p=1674</guid>
		<description><![CDATA[Le marketing courriel est une pratique très répandue au sein des entreprises dans le but de promouvoir certains produits ou services. Comme n&#8217;importe quel domaine relié au Web, il évolue avec le temps. Durant la dernière année, les téléphones sont &#8230; <a class="more-link" href="https://www.axialdev.com/blogue/2012/05/adapter-infolettre-pour-laffichage-mobile/">Continuer la lecture <span class="meta-nav">&#8594;</span></a>]]></description>
			<content:encoded><![CDATA[<div class="tweetmeme_button" style="float: right; margin-left: 10px;">
			<a href="http://api.tweetmeme.com/share?url=https%3A%2F%2Fwww.axialdev.com%2Fblogue%2F2012%2F05%2Fadapter-infolettre-pour-laffichage-mobile%2F"><br />
				<img src="http://api.tweetmeme.com/imagebutton.gif?url=https%3A%2F%2Fwww.axialdev.com%2Fblogue%2F2012%2F05%2Fadapter-infolettre-pour-laffichage-mobile%2F&amp;source=axialdev&amp;style=normal&amp;service=bit.ly&amp;b=2" height="61" width="50" /><br />
			</a>
		</div>
<p>Le marketing courriel est une pratique très répandue au sein des entreprises dans le but de promouvoir certains produits ou services. Comme n&#8217;importe quel domaine relié au Web, il évolue avec le temps. Durant la dernière année, <a href="https://www.axialdev.com/blogue/2011/11/la-plateforme-de-creation-de-site-web-mobile-ekomobi-est-lance/" target="_blank">les téléphones sont de plus en plus utilisés pour visiter des sites</a>.</p>
<p>« Actuellement, 10% des recherches sur Google sont effectuées via les mobiles. D’ici un an ou deux, ce sera plus de 40%. On calcule même que d’ici 2015, les consultations mobiles vont dépasser les consultations par PC. »<span id="more-1674"></span></p>
<p>Cela dit, de plus en plus d&#8217;individus utilisent leur téléphone mobile pour recueillir et expédier leurs courriels. Comme le démontre <a href="http://www.knotice.com/reports/Knotice_Mobile_Email_Opens_Report_SecondHalf2011.pdf" target="_blank">une étude menée par Knotice, en 2010</a>, 13% étaient visualisés sur un téléphone, tandis que 86% des courriels étaient ouverts sur un ordinateur de bureau. Au début de 2011, l&#8217;étude rapporte 20% pour le mobile et 80% pour l&#8217;ordinateur. À la fin de 2011, nous étions à 27% et 72%.</p>
<p><a href="http://www.axialdev.com/blogue/wp-content/uploads/2012/04/table1.jpg" target="_blank"><img class="alignnone size-full wp-image-1679" title="Ouverture des courriels sur un téléphone mobile VS ordinateur de bureau" src="http://www.axialdev.com/blogue/wp-content/uploads/2012/04/table1.jpg" alt="Ouverture des courriels sur un téléphone mobile VS ordinateur de bureau" width="712" height="253" /></a></p>
<h2>Les bonnes pratiques : comment faire un gabarit adapté pour le mobile.</h2>
<p>Jusqu&#8217;à maintenant, nous n&#8217;avions pas vraiment besoin de se soucier de l&#8217;accessibilité de nos infolettres, car la très grande majorité d&#8217;entre-elles étaient visualisées à partir d&#8217;un ordinateur conventionnel. À présent, nous devons y porter une attention particulière. Si l&#8217;expérience de l&#8217;utilisateur n&#8217;est pas à la hauteur, si le courriel ne s&#8217;affiche pas ou encore s&#8217;il nécessite trop de manipulation afin d&#8217;être lisible, nous pouvons perdre un client potentiel.</p>
<p>Voici la différence frappante entre une infolettre non-optimisée et optimisée.</p>
<p><strong>        Non-optimisée                              Optimisée</strong></p>
<p><a href="http://www.axialdev.com/blogue/wp-content/uploads/2012/05/IMG_1468.png" target="_blank"> <img class="alignnone size-medium wp-image-1696" title="Capture d'écran infolettre non-optimisée" src="http://www.axialdev.com/blogue/wp-content/uploads/2012/05/IMG_1468-200x300.png" alt="Capture d'écran infolettre non-optimisée" width="200" height="300" /></a>     <a href="http://www.axialdev.com/blogue/wp-content/uploads/2012/05/IMG_6423.png" target="_blank"><img class="alignnone size-medium wp-image-1697" title="Capture d'écran infolettre optimisée" src="http://www.axialdev.com/blogue/wp-content/uploads/2012/05/IMG_6423-200x300.png" alt="Capture d'écran infolettre optimisée" width="200" height="300" /></a></p>
<p>Le but est de prévoir nos gabarits afin qu&#8217;ils s&#8217;affichent de façon fixe sur un ordinateur et fluide sur un téléphone. Comme l&#8217;utilisation des &laquo;&nbsp;<a href="http://www.w3.org/TR/css3-mediaqueries/" target="_blank">media queries</a>&nbsp;&raquo; n&#8217;est stable que pour les sites Web et quelques logiciels de courriel, nous avons trouvé une méthode alternative.</p>
<p><strong><a href="http://www.axialdev.com/emailing/ekomobi/avril2012/chat.html" target="_blank">Vous pouvez visualiser et/ou utiliser le code de la version finale du gabarit</a>.</strong></p>
<p>Premièrement, il faut placer ce code à l&#8217;intérieur du &lt;head&gt; de votre gabarit:</p>
<pre class="brush: css; gutter: true; first-line: 1">&lt;style type="text/css"&gt;
	@media screen and (max-device-width: 480px) {
		#table {width: 100% !important;}
	}
&lt;/style&gt;</pre>
<p>Ensuite, le contenu utilisera une combinaison de tableaux et de divs pour assurer l&#8217;accessibilité et la compatibilité. Voici un exemple :</p>
<pre class="brush: html; gutter: true; first-line: 1">&lt;body style="padding: 0; margin: 0;"&gt;
		&lt;div align="center"&gt;
			&lt;table align="center" border="0" cellpadding="0" cellspacing="0" id="table" width="550"&gt;
				&lt;tbody&gt;
					&lt;tr&gt;
						&lt;td align="center"&gt;
							&lt;div align="left" style="width:100%; max-width:550px"&gt;
								&lt;table bgcolor="#69c4ef" border="0" cellpadding="10" cellspacing="0" style="width:100%;"&gt;
									&lt;tbody&gt;
										&lt;tr&gt;
											&lt;td align="left" width="50%"&gt;
												Contenu gauche&lt;/td&gt;
											&lt;td align="right" width="50%"&gt;
												Contenu droite&lt;/td&gt;
										&lt;/tr&gt;
									&lt;/tbody&gt;
								&lt;/table&gt;
							&lt;/div&gt;
						&lt;/td&gt;
					&lt;/tr&gt;
				&lt;/tbody&gt;
			&lt;/table&gt;
		&lt;/div&gt;
	&lt;/body&gt;</pre>
<p>Ici, l&#8217;utilisation d&#8217;un max-width et d&#8217;un width:100% sur le div contenant le dernier tableau assure que l&#8217;infolettre soit statique pour tous les logiciels sauf Outlook. Pour ce dernier, le width=&nbsp;&raquo;550&#8243; sur le tableau assure la bonne largeur.</p>
<p>Pour structurer le contenu, l&#8217;utilisation de tableaux est nécessaire. Il est aussi primordial d&#8217;utiliser des <strong>pourcentages</strong> pour les cellules. Si l&#8217;on définit les dimensions en pixels, le courriel ne s&#8217;adaptera pas dynamiquement à la résolution de l&#8217;écran.</p>
<h2>Astuces pour les images</h2>
<p>Les images, si utilisées avec une largeur fixe en pixels, ne pourront malheureusement pas s&#8217;étirer ou se rétrécir selon la dimension de l&#8217;écran. C&#8217;est pourquoi il est important d&#8217;utiliser efficacement les pourcentages et les propriétés comme max-width, min-width, max-height et min-height. Pour une image de type bannière qui prend toute la largeur de notre gabarit, voici le code à utiliser :</p>
<pre class="brush: html; gutter: true; first-line: 1">&lt;div align="left" style="width:100%; max-width:550px"&gt;
	&lt;table bgcolor="#eeeeee" border="0" cellpadding="0" cellspacing="0" style="width:100%;"&gt;
		&lt;tbody&gt;
			&lt;tr&gt;
				&lt;td&gt;
					&lt;img align="middle" alt="alt" border="0" src="/image.jpg" style="-ms-interpolation-mode: bicubic; width:100%; max-width:550px; max-height:237px" width="100%" /&gt;&lt;/td&gt;
			&lt;/tr&gt;
		&lt;/tbody&gt;
	&lt;/table&gt;
&lt;/div&gt;</pre>
<p>De la façon ci-dessus, nous nous assurons que l&#8217;image occupe 100% de l&#8217;espace dont elle dispose. Les styles ajoutés en &laquo;&nbsp;inline&nbsp;&raquo; assurent que l&#8217;image ne soit pas déformée.</p>
<p>Le principe est aussi vrai pour les vignettes avec du texte à la droite :</p>
<pre class="brush: html; gutter: true; first-line: 1">&lt;div align="left" style="width:100%; max-width:550px"&gt;
	&lt;table bgcolor="#eeeeee" border="0" cellpadding="10" cellspacing="0" style="width:100%;"&gt;
		&lt;tbody&gt;
			&lt;tr&gt;
				&lt;td width="25%" valign="middle"&gt;
					&lt;img align="center" alt="Comment faire un thumbnail" border="0" src="/image.jpg" style="-ms-interpolation-mode: bicubic; width:100%; max-width:138px; max-height:138px" width="100%" /&gt;&lt;/td&gt;
				&lt;td width="75%" valign="middle"&gt;
					&lt;font face="Arial,helvetica,sans-serif" size="2"&gt;texte à droite &lt;/font&gt;&lt;/td&gt;
			&lt;/tr&gt;
		&lt;/tbody&gt;
	&lt;/table&gt;
&lt;/div&gt;</pre>
<h2>Penser pour le mobile</h2>
<p>Nous savons maintenant qu&#8217;il est possible technologiquement de créer des gabarits fixes pour les ordinateurs et à la fois fluides pour les téléphones mobiles. Cela dit, il faut garder en tête que si notre infolettre contient trop de contenu ou n&#8217;est pas bien pensée, nous risquons de perdre 27% (ou plus) de nos acheteurs potentiels. Voici quelques trucs afin de bonifier l&#8217;expérience mobile (et ordinateur) :</p>
<ul>
<li>Définir un concept principal</li>
<li>Penser à transmettre de l&#8217;information épurée et pertinente à propos de ce concept afin de ne pas perdre l&#8217;intérêt de l&#8217;utilisateur</li>
<li>Se limiter à deux colonnes de contenu</li>
<li>Limiter l&#8217;ajout de liens ou sujets superflus créant des distractions pouvant éloigner l&#8217;attention du lecteur</li>
<li>Utiliser CSS3 pour bonifier l&#8217;expérience mobile</li>
</ul>
<p><strong><span style="font-size: small;"><span style="line-height: 24px;">Est-ce que vos infolettres sont optimisées pour les téléphones mobiles? </span></span></strong></p>
<img src="http://feeds.feedburner.com/~r/axialdev/~4/n_Efpjpi_F8" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>https://www.axialdev.com/blogue/2012/05/adapter-infolettre-pour-laffichage-mobile/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		<feedburner:origLink>https://www.axialdev.com/blogue/2012/05/adapter-infolettre-pour-laffichage-mobile/</feedburner:origLink></item>
		<item>
		<title>Un pool mobile au Gala Reconnaissance Estrie</title>
		<link>http://feedproxy.google.com/~r/axialdev/~3/l917J80SaRc/</link>
		<comments>https://www.axialdev.com/blogue/2012/04/pool-mobile-gala-reconnaissance-estrie/#comments</comments>
		<pubDate>Tue, 24 Apr 2012 14:11:54 +0000</pubDate>
		<dc:creator>Alice Allary</dc:creator>
				<category><![CDATA[Général]]></category>
		<category><![CDATA[Marketing Internet]]></category>
		<category><![CDATA[Réalisation]]></category>
		<category><![CDATA[Site Web mobile]]></category>
		<category><![CDATA[creation site web mobile]]></category>
		<category><![CDATA[mobile]]></category>
		<category><![CDATA[réalisations]]></category>
		<category><![CDATA[site mobile]]></category>

		<guid isPermaLink="false">http://www.axialdev.com/blogue/?p=1641</guid>
		<description><![CDATA[C&#8217;est le 20 avril dernier qu&#8217;avait lieu la 26e édition du Gala Reconnaissance Estrie soulignant l’excellence des entreprises estriennes. En 2011, Axial Développement était repartie avec le trophée de «la petite entreprise de l’année» et cette année, nous avons eu &#8230; <a class="more-link" href="https://www.axialdev.com/blogue/2012/04/pool-mobile-gala-reconnaissance-estrie/">Continuer la lecture <span class="meta-nav">&#8594;</span></a>]]></description>
			<content:encoded><![CDATA[<div class="tweetmeme_button" style="float: right; margin-left: 10px;">
			<a href="http://api.tweetmeme.com/share?url=https%3A%2F%2Fwww.axialdev.com%2Fblogue%2F2012%2F04%2Fpool-mobile-gala-reconnaissance-estrie%2F"><br />
				<img src="http://api.tweetmeme.com/imagebutton.gif?url=https%3A%2F%2Fwww.axialdev.com%2Fblogue%2F2012%2F04%2Fpool-mobile-gala-reconnaissance-estrie%2F&amp;source=axialdev&amp;style=normal&amp;service=bit.ly&amp;b=2" height="61" width="50" /><br />
			</a>
		</div>
<p>C&#8217;est le 20 avril dernier qu&#8217;avait lieu la 26e édition du <a href="http://www.galareconnaissanceestrie.com/" target="_blank">Gala Reconnaissance Estrie</a> soulignant l’excellence des entreprises estriennes.</p>
<p>En 2011, Axial Développement était repartie avec le <a href="http://www.axialdev.com/blogue/2011/04/axial-developpement-gagnante-d%E2%80%99un-prix-au-gala-reconnaissance-estrie/" target="_blank">trophée de «la petite entreprise de l’année»</a> et cette année, nous avons eu la chance de commanditer l’événement en créant un «pool mobile» à l’occasion du Gala.</p>
<p>Au cours de la soirée, les invités ont été amenés à participer à <strong>un «pool» des gagnants.</strong></p>
<p><strong></strong> Pour les 3 dernières catégories de votes, ils ont été invités à scanner un code QR à partir de leur téléphone intelligent afin d&#8217;inscrire leurs prédictions sur un site mobile conçu par Axial Développement.</p>
<p><a href="http://www.axialdev.com/blogue/wp-content/uploads/2012/04/pool-mobile.png"><img class="size-medium wp-image-1664 aligncenter" title="pool-mobile" src="http://www.axialdev.com/blogue/wp-content/uploads/2012/04/pool-mobile-200x300.png" alt="" width="200" height="300" /></a><br />
Au fur et à mesure que les gagnants étaient nommés, le nombre d’invités dans le pool a diminué jusqu&#8217;à ce qu&#8217;il n&#8217;y ait qu’un grand gagnant. Ce dernier ayant obtenu les 3 bonnes réponses.</p>
<p>Un <a href="http://www.ekomobi.com" target="_blank">site Web mobile Ekomobi</a> a été offert à ce grand gagnant ainsi qu&#8217;à 2 participants choisis aléatoirement parmi les invités qui avaient eu 2 bonnes réponses sur 3.</p>
<p>Un «pool» comme celui-ci permet de créer de l’interaction avec le public dans un événement.  Au Gala Reconnaissance Estrie, le public y a très bien répondu et en a fait un succès.  Ce qui confirme que le mobile permet énormément de créativité et qu&#8217;il faut saisir les opportunités de faire les choses différemment!</p>
<p><iframe src="http://www.youtube.com/embed/CG7hf41X3iQ" frameborder="0" width="560" height="315"></iframe></p>
<p><strong>Vous désirez organiser un «pool » lors de votre prochain événement? </strong><strong>Vous avez une idée dont vous voudriez nous parler?</strong></p>
<p><strong>Contactez-nous!</strong></p>
<img src="http://feeds.feedburner.com/~r/axialdev/~4/l917J80SaRc" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>https://www.axialdev.com/blogue/2012/04/pool-mobile-gala-reconnaissance-estrie/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		<feedburner:origLink>https://www.axialdev.com/blogue/2012/04/pool-mobile-gala-reconnaissance-estrie/</feedburner:origLink></item>
		<item>
		<title>Petit rappel : Ce qu’il faut savoir sur la loi C-28 (ou la loi anti-pourriel)</title>
		<link>http://feedproxy.google.com/~r/axialdev/~3/mQyFOnNbKuE/</link>
		<comments>https://www.axialdev.com/blogue/2012/04/loi-c-28/#comments</comments>
		<pubDate>Thu, 19 Apr 2012 17:28:18 +0000</pubDate>
		<dc:creator>eve</dc:creator>
				<category><![CDATA[Général]]></category>
		<category><![CDATA[infolettres]]></category>
		<category><![CDATA[loi anti-pourriel]]></category>
		<category><![CDATA[loi c-28]]></category>

		<guid isPermaLink="false">http://www.axialdev.com/blogue/?p=1628</guid>
		<description><![CDATA[La loi C-28 devant entrée en vigueur cette année, voici un petit rappel concernant ce que vous devez savoir à ce sujet. Avant de faire l’envoi d’un message électronique, assurez-vous : Que chaque personne qui se trouve sur votre liste &#8230; <a class="more-link" href="https://www.axialdev.com/blogue/2012/04/loi-c-28/">Continuer la lecture <span class="meta-nav">&#8594;</span></a>]]></description>
			<content:encoded><![CDATA[<div class="tweetmeme_button" style="float: right; margin-left: 10px;">
			<a href="http://api.tweetmeme.com/share?url=https%3A%2F%2Fwww.axialdev.com%2Fblogue%2F2012%2F04%2Floi-c-28%2F"><br />
				<img src="http://api.tweetmeme.com/imagebutton.gif?url=https%3A%2F%2Fwww.axialdev.com%2Fblogue%2F2012%2F04%2Floi-c-28%2F&amp;source=axialdev&amp;style=normal&amp;service=bit.ly&amp;b=2" height="61" width="50" /><br />
			</a>
		</div>
<p><a href="http://www.axialdev.com/blogue/wp-content/uploads/2012/04/Image-loi-c-281.jpg"><img class="alignleft size-medium wp-image-1639" title="Image loi c-28" src="http://www.axialdev.com/blogue/wp-content/uploads/2012/04/Image-loi-c-281-300x261.jpg" alt="" width="300" height="261" /></a><del></del>La loi C-28 devant entrée en vigueur cette année, voici un petit rappel concernant ce que vous devez savoir à ce sujet.</p>
<p>Avant de faire l’envoi d’un message électronique, assurez-vous :</p>
<ul>
<li>Que chaque personne qui se trouve sur votre liste d’envoi a préalablement accepté de recevoir votre message (il est recommandé de conserver cette confirmation dans vos dossiers électroniques par précaution);</li>
<li>Que l’option de désabonnement et vos coordonnées sont présentes dans votre message;</li>
<li>Que le titre de votre message correspond exactement au contenu proposé.</li>
</ul>
<p>Que ce soit par courriel, message texte, messagerie instantanée ou via les réseaux sociaux, il est désormais interdit à toute entreprise ou individu de faire l’envoi de messages électroniques commerciaux à une personne avec laquelle aucune relation d’affaires ou relation privée n’est en cours, à moins de détenir son consentement formel. Ces éléments doivent être pris au sérieux, car les amendes peuvent osciller entre 200 $ et 1 million de dollars pour les individus et aller jusqu’à 10 millions de dollars pour les entreprises.</p>
<p>Il y a cependant des exceptions à la règle. En effet, l’envoi de messages commerciaux à un tiers est permis :</p>
<ul>
<li>Lorsqu’une relation d’affaires est en cours depuis 6 mois et moins pour les demandes d’information ou de prix;</li>
<li>Lorsqu’une relation d’affaires est en cours depuis 24 mois et moins pour une personne ayant fait l’achat d’un produit ou d’un service de l’expéditeur;</li>
<li>Si, par exemple, une personne vous remet sa carte d’affaires ou son adresse courriel lors d’une soirée et qu’elle ne spécifie pas qu’elle ne désire pas recevoir de messages commerciaux de votre part.</li>
</ul>
<p>Gardez toujours en tête qu’il est important que ces messages soient pertinents pour la personne visée par l’envoi.</p>
<p>Sachez que pour les clients actifs et inactifs avec qui vous avez une relation d’affaires, une période de 3 ans après l’entrée en vigueur de la loi c-28 est prévue pour vous permettre de faire l’envoi de formulaire de consentement.</p>
<p>Si vous désirez avoir de plus amples informations sur la manière de faire des envois légaux ou trouver des solutions pour vous protéger contre d’éventuelles menaces, vous pouvez consulter le <a href="http://www.combattrelepourriel.gc.ca" target="_blank">site Web</a> mis en ligne par le Gouvernement du Canada à cet effet.</p>
<img src="http://feeds.feedburner.com/~r/axialdev/~4/mQyFOnNbKuE" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>https://www.axialdev.com/blogue/2012/04/loi-c-28/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		<feedburner:origLink>https://www.axialdev.com/blogue/2012/04/loi-c-28/</feedburner:origLink></item>
		<item>
		<title>Compte-rendu de la saga Oasis de Lassonde dans une infographie signée Axial</title>
		<link>http://feedproxy.google.com/~r/axialdev/~3/s_A3JCKl7v0/</link>
		<comments>https://www.axialdev.com/blogue/2012/04/compte-rendu-de-la-saga-oasis/#comments</comments>
		<pubDate>Fri, 13 Apr 2012 19:10:38 +0000</pubDate>
		<dc:creator>Axial Developpement</dc:creator>
				<category><![CDATA[Facebook]]></category>
		<category><![CDATA[Général]]></category>
		<category><![CDATA[Marketing Internet]]></category>
		<category><![CDATA[Réseaux sociaux]]></category>
		<category><![CDATA[facebook]]></category>
		<category><![CDATA[médias sociaux]]></category>
		<category><![CDATA[Page Facebook]]></category>

		<guid isPermaLink="false">http://www.axialdev.com/blogue/?p=1623</guid>
		<description><![CDATA[La jus Oasis de Lassonde dans la tourmente des réseaux sociaux : Une infographie représentant un compte-rendu de la journée du 4 avril dernier.  Signée Axial Développement. Qu&#8217;en pensez-vous?]]></description>
			<content:encoded><![CDATA[<div class="tweetmeme_button" style="float: right; margin-left: 10px;">
			<a href="http://api.tweetmeme.com/share?url=https%3A%2F%2Fwww.axialdev.com%2Fblogue%2F2012%2F04%2Fcompte-rendu-de-la-saga-oasis%2F"><br />
				<img src="http://api.tweetmeme.com/imagebutton.gif?url=https%3A%2F%2Fwww.axialdev.com%2Fblogue%2F2012%2F04%2Fcompte-rendu-de-la-saga-oasis%2F&amp;source=axialdev&amp;style=normal&amp;service=bit.ly&amp;b=2" height="61" width="50" /><br />
			</a>
		</div>
<p>La jus Oasis de Lassonde dans la tourmente des réseaux sociaux : Une infographie représentant un compte-rendu de la journée du 4 avril dernier.  Signée Axial Développement.</p>
<p><a href="http://www.axialdev.com/blogue/wp-content/uploads/2012/04/Axial-Infographic-Lassonde.jpg"><img class="alignnone size-full wp-image-1624" title="Axial-Infographic-Lassonde-Oasis" src="http://www.axialdev.com/blogue/wp-content/uploads/2012/04/Axial-Infographic-Lassonde.jpg" alt="Axial-Infographic-Lassonde-Oasis" width="1002" height="1002" /></a></p>
<p>Qu&#8217;en pensez-vous?</p>
<img src="http://feeds.feedburner.com/~r/axialdev/~4/s_A3JCKl7v0" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>https://www.axialdev.com/blogue/2012/04/compte-rendu-de-la-saga-oasis/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		<feedburner:origLink>https://www.axialdev.com/blogue/2012/04/compte-rendu-de-la-saga-oasis/</feedburner:origLink></item>
		<item>
		<title>Un site mobile en jQuery, comment?</title>
		<link>http://feedproxy.google.com/~r/axialdev/~3/02BSA98iw20/</link>
		<comments>https://www.axialdev.com/blogue/2012/04/un-site-mobile-en-jquery-comment/#comments</comments>
		<pubDate>Thu, 12 Apr 2012 15:33:50 +0000</pubDate>
		<dc:creator>Pierre-Luc Ayotte</dc:creator>
				<category><![CDATA[Création sites Internet]]></category>
		<category><![CDATA[Sites Web mobile]]></category>
		<category><![CDATA[Tutoriels]]></category>
		<category><![CDATA[jquery]]></category>
		<category><![CDATA[jquery mobile]]></category>
		<category><![CDATA[mobile]]></category>
		<category><![CDATA[site]]></category>
		<category><![CDATA[site mobile]]></category>

		<guid isPermaLink="false">http://www.axialdev.com/blogue/?p=1594</guid>
		<description><![CDATA[Récemment, nous avons publié un article mentionnant la réussite de l&#8217;un de nos partenaires : le CLD de la MRC Memphrémagog – Tourisme qui a été couronné grand gagnant aux Grands Prix du tourisme Desjardins des Cantons-de-l’Est grâce à son &#8230; <a class="more-link" href="https://www.axialdev.com/blogue/2012/04/un-site-mobile-en-jquery-comment/">Continuer la lecture <span class="meta-nav">&#8594;</span></a>]]></description>
			<content:encoded><![CDATA[<div class="tweetmeme_button" style="float: right; margin-left: 10px;">
			<a href="http://api.tweetmeme.com/share?url=https%3A%2F%2Fwww.axialdev.com%2Fblogue%2F2012%2F04%2Fun-site-mobile-en-jquery-comment%2F"><br />
				<img src="http://api.tweetmeme.com/imagebutton.gif?url=https%3A%2F%2Fwww.axialdev.com%2Fblogue%2F2012%2F04%2Fun-site-mobile-en-jquery-comment%2F&amp;source=axialdev&amp;style=normal&amp;service=bit.ly&amp;b=2" height="61" width="50" /><br />
			</a>
		</div>
<p>Récemment, nous avons publié un article mentionnant la réussite de l&#8217;un de nos partenaires : <a href="http://www.tourisme-memphremagog.com/" target="_blank">le CLD de la MRC Memphrémagog – Tourisme</a> qui a été couronné grand gagnant aux Grands Prix du tourisme Desjardins des Cantons-de-l’Est grâce à son site Web mobile.  Ils ont remporté ce prix grâce, entres autres,  à l’aspect innovateur de la version mobile de leur site Web.</p>
<p>Une version mobile devient un incontournable dans votre positionnement Web.  Il est important d&#8217;y réfléchir pour bénéficier du marché lucratif des mobinautes! Soyez actifs et créatifs et comme le CLD de la MRC Memphrémagog – Tourisme démarquez-vous!</p>
<p><span id="more-1594"></span></p>
<h3>Mais un site mobile, comment c&#8217;est fait?</h3>
<p>De la même façon qu&#8217;un site Web, mais pensé différemment! Commençons par la base, la structure <em>HTML</em>. Nous créons une page simple, avec peu de contenu et un titre de page.</p>
<pre class="brush: html; gutter: true; first-line: 1">&lt;!DOCTYPE html&gt;
&lt;html&gt;
	&lt;head&gt;
		&lt;title&gt;&lt;/title&gt;
		&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
		&lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
	&lt;/head&gt;
	&lt;body&gt;
	&lt;header&gt;
			&lt;nav&gt;
				&lt;ul&gt;
					&lt;li&gt;Services&lt;/li&gt;
					&lt;li&gt;Produits&lt;/li&gt;
					&lt;li&gt;Mobilité&lt;/li&gt;
				&lt;/ul&gt;
			&lt;/nav&gt;
		&lt;/header&gt;

		&lt;div&gt;
			&lt;h1&gt;Nos services&lt;/h1&gt;
			&lt;p&gt;La qualité de nos projets est le résultat d'une collaboration entre nos clients et notre équipe de professionnels.  Notre équipe, composée de stratèges, de communicateurs, de graphistes, d'intégrateurs multimédias et de programmeurs, vous soutient de l'élaboration à l'implantation de vos projets. L'expertise, le savoir-faire et la qualité des membres de notre équipe sont des éléments essentiels qui font notre succès et celui de nos clients.&lt;/p&gt;
		&lt;/div&gt;

		&lt;footer&gt;
			&lt;h2&gt;Copyright 2012 Axial Développement&lt;/h2&gt;
		&lt;/footer&gt;
	&lt;/body&gt;
&lt;/html&gt;</pre>
<p>Ensuite, on commence par ajouter dans le header les fichiers jQuery requis pour faire fonctionner jQuery mobile avec notre site.</p>
<pre class="brush: html; gutter: true; first-line: 1">&lt;!-- le conteneur de notre page --&gt;
&lt;div id="services" data-role="page"&gt;

&lt;!-- notre menu de navigation --&gt;
&lt;header data-role="header"&gt;

&lt;!-- le contenu de notre page --&gt;
&lt;div data-role="content"&gt;

&lt;!-- le footer de la page --&gt;
&lt;footer data-role="footer"&gt;</pre>
<p>On doit créer notre menu pour obtenir une liste de liens. Ceci va transformer nos <em>LI</em> en boutons cliquables, tous sur une ligne.</p>
<pre class="brush: actionscript3; gutter: true; first-line: 1">&lt;nav data-role="navbar"&gt;</pre>
<p>Pour ajouter du contenu utile à notre page, on peut tout simplement créer un bloc qu&#8217;on pourra par la suite séparer en 3 colonnes. Ceci pourrait nous servir à obtenir plusieurs listes sur la même rangée. Les classes qu&#8217;on ajoute à nos blocs permettent à jQuery mobile de déterminer s&#8217;il doit les transformer d&#8217;une façon ou d&#8217;une autre.</p>
<pre class="brush: html; gutter: true; first-line: 1">&lt;div class="ui-grid-b"&gt;
	&lt;div class="ui-block-a"&gt;Services 1&lt;/div&gt;
	&lt;div class="ui-block-b"&gt;Services 2&lt;/div&gt;
	&lt;div class="ui-block-c"&gt;Services 3&lt;/div&gt;
&lt;/div&gt;</pre>
<p>jQuery mobile nous permet aussi de créer plusieurs sortes de boutons. De simples liens peuvent être utilisés et seront automatiquement transformés  en boutons.</p>
<pre class="brush: html; gutter: true; first-line: 1">&lt;a href="http://axialdev.com" target="_blank" data-role="button" data-inline="true"&gt;Axialdev&lt;/a&gt;
&lt;a href="http://ekomobi.com" target="_blank" data-role="button" data-inline="true"&gt;Ekomobi&lt;/a&gt;</pre>
<p>D&#8217;autres types de boutons peuvent servir à d&#8217;autres usages. Un peu comme les boutons ci-haut, c&#8217;est un groupe de boutons et la seule différence étant le <em>data-type=&nbsp;&raquo;horizontal&nbsp;&raquo; </em>qui met les 3 boutons groupés.</p>
<pre class="brush: html; gutter: true; first-line: 1">&lt;p data-role="controlgroup" data-mini="true" data-type="horizontal"&gt;
	&lt;a href="#parfait" data-role="button"&gt;Parfait&lt;/a&gt;
	&lt;a href="#moyen" data-role="button"&gt;Moyen&lt;/a&gt;
	&lt;a href="#pastropmal" data-role="button"&gt;Pas trop mal!&lt;/a&gt;
&lt;/p&gt;</pre>
<p>Maintenant, note site serait bien mieux si l&#8217;on ajoutait des liens sur le menu de navigation tout en haut! Évidemment, on ne veut pas que la page rafraîchisse, c&#8217;est beaucoup plus fluide et ça fait plus &laquo;&nbsp;2012&#8243; si on peut s&#8217;exprimer ainsi. Voici donc les divers changements apportés au HTML pour y arriver :</p>
<pre class="brush: html; gutter: true; first-line: 1">&lt;!-- le menu doit pointer vers les bonnes pages --&gt;
&lt;li&gt;&lt;a href="#services"&gt;Services&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#produits"&gt;Produits&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="#mobilite"&gt;Mobilité&lt;/a&gt;&lt;/li&gt;

&lt;!-- on doit créer les autres pages, en ajoutant des div data-role="page" avec les bons ID (voir les # associés aux liens dans le menu) --&gt;
&lt;div id="services" data-role="page"&gt;
&lt;div id="produits" data-role="page"&gt;
&lt;div id="mobilite" data-role="page"&gt;</pre>
<p>Vous comprendrez qu&#8217;on doit remplir chaque <em>div</em> qui possède un <em>ID</em> différent avec du contenu différent. Pour ma part, j&#8217;ai dupliqué le contenu qu&#8217;on avait et j&#8217;ai seulement changé le titre et la liste. Pour finir, on se doit de mettre un peu de beauté dans ce site! Voici donc l&#8217;application des différents thèmes sur les éléments du site.</p>
<pre class="brush: html; gutter: true; first-line: 1">&lt;div id="services" data-role="page" data-theme="b"&gt;
&lt;div id="produits" data-role="page" data-theme="a"&gt;
&lt;div id="mobilite" data-role="page" data-theme="c"&gt;</pre>
<p>Il est possible d&#8217;ajouter un style différent pour chaque bouton, groupe de boutons, conteneur et pied-de-page/haut-de-page. Et donc, voici le code complet de mon site au final :</p>
<pre class="brush: html; gutter: true; first-line: 1">&lt;!DOCTYPE html&gt;
&lt;html&gt;
	&lt;head&gt;
		&lt;title&gt;Mon site Web jQuery mobile&lt;/title&gt;
		&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
		&lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
		&lt;link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" /&gt;
		&lt;script src="http://code.jquery.com/jquery-1.6.4.min.js"&gt;&lt;/script&gt;
		&lt;script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"&gt;&lt;/script&gt;
	&lt;/head&gt;
	&lt;body&gt;
		&lt;div id="services" data-role="page" data-theme="b"&gt;
			&lt;header data-role="header" data-position="fixed"&gt;
				&lt;nav data-role="navbar"&gt;
					&lt;ul&gt;
						&lt;li&gt;&lt;a href="#services" class="ui-btn-active"&gt;Services&lt;/a&gt;&lt;/li&gt;
						&lt;li&gt;&lt;a href="#produits"&gt;Produits&lt;/a&gt;&lt;/li&gt;
						&lt;li&gt;&lt;a href="#mobilite"&gt;Mobilité&lt;/a&gt;&lt;/li&gt;
					&lt;/ul&gt;
				&lt;/nav&gt;
			&lt;/header&gt;

			&lt;div data-role="content"&gt;
				&lt;h1&gt;Nos services&lt;/h1&gt;
				&lt;p&gt;La qualité de nos projets est le résultat d'une collaboration entre nos clients et notre équipe de professionnels.  Notre équipe, composée de stratèges, de communicateurs, de graphistes, d'intégrateurs multimédias et de programmeurs, vous soutient de l'élaboration à l'implantation de vos projets. L'expertise, le savoir-faire et la qualité des membres de notre équipe sont des éléments essentiels qui font notre succès et celui de nos clients.&lt;/p&gt;
				&lt;div class="ui-grid-b"&gt;
					&lt;div class="ui-block-a"&gt;Services 1&lt;/div&gt;
					&lt;div class="ui-block-b"&gt;Services 2&lt;/div&gt;
					&lt;div class="ui-block-c"&gt;Services 3&lt;/div&gt;
				&lt;/div&gt;

				&lt;h2&gt;Vous pouvez nous contacter via ces sites Web : &lt;/h2&gt;

				&lt;p&gt;
					&lt;a href="http://axialdev.com" target="_blank" data-role="button" data-inline="true"&gt;Axialdev&lt;/a&gt;
					&lt;a href="http://ekomobi.com" target="_blank" data-role="button" data-inline="true"&gt;Ekomobi&lt;/a&gt;
				&lt;/p&gt;

				&lt;h3&gt;Comment trouvez-vous notre site?&lt;/h3&gt;

				&lt;p data-role="controlgroup" data-mini="true" data-type="horizontal"&gt;
					&lt;a href="#parfait" data-role="button"&gt;Parfait&lt;/a&gt;
					&lt;a href="#moyen" data-role="button"&gt;Moyen&lt;/a&gt;
					&lt;a href="#pastropmal" data-role="button"&gt;Pas trop mal!&lt;/a&gt;
				&lt;/p&gt;
			&lt;/div&gt;

			&lt;footer data-role="footer" data-position="fixed" data-id="myfooter"&gt;
				&lt;h2&gt;Copyright 2012 Axial Développement&lt;/h2&gt;
			&lt;/footer&gt;
		&lt;/div&gt;

		&lt;div id="produits" data-role="page" data-theme="a"&gt;
			&lt;header data-role="header" data-position="fixed"&gt;
				&lt;nav data-role="navbar"&gt;
					&lt;ul&gt;
						&lt;li&gt;&lt;a href="#services" data-direction="reverse"&gt;Services&lt;/a&gt;&lt;/li&gt;
						&lt;li&gt;&lt;a href="#produits" class="ui-btn-active"&gt;Produits&lt;/a&gt;&lt;/li&gt;
						&lt;li&gt;&lt;a href="#mobilite"&gt;Mobilité&lt;/a&gt;&lt;/li&gt;
					&lt;/ul&gt;
				&lt;/nav&gt;
			&lt;/header&gt;

			&lt;div data-role="content"&gt;
				&lt;h1&gt;Nos produits&lt;/h1&gt;
				&lt;p&gt;La qualité de nos projets est le résultat d'une collaboration entre nos clients et notre équipe de professionnels.  Notre équipe, composée de stratèges, de communicateurs, de graphistes, d'intégrateurs multimédias et de programmeurs, vous soutient de l'élaboration à l'implantation de vos projets. L'expertise, le savoir-faire et la qualité des membres de notre équipe sont des éléments essentiels qui font notre succès et celui de nos clients.&lt;/p&gt;
				&lt;div class="ui-grid-b"&gt;
					&lt;div class="ui-block-a"&gt;Produits 1&lt;/div&gt;
					&lt;div class="ui-block-b"&gt;Produits 2&lt;/div&gt;
					&lt;div class="ui-block-c"&gt;Produits 3&lt;/div&gt;
				&lt;/div&gt;

				&lt;h2&gt;Vous pouvez nous contacter via ces sites Web : &lt;/h2&gt;

				&lt;p&gt;
					&lt;a href="http://axialdev.com" target="_blank" data-role="button" data-inline="true"&gt;Axialdev&lt;/a&gt;
					&lt;a href="http://ekomobi.com" target="_blank" data-role="button" data-inline="true"&gt;Ekomobi&lt;/a&gt;
				&lt;/p&gt;

				&lt;h3&gt;Comment trouvez-vous notre site?&lt;/h3&gt;

				&lt;p data-role="controlgroup" data-mini="true" data-type="horizontal"&gt;
					&lt;a href="#parfait" data-role="button"&gt;Parfait&lt;/a&gt;
					&lt;a href="#moyen" data-role="button"&gt;Moyen&lt;/a&gt;
					&lt;a href="#pastropmal" data-role="button"&gt;Pas trop mal!&lt;/a&gt;
				&lt;/p&gt;
			&lt;/div&gt;

			&lt;footer data-role="footer" data-position="fixed" data-id="myfooter"&gt;
				&lt;h2&gt;Copyright 2012 Axial Développement&lt;/h2&gt;
			&lt;/footer&gt;
		&lt;/div&gt;

		&lt;div id="mobilite" data-role="page" data-theme="c"&gt;
			&lt;header data-role="header" data-position="fixed"&gt;
				&lt;nav data-role="navbar"&gt;
					&lt;ul&gt;
						&lt;li&gt;&lt;a href="#services" data-direction="reverse"&gt;Services&lt;/a&gt;&lt;/li&gt;
						&lt;li&gt;&lt;a href="#produits" data-direction="reverse"&gt;Produits&lt;/a&gt;&lt;/li&gt;
						&lt;li&gt;&lt;a href="#mobilite" class="ui-btn-active"&gt;Mobilité&lt;/a&gt;&lt;/li&gt;
					&lt;/ul&gt;
				&lt;/nav&gt;
			&lt;/header&gt;

			&lt;div data-role="content"&gt;
				&lt;h1&gt;Notre mobilité&lt;/h1&gt;
				&lt;p&gt;La qualité de nos projets est le résultat d'une collaboration entre nos clients et notre équipe de professionnels.  Notre équipe, composée de stratèges, de communicateurs, de graphistes, d'intégrateurs multimédias et de programmeurs, vous soutient de l'élaboration à l'implantation de vos projets. L'expertise, le savoir-faire et la qualité des membres de notre équipe sont des éléments essentiels qui font notre succès et celui de nos clients.&lt;/p&gt;
				&lt;div class="ui-grid-b"&gt;
					&lt;div class="ui-block-a"&gt;Mobilité 1&lt;/div&gt;
					&lt;div class="ui-block-b"&gt;Mobilité 2&lt;/div&gt;
					&lt;div class="ui-block-c"&gt;Mobilité 3&lt;/div&gt;
				&lt;/div&gt;

				&lt;h2&gt;Vous pouvez nous contacter via ces sites Web : &lt;/h2&gt;

				&lt;p&gt;
					&lt;a href="http://axialdev.com" target="_blank" data-role="button" data-inline="true"&gt;Axialdev&lt;/a&gt;
					&lt;a href="http://ekomobi.com" target="_blank" data-role="button" data-inline="true"&gt;Ekomobi&lt;/a&gt;
				&lt;/p&gt;

				&lt;h3&gt;Comment trouvez-vous notre site?&lt;/h3&gt;

				&lt;p data-role="controlgroup" data-mini="true" data-type="horizontal"&gt;
					&lt;a href="#parfait" data-role="button"&gt;Parfait&lt;/a&gt;
					&lt;a href="#moyen" data-role="button"&gt;Moyen&lt;/a&gt;
					&lt;a href="#pastropmal" data-role="button"&gt;Pas trop mal!&lt;/a&gt;
				&lt;/p&gt;
			&lt;/div&gt;

			&lt;footer data-role="footer" data-position="fixed" data-id="myfooter"&gt;
				&lt;h2&gt;Copyright 2012 Axial Développement&lt;/h2&gt;
			&lt;/footer&gt;
		&lt;/div&gt;
	&lt;/body&gt;
&lt;/html&gt;</pre>
<hr />
<h2><a href="http://www.axialdev.com/blogue/wp-content/uploads/2012/04/demo1.png"><img class="alignleft size-full wp-image-1608" title="demo" src="http://www.axialdev.com/blogue/wp-content/uploads/2012/04/demo1.png" alt="" width="16" height="16" /></a><a href="http://www.axialdev.com/demo/jquerymobile.html" target="_blank">Voir le démo en ligne</a></h2>
<hr />
<img src="http://feeds.feedburner.com/~r/axialdev/~4/02BSA98iw20" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>https://www.axialdev.com/blogue/2012/04/un-site-mobile-en-jquery-comment/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		<feedburner:origLink>https://www.axialdev.com/blogue/2012/04/un-site-mobile-en-jquery-comment/</feedburner:origLink></item>
		<item>
		<title>Les jus Oasis (Lassonde) dans la tourmente des réseaux sociaux</title>
		<link>http://feedproxy.google.com/~r/axialdev/~3/Wzil9pXMjdk/</link>
		<comments>https://www.axialdev.com/blogue/2012/04/les-jus-oasis-lassonde-dans-la-tourmente-des-reseaux-sociaux/#comments</comments>
		<pubDate>Sat, 07 Apr 2012 19:37:40 +0000</pubDate>
		<dc:creator>Philippe Colling</dc:creator>
				<category><![CDATA[Marketing Internet]]></category>
		<category><![CDATA[Réseaux sociaux]]></category>

		<guid isPermaLink="false">http://www.axialdev.com/blogue/?p=1560</guid>
		<description><![CDATA[La chronologie des évènements&#8230; 10h33, samedi 7 avril 2012 Cyberpresse publie un article intitulé « Pas touche au mot ‘oasis’ ». On y apprend qu’une petite entreprise québécoise « Olivia’s Oasis » (chiffre d’affaires de 250K) à des déboires en justice &#8230; <a class="more-link" href="https://www.axialdev.com/blogue/2012/04/les-jus-oasis-lassonde-dans-la-tourmente-des-reseaux-sociaux/">Continuer la lecture <span class="meta-nav">&#8594;</span></a>]]></description>
			<content:encoded><![CDATA[<div class="tweetmeme_button" style="float: right; margin-left: 10px;">
			<a href="http://api.tweetmeme.com/share?url=https%3A%2F%2Fwww.axialdev.com%2Fblogue%2F2012%2F04%2Fles-jus-oasis-lassonde-dans-la-tourmente-des-reseaux-sociaux%2F"><br />
				<img src="http://api.tweetmeme.com/imagebutton.gif?url=https%3A%2F%2Fwww.axialdev.com%2Fblogue%2F2012%2F04%2Fles-jus-oasis-lassonde-dans-la-tourmente-des-reseaux-sociaux%2F&amp;source=axialdev&amp;style=normal&amp;service=bit.ly&amp;b=2" height="61" width="50" /><br />
			</a>
		</div>
<p><strong>La chronologie des évènements&#8230;</strong></p>
<p><strong>10h33, samedi 7 avril 2012</strong><br />
Cyberpresse publie un <a href="http://www.cyberpresse.ca/actualites/quebec-canada/justice-et-faits-divers/201204/07/01-4513285-pas-touche-au-mot-oasis.php?utm_categorieinterne=trafficdrivers&amp;utm_contenuinterne=cyberpresse_BO2_quebec_canada_178_accueil_POS1" target="_blank">article</a> intitulé « Pas touche au mot ‘oasis’ ». On y apprend qu’une petite entreprise québécoise « Olivia’s Oasis » (chiffre d’affaires de 250K) à des déboires en justice avec les Industries Lassonde (ventes de 760M en 2011) depuis presque 7 ans. L’objet du litige : l’utilisation du mot « oasis ». Lassonde veut protéger sa marque de commerce « jus Oasis » en demandant à la petite entreprise de ne plus utiliser le mot « oasis » et de lui reverser les profits de la vente de ses savons. Oui, Olivia’s Oasis ne produit pas de jus mais des savons.</p>
<p>L’article nous apprend qu’Olivia’s Oasis gagne son combat contre « Goliath ». Par contre, la Cour d’appel déboute la petite entreprise sur le remboursement de ses frais judiciaires par Lassonde. Olivia’s Oasis doit donc trouver le moyen de rembourser les 80 000$ qui ont été nécessaire pour se défendre.</p>
<p><strong>10h36</strong><br />
La <a title="Page Facebook Oasis" href="https://www.facebook.com/oasiscanada" target="_blank">page Facebook</a> des jus « Oasis » est prise d’assaut par les internautes québécois…</p>
<p><span id="more-1560"></span><br />
&#8230;qui y signalent leur mécontentement avec véhémence!</p>
<div id="attachment_1562" class="wp-caption alignleft" style="width: 282px"><a href="http://www.axialdev.com/blogue/wp-content/uploads/2012/04/FB-Oasis-2.png"><img class="size-medium wp-image-1562" title="Page Facebook Oasis" src="http://www.axialdev.com/blogue/wp-content/uploads/2012/04/FB-Oasis-2-272x300.png" alt="Page Facebook Oasis" width="272" height="300" /></a><p class="wp-caption-text">Page Facebook des jus Oasis</p></div>
<p><strong>11h55</strong><br />
Le réseau social Twitter est également investi par les contestataires. Mais ce n’est qu’un début…</p>
<p>De nombreuses personnes influentes sur Twitter se mêlent à la contestation dont Guy A Lepage qui est suivi par plus de 104 600 personnes sur le réseau…</p>
<div id="attachment_1566" class="wp-caption alignnone" style="width: 398px"><a href="http://www.axialdev.com/blogue/wp-content/uploads/2012/04/guy-a-lepage.png"><img class="size-full wp-image-1566 " title="Tweet de Guy A Lepage" src="http://www.axialdev.com/blogue/wp-content/uploads/2012/04/guy-a-lepage.png" alt="Tweet de Guy A Lepage" width="388" height="493" /></a><p class="wp-caption-text">Tweet de Guy A Lepage</p></div>
<p>La <a href="https://www.facebook.com/pages/Olivias-Oasis/15339240028" target="_blank">page Facebook d’Olivia’s Oasis</a> qui comptait moins d&#8217;une centaine de fans en début de matinée reçoit de nombreux commentaires de soutien. La page est aimée par 115  personnes.</p>
<p><strong>13h00</strong></p>
<ul>
<li>Presque 100 commentaires négatifs sur la page des jus Oasis.</li>
<li>Twitter est en feu : #oasis est en 4ème position dans les tendances de discussion sur Twitter au Québec</li>
<li>La page Facebook d’Olivia’s Oasis est maintenant aimée par 144 personnes.</li>
<li>L’article de Cyberpresse a été recommandé par plus de 1000 personnes sur Facebook et 314 sur Twitter</li>
</ul>
<div id="attachment_1564" class="wp-caption alignleft" style="width: 991px"><a href="http://www.axialdev.com/blogue/wp-content/uploads/2012/04/cyberpresse.png"><img class="size-full wp-image-1564" title="Article sur Cyberpresse" src="http://www.axialdev.com/blogue/wp-content/uploads/2012/04/cyberpresse.png" alt="Article sur Cyberpresse" width="981" height="793" /></a><p class="wp-caption-text">Article sur Cyberpresse</p></div>
<p><strong>14h00</strong></p>
<ul>
<li>#oasis est en 3ème position dans les tendances de discussion sur Twitter au Québec</li>
<li>La page Facebook d’Olivia’s Oasis est aimée par 183 personnes.</li>
</ul>
<p><strong>14h30</strong></p>
<ul>
<li>#oasis est en 1ère position dans les tendances de discussion sur Twitter au Québec</li>
<li>La page Facebook d’Olivia’s Oasis est aimée par 193 personnes.</li>
</ul>
<p>Les internautes continuent à tirer à boulets rouges sur la page Facebook des jus Oasis. Les intentions de boycott des produits Lassonde font partis de la majorité des commentaires :</p>
<ul>
<li>« <em>Je m&#8217;engage à boycotter les produits Lassonde à partir d&#8217;aujourd&#8217;hui, et à inciter mes proches à en faire autant</em>. »</li>
<li>« <em>Il y a beaucoup de compétition dans le marché des jus, faire suer une petite entreprise comme vous l&#8217;avez fait n&#8217;aura pas été une grande victoire d&#8217;après ce que je peux voir, jamais plus je ne ferai l&#8217;achat de vos produits félicitations.</em> »</li>
<li>« <em>J&#8217;ai grandis avec Oasis, j&#8217;aurais bien aimé que notre histoire se continue!! On repassera &#8230;.pas! Ici on boycott aussi!</em> »</li>
<li>« <em>Ca me fait penser a Claude Robinson versus Cinar&#8230;tres triste. Et Vive les jus McCain.</em> »</li>
</ul>
<p><strong>15h00</strong></p>
<ul>
<li>La page Facebook d’Olivia’s Oasis est aimée par 201 personnes.</li>
<li>La page Facebook de Tropicana Canada (compétiteur des jus Lassonde) compte 99 133 fans contre moins de 99 000  en début de matinée&#8230;(coïncidence?)</li>
<li>Aucune réaction des Industries Lassonde sur la page Facebook des jus Oasis</li>
</ul>
<p><strong>15h30</strong></p>
<ul>
<li>La page Facebook d’Olivia’s Oasis est aimée par 211 personnes.</li>
<li>La page Facebook de Tropicana Canada (compétiteur des jus Lassonde) compte 99 162 fans (toujours une coïncidence?)</li>
<li>La page Facebook des jus Oasis ne dérougie pas de commentaires négatifs appelant le boycott de la marque</li>
</ul>
<p><strong>16h15</strong></p>
<ul>
<li>Un journaliste de La Presse appelle chez nous suite à la publication de cet article. Quand on dit que l&#8217;information se diffuse à la vitesse de la lumière sur le Web, nous n&#8217;en sommes pas loin!</li>
</ul>
<p><strong>17h05</strong></p>
<ul>
<li>Les Industries Lassonde publient une nouvelle sur la page Facebook des jus Oasis pour expliquer leur point de vue sur l&#8217;affaire</li>
<li>Vraisemblablement, cela ne suffit pas à calmer la contestation. La réponse de Lassonde génère des dizaines de commentaires encore très négatifs</li>
</ul>
<div id="attachment_1582" class="wp-caption alignnone" style="width: 430px"><a href="http://www.axialdev.com/blogue/wp-content/uploads/2012/04/reponse.png"><img class="size-full wp-image-1582 " title="Réponse de Lassonde" src="http://www.axialdev.com/blogue/wp-content/uploads/2012/04/reponse.png" alt="Réponse de Lassonde" width="420" height="532" /></a><p class="wp-caption-text">Réponse de Lassonde</p></div>
<p><strong>20h15</strong></p>
<ul>
<li>Lassonde plie sous le mouvement de contestation et décide de rembourser les frais juridiques encourus par Olivia&#8217;s Oasis!</li>
<li>Prés de 510 personnes aiment la page Facebook d&#8217;Olivias&#8217;s Oasis</li>
<li>106 personnes aiment la nouvelle des jus Oasis. Un quitte ou double gagnant pour Lassonde.</li>
<li>Un autre exemple du changement de paradigme amené par les réseaux sociaux</li>
</ul>
<div id="attachment_1587" class="wp-caption alignnone" style="width: 429px"><a href="http://www.axialdev.com/blogue/wp-content/uploads/2012/04/oasis-3.png"><img class="size-full wp-image-1587 " title="Les jus Oasis capitulent" src="http://www.axialdev.com/blogue/wp-content/uploads/2012/04/oasis-3.png" alt="Les jus Oasis capitulent" width="419" height="298" /></a><p class="wp-caption-text">Les jus Oasis capitulent</p></div>
<h1>Conclusions de l&#8217;histoire</h1>
<p><strong></strong>Il est encore tôt pour évaluer l’impact de cette journée sur la marque des jus Oasis, si impact réel il y aura.</p>
<p>Chose certaine, avec plus de 410 nouveaux fans sur leur page Facebook en quelques heures, Olivia’s Oasis sort gagnante de cette mésaventure. Reste à cette PME de profiter de cette vague de sympathie en utilisant avec bon escient sa page Facebook qu’elle n’a pas animé depuis près d’un an.</p>
<p>Cette journée est à marquer d&#8217;une pierre blanche : c&#8217;est certainement une des premières fois que le Web québécois a réagi aussi rapidement et avec autant de véhémence à une affaire de ce type.</p>
<p>Finalement, espérons que cette mésaventure de Lassonde deviendra un cas d&#8217;étude et une référence pour les prochaines marques qui décideront d&#8217;établir une présence dans le merveilleux et palpitant monde des réseaux sociaux.</p>
<img src="http://feeds.feedburner.com/~r/axialdev/~4/Wzil9pXMjdk" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>https://www.axialdev.com/blogue/2012/04/les-jus-oasis-lassonde-dans-la-tourmente-des-reseaux-sociaux/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		<feedburner:origLink>https://www.axialdev.com/blogue/2012/04/les-jus-oasis-lassonde-dans-la-tourmente-des-reseaux-sociaux/</feedburner:origLink></item>
		<item>
		<title>Mise à jour Google Venice : Recherches locales à l’avant-plan</title>
		<link>http://feedproxy.google.com/~r/axialdev/~3/gM6Ch3e9ztQ/</link>
		<comments>https://www.axialdev.com/blogue/2012/04/mise-a-jour-google-venice-recherches-locales-a-lavant-plan/#comments</comments>
		<pubDate>Tue, 03 Apr 2012 16:28:52 +0000</pubDate>
		<dc:creator>David Gagnon Marchand</dc:creator>
				<category><![CDATA[Marketing Internet]]></category>
		<category><![CDATA[Optimisation engins de recherche]]></category>
		<category><![CDATA[Planification stratégique]]></category>
		<category><![CDATA[Trucs et astuces]]></category>

		<guid isPermaLink="false">http://www.axialdev.com/blogue/?p=1542</guid>
		<description><![CDATA[La fin du mois de Février 2012 a été marquée par une série de mises à jour de la part de notre bon ami Google. En plus de mettre à jour Panda, le système actuel, d’importants changements on été apportés &#8230; <a class="more-link" href="https://www.axialdev.com/blogue/2012/04/mise-a-jour-google-venice-recherches-locales-a-lavant-plan/">Continuer la lecture <span class="meta-nav">&#8594;</span></a>]]></description>
			<content:encoded><![CDATA[<div class="tweetmeme_button" style="float: right; margin-left: 10px;">
			<a href="http://api.tweetmeme.com/share?url=https%3A%2F%2Fwww.axialdev.com%2Fblogue%2F2012%2F04%2Fmise-a-jour-google-venice-recherches-locales-a-lavant-plan%2F"><br />
				<img src="http://api.tweetmeme.com/imagebutton.gif?url=https%3A%2F%2Fwww.axialdev.com%2Fblogue%2F2012%2F04%2Fmise-a-jour-google-venice-recherches-locales-a-lavant-plan%2F&amp;source=axialdev&amp;style=normal&amp;service=bit.ly&amp;b=2" height="61" width="50" /><br />
			</a>
		</div>
<p>La fin du mois de Février 2012 a été marquée par une série de mises à jour de la part de notre bon ami Google. En plus de mettre à jour Panda, le système actuel, d’importants changements on été apportés aux recherches connexes, aux «sitelinks», à l’interface et bien plus encore.</p>
<p>Cela dit, le plus important de la mise à jour est maintenant connu sous le nom de code Venice.<span id="more-1542"></span></p>
<h2>Qu’est-ce que Venice?</h2>
<p>Essentiellement, Venice est une mise à jour de l’algorithme mettant à l’avant-plan les recherches locales.</p>
<blockquote><p>«<strong> Improvements to ranking for local search results.</strong> [launch codename “Venice”] This improvement improves the triggering of Local Universal results by relying more on the ranking of our main search results as a signal.<br />
<strong>Improved local results.</strong> We launched a new system to find results from a user’s city more reliably. Now we’re better able to detect when both queries and documents are local to the user. »</p></blockquote>
<p>Référence : <a href="http://insidesearch.blogspot.ca/2012/02/search-quality-highlights-40-changes.html">http://insidesearch.blogspot.ca/2012/02/search-quality-highlights-40-changes.html</a></p>
<p>Pour les utilisateurs, cela se traduit en une plus grande facilité d’obtenir des services ou de l’information venant d’entreprises locales.</p>
<p>Pour les entreprises, cela ajoute des raisons de plus d’être présentes sur le Web.</p>
<ul>
<li>Visibilité Web locale augmentée</li>
<li>Opportunité d’être présent dans des recherches exécutées par des acheteurs recherchant des services locaux</li>
</ul>
<p>Avant, il était difficile pour une petite entreprise de se positionner pour des mots-clés très populaires et de rivaliser avec les plus grosses entreprises. Maintenant, il est envisageable de pouvoir bien se placer pour des mots-clés plus généraux grâce au facteur localisation.</p>
<h2>En tant qu’utilisateur, je fais comment?</h2>
<p>Rien de plus facile! Pour les utilisateurs canadiens, l’option se retrouve dans le haut de la barre de gauche après avoir fait une recherche.</p>
<p><img class="alignnone size-full wp-image-1515" title="test3" src="http://www.axialdev.com/blogue/wp-content/uploads/2012/03/test3.jpg" alt="Recherche Google Canada" width="259" height="399" /></p>
<p>Pour l’instant, la fonctionnalité a l’air mieux implantée dans Google USA. Voici deux exemples qui parlent d’eux-mêmes : une recherche à Las Vegas et une à Washington, toutes deux avec la même expression. Remarquez bien la différence entre les résultats normaux et ceux de Google Maps. Les images parlent d’elles-mêmes.</p>
<p><a href="http://www.axialdev.com/blogue/wp-content/uploads/2012/03/test2.jpg"><img class="alignnone size-large wp-image-1516" title="test2" src="http://www.axialdev.com/blogue/wp-content/uploads/2012/03/test2-1024x643.jpg" alt="Recherche Google USA" width="640" height="401" /></a></p>
<p><a href="http://www.axialdev.com/blogue/wp-content/uploads/2012/03/test1.jpg"><img class="alignnone size-large wp-image-1517" title="test1" src="http://www.axialdev.com/blogue/wp-content/uploads/2012/03/test1-1024x665.jpg" alt="Recherche Google USA" width="640" height="415" /></a></p>
<h2>Comment prendre avantage de Venice?</h2>
<h3>Bonifier votre optimisation pour les moteurs de recherche avec le ou les secteurs desservis.</h3>
<p>La première étape par laquelle il faut passer afin de profiter pleinement de Venice est de consolider le référencement organique de notre site (ou en faire, si vous n’en avez pas). Il est inconcevable de pouvoir bien se positionner dans les résultats de recherche Google si les pratiques de base du référencement ne sont pas appliquées.</p>
<p>Votre but est donc de tester et modifier vos <strong>titres de pages</strong>, <strong>META description</strong>, <strong>META keywords</strong> et <strong>URLs</strong> en ajoutant des locations afin de vérifier si vos service ou vos produits sont susceptibles de profiter de la mise à jour.</p>
<p>Voici un excellent exemple de page optimisée :</p>
<p><a href="http://www.axialdev.com/blogue/wp-content/uploads/2012/03/result-vancoucer.jpg"><img class="alignnone size-full wp-image-1518" title="result-vancoucer" src="http://www.axialdev.com/blogue/wp-content/uploads/2012/03/result-vancoucer.jpg" alt="Exemple résultat optimisé" width="519" height="71" /></a></p>
<h3>Avoir du contenu local plus pertinent que ses compétiteurs (contenu localisé et/ou pages de destinations)</h3>
<p>Plus que jamais, la porte est grande ouverte pour les entreprises qui désirent promouvoir leur service auprès de leurs clientèles locales. Les gagnants de Venice seront ceux qui réussiront à avoir du contenu localisé tout en évitant d’essuyer les représailles de Panda pour du contenu dupliqué. Le moment est plus que propice pour faire des tests avec des pages de destinations spécifiques à un endroit avec des mots-clés plus généraux ou encore des pages de témoignages pour des produits localisés.</p>
<p>L’important est d’agir maintenant afin de cerner la bonne stratégie à adopter, celle avec laquelle votre compagnie sera gagnante.</p>
<h3>Inscrire votre compagnie dans Google Adresses</h3>
<p>Effectivement, il est <strong><span style="text-decoration: underline;">primordial</span></strong> pour les entreprises d&#8217;être présentes dans Google Adresses. Avez-vous remarqué que, selon vos recherches, vous obtenez parfois un grand nombre de résultats qui y proviennent et que ces résultats vont se placer <strong>avant</strong> les résultats normaux?</p>
<p>Voici les facteurs importants qui permettront à votre entreprise de bien se plancer dans les résultats de Google Adresses :</p>
<ul>
<li>Votre adresse d’entreprise se retrouve dans la ville choisie dans la barre de gauche par l’utilisateur</li>
<li><strong>Votre page Google Adresses est confirmée</strong></li>
<li>Le PageRank de votre site d’entreprise</li>
<li>Le nombre de témoignages</li>
<li>Votre entreprise est dans les bonnes catégories</li>
<li>Le nom de l’entreprise est pertinent à l’expression ou service recherché</li>
</ul>
<h3>Utiliser les micro-formats pour les adresses (<a href="http://schema-creator.org/">http://schema-creator.org</a>)</h3>
<p>Cette pratique passe généralement en dessous des radars. Utiliser les micro-formats pour structurer l’information d’un site Web est très utile.</p>
<ul>
<li>La structure est reconnue et approuvée par Google, Bing et Yahoo en tant que norme de structuration de contenu</li>
<li>Permet aux engins de recherche de comprendre le contenu présenté sans avoir besoin de l’interpréter</li>
<li>Aucune différence pour les utilisateurs</li>
</ul>
<p>Comme cette façon de structurer l’information fera partie intégrale de HTML5 et du Web futur, il est important de commencer à l’utiliser maintenant.</p>
<p><a href="http://www.axialdev.com/blogue/wp-content/uploads/2012/03/schema.jpg"><img class="alignnone size-full wp-image-1520" title="schema" src="http://www.axialdev.com/blogue/wp-content/uploads/2012/03/schema.jpg" alt="+box schema" width="553" height="306" /></a></p>
<p>Plus spécifiquement, les micro-formats pour les adresses augmentent les chances d’obtenir quelque chose de plus dans la liste de résultats Google.</p>
<h3>Ajouter un fichier KML et un GeoSitemap à votre site Web (<a href="http://www.geositemapgenerator.com/">http://www.geositemapgenerator.com</a>)</h3>
<p>Un fichier KML est utilisé pour déterminer l’endroit exact de votre compagnie. Le site <a href="http://www.geositemapgenerator.com/">http://www.geositemapgenerator.com</a> est un outil très utile qui permet de générer ces deux fichiers. Ensuite, il fournit des indications claires sur la façon de les installer.</p>
<p>Ceci est très utile si votre entreprise possède plusieurs locations.</p>
<h2>Pour conclure</h2>
<p>La direction vers laquelle Google se dirige marque décidément un point tournant dans le monde du SEO et ajoute une multitude de possibilités pour les sites de petites et moyennes entreprises.</p>
<p>Est-ce que votre site est déjà optimisé pour les recherches locales? S&#8217;il ne l&#8217;est pas, quelle stratégie allez vous mettre de l&#8217;avant pour y arriver?</p>
<img src="http://feeds.feedburner.com/~r/axialdev/~4/gM6Ch3e9ztQ" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>https://www.axialdev.com/blogue/2012/04/mise-a-jour-google-venice-recherches-locales-a-lavant-plan/feed/</wfw:commentRss>
		<slash:comments>4</slash:comments>
		<feedburner:origLink>https://www.axialdev.com/blogue/2012/04/mise-a-jour-google-venice-recherches-locales-a-lavant-plan/</feedburner:origLink></item>
	</channel>
</rss>

