outweb-jquery

Attirer l’attention des utilisateurs avec twinkle

Posté le par dans la catégorie JQuery.

Twinkle est un plugin JQuery qui permet, par le biais d’animations sous forme de cercles, d’attirer le regard de l’utilisateur sur une partie de votre interface.

Les cercles sont animés par JQuery mais générés à l’aide de canvas HTLM5, soit via des propriétés CSS3.

Pour une utilisation basique :

$( selector ).twinkle();

Pour une utilisation plus poussée, avec des paramètres :

var options = {
	"effect": "drop",
	"effectOptions": {
		"color": "rgba(0,0,255,0.5)",
		"radius": 100
	}
};

$( selector ).twinkle( options );

Plusieurs types d’effets sont disponibles :

  • orbit : un disque entouré de plusieurs disques
  • drops : plusieurs cercles qui s’agrandissent
  • splash : un disque qui s’agrandit
  • drop : un cercle qui s’agrandit
  • pulse : un disque qui s’agrandit puis rétrécit plusieurs fois de suite

Vous pouvez trouver la documentation complète sur le site de présentation de Twinkle.

Exemple : Démo ou Télécharger

outils

Géolocaliser vos visiteurs avec geoPlugin

Posté le par dans la catégorie JQuery.

Vous souhaitez géolocaliser vos visiteurs sans avoir à administrer une base de données de type Maxmind ? Le plugin geoPlugin est fait pour vous. En effet, afin de profiter d’un résultat à plus de 98% fiable sans avoir à gérer de base de données, geoPlugin va utiliser un service externe. En effet, le plugin va se connecter au serveur geoplugin.net qui lui, va utiliser la base Maxmind. Au final, vous avez les avantages de Maxmind sans en avoir les inconvénients car les administrateurs de geoPlugin tiennent leur base de données à jour.

L’utilisation est en plus relativement simple et se fait de la manière suivante :

<script type="text/javascript" language="JavaScript" src="http://www.geoplugin.net/javascript.gp"></script>
<script type="text/javascript">
  jQuery(document).ready(function($)
    { 
       pays =  geoplugin_countryName(); 
    });
</script>

La variable pays contiendra à la fin de l’exécution le nom du pays du visiteur.

En échange de l’utilisation de ce service vous devrez juste mettre un lien vers le site geoplugin sur votre site Internet.

Vous pourrez trouver une documentation complète sur le site Internet de geoplugin

outweb-jquery

Générer QRCODE avec JQuery

Posté le par dans la catégorie JQuery.

Le code QR est un code-barres à deux dimensions.
Destiné à être lu par un lecteur de code-barres QR ou un smartphone, il a l’avantage de pouvoir stocker plus d’informations qu’un code à barres simples, et surtout des données directement reconnues par des applications. Ainsi le QR permet par exemple d’ouvrir un navigateur à une page prédéfinie, de lancer une application ou encore décoder un message. QRCode est un plugin JQuery qui permet de générer des code QR simplement.

JQuery Qrcode

<div id='monQrCode'></div>

<script>
$('#monQrCode').qrcode("http://www.blog.outweb.fr");
</script>

Et voici le résultat obtenu :

Si vous disposez d’un lecteur je vous laisse libre de le tester :P

outils

Rendre votre CSS compatible sur tous les navigateurs

Posté le par dans la catégorie Outils.

Prefixr est un outil, en version alpha, qui vas vous aider dans le développement de vos designs. En effet, le site vous propose de prendre n’importe quel code CSS et de vous en ressortir un code CSS compatible sur tous les navigateurs.

Voici un exemple d’utilisation :

Vous avez écrit :

.example {
  border: 10px solid #000000;
  width: 500px;
  height: 500px;
  -moz-border-radius: 10px 200px 200px 10px;
}

Malheureusement -moz-border-radius ne fonctionne pas sur tous les navigateurs… On vas donc passer le code dans Prefixr pour le rendre compatible :

Et on vas obtenir le code suivant :

.example {
	border: 10px solid #000000;
	width: 500px;
	height: 500px;
	-webkit-border-radius: 10px 200px 200px 10px;
	-moz-border-radius: 10px 200px 200px 10px;
	-o-border-radius: 10px 200px 200px 10px;
	-ms-border-radius: 10px 200px 200px 10px;
	-khtml-border-radius: 10px 200px 200px 10px;
	border-radius: 10px 200px 200px 10px;
}

