Faire des popups non intrusives avec Fancybox

Aujourd’hui, je vais vous présenter un plugin JQuery très connu mais qui est un des meilleurs dans son style. Fancybox permet de faire des popups non-intrusives avec un design à la MAC OS. Vous l’aurez compris, le design est épuré et sans couleur.
Du fait de sa simplicité apparente, on peut facilement l’intégrer sur nos sites Internet, elle ne choquera pas comme pourrait le faire lightbox avec ses bordures épaisses.

Je serai relativement court sur cette présentation, car la documentation est très fournie sur le site suivant Fancybox. Vous y trouverez aussi une suite d’exemples qui pourront vous convaincre d’utiliser ce plugin plutôt qu’un autre.

Comme je vous l’ai dit précédemment, on peut voir que les bordures sont très fines et que seul le bouton « fermer » ressort. Cependant, pour fermer la fancybox, vous pouvez aussi cliquer à côté.

Présenter votre site Internet à vos utilisateurs

Si votre site possède une partie un peu complexe, comme une zone membre avec des menus et des zones d’informations, vous souhaitez peut-être expliquer à vos utilisateurs la logique et le fonctionnement de tout cela. Habituellement, vous faites une vidéo ou un tutoriel expliquant à l’aide d’images votre projet.

Bootstro va vous permet de faire une suite d’infobulles, expliquant étape par étape, directement dans la page web, le fonctionnement de votre site. Ceci offre une multitude d’avantages. Le simple fait que l’utilisateur puisse à tout moment, sans quitter la page, accéder à l’aide, est déjà beaucoup.

Voici un exemple en images :

De plus on pourrais utiliser ce système sur des sites à contenu payant pour faire « un tour gratuit » ou bien encore pour présenter des templates HTML. Bref vous l’aurez compris, les utilisations de cet outils sont multiples.

Améliorer le référencement d’un site Internet

Sur Internet, faire un lien d’une page A vers une ressource B, c’est y faire référence et donc référencer la ressource B depuis la page A. Par vulgarisation, l’action générique d’inscription dans les moteurs de recherche s’est vue appelée référencement. Aujourd’hui sa pratique s’articule autour des outils de recherche, plus particulièrement des moteurs et des annuaires de recherche, en tentant d’améliorer le positionnement d’un site (et donc sa visibilité) dans leurs pages de résultats.

Wikipédia, Référencement

Les moteurs de recherche

Si vous venez de mettre en ligne un nouveau site Internet, il va falloir le soumettre aux moteurs de recherche afin qu’il sache que vous êtes là. Sinon, cela risque de prendre du temps.
Voici comment faire :

  • Proposer votre site Internet aux principaux moteurs de recherche lors de sa mise en ligne : Google, Bing, Yahoo
  • Mettre en place un sitemap à la racine de votre site, vous pouvez utiliser  un générateur pour le créer
  • Rendez-vous sur Google webmaster tool pour le soumettre, il permettra une indexation plus simple pour le bot et donc plus rapide. Au passage, cet outil est une mine d’informations, il vous indique toutes les pages où le bot à rencontré des erreurs d’exploration, votre positionnement dans les recherches Google selon les mots clés saisis…
  • Après le post d’un article ou d’une nouvelle page, envoyez un ping vers les moteurs de recherche afin qu’ils viennent faire un tour sur la nouvelle page. Des outils comme pingomatic permettent de le faire rapidement

Le référencement naturel

En théorie le référencement naturel est une chose simple, il suffit d’être patient. Cependant il existe un certain nombre de techniques permettant d’augmenter la rapidité du référencement naturel. Le référencement naturel se fait par l’exploration de votre site Internet par des bots. Les bots sont bêtes et méchants, ils suivent les liens pour trouver d’autres pages à explorer. Voici quelques points qui leurs permettent d’explorer rapidement tout votre site Internet.

  • Un site qui bénéficiera d’un bon référencement est un site où pratiquement toutes les pages sont accessibles depuis la page d’accueil. Par conséquent, utilisez votre footer comme usine à liens internes. Si vous avez un blog, ajoutez un nuage de tags, et faites des liens entre vos articles.
  • Les balises méta ne sont pas à négliger, elles sont encore très aimées des robots.
    Vous pouvez utiliser un générateur si vous ne connaissez pas exactement quelles balises existent. A savoir que la balise meta description doit changer pour chaque page de votre site, elle décrit la page et non le site.
  • Il y a quelques bonnes pratiques à respecter côté HTML pour aider à votre référencement :
    • Un title différent par page, ni trop long, ni trop court
    • Une balise h1 par page
    • L’attribut ALT pour les images est indispensable
    • Les 100 premiers mots de votre contenu doivent contenir les mots clefs importants de votre page, car c’est en moyenne la partie visible sans scroll.
  • Les URLs sont un point central du référencement, c’est la fin des URLs du type http://domaine.com/index.php?page=1533, Il vaut mieux travailler avec des URIs segment, du type https://outweb.eu/category/optimisation/.

