Veille Web - VW Rennes - référencement, développement et réflexion C''est un blog de veille sur le référencement, la technique, le webcontent, les réseaux sociaux de Mathias Standaert, Nolwenn Blouin, Gregory Lesage et Erwan Tanguy 2013-02-19T23:06:41+01:00 Veille Web Team urn:md5:430cd6b22409ddd20786d16ffdd99245 Dotclear [Veille] Excellent tuto pour créer un thème wordpress urn:md5:8cc96e2fd5dc3f53fcceb37b04141b56 2011-05-12T10:03:00+02:00 2011-05-12T09:07:17+02:00 Matias Grenn Tutoriels tutorielwordpress <p>Comme souvent chez Grafik Art, un excellent tutoriel en vidéo pour <a hreflang="fr" href="http://www.grafikart.fr/tutoriels/wordpress-creer-theme-156">créer un thème pour wordpress</a>.</p> <p>C'est assez rare pour le souligner, car sur veille-web nous ne mentionnons que rarement les articles des autres blogs, non pas parce que nous pensons mieux faire mais parce que souvent ça brouille l'information et que nous essayons d'apporter un autre regard. L'excellent tutoriel en vidéo de Grafik Art vaut le coup pour <a hreflang="fr" href="http://www.grafikart.fr/tutoriels/wordpress-creer-theme-156">créer un thème pour wordpress</a>.</p> <object width="480" height="299"><param name="movie" value="http://www.dailymotion.com/swf/video/xi17sh?theme=none" /><param name="allowFullScreen" value="true" /><param name="allowScriptAccess" value="always" /><param name="wmode" value="transparent" /><embed type="application/x-shockwave-flash" src="http://www.dailymotion.com/swf/video/xi17sh?theme=none" wmode="transparent" allowfullscreen="true" allowscriptaccess="always" width="480" height="299"><img style="float:none" id="kweepersvids-video" title="Add to kweeper" src="chrome://kweeper/content/kweeper.gif" videoid="video" videotype="3" /></object><br /><a href="http://www.dailymotion.com/video/xi17sh_creer-un-site-wordpress-depuis-un-template-html_lifestyle" target="_blank">Créer un site Wordpress depuis un template HTML</a> <em>par <a href="http://www.dailymotion.com/Grafikart" target="_blank">Grafikart</a></em> http://www.veille-web.fr/post/2011/05/12/%5BVeille%5D-Excellent-tuto-pour-cr%C3%A9er-un-th%C3%A8me-wordpress#comment-form http://www.veille-web.fr/feed/atom/comments/97 Récupérer un podcast multi pistes avec jQuery urn:md5:b09fc7a97fd9327a0d31ed75660b14e0 2011-05-12T09:20:00+02:00 2011-05-13T07:07:24+02:00 Matias Grenn JQuery ajaxdewplayerjQueryplaylistxml <p>En complément et en amélioration du précédant article traitant du sujet (voir "<a hreflang="fr" href="http://www.veille-web.fr/post/2011/05/12/post/Recuperer-un-podcast-pour-lecture-en-ligne">Récupérer un podcast pour lecture en ligne</a>"), je vous propose de récupérer plusieurs fichiers mp3 d'un podcast avec jQuery.</p> <p>Dans l'article traitant déjà de ce sujet (voir "<a hreflang="fr" href="http://www.veille-web.fr/post/Recuperer-un-podcast-pour-lecture-en-ligne">Récupérer un podcast pour lecture en ligne</a>"), j'avais proposé une méthode propre au rss récupérer. Dans ce tutoriel, nous allons tenter un code qui s'adapte à tous les podcasts (s'ils respectent bien l'écriture RSS).</p> <p>Nous prenons un flus RSS : http://www.sprechgesang.net/spip.php?page=backend&amp;id_rubrique=53. Pour pouvoir récupérer sur votre hébergement ce flux et l'utiliser avec l'ajax, il vous faut créer un clone de cette page en PHP. Pour cela je vous invite à relire le <a hreflang="fr" href="http://www.veille-web.fr/post/Recuperer-un-podcast-pour-lecture-en-ligne">premier article qui l'explique</a>.</p> <p>Nous allons ensuite utiliser <a hreflang="fr" href="http://www.alsacreations.fr/dewplayer.html">dewplayer </a>pour lire les fichiers mp3. Vous le téléchargez, le décompressez et le mettez soit à la racine de votre site ou dans un dossier (à vous de voir).</p> <h3>Première méthode : un lecteur par fichier avec dewplayer mini par exemple</h3> <p>C'est assez simple à réaliser mais pas très lisible si votre podcast propose des dizaines de fichiers !</p> <p>Tout d'abord nous allons récupérer les données :</p> <pre>jQuery.ajax({<br />&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;type: "GET",<br />&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;url: "votreClonePHPDuRSS.php",<br />&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;dataType: "xml",<br />&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;//async : false,<br />&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;success: parseXml<br />&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; });</pre><p>Ensuite nous allons parser le XML et réaliser un each() pour récupérer les différentes données (ici le titre et l'url du mp3).</p> <pre>function parseXml(xml) {<br />&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; jQuery(xml).find("item").each(function() {<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var url = jQuery(this).find('enclosure').attr('url');<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; jQuery("#lecteur").append('&lt;h3&gt;' +<br />&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; jQuery(this).find("title").text() +<br />&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; '/feed/atom/amplt/h3ampgtampltobject_typequotapplication/x_shockwave_flashquot_dataquothttp//wwwveille_webfr/post/2011/05/12/dewplayer_mini_mp3_.swf' +<br />&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; url +<br />&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; '/feed/atom/quot_widthquot160quot_heightquot20quot_idquotdewplayer_miniquotampgtampltparam_namequotwmodequot_valuequottransparentquot_/ampgtampltparam_namequotmoviequot_valuequotdewplayer_mini_mp3_.swf' +<br />&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; url +<br />&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; '" /&gt;&lt;/object&gt;');<br />&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; jQuery("#loading").hide();<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; });<br />}</pre><p>Dans votre code HTML vous proposez deux divs :</p> <pre>&lt;div id="loading"&gt;en cours de chargement&lt;/div&gt;<br />&lt;div id="lecteur"&gt;&lt;/div&gt;</pre><p>La première div disparaîtra dès que la seconde sera chargée.</p> <p>On obtient une liste des titres proposés avec un lecture sous chaque titre. C'est fonctionnelle mais sans plus.</p> <h3>Seconde méthode : utilisons dewplayer multi</h3> <p>Pour réduire l'espace, nous allons placer tous les mp3 du podcast dans le dewplayer multi et afficher ensuite dans une liste les titres numérotés des fichers mp3.</p> <p>Pour cela nous allons créer, avant de parser le XML, quelques variables : une variable qui va récupérer au fur et à mesure les urls des mp3 ; une autre variable qui va reprendre toutes ces urls ; et enfin une variable pour les numéros des titres (car dans le each le premier titre a la valeur 0).</p> <pre>var html = 'plus';<br />var html2 = '';<br />var num = '';</pre><p>Ensuite on lance le each :</p> <pre>function parseXml(xml) {<br />&nbsp;&nbsp;&nbsp;&nbsp; jQuery(xml).find("item").each(function(index) {<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var url = jQuery(this).find('enclosure').attr('url');<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; if (html === 'plus'){html = '/feed/atom/dewplayer_multi_mp3_.swf' + url;}&nbsp;&nbsp;&nbsp; <br />&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; else {html += '|' + url;}<br />&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; html2 = html;<br />&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; $('#lecteur2 object param.url').val(html2);<br />&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; $('#lecteur2 object#dewplayer-multi').removeAttr('data').attr({ data: html2 });<br />&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; num = index + 1 ;<br />&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; $('ul#url').append('&lt;li&gt;' + num + ' : '+ jQuery(this).find("title").text() + '&lt;/li&gt;');<br />&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; jQuery("#loading").hide();<br />&nbsp;&nbsp;&nbsp; });<br />}</pre> <p>Votre code HTML :</p> <pre>&lt;div id="loading"&gt;en cours de chargement&lt;/div&gt;<br />&lt;div id="lecteur2"&gt;&lt;object type="application/x-shockwave-flash" data="http://www.veille-web.fr/post/2011/05/12/dewplayer-multi.swf?mp3=" width="240" height="20" id="dewplayer-multi"&gt;&lt;param name="wmode" value="transparent" /&gt;&lt;param class="url" name="movie" value="dewplayer-multi.swf?mp3=" /&gt;&lt;/object&gt;&lt;/div&gt;<br />&lt;ul id="url2"&gt;&lt;/ul&gt;</pre><p>L'idée est de changer les valeurs dans le lecteur de dewplayer via jQuery en changeant la valeur du param et le data de l'object. Je donne à la valeur 'html' un mot quelconque pour pour voir différencier la première url des autres qui doivent être précédées d'un '|'. Je rajoute dans la fonction du each l'index, je donne la valeur de l'index+1 à num pour ne pas commencer à 0. Ma playlist est en place !</p> <p>Vous pouvez voir les deux méthodes en ligne avec le code sur le site de <a hreflang="fr" href="http://www.sprechgesang.net/podcast_xml.html">sprechgesang</a>.</p> http://www.veille-web.fr/post/2011/05/12/R%C3%A9cup%C3%A9rer-un-podcast-multi-pistes-avec-jQuery#comment-form http://www.veille-web.fr/feed/atom/comments/96 Spip et jQueryMobile urn:md5:b1f3ba1e8a0eca9f52c7f4a0c6247696 2011-03-31T21:09:00+02:00 2011-04-01T09:52:56+02:00 Matias Grenn Spip ajaxframeworksjQuerymobilespip <p>Il existe bien un plugin spip pour iphone, mais vous avez aussi la possibilité de monter rapidement une version mobile de votre site grâce à <a hreflang="en" href="http://jquerymobile.com/">jQueryMobile</a>. L'avantage de ce presque framework, c'est qu'il est assez simple à monter. Démonstration par l'exemple.</p> <p>Il existe bien un plugin spip pour iphone, mais vous avez aussi la possibilité de monter rapidement une version mobile de votre site grâce à <a hreflang="en" href="http://jquerymobile.com/">jQueryMobile</a>. L'avantage de ce presque framework, c'est qu'il est assez simple à monter. Démonstration par l'exemple.</p> <p>Il faut tout d'abord aller sur le site de jQuery Mobile pour télécharger la <del>dernière </del><a style="text-decoration: line-through;" href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.zip">version</a> dernière <a href="http://code.jquery.com/mobile/1.0a4/jquery.mobile-1.0a4.zip">version</a> (version actuelle encore en développement). Ensuite vous pouvez créer un dossier "mobile" dans le dossier squelette dans lequel vous mettez le dossier "images" et les fichiers .js et .css. La version min est suffisante puisque il me semble préférable de surcharger le css de jQueryMobile par un autre fichier css, ça évite de perdre l'original.</p> <p>Pour commencer nous allons créer la page sommaire mobile. Je l'appelle m_sommaire.html mais vous pouvez l'appeler comme vous voulez. Dans cette page je vais appelez plusieurs éléments :</p> <ul><li>un entête ;</li> <li>les rubriques à la racine du site.</li> </ul> Dans la documentation du site vous trouverez tous les détails et vous pouvez aussi regarder le code source de la démo pour approfondir. Ici je vais juste proposer un exemple simpliste pour vous donner envie d'aller plus loin.<br /><br />Dans la version mobile du site, je vais appeler jquery (soit on récupère celui de spip, soit pour éviter une incompatibilité de version on rajoute dans le dossier mobile la dernière version de jquery) mais je ne charge pas #INSERT_HEAD car je n'ai pas besoin de tous les plugins dans cette version simplifiée. Si vous souhaitez récupérer les avantages de certains plugins à vous de voir.<br /><br />Donc là dans mon head j'insère ses quelques lignes :<br /><blockquote><p>[&lt;link rel="stylesheet"&nbsp; href="http://www.veille-web.fr/post/(#CHEMIN{mobile/jquery.mobile-1.0a3.css})" /&gt;]<br />&lt;script type="text/javascript" src="http://code.jquery.com/jquery-1.5.min.js"&gt;&lt;/script&gt;<br />[&lt;script type="text/javascript" src="http://www.veille-web.fr/post/(#CHEMIN{mobile/jquery.mobile-1.0a3.min.js})"&gt;&lt;/script&gt;]<br />[&lt;link rel="stylesheet"&nbsp; href="http://www.veille-web.fr/post/(#CHEMIN{styles.css})" /&gt;]</p> </blockquote> Je rajoute une feuille de style pour pouvoir éventuellement surcharger le style de jQueryMobile.<br />Dans le body vous devez encadrer votre contenu dans une première div : &lt;div data-role="page" data-theme="b"&gt;...&lt;/div&gt;. Tout ce qui suit sera insérer dans cette div.<br />Le data-theme vous permet de choisir entre plusieurs thèmes (a, b, c, d et e). Pour connaitre les différents rendus des thèmes, aller sur la page <a hreflang="en" href="http://jquerymobile.com/demos/1.0a3/docs/api/themes.html">Themes &amp; swatches</a> sur le site de jQueryMobile.<br /><br />Maintenant on va générer un entête assez basique :<br /><blockquote><p>&lt;div id="jqm-homeheader"&gt;<br />&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; [(#LOGO_SITE_SPIP|image_reduire{300,100}) ]<br />&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; [(#DESCRIPTIF_SITE_SPIP)]<br />&lt;/div&gt;</p> </blockquote>Le menu sera, quant à lui, dans une div : &lt;div data-role="content"&gt;...&lt;/div&gt;.<br /><blockquote><p>&lt;ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="a"&gt;<br />&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;li data-role="list-divider"&gt;Menu&lt;/li&gt;<br />&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;BOUCLE_menu(RUBRIQUES){racine}&gt;<br />&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href="http://www.veille-web.fr/post/spip.php?page=m_rubrique&amp;id_rubrique=#ID_RUBRIQUE"&gt;#TITRE&lt;/a&gt;&lt;/li&gt;<br />&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;/BOUCLE_menu&gt;<br />&nbsp;&lt;/ul&gt;</p> </blockquote>Le premier li génère une barre titre et la boucle fait apparaître le menu des rubriques principales.<br />En plus du data-theme, vous pouvez aussi définir le thème du li barre titre avec data-dividertheme.<br />Dans la boucle, vous remarquerez que je n'ai pas mis #URL_RUBRIQUE mais une url spécifique qui va aller charger en ajax le squelette m_rubrique avec l'id.<br /><br />Voilà le squelette mobile du sommaire réalisée.<br /><br />La page m_rubrique.html va reprendre le même principe que la page rubrique.html, c'est-à-dire une boucle rubrique encadrant toute la page, le même title. On enlève #INSERT_HEAD et rajoute les js et css du jquery mobile.<br />Dans le body on reprend la même première div : &lt;div data-role="page"&gt;...&lt;/div&gt;. L'entête sera par contre simplifié par rapport à la page d'accueil :<br /><blockquote><p>&lt;div data-role="header" data-theme="a"&gt;<br />&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;h1&gt;#TITRE&lt;/h1&gt;<br />&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;a href="http://www.veille-web.fr/post/spip.php?page=m_sommaire" data-icon="home" data-iconpos="notext" data-direction="reverse"&gt;Home&lt;/a&gt;<br />&lt;/div&gt;</p> </blockquote>Nous gardons le titre qui sera visible dans un bandeau entouré de deux lien : un retour en arrière et un retour en page d'accueil. Le premier bouton s'insère automatiquement. Sur le lien Home je force au retour sur la page d'accueil pour pouvoir ainsi retourner à cette page même si j'arrive directement sur la version mobile via un article ou une rubrique.<br /><br />Ensuite nous reprenons la div de contenu &lt;div data-role="content"&gt;...&lt;/div&gt;.&nbsp; Dans cette div nous allons à la fois appeler les sous rubriques éventuelles et les articles.<br /><blockquote><p>&lt;B_ssR&gt;<br />&lt;ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="a"&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;li data-role="list-divider"&gt;Rubriques&lt;/li&gt;<br />&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;BOUCLE_ssR(RUBRIQUES){id_parent}{par date}{inverse}{0,3}&gt;<br />&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;li&gt;<br />&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; [(#LOGO_RUBRIQUE|image_recadre{80,80})]<br />&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &amp;gt;&amp;nbsp;&lt;a href="http://www.veille-web.fr/post/spip.php?page=m_rubrique&amp;id_rubrique=#ID_RUBRIQUE" class="lien"&gt;#TITRE&lt;/a&gt;<br />&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;/li&gt;<br />&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;/BOUCLE_ssR&gt;<br />&lt;/ul&gt;<br />&lt;/B_ssR&gt;<br />&nbsp;&lt;B_articles&gt;<br />&lt;ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="a"&gt;<br />&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;li data-role="list-divider"&gt;Articles&lt;/li&gt;<br />&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;BOUCLE_articles(ARTICLES) {id_rubrique} {par date}{inverse} {pagination}&gt;<br />&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;li&gt;<br />&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; [(#LOGO_ARTICLE|image_recadre{80,80})]<br />&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &amp;gt;&amp;nbsp;<br />&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;a href="http://www.veille-web.fr/post/spip.php?page=m_article&amp;id_article=#ID_ARTICLE" class="lien"&gt;#TITRE&lt;/a&gt;&lt;p&gt;<br />&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;/li&gt;<br />&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;/BOUCLE_articles&gt;<br />&lt;/ul&gt;<br />&lt;/B_articles&gt;</p> </blockquote>Les li list-divider ne sont pas indispensables. Comme vous pouvez le voir, on peut rajouter aussi des images, éviter de dépasser 80px de large ou il vous faudra travailler les css. Par défaut jQueryMobile impose 80px et dispose le texte qui suit à 100px de la gauche. Attention cependant, l'affichage en mode portrait, si vous mettez des images, risque d'être très réduit pour le texte.<br />Comme vous pouvez le voir, il nous faut enfin créer la page m_article.html.<br /><blockquote><p>&lt;div data-role="page"&gt;<br />&nbsp;&nbsp;&nbsp; &lt;div data-role="header" data-theme="a"&gt;<br />&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;a data-icon="arrow-l" data-rel="back" data-theme="a"&gt;Back&lt;/a&gt;<br />&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;h1&gt;#TITRE&lt;/h1&gt;<br />&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;a href="http://www.veille-web.fr/post/spip.php?page=m_rubrique&amp;id_rubrique=#ID_RUBRIQUE" data-icon="home" data-iconpos="notext" data-direction="reverse"&gt;Accueil&lt;/a&gt;<br />&nbsp;&nbsp;&nbsp; &lt;/div&gt;<br />&nbsp;&nbsp;&nbsp; &lt;div data-role="content"&gt;<br />&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; [(#LOGO_ARTICLE|image_reduire{250,0})]<br />&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; [(#TEXTE|image_reduire{250,0})]&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; <br />&nbsp;&nbsp;&nbsp; &lt;/div&gt;<br />&lt;/div&gt;</p> </blockquote>Dans la div du contenu on rajoute juste le logo et le texte de l'article. Il me semble important de limiter la largeur des images. J'ai limité à 250px de large mais je pense que vous pouvez pousser à 300px, voir plus, mais je vous conseille de tester sur des mobiles pour constater.<br />N'oubliez pas de commencer le squelette de la page mobile des articles par un boucle article sinon ça ne fonctionnera pas évidemment.<br /><br />Vous pouvez regarder un exemple sur le site d'une <a hreflang="fr" href="http://operations.theatre.free.fr/spip.php?page=m_sommaire">compagnie de théâtre</a>.<br /><br />A vous de jouer maintenant pour créer des sites mobiles plus complexes tout en restant léger !<br /> http://www.veille-web.fr/post/spip_jquery_mobile#comment-form http://www.veille-web.fr/feed/atom/comments/95 Diaporama simple en jQuery urn:md5:d4f16b8c70f209811e6b986f329df3b2 2011-02-12T22:50:00+01:00 2011-02-20T14:22:10+01:00 Matias Grenn JQuery cssdiaporamajQuerytutoriel Voici un <strong>diaporama </strong>assez simple, qui nécessiterait un travail supplémentaire pour rendre les effets plus subtiles, mais qui a l'avantage d'être très léger avec quelques lignes de <strong>css </strong>et de <a hreflang="en" href="http://jquery.com/"><strong>jQuery</strong></a>. Lors d'une formation sur <a hreflang="en" href="http://jquery.com/"><strong>jQuery</strong></a>, après une suite d'exercices pour se rendre compte par étapes des fonctionnalités et de la simplicité de cette <strong>bibliothèque javascript</strong>, je lance généralement un challenge.<br /><br />Vous trouverez un exemple de diaporama, très améliorable, sur cette url : <a hreflang="fr" href="http://www.erwantanguy.fr/Diaporama-simple-en-jQuery.html">diaporama simple en jQuery</a>, accompagné de quelques explication.<br /><br /><img title="diaporama jquery, fév. 2011" style="float: left; margin: 0 1em 1em 0;" alt="diaporama jquery" src="http://www.veille-web.fr/public/images/.diaporama_m.jpg" /><br /> http://www.veille-web.fr/post/Diaporama-simple-en-jQuery#comment-form http://www.veille-web.fr/feed/atom/comments/93 Récupérer un podcast pour l'écouter en ligne urn:md5:3094df13294e4707945f8ada83dd1e8d 2011-02-08T09:28:00+01:00 2011-03-07T10:27:08+01:00 Matias Grenn Tutoriels ajaxdewplayerjQueryphp En utilisant PHP et JavaScript, nous pouvons récupérer à la volée dans un podcast les données nécessaires pour le mettre en écoute dans un module comme <a hreflang="fr" href="http://www.alsacreations.fr/dewplayer.html">dewplayer</a> (lecteur gratuit de mp3). <p>Pour réaliser notre lecteur de podcast dynamique, il nous faut d'abord rendre le XML lisible, nous prenons en effet un flux extérieur au site dans lequel nous voulons afficher notre <a hreflang="fr" href="http://www.alsacreations.fr/dewplayer.html">dewplayer</a>. Pour que cela fonctionne, il est indispensable que le serveur pense que ce fichier XML se trouve sur notre site. Il existe une parade en PHP pour le faire.</p> <p>Vous devez créer un fichier, par exemple podcast.php, et y mettre le code suivant :</p> <blockquote><p>&lt;?php<br />&nbsp;&nbsp;&nbsp; header('Content-Type: text/xml');<br />&nbsp;&nbsp;&nbsp; print file_get_contents('http://radiofrance-podcast.net/podcast09/rss_10638.xml');<br />?&gt;</p> </blockquote> <p>Pour cet exemple nous avons choisi un podcast de radiofrance.</p> <p>Maintenant si vous ouvrez en ligne votre fichier podcast.php il s'affichera avec le contenu XML du fichier extérieur hébergé sur radiofrance.</p> <p>Pour la suite nous allons passer par jQuery. Nous avons deux méthodes possibles pour y arriver.</p> <p><strong>1. avec l'extension </strong><a style="font-weight: bold;" hreflang="en" href="http://hovinne.com/articles/jfeed-jquery-rss-atom-feed-parser-plugin">jquery.jfeed.pack.js</a><strong>.</strong> La fonction s'appelle ainsi :</p> <blockquote><p>jQuery.getFeed({<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; url: 'http://monsite.com/podcast.php',<br />&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; success: function(feed) {<br />&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; /*jQuery('.titre').append('&lt;a href="http://www.veille-web.fr/post/' <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; + feed.link <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; + '" target="_blank"&gt;' <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; + feed.title <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; + '&lt;/a&gt;'); */<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var html = ''; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; for(var i = 0; i &lt; feed.items.length &amp;&amp; i &lt; 5; i++) { <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var item = feed.items[i];<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; html += '&lt;h4&gt;' <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; + '&lt;a href="http://www.veille-web.fr/post/' <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; + item.link <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; + '"&gt;' <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; + item.title <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; + '&lt;/a&gt;' <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; + '&lt;/h4&gt;';&nbsp; <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; } <br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; jQuery('.item').append(html);<br />&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; }<br />&nbsp;});</p> </blockquote><strong>2. Avec ajax et parseXML.</strong> Nous pouvons aussi utiliser cette méthode : <blockquote><p>jQuery(document).ready(function() {<br />jQuery("#loading").show();<br />&nbsp; jQuery.ajax({<br />&nbsp;&nbsp;&nbsp; type: "GET",<br />&nbsp;&nbsp;&nbsp; url: "http://monsite.com/podcast.php",<br />&nbsp;&nbsp;&nbsp; dataType: "xml",<br />&nbsp;&nbsp;&nbsp; success: parseXml<br />});<br />&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; function parseXml(xml) {<br />jQuery(xml).find("item").each(function() {<br />//find each instance of loc in xml file and wrap it in a link<br />jQuery(".lecteur").append('&lt;h4&gt;'+ jQuery(this).find("title").text() +'/feed/atom/amplt/h4ampgtampltobject_typequotapplication/x_shockwave_flashquot_dataquothttp//monsitecom/dewplayer_mini_mp3_.swf'<br />&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; + jQuery(this).find("guid").text()<br />&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; + '/feed/atom/ampampampshowtime1quot_widthquot160quot_heightquot20quotampgtampltparam_namequotwmodequot_valuequottransparentquot_/ampgtampltparam_namequotmoviequot_valuequothttp//wwwleschampslibresfr/html/dewplayer_mini_mp3_.swf'<br />&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; + jQuery(this).find("guid").text()<br />&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; + '&amp;amp;showtime=1" /&gt;&lt;/object&gt;');<br />jQuery("#loading").hide();<br />&nbsp;});<br />}<br />});</p> </blockquote>Je suppose bien entendu que vous connaissez déjà la syntaxe jQuery, comment on peut ainsi agir sur le DOM et ce que signifie .append(). Personnellement je préfère utiliser la seconde méthode, ce qui explique pourquoi je vous en propose un code complet, mais à vous de voir.<br />Vous pouvez constater le résultat sur cette <a hreflang="fr" href="http://www.leschampslibres.fr/widget/musee.html">page du musée de Bretagne</a>. Je vous laisse chercher par vous même comment limiter la boucle au premier fichier du podcast ou à un nombre précis.<br /><br /> <p> <strong>Code complet d'une page avec un podcast : </strong></p> <blockquote> <pre>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;</pre><pre>&lt;html&gt;</pre><pre>&nbsp;&nbsp;&nbsp; &lt;head&gt;</pre><pre>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;</pre><pre>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;title&gt;Podcast du musée de Bretagne et de France Bleu Armorique&lt;/title&gt;</pre><pre>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"&gt;&lt;/script&gt;</pre><pre>&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;script type="text/javascript"&gt;</pre><pre>&nbsp;&nbsp;&nbsp; </pre><pre>jQuery(document).ready(function() {</pre><pre>jQuery("#loading").show();</pre><pre>&nbsp; jQuery.ajax({</pre><pre>&nbsp;&nbsp;&nbsp; type: "GET",</pre><pre>&nbsp;&nbsp;&nbsp; url: "http://www.leschampslibres.fr/widget/musee.php",</pre><pre>&nbsp;&nbsp;&nbsp; dataType: "xml",</pre><pre>&nbsp;&nbsp;&nbsp; success: parseXml</pre><pre>});</pre><pre>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; function parseXml(xml) {</pre><pre>jQuery(xml).find("item").each(function() {</pre><pre>//find each instance of loc in xml file and wrap it in a link</pre><pre>jQuery(".lecteur").append('&lt;h4&gt;'+ jQuery(this).find("title").text() +'&lt;/h4&gt;&lt;object height="30" width="300" type="application/x-shockwave-flash" data="http://www.leschampslibres.fr/typo3/contrib/flashmedia/player.swf" id="mmswf4d7492b92ce2e" style="visibility: visible;"&gt;&lt;param name="quality" value="high"&gt;&lt;param name="allowScriptAccess" value="sameDomain"&gt;&lt;param name="menu" value="false"&gt;&lt;param name="wmode" value="transparent"&gt;&lt;param name="flashvars" value="soundFile='</pre><pre>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; + jQuery(this).find("guid").text()</pre><pre>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; + '" /&gt;&lt;/object&gt;');</pre><pre>jQuery("#loading").hide();</pre><pre>&nbsp;});</pre><pre>}</pre><pre>});</pre><pre>&lt;/script&gt;</pre><pre>&nbsp;&nbsp;&nbsp; &lt;/head&gt;</pre><pre>&nbsp;&nbsp;&nbsp; &lt;body&gt;</pre><pre>&lt;div class="lecteur"&gt;</pre><pre>&lt;/div&gt;</pre><pre>&nbsp;&nbsp;&nbsp; &lt;/body&gt;</pre><pre>&lt;/html&gt;</pre></blockquote> http://www.veille-web.fr/post/Recuperer-un-podcast-pour-lecture-en-ligne#comment-form http://www.veille-web.fr/feed/atom/comments/92 A propos de la veille urn:md5:63c19462fe884fa349608217acbfd975 2010-12-03T09:47:00+01:00 2012-08-24T12:21:52+02:00 Matias Grenn veille communicationfacebookgoogleliensmédiaPageRankréférencementréseauxréseaux sociauxSEOsociauxtoiletwitterveillewebwebcontent <p>Depuis quelques années, la veille dans le web prend de l'ampleur et s'ouvrent aux besoins des non spécialistes des technologies. Depuis que je navigue sur le web, je fais de la veille car très vite le web en soi n'était pas suffisant. Je n'y trouvais pas d'intérêt en tant que simple consommateur, j'ai très rapidement ressenti le besoin d'en être un acteur, certes modeste mais acteur.</p> Pour être acteur du web, il faut se tenir au courant de ce qui s'y fait, comment ça se fait et surtout comment adapter des pratiques à nos besoins. L'étape suivante étant de partager à notre tour notre pratique. Le web est ainsi un espace de veille par essence (je vais vite) basé sur des notions de partage.<br /><br />Aujourd'hui, la veille se professionnalise fortement, ce qui est tout à fait logique par rapport à l'évolution des supports que le web permet. Les entreprises ont de plus en plus besoin d'une veille sectorisée, en temps réel (des outils comme twitter l'impose doucement), aussi bien sur les nouveautés que sur la concurrence.<br />Il y a autant de veille que d'entreprises, que d'internautes même. Les professionnels du web pratiquent tous plus ou moins une veille sur des points précis et généralement de manière assez chaotique (ce qui ne lui enlève pas une certaine efficacité lié au hasard des liens - ô sérendipité !).<br />La veille désirée par une entreprise demande quant à elle une rigueur plus stricte, des champs de recherches et des outils avec des filtres calibrés. La sérendipité d'une veille personnelle ne serait pas rentable, même si parfois elle permettrait aux entreprises de décaler un peu leur vision de leur domaine pour le remettre en perspective.<br /><br />quelques liens :<br />- <a hreflang="fr" href="http://www.cetim.fr/cetim/Actualites/En-France/A-la-une/L-intelligence-economique-les-bonnes-pratiques-pour-les-PME">L’intelligence économique : les bonnes pratiques pour les PME</a><br />- <a hreflang="fr" href="http://blog.voyelle.me/tag/veille">Les articles du blog de voyelle sur la veille</a><br /><br />Pour rappel, le site veille-web.fr met en ligne des articles, des tutoriels, mais vous pouvez suivre aussi une veille quotidienne en vous inscrivant sur le groupe <a hreflang="fr" href="http://groups.google.fr/group/veille-web">http://groups.google.fr/group/veille-web</a>, car il me semble assez prétentieux de rédiger un article à chaque fois que je trouve un lien intéressant vers un autre article, je trouve cela redondant, à moins d'avoir un autre point de vue à défendre évidemment !<br /> http://www.veille-web.fr/post/2010/12/03/Veille-principes%2C-outils%2C-etc#comment-form http://www.veille-web.fr/feed/atom/comments/91 iSpip - réflexion et plus sur la version mobile urn:md5:f61bd8334529af38e686c1c2e32bc89d 2010-11-01T11:22:00+01:00 2010-11-03T21:59:25+01:00 Matias Grenn Spip cssgooglepluginréférencementSEOspiptutorielURL Créer une feuille de style css spécifique aux mobiles ou un squelette différent, quelques réflexions et quelques propositions techniques pour modifier un peu le plugin iSpip. <p>Pour qui navigue régulièrement sur le web avec son mobile en 3G, la possibilité d'afficher des pages dans un format simplifier et adapter au téléphone permet d'accéder plus rapidement au contenu sans avoir à supporter le chargement de "décorations" finalement assez superflues.</p> <h3>La version fullcss</h3> <p>Vous pouvez déjà lire cet article assez complet sur le sujet : "<a hreflang="fr" href="http://www.willdurand.fr/une-version-iphone-et-mobile-de-son-site-tout-en-css/">Une version iPhone et mobile de son site tout en CSS</a>".<br />Le principe est simple, il existe une ligne de code dans le head pour appeler les css en fonction de la destination (screen, print...) et pour le mobile cela se présente ainsi :</p> <blockquote><p>&lt;link media<span class="sy0">=</span><span class="st0">"handheld"</span> href<span class="sy0">=</span><span class="st0">"handheld.css"</span> type<span class="sy0">=</span><span class="st0">"text/css"</span> rel<span class="sy0">=</span><span class="st0">"stylesheet"</span> /<span class="sy0">&gt;</span></p> </blockquote>Vous remarquerez cependant que pour les iPhones, cela ne fonctionne pas car ils ne reconnaissent pas le critère media "handheld". L'article nommé ci-dessus préconise un appel supplémentaire pour les iPhones :<br /><blockquote><p>&lt;!-- iPhone<span class="sy0">,</span> iPod --<span class="sy0">&gt;</span><br /> &lt;!--<span class="br0">[</span>if !IE<span class="br0">]</span><span class="sy0">&gt;</span>--<span class="sy0">&gt;</span><br /> &nbsp; &lt;link rel<span class="sy0">=</span><span class="st0">"stylesheet"</span> type<span class="sy0">=</span><span class="st0">"text/css"</span> href<span class="sy0">=</span><span class="st0">"handheld.css"</span> media<span class="sy0">=</span><span class="st0">"only screen and (max-device-width: 480px)"</span> /<span class="sy0">&gt;</span><br /> &lt;!--&lt;!<span class="br0">[</span>endif<span class="br0">]</span>--<span class="sy0">&gt;</span></p> </blockquote><span class="sy0">Il définit ainsi une exception pour le critère screen avec une largeur maximum.<br />Je trouve que le fullcss a des avantages non négligeables. Ce n'est pas compliqué à mettre en place et c'est propre puisque l'url reste la même, aucun risque de duplicate content. Le défaut qui reste pour moi problématique c'est qu'il est parfois nécessaire de vouloir l'affichage classique du site (définit par le critère screen) et là, on se retrouve bloqué.<br />C'est sans doute une des raisons qui ont poussé les développeurs à proposer des plugins qui génèrent un template (ou un suqelette chez spip) spécifique pour pouvoir basculer de l'un à l'autre selon les besoins. <p>Voir aussi : Design de poche : <a hreflang="fr" href="http://www.pompage.net/pompe/petitsecrans/">Porter votre site web au petit écran</a> et aussi le forum sur alsacréations <a hreflang="fr" href="http://forum.alsacreations.com/topic-27-14758-1-Creer-un-site-pour-telephone-portable.html">Créer un site pour téléphone portable.</a></p> </span><h3><span class="sy0">Les templates (squelettes) spécifiques</span></h3> <p><span class="sy0">Le plus connu des templates spécifiques est sans conteste celui de WordPress (<a hreflang="fr" href="http://www.presse-citron.net/un-plugin-mobile-pour-wordpress">Un plugin mobile génial pour Wordpress</a> chez Presse Citron). Au-delà du design simplifié, principe que l'on retrouve plus ou moins dans tous les plugins du genre, j'apprécie le bouton en bas de page pour rebasculer sur le site normal (même s'il arrive que sur certains sites cela ne fonctionne pas).<br />Vous trouverez pour Dotclear le plugin dc2iphone que nous utilisons sur ce site qui est un template à part entière et qui s'installe ensuite avec un plugin (voir <a hreflang="fr" href="http://blog.guillaumebizet.fr/post/2009/04/01/Th%C3%A8me-iPhone-pour-Dotclear2-:-dc2iPhone">Thème iPhone pour Dotclear2 : dc2iPhone</a>).<br /></span></p> <h4><span class="sy0">Pour <a href="http://www.spip.net" hreflang="fr">spip</a> un plugin est en cours de développement mais déjà utilisable : <strong><a href="http://www.spip-contrib.net/Squelette-iSPIP" hreflang="fr">iSpip</a>&nbsp;</strong>(lire aussi cet <a href="http://www.abelpoucet.com/Plugin-iSPIP.html" hreflang="fr">article sur ispip</a>).<br /></span></h4> <p><span class="sy0">ISpip est un plugin assez simple qui une fois installé propose un squelette spécifique visible par sa propre URL : spip.php?page=ispip (personnellement je passe par le htaccess pour renommer l'url en ispip.html par exemple). Le squelette est très léger et donc se charge rapidement. Il propose un accès par rubrique et, si vous avez installé le plugin <a href="http://www.spip-contrib.net/Agenda-2-0" hreflang="fr">Agenda</a>, vous propose aussi un accès direct aux événements, ce qui peut s'avérer très pratique pour certains sites.<br />Mon premier sentiment positif passé, j'ai cherché comment proposer à partir d'un article (car souvent on va proposer un lien direct sur twitter par exemple) une possibilité d'affichage pour mobile. Ce n'est hélas pas possible sans une intervention dans le code. Le fichier qui affiche les article est nommé dans le dossier du plugin ispip : ispip-article.html. Si vous appelez l'article en faisant une URL comme spip.php?page=ispip-article&amp;id-article=1 ("1" pour le numéro de l'article) vous obtiendrez l'affichage du contenu mais sans aucun css. En fait le plugin met en place un système de frames. Il faut donc, pour que cela fonctionne,&nbsp;rappeler&nbsp;les css dans le fichier ispip-article.html.</span></p> <p><span class="sy0">N'étant pas satisfait par ce principe, je décide donc de le détourner pour l'adapter à mes besoins (démarche certes discutable mais c'est aussi le jeu du web non ?). Je rajoute un fichier que j'appelle par exemple mobile.html dans le plugin ispip. Dans ce fichier je reprends des éléments du fichier ispip.html. En gros le head et la div "toolbar" qui génère l'entête de l'affichage mobile et ensuite, dans le body, j'insère le code de la page ispip-article.html en n'oubliant pas de mettre la boucle d'ouverture de l'article en haut de page et la boucle de fermeture en bas de page.<br />Pour ne pas avoir une URL du genre spip.php?page=mobile&amp;id-article=... je place dans mon .htaccess la ligne : RewriteRule ^(mobile)(\.html)?$ spip.php?page=$1 [QSA,L].<br />Il ne me reste plus qu'à créer un lien sur ma page classique de l'article qui pointe vers mobile.html?id_article=#ID_ARTICLE et le tour est joué. Je rajoute aussi en bas de page du squelette mobile.html un lien ramenant vers la page originale pour pouvoir simplement basculer de l'un à l'autre.<br />Maintenant j'ai cependant un souci : 2 URLs proposent le même contenu !<br /></span></p> <p><span class="sy0">Pour baliser ce problème de duplicate content, je rajoute d'abord un rel="nofollow" dans le lien vers la page mobile.html. On peut aussi rajouter dans le fichier robots.txt quelques lignes :<br /><blockquote><p>Disallow: /mobile.html</p> </blockquote>Il y a aussi la balise dans le head du fichier mobile.html pour indiquer l'URL du contenu original :<br /><blockquote><p>&lt;link rel="canonical" href="http://www.veille-web.fr/post/2010/11/01/iSpip-r%C3%A9flexion-et-plus-sur-la-version-mobile#URL_SITE_SPIP/spip.php?article[(#ID_ARTICLE)]" /&gt;</p> </blockquote></span></p> <p><span class="sy0">Voilà une solution assez simple de contournement pour proposer à l'internaute le choix entre un affichage classique et un affichage mobile simplifié.<br /></span></p> <p><span class="sy0">Vous pouvez aussi offrir le choix via un javascript pour que l'internaute choisissent via une question l'affichage désiré.<br />Pour l'iPhone il suffit de rajouter dans le head :<br /></span></p> <blockquote><p><span class="sy0">&lt;script type="text/javascript"&gt;<br />function iPhoneAlert() {<br />if((navigator.userAgent.match(/iPhone/i))||(navigator.userAgent.<br />match(/iPod/i))){<br />var question = confirm("Souhaitez-vous naviguer sur le site optimis√© pour iPhone?")<br />if (question){<br />window.location = "http://url.de.votre.site/</span><span class="sy0">mobile.html?id_article=#ID_ARTICLE</span><span class="sy0">";<br />}else{<br /><br />}<br />}<br />}<br />&lt;/script&gt;</span></p> </blockquote><span class="sy0">et dans le body :<br /><blockquote><p>&lt;body onLoad="iPhoneAlert();"&gt;</p> </blockquote>pour qu'à chaque page la question soit posée.</span> <p><span class="sy0">Évidemment je ne rentre pas dans les détails et dans les possibilités d'aménager plus en profondeur ce plugin selon vos besoins, à vous de tenter, de chercher pour aller plus loin.</span></p> <p><span class="sy0">Exemple en ligne sur le site <a hreflang="fr" href="http://les-ombres.sprechgesang.net/">http://les-ombres.sprechgesang.net/</a> :<br /></span></p> <ul><li>article sur le site normal <a hreflang="fr" href="http://les-ombres.sprechgesang.net/Petit-retour-sur-les-visites-du.html">http://les-ombres.sprechgesang.net/Petit-retour-sur-les-visites-du.html</a></li> <li>article version mobile <a hreflang="fr" href="http://les-ombres.sprechgesang.net/mobile.html?id_article=73">http://les-ombres.sprechgesang.net/mobile.html?id_article=73</a></li> </ul> <img title="page classique, nov. 2010" style="float: left; margin: 0 1em 1em 0;" alt="page classique" src="http://www.veille-web.fr/public/images/.IMG_1975_1__m.jpg" /><img title="page version mobile, nov. 2010" style="float: left; margin: 0 1em 1em 0;" alt="page version mobile" src="http://www.veille-web.fr/public/images/.IMG_1976_1__m.jpg" /><br /> http://www.veille-web.fr/post/2010/11/01/iSpip-r%C3%A9flexion-et-plus-sur-la-version-mobile#comment-form http://www.veille-web.fr/feed/atom/comments/90 LIEN : creer un spambot pour twitter sans une seule ligne de code urn:md5:6a1c58e742287143205fe89e148b2ba9 2010-10-27T17:46:00+02:00 2012-08-24T12:21:41+02:00 Matias Grenn Tutoriels référencementSEOtutorieltwitter <p>Voilà une occasion de mettre le nez dans les <a href="http://pipes.yahoo.com/pipes/" hreflang="en" class="vt-p">pipes de yahoo</a> en suivant un tuto qui explique comment générer un spambot (ce qui n'est pas une démarche très appréciée). La démarche est intéressante et il faut toujours se renseigner sur ce genre de pratique. D'ailleurs, comme tout tuto, il ne tient qu'à vous de le détourner pour l'appliquer dans des démarches peut-être moins agressive.</p> <p>Le tuto se trouve là&nbsp;:<br /><a href="http://discodog.fr/creer-un-spambot-pour-twitter-sans-une-seule-ligne-de-code.html" hreflang="fr" class="vt-p">http://discodog.fr/creer-un-spambot-pour-twitter-sans-une-seule-ligne-de-code.html</a></p> <p>Vous aurez pour cela besoin d'un compte twitter sous une adresse yahoo et donc d'un compte mail chez yahoo, ainsi qu'un compte chez&nbsp;<a href="http://twitterfeed.com/" target="_blank" class="vt-p">Twitterfeed</a>&nbsp;pour l'envoi des spambots...</p> <p>Vous trouverez aussi un article sur <a hreflang="fr" href="http://oeil-au-carre.fr/2010/11/17/yahoo-pipes-des-infos-dans-le-tuyau/">Yahoo Pipes</a> sur le blog de Marie Armand, un <a hreflang="en" href="http://books.google.fr/books?id=pcoYEpD-QBwC&amp;printsec=frontcover&amp;dq=%22Working+with+Yahoo%21+Pipes,+No+Programming+Required%22&amp;source=bl&amp;ots=hTj7MbFNR3&amp;sig=we4t3RAWLWf4_vWjaVaehiIZgMU&amp;hl=fr&amp;ei=5g-FTJq6OJDG4gbsyqXjAw&amp;sa=X&amp;oi=book_result&amp;ct=result&amp;resnum=3&amp;ved=0CCMQ6AEwAg#v=onepage&amp;q&amp;f=false">livre en anglais</a> et une liste de <a hreflang="fr" href="http://bibliotheques.wordpress.com/tutos-yahoo-pipes/">tutoriaux</a>.</p> http://www.veille-web.fr/post/LIEN-creer-un-spambot-pour-twitter#comment-form http://www.veille-web.fr/feed/atom/comments/89 Supertweet, passerelle entre twitter et de vieilles applications urn:md5:d5b4e8a334735ffd784c9b0a60361101 2010-10-13T17:57:00+02:00 2010-10-14T09:06:21+02:00 Matias Grenn Développement microbloggingréseaux sociauxtutorieltwitter <p>Depuis que twitter oblige à passer par son système d'authentification (Oauth), de nombreuses petites applications très pratiques sont devenues inutilisables. Heureusement, <a hreflang="fr" href="http://supertweet.net">supertweet.net</a> est là pour nous sauver provisoirement, le temps que de nouvelles applications remplacent les anciennes.</p> <p>Pour contourner le <strong>Oauth</strong> de twitter, vous avez la possibilité de passer par <a hreflang="fr" href="http://supertweet.net">http://supertweet.net</a> qui implante l'<strong>ancienne API de </strong><a style="font-weight: bold;" hreflang="en" href="http://twitter.com">twitter</a> et se raccorde à twitter via son Oauth. Vous me suivez ?</p> <p>Pour que cela puisse fonctionner il faut vous authentifier sur <strong>supertweet.net</strong> avec votre login et mot de passe de twitter. Il vous connecte ainsi via Oauth à votre compte original sur twitter. Ainsi, tout ce qui arrive dans supertweet sera rebalancé sur twitter.</p> <p>Un exemple concret ?</p> <p>J'utilise le <a hreflang="fr" href="http://www.menfin.net/Spip-Loves-Twitter-une-extension.html">plugin spiplovestwitter</a> sur de nombreux sites et ce plugin ne prend pas en compte l'Oauth, donc depuis septembre ce plugin ne fonctionne plus. Sans être indispensable, ce plugin permet à quelques un de mes sites d'envoyer simplement sur des comptes twitter l'actualité de ces sites avec le titre du nouvel article, son lien et quelques hashtags. Cela permet ainsi d'automatiser certaines démarches.</p> <p>Pour modifier ce plugin, une fois le compte authentifié sur supertweet.net, il suffit de remplacer dans le fichier twitter.class.php à la racine du plugin les urls appelant http://twitter.com/ et les remplacer par http://api.supertweet.net/1/. Par exemple <strong>http://twitter.com/statuses/</strong> deviendra <strong>http://api.supertweet.net/1/statuses/</strong>...</p> <p>Évidemment cette démarche est possible quand on peut avoir accès au code, ce qui n'est pas le cas par exemple pour les applications des iPhones qui n'ont pas encore été mise à jour et qui de fait bloque pour les envois vers twitter.</p> <p>Je ne sais pas combien de temps ce site restera fonctionnel mais en attendant il peut aussi permettre à ceux qui, pour tester des choses, ne veulent pas mettre le nez dans l'Oauth, de rapidement mettre en œuvre une appli et la faire tourner.</p> <p>Vous trouverez les informations sur le site de supertweet pour des compléments mais normalement l'API est celle de twitter avant septembre.</p> <p>Certaines applications pour spip comme le plugin "<a hreflang="fr" href="http://www.spip-contrib.net/Microblog,3051">microblog</a>" qui remplace doucement spiplovestwitter, implante supertweet dans le choix d'accès à twitter ainsi qu'un accès à Oauth qui vous oblige à créer un accès Oauth (plus complexe).</p> <p>Lire aussi : </p> <ul><li> <a hreflang="fr" href="http://www.tux-planet.fr/pino-une-solution-pour-contourner-loauth-de-twitter/">Pino : une solution pour contourner l'OAuth de Twitter</a> chez tux-planet.fr</li> <li><a hreflang="fr" href="http://twitteradar.com/oauthpocalypse-bilan/applications-twitter">oAuthpocalypse, le bilan</a></li> </ul> http://www.veille-web.fr/post/Supertweet#comment-form http://www.veille-web.fr/feed/atom/comments/86 De twitter aux informations locales urn:md5:c7e0ac3728ade4e06c58e0f52001a870 2010-09-27T10:07:00+02:00 2010-09-27T09:27:56+02:00 Matias Grenn réseaux sociaux <p>Alors que les réseaux sociaux nous connectent avec le monde entier faisant de Facebook le plus grand "pays" du monde en population, se dessine aussi une meilleure visibilité du local utilisant les réseaux sociaux pour en faire des médias.</p> <p>Au moment de la rédaction de cet article paraît un article proche du sujet mais je n'ai pas le temps de rebondir dessus ici, je vous invite juste à le lire :&nbsp;<a href="http://www.themediatrend.com/wordpress/?p=3162" hreflang="fr">L’information hyperlocale peut-elle être viable ?</a></p> <p>Alors que Facebook continue de s'épanouir et que les internautes se détournent des blogs pour s'y investir corps et âme, surgit il y a quelques années Twitter. Longtemps réservé en France aux professionnels du web, aux "geeks", ce réseau social de microbloging est en passe de devenir un plate-forme de flux permettant un partage de l'information au niveau locale des plus intéressantes.</p> <p>L'aventure commence simplement avec un hashtag. Par exemple à Rennes, les habitants de la métropole passent des informations par le biais du <a href="http://search.twitter.com/search?q=%23rennes" hreflang="fr">hashtag #rennes</a>. La timeline (TL) générée informent les internautes (même sans être membres de twitter) de ce qui se passe sur des sujets très variés dans la localité. Mais cela reste un flux assez difficile à lire pour ceux qui n'ont pas une pratique régulière et passionnée de ce réseau social. L'impact reste encore très limité mais on voit bien que se dessine une voie qu'il reste à développer.</p> <p>Un site propose alors de franchir le pas en permettant à partir d'un hashtag ou d'une TL d'un pseudo de twitter ou encore d'une liste de membres de twitter de générer à partir du flux créé un journal qui se renouvelle chaque jour. Paper.li, car il s'agit de ce site, met en page un peu à la manière d'un quotidien papier (avec les avantages du web de pouvoir afficher des diaporamas de photos, des vidéos et des liens). Pour suivre ce quotidien sur la ville de Rennes il suffit d'aller sur&nbsp;<a href="http://paper.li/tag/rennes" hreflang="fr">The #rennes Daily</a>.</p> <p><img src="http://les-ombres.sprechgesang.net/local/cache-vignettes/L500xH513/paperli-60d10.png" alt="" /></p> <p>La mise en page à partir du flux autour du hashtag #rennes est beaucoup plus agréable (même s'il reste encore des bugs sur l'accentuation) et rend ces contenus accessibles à un public plus large.</p> <p>Reste maintenant pour les internautes et les différents acteurs locaux (institutions, lieux culturels...) à investir ce hashtag intelligement et à ne pas hésiter à envoyer du contenu. Les contenus visibles sont surtout concentrés sur trois supports : articles, photographie et vidéo. Même si l'internaute a un lien contenant ces trois supports il a tout intérêt, pour que ceux-ci apparaissent distinctement sur paper.li, de diffuser sur le hashtag un lien pour chacun d'entre eux. Cela permettra ainsi à paper.li de les distinguer de et les afficher dans les rubriques dédiées.</p> <p>Ce qui est intéressant dans un site comme celui de paper.li c'est qu'il propose une automatisation efficace mais qu'il oblige quand même les acteurs de la vie locale à mettre en place un minimum de stratégie rédactionnelle pour que l'information circule correctement. Autre avantage certain : qu'importe que l'information provienne d'un site référencé ou pas, et pour des événements sur des courtes durée cela permet d'exister un peu sans google.</p> <p>En tous cas, c'est à suivre...</p> <p>Lire aussi :</p> <ul><li><a href="http://www.cibletrade.com/publications/breve_17_reseaux_sociaux_sont-ils_medias_sociaux.html" hreflang="fr">Les réseaux sociaux sont-ils des médias sociaux ?</a></li> </ul> http://www.veille-web.fr/post/De-twitter-au-locale#comment-form http://www.veille-web.fr/feed/atom/comments/85 Mettre au démarrage une vidéo plein écran avec un mac sous 10.4.10 urn:md5:0be54b53bd36458fea108a1e476897eb 2010-09-10T14:13:00+02:00 2010-09-23T17:01:37+02:00 Matias Grenn Tutoriels mactutorielvidéo <p>Il y a souvent des demandes simples qui se transforment vite en heures perdues à chercher une ou plusieurs solutions. Comment démarrer un mac sur une vidéo plein écran (fullscreen) et en boucle, sachant qu'il faut aussi faire disparaître la barre des menus mac (celle du haut). Sur un Leopard, pas trop de soucis avec automator il est assez simple de créer le script qu'il faut mais sous 10.4 ça se complique sévèrement !!!</p> <p>Il y a parfois des challenges qui semblent simples et qui finalement sont des vrais&nbsp;galères&nbsp;!</p> <p>L'idée est donc quand le mini mac qui tourne sous 10.4.10, démarre il lance une vidéo en plein écran et en boucle.</p> <p>J'ai d'abord essayé avec VLC en créant une playlist que je lançait automatiquement au démarrage (Préférences Système/Comptes/Ouverture puis vous cliquez sur + pour ajouter votre fichier à lancer). Problème : impossible de mettre VLC en boucle sans intervenir. En répétant dans la playlist plusieurs fois le fichier permet de contourner le problème mais sir la playlist dépasse un certain nombre de fichier ça bug (et là je devais envisager les 40000 répétitions) !</p> <p>J'ai ensuite essayé avec un applescript aussi mais impossible de mettre en route le loop (répétition) et surtout la barre des menus avec la pomme restait visible avec le curseur de la souris (problème rencontré sur pratiquement toutes les solutions envisagées).</p> <p>Le programme Automator sous 10.4.10 ne permet pas d'enregistrer une suite de manipulation comme sous Snow Leopard car sinon j'aurais choisi cette solution très simple.</p> <p>Avec une ligne de commande, j'ai réussi à ouvrir VLC en full écran, avec la boucle sur le fichier vidéo. Tout semblait presque parfait si ce n'est que la fenêtre du Terminal restait devant la vidéo ! Les premiers essais ne la maintenaient devant que lors de la première lecture mais, je ne sais pas trop pourquoi, ensuite elle y est restée&nbsp;effrontément&nbsp;!</p> <p>Finalement j'ai opté pour une association d'applescript et de ligne de commande. J'utilise du coup ma vidéo non pas en fichier mais sur DVD et lance le lecteur DVD du mini mac qui automatiquement lance le DVD en place.<br />Les réglages à faire dans les Préférences du lecteur sont les suivantes :</p> <ul><li>Passer en mode plein écran (lecteur)</li> <li>Démarrer la lecture du disque</li> <li>du début (Seconde lecture)</li> </ul> <div>La ligne de commande que je lance :</div><div><blockquote><p>/Applications/DVD\ Player.app/Contents/MacOS/DVD\Player;exit</p> </blockquote></div><div>Ensuite Reste à masquer la souris, et là je passe par un applescript :</div><div><blockquote><p>tell application "System Events" to key code -1</p> </blockquote></div><div>La ligne de commande et l'applescript sont lancer au démarrage comme expliqué avec la playlist de VLC.</div><div>Cela semble fonctionner mais si quelqu'un a une meilleure solution avec DVD ou fichier (mov, mp4...), je suis preneur.</div> http://www.veille-web.fr/post/video-fullscreen-loop#comment-form http://www.veille-web.fr/feed/atom/comments/84 Foursquare : pour quoi et comment ? (tutoriel) urn:md5:b8b6eddee76c80a40aa73a2b471e6fea 2010-06-14T12:03:00+02:00 2011-06-24T10:12:24+02:00 Matias Grenn réseaux sociaux ajaxcommunicationcontributiffoursquarejQueryjsonphpréseaux sociauxxml <p>J'entends et je lis de plus en plus d'articles sur <a hreflang="en" href="http://foursquare.com">Foursquare</a>, qui est en quelque sorte un jeu basé sur la géolocalisation. Le marketing s'empare de ce jeu pour inciter les utilisateurs à venir dans des lieux et se voir offrir des offres. Mais voyons pourquoi nous pouvons nous intéresser à Foursquare et comment l'utiliser. (Ceci est une première approche de ce que l'on peut en faire)</p> <h3>Pour quoi faire ?</h3> <p>Je travaille dans un lieu culturel, donc l'approche purement marketing de Foursquare n'est pas à priori celle qui m'intéresse. J'entends plutôt la détourner pour des objectifs moins commerciaux. Je prends pour exemple l'utilisation qu'en fait un musée de New York très avancé sur les réseaux sociaux : le <a hreflang="en" href="http://www.brooklynmuseum.org/community/foursquare/">Brooklyn Museum</a> (<a hreflang="fr" href="http://antoine-dupin.com/leblog/brookyn-museum-lintegration-parfaite-de-foursquare/">lire aussi cet article</a> qui décortique la page du Brooklyn Museum).</p> <p>Avec Foursquare, si vous avez signalé (checké) plus de trois fois, sur des heures ou des jours différents, votre présence dans les lieux, vous avez la possibilité de devenir le maire (mayor) du lieu. Il y a de nombreux articles sur le sujet et vous pouvez commencer par celui-là : <a hreflang="fr" href="http://www.slate.fr/story/19435/foursquare">Foursquare, pour quoi faire ?</a> L'idée c'est de proposer des offres spéciales pour le maire du mois par exemple, cela pourrait être un pass pour visiter à deux tout le lieu sur une journée...</p> <p>L'intérêt de se lancer dans Foursquare, quelque soit la structure, ne réside que dans le fait de pouvoir afficher les données de la structure recueillies par Foursquare comme le montre le Brooklyn Museum. Pour cela Foursquare propose <a hreflang="en" href="http://groups.google.com/group/foursquare-api/web/api-documentation">une API</a>. Pour récupérer dans un flux XML ou jSON les données liées à un lieu, il faut aller regarder dans "Venue methods" la partie nommée "Venue Details". Le flux s'appelle ainsi :</p> <ul><li>http://api.foursquare.com/v1/venue?vid=(id du lieu) pour le XML</li> <li>http://api.foursquare.com/v1/venue.json?vid=(id du lieu) pour le jSON</li> </ul> <h3>Comment ? (dev)</h3> <p>Le tutoriel qui va suivre va utiliser le flux XML.<br />Nous allons récupérer et parser ce flux avec jQuery. Le problème c'est que ce flux est extérieur à votre site. Il faut donc contourner le problème en créant une page PHP créant l'illusion que ce fichier XML est sur votre site. Nommons ce fichier feed.php :</p> <blockquote><p>&lt;?php<br />&nbsp;&nbsp;&nbsp; header('Content-Type: text/xml');<br />&nbsp;&nbsp;&nbsp; print file_get_contents('http://api.foursquare.com/v1/venue?vid=1526835'); //flux XML des Champs Libres<br />?&gt;</p> </blockquote>Vous créez ensuite une page HTML dans laquelle vous ajoutez dans le &lt;body&gt; une bloc vide : &lt;dl id="foursquare"&gt;&lt;/dl&gt; par exemple. Vous installer bien entendu jQuery sinon ça ne fonctionnera pas. Ensuite il suffit d'appeler le fichier PHP comme un flux XML et de spécifier précisément les éléments que vous voulez afficher. Comme ceci par exemple (ce code est à améliorer - il faut remplacer les ' par \" pour générer un code valide mais là j'ai la flemme -, je conseille quand même d'aller dans l'API de Foursquare pour comprendre un peu comment ça fonctionne) :<br /><blockquote><p>&lt;script type="text/javascript"&gt;<br />$(function(){<br />&nbsp;&nbsp;&nbsp; <br />&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; $.ajax({<br />&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; type: "GET",<br />&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; url: "feed.php",<br />&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; dataType: "xml",<br />&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; complete : function(data, status) {<br />&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; var venue = data.responseXML;<br />&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; var appendHtml = "";<br />&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; $(venue).each(function(){<br />&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; var name = $(this).find('name').text();<br />&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; var address = $(this).find('address').text();<br />&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; var city = $(this).find('city').text();<br />&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; var state = $(this).find('state').text();<br />&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; var checkins = $(this).find('checkins').text();<br />&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; var herenow = $(this).find('herenow').text();<br />&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; appendHtml += "&lt;dt id='lieu'&gt;&lt;a href='http://foursquare.com/venue/1526835'&gt;"+name+"&lt;/a&gt;&lt;/dt&gt;&lt;dd&gt;"+address+"&lt;br /&gt;"+zip+ +city+" ("+state+")&lt;/dd&gt;&lt;dd&gt;nombre de checks : "+checkins+"&lt;br/&gt;nombre de checks aujourd'hui : "+herenow+"&lt;/dd&gt;"; <br />&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; });<br />&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; $(venue).find("mayor").each(function(i, item) {<br />&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; var firstname = $(item).find("firstname").text();<br />&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; var lastname = $(item).find("lastname").text();<br />&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; var photo = $(item).find("photo").text();<br />&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; var id = $(item).find("user").find("id").text();<br />&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; appendHtml += "&lt;dt id='mayor'&gt;Maire actuel des Champs Libres&lt;/dt&gt;&lt;dd class='mayor'&gt;&lt;a href='http://foursquare.com/user/-"+id+"'&gt;&lt;img src='"+photo+"' alt='avatar' /&gt;&lt;/a&gt;&lt;p&gt;"+firstname+" "+lastname+"&lt;/p&gt;&lt;/dd&gt;";<br />&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; });<br />&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; appendHtml += "&lt;dt&gt;Les derniers messages&lt;/dt&gt;";<br />&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; $(venue).find("tip").each(function(i, item) {<br />&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; var text = $(item).find("text").text();<br />&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; var created = $(item).find("created").text();<br />&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; var firstname = $(item).find("firstname").text();<br />&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; var lastname = $(item).find("lastname").text();<br />&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; var url = $(item).find("url").text();<br />&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; var photo = $(item).find("photo").text();<br />&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; var id = $(item).find("user").find("id").text();&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; <br />&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; appendHtml += "&lt;dd&gt;de "+firstname+" "+lastname+" &lt;a href='http://foursquare.com/user/-"+id+"'&gt;&lt;img src='"+photo+"' alt='avatar' /&gt;&lt;/a&gt;&lt;/dd&gt;&lt;dd&gt;date : "+created+"&lt;/dd&gt;&lt;dd&gt;"+text+"&lt;/dd&gt;&lt;dd&gt;Liens associé : &lt;a href="http://www.veille-web.fr/post/+url+"&gt;"+url+"&lt;/a&gt;&lt;/dd&gt;";<br />&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; });<br />&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; $("#foursquare").append(appendHtml);<br />&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; }});<br />&nbsp;&nbsp;&nbsp; });<br />&lt;/script&gt;</p> </blockquote>Avec cette page, vous affichez non seulement des données mais vous créez de fait un espace contributif.<br />L'API de Foursquare reste cependant assez floue sur certains points. Je n'ai pas encore réussi à trouver comment faire apparaître les données concernant "Who's Been Here".<br /><div><h3>Articles sur Foursquare :</h3> </div><div><ul> <li><a hreflang="fr" href="http://clementguillemain.com/2011/954/tutoriel-oauth-et-lapi-de-foursquare.html">Tutoriel: Oauth et l’API de Foursquare</a></li> <li><a hreflang="fr" href="http://clementvouillon.com/2010/02/15/foursquare/">Foursquare </a>(fiche)</li> <li><a href="http://www.doppelganger.name/2010/06/foursquare-dis-moi-ou-et-les-autres-le.html" hreflang="fr">Foursquare, Dismoioù...</a></li> <li><a hreflang="fr" href="http://fjb.blogs.com/weblog/2010/02/trop-dinfos-sur-foursquare-.html">Trop d'infos sur Foursquare ?</a></li> <li><a hreflang="fr" href="http://romain.typepad.fr/mon_weblog/2010/03/api-mon-amour-%C3%A9pisode-4-foursquare.html">API mon amour, épisode 4 : Foursquare</a></li> <li><a hreflang="fr" href="https://titaninteractif.wordpress.com/2010/04/25/mon-aventure-foursquare-partie-4/">Mon aventure Foursquare, partie 4</a></li> <li><a hreflang="fr" href="http://calvados-tourisme.info/calvados-resa/blogs/index.php/2010/04/08/reseaux-sociaux-foursquare-mise-sur-la-geolocalisation">Réseaux sociaux : Foursquare mise sur la géolocalisation</a></li> <li><a hreflang="fr" href="http://www.oliviermermet.com/blog/2010/06/14/foursquare-et-facebook-et-si-cetait-possible/">Foursquare et Facebook : et si c’était possible ?</a></li> <li><a hreflang="fr" href="http://www.jbonnel.com/article-foursquare-7-usages-business-51465846.html">Foursquare : 7 usages business</a></li> <li><a hreflang="fr" href="http://www.narominded.com/2010/04/15-idees-pour-gagner-des-clients-sur-foursquare/">15 idées pour gagner des clients sur Foursquare</a></li> <li><a hreflang="fr" href="http://www.kriisiis.fr/index.php/8-conseils-dutilisation-de-foursquare-pour-votre-organisme/">8 conseils d’utilisation de Foursquare pour votre organisme</a></li> <li><a hreflang="fr" href="http://www.slate.fr/story/19435/foursquare">Foursquare, pour quoi faire ?&nbsp;</a></li> <li><a hreflang="fr" href="http://www.benmoussa.net/les-reseaux-sociaux/foursquare-est-il-la-nouvelle-revolution-du-net/">Foursquare est-il la nouvelle révolution du net ?</a></li> <li><a hreflang="fr" href="http://www.slideshare.net/gregfromparis/foursquare-by-greg-pouy-3180048">Foursquare : présentation et utilisation business</a> (slide)</li> <li><a hreflang="fr" href="http://www.reseaux-professionnels.fr/autour-du-web-20/1256-foursquare-quelles-potentiel-la-geocalisation-peut-elle-offrir-pour-des-applications-business-.html">Etude du cas Foursquare : quel potentiel la géocalisation peut-elle offrir aux entreprises pour des applications business ?</a></li> <li>(...)</li> </ul> </div> http://www.veille-web.fr/post/foursquare#comment-form http://www.veille-web.fr/feed/atom/comments/83 un bouton "I Like" de facebook dans SPIP urn:md5:d9327715593e2f2e1fc3b722659e5a62 2010-04-23T10:17:00+02:00 2010-09-23T17:02:12+02:00 Matias Grenn réseaux sociaux facebookréseaux sociauxspip <p>Partons de l'article de la ferme du web "<a hreflang="fr" href="http://www.lafermeduweb.net/billet/comment-mettre-en-place-le-bouton-j-aime-de-facebook-sur-son-site-826.html?utm_source=twitterfeed&amp;utm_medium=twitter&amp;utm_campaign=Feed%3A+LaFermeDuWeb+%28La+Ferme+du+web%29">comment mettre en place le bouton j'aime de facebook...</a>" pour le compléter et l'adapter à SPIP.</p> <p>Partons de l'article de la ferme du web "<a hreflang="fr" href="http://www.lafermeduweb.net/billet/comment-mettre-en-place-le-bouton-j-aime-de-facebook-sur-son-site-826.html?utm_source=twitterfeed&amp;utm_medium=twitter&amp;utm_campaign=Feed%3A+LaFermeDuWeb+%28La+Ferme+du+web%29">comment mettre en place le bouton j'aime de facebook...</a>" pour le compléter et l'adapter à SPIP.</p> <p>En fait le principe est très simple. Vous allez sur l'<a hreflang="fr" href="http://developers.facebook.com/docs/reference/plugins/like">API de facebook</a> concernant les boutons "i like". Ensuite vous copiez le code en fonction des options choisies (le code qui nous intéresse est celui de l'iframe et vous le copiez dans votre squelette article.htlm en remplaçant l'url par [(#URL_ARTICLE|url_absolue)] comme dans l'exemple ci-dessous :</p> <blockquote><p>&lt;iframe src="http://www.facebook.com/plugins/like.php?href=[(#URL_ARTICLE|url_absolue)]&amp;amp;layout=standard&amp;amp;show_faces=true&amp;amp;width=450&amp;amp;action=like&amp;amp;font=verdana&amp;amp;colorscheme=dark" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:450px; height:80px"&gt;&lt;/iframe&gt;</p> </blockquote> Pour suivre un peu les "Like" sur votre site, il suffit d'aller sur le site <a hreflang="en" href="http://likebutton.me/">Like Button</a> et de vérifier sur le nom de domaine ciblé (voir aussi en français <a hreflang="fr" href="http://moderateur.blog.regionsjob.com/index.php/post/Like-Button-,-pour-voir-ce-que-vos-amis-Facebook-aiment-sur-le-Web">quelques explications</a>).<br /><br />Et aussi un tuto pour <a hreflang="fr" href="http://www.360kmh.com/article-272-comment-ajouter-a-votre-site-un-bouton-de-partage-sur-facebook">installer un bouton facebook partager avec un compteur</a>, voir sur le site de 360kmh.com. Vous pouvez néanmoins, sur spip, ajouter plus simplement le <a hreflang="fr" href="http://www.spip-contrib.net/Social-tags">plugin Social Tags</a> qui a l'avantage de ne pas se limiter à facebook !<br /><br />Un <a hreflang="fr" href="http://www.facebook.com/facebook-widgets/share.php">code plus simple proposé par facebook</a> qui permet d'ajouter un bouton partager qui ouvre une fenêtre où l'internaute peut ajouter un commentaire avant de partager le lien sur son mur facebook :<br /><blockquote><pre>&lt;a name="fb_share" type="button_count" href="http://www.facebook.com/sharer.php"&gt;Partager&lt;/a&gt;&lt;script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"&gt;&lt;/script&gt;</pre></blockquote> http://www.veille-web.fr/post/I_like_spip_facebook#comment-form http://www.veille-web.fr/feed/atom/comments/82 Réaliser un SMS Wall urn:md5:2f29bcfb79a8cb2a09249f663ece05fb 2010-04-14T09:31:00+02:00 2010-04-14T08:31:52+02:00 Matias Grenn Tutoriels collaboratifmurréseauxtutorieltwittertwittywall <p>C'est un peu l'article et l'application que j'aurais aimé vous écrire et vous présenter (dans l'ordre), mais faute de temps et surtout parce que ça ne rentre pour le moment pas dans le cadre de mon travail, je ne me suis pas investit dans un projet de ce type.</p> <p>Heureusement, il y a des personnes, comme <a href="http://www.blogger.com/profile/01512938752158154259">Hugobiwan Zolnir</a> et <a href="http://www.blogger.com/profile/05242161486814397450">Dweez</a> pour les nommer, qui elles prennent ce temps ! Je vous conseille donc fortement d'aller sur le site du <a hreflang="fr" href="http://smswall.blogspot.com/">SMS WALL</a> où tout est expliqué pour réaliser un mur contributif affichant des SMS et des tweets, où vous trouverez aussi à télécharger les éléments de l'application qu'ils ont développé. Bravo et merci à eux !</p> http://www.veille-web.fr/post/SMS-Wall#comment-form http://www.veille-web.fr/feed/atom/comments/81 Images, Sitemap et SPIP urn:md5:97f545beb1c4b94fc0048e16a1ffb5b3 2010-04-09T20:59:00+02:00 2010-05-05T09:47:32+02:00 Matias Grenn Spip googleimagesréférencementspiptutorielvidéoviméoxml Comme nous avons pu le lire sur le site d'abondance il est possible de signaler les images dans un sitemap. Nous allons voir comment l'automatiser dans le sitemap de SPIP 2.<br />(Mise à jour du 22 avril 2010 avec le signalement aussi des vidéos)<br />(Mise à jour du 3 et 5 mai 2010 avec exemple de fichier sitemap pour spip en PJ et ajout de la fonction url_de_logo dans le fichier mes_fonctions.php)<br /> <p>Suite à l'article du site d'<a hreflang="fr" href="http://actu.abondance.com/2010/04/ajouter-les-images-dans-vos-sitemaps.html">abondance.com</a>, je vous propose un petit tutoriel pour l'automatiser dans le sitemap par défaut proposer dans SPIP 2. Le code doit ressembler à ceci :</p> <pre><blockquote><p>&lt;url&gt;<br /> &lt;loc&gt;http://example.com/sample.html&lt;/loc&gt;<br /> &lt;image:image&gt;<br /> &lt;image:loc&gt;http://example.com/image.jpg&lt;/image:loc&gt;<br /> &lt;/image:image&gt;<br />&lt;/url&gt;</p> </blockquote></pre> <p>Un autre tuto avec d'autres balises à prendre en compte sur le site de <a hreflang="fr" href="http://www.webrankinfo.com/dossiers/sitemaps/images-dans-sitemap">webrankinfo.com</a>.</p> <p>Pour rajouter par exemple l'url du logo des articles dans le sitemap, il suffit de faire une copie dans "squelettes" de l'original "sitemap.xml.html" qui se trouve dans "squelettes-dist".<br />Dans le fichier vous cherchez l'emplacement de la boucle "articles" annoncée par [(#REM) Articles ].</p> <pre><blockquote><p>[(#REM) Articles ]<br />[(#SET{recent,[(#VAL{'Y-m-d H:i:s'}|date{[(#DATE|affdate{U}|moins{86400})]})]})]<br />&lt;BOUCLE_a(ARTICLES){!par date_modif}{!par date}{0,2000}&gt;[<br />&lt;url&gt;&lt;loc&gt;(#URL_ARTICLE|url_absolue)&lt;/loc&gt;[(#DATE_MODIF|&gt;{#GET{recent}}|?{[&lt;lastmod&gt;(#DATE_MODIF|date_iso)&lt;/lastmod&gt;]})]&lt;/url&gt;]&lt;/BOUCLE_a&gt;</p> </blockquote>Il suffit maintenant de faire un appel du logo :<br /><blockquote><pre>[&lt;image:image&gt;<br />&lt;image:loc&gt;#URL_SITE_SPIP/(#LOGO_ARTICLE_RUBRIQUE||url_de_logo)&lt;/image:loc&gt;<br />&lt;/image:image&gt;]</pre></blockquote> <br />Vous verrez apparaître une erreur car la fonction "url_de_logo" n'est pas implantée en natif dans spip. Il vous faut pour cela ajouter au fichier "mes_fonctions.php" dans squelettes (ou créer ce fichier) en y mettant le code suivant :<blockquote><p>&lt;?php<br />function url_de_logo($texte) {<br />ereg("src=\"([^\"]*)\"", $texte, $regs);<br />return $regs[1];<br />}<br />?&gt;</p> </blockquote><br />Si l'article possède un logo celui apparaîtra avec son url complète. Si vous voulez ensuite y ajouter toutes les images associées à l'article, il suffit de créer une autre boucle "documents" :<br /><blockquote><pre>&lt;BOUCLE_mesimages(DOCUMENTS){id_article}{extension==jpg|png|gif}{mode=document}&gt;<br />&lt;image:image&gt;<br />&lt;image:loc&gt;[(#URL_DOCUMENT|url_absolue)]&lt;/image:loc&gt;<br />[&lt;image:caption&gt;(#DESCRIPTIF|textebrut)&lt;/image:caption&gt;]<br />[&lt;image:title&gt;(#TITRE|textebrut)&lt;/image:title&gt;]<br />&lt;/image:image&gt;&lt;/BOUCLE_mesimages&gt;</pre></blockquote> <br /><br /><br /><br />Et voilà le tour est joué ! Encore une fois SPIP est simple à adapter mais pourtant vous allez voir une erreur à l'affichage car le navigateur ne reconnaitra pas la balise &lt;image:image&gt;. Pour cela il faut chager une ligne dans le sitemap.xml.html :<br /><blockquote><pre>&lt;urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:image="http://www.google.com/schemas/sitemap-image/1.1"&gt;</pre></blockquote> <br /><br /><br /><br />Normalement après ça tout fonctionne...<br /><br />Pour référencer les vidéos, si comme moi vous passez par un service comme viméo, le tour est un peu plus complexe et je ne suis pas encore certain d'avoir trouver la solution.<br />Vous pouvez allez voir le modèle à suivre ici sur la page <a hreflang="fr" href="http://www.google.com/support/webmasters/bin/answer.py?hl=fr&amp;answer=80472">sitemap video de google</a>.<br />Idem que pour les images ne pas oublier de mentionner la balise vidéo :<br /><blockquote><pre>&lt;urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:video="http://www.google.com/schemas/sitemap-video/1.1"&gt;</pre></blockquote> </pre>Mon code pour le moment en test est le suivant :<br /><blockquote><p>&nbsp;&nbsp;&nbsp; &lt;BOUCLE_video(DOCUMENTS){id_article}{extension==swf}{mode=document}&gt;<br />&nbsp;&nbsp;&nbsp; &lt;video:video&gt;<br />&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;video:content_loc&gt;[(#URL_DOCUMENT|url_absolue)]&lt;/video:content_loc&gt;<br />&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;video:player_loc allow_embed="yes" autoplay="ap=1"&gt;[(#URL_DOCUMENT|url_absolue)]&lt;/video:player_loc&gt;<br />&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &lt;video:thumbnail_loc&gt;[(#LOGO_DOCUMENT||extraire_attribut{src}|url_absolue)]&lt;/video:thumbnail_loc&gt;<br />&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; [&lt;video:description&gt;(#DESCRIPTIF|textebrut)&lt;/video:description&gt;]<br />&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; [&lt;video:title&gt;(#TITRE|textebrut)&lt;/video:title&gt;]<br />&nbsp;&nbsp;&nbsp; &lt;/video:video&gt;&lt;/BOUCLE_video&gt;</p> </blockquote>J'ai plus qu'une hésitation sur le content_loc et le player_loc par rapport à <a hreflang="en" href="http://www.vimeo.com/">viméo</a>. Pour une vidéo hébergé chez soi il suffit de donner l'url du player et l'url de la vidéo/<br /> http://www.veille-web.fr/post/images_spip_sitemap#comment-form http://www.veille-web.fr/feed/atom/comments/80 SPIP - automatiser le dewplayer playlist urn:md5:79f763f5c3dc408a1601f895f746530f 2010-03-26T14:27:00+01:00 2010-03-26T14:33:13+01:00 Matias Grenn Spip playlistspiptutorielxml <p>Dewplayer est un outil en flash pour lire les mp3 encore bien pratique puisque le html5 n'est pas encore supporté partout. Comme il existe un dewplayer playlist, je ne résiste pas à l'adapter à spip pour répertorier tous les documents en mp3 de la base de données.</p> <div style="font: normal normal normal 12px/normal 'DejaVu Sans', 'Lucida Grande', 'Lucida Sans Unicode', Arial, sans-serif; color: rgb(0, 0, 0); background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: rgb(249, 249, 249); margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0; padding-top: 2px; padding-right: 2px; padding-bottom: 2px; padding-left: 2px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; background-position: initial initial; background-repeat: initial initial; "><p style="margin-top: 0; ">Voici un exemple assez simple pour utiliser l'outil playlist de <a href="http://www.alsacreations.fr/dewplayer" hreflang="fr">Dewplayer</a> avec SPIP (<a href="http://www.alsacreations.fr/mediaflash/dewplayer.zip" hreflang="fr">télécharger directement</a>).</p> <p style="margin-top: 0; ">Comme vous pourrez vous en rendre compte sur le site du Dewplayer, le module playlist nécessite un fichier XML. Vous créez une page ou identifiez une rubrique précise (rubrique=xx.html) ou vous créez un include, en fonction de vos besoin.<br />Le code &lt;object&gt; du player n'a pas à être mis en boucle, tout se fera dans le fichier XML.</p> <pre>&lt;object type="application/x-shockwave-flash" data="http://www.veille-web.fr/post/dewplayer-playlist.swf" width="240" height="200" id="dewplayer" name="dewplayer" style="margin:25px 0;"&gt; &lt;param name="wmode" value="transparent" /&gt; &lt;param name="movie" value="dewplayer-playlist.swf" /&gt; &lt;param name="flashvars" value="showtime=true&amp;autoreplay=true&amp;xml=playlist.xml" /&gt; &lt;/object&gt;</pre> <p>Bien entendu ne pas oublier de mettre à la racine de votre site le fichier dewplayer-playlist.swf qui se trouve dans le dossier ZIP dont le lien se trouve en haut de cet article.</p> <p>Ensuite vous créez dans squelettes un fichier que vous allez nommer playlist.xml.html. Ce fichier est à placer dans squelettes pour que nous puissions y faire appeler des boucles. Ensuite dans le .htaccess à la racine de votre site, et qui doit être activé, il suffira d'ajouter cette ligne :</p> <pre>RewriteRule ^playlist[.]xml$ &nbsp; &nbsp; &nbsp;spip.php?page=playlist.xml [QSA,L]</pre><p>et voilà, le fichier est accessible à l'url playlist.xml. Si votre hébergement ne permet pas la réécriture, et si vous ne voulez pas en changer, l'url sera alors spip.php?page=playlist.xml et vous devrez faire la correction dans la value de la balise param nommé flashvars... Rien de bien compliqué.</p> <p>Ensuite il vous suffit de déclarer votre fichier XML ainsi :</p> <pre>[(#REM)</pre><pre>Exemple tres simple de sitemap.xml accessible via URL_SITE_SPIP/sitemap.xml</pre><pre>(copier htaccess.txt en .htaccess pour en beneficier)</pre><pre>Ce sitemap affiche la liste des rubriques, breves et articles, en se limitant a 1000 rubriques, 1000 breves et 2000 articles pour des raisons</pre><pre>de performances.</pre><pre>Duree de reindexation et priorite ne sont pas precisees,</pre><pre>sauf pour l'accueil.</pre><pre>Mais si date_modif est recente (1 jour) on l'indique, pour que ce</pre><pre>soit reindexe en priorite</pre><pre>]#HTTP_HEADER{Content-Type: text/xml; charset=utf-8}</pre><pre>&lt;?xml version="1.0" encoding="UTF-8"?&gt;</pre><pre>&lt;playlist version="1" xmlns="http://xspf.org/ns/0/"&gt;</pre><pre>&nbsp;&nbsp; &nbsp;&lt;title&gt;Podcast Mali au féminin&lt;/title&gt;</pre><pre>&nbsp;&nbsp; &nbsp;&lt;creator&gt;Dewplayer - Musée de Bretagne&lt;/creator&gt;</pre><pre>&nbsp;&nbsp; &nbsp;&lt;link&gt;http://www.mali-feminin.fr/-podcast-.html&lt;/link&gt;</pre><pre>&nbsp;&nbsp; &nbsp;&lt;info&gt;Ecouter la playlist de tous les sons du site de l'exposition&lt;/info&gt;</pre><pre>&nbsp;&nbsp; &nbsp;&lt;image&gt;http://www.mali-feminin.fr/IMG/rubon2.jpg&lt;/image&gt;</pre><pre>&nbsp;&nbsp; &nbsp;&lt;trackList&gt;</pre><pre>&lt;BOUCLE_articles_mp3p(ARTICLES) {tout} {par date} {inverse}&gt;&nbsp;</pre><pre> &nbsp; &nbsp;&lt;BOUCLE_mp3p(DOCUMENTS){id_article}{extension==mp3} {mode=document}{0,1}&gt;</pre><pre>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;&lt;track&gt;</pre><pre>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;location&gt;[(#URL_DOCUMENT)]&lt;/location&gt;</pre><pre>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;creator&gt;#SURTITRE&lt;/creator&gt;</pre><pre>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;album&gt;Mali au Féminin&lt;/album&gt;</pre><pre>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;title&gt;#TITRE&lt;/title&gt;</pre><pre>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;annotation&gt;#DESCRIPTIF&lt;/annotation&gt;</pre><pre>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;duration&gt;&lt;/duration&gt;</pre><pre>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;image&gt;#LOGO_DOCUMENT&lt;/image&gt;</pre><pre>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;info&gt;&lt;/info&gt;</pre><pre>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;link&gt;#URL_ARTICLE&lt;/link&gt;</pre><pre>&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;&lt;/track&gt;</pre><pre>&lt;/BOUCLE_mp3p&gt;&nbsp;</pre><pre>&lt;/BOUCLE_articles_mp3p&gt;</pre><pre>&nbsp;&nbsp; &nbsp;&lt;/trackList&gt;</pre><pre>&lt;/playlist&gt;</pre> <p>Et ça roule pour une playlist facile à monter et légère. Pour les options du genre "n'afficher que les mp3 d'une rubrique" ou "n'afficher les mp3 des articles liés à un mot clé" je vous laisse chercher.</p> <p>J'ai créé un exemple concret sur le site de l'expo "Mali au féminin" qui ne sélectionne que les mp3 d'une rubrique : <a href="http://www.mali-feminin.fr/-podcast-.html" hreflang="fr">podcast</a>.</p> </div> http://www.veille-web.fr/post/spip-dewplayer-playlist#comment-form http://www.veille-web.fr/feed/atom/comments/79 Un code plus propre avec les sélecteurs CSS3 urn:md5:e3b3ef4556005e67084bab72473425b9 2009-12-20T12:24:00+01:00 2009-12-22T15:54:54+01:00 Mathias CSS css3selectorssélecteurs <p>La partie des CSS3 qui semble défrayer la chronique des blogs et de la presse est la partie la plus bling-bling !!</p> <p>Des bordures arrondies, de l'ombrage sur les boites et les nouvelles méthodes pour monter des structures de pages web sont des fonctionnalités très attrayantes. <br />Elles amènent évidemment avec elles une multitude de nouvelles possibilités pour le design web.</p> <p>À part ça, ce qui m'a vraiment mis en transe en tant que développeur est un peu plus mondain.</p> <p>Dans ce billet, je vais mettre en exergue comment les CSS3 vont simplifier le code de nos "front et back-end". Je vais analyser comparativement la façon dont nous arrivons à créer certains effets visuels et comment faire de même dans un glorieux "<strong>CSS3-supported</strong>" futur.</p> <p>Je vais aussi vous faire la démonstration de comment utiliser ces sélecteurs avec l'aide d'un peu de Javascript, ce qui peut vous enlever une sacrée épine du pied dans le cas ou vous ne pourriez pas changer les balises d'un code généré du coté serveur (par ex. php ou Ruby).</p> <h2>Le merveilleux nth-child</h2> <p>Pourquoi <code>nth-child</code> m'a tant esbroufé ? Voici une situation classique, le designer Web souhaite que les tableaux s'affichent de cette manière : </p> <p><img style="width: 500px; height: 176px;" title="striped-table.png, déc. 2009" alt="illustration d'un tableau de données" src="http://www.veille-web.fr/public/css3-selectors/striped-table.png" /></p> <p>Mettre chaque rangée du tableau dans une couleur différente est une pratique usuelle afin d'améliorer la lisibilité du tableau. La méthode testée et approuvée est d'appliquer une classe à chaque rangée. <br />Si vous écrivez vous même le code source à la main cela peut devenir une sérieuse souffrance, de plus si vous devez insérer une rangée en plein milieu du tableau il vous faudra tout revoir pour que la mise en page soit correcte.<br />Si votre code est généré coté serveur, vous devrez donc avoir accès à la fonction qui le génère afin d'y adjoindre le marqueur de classe.</p> <p><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1-strict.dtd"&gt;<br />&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;<br />&lt;head&gt;<br /> &lt;title&gt;Une couleur sur chaque rangée - à l'aide de classe&lt;/title&gt;<br /> &lt;style type="text/css"&gt;<br /> body {<br /> padding: 40px;<br /> margin: 0px;<br /> font: 0.9em Arial, sans-serif;<br /> }<br /> table {<br /> border-collapse: collapse;<br /> border: solid 1px #124412;<br /> width: 600px;<br /> }<br /> th {<br /> border: solid 1px #124412;<br /> background-color: #334f33;<br /> color: #fff;<br /> padding: 0.4em;<br /> text-align: left;<br /> }<br /> td {<br /> padding: 0.4em;<br /> }<br /> tr.odd td {<br /> background-color: #86b486;<br /> }<br /> &lt;/style&gt;<br />&lt;/head&gt;<br /><br />&lt;body&gt;<br /> &lt;table&gt;<br /> &lt;tr&gt;<br /> &lt;th&gt;Nom&lt;/th&gt;<br /> &lt;th&gt;Cartes envoyées&lt;/th&gt;<br /> &lt;th&gt;Cartes reçues&lt;/th&gt;<br /> &lt;th&gt;Cartes écrites mais non-envoyées&lt;/th&gt;<br /> &lt;/tr&gt;<br /> &lt;tr&gt;<br /> &lt;td&gt;Anne&lt;/td&gt;<br /> &lt;td&gt;40&lt;/td&gt;<br /> &lt;td&gt;28&lt;/td&gt;<br /> &lt;td&gt;4&lt;/td&gt;<br /> &lt;/tr&gt;<br /> &lt;tr class="odd"&gt;<br /> &lt;td&gt;Joe&lt;/td&gt;<br /> &lt;td&gt;2&lt;/td&gt;<br /> &lt;td&gt;27&lt;/td&gt;<br /> &lt;td&gt;29&lt;/td&gt;<br /> &lt;/tr&gt;<br /> &lt;tr&gt;<br /> &lt;td&gt;Paul&lt;/td&gt;<br /> &lt;td&gt;5&lt;/td&gt;<br /> &lt;td&gt;35&lt;/td&gt;<br /> &lt;td&gt;2&lt;/td&gt;<br /> &lt;/tr&gt;<br /> &lt;tr class="odd"&gt;<br /> &lt;td&gt;Louise&lt;/td&gt;<br /> &lt;td&gt;65&lt;/td&gt;<br /> &lt;td&gt;65&lt;/td&gt;<br /> &lt;td&gt;0&lt;/td&gt;<br /> &lt;/tr&gt;<br /> &lt;/table&gt;<br />&lt;/body&gt;<br />&lt;/html&gt;<br /></code></p> <p>Cette situation est récurrente sur quasi tous les projets, et à part un truc à faire en plus, cela n'a rien de fun. De plus, générer le marqueur de classe coté serveur n'est pas vraiment approprié (du point de vue de la présentation). C'est donc ici que le pseudo-sélecteur <code>nth-child</code> entre en scène !! Le code généré coté serveur fourni une balise html "table" valide pour&nbsp; y ranger les données et les CSS prennent en charge l'alternance des rangées à l'aide du sélecteur suivant :</p> <p><code>tr:nth-child(odd) td {<br />&nbsp; background-color: #86b486;<br />}</code></p> <p>Les mot-clés "odd" et "even" sont très utiles dans cette situation, mais vous pouvez aussi utiliser des multiplicateurs. <code>2n</code> serait l'équivalent du mot-clé "odd", <code>3n</code> sélectionnerait chaque troisième rangée et ainsi de suite...</p> <h3>Support des navigateurs</h3> <p>Malheureusement, nth-child est très mal pris en charge par les navigateurs. Tout simplement non-supporté par Internet-Explorer 8 et de manière très aléatoire par certains autres navigateurs. <br />Seul Firefox 3.5 le supporte intégralement. Dans certains cas vous devrez peut être considérer l'usage de JavaScript pour arriver à vos fins. Ce sera fort utile si vous utilisez un CMS sur lequel vous ne pouvez pas changer le code source pour y adjoindre la tant désirée classe.</p> <p>Je vais donc utiliser jQuery dans ces exemples, puisqu'il est très simple d'utiliser le même sélecteur CSS pour pointer vers l'élément. Vous pouvez tout aussi bien utiliser un autre framework JavaScript ou encore écrire votre propre fonction JavaScript pour y arriver.<br />J'ai donc rajouté au sélecteur <code>nth-child</code> le sélecteur original : </p> <p><code>tr:nth-child(odd) td, tr.odd td {<br />&nbsp; background-color: #86b486;<br />}</code></p> <p>Puis j'ajoute un peu de jQuery pour qu'une fois le document chargé, soit ajoutée une classe dans le code html en utilisant le sélecteur <code>nth-child</code>.</p> <p><code>&lt;script src="http://code.jquery.com/jquery-latest.js"&gt;&lt;/script&gt;<br />&lt;script&gt;<br />&nbsp; $(document).ready(function() {<br />&nbsp;&nbsp;&nbsp; $("tr:nth-child(odd)").addClass("odd");<br />&nbsp; });<br />&lt;/script&gt;</code></p> <p>Nous aurions pu simplement ajouter de la couleur de fond à l'aide de JavaScript, mais je préfère ne pas mélanger ce genre d'information dans le JavaScript, car s'il devait y avoir un changement de couleur pour la table, il faudrait se souvenir de le modifier dans la feuille de style et dans le JavaScript.</p> <h2>Faire du dernier un élément différent</h2> <p>Voici donc un autre cas que nous avons régulièrement à traiter. Nous avons une liste d'éléments flottants à gauche avec une marge à droite dans un espace contraint.<br />Si tous les éléments ont cette marge, le dernier sera donc repoussé à la ligne...</p> <p><img style="width: 501px; height: 136px;" title="le dernier de mohicans, déc. 2009" alt="" src="http://www.veille-web.fr/public/css3-selectors/last-child.png" /></p> <p>Dans l'absolu, nous avons deux manières de traiter ce type de problématique.<br />Nous pourrions mettre une marge négative au conteneur de liste de la même taille que celle séparant les éléments de la liste.<br />De ce fait l'encombrante marge remplirait cet espace et donc le dernier élément ne serait pas renvoyé à la ligne.</p> <p><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1-strict.dtd"&gt;<br />&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;<br />&lt;head&gt;<br /> &lt;title&gt;Faire du dernier un élément différent&lt;/title&gt;<br /> &lt;style type="text/css"&gt;<br /> body {<br /> padding: 40px;<br /> margin: 0px;<br /> font: 0.9em Arial, sans-serif;<br /> }<br /> div#wrapper {<br />width: 740px;<br />border: solid 5px #ccc;<br />}<br />ul.gallery {<br />margin: 0px -10px 0px 0px;<br />padding: 0px;<br />list-style: none;<br />}<br />ul.gallery li {<br />float: left;<br />width: 240px;<br />margin: 0px 10px 10px 0px;<br />}<br />&lt;/style&gt;<br />&lt;/head&gt;<br /><br />&lt;body&gt;<br />&nbsp; &lt;div id="wrapper"&gt;<br />&nbsp;&nbsp;&nbsp; &lt;ul class="gallery"&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;img src="http://www.veille-web.fr/post/xmas1.jpg" alt="baubles" /&gt;&lt;/li&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;img src="http://www.veille-web.fr/post/xmas2.jpg" alt="star" /&gt;&lt;/li&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;img src="http://www.veille-web.fr/post/xmas3.jpg" alt="wreath" /&gt;&lt;/li&gt;<br />&nbsp;&nbsp;&nbsp; &lt;/ul&gt;<br />&nbsp; &lt;/div&gt;<br />&lt;/body&gt;<br />&lt;/html&gt;</code></p> <p>L'autre solution eut été de mettre une classe au dernier élément et dans la feuille de style de supprimer la marge pour cette même classe.</p> <p><code>ul.gallery li.last {<br />&nbsp; margin-right: 0px;<br />}</code></p> <p>Cette dernière solution peut être problématique si le code est généré par un CMS auquel vous n'avez pas accès.</p> <p>Ce pourrait être tellement différent. En CSS3 nous avons un sélecteur qui tombe sous le sens, le fantastique <code>last-child</code> qui veut dire, comme son nom l'indique, qu'on peut appliquer en toute facilité, des règles au dernier élément.</p> <p><code>ul.gallery li:last-child {<br />&nbsp; margin-right: 0px;<br />}</code></p> <p>Ceci supprime la marge du dernier (<code>last-child</code>) <code>li</code> du <code>ul</code> avec la classe <code>gallery</code>. Aucun soucis avec la classe qui est appliquée au dernier élément, ni même besoin d'appliquer une marge négative.</p> <p>Si la liste est répétée ad-infinitum nous aurions pu utiliser <code>nth-child</code> pour cette tâche. En créant une règle pour chaque triptyque d'éléments.</p> <p><code>ul.gallery li:nth-child(3n) {<br />&nbsp; margin-right: 0px;<br />}</code></p> <p><img style="width: 500px; height: 285px;" title="plusieurs mohicans, déc. 2009" alt="" src="http://www.veille-web.fr/public/css3-selectors/repeated-list-nth-child.png" /></p> <p>Un exemple similaire, lorsque le designer souhaite avoir une bordure au bas de chaque élément, mais pas sur le dernier ou alors d'un autre type.<br />Une fois de plus,seule une classe ajoutée au dernier élément règlerait notre soucis, si vous ne pouvez pas utiliser le sélecteur <code>last-child.</code></p> <h3>Support des navigateurs</h3> <p>La situation pour <code>last-child</code> est quasi la même que pour <code>nth-child</code>, à savoir pas de support sur IE8. Ceci dit il est encore une fois très facile de répliquer cette fonction à l'aide de jQuery.</p> <p> Ajouter notre classe <code>.last</code> au dernier élément :</p> <p><code>$("ul.gallery li:last-child").addClass("last");</code></p> <p>Nous aurions pu aussi utiliser le sélecteur <code>nth-child</code> pour ajouter la classe <code>.last</code> à chaque triptyque d'éléments.</p> <p><code>$("ul.gallery li:nth-child(3n).addClass("last");</code></p> <h2>Du fun et des forms</h2> <p>Habiller des formulaires peut parfois ne pas être une partie de plaisir car toutes règles appliquées à <code>input</code> aura un effet sur tous les champs texte : les boutons "submit", les cases à cocher et les boutons radios.</p> <p>En tant que développeurs, nous en sommes venus à attribuer des classes à chaque élément afin de les différencier.</p> <p>Dans la plupart de mes montages de formulaires j'ai simplement une classe <code>text</code>, c'est un peu comme avoir une classe <code>para</code> pour chaque paragraphe d'un document.</p> <p><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1-strict.dtd"&gt;<br />&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;<br />&lt;head&gt;<br /> &lt;title&gt;Habiller des formulaires&lt;/title&gt;<br /> &lt;style type="text/css"&gt;<br /> body {<br /> padding: 40px;<br /> margin: 0px;<br /> font: 0.9em Arial, sans-serif;<br /> }<br /> form div {<br />clear: left;<br />padding: 0px 0px 0.8em 0px;<br />}<br />form label {<br />float: left;<br />width: 120px;<br />}<br />form .text, form textarea {<br />border: solid 1px #333;<br />padding: 0.2em;<br />width: 400px;<br />}<br />form .button {<br />border: solid 1px #333;<br />background-color: #eee;<br />color: #000;<br />padding: 0.1em;<br />}<br />&lt;/style&gt;<br />&lt;/head&gt;<br /><br />&lt;body&gt;<br />&nbsp; &lt;h1&gt;Envoyer sa liste de cadeaux à Saint Nicolas&lt;/h1&gt;<br />&nbsp; &lt;form method="POST" action="http://www.veille-web.fr/post/" id="nicolas-list"&gt;<br />&nbsp;&nbsp;&nbsp; &lt;div&gt;&lt;label for="fName"&gt;Nom&lt;/label&gt;<br />&nbsp;&nbsp;&nbsp; &lt;input type="text" name="fName" id="fName" class="text" /&gt;<br />&nbsp;&nbsp;&nbsp; &lt;/div&gt;<br />&nbsp;&nbsp;&nbsp; &lt;div&gt;&lt;label for="fEmail"&gt;Email&lt;/label&gt;<br /> &nbsp;&nbsp;&nbsp; &lt;input type="text" name="fEmail" id="fEmail" class="text" /&gt;<br /> &nbsp;&nbsp;&nbsp; &lt;/div&gt;<br />&nbsp;&nbsp;&nbsp; &lt;div&gt;&lt;label for="fList"&gt;Liste&lt;/label&gt;<br /> &nbsp;&nbsp;&nbsp; &lt;textarea name="fList" id="fList" rows="10" cols="30"&gt;&lt;/textarea&gt;</code><br /><code> &nbsp;&nbsp;&nbsp; &lt;/div&gt;</code><br /><code>&nbsp;&nbsp;&nbsp; &lt;div&gt;&lt;label for="fName"&gt;Nom&lt;/label&gt;<br /> &nbsp;&nbsp;&nbsp; &lt;input type="text" name="fName" id="fName" class="text" /&gt;<br /> &nbsp;&nbsp;&nbsp; &lt;/div&gt;<br />&nbsp;&nbsp;&nbsp; &lt;div&gt;&lt;input type="submit" name="btnSubmit" id="btnSubmit" value="Propulser" class="button" /&gt;&lt;/div&gt;</code><br /><code>&lt;/body&gt;<br />&lt;/html&gt;</code></p> <p>Les sélecteurs d'attribut permettent d'agir sur certains éléments à l'aide de leurs attributs. Aux antipodes de cet article sur les CSS3, les sélecteurs d'attribut sont des règles CSS 2.1, peu d'entre nous en font l'usage à cause du mauvais support dans IE6.<br />En utilisant ces sélecteurs d'attribut nous aurions pu écrire des règles CSS pour les champs <code>text</code> et <code>submit</code> sans même avoir besoin de faire appel à des classes.</p> <p>Par exemple après avoir supprimé du code ci-dessus les classes <code>text</code> et <code>button</code> de mes champs <code>input</code>, je peux utiliser les règles suivantes pour les modifier.</p> <p><code>form input[type="text"] {<br />&nbsp; border: solid 1px #333;<br />&nbsp; padding: 0.2em;<br />&nbsp; width: 400px;<br />}<br />form input[type="submit"] {<br />&nbsp; border: solid 1px #333;<br />&nbsp; background-color: #eee;<br />&nbsp; color: #000;<br />&nbsp; padding: 0.1em;<br />}</code></p> <p>Un autre problème que je rencontre souvent, lorsque j'utilise le flottant pour positionner mes <code>label</code> à coté des éléments des formulaires. Tout fonctionne bien si je veux tous les <code>label</code> en flottant, mais parfois j'ai des « boutons radios » ou une « case à cocher » et ne souhaite pas que les <code>label</code> soient flottants, et là... c'est le drame !<br />Comme vous pouvez le voir dans l'exemple ci dessous, le <code>label</code> de la case à cocher est coincé dans l'espace utilisé par l'autre <code>label</code>. Ici, il y aurait tout de même un peu plus de sens à afficher le <code>label</code> après le texte, non?</p> <p><img style="width: 501px; height: 130px;" title="damn my label position suck, déc. 2009" alt="" src="http://www.veille-web.fr/public/css3-selectors/form-label-floated.png" /></p> <p>J'aurais pu utiliser une classe pour ce <code>label</code>, mais les CSS3 me permettent de cibler directement le <code>label</code> par son attribut <code>for</code>. </p> <p><code>label[for="fOptIn"] {<br />&nbsp; float: none;<br />&nbsp; width: auto;<br />}</code></p> <p><img style="width: 500px; height: 131px;" title="waht a nice label, déc. 2009" alt="" src="http://www.veille-web.fr/public/css3-selectors/form-label-no-float.png" /></p> <p>Avoir la possibilité de cibler précisément les attributs de cette manière est très utile. Une fois débarrassé d'IE6, cela va nous aider à édulcorer notre code, et ainsi éviter d'avoir à ajouter trop de conditionnelles dans le code coté serveur.</p> <h3>Support des navigateurs</h3> <p>Les nouvelles sont plutôt bonnes pour les sélecteurs d'attributs, la compatibilité est assurée correctement à partir de IE7+ et Firefox 2.0+ ainsi que sur tous les navigateurs modernes.<br />Comme je l'ai déjà dit, il s'agit de règles compatibles avec le CSS2.1, donc nous sommes en bonne posture pour dire que nous devrions pouvoir l'utiliser début 2010.</p> <p>Internet Explorer 7 est encore légèrement buggé sur les règles CSS3 et a du mal à gérer les attributs <code>for</code> du <code>label</code>, mais comme précisé sur le site : <a hreflang="en" href="http://reference.sitepoint.com/css/attributeselector">Sitepoint <span class="caps">CSS</span> reference comments</a>, ajouter le sélecteur <code>label[htmlFor="fOptIn"]</code> ciblera correctement dans IE7.</p> <p>Internet Explorer 6 encore une fois, ne supporte pas ce type de sélecteur, mais à l'aide de jQuery il est possible de faire en sorte de palier ces lacunes.<br />Le code source suivant ajoutera les classes <code>text</code> et <code>button</code> aux champs <code>input</code> ainsi que la classe <code>check</code> aux <code>label</code> des cases à cocher.</p> <p><code>$('form input[type="submit"]').addClass("button");<br />$('form input[type="text"]').addClass("text");<br />$('label[for="fOptIn"]').addClass("checks");</code></p> <p>Les sélecteurs que nous avons choisis pour cet article, sont faciles à reproduire dans des cas concrets que nous produisons chaque jour en tant que développeurs, spécialement lors d'utilisation de "frameworks".</p> <p>Je pense que le temps est venu pour le nettoyage du code source de nos "front et back-end"et de supprimer nos classes habituelles pour nous reposer sur les nouveaux sélecteurs CSS3.<br />Avec l'aide d'un peu de JavaScript, quasiment tous les internautes pourront avoir le plaisir de bénéficier d'une parfaite expérience utilisateur. Là nous ne parlons que d'un point de vue purement visuel, et il n'y a définitivement pas lieu de s'inquiéter pour le petit nombre d'utilisateurs qui ont des navigateurs obsolètes avec aucun support pour le JavaScript.<br />Ils bénéficieront toujours d'un site internet exploitable, il leur manquera juste la finesse visuelle apportée pas les navigateurs modernes.</p> http://www.veille-web.fr/post/Un-code-plus-propre-avec-les-selecteurs-CSS3#comment-form http://www.veille-web.fr/feed/atom/comments/77 Présence numérique : les Champs Libres à Rennes urn:md5:2b3245b7d0808fc2815c3b9eba570787 2009-12-14T11:05:00+01:00 2009-12-16T13:30:03+01:00 Marc Perrien réseaux sociaux champs libresrennesréseaux sociaux <p>Les Champs Libres sont un équipement culturel situé à Rennes et dépendant de la communauté de communes. Une bibliothèque, l'Espace des Sciences et le Musée de Bretagne y sont regroupés.</p> <p>Les Champs Libres sont bien représentés sur internet : quatre sites web, quatre comptes twitter et une page Facebook...</p> <p>Pour comprendre cette abondance, il faut savoir que les entités composant les Champs Libres sont distinctes : la Bibliothèque, le Musée et l'Espace des Sciences font partie des Champs Libres, mais elles n'en sont pas des "filiales"</p> <p>Afin de préserver une identité propre à chacun de ces quatres équipements, ils disposent tous de leur propre site web et de leur propre twitter.</p> <p>Voyons un peu ce qu'il s'y passe...</p> <img src="http://perrien.fr/img/blog/champs_libres.jpg" alt="Les Champs Libres - Crédit Photo : http://www.flickr.com/photos/dalbera/" style="margin: 0 auto; display: block;" title="Les Champs Libres - Crédit Photo : http://www.flickr.com/photos/dalbera/" /> <h3>Les Champs Libres</h3> <h4><a href="http://www.leschampslibres.fr" target="_blank">Site web</a></h4> <p>Le site des Champs Libres est assez révélateur de la façon dont il est envisagé : un équipement culturel. Le site web présente les prochaines conférences-débats (puisque le bâtiment héberge une salle de conférence) et sert aussi de portail d'accès vers les sites web de la Bibliothèque, du Musée et de l'Espace des Sciences.</p> <h4><a href="http://www.facebook.com/pages/Rennes-France/Les-Champs-Libres/97969767558" target="_blank">Facebook</a></h4> <p>La page Facebook des Champs Libres n'a que 300 fans. C'est à peine plus du double des followers de son compte Twitter. Quand on se dit que, en France, il y a 13 millions d'abonnés Facebook pour 500000 "twitterers", la statistique étonne.</p> <p>Les Champs Libres utilisent pourtant parfaitement les différents outils de Facebook : annonce des événements, galeries photos présentant les expositions et même quelques vidéos... Rien à dire, l'outil est maîtrisé. Et son format parait parfaitement adapté à un structure comme les Champs Libres.</p> <h4><a href="http://twitter.com/LesChampsLibres" target="_blank">Twitter</a></h4> <p>Qu'y trouve-t-on ? L'actualité des lieux, tout d'abord, avec par exemple l'annonce des conférences. Twitter est un relais évident pour ce genre de message. Mais on trouve aussi l'envers du décor des expositions au travers de photos ou de vidéos. Le twitter manque peut-être un peu de constance (mais est-il nécessaire de tweeter pour ne rien dire ?) mais montre déjà de belles choses.</p> <h4>Le dernier tweet des Champs Libres :</h4> <div class="aligncenter" style="width : 435px; height : 102px; background-image : url(http://perrien.fr/img/blog/quote_box.png);"> <div id="champs" style="position : relative; top : 20px; left : 15px; width : 370px;"></div> </div> <style>#champs ul {list-style-type : none;}</style> <h3>La Bibliothèque Rennes Métropole</h3> <h4><a href="http://www.bibliotheque-rennesmetropole.fr/" target="_blank">Site web</a></h4> <p>On trouve beaucoup de choses, sur le site de la bibliothèque. Certaines évidentes (horaires, modalités d'utilisation...) et d'autres moins (l'accès aux <a href="http://simg.si.leschampslibres.fr/" target="_blank">collections numérisées de documents anciens</a>, par exemple. C'est également un point d'accès pour différents catalogues d'autres bibliothèques nationales et internationales.</p> <h4><a href="http://twitter.com/Bibrennesmetrop" target="_blank">Twitter</a></h4> <p>Purement informatif, le twitter de la bibliothèque n'a pas le côté "envers du décor" de celui des Champs Libres (il y a aussi probablement moins de matière...). Il présente l'actualité de la structure (concerts, projections, ateliers...)</p> <h4>Le dernier tweet de la bibliothèque Rennes Métropole :</h4> <div class="aligncenter" style="width : 435px; height : 102px; background-image : url(http://perrien.fr/img/blog/quote_box.png);"> <div id="bib" style="position : relative; top : 20px; left : 15px; width : 370px;"></div> </div> <style>#bib ul {list-style-type : none;}</style> <h3>L'espace des Sciences</h3> <h4><a href="http://www.espace-sciences.org" target="_blank">Site web</a></h4> <p>Présentation des expositions, du planétarium, du magazine Sciences Ouest... Espace Enfants (mon préféré)... Mais aussi une présentation des publications de l'Espace des Sciences et une boutique en ligne.</p> <p><img src="http://perrien.fr/img/blog/spider.jpg" alt="L'araignée tisse sa toile" style="margin: 0 auto; display: block;" /></p> <p>Le site de l'Espace des Sciences est riche et son aspect pédagique fait que l'on peut facilement y passer du temps. Je ne me lasse pas de voir <a href="http://www.espace-sciences.org/science/images/images-maj/Perso/spiderweb/index_spider.html" target="_blank">l'araignée tisser sa toile</a> dans la rubrique Enfants...</p> <h4><a href="http://twitter.com/Espace_sciences" target="_blank">Twitter</a></h4> <p>Programmation, actualités, mais aussi offres d'emplois... Le Twitter de l'Espace des Sciences remplit complètement son office en traitant à la foi de l'actualité du lieu et des sciences en général.</p> <p>On notera qu'autour de l'Espace des Sciences gravitent d'autres Twitters, comme <a href="http://twitter.com/_expos" target="_blank">@_expos</a>, qui suit les expositions itinérantes de l'Espace des Sciences, ou <a href="http://twitter.com/_Biodiversite" target="_blank">@_Biodiversite</a>, qui suit Sylvain et Marie-Anne dans les forêts d'Amérique Centrale dans le cadre de l'exposition Biodiversité prévue en 2012.</p> <h4>Le dernier tweet de l'Espace des Sciences :</h4> <div class="aligncenter" style="width : 435px; height : 102px; background-image : url(http://perrien.fr/img/blog/quote_box.png);"> <div id="sciences" style="position : relative; top : 20px; left : 15px; width : 370px;"></div> </div> <style>#sciences ul {list-style-type : none;}</style> <h3>Le Musée de Bretagne</h3> <h4><a href="http://www.musee-bretagne.fr/" target="_blank">Site web</a></h4> <p>Le site du musée ne bénéficie de l'approche pédagogique que l'on peut trouver sur celui de l'Espace des Sciences. Le contenu s'y prête peut-être moins. Mais en présentant l'ensemble des activités du Musée de Bretagne, le site est assez imposant : historique du musée, présentation des collections (et elles sont nombreuses, toutes autour de l'histoire de la Bretagne) et du fonctionnement du musée (horaires, tarifs, activités...). Le site n'est pas forcément très original dans son contenu, mais il frôle sans aucun doute l'exhaustivité...</p> <p>Certaines expositions temporaires bénéficient de plus d'un site web dédié, comme actuellement <a href="http://www.boat-people.fr" target="_blank">http://www.boat-people.fr</a>.</p> <h4><a href="http://twitter.com/museedebretagne" target="_blank">Twitter</a></h4> <p>Le plus actif de tous ! Le Musée de Bretagne tweete à lui tout seul plus que ses trois collègues réunis.</p> <p>Follow Friday, retweet et hashtag... C'est aussi visiblement le plus installé dans son usage de twitter. On y trouve un contenu assez varié, qui ne concerne pas forcément directement le musée. Et en fait, pour l'instant, le plus intéressant à suivre.</p> <h4>Le dernier tweet du Musée de Bretagne :</h4> <div class="aligncenter" style="width : 435px; height : 102px; background-image : url(http://perrien.fr/img/blog/quote_box.png);"> <div id="musee" style="position : relative; top : 20px; left : 15px; width : 370px;"></div> </div> <style>#musee ul {list-style-type : none;}</style> <h3>Bonus : le widget des Champs Libres</h3> <p> <object width="295" height="245"> <param name="Widget" value="http://www.leschampslibres.fr/widget/widget.swf" /> <embed src="http://www.leschampslibres.fr/widget/widget.swf" width="295" height="245"> </embed> </p> <h4>Et aussi...</h4> <p>Les Champs Libres sont présents sur <a href="http://www.vimeo.com/champslibres">Vimeo</a>, <a href="http://www.youtube.com/user/ChampsLibres35">Youtube</a> et <a href="http://www.dailymotion.com/Les_Champs_Libres">Dailymotion</a></p> <p>Cet article a été à l'origine publié sur <a href="http://perrien.fr/blog/">mon blog</a>. Veille-web.fr a souhaité en faire profiter ces lecteurs. Merci à eux.</p> <p>Crédit Photo : <a href="http://www.flickr.com/photos/dalbera/">http://www.flickr.com/photos/dalbera/</a></p> <!--Affichage des tweets --> <script type="text/javascript" charset="utf-8"> getTwitters('bib', { id: 'Bibrennesmetrop', count: 1, enableLinks: true, ignoreReplies: true, clearContents: true, newwindow: true, template: '%text%' }); </script> <script type="text/javascript" charset="utf-8"> getTwitters('musee', { id: 'museedebretagne', count: 1, enableLinks: true, ignoreReplies: true, clearContents: true, newwindow: true, template: '%text%' }); </script> <script type="text/javascript" charset="utf-8"> getTwitters('champs', { id: 'LesChampsLibres', count: 1, enableLinks: true, ignoreReplies: true, clearContents: true, newwindow: true, template: '%text%' }); </script> <script type="text/javascript" charset="utf-8"> getTwitters('sciences', { id: 'Espace_sciences', count: 1, enableLinks: true, ignoreReplies: true, clearContents: true, newwindow: true, template: '%text%' }); </script> http://www.veille-web.fr/post/Pr%C3%A9sence-num%C3%A9rique-les-Champs-Libres-%C3%A0-Rennes#comment-form http://www.veille-web.fr/feed/atom/comments/76 Rennes blogue-t-il ? urn:md5:dea6aab2ada3ccc5596dcdef7b9ff566 2009-12-07T09:39:00+01:00 2009-12-07T15:35:22+01:00 Matias Grenn réseaux sociaux blogscantinerencontresRennesréseauxsociauxtwitterweb2.0 <p>La fin des blogs ou le retour des blogs autrement ? L'arrivée des réseaux sociaux a en quelques années changer notre rapport aux blogs. Avec Rennes blogue-t-il ? un nouveau rendez-vous pour mettre en valeur des contenus...</p> <p>A l'heure où les réseaux sociaux semblent prendre la place des blogs s'ouvre un blog à Rennes : <a hreflang="fr" href="http://www.rennesbloguetil.fr/">http://www.rennesbloguetil.fr/</a>. Je faisais moi-même la remarque que la plupart des internautes aujourd'hui allait plutôt écrire sur les réseaux sociaux que sur un blog personnel - qu'il faut non seulement alimenter pour qu'il existe dans le web, mais monter, héberger. Il existe depuis longtemps des hébergements spécialisé dans le blog mais facebook et autres semblent prendre le dessus. Pourtant, et les internautes effectuant une veille régulière vous le diront, les réseaux sociaux partagent essentiellement des contenus que les internautes trouvent entre autre sur les blogs ! Et je dirais même que les réseaux sociaux poussent les rédacteurs de blogs à étoffer les contenus, les analyses, là où jusqu'ici quelques lignes suffisaient.</p> <p>Pour reprendre brièvement mon analyse, le web actuellement s'articule autour d'ensembles logiques entre site officiel, blog(s) et réseaux sociaux. Il s'agit donc, et localement ça semble de plus en plus important de le faire, de mettre en valeur les blogs et les contenus pour pouvoir les diffuser largement ou participer aux diverses rédactions. Les dynamiques locales en ont terriblement besoin à mon avis.</p> <p>Dans ce cadre, Rennes blogue-t-il ? arrive. On aimerait maintenant sur Rennes, trouver une logique entre tous ces rendez-vous, entre les <a hreflang="fr" href="http://opencoffeerennes.com/">OpenCoffee</a>, les <a hreflang="fr" href="http://twitter.com/#search?q=%23twunch">twunchs</a> et les blogueurs... Il est temps qu'<a hreflang="fr" href="http://opencoffeerennes.com/2009/07/un-equivalent-de-la-cantine-a-rennes-3964/">une Cantine numérique</a> s'ouvre ! Pourquoi ? Parce que nous devons aller plus loin maintenant que des simples rencontres de passionnés et de professionnels, nous devons commencer à proposer des workshops, des présentations et des conférences réguliers pour ouvrir rapidement aux entreprises et aux collectivités les technologies et ce qu'on peut en faire. Les exemples de murs twitter/sms <a hreflang="fr" href="http://huggy.ruche.org/z_stuff/">des trans</a>, <a hreflang="fr" href="http://huggy.ruche.org/muropera3/">de l'opéra</a>, des expériences aux <a hreflang="fr" href="http://agenda.leschampslibres.fr/">Champs Libres</a> (voir le site <a hreflang="fr" href="http://www.boat-people.fr">http://www.boat-people.fr</a>, la <a hreflang="fr" href="http://agenda.leschampslibres.fr/accueil/var/lang/FR/rub/88/view/afficher_article_complet/textes/23782.html">page réseaux sociaux</a> avec le widget) nous montrent des voies possibles mais qui sont encore à développer...</p> <p>Il y a sur Rennes une certaine effervescence, la ville présente un potentiel sur le web qui est assez important avec des entreprises comme <a hreflang="fr" href="http://kmt.versio.fr/">Versio</a> plutôt innovante, des développeurs audacieux avec <a hreflang="fr" href="http://beta.ruche.org/">La Ruche</a> ou la création du Framework <a hreflang="fr" href="http://limonade.sofa-design.net/">LimonadePHP</a>. Réussir à regrouper ses énergies est un des objectifs de la future cantine numérique.</p> <p>A suivre donc...</p> http://www.veille-web.fr/post/Rennes-blogue-t-il#comment-form http://www.veille-web.fr/feed/atom/comments/75 Réseaux sociaux - vers une lente transformation du web ? urn:md5:47d4fa67cbd6839a6c127a94eff5281b 2009-11-24T10:22:00+01:00 2010-04-28T12:50:01+02:00 Matias Grenn réseaux sociaux communicationfacebookréseauxsociauxtwitterwidget <p>Depuis l'arrivée du "web 2.0", concept plus ou moins fumeux pour rassurer les investisseurs quant à une maturité du web enfin trouvée, il y avait entre autre deux aspects mis en avant : les blogs et le wiki (je simplifie volontairement). Depuis quelques années maintenant nous assistons à un lent glissement des blogs vers les réseaux sociaux. Pourquoi ? Simplicité, nombres d'applications, côté ludique... Il y a sans doute plusieurs réponses pour l'expliquer mais ce qui est certain c'est que cela change le web en profondeur.</p> <p>En pièce jointe un guide en PDF sur les médias sociaux.</p> <p>J'ai tendance à penser que nous créons des applications dans le web sans savoir vraiment comment elles vont être utilisées. Ce n'est qu'ensuite que les utilisateurs trouvent ou non ce qu'ils peuvent en faire et, souvent, les détournent de leurs fonctions premières.</p> <p>Les réseaux sociaux maintenant n'échappent pas à la règle et sont de plus en plus investis par les professionnels. Le cas extrême en France étant <a hreflang="fr" href="http://twitter.com/">Twitter</a>, majoritairement occupé par des professionnels - mais on espère que la tendance va changer même si... Même si Twitter est devenu un outil de veille et d'échanges impressionnant pour les professionnels, il n'en reste pas moins important qu'il puisse en France s'ouvrir au plus de monde possible pour ainsi déployer au mieux ses possibilités dont on commence à percevoir l'étendue.<br />En effet, Twitter est un espace très ouvert, relativement aisé à comprendre et permettant la création d'espaces contributifs conviviaux (voir les nombreux murs contributifs avec Twitter et parfois aussi SMS qui se développent autour de projets culturels, de rencontres ou de collectivités). Je crois que c'est juste un premier pas et que nous continuerons à trouver des applications innovantes grâce à cette plateforme dont le concept, à bien y regarder, est simplissime.</p> <p>Il ne faut cependant pas oublier les autres plateformes de réseaux sociaux. En France, <a hreflang="fr" href="http://www.facebook.com/">Facebook</a> tient une place très importante et offre aux communicants et aux développeurs des champs d'expérimentation assez intéressants. Pour l'instant on remarque surtout la multitude de jeux plus ou moins innovants, plus ou moins intéressants, qui pullulent sur Facebook. Il s'agit maintenant de passer un cap et d'imaginer ce type d'applications pour communiquer et, c'est un credo chez moi, pour dépasser la simple communication et offrir de manière ludique une approche décalée sur un événement offrant des contenus. C'est déjà un peu le cas avec les mini sites viraux comme les widgets qui, au départ, permettent de dispatcher une communication sur les sites, les blogs, les ordinateurs personnels mais qui proposent de plus un plus une part de contenu (sur le <a hreflang="fr" href="http://www.leschampslibres.fr/widget/widget_champsLibres_presentation.html">widget</a> des Champs Libres à Rennes on trouve une vidéo et l'agenda détaillé autour d'une exposition).</p> <p>Hier, j'intervenais à <a hreflang="fr" href="http://www.buroscope.com/">Buroscope</a> (Rennes) sur les réseaux sociaux dans le cadre d'une formation de Concepteur de Sites Internet. L'approche professionnelle des réseaux sociaux hors des cadres balisés comme tel (voir <a hreflang="fr" href="http://www.viadeo.com/">Viadéo</a> par exemple) semble encore difficile à entrevoir. Je vais essayer de partager ici quelques pistes développées.</p> <h3>Les réseaux sociaux</h3> <p>Pourquoi investir les réseaux sociaux ? C'est un peu la question qui m'est posé dès le départ. Quel intérêt ? Les réseaux sociaux type Viadéo sont réservés aux professionnels et Facebook, <a hreflang="fr" href="http://fr.myspace.com/">MySpace</a> aux particuliers et aux musiciens... Mais déjà ça commence à glisser. Les musiciens, que font-ils sur MySpace si ce n'est une forme de communication, certes moins protocolaires, plus proches aussi, en tous cas différentes mais c'est un milieu professionnel qui fait son entrée dans un réseau social grand public.<br />Les réseaux sociaux se sont des "communautés" qui se regroupent autour de thème ou de liens (amis, famille, fans de, artistes...). Ils peuvent ainsi s'échanger des coups de cœur, des avis, rester en contact, etc.<br />La mise en place des groupes et des pages sur Facebook annonce une nouvelle orientation. On peut regrouper des membres autour de sujets précis (le principe des groupes) ou leur permettre de s'informer sur des entreprises, la programmation et les activités d'une structure culturelle (le principe des pages). Les comptes ne devant être utilisés que par des personnes physiques, normalement.</p> <p>Après une brève énumération de réseaux sociaux (MySpace, Facebook, Viadéo, <a hreflang="fr" href="http://www.linkedin.com/">LinkedIn</a>, Twitter, <a hreflang="fr" href="http://beta.ruche.org/">La Ruche</a>...), j'ai présenté le glissement évoqué ci-dessus : le passage d'abord des blogs aux réseaux sociaux puis la progressive utilisation par le milieu professionnel de ces espaces riches d'échanges (de partages et de dialogues).</p> <p>Avant l'explosion des réseaux sociaux, on avait les blogs et tout un appareillage qui tournait autour.<br />Pour la veille par exemple, il suffisait d'avoir par exemple une page sur <a hreflang="fr" href="http://www.netvibes.com/">Netvibes</a> ou sur <a hreflang="fr" href="http://www.google.fr/ig">Igoogle</a>, et d'y ajouter les flux rss des blogs que l'on voulait suivre pour rester informer régulièrement des nouveaux articles susceptibles de nous intéresser.<br />Aujourd'hui, sans pour autant supprimer les blogs, la pratique à évoluer et la veille s'opère d'une manière totalement différente. On ne va plus suivre spécifiquement des blogs mais des personnes par le biais de Twitter.</p> <p>Sur Facebook et Twitter, nous regardons s'afficher une timeline chronologique pour suivre les interventions des uns et des autres. Cela donne un aspect un peu bordélique qui au départ ne semble pas pouvoir concurrencer la gestion ordonnée de tous les flux rss. Si sur Facebook il ne semble pas y avoir de solution vraiment pratique à ce sujet, Twitter propose quant à lui plusieurs solutions et les applications développées autour de Twitter beaucoup d'autres solutions encore.<br />Sur Twitter, on a la possibilité de faire des sélections sur des mots clés ou des hashtags (#monmotàsuivre). Cela comporte plusieurs avantages dont un non négligeable : nous ne sommes pas obligés de suivre (d'être abonné dans la version française) tous les intervenants utilisant le hashtag pour pouvoir lire leurs contributions. Si vous voulez vous informer sur le référencement par exemple, il vous suffira de suivre deux hashtags au départ : <a hreflang="en" href="http://search.twitter.com/search?q=%23seo">#seo</a> et <a hreflang="en" href="http://search.twitter.com/search?q=%23referencement">#referencement</a>. Par le biais de ces deux hashtags vous trouverez des personnes que vous aurez envie de suivre ainsi que d'autres hashtags pouvant compléter la veille. C'est juste un exemple, à chacun ensuite d'y trouver son fonctionnement.</p> <p>Les réseaux sociaux participent donc à une autre conception de la communication plus riche en contenu mais aussi très vite "consommée". Ils prennent place avec les mini sites viraux dans une nouvelle approche du web où les flux ont plus d'importance que les sites.</p> <p>Cela implique pour les professionnels du web ou de la communication d'être présent, de s'afficher publiquement sur ces réseaux. Évidemment c'est complexe, il faut réussir à bien séparer le public du privé car nombreux sont ceux qui utilisent aussi ces réseaux pour partager avec leurs amis. Être présent c'est un premier pas, qui permet déjà de constater quelques surprises. On remarque que les pages Facebook et Twitter se référence plus rapidement et comme elles affichent un lien vers le site qui affiche le contenu ça permet de générer rapidement du traffic. Il s'agit ensuite d'y être actif, pas sur tous, et les flux permettent d'animer (même si c'est discutable) des réseaux sans y aller. Il faut donc choisir stratégiquement où cela a un intérêt d'être actif. Et surtout trouver le ton adéquate. On ne va pas parler avec le même ton sur le site principal d'une structure, sur un blog, sur Facebook ou sur Twitter (qui en plus limite un message à 140 caractères). Si une structure s'adresse aux internautes sur Facebook de la même manière que sur son site principal, ça risque de ne pas prendre. Facebook est un réseau social, il faut se plier à ses règles - règles qui ne sont pas écrites, il faut donc le pratiquer pour comprendre l'état d'esprit et le fonctionnement.<br />D'un blog il est assez simple aujourd'hui d'alimenter par un flux rss une page Facebook et aussi d'envoyer le titre d'un article, son lien et éventuellement un hashtag vers Twitter et tout ça automatiquement. Ce n'est pas la meilleure solution, ça donne un contact assez froid pour des réseaux sociaux mais ça permet d'alimenter simplement vos réseaux sociaux et si vous y êtes actifs, un complément non négligeable. C'est un peu l'approche minimale.</p> <p>Dans l'idéal, on peut imaginer le fonctionnement d'une entreprise sur le web côté public avec d'un côté un site principal avec ton officiel, un blog qui partage des informations et une actualité qui ne trouveraient pas sa place sur le site principal. ET de l'autre une page Facebook animé par des employés de l'entreprise, avec un ton plus léger et éventuellement un Twitter pour diffuser une information originale, des liens quand la rapidité et l'efficacité sont nécessaires. Le développement d'un ou plusieurs widgets peut s'avérer très utile aussi. Ce qui est important à retenir c'est que Widgets et Twitter permettent de diffuser une information par le biais des autres.</p> <h3>Pour conclure ponctuellement</h3> <p>Comme vous l'avez sans aucun doute compris, les réseaux sociaux amorce bien une lente transformation du web. Cette transformation va par contre s'accélérer dans l'année qui va suivre. Les changements opérés dans le web sont profonds, bien entendu jusqu'à l'arrivée de nouveaux outils, de nouvelles applications qui à leur tour nous feront peut-être oublier les réseaux sociaux tel qu'ils nous apparaissent en ce moment mais je pense que la perception de ce que nous pouvons faire avec internet se précise. Aux développeurs, aux acteurs du web de proposer, de déplacer encore ces outils pour ouvrir des espaces de contenus et de partages innovants.</p> <h3>Quelques liens:</h3> <p>- exemple d'entreprise sur les réseaux sociaux : <a href="http://www.facebook.com/catalogueIKEA?v=app_7146470109">Ikea sur Facebook</a> et <a hreflang="fr" href="http://www.buzzetcie.com/ikea-et-facebook-font-bon-menage/">article sur la campagne</a><br />- <a hreflang="fr" href="http://conseilsenmarketing.blogspot.com/2007/09/quel-usage-professionnel-pour-facebook.html">Quel usage professionnel pour Facebook ? <br /></a></p> <p>- <a hreflang="fr" href="http://www.emploiduweb.com/annuaire-emploi/twitter-emploi-rh/">L'emploi sur Twitter</a></p> <p>- <a hreflang="fr" href="http://tux-pla.net/">réducteur d'url</a> rennais !</p> <p>- <a href="http://twirus.com/">Twirus</a> (Classement sur Twitter)<br />- <a hreflang="en" href="http://tweetstats.com/">outils statistiques pour Twitter</a><br />- <a hreflang="fr" href="http://translate.googleusercontent.com/translate_c?hl=fr&amp;ie=UTF-8&amp;sl=en&amp;tl=fr&amp;u=http://twitterfeed.com/&amp;rurl=translate.google.fr&amp;twu=1&amp;usg=ALkJrhh9wFS3E0sqiuVLzUFTgjMRZ5H0Nw">Twitterfeed</a> pour répercuter sur twitter vos activités sur des sites, des blogs ou d'autres réseaux<br />- <a hreflang="fr" href="http://twitts.fr/">Twitts</a> (annuaire twitter - exemple les <a hreflang="fr" href="http://twitts.fr/annuaire/rennes.html">twitters de Rennes</a>)<br />- des MP3 sur Twitter avec <a href="http://twiturm.com/">Twiturm</a> (voir aussi l'<a hreflang="fr" href="http://www.presse-citron.net/envoyez-vos-mp3-sur-twitter-avec-twiturm">article de Presse Citron</a> sur le sujet)<br />- nettoyeur de spam sur twitter avec <a href="http://thetwitcleaner.com/">twitcleaner</a><br />- gérer des listes privatives pour des envois se reporter à <a hreflang="fr" href="http://www.veille-web.fr/index.php/post/tweetparty">cet article</a><br />- <a hreflang="en" href="http://www.honeytechblog.com/top-50-twitter-tracking-and-analytics-tools/">Top 50</a> Twitter Tracking and Analytics Tools</p> <p>Applications :</p> <p>- <a hreflang="en" href="http://mixero.com">Mixero</a> - pour twitter avec options nombreuses sous adobe air<br />- le site des applications pour twitter <a hreflang="fr" href="http://www.twtbase.com/">TwtBase</a> et <a href="http://www.twittoo.net/">Twittoo</a><br />- <a href="http://www.tweetdeck.com/beta/">TweetDeck</a> (mac et pc - facebook myspace et twitter)<br />- <a hreflang="fr" href="http://www.atebits.com/tweetie-mac/">Tweetie</a> (mac - twitter)<br />- <a href="http://www.facebook.com/apps/application.php?id=219303305471">Desktop notifications</a> (mac - Facebook)<br />- <a href="http://adium.aybee.net/">Adium</a> (mac - facebook, google, msn...)<br />- <a hreflang="fr" href="http://www.epn-ressources.be/twitter-facebook%E2%80%A6tout-en-un">suite d'applications</a> compilant Twitter, Facebook...</p> <p>Pour Firefox :</p> <p>- <a hreflang="fr" href="https://addons.mozilla.org/fr/firefox/addon/5081">Echofon</a> - plugin (anciennement TwitterFox)<br />- <a hreflang="fr" href="https://addons.mozilla.org/fr/firefox/addon/9591?src=reco">Power Twitter</a> - plugin<br />- <a hreflang="fr" href="http://microblink.com/2009/02/04/10-firefox-addons-for-twitter/">d'autres plugins twitter</a><br />- <a hreflang="en" href="http://developers.facebook.com/toolbar/">Facebook Toolbar</a><br />- des plugins <a hreflang="fr" href="https://addons.mozilla.org/fr/firefox/tag/linkedin">LinkedIn</a> et surtout <a hreflang="fr" href="https://addons.mozilla.org/fr/firefox/addon/1512">celui-là</a><br />- <a hreflang="en" href="https://addons.mozilla.org/en-US/firefox/addon/3229">MySpace blog editor</a><br />- à essayer <a hreflang="fr" href="http://slydnet.com/web/headup-extension-firefox-de-recherche-et-reseaux-sociaux/">Headup</a> – Extension Firefox de recherche et réseaux sociaux</p> <p>De nombreux articles en vrac :</p> <p>- <a hreflang="fr" href="http://pro.01net.com/editorial/509055/les-reseaux-sociaux-sinvitent-dans-la-messagerie/">Les réseaux sociaux s'invitent dans la messagerie</a><br />- <a href="http://technaute.cyberpresse.ca/nouvelles/internet/200911/26/01-925483-les-experts-des-reseaux-sociaux-ont-la-cote.php" hreflang="fr">Les experts des réseaux sociaux ont la cote</a><br />- <a href="http://intelegia.com/centremedia/des_outils_et_des_hommes/2009/11/19/villes-20-ces-villes-qui-tweetent/" hreflang="fr">Villes 2.0 : ces villes qui tweetent!</a><br />- <a href="http://www.lexpansion.com/economie/actualite-high-tech/twitter-lancerait-ses-comptes-premium-au-japon-debut-2010_209132.html#xtor=AL-189" hreflang="fr">Twitter lancerait ses comptes premium au Japon début 2010</a><br />- <a href="http://www.ressacmedia.com/blog/medias-sociaux/pourquoi-les-entreprises-intensifient-leur-presence-sur-les-reseaux-sociaux/" hreflang="fr">Pourquoi les entreprises intensifient leur présence sur les réseaux sociaux ?</a><br />- <a href="http://www2.infopresse.com/blogs/actualites/archive/2009/11/30/article-33222.aspx" hreflang="fr">Emploi: "La crise cache une pénurie de main-d'oeuvre dans certains domaines"</a><br />- <a href="http://www.aquilon.nt.ca/Article/S-adapter-aux-nouvelles-realites-200911261326/default.aspx" hreflang="fr">L'Aquilon et les réseaux sociaux : S'adapter aux nouvelles réalités</a><br />- <a href="http://www.filaire.fr/index.php/post/Facebook-Twitter-le-boom-des-reseaux-sociaux" hreflang="fr">Facebook, Twitter : le boom des réseaux sociaux</a><br />- <a href="http://ow.ly/GiWp" hreflang="fr">Tribune : Les réseaux sociaux, piliers des écosystèmes d'entreprise !</a><br />- vidéo : <a href="http://www.youtube.com/watch?v=YE2LSp-hjbQ" hreflang="en">IKEA Facebook Showroom</a><br />- <a href="http://www.camillejourdain.fr/comment-developper-une-strategie-sur-les-medias-sociaux-en-7-etapes/" hreflang="fr">Comment développer une stratégie sur les médias sociaux en 7 étapes ?</a> - voir aussi <a href="http://www.camillejourdain.fr/category/reseaux-sociaux/" hreflang="fr">la rubrique</a><br />- <a href="http://www.networkers-in-the-city.com/blog/skype-pour-des-presentations-et-formations-professionnelles" hreflang="fr">Skype pour des présentations et formations professionnelles</a><br />- <a href="http://fr.readwriteweb.com/2009/11/23/analyse/web-de-fond-web-de-flux-blogging-evolution/" hreflang="fr">Comment le blogging a changé ces trois dernières années</a><br />- <a href="http://www.meilleures-entreprises.fr/blog/reseaux-sociaux-et-recruteurs/?utm_source=feedburner&amp;utm_medium=feed&amp;utm_campaign=Feed%3A+MeilleuresEntreprises+%28meilleures-entreprises%29" hreflang="fr">Réseaux sociaux et recruteurs</a><br />- suivre sur twitter search <a href="http://search.twitter.com/search?q=%23reseauxsociaux" hreflang="fr">#reseauxsociaux</a> par exemple<br />- <a href="http://www.penser-le-web.com/medias-sociaux-et-marketing/lefevbre-vs-twitter-outil-et-lobby" hreflang="fr">Lefevbre VS Twitter : qu’en penser ?</a></p> <p>- <a href="http://www.lesaffaires.com/blogues/alain-mckenna/foursquare-a-t-on-trouve-le-prochain-twitter/506689" hreflang="fr">Foursquare: a-t-on trouvé le prochain Twitter?</a></p> http://www.veille-web.fr/post/Investir-les-reseaux-sociaux#comment-form http://www.veille-web.fr/feed/atom/comments/74