Bien que ceci soit déjà pas mal, cela implique de faire des aller retours entre votre éditeur et votre navigateur pour tester et modifier votre CSS. C’est pourquoi les développeur ont mis en place une api accessible depuis les éditeurs de texte évolués afin d’utiliser le service sans aller sur le site.

Pour cela il faudra créer une nouvelle commande dans votre éditeur qui exécutera :

curl -sSd "css=$TM_SELECTED_TEXT" "http://prefixr.com/api/index.php"

Il faudra installer curl si vous ne l’avez pas.

En conclusion Prefixr est un outil très intéressant et offrant un gain de temps considérable. Cependant il vas nécessiter des mise à jours régulières pour s’adapter au mieux à toutes les règles du CSS3.

outweb-jquery

Présentez autrement avec Ascensor

Posté le par dans la catégorie JQuery.

Ascensor est un plugin JQuery qui permet de présenter votre site Internet de manière différente. Il est destiné au petits sites Internet. Il permet de naviguer de façon dynamique vers toutes les pages de votre site avec des transitions entres les différentes pages. La navigation entre les pages se fait de différentes manières selon le paramétrage du plugin. Avec les paramètres par défaut il est possible de naviguer grâce aux fléches directionnelles, au widget en bas à droite et aux boutons précédent et suivant positionnés en haut à gauche.

Voici comment le widget se présente :

Il est bien sur possible de changer le style afin de le personnaliser.

Le plugin est basé sur le plugin Scroll to. Il est relativement simple d’utilisation.

Avant toute chose voici mon eCV qui utilise cette technologie.

La navigation se fait via le widget en bas à droite ou via les flèches directionnelles du clavier.

Pour la mise en place il vous suffit de suivre la documentation qui d’ailleurs utilise le plugin.

Exemple : Démo ou Télécharger

outweb-jquery

Listes triées et animées avec Quicksand

Posté le par dans la catégorie JQuery.

Quicksand est un plugin JQuery qui peut être utile pour l’affichage un peu travaillé d’une liste d’images ou sur une boutique en ligne.
Le plugin vous permet de trier et filtrer des listes (d’images par exemple) selon des critères, le tout avec des effets de transition à la JQuery. Le résultat est assez agréable pour l’utilisateur mais il ne faut pas en abuser car cela peut vite devenir lourd.

Pour l’appliquer à une liste vous pouvez utiliser le code suivant :

Côté JavaScript :

$('.button').click(function(e) {
    $('.all').quicksand( $('.warm li'), {
      duration: 1000,
      attribute: 'id'
    });
    e.preventDefault();
  });

Côté HTML

 <p><a class="button" href="#">Test</a></p> 
        
          <ul class="colors all"> 
            <li id="c463033" style="background: #463033"></li> 
            <li id="c77343d" style="background: #77343d"></li> 
            <li id="ce83f2f" style="background: #e83f2f"></li> 
            <li id="cffc223" style="background: #ffc223"></li> 
            <li id="cffdb59" style="background: #ffdb59"></li> 
            <li id="c788b6f" style="background: #788b6f"></li> 
            <li id="c486a5e" style="background: #486a5e"></li> 
            <li id="c289539" style="background: #289539"></li> 
            <li id="c174876" style="background: #174876"></li> 
          </ul> 
 
          <ul class="colors warm"> 
            <li id="c62164e" style="background: #62164e"></li> 
            <li id="c86286e" style="background: #86286e"></li> 
            <li id="cda79c2" style="background: #da79c2"></li> 
            <li id="ce83f2f" style="background: #e83f2f"></li> 
            <li id="cf39079" style="background: #f39079"></li> 
            <li id="cffc223" style="background: #ffc223"></li> 
            <li id="cffdb59" style="background: #ffdb59"></li> 
            <li id="cf2c478" style="background: #f2c478"></li> 
          </ul>

Il ne faut pas oublier de « binder » un bouton pour lancer le tri.

Exemple : Demo ou Télécharger

outweb-jquery

Peity

Posté le par dans la catégorie JQuery.

 

Peity est un petit plugin JQuery ( 2ko ) qui permet de réaliser des graphiques sous forme de fromages, de lignes, ou de simplement barres .

Après avoir inclus votre fichier javascript dans votre page après JQuery, vous pouvez générer vos graphiques.