Le référencement manuel

Nous allons parler ici des techniques qui existent pour avoir des backlinks (le nerf de la guerre en référencement). Un backlink c’est un lien vers votre site depuis un autre site. Pour en obtenir il y a plusieurs méthodes ; la plus simple est d’attendre que notre contenu soit remarqué par d’autres personnes et qu’il partage le lien vers la page, ou de le faire par nous-mêmes :p.

Les réseaux sociaux

Les réseaux sociaux attirent énormément de monde et ce sont de très bons backlinkers. Il faut donc à chaque nouvelle publication (pour un blog) ou chaque mise à jour (pour les autres) poster sur un maximum de réseaux le lien vers la page en question. Les réseaux les plus simples à utiliser sont Twitter, Facebook, Digg, Delicious, Identi.ca… L’idéal est de pouvoir poster partout en une seule fois, pour cela il faut regarder du côté de onlywire par exemple.

Les forums

Rendez-vous sur des forums traitant de la même thématique que la vôtre et trouvez, s’il y en a une, une partie présentation. Maintenant, rien de plus simple, vous allez créer un topic/ une discussion pour présenter votre site Internet, pensez à mettre 4 ou 5 liens vers différentes pages de celui-ci. (accueil, nouveautés, RSS, contact). En plus du référencement, vous allez attirer quelques visiteurs.

Pensez à mettre une bannière dans votre signature, comme cela à chaque post vous vous faites un peu de publicité.

Les annuaires

Contrairement à la croyance populaire, les annuaires ne sont plus à la joie. Google, par exemple, n’aime pas tomber sur ce type de page car il y a trop de liens pour peu de contenu. Evitez donc la plupart des annuaires de mauvaise qualité. Mieux vaux éviter les mauvais backlinks.

Les commentaires

Rendez-vous sur les sites ayant une bonne notoriété et traitant d’un thème proche du vôtre.
Rendez-vous section commentaire. Et là c’est un peu plus technique, il va falloir regarder dans le code source si les liens vers les sites persos des personnes qui ont commenté ont un attribut rel différent de nofollow. Si c’est le cas, à chaque post, vous obtiendrez un backlink de qualité. Le but n’est pas de spammer le site, mais juste de se faire quelques liens vers son site.

Le partenariat

Le partenariat, ou échange de liens, est un système gagnant-gagnant ou chacune des deux parties met sur son site, un lien ou une bannière vers l’autre site. L’idéal est dans une sidebarre, car elle est visible des utilisateurs. Le plus dur est de trouver des partenaires ayant un référencement au moins aussi bon que le vôtre.

Bien sûr si vous utilisez un CMS beaucoup de ces techniques seront déjà intégrées dedans ou des extensions sont disponibles pour le faire simplement.

Créer un site Internet pour mobile avec JQuery mobile

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" />
http://code.jquery.com/jquery-1.6.1.min.js
http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js

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" />
		http://code.jquery.com/jquery-1.6.1.min.js
		http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js
	</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" />
http://code.jquery.com/jquery-1.6.1.min.js
http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js
</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://localhost:8080">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.localhost:8080/u">Menu contextuel en
	JavaScript</a></li>
	<li class=' ui-corner-bottom '><a href="http://url.localhost:8080/z">Emuler
	un flux RSS</a></li>
</ul>

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

</body>
</html>

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" />
http://code.jquery.com/jquery-1.6.1.min.js
http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js
</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://localhost:8080">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.localhost:8080/u">Menu contextuel en
	JavaScript</a></li>
	<li class=' ui-corner-bottom '><a href="http://url.localhost:8080/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 !