443 lines
72 KiB
XML
443 lines
72 KiB
XML
<?xml version="1.0" encoding="UTF-8" ?>
|
||
|
||
<rdf:RDF
|
||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||
xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
|
||
xmlns:admin="http://webns.net/mvcb/"
|
||
xmlns:cc="http://web.resource.org/cc/"
|
||
xmlns:content="http://purl.org/rss/1.0/modules/content/"
|
||
xmlns="http://purl.org/rss/1.0/">
|
||
|
||
<channel rdf:about="http://planete-jquery.fr">
|
||
<title>Planète jQuery : l'actualité jQuery, plugins jQuery et tutoriels jQuery en français</title>
|
||
<description>Planète jQuery Francophone - L'actualité jQuery en français</description>
|
||
<link>http://planete-jquery.fr</link>
|
||
<dc:language>fr</dc:language>
|
||
<dc:creator>Damien Decaux</dc:creator>
|
||
<dc:rights></dc:rights>
|
||
<dc:date>2013-03-20T04:16:30+00:00</dc:date>
|
||
<admin:generatorAgent rdf:resource="http://planete-jquery.fr" />
|
||
|
||
<items>
|
||
<rdf:Seq>
|
||
<rdf:li rdf:resource="http://www.mathieurobin.com/2013/03/chroniques-jquery-episode-108/"/>
|
||
<rdf:li rdf:resource="http://www.lafermeduweb.net/billet/powertip-des-tooltips-aux-fonctionnalites-avancees-1516.html"/>
|
||
<rdf:li rdf:resource="http://www.mathieurobin.com/2013/03/chroniques-jquery-episode-107/"/>
|
||
<rdf:li rdf:resource="http://www.megaptery.com/2013/03/tooltipster-tooltip-jquery-moderne-flexible.html"/>
|
||
<rdf:li rdf:resource="http://www.lafermeduweb.net/billet/spectrum-un-colorpicker-jquery-tres-complet-1527.html"/>
|
||
<rdf:li rdf:resource="http://www.mathieurobin.com/2013/02/chroniques-jquery-episode-106/"/>
|
||
<rdf:li rdf:resource="http://www.lafermeduweb.net/billet/fancy-input-donnez-du-style-a-vos-input-et-textarea-en-css3-1525.html"/>
|
||
<rdf:li rdf:resource="http://js.4design.tl/diyslider-slider-leger-et-personnalisable-1524"/>
|
||
<rdf:li rdf:resource="http://www.mathieurobin.com/2013/02/chroniques-jquery-episode-105/"/>
|
||
<rdf:li rdf:resource="http://blog.ludikreation.com/2013/02/14/gmap3-plugin-jquery-facilitez-vous-lintegration-de-google-maps/"/>
|
||
<rdf:li rdf:resource="http://www.lafermeduweb.net/billet/threesixty-slider-un-plugin-jquery-de-slider-d-image-a-360-1520.html"/>
|
||
<rdf:li rdf:resource="http://www.mathieurobin.com/2013/02/comment-bien-choisir-vos-plugins/"/>
|
||
<rdf:li rdf:resource="http://www.mathieurobin.com/2013/02/chroniques-jquery-episode-104/"/>
|
||
<rdf:li rdf:resource="http://www.megaptery.com/2013/02/vague-du-web-3.html"/>
|
||
<rdf:li rdf:resource="http://js.4design.tl/parcourir-le-dom-en-php-avec-simple-html-dom-1578"/>
|
||
<rdf:li rdf:resource="http://chez-syl.fr/2013/02/jquery-1-9-et-browser/"/>
|
||
<rdf:li rdf:resource="http://chez-syl.fr/2013/02/site-du-zero-notifications-1-5-3/"/>
|
||
<rdf:li rdf:resource="http://www.lafermeduweb.net/billet/image-picker-une-selectbox-combinee-a-des-images-avec-jquery-1512.html"/>
|
||
<rdf:li rdf:resource="http://www.megaptery.com/2013/01/blackandwhite-images-noir-blanc-jquery.html"/>
|
||
<rdf:li rdf:resource="http://www.mathieurobin.com/2013/01/chroniques-jquery-episode-103/"/>
|
||
</rdf:Seq>
|
||
</items>
|
||
</channel>
|
||
<item rdf:about="http://www.mathieurobin.com/2013/03/chroniques-jquery-episode-108/"><title>MathieuRobin : Chroniques jQuery, épisode 108</title><link>http://www.mathieurobin.com/2013/03/chroniques-jquery-episode-108/</link><dc:date>2013-03-11T09:06:01+00:00</dc:date><dc:language>fr</dc:language><dc:creator>MathieuRobin</dc:creator><dc:subject></dc:subject><description></description><content:encoded><![CDATA[<p>Hello tout le monde ! Alors que je m’apprête à pondre un second coup de gueule contre Darty, la chronique, elle, continue sans soucis. Rien d’officiel ceci dit.</p>
|
||
<p>On a le droit à <a title="jQuery Mobile 1.3: What's New?" href="http://www.elated.com/articles/jquery-mobile-1-3-whats-new/" target="_blank">un topo très complet et intéressant</a>, en anglais, de la part de l’équipe de elated sur la sortie de jQuery Mobile 1.3. Je vous le conseille franchement.</p>
|
||
<p>Un énième site pour répertorier les plugins vient de voir le jour. Il a pour mérite d’être plutot bien réalisé et de regrouper plus de 600 plugins. J’espère qu’ils continueront d’alimenter la liste, <a title="unheap" href="http://www.unheap.com/" target="_blank">unheap</a> fait désormais partie de mes sources de plugins. Merci à tous les twittos qui en ont parlé et qui m’ont permis de découvrir ce service.</p>
|
||
<p>Comme souvent, <a title="Tooltipster, une tooltip jQuery moderne et flexible | Megaptery" href="http://www.megaptery.com/2013/03/tooltipster-tooltip-jquery-moderne-flexible.html" target="_blank">Megaptery</a> a su nous dégoter une jolie petite perle. <a title="Tooltipster" href="http://calebjacob.com/tooltipster/" target="_blank">Tooltipster</a> est un plugin de tooltip très complet et qui permet une énorme personnalisation via CSS. Personnellement, je préfère de loin ce plugin à celui de Twitter Bootstrap.</p>
|
||
<p>C’est tout pour cette semaine, j’espère avoir le temps de bloguer sur d’autres choses cette semaine. Vous pouvez retrouver l’ensemble des liens de cette chronique sur <a title="Episode 108 sur Evernote" href="https://www.evernote.com/pub/mathrobin/episode108" target="_blank">un carnet dédié sur Evernote</a>.</p>
|
||
<p>Dernière petite chose, que pensez vous de cette chronique ? Que voulez vous de différent ? Avez-vous des choses à proposer ? J’aimerais bien avoir vos avis.</p>
|
||
<p><a href="http://www.mathieurobin.com/?flattrss_redirect&id=2917&md5=06cd0e0a951f4ba114c0db43ce27b944" title="Flattr" target="_blank"><img src="http://www.mathieurobin.com/wp-content/plugins/flattr/img/flattr-badge-large.png" alt="flattr this!" /></a></p><p><br/><i>Article original de <a href="http://www.mathieurobin.com/2013/03/chroniques-jquery-episode-108/" title="Voir l'article original">MathieuRobin</a><br/>Aller sur <a href="http://planete-jquery.fr" title="">Planète jQuery</a></i></p>]]></content:encoded></item><item rdf:about="http://www.lafermeduweb.net/billet/powertip-des-tooltips-aux-fonctionnalites-avancees-1516.html"><title>LaFermeDuWeb : PowerTip - Des tooltips aux fonctionnalités avancées</title><link>http://www.lafermeduweb.net/billet/powertip-des-tooltips-aux-fonctionnalites-avancees-1516.html</link><dc:date>2013-03-07T09:15:00+00:00</dc:date><dc:language>fr</dc:language><dc:creator>LaFermeDuWeb</dc:creator><dc:subject></dc:subject><description></description><content:encoded><![CDATA[<div>
|
||
<a href="http://www.lafermeduweb.net/billet/powertip-des-tooltips-aux-fonctionnalites-avancees-1516.html">
|
||
<img style="border: 1px solid #000000;" src="http://www.lafermeduweb.net/images/billets/2013-03/powertip_topBillet.jpg" alt="PowerTip - Des tooltips aux fonctionnalités avancées" />
|
||
</a>
|
||
</div>
|
||
<div>PowerTip est une bibliothèque jQuery permettant de créer des tooltips avec des fonctionnalités avancées.</div><p><br/><i>Article original de <a href="http://www.lafermeduweb.net/billet/powertip-des-tooltips-aux-fonctionnalites-avancees-1516.html" title="Voir l'article original">LaFermeDuWeb</a><br/>Aller sur <a href="http://planete-jquery.fr" title="">Planète jQuery</a></i></p>]]></content:encoded></item><item rdf:about="http://www.mathieurobin.com/2013/03/chroniques-jquery-episode-107/"><title>MathieuRobin : Chroniques jQuery, épisode 107</title><link>http://www.mathieurobin.com/2013/03/chroniques-jquery-episode-107/</link><dc:date>2013-03-06T09:08:23+00:00</dc:date><dc:language>fr</dc:language><dc:creator>MathieuRobin</dc:creator><dc:subject></dc:subject><description></description><content:encoded><![CDATA[<p> Salut à tous ! Semaine difficile, écriture compliquée par la fatigue, ce billet est pourtant un des plus intéressants que j’ai pu écrire dans cette chronique. Je vous laisse découvrir pourquoi :</p>
|
||
<p>Sortie de <strong>la beta 2 de jQuery 2.0 !</strong></p>
|
||
<p><a title="jQuery 2 beta 2 released !" href="http://blog.jquery.com/2013/03/01/jquery-2-0-beta-2-released/" target="_blank">L’annonce</a> a été faite vendredi par Dave Methvin. Bien entendu, le support de IE 6, 7 et 8 a été supprimé. Vous devrez donc faire quelque chose de ce genre si vous souhaitez migrer et continuer de supporter ces navigateurs :</p>
|
||
<pre><!--[if lt IE 9]>
|
||
<script src="jquery-1.9.1.js"></script>
|
||
<![endif]-->
|
||
<!--[if gte IE 9]><!-->
|
||
<script src="jquery-2.0.0b2.js"></script>
|
||
<!--<![endif]--></pre>
|
||
<p>Au delà de ça, je vous laisse regarder le lien ci-dessus, trop de détails pour vous les détailler ici et je manque malheureusement de temps. Cette version amène énormément de changements, la migration risque d’être délicate. Le lien contient le changelog complet.</p>
|
||
<p>Autre information officielle, le déroulement de jQuery Europe le 23 et 24 février dernier à Vienne. J’avais raté l’information mais mon amie <a title="Twitter - agcolom" href="https://twitter.com/agcolom/status/306474805652242433" target="_blank">Anne-Gaëlle Colom m’a permis de rattraper ce manque</a>. Voilà le <a title="jQuery Europe 2013" href="http://events.jquery.org/2013/eu/" target="_blank">lien officiel</a> sur l’évènement, vous trouverez <a title="jQuery Europe: Top International Developers Meet in Vienna" href="http://www.prnewswire.co.uk/news-releases/jquery-europe-top-international-developers-meet-in-vienna-192987771.html" target="_blank">un article assez intéressant</a> sur le sujet chez PR Newswire UK.</p>
|
||
<p>L’agence de presse déléguée sur place a partagé ses photos. Dans l’ordre <a title="jQuery Europe: Internationale Top-Software-Entwickler tagten in Wien" href="http://www.apa-fotoservice.at/galerie/3891" target="_blank">celles du vendredi</a> et <a title="jQuery Europe: Internationale Top-Software-Entwickler tagten in Wien" href="http://www.apa-fotoservice.at/galerie/3894" target="_blank">celles du samedi</a>. Et celles de Gentics Software <a title="jQuery Europe 2013 friday" href="http://www.flickr.com/photos/genticssoftware/sets/72157632829497070/" target="_blank">le vendredi</a> et <a title="jQuery Europe 2013 saturday" href="http://www.flickr.com/photos/genticssoftware/sets/72157632832438993/" target="_blank">le samedi</a>.</p>
|
||
<p>Je n’ai pas eu le temps de me pencher là dessus, mais le weekend dernier, la conférence <a title="jQueryTO - Toronto's jQuery Conference" href="http://jqueryto.com/" target="_blank">jQueryTO</a> a eu lieu à Toronto.</p>
|
||
<p>Avant de continuer, je remercie donc Anne-Gaëlle pour toutes ces informations que je n’avais pas pu glaner.</p>
|
||
<p>Un <a title="Try jQuery" href="http://try.jquery.com/" target="_blank">tutoriel imposant</a> côté officiel a été publié et me fait un peu penser aux tutoriels de la <a title="Khan Academy" href="https://www.khanacademy.org/" target="_blank">KhanAcademy</a> ou encore comme <a title="Try GitHub" href="http://try.github.com/levels/1/challenges/1" target="_blank">le tutoriel pour GitHub</a>.</p>
|
||
<p>Passons aux plugins, avec une grosse fournée cette semaine. La palme revient à Stéphanie Walter. Son <a title="Des pixels et du code 51" href="http://www.inpixelitrust.fr/blog/des-pixels-et-du-code-51/" target="_blank">épisode 51</a> était très riche pour ma propre chronique.</p>
|
||
<p><a title="Use hook" href="http://usehook.com/" target="_blank">Hook.js</a>, un plugin pour faire comme une sorte de pull-to-refresh, comme sur Twitter. Ce plugin séduit pas mal en ce moment, il a aussi eu le droit à un article chez <a title="Hook.js - Adoptez le "pull to refresh" dans vos pages web" href="http://www.lafermeduweb.net/billet/hook-js-adoptez-le-pull-to-refresh-dans-vos-pages-web-1530.html" target="_blank">La Ferme du Web</a>.</p>
|
||
<p><a title="Toolbar.js" href="http://paulkinzett.github.com/toolbar/" target="_blank">Toolbar.js</a>, une sorte de barre d’outils, très simple, mais reste efficace.</p>
|
||
<p>Dans les autres outils, on peut compter :</p>
|
||
<p><a title="JSZip" href="http://stuk.github.com/jszip/" target="_blank">JSZip</a>, pour zipper et dézipper via JavaScript.</p>
|
||
<p><strong>Edit du 6 mars 2013 : </strong>apparemment cette bibliothèque a quelques soucis majeurs, voire le commentaire de check_ca (<a title="http://www.mathieurobin.com/2013/03/chroniques-jquery-episode-107/#comment-3073" href="http://www.mathieurobin.com/2013/03/chroniques-jquery-episode-107/#comment-3073" target="_blank">http://www.mathieurobin.com/2013/03/chroniques-jquery-episode-107/#comment-3073</a>)</p>
|
||
<p><a title="MetTile" href="http://codecanyon.net/item/mettile-a-package-of-jquery-metro-ui-tiles/full_screen_preview/4158455?ref=jqueryrain" target="_blank">MetTile</a>, un ensemble de tuiles graphiques pour simuler l’interface de Metro, la dernière UI de Microsoft. Et pour une fois, ce kit est vraiment réussi.</p>
|
||
<p><a title="jQuery.IO" href="https://github.com/sporto/jquery_io.js" target="_blank">jQuery.IO</a>, un plugin qui permet de basculer de façon aisée d’un format de données à un autre.</p>
|
||
<p>Encore une fois, les liens de cette chronique sont disponibles sur <a title="Episode 107" href="https://www.evernote.com/pub/mathrobin/episode107" target="_blank">un carnet Evernote dédié</a>.</p>
|
||
<p><a href="http://www.mathieurobin.com/?flattrss_redirect&id=2904&md5=e8dbf8c0244dc3e076185639db4d52e3" title="Flattr" target="_blank"><img src="http://www.mathieurobin.com/wp-content/plugins/flattr/img/flattr-badge-large.png" alt="flattr this!" /></a></p><p><br/><i>Article original de <a href="http://www.mathieurobin.com/2013/03/chroniques-jquery-episode-107/" title="Voir l'article original">MathieuRobin</a><br/>Aller sur <a href="http://planete-jquery.fr" title="">Planète jQuery</a></i></p>]]></content:encoded></item><item rdf:about="http://www.megaptery.com/2013/03/tooltipster-tooltip-jquery-moderne-flexible.html"><title>Megaptery : Tooltipster, une tooltip jQuery moderne et flexible</title><link>http://www.megaptery.com/2013/03/tooltipster-tooltip-jquery-moderne-flexible.html</link><dc:date>2013-03-03T20:57:20+00:00</dc:date><dc:language>fr</dc:language><dc:creator>Megaptery</dc:creator><dc:subject></dc:subject><description></description><content:encoded><![CDATA[<p><strong>Tooltipster</strong> est un plugin jQuery qui permet de mettre en place des infobulles, aussi appelées « tooltip », au rollover sur n’importe quel élément HTML. Facile à prendre en main, le script est moderne et flexible avec une interface totalement customisable.</p>
|
||
<p><span></span></p>
|
||
<h3>Une infobulle à base de CSS</h3>
|
||
<p>Le plugin génère des infobulles simples et élégantes dont le style est entièrement <strong>personnalisable via CSS</strong> (typographie, couleur, padding, ombres, etc) et met à disposition plusieurs paramètres de configuration : position de la tooltip par rapport à la souris, délai d’apparition, largeur automatique ou fixe, affichage et couleur de la flêche, placement « intelligent » pour éviter les collisions… etc. Plusieurs thèmes CSS sont disponibles pour skinner vos tooltips, que vous pouvez bien sûr modifier à votre convenance.</p>
|
||
<p><img src="http://www.megaptery.com/wp-content/uploads/2013/03/tooltipster_jquery.jpg" alt="tooltipster_jquery" class="aligncenter size-full wp-image-5312" /></p>
|
||
<p>Le contenu de l’infobulle peut provenir de différentes sources (en brut dans le JS, <em>title</em> d’un lien, ou encore appel AJAX) et il existe des fonctions de callback. On retrouve également un paramètre <em>animation</em> qui détermine la manière dont l’infobulle apparaît en arrivée et en sortie, le tout géré en full CSS via les transitions CSS3 (sauf pour IE). Vous pouvez donc modifier ou créer vos propres animations via la feuille de style fournie avec le script. Vous l’aurez compris, le plugin est assez <strong>modulable</strong>.</p>
|
||
<h3>Mise en place d’une infobulle</h3>
|
||
<p>On commence par inclure jQuery et le plugin Tooltipster (feuille de style et script JS) que vous pouvez télécharger aussi bien sur le site officiel du plugin que sur GitHub :</p>
|
||
<pre>
|
||
<link rel="stylesheet" type="text/css" href="css/tooltipster.css" />
|
||
<script type="text/javascript" src="js/jquery.min.js"></script>
|
||
<script type="text/javascript" src="js/jquery.tooltipster.min.js"></script>
|
||
</pre>
|
||
<p>On définit une classe CSS (ici <em>tooltip</em>) à appliquer sur les éléments HTML sur lesquels on veut afficher les infobulles. Par défaut, Tooltipster utilise l’attribut <em>title</em> pour remplir la bulle, que ce soit une <em>div</em>, une image ou un lien. A noter que le script nous permet d’utiliser n’importe quelle balise HTML dans l’attribut <em>title</em>. Vous pouvez par exemple insérer des images, à condition de spécifier ses dimensions dans les attributs <em>width</em> et <em>height</em>, ou des balises de formatage de texte.</p>
|
||
<pre>
|
||
<a title="Megaptery, explorez les profondeurs du web" href="http://www.megaptery.com/" class="tooltip">
|
||
<img src="http://www.megaptery.com/megaptery_250x250.jpg" width="250" height="250" />
|
||
</a>
|
||
</pre>
|
||
<p>On termine par activer le plugin jQuery. Pour cela, on appelle Tooltipster sur la classe CSS définie précédemment et votre infobulle est alors fonctionnelle :</p>
|
||
<pre>
|
||
$(document).ready(function() {
|
||
$('.tooltip').tooltipster();
|
||
});
|
||
</pre>
|
||
<h3>Utilisation des thèmes CSS</h3>
|
||
<p>Le style de vos infobulles peut être facilement changé en modifiant le thème par défaut de Tooltipster qui se trouve dans le fichier <em>tooltipster.css</em>. Vous avez également la possibilité d’ajouter des nouveaux thèmes, très pratique si vous souhaitez en utiliser plusieurs sur votre site). Pour cela, partez de l’exemple et ajouter votre touche personnelle :</p>
|
||
<pre>
|
||
.my-custom-theme {
|
||
border-radius: 5px;
|
||
border: 2px solid #000;
|
||
background: #4c4c4c;
|
||
color: #fff;
|
||
}
|
||
|
||
.my-custom-theme .tooltipster-content {
|
||
font-family: Arial, sans-serif;
|
||
font-size: 14px;
|
||
line-height: 16px;
|
||
padding: 8px 10px;
|
||
}
|
||
</pre>
|
||
<p>Il vous suffit alors de sélectionner votre thème personnalisé via le paramètre <em>theme</em> comme ceci :</p>
|
||
<pre>
|
||
$('.tooltip').tooltipster({
|
||
theme: '.my-custom-theme'
|
||
});
|
||
</pre>
|
||
<p>Pour conclure, Tooltipster est un plugin jQuery rapide à mettre en place pour afficher des infobulles entièrement customisables.</p>
|
||
<p><strong>Requis</strong> : jQuery<br />
|
||
<strong>Compatibilité</strong> : Firefox, Chrome, Opera, Safari, IE8+<br />
|
||
<strong>Démonstration</strong> : <a href="http://calebjacob.com/tooltipster/">http://calebjacob.com/tooltipster/</a><br />
|
||
<strong>Licence</strong> : MIT</p><p><br/><i>Article original de <a href="http://www.megaptery.com/2013/03/tooltipster-tooltip-jquery-moderne-flexible.html" title="Voir l'article original">Megaptery</a><br/>Aller sur <a href="http://planete-jquery.fr" title="">Planète jQuery</a></i></p>]]></content:encoded></item><item rdf:about="http://www.lafermeduweb.net/billet/spectrum-un-colorpicker-jquery-tres-complet-1527.html"><title>LaFermeDuWeb : Spectrum - Un colorpicker jQuery très complet</title><link>http://www.lafermeduweb.net/billet/spectrum-un-colorpicker-jquery-tres-complet-1527.html</link><dc:date>2013-02-27T09:12:06+00:00</dc:date><dc:language>fr</dc:language><dc:creator>LaFermeDuWeb</dc:creator><dc:subject></dc:subject><description></description><content:encoded><![CDATA[<div>
|
||
<a href="http://www.lafermeduweb.net/billet/spectrum-un-colorpicker-jquery-tres-complet-1527.html">
|
||
<img style="border: 1px solid #000000;" src="http://www.lafermeduweb.net/images/billets/2013-02/spectrum-colorpicker-javascript_topBillet.jpg" alt="Spectrum - Un colorpicker jQuery très complet" />
|
||
</a>
|
||
</div>
|
||
<div>Spectrum est un plugin jQuery permettant de créer un colorpicker très complet pour vos applications web et mobiles.</div><p><br/><i>Article original de <a href="http://www.lafermeduweb.net/billet/spectrum-un-colorpicker-jquery-tres-complet-1527.html" title="Voir l'article original">LaFermeDuWeb</a><br/>Aller sur <a href="http://planete-jquery.fr" title="">Planète jQuery</a></i></p>]]></content:encoded></item><item rdf:about="http://www.mathieurobin.com/2013/02/chroniques-jquery-episode-106/"><title>MathieuRobin : Chroniques jQuery, épisode 106</title><link>http://www.mathieurobin.com/2013/02/chroniques-jquery-episode-106/</link><dc:date>2013-02-26T14:27:23+00:00</dc:date><dc:language>fr</dc:language><dc:creator>MathieuRobin</dc:creator><dc:subject></dc:subject><description></description><content:encoded><![CDATA[<p>Salut tout le monde ! Désolé pour le retard de publication mais j’ai eu vraiment beaucoup de boulot et un peu de vie de famille aussi.</p>
|
||
<p>Heureusement pas grand chose à signaler cette semaine, la seule nouvelle qui a retenu mon attention est <strong>la sortie de jQuery Mobile 1.3</strong>.</p>
|
||
<p><a title="jQuery Mobile 1.3.0 Released" href="http://jquerymobile.com/blog/2013/02/20/jquery-mobile-1-3-0-released/" target="_blank">L’annonce</a> publiée mercredi par Todd Parker alors que prévenue lundi à l’origine, mais bon, les gars de l’équipe restent des volontaires, ils font au possible. Rien à redire donc, d’autant que je connais ça aussi.</p>
|
||
<p>L’accent pour cette nouvelle version a notamment été mis sur l’approche du responsive design. Une question récurrente est l’utilisation ou non du pur responsive ou mélanger un site classique et un site mobile. Leur réponse est : les 2. Il semble pratique en effet d’avoir un site consultable partout et un site vraiment dédié à un usage mobile optimisé.</p>
|
||
<p>Au passage, petite info bonne à savoir, ils ont travaillé pas mal donc sur porter en CSS ce qu’il était possible de faire avec au lieu de le faire en JS.</p>
|
||
<p>De nouveaux widgets ont fait leur apparition :</p>
|
||
<ul>
|
||
<li>les <a title="jQuery Mobile - Pänels" href="http://view.jquerymobile.com/1.3.0/docs/widgets/panels/" target="_blank">Panels</a> ;</li>
|
||
<li>les <a title="Table: Reflow" href="http://view.jquerymobile.com/1.3.0/docs/widgets/table-reflow/" target="_blank">tableaux responsives</a> ;</li>
|
||
<li>le <a title="Column-Toggle Table Widget" href="http://api.jquerymobile.com/table-columntoggle/" target="_blank">sélecteur de colonnes</a> ;</li>
|
||
<li>le <a title="Rangeslider Widget" href="http://api.jquerymobile.com/rangeslider/" target="_blank">dual range slider</a> ;</li>
|
||
<li>les <a title="Grids" href="http://view.jquerymobile.com/1.3.0/docs/widgets/grids/" target="_blank">grilles responsives</a>.</li>
|
||
</ul>
|
||
<p>Le support de IE 10 et Windows Phone 8 vient compléter la liste des choses clés.<span> </span><span>Evidemment, jQuery 1.9.1 est supporté et ils sont confiants sur le support de la très proche jQuery 2.0. à venir.</span></p>
|
||
<p>Un évènement facilitant la navigation. Je vous invite à jouer avec <a title="Navigate" href="http://api.jquerymobile.com/navigate/" target="_blank">$.mobile.navigate</a>.</p>
|
||
<p>Dans les plus petites modifs restant bien pratiques, vous pouvez choisir l’emplacement du bouton de fermeture ou carrément le désactiver. Vous pouvez aussi refuser le clic à l’extérieur comme pouvant fermer les popups, les transformant ainsi en fenêtre modale. Bien pratique à l’occasion.</p>
|
||
<p>Coté sites, vous avez à votre disposition <a title="Demo center" href="http://view.jquerymobile.com/1.3.0/" target="_blank">un nouveau site de démonstration</a> et de <a title="Widgets documentation" href="http://api.jquerymobile.com/category/widgets/" target="_blank">documentation</a>.</p>
|
||
<p>Attention, alerte au deprecated, <strong>les nested listviews sont désormais deprecated</strong>, leur support sera supprimé avec la 1.4. Commencez donc à porter votre code si vous voulez pouvoir assurer les mises à jour.</p>
|
||
<p>Vous pouvez accéder au <a title="Changelog jQuery Mobile 1.3" href="http://jquerymobile.com/blog/2013/02/20/jquery-mobile-1-3-0-released/#changelog" target="_blank">changelog complet</a> et comme d’habitude à <a title="Episode 106 sur Evernote" href="https://www.evernote.com/pub/mathrobin/episode106" target="_blank">mon carnet Evernote partagé dédié</a>.</p>
|
||
<p>
|
||
<p><a href="http://www.mathieurobin.com/?flattrss_redirect&id=2896&md5=8f760243da615a978d6faf8fccd3f0a6" title="Flattr" target="_blank"><img src="http://www.mathieurobin.com/wp-content/plugins/flattr/img/flattr-badge-large.png" alt="flattr this!" /></a></p><p><br/><i>Article original de <a href="http://www.mathieurobin.com/2013/02/chroniques-jquery-episode-106/" title="Voir l'article original">MathieuRobin</a><br/>Aller sur <a href="http://planete-jquery.fr" title="">Planète jQuery</a></i></p>]]></content:encoded></item><item rdf:about="http://www.lafermeduweb.net/billet/fancy-input-donnez-du-style-a-vos-input-et-textarea-en-css3-1525.html"><title>LaFermeDuWeb : Fancy Input - Donnez du style à vos input et textarea en CSS3</title><link>http://www.lafermeduweb.net/billet/fancy-input-donnez-du-style-a-vos-input-et-textarea-en-css3-1525.html</link><dc:date>2013-02-25T09:16:15+00:00</dc:date><dc:language>fr</dc:language><dc:creator>LaFermeDuWeb</dc:creator><dc:subject></dc:subject><description></description><content:encoded><![CDATA[<div>
|
||
<a href="http://www.lafermeduweb.net/billet/fancy-input-donnez-du-style-a-vos-input-et-textarea-en-css3-1525.html">
|
||
<img style="border: 1px solid #000000;" src="http://www.lafermeduweb.net/images/billets/2013-02/fancy-input-css3_topBillet.jpg" alt="Fancy Input - Donnez du style à vos input et textarea en CSS3" />
|
||
</a>
|
||
</div>
|
||
<div>Fancy Input est un plugin jQuery permettant de mettre des effets de frappe élégants et dynamiques sur vos input et textarea grâce à du CSS3.</div><p><br/><i>Article original de <a href="http://www.lafermeduweb.net/billet/fancy-input-donnez-du-style-a-vos-input-et-textarea-en-css3-1525.html" title="Voir l'article original">LaFermeDuWeb</a><br/>Aller sur <a href="http://planete-jquery.fr" title="">Planète jQuery</a></i></p>]]></content:encoded></item><item rdf:about="http://js.4design.tl/diyslider-slider-leger-et-personnalisable-1524"><title>Js4Design : DIYSlider — Slider léger et personnalisable</title><link>http://js.4design.tl/diyslider-slider-leger-et-personnalisable-1524</link><dc:date>2013-02-18T16:20:13+00:00</dc:date><dc:language>fr</dc:language><dc:creator>Js4Design</dc:creator><dc:subject></dc:subject><description></description><content:encoded><![CDATA[<p><a href="http://pioul.fr/jquery-diyslider" target="_blank">DIYSlider</a> est un script jQuery léger et personnalisable dont le but est de servir de fondations à vos développements de… sliders ! Quelques exemples d’utilisation <a href="http://jsfiddle.net/pioul/ba5jh/4/" target="_blank">ici</a> ou <a href="http://jsfiddle.net/pioul/7Yf34/" target="_blank">là</a>. Le principe est de transformer une série de div en diaporama avec une foultitude d’options, de méthodes et d’évènements, pour une modique taille de 3,56 kb ou 1,14 kb gzippé !<span></span></p>
|
||
<p>→ DIYSlider est <a href="https://github.com/pioul/jQuery.DIYSlider" target="_blank">disponible sur Github</a>.</p><p><br/><i>Article original de <a href="http://js.4design.tl/diyslider-slider-leger-et-personnalisable-1524" title="Voir l'article original">Js4Design</a><br/>Aller sur <a href="http://planete-jquery.fr" title="">Planète jQuery</a></i></p>]]></content:encoded></item><item rdf:about="http://www.mathieurobin.com/2013/02/chroniques-jquery-episode-105/"><title>MathieuRobin : Chroniques jQuery, épisode 105</title><link>http://www.mathieurobin.com/2013/02/chroniques-jquery-episode-105/</link><dc:date>2013-02-18T09:09:11+00:00</dc:date><dc:language>fr</dc:language><dc:creator>MathieuRobin</dc:creator><dc:subject></dc:subject><description></description><content:encoded><![CDATA[<p>Hello tout le monde ! La chronique est vraiment de retour, je vous l’avais promis, je m’y tiens <img src="http://www.mathieurobin.com/wp-includes/images/smilies/icon_wink.gif" alt=";)" class="wp-smiley" /> </p>
|
||
<p>Côté officiel, on a <strong>la sortie de jQuery UI 1.10.1 !</strong></p>
|
||
<p>Comme d’habitude, c’est Scott González qui se colle à <a title="jQuery UI 1.10.1" href="http://blog.jqueryui.com/2013/02/jquery-ui-1-10-1/" target="_blank">l’annonce de cette version de maintenance</a>, la première de la 1.10. Celle-ci n’apporte rien de plus que des correctifs de bogues pour les widgets Accordion, Autocomplete, Datepicker, Dialog, Menu, Slider, Draggable, Position, Effects ainsi qu’au framework CSS.</p>
|
||
<p>Comme d’habitude, le <a title="jQuery UI 1.10.1 Changelog" href="http://jqueryui.com/changelog/1.10.1/" target="_blank">changelog est disponible</a> et <a title="jQuery UI 1.10 Upgrade Guide" href="http://jqueryui.com/upgrade-guide/1.10/" target="_blank">le guide de mise à jour</a> a lui aussi été mis à jour.</p>
|
||
<p>Et on a aussi <a title="jQuery Mobile Team Meeting" href="http://jquery.org/updates/2013/02/14/status-update-145/" target="_blank">les notes de la dernière réunion de l’équipe de jQuery Mobile</a>. Pas mal d’infos sont donc disponibles pour nous mettre l’eau à la bouche :</p>
|
||
<ul>
|
||
<li><span>La version finale de la 1.3.0 sera disponible normalement aujourd’hui ;</span></li>
|
||
<li>Nouvelle version du site de documentation ;</li>
|
||
<li>Un apport supplémentaire de démos est en travail pour aujourd’hui aussi.</li>
|
||
</ul>
|
||
<p>Des trucs sympas en prévision quoi.</p>
|
||
<p>Et pour terminer, un tutoriel assez balaise sur <a title="Deferreds and Promises in JavaScript" href="http://flaviocopes.com/deferred-and-promises-in-javascript/" target="_blank">l’usage des objets Deferred et Promise</a>, notamment dans jQuery mais aussi EmberJS. Je le conseille sincèrement à la lecture, c’est un beau morceau.</p>
|
||
<p>Comme d’habitude, les liens ici présents sont disponibles sur un <a title="Evernote - Chroniques, épisode 105" href="https://www.evernote.com/pub/mathrobin/episode105" target="_blank">carnet partagé dédié sur Evernote</a>. Pour rappel, <a title="Toutes mes ressources jQuery" href="http://www.mathieurobin.com/2012/12/toutes-mes-ressources-jquery/" target="_blank">pourquoi je partage sur Evernote et comme s’en servir</a>.</p>
|
||
<p><a href="http://www.mathieurobin.com/?flattrss_redirect&id=2857&md5=95e3899c529ae754e3fc14aea6b0fb06" title="Flattr" target="_blank"><img src="http://www.mathieurobin.com/wp-content/plugins/flattr/img/flattr-badge-large.png" alt="flattr this!" /></a></p><p><br/><i>Article original de <a href="http://www.mathieurobin.com/2013/02/chroniques-jquery-episode-105/" title="Voir l'article original">MathieuRobin</a><br/>Aller sur <a href="http://planete-jquery.fr" title="">Planète jQuery</a></i></p>]]></content:encoded></item><item rdf:about="http://blog.ludikreation.com/2013/02/14/gmap3-plugin-jquery-facilitez-vous-lintegration-de-google-maps/"><title>LudiKreation : GMAP3 – Plugin jQuery – Facilitez-vous l’intégration de Google Maps</title><link>http://blog.ludikreation.com/2013/02/14/gmap3-plugin-jquery-facilitez-vous-lintegration-de-google-maps/</link><dc:date>2013-02-14T12:32:26+00:00</dc:date><dc:language>fr</dc:language><dc:creator>LudiKreation</dc:creator><dc:subject></dc:subject><description></description><content:encoded><![CDATA[<div></div>
|
||
<p>Il y avait quelques temps déjà que je devais vous faire un nouvel article sur le <strong>plugin jQuery GMAP3</strong>, plugin qui facilite grandement l’intégration de <strong>Google Maps</strong> sur vos sites web et le tout via le <strong>Framework jQuery</strong>.</p>
|
||
<p>Je vous avais déjà présenté ce <strong>plugin jQuery</strong> sur d’autres articles du blog, comme sur <a href="http://blog.ludikreation.com/2011/11/24/gmap3-plugin-jquery-pour-api-google-maps-3eme-version/" title="GMAP3">GMap3 – Plugin jQuery pour API Google Maps 3ème version</a>. Mais <strong>GMAP3</strong> a évolué et s’est vu doter d’un nouveau site web depuis.</p>
|
||
<p>Certes, <strong>Google</strong> facilite déjà beaucoup l’intégration de son <strong>API</strong> sur les sites web, mais via <strong>GMAP3</strong> c’est encore plus simple et surtout avec <strong>jQuery</strong>.</p>
|
||
<p><img src="http://blog.ludikreation.com/wp-content/uploads/logo-gmap3.png" alt="logo-gmap3" width="198" height="78" class="aligncenter size-full wp-image-1130" /></p>
|
||
<p>En plus de pouvoir utiliser toutes les méthodes natives à l’<strong>API</strong> fournie par <strong>Google</strong>, <strong>GMAP3</strong> va vous permettre, entre autre, de :</p>
|
||
<ul>
|
||
<li>Customiser vos maps</li>
|
||
<li>Créer vos menus contextuels</li>
|
||
<li>D’ajouter des recherches d’adresses avec auto-completion</li>
|
||
<li>Créer vos marqueurs sur les maps</li>
|
||
<li>Afficher le streetview de manière différente</li>
|
||
<li>etc…</li>
|
||
</ul>
|
||
<p>Le tout aisément, sans compter les méthodes comme : overlays, clusters, callbacks, events etc… présentes dans de nombreux <strong>plugins jQuery</strong>.</p>
|
||
<p>L’utilisation de base de ce <strong>plugin jQuery</strong> :</p>
|
||
<p>Intégration des librairies qui vont être utilisées (jQuery, googlemaps et gmap3)</p>
|
||
<div><div><script type="text/javascript" src="js/jquery.js"></script><br />
|
||
<script type="text/javascript"<br />
|
||
src="http://maps.google.com/maps/api/js?sensor=false&amp;language=en"><br />
|
||
<script type="text/javascript" src="js/gmap3.min.js"></script></div></div>
|
||
<p>Le code jQuery pour l’affichage d’une map Google Maps :</p>
|
||
<div><div>$("#my_map").gmap3();</div></div>
|
||
<p>La balise div d’accueil de la map :</p>
|
||
<div><div><div id="my_map"></div></div></div>
|
||
<p>Puis un peu de CSS minimum pour donner une dimension à la balise div d’accueil :</p>
|
||
<div><div>#my_map{<br />
|
||
height: 350px;<br />
|
||
width: 600px;<br />
|
||
}</div></div>
|
||
<p>Vous l’aurez compris, c’est simple, vous avez une page de démo via <a href="http://gmap3.net/en/pages/19-demo/" title="GMAP3 démo">ce lien</a> afin de voir une partie de ce que l’on peut faire avec ce plugin jQuery.</p>
|
||
<p>Site officiel du <strong>plugin jQuery GMAP3</strong> : <a href="http://gmap3.net" title="Plugin jQuery GMAP3">http://gmap3.net</a><br />
|
||
<a href="http://gmap3.net/en/catalog/" title="Documentation GMAP3">Documentation GMAP3</a><br />
|
||
<a href="http://gmap3.net/en/upload/gmap3/gmap3v5.0b.zip" title="Téléchargement GMAP3">Téléchargement GMAP3</a></p>
|
||
<p><strong>Articles qui peuvent vous intéresser :</strong></p>
|
||
<ul>
|
||
<li><a href="http://blog.ludikreation.com/2013/01/23/growl-plugin-jquery-la-simplebox">Growl – Plugin jQuery – La SimpleBox</a></li>
|
||
<li><a href="http://blog.ludikreation.com/2013/01/16/quicksearch-plugin-jquery-la-recherche-facile-dans-vos-listings">quickSearch – Plugin jQuery – La recherche facile dans vos listings</a></li>
|
||
<li><a href="http://blog.ludikreation.com/2012/10/17/caroufredsel-plugin-jquery-le-carrousel-customisable">carouFredSel – Plugin jQuery – Le carrousel customisable</a></li>
|
||
<li><a href="http://blog.ludikreation.com/2012/08/03/tiny-circleslider-plugin-jquery-le-slider-en-cercle-original">Tiny Circleslider – Plugin jQuery – Le slider en cercle original</a></li>
|
||
<li><a href="http://blog.ludikreation.com/2012/07/23/jnotify-plugin-jquery-la-notification-a-portee-de-clic">jNotify – Plugin jQuery – La notification à portée de clic</a></li>
|
||
</ul>
|
||
<p><iframe src="http://www.facebook.com/widgets/like.php?href=http://blog.ludikreation.com/2013/02/14/gmap3-plugin-jquery-facilitez-vous-lintegration-de-google-maps"<br />
|
||
scrolling="no" frameborder="0"<br />
|
||
style="border:none; width:540px; height:50px"></iframe></p><p><br/><i>Article original de <a href="http://blog.ludikreation.com/2013/02/14/gmap3-plugin-jquery-facilitez-vous-lintegration-de-google-maps/" title="Voir l'article original">LudiKreation</a><br/>Aller sur <a href="http://planete-jquery.fr" title="">Planète jQuery</a></i></p>]]></content:encoded></item><item rdf:about="http://www.lafermeduweb.net/billet/threesixty-slider-un-plugin-jquery-de-slider-d-image-a-360-1520.html"><title>LaFermeDuWeb : Threesixty Slider - Un plugin jQuery de slider d'image à 360°</title><link>http://www.lafermeduweb.net/billet/threesixty-slider-un-plugin-jquery-de-slider-d-image-a-360-1520.html</link><dc:date>2013-02-14T09:19:23+00:00</dc:date><dc:language>fr</dc:language><dc:creator>LaFermeDuWeb</dc:creator><dc:subject></dc:subject><description></description><content:encoded><![CDATA[<div>
|
||
<a href="http://www.lafermeduweb.net/billet/threesixty-slider-un-plugin-jquery-de-slider-d-image-a-360-1520.html">
|
||
<img style="border: 1px solid #000000;" src="http://www.lafermeduweb.net/images/billets/2013-02/slider-360-jquery_topBillet.jpg" alt="Threesixty Slider - Un plugin jQuery de slider dimage à 360°" />
|
||
</a>
|
||
</div>
|
||
<div>Threesixty Slider, comme son nom l'indique, est un plugin jQuery permettant de mettre en place des sliders d'images à 360°</div><p><br/><i>Article original de <a href="http://www.lafermeduweb.net/billet/threesixty-slider-un-plugin-jquery-de-slider-d-image-a-360-1520.html" title="Voir l'article original">LaFermeDuWeb</a><br/>Aller sur <a href="http://planete-jquery.fr" title="">Planète jQuery</a></i></p>]]></content:encoded></item><item rdf:about="http://www.mathieurobin.com/2013/02/comment-bien-choisir-vos-plugins/"><title>MathieuRobin : Comment bien choisir vos plugins ?</title><link>http://www.mathieurobin.com/2013/02/comment-bien-choisir-vos-plugins/</link><dc:date>2013-02-13T09:11:10+00:00</dc:date><dc:language>fr</dc:language><dc:creator>MathieuRobin</dc:creator><dc:subject></dc:subject><description></description><content:encoded><![CDATA[<p>J’ai eu plusieurs fois de longues discussions avec différentes personnes ces derniers mois à propos des plugins jQuery. Souvent très intéressantes et avec une problématique toujours récurrente. <em><strong>Comment choisir ses plugins ?</strong></em></p>
|
||
<p>Il est vrai que la question est délicate mais certains critères sont simples et permettent de faire un énorme tri. Je vous en expose quelques uns ici, non triés, vous pouvez y conférer l’importance qui vous convient.</p>
|
||
<p><strong>Critère n°1 : l’activité du plugin</strong></p>
|
||
<p>Quand vous utilisez un logiciel, c’est comme lorsque vous utilisez une voiture ou, mieux, un ascenseur. En général, vous appréciez que quelqu’un soit capable de vous aider. Si possible un vrai expert de la technologie concernée qui peut réellement agir efficacement.</p>
|
||
<p>Un plugin, comme tout logiciel, doit encore être maintenu. En une phrase : je vous laisse à votre imagination pour un ascenseur non maintenu.</p>
|
||
<p><strong>Critère n°2 : Responsive design</strong></p>
|
||
<p>De mémoire, les premières publications concernant un design web dynamiquement adaptatif pour les mobiles datent de novembre 2009 (<a title="Mobile First" href="http://www.lukew.com/ff/entry.asp?933" target="_blank">Mobile First</a>). C’était il y a un peu moins de 4 ans. Comme l’a très bien affirmé <a title="Kevin Schaaf" href="https://twitter.com/kevinpschaaf" target="_blank">Kevin Schaaf</a> de <a title="EnyoJS" href="http://enyojs.com/" target="_blank">Enyo</a> à <a title="dotJS" href="http://www.dotjs.eu/" target="_blank">dotJS</a> : »<em>l’heure est venue d’arrêter de se demander si ça sera responsive ou non. Ça doit l’être, c’est tout</em>« .</p>
|
||
<p>Le responsive design ne fait pas tout. Je ne sais quoi penser de la polémique à propos du sacrifice des sites mobiles dédiés au profit d’un unique site responsive. Il y a toute une question d’impact sur le SEO. Quoi qu’il en soit, que vous ayez un site mobile ou non, votre site doit être responsive.</p>
|
||
<p><del>D’ailleurs une version responsive de ce blog est en cours de développement. L’API de WordPress est juste infâme.</del></p>
|
||
<p><strong>Critère n°3 : les tests</strong></p>
|
||
<p>On reste dans la métaphore ascensionnelle avec l’ascenseur qui sera plus parlante que la voiture. Sincèrement, vous monteriez dans un ascenseur en sachant pertinemment que son constructeur/installateur n’a fait aucun test hormis ceux à la conception en usine ?</p>
|
||
<p><strong>Critère n°4 : la documentation</strong></p>
|
||
<p>Pour le coup, changement de métaphore. Vous aimez bien monté les meubles d’un certain fabricant suédois sans plans ?</p>
|
||
<p><strong>Critère n°5 : l’accès aux sources</strong></p>
|
||
<p>Arrêtons de charger des plugins à droite à gauche sur des sites dédiés plus ou moins bien référencés. GitHub existe, BitBucket aussi, le partage de code est facile, simple et plus qu’efficace. Un développeur qui garde pour lui son code ne mérite plus à l’heure actuelle qu’on utilise son travail. Et accessoirement, c’est surtout une question de performances et de qualité de code. Le fait de pouvoir plancher à plusieurs sur un problème peut beaucoup aider en général.</p>
|
||
<p>Des annuaires de qualité existent, je pense par exemple au <a title="Plugins jQuery" href="http://plugins.jquery.com/" target="_blank">site officiel</a> fraîchement refait. Ou à <a title="jQuery Rain" href="http://www.jqueryrain.com/" target="_blank">jQuery Rain</a>. Ou encore des testeurs en chaîne tels que l’ami <a title="Megaptery" href="http://www.megaptery.com" target="_blank">Megaptery</a> ou encore <a title="Js4Design" href="http://js.4design.tl/" target="_blank">Js4Design</a>. Il est rare que je cherche un plugin ailleurs que sur ces deux derniers sites pour une utilisation intensive professionnelle.</p>
|
||
<p><strong>Critère n°6 : le prix</strong></p>
|
||
<p>La gratuité d’un soft, c’est très bien. Mais ça ne fait pas tout. Des sites comme <a title="CodeCanyon" href="http://codecanyon.net/category/javascript" target="_blank">CodeCanyon</a>, proposent d’excellentes ressources payantes. Mais parfois, il revient moins cher d’acheter un plugin très bien réalisé quelques $/€ plutôt que de passer plusieurs heures à déboguer/adapter un plugin trouver gratuitement.</p>
|
||
<p><strong>Critère n°7 : la compatibilité</strong></p>
|
||
<p>Je ne vous ferai pas l’affront de réclamer que vos plugins soient <a title="Pourquoi continuer de supporter IE 6" href="http://www.mathieurobin.com/2012/12/pourquoi-continuer-de-supporter-ie-6/" target="_blank">compatibles IE 6</a> ou Netscape, mais sur tous les navigateurs de moins de 5 ans d’age, ce n’est pas trop demander, surtout quand on s’appuie sur jQuery qui se charge de l’essentiel.</p>
|
||
<p><strong>Conclusion</strong></p>
|
||
<p>Ce sont des règles d’or pour moi, mes plugins ne les respectent pas toutes, j’y travaille. Cependant elles peuvent vous éviter un paquet de soucis.</p>
|
||
<p><a href="http://www.mathieurobin.com/?flattrss_redirect&id=2750&md5=0143a4e6e91be034ee6742f9df67af06" title="Flattr" target="_blank"><img src="http://www.mathieurobin.com/wp-content/plugins/flattr/img/flattr-badge-large.png" alt="flattr this!" /></a></p><p><br/><i>Article original de <a href="http://www.mathieurobin.com/2013/02/comment-bien-choisir-vos-plugins/" title="Voir l'article original">MathieuRobin</a><br/>Aller sur <a href="http://planete-jquery.fr" title="">Planète jQuery</a></i></p>]]></content:encoded></item><item rdf:about="http://www.mathieurobin.com/2013/02/chroniques-jquery-episode-104/"><title>MathieuRobin : Chroniques jQuery, épisode 104</title><link>http://www.mathieurobin.com/2013/02/chroniques-jquery-episode-104/</link><dc:date>2013-02-11T09:09:10+00:00</dc:date><dc:language>fr</dc:language><dc:creator>MathieuRobin</dc:creator><dc:subject></dc:subject><description></description><content:encoded><![CDATA[<p>Retour de la chronique après des semaines d’inactivité. Pour celle-ci, je ne serai malheureusement pas très complet et détaillé, pas le temps de revenir sur deux semaines pleines d’actualité mais le retour à la normale est en cours.</p>
|
||
<p>Du côté de l’officiel, on a la mise à disposition du <strong>premier patch jQuery 1.9.1 !</strong></p>
|
||
<p>Essentiellement des correctifs de bogues et de régressions, je vous laisse lire le changelog et le <a title="jQuery Core 1.9 Upgrade Guide" href="http://jquery.com/upgrade-guide/1.9/" target="_blank">guide de migration</a> sur <a title="jQuery 1.9.1 Released" href="http://blog.jquery.com/2013/02/04/jquery-1-9-1-released/" target="_blank">l’annonce officielle</a>.</p>
|
||
<p>Du côté de jQuery Mobile, on a la <strong>RC1 de la 1.3</strong> qui est sorti. L’annonce officielle est disponible <a title="jQuery Mobile 1.3.0 RC1 Released" href="http://jquerymobile.com/blog/2013/02/04/jquery-mobile-1-3-0-rc1-released/" target="_blank">ici</a>. Des petites nouveautés sympathiques sont incluses. Il y a notamment les panels qui m’ont l’air pas mal.</p>
|
||
<p>Autre chose que j’attendais depuis longtemps, une <a title="QUnit 1.11 Release: A Look Back (and Forth)" href="http://blog.jquery.com/2013/01/24/qunit-1-11-release-a-look-back-and-forth/" target="_blank">mise à jour</a> de <strong>QUnit vers la 1.11</strong>. La modification clé qui m’importe est l’affichage du temps d’exécution par test. Celle-ci permettant donc de profiler un peu mieux l’exécution de vos applications.</p>
|
||
<p>Côté non-officiel, je vous incite à jeter un oeil à tout ça :</p>
|
||
<ul>
|
||
<li><span><a title="Making Use of jQuery UI’s Widget Factory" href="http://net.tutsplus.com/tutorials/javascript-ajax/an-in-depth-review-of-jquerys-widget-factory/" target="_blank">Making Use of jQuery UI’s Widget Factory</a>, un tutoriel pour utiliser la widget factory de jQuery UI par NetTuts+ ;<br />
|
||
</span></li>
|
||
<li>Des <a title="Metro Notifications" href="http://codecanyon.net/item/metro-notifications/full_screen_preview/3903495" target="_blank">notifications à la façon de l’interface Metro</a>, c’est particulièrement réussi ;</li>
|
||
<li>Le <a title="Créer sa première application jQuery Mobile" href="http://www.journaldunet.com/developpeur/client-web/tutoriel-jquery-mobile/" target="_blank">JournalDuNet</a> a publié un tutoriel pour créer une première application jQuery Mobile, ce tutoriel est directement inspiré du livre <a href="http://www.amazon.fr/gp/product/2744025631/ref=as_li_ss_tl?ie=UTF8&camp=1642&creative=19458&creativeASIN=2744025631&linkCode=as2&tag=mathieurcom-21">Introduction à JQuery Mobile</a><img style="border: none !important; margin: 0px !important;" alt="" src="http://www.assoc-amazon.fr/e/ir?t=mathieurcom-21&l=as2&o=8&a=2744025631" width="1" height="1" border="0" /> de Jon Reid ;</li>
|
||
<li>Et mon ami canhory a publié <a title="Jquery.easyplug" href="http://cahnory.github.com/jQuery.easyPlug/" target="_blank">un boilerplate de plugins</a> que je n’ai pas pu tester en profondeur mais bien pensé.</li>
|
||
</ul>
|
||
<p>Je sors le tutoriel suivant de la pile ci-dessus parce qu’il est vraiment important et clé pour comprendre la mécanique interne de jQuery. « <a title="Do You Know When You Are Looping in jQuery?" href="http://www.elijahmanor.com/2013/01/yo-dawg-i-herd-you-like-loops-so-jquery.html" target="_blank">Do You Know When You Are Looping in jQuery?</a> » explique <strong>la logique des boucles de jQuery</strong>. La compréhension des explications qui y sont dispensées sont clés pour une amélioration plus que significative des performances de vos applications.</p>
|
||
<p>Comme d’habitude, les ressources de cette chronique sont disponibles dans <a title="Episode 104, chroniques jQuery" href="https://www.evernote.com/pub/mathrobin/episode104" target="_blank">un carnet partagé dédié sur Evernote</a>.</p>
|
||
<p>Bonne semaine à tous, et normalement à la semaine prochaine pour la chronique et dans le courant de la semaine pour d’autres publications.</p>
|
||
<p><a href="http://www.mathieurobin.com/?flattrss_redirect&id=2834&md5=2d4cf9be417bb0246861164484444843" title="Flattr" target="_blank"><img src="http://www.mathieurobin.com/wp-content/plugins/flattr/img/flattr-badge-large.png" alt="flattr this!" /></a></p><p><br/><i>Article original de <a href="http://www.mathieurobin.com/2013/02/chroniques-jquery-episode-104/" title="Voir l'article original">MathieuRobin</a><br/>Aller sur <a href="http://planete-jquery.fr" title="">Planète jQuery</a></i></p>]]></content:encoded></item><item rdf:about="http://www.megaptery.com/2013/02/vague-du-web-3.html"><title>Megaptery : La Vague du Web #3</title><link>http://www.megaptery.com/2013/02/vague-du-web-3.html</link><dc:date>2013-02-10T17:14:43+00:00</dc:date><dc:language>fr</dc:language><dc:creator>Megaptery</dc:creator><dc:subject></dc:subject><description></description><content:encoded><![CDATA[<p><strong>La Vague du Web</strong> est un condensé de ressources en tout genre vous permettant de suivre les dernières tendances web afin d’enrichir vos acquis en webdesign et développement… Bref, place à la Vague du Web numéro #3 !</p>
|
||
<p><span></span></p>
|
||
<h3>App Folders</h3>
|
||
<p>App Folders est un plugin jQuery dédié aux smartphones qui imite <strong>le comportement des dossiers de l’interface iOS</strong> : lorsqu’on clique sur un dossier, les fichiers qui s’y trouvent s’affichent alors dans un volet coulissant. Ici, les « fichiers » sont des éléments HTML (images, textes, vidéos, etc) et les « dossiers » sont liés à des URL. Le script fonctionne sur tous les écrans (responsive) et peut être facilement customisé. </p>
|
||
<ul>
|
||
<li><strong><a href="http://app-folders.com/">http://app-folders.com/</a></strong></li>
|
||
</ul>
|
||
<p><a href="http://app-folders.com/"><img src="http://www.megaptery.com/wp-content/uploads/2013/01/app_folders.jpg" alt="app_folders" width="640" height="350" class="aligncenter size-full wp-image-5069" /></a></p>
|
||
<h3>Easing</h3>
|
||
<p>Les fonctions Easing (<em>easeOutElastic</em>, <em>easeInQuint</em>, etc) permettent de préciser <strong>la vitesse d’exécution d’une animation</strong> pour la rendre plus réaliste. En effet, dans la réalité un objet ne commence pas son mouvement instantanément et à vitesse constante : il subit une accélération et une décélaration. Voici un site qui partage le code de plusieurs fonctions Easing en trois langages : JavaScript (via le plugin jQuery Easing), SASS et CSS3 (courbes de Bézier).</p>
|
||
<ul>
|
||
<li><strong><a href="http://easings.net/">http://easings.net/</a></strong></li>
|
||
</ul>
|
||
<p><a href="http://easings.net/"><img src="http://www.megaptery.com/wp-content/uploads/2013/01/easing.jpg" alt="easing" width="640" height="350" class="aligncenter size-full wp-image-5068" /></a></p>
|
||
<h3>Piecon</h3>
|
||
<p>Piecon est une petite librairie JavaScript permettant de <strong>modifier à la volée le favicon</strong> d’une page afin de montrer un graphique de progression (pie chart) ou de modifier son <em>title</em> afin d’afficher un pourcentage de progression. Cela peut être utile dans le cas d’un upload de fichier : l’utilisateur peut continuer à naviguer et jeter un coup d’œil à l’onglet qui indique l’avancement de la mise en ligne.</p>
|
||
<ul>
|
||
<li><strong><a href="http://lipka.github.com/piecon/">http://lipka.github.com/piecon/</a></strong></li>
|
||
</ul>
|
||
<p><a href="http://lipka.github.com/piecon/"><img src="http://www.megaptery.com/wp-content/uploads/2013/01/piecon.jpg" alt="piecon" width="640" height="350" class="aligncenter size-full wp-image-5067" /></a></p>
|
||
<h3>Motio</h3>
|
||
<p>Motio est un plugin jQuery spécialisé dans <strong>l’animation de sprites CSS</strong>, conçu aussi bien pour faire défiler un décor que pour mettre en mouvement un personnage. Plusieurs options sont configurables : sens de l’animation (vertical ou horizontal), mise en pause, nombre de FPS (images par seconde), vitesse de défilement, etc. </p>
|
||
<ul>
|
||
<li><strong><a href="http://darsa.in/motio/">http://darsa.in/motio/</a></strong></li>
|
||
</ul>
|
||
<p><a href="http://darsa.in/motio/"><img src="http://www.megaptery.com/wp-content/uploads/2013/01/motio.jpg" alt="motio" width="640" height="350" class="aligncenter size-full wp-image-5066" /></a></p>
|
||
<h3>Gemicon</h3>
|
||
<p>Gemicon est un pack gratuit de plus de <strong>600 icônes au format PNG</strong> et disponibles en plusieurs tailles (16×16, 32×32, 64×64). Le pack contient également les images vectorisées au format PSD, donc redimensionnables sans perte de qualité. Le set peut être utilisé aussi bien pour un usage personnel que pour un projet commercial.</p>
|
||
<ul>
|
||
<li><strong><a href="http://gemicon.net/">http://gemicon.net/</a></strong></li>
|
||
</ul>
|
||
<p><a href="http://gemicon.net/"><img src="http://www.megaptery.com/wp-content/uploads/2013/01/gemicon.jpg" alt="gemicon" width="640" height="363" class="aligncenter size-full wp-image-5064" /></a></p>
|
||
<h3>PlaceIt</h3>
|
||
<p>PlaceIt est un outil vous permettant de générer en quelques secondes <strong>des captures d’écran réalistes</strong> via un simple drag-and-drop : il insère l’image dans le support de votre choix (iPad, iPhone, Android, etc) et applique automatiquement les reflets et les inclinaisons pour un rendu réaliste et contextuel de votre capture d’écran. Vous pouvez voir un exemple d’utilisation sur la couverture de <a href="https://www.facebook.com/Megaptery">la page Facebook Megaptery</a>.</p>
|
||
<ul>
|
||
<li><strong><a href="http://placeit.breezi.com/">http://placeit.breezi.com/</a></strong></li>
|
||
</ul>
|
||
<p><a href="http://placeit.breezi.com/"><img src="http://www.megaptery.com/wp-content/uploads/2013/01/placeit.jpg" alt="placeit" width="640" height="350" class="aligncenter size-full wp-image-5060" /></a></p>
|
||
<h3>Flipping Circle Slideshow</h3>
|
||
<p>Flipping Circle Slideshow est <strong>un mini slideshow circulaire</strong> développé avec jQuery par l’équipe de <a href="http://tympanus.net/codrops/">Codrops</a>. Il s’agit d’un concept expérimental : l’idée est de retourner la slide dans le cercle (flip) avec un angle spécifique selon l’endroit où vous cliquez. L’effet est plutôt réussi.</p>
|
||
<ul>
|
||
<li><strong><a href="http://tympanus.net/Development/CircleFlipSlideshow/">http://tympanus.net/Development/CircleFlipSlideshow/</a></strong></li>
|
||
</ul>
|
||
<p><a href="http://tympanus.net/Development/CircleFlipSlideshow/"><img src="http://www.megaptery.com/wp-content/uploads/2013/02/flipping_slideshow.jpg" alt="flipping_slideshow" width="640" height="350" class="aligncenter size-full wp-image-5217" /></a></p>
|
||
<h3>Bootsnipp</h3>
|
||
<p>Bootsnipp est <strong>une collection de snippets (HTML/CSS, JS) et éléments graphiques</strong> qui viennent compléter le framework <a href="http://twitter.github.com/bootstrap/">Bootstrap</a> développé par Twitter. Vous retrouverez tout un tas d’interfaces externes au framework prêtes à l’utilisation : formulaires, barres de navigation, sliders, graphiques… mais aussi des cas très spécifiques (fenêtre de tweet, interface Gmail, etc). Bref, c’est assez varié. Un petit copier-coller et le tour est joué.</p>
|
||
<ul>
|
||
<li><strong><a href="http://bootsnipp.com/">http://bootsnipp.com/</a></strong></li>
|
||
</ul>
|
||
<p><a href="http://bootsnipp.com/"><img src="http://www.megaptery.com/wp-content/uploads/2012/12/bootsnipp.jpg" alt="bootsnipp" width="640" height="350" class="aligncenter size-full wp-image-5008" /></a></p>
|
||
<h3>One% CSS Grid</h3>
|
||
<p>One% CSS Grid est <strong>un framework CSS responsive basé sur un système à 12 colonnes</strong> avec deux résolutions de départ (1024px et 1280px). Léger et facile en prendre en main, l’outil est compatible avec tous les terminaux mobiles et propose également une grille pour le logiciel Photoshop.</p>
|
||
<ul>
|
||
<li><strong><a href="http://onepcssgrid.mattimling.com/">http://onepcssgrid.mattimling.com/</a></strong></li>
|
||
</ul>
|
||
<p><a href="http://onepcssgrid.mattimling.com/"><img src="http://www.megaptery.com/wp-content/uploads/2012/12/one_css_grid.jpg" alt="one_css_grid" width="640" height="350" class="aligncenter size-full wp-image-5003" /></a></p>
|
||
<h3>PlayThru</h3>
|
||
<p>Basé sur HTML5, PlayThru est une bonne alternative au célèbre <a href="http://www.google.com/recaptcha">Recaptcha</a> de Google. En effet, ce service remplace le captcha traditionnel par <strong>un petit jeu interactif et ludique</strong> : une consigne vous décrit les opérations à effectuer (manipulation d’objets via la souris ou le tacticle) pour être considérer comme un être humain, par exemple garer des voitures, poser des canettes dans une glacière… etc. Plutôt original ! Compatible avec tous les navigateurs récents.</p>
|
||
<ul>
|
||
<li><strong><a href="http://areyouahuman.com/">http://areyouahuman.com/</a></strong></li>
|
||
</ul>
|
||
<p><a href="http://areyouahuman.com/"><img src="http://www.megaptery.com/wp-content/uploads/2012/12/areyouhuman.jpg" alt="areyouhuman" width="640" height="350" class="aligncenter size-full wp-image-5017" /></a></p>
|
||
<h3>jQuery Snipe</h3>
|
||
<p>Similaire à <a href="http://www.megaptery.com/2011/07/zoomy-plugin-jquery-zoom-images.html">Zoomy</a>, Snipe est un plugin jQuery qui permet de mettre en place <strong>un effet de loupe sur vos images</strong> au survolement de la souris. Pour cela, il est nécessaire de fournir deux images au script, l’image normale et l’image zoomée, ce qui donne la possibilité de jouer sur leurs différences (par exemple avec la couleur). Le style CSS de la loupe est totalement personnalisable.</p>
|
||
<ul>
|
||
<li><strong><a href="http://rayfranco.github.com/jquery.snipe/">http://rayfranco.github.com/jquery.snipe/</a></strong></li>
|
||
</ul>
|
||
<p><a href="http://rayfranco.github.com/jquery.snipe/"><img src="http://www.megaptery.com/wp-content/uploads/2012/12/jquery_snipe.jpg" alt="jquery_snipe" width="640" height="350" class="aligncenter size-full wp-image-5006" /></a></p><p><br/><i>Article original de <a href="http://www.megaptery.com/2013/02/vague-du-web-3.html" title="Voir l'article original">Megaptery</a><br/>Aller sur <a href="http://planete-jquery.fr" title="">Planète jQuery</a></i></p>]]></content:encoded></item><item rdf:about="http://js.4design.tl/parcourir-le-dom-en-php-avec-simple-html-dom-1578"><title>Js4Design : Parcourir le DOM en PHP avec Simple HTML DOM</title><link>http://js.4design.tl/parcourir-le-dom-en-php-avec-simple-html-dom-1578</link><dc:date>2013-02-04T09:28:34+00:00</dc:date><dc:language>fr</dc:language><dc:creator>Js4Design</dc:creator><dc:subject></dc:subject><description></description><content:encoded><![CDATA[<p><a href="http://simplehtmldom.sourceforge.net">Simple HTML DOM</a> est un script PHP qui permet de parcourir une page web pour y rechercher n’importe quel élément, aussi simplement qu’avec jQuery. Une ligne suffit pour extraire le contenu qui vous intéresse !<span></span></p>
|
||
<p>Avec Simple HTML DOM, il est possible de :</p>
|
||
<ul>
|
||
<li>Rechercher des éléments,</li>
|
||
<li>Modifier le contenu d’un élément,</li>
|
||
<li>D’extraire du contenu.</li>
|
||
</ul>
|
||
<p>Ainsi, pour rechercher tous les articles présents sur une page, il suffit de quelques lignes, comme par exemple :</p>
|
||
<pre>// Create DOM from URL
|
||
$html = file_get_html('http://slashdot.org/');
|
||
// Find all article blocks
|
||
foreach($html->find('div.article') as $article) {
|
||
$item['title'] = $article->find('div.title', 0) ->plaintext;
|
||
$item['intro'] = $article->find('div.intro', 0) ->plaintext;
|
||
$item['details'] = $article->find('div.details', 0)->plaintext;
|
||
$articles[] = $item;
|
||
}
|
||
print_r($articles);</pre>
|
||
<p>Le site propose de nombreux exemples d’utilisation. Toutefois, vous trouverez chez <a href="http://davidwalsh.name/php-notifications">David Walsh</a> un exemple complet pour vérifier si des pages web on été modifiées et vous envoyer un mail le cas échéant.</p>
|
||
<p>→ Simple HTML DOM est sur <a href="http://simplehtmldom.sourceforge.net">Sourgeforge</a>.</p>
|
||
<p>Voir aussi <strong><a href="http://code.google.com/p/phpquery">phpQuery</a></strong> pour sélectionner les éléments du DOM côté serveur (via @c2c)</p><p><br/><i>Article original de <a href="http://js.4design.tl/parcourir-le-dom-en-php-avec-simple-html-dom-1578" title="Voir l'article original">Js4Design</a><br/>Aller sur <a href="http://planete-jquery.fr" title="">Planète jQuery</a></i></p>]]></content:encoded></item><item rdf:about="http://chez-syl.fr/2013/02/jquery-1-9-et-browser/"><title>Chez Syl : jQuery 1.9 et $.browser</title><link>http://chez-syl.fr/2013/02/jquery-1-9-et-browser/</link><dc:date>2013-02-03T13:44:33+00:00</dc:date><dc:language>fr</dc:language><dc:creator>Chez Syl</dc:creator><dc:subject></dc:subject><description></description><content:encoded><![CDATA[<p>Comme vous le savez, jQuery 1.9 est sorti le 15/01/2013 avec plusieurs changements majeurs, dont la suppression pure et simple de la propriété $.browser. Cette propriété était dépréciée depuis la version 1.3 de jQuery, ce qui signifiait qu’elle serait supprimée tôt ou tard.<br />
|
||
Le mal est maintenant fait, et comme cette propriété fut largement utilisée, on se retrouve avec des effets de bord notamment sur certains plugins qu’on utilise, qui ne sont donc pas compatibles avec la 1.9 et qui pour beaucoup sont non-maintenus par leurs auteurs.<br />
|
||
Parfois il existe d’autres plugins alternatifs et on peut trouver son bonheur ailleurs, et parfois non…<br />
|
||
<span></span></p>
|
||
<blockquote><p>J’utilise un plugin qui fait appel à $.browser et il n’est pas compatible jQuery 1.9, que faire ?</p></blockquote>
|
||
<ul>
|
||
<li>Rester avec jQuery < 1.9 (1.8.3 étant la dernière).</li>
|
||
<li>Utiliser conjointement jQuery 1.9 et le plugin <a href="http://blog.jquery.com/2013/01/31/jquery-migrate-1-1-0-released/">jQuery Migrate</a>.</li>
|
||
<li>Regarder la version que vous utilisez (très souvent indiquée dans les premières lignes du code), chercher sur le net le site officiel du plugin (ou sur GitHub) et regarder s’il n’y a pas une version plus récente.</li>
|
||
<li>Pas de chance, le plugin n’est plus maintenu par l’auteur, il faut donc chercher un autre plugin qui fait la même chose et qui lui serait maintenu.</li>
|
||
<li>Encore pas de chance, le plugin est bien le seul à répondre à vos besoins, triste sort qui s’acharne, il reste une dernière solution !</li>
|
||
</ul>
|
||
<h3>Inclure la propriété $.browser version stand-alone</h3>
|
||
<p>Vous pouvez inclure entre l’appel de jQuery et l’appel du plugin, un des deux fichiers suivants :</p>
|
||
<ul>
|
||
<li><a href="http://dev.chez-syl.fr/jquery_1.9_browser/jquery.browser.min.js"><i></i> jquery.browser.min.js</a></li>
|
||
<li><a href="http://dev.chez-syl.fr/jquery_1.9_browser/jquery.browser.js"><i></i> jquery.browser.js</a></li>
|
||
</ul>
|
||
<p>Vous pourrez à présent utiliser votre plugin avec jQuery 1.9.</p>
|
||
<p><a href="http://jquery.com/upgrade-guide/1.9/">Changelog jQuery 1.9</a></p><p><br/><i>Article original de <a href="http://chez-syl.fr/2013/02/jquery-1-9-et-browser/" title="Voir l'article original">Chez Syl</a><br/>Aller sur <a href="http://planete-jquery.fr" title="">Planète jQuery</a></i></p>]]></content:encoded></item><item rdf:about="http://chez-syl.fr/2013/02/site-du-zero-notifications-1-5-3/"><title>Chez Syl : Site du zéro Notifications 1.5.3</title><link>http://chez-syl.fr/2013/02/site-du-zero-notifications-1-5-3/</link><dc:date>2013-02-02T20:29:01+00:00</dc:date><dc:language>fr</dc:language><dc:creator>Chez Syl</dc:creator><dc:subject></dc:subject><description></description><content:encoded><![CDATA[<p>L’extension a été mise à jour pour fonctionner avec la v4 du SdZ.</p>
|
||
<p><a href="http://www.siteduzero.com/forum/sujet/extension-chrome-site-du-zero-notifications-13549?page=11#message-84070293">Voir mon post</a> récapitulatif des changements et rendez-vous sur la <a href="http://sylouuu.github.com/sdz-notifications/">page de l’extension</a>. :)</p><p><br/><i>Article original de <a href="http://chez-syl.fr/2013/02/site-du-zero-notifications-1-5-3/" title="Voir l'article original">Chez Syl</a><br/>Aller sur <a href="http://planete-jquery.fr" title="">Planète jQuery</a></i></p>]]></content:encoded></item><item rdf:about="http://www.lafermeduweb.net/billet/image-picker-une-selectbox-combinee-a-des-images-avec-jquery-1512.html"><title>LaFermeDuWeb : Image Picker - Une selectbox combinée à des images avec jQuery</title><link>http://www.lafermeduweb.net/billet/image-picker-une-selectbox-combinee-a-des-images-avec-jquery-1512.html</link><dc:date>2013-02-01T09:16:23+00:00</dc:date><dc:language>fr</dc:language><dc:creator>LaFermeDuWeb</dc:creator><dc:subject></dc:subject><description></description><content:encoded><![CDATA[<div>
|
||
<a href="http://www.lafermeduweb.net/billet/image-picker-une-selectbox-combinee-a-des-images-avec-jquery-1512.html">
|
||
<img style="border: 1px solid #000000;" src="http://www.lafermeduweb.net/images/billets/2013-02/image-picker_topBillet.jpg" alt="Image Picker - Une selectbox combinée à des images avec jQuery" />
|
||
</a>
|
||
</div>
|
||
<div>Image Picker est un plugin jQuery permettant de combiner une selectbox avec une liste d'images pour rendre l'expérience utilisateur plus interactive.</div><p><br/><i>Article original de <a href="http://www.lafermeduweb.net/billet/image-picker-une-selectbox-combinee-a-des-images-avec-jquery-1512.html" title="Voir l'article original">LaFermeDuWeb</a><br/>Aller sur <a href="http://planete-jquery.fr" title="">Planète jQuery</a></i></p>]]></content:encoded></item><item rdf:about="http://www.megaptery.com/2013/01/blackandwhite-images-noir-blanc-jquery.html"><title>Megaptery : BlackAndWhite, passez vos images en noir et blanc avec jQuery</title><link>http://www.megaptery.com/2013/01/blackandwhite-images-noir-blanc-jquery.html</link><dc:date>2013-01-30T13:54:15+00:00</dc:date><dc:language>fr</dc:language><dc:creator>Megaptery</dc:creator><dc:subject></dc:subject><description></description><content:encoded><![CDATA[<p><strong>BlackAndWhite</strong> est un plugin jQuery qui permet de générer une image en noir-et-blanc à partir d’une image en couleur, avec la possibilité de mettre en place une animation au rollover faisant apparaitre soit l’une, soit l’autre.</p>
|
||
<p><span></span></p>
|
||
<h3>Passez au noir et blanc !</h3>
|
||
<p>Le plugin peut facilement convertir n’importe quelle image couleur en <strong>une image noir et blanc avec niveaux de gris</strong>. Pour cela, il utilise l’élément HTML5 canvas et propose une solution de repli pour les anciens navigateurs. Ainsi, on peut afficher une liste d’images dé-saturées qui s’animent pour reprendre leurs couleurs initiales au rollover, et inversement. Vous pouvez bien sûr vous en servir uniquement pour afficher des images décolorées statiques, sans le moindre effet.</p>
|
||
<p><img src="http://www.megaptery.com/wp-content/uploads/2013/01/jquery_blackwhite.jpg" alt="jquery_blackwhite" width="640" height="350" class="aligncenter size-full wp-image-5135" /></p>
|
||
<p><strong>Quelques options</strong> sont disponibles pour configurer BlackAndWhite : changement d’image au rollover ou non, vitesse d’animation en entrée et en sortie du rollover (transition de type <em>fade</em> uniquement), affichage des images noir-et-blanc pour animer vers la couleur ou inversement, activation d’un mode responsive (sur les images et les canvas), etc. </p>
|
||
<h3>Installation du plugin</h3>
|
||
<p>On commence par inclure jQuery et le plugin BackAndWhite :</p>
|
||
<pre>
|
||
<script src="js/jquery.js"></script>
|
||
<script src="js/jQuery.BlackAndWhite.js"></script>
|
||
</pre>
|
||
<p>Ensuite, on définit la structure HTML qui va afficher les images, par exemple une liste non ordonnée. Il faut ensuite penser à ajouter une classe CSS sur l’élément qui englobe l’image. Ici, l’élément parent est un lien et on lui applique la classe <em>bwWrapper</em>.</p>
|
||
<pre>
|
||
<ul class="wrapper">
|
||
<li>
|
||
<a href="#" class="bwWrapper">
|
||
<img src="files/image1.jpg" alt="" />
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a href="#" class="bwWrapper">
|
||
<img src="files/image2.jpg" alt="" />
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a href="#" class="bwWrapper">
|
||
<img src="files/image3.jpg" alt="" />
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</pre>
|
||
<p>Puis on ajoute les propriétés CSS suivantes sur l’élément parent :</p>
|
||
<pre>
|
||
.bwWrapper {
|
||
position:relative;
|
||
display:block;
|
||
}
|
||
</pre>
|
||
<p>Enfin, on termine par l’appel du plugin. Attention, il faut bien penser à utiliser la méthode <em>$(window).load()</em> qui permet d’attendre le chargement complet des images avant l’exécution du script, et non <em>$(document).ready()</em>.</p>
|
||
<pre>
|
||
$(window).load(function(){
|
||
$('.bwWrapper').BlackAndWhite({
|
||
hoverEffect : true,
|
||
responsive:true,
|
||
speed: {
|
||
fadeIn: 200,
|
||
fadeOut: 800
|
||
}
|
||
});
|
||
});
|
||
</pre>
|
||
<p>BackAndWhite est donc un plugin jQuery pratique pour passer facilement vos images couleur en noir-et-blanc côté client.</p>
|
||
<p><strong>Requis</strong> : jQuery<br />
|
||
<strong>Compatibilité</strong> : Tous navigateurs<br />
|
||
<strong>Démonstration</strong> : <a href="http://gianlucaguarini.com/canvas-experiments/jQuery.BlackAndWhite/">http://gianlucaguarini.com/canvas-experiments/jQuery.BlackAndWhite/</a><br />
|
||
<strong>Licence</strong> : MIT</p><p><br/><i>Article original de <a href="http://www.megaptery.com/2013/01/blackandwhite-images-noir-blanc-jquery.html" title="Voir l'article original">Megaptery</a><br/>Aller sur <a href="http://planete-jquery.fr" title="">Planète jQuery</a></i></p>]]></content:encoded></item><item rdf:about="http://www.mathieurobin.com/2013/01/chroniques-jquery-episode-103/"><title>MathieuRobin : Chroniques jQuery, épisode 103</title><link>http://www.mathieurobin.com/2013/01/chroniques-jquery-episode-103/</link><dc:date>2013-01-28T09:16:45+00:00</dc:date><dc:language>fr</dc:language><dc:creator>MathieuRobin</dc:creator><dc:subject></dc:subject><description></description><content:encoded><![CDATA[<p>Hello à tous !</p>
|
||
<p>Après les grosses annonces de la semaine dernière, on pouvait s’attendre à du calme cette semaine. Sauf que je vous avais prévenu qu’il y aurait encore du lourd du coté de jQuery Mobile. Erratum de ma part donc, puisque mon informatrice m’a involontairement induit en erreur. En fait<a title="Announcing the jQuery Plugin Registry" href="http://blog.jquery.com/2013/01/16/announcing-the-jquery-plugin-registry/" target="_blank"> l’annonce officielle</a> bien sympa est la suivante :</p>
|
||
<p><strong>Le site officiels de plugins est de retour !</strong></p>
|
||
<p>Donc vous pouvez recommencer à soumettre vos plugins et il y a même tout une <a title="Publishing Your Plugin" href="http://plugins.jquery.com/docs/publish/" target="_blank">procédure pour vous expliquer comment</a> faire.</p>
|
||
<p>Au passage, ils ont entièrement rénové le site. Aussi bien la doc que le blog etc… Jetez un oeil <a title="jQuery" href="http://jquery.com/" target="_blank">au nouveau site</a> et au <a title="A Site To Behold: Open Content & Design Comes to jQuery" href="http://blog.jquery.com/2013/01/23/a-site-to-behold-open-content-design-comes-to-jquery-2/" target="_blank">billet d’explication des détails</a>. Tout ça à l’air très bien, ça devrait améliorer quelque peu l’expérience utilisateur. En tout cas, il y a de très nombreux très bon retours sur Twitter.</p>
|
||
<p>Côté plugins, <a title="Des pixels et du code #46" href="http://www.inpixelitrust.fr/blog/des-pixels-et-du-code-46/" target="_blank">Stéphanie Walter</a> m’a encore permis de ne pas rater un plugin utile. jQuery UI Touch Punch vous permet d’ajouter <a title="jQuery UI Touch Punch" href="http://touchpunch.furf.com/" target="_blank">la gestion du tactile sur les widgets jQuery UI</a>.</p>
|
||
<p>Je suis tombé sur <a title="Hotspotter - Hotspot Maker jQuery Plugin Preview" href="http://codecanyon.net/item/hotspotter-hotspot-maker-jquery-plugin/full_screen_preview/3833015" target="_blank">Hotspotter</a> cette semaine. Un excellent plugin pour mettre en avant certains point d’une image intégrée à votre site. Pour introduire des détails à la façon de l’identification des personnes sur Facebook. Je l’ai trouvé vraiment bien terminé.</p>
|
||
<p>Un article sympathique a été publié sur tutplus.com pour expliquer <a title="Making Use of jQuery UI’s Widget Factory" href="http://net.tutsplus.com/tutorials/javascript-ajax/an-in-depth-review-of-jquerys-widget-factory/" target="_blank">comment construire des plugins jQuery UI en se servant de la widget factory</a>. Je n’ai malheureusement pas encore trouvé le temps de l’éprouver.</p>
|
||
<p>Pour terminer, Aurélien Gerits et Addy Osmani ont remis à neuf <a title="jQuery UI Bootstrap" href="http://addyosmani.github.com/jquery-ui-bootstrap/" target="_blank">la documentation de jQuery UI Bootstrap</a>. Je vous laisse découvrir par vous même l’excellent travail effectué.</p>
|
||
<p>Voilà, c’est tout pour cette fois. Je ne pense pas avoir le temps de publier quoi que ce soit d’autre cette semaine. Grosse livraison en fin de semaine, je suis déjà physiquement éreinté, mentalement je suis un légume donc je vais me consacrer au taf pour boucler ça proprement. A la semaine prochaine, ça ira mieux <img src="http://www.mathieurobin.com/wp-includes/images/smilies/icon_wink.gif" alt=";)" class="wp-smiley" /> </p>
|
||
<p><a href="http://www.mathieurobin.com/?flattrss_redirect&id=2801&md5=be855cabc93dc6e466abf65153cffce7" title="Flattr" target="_blank"><img src="http://www.mathieurobin.com/wp-content/plugins/flattr/img/flattr-badge-large.png" alt="flattr this!" /></a></p><p><br/><i>Article original de <a href="http://www.mathieurobin.com/2013/01/chroniques-jquery-episode-103/" title="Voir l'article original">MathieuRobin</a><br/>Aller sur <a href="http://planete-jquery.fr" title="">Planète jQuery</a></i></p>]]></content:encoded></item></rdf:RDF> |