Pour un graphique en barre :

  • Dans votre code HTML : 
    5,3,9,6,5,9,7,3,5,2

    Dans le span vous avez toutes les valeurs de votre graphique

  • Dans votre code Javascript : 
    $(".bar").peity("bar");

Voici le type de graphique obtenu :outweb-peity-graph

A savoir que pour chaque type de graphique des options comme width, height ou radius permettent d’ajuster la taille des graphiques à vos attentes.

Si vous êtes un habitué à JQuery cette syntaxe ne vous choquera pas sinon reportez-vous à la page suivante pour voir les sélecteurs possibles en JQuery : Liste des selecteurs

outils

Détecter les internautes mobiles

Posté le par dans la catégorie Outils.

Mobileesp est un projet qui propose une API simple et légère qui permet de détecter les visiteurs utilisant des téléphones mobiles afin de leur proposer une interface adaptée. Le petit plus de ce projet c’est que l’API est disponible dans divers langages :

  • PHP
  • Java
  • APS.NET
  • Ruby
  • JavaScript

En plus de vous dire quel est le téléphone du visiteur, l’API peut vous donner les plugins installés et les technologies supportées par le smartphone.

Vous pouvez trouver la documentation sur le site Internet du projet : MobileESP. Le projet est disponible sous la licence Apache 2.0.

Pour télécharger MobileESP rendez-vous sur le projet Google

outweb-jquery

Créer un site Internet pour mobile avec JQuery mobile

Posté le par dans la catégorie Framework, JQuery.

Avez-vous déjà pensé à faire une application mobile, ou une version mobile de votre site Internet ?
Si oui, vous avez dû vous confronter à des centaines de problèmes de compatibilité entre les navigateurs mobile.

L’article va vous montrer comment faire des pages HTML compatibles sur tous les téléphones et tablettes.

Afin de bien comprendre l’article, il vous faudra connaître les bases du HTML ainsi que JQuery.

Dans un premier temps, il va falloir télécharger la libraire JQuery mobile. Donc rendez-vous à la page suivante : Télécharger.

Cependant, pour la mise en production, je vous conseille d’utiliser le code suivant pour inclure JQuery mobile :

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js"></script>

Pourquoi utiliser ceci plutôt qu’un version locale ?

Imaginons un utilisateur, qui passe de site en site. Fait à fait, il remplit son cache de scripts et pages en tous genres. S’il a déjà été sur un site avec le code précédent, il les a en cache et donc il ne les téléchargera pas. Vous gagnez ainsi de la bande passante et du temps de chargement. :p

Découverte

Nous allons créer notre première page.

<!DOCTYPE html> 
<html> 
	<head> 
		<title>Outweb</title> 
		<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.css" />
		<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
		<script type="text/javascript" src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js"></script>
	</head> 
<body> 

<div  data-role="page"> 
	<div  data-role="header">Outweb</div> 
	<div  data-role="content">Outweb c'est mon site internet.</div> 
	<div  data-role="footer">Mon footer</div> 
</div> 

</body>
</html>

Ceci est l’exemple le plus simple qui soit.

Vous remarquerez l’utilisation de data-role. C’est en effet le point important de JQuery mobile.

Il permet de dire à JQM (JQuery Mobile) comment il doit traiter le div, et quelles classes il doit lui appliquer.

Une page visible n’est pas, contrairement à une page HTML basique, l’ensemble du code HTML, mais seulement le <div data-role= »page »>. Cela permet de charger plusieurs pages en une seule fois et donc de naviguer de l’une à l’autre en toute fluidité.

Page complexe

Comment appliquer un thème à une page ?

Juste une petite modification à faire.

<div  data-role="page" data-theme="b">

Et voila un beau thème bleu style IPhone.

Nous allons maintenant faire une liste. La liste est la structure HTML la plus simple à mettre en place dans JQM, car elle permet d’afficher des menus ou des informations même sur des petits écrans.

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet"
	href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.css" />
<script type="text/javascript"
	src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script type="text/javascript"
	src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js"></script>
</head>
<body>

<div data-role="page" data-theme="b">
<div data-role="header">Mon header</div>
<div data-role="content">


<!-- listview permet de mettre en forme toute la liste -->
<ul data-role="listview">
        <!-- Met en place un séparateur dans la liste -->
	<li data-role='list-divider' role='heading'
		class='ui-li ui-li-divider ui-btn ui-bar-b ui-corner-top '><b>Accueil</b></li>
	<li><a href="http://outweb.fr">Ma page d'acceuil'</a></li>
	<li data-role='list-divider' role='heading'
		class='ui-li ui-li-divider ui-btn ui-bar-b  '><b>Articles</b></li>
	<li><a href="http://url.outweb.fr/u">Menu contextuel en
	JavaScript</a></li>
	<li class=' ui-corner-bottom '><a href="http://url.outweb.fr/z">Emuler
	un flux RSS</a></li>
</ul>

</div>
<div data-role="footer" data-position="fixed">Mon footer</div>
</div>

</body>
</html>

Et voici le résultat obtenu :

Lien entre les pages

Comme je le disais précédemment, vous pouvez mettre plusieurs pages dans un fichier HTML. Voici comment faire le lien entre les pages. Et surtout, si vous le souhaitez, comment mettre des effets de transition entre vos pages.

Pensez à mettre des ids à vos pages, sinon vous ne pourrez pas naviguer entre elles.

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet"
	href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.css" />
<script type="text/javascript"
	src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script type="text/javascript"
	src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js"></script>
</head>
<body>

<div data-role="page" data-theme="b">
<div data-role="header">Mon header</div>
<div data-role="content">



<ul data-role="listview">
	<li data-role='list-divider' role='heading'
		class='ui-li ui-li-divider ui-btn ui-bar-b ui-corner-top '><b>Popup</b></li>
       <!-- data-transition permet de définir l'effet de transition. Les trois disponibles sont présenté ici -->
	<li><a href="#page2" data-transition="pop">Voire la page 2</a></li>
	<li><a href="#page3" data-transition="slidedown">Voire la page 3</a></li>
	<li><a href="#page4" data-transition="flip">Voire la page 4</a></li>
	<li data-role='list-divider' role='heading'
		class='ui-li ui-li-divider ui-btn ui-bar-b  '><b>Accueil</b></li>
	<li><a href="http://outweb.fr">Ma page d'accueil</a></li>
	<li data-role='list-divider' role='heading'
		class='ui-li ui-li-divider ui-btn ui-bar-b  '><b>Articles</b></li>
	<li><a href="http://url.outweb.fr/u">Menu contextuel en
	JavaScript</a></li>
	<li class=' ui-corner-bottom '><a href="http://url.outweb.fr/z">Emuler
	un flux RSS</a></li>
</ul>

</div>
<div data-role="footer" data-position="fixed">Mon footer</div>
</div>


<!-- Les autres pages avec des autres thèmes (oui c'est horrible mais c'est une démo)-->
<div data-role="page" id="page2" data-theme="a">
<div data-role="header">Mon header</div>
<div data-role="content">Ceci est la page 2 (pop) </div>
<div data-role="footer" data-position="fixed">Mon footer</div>
</div>

<div data-role="page" id="page3" data-theme="c">
<div data-role="header">Mon header</div>
<div data-role="content">Ceci est la page 3 (slide)</div>
<div data-role="footer" data-position="fixed">Mon footer</div>
</div>

<div data-role="page" id="page4" data-theme="e">
<div data-role="header">Mon header</div>
<div data-role="content">Ceci est la page 4 (flip)</div>
<div data-role="footer" data-position="fixed">Mon footer</div>
</div>
</body>
</html>

Voilà vous avez maintenant toutes les informations pour mettre en place une version mobile de votre site Internet. Si vous voulez plus de documentation, je vous recommande la documentation officielle qui vient d’être refaite, suite à la sortie de la version beta de JQM.

Comme vous avez pu le voir, JQuery Mobile est un outil performant, novateur et surtout libre. Alors profitez-en !

Si vous souhaitez faire un site complet en JQuery Mobile je vous conseille de regarder l’article suivant : JQMPHP.

outweb-jquery

Des captchas plus intuitifs avec MotionCAPTCHA

Posté le par dans la catégorie JQuery.

MotionCAPTCHA est un plugin JQuery qui permet, grâce à l’utilisation de HTML5, de faire des captchas différents des autres. En effet, plus besoin de lire des textes compliqués pour les recopier. A la place, nous allons proposer à l’utilisateur de dessiner une forme simple à l’aide de sa souris.

Il existe plusieurs types de formes qui sont toutes relativement simples à réaliser.

Vous trouverez sur MotionCAPTCHA une documentation complète concernant la mise en place du plugin.

Exemple : Démo ou Télécharger