Mois : juillet 2011

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

On juillet 15, 2011

Temps de lecture : 4 minutes

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.

Ajuster la taille de vos textareas en fonction du contenu

de arnaud

On juillet 14, 2011

dans JQuery

Temps de lecture : < 1 minute

AutoResize est un plugin JQuery qui permet de faire un textarea extensible en fonction du contenu, comme le fait actuellement Facebook pour les commentaires. Ceci évite les pages de formulaire où un textarea fait 15cm sur 8, le truc pas esthétique quoi…

Voici comment appliquer le plugin sur un textarea ayant pour id « comment ».
Après, libre à vous de changer le sélecteur pour l’appliquer à tous vos textareas, ou juste à ceux d’une classe précise.

$().ready(function(){
$('#comment').autoResize({
    // On resize:
    onResize : function() {
        $(this).css({opacity:0.8});
    },
    // After resize:
    animateCallback : function() {
        $(this).css({opacity:1});
    },
    // Quite slow animation:
    animateDuration : 300,
    // More extra space:
    extraSpace : 40
});
});

Vous l’aurez compris, ce plugin s’adresse aux développeurs soucieux de l’ergonomie de leur site Internet et qui en ont marre de voir des barres de scroll apparaître dans leurs textareas.

Créer un site Internet pour mobile avec JQuery mobile

de arnaud

On juillet 12, 2011

dans Framework, JQuery

Temps de lecture : 3 minutes

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 !

Commencer un petit site Internet avec Instant Blueprint

de arnaud

On juillet 12, 2011

dans Outils

Temps de lecture : < 1 minute

Instant Blueprint est un service en ligne qui vous permet en quelques clics de mettre en place une architecture de base pour votre nouveau projet de site Internet. En effet, après avoir renseigné quelques informations, il va vous générer automatiquement le squelette de votre site Internet.

Pour utiliser cet outil, il vous faut renseigner :

Titre du projet
Le doctype désiré
Le framework javascript à inclure
Comment inclure le framework (local ou distant, compressé ou normal)
L’extension du fichier index (html, htm, php, asp)
Que mettre dans le dossier include (config.php et/ou fonction.php)
Centrer ou non le contenu du site
Les principales div de la page

Voici le squelette généré :

A partir de ces quelques informations, Instant Blueprint génère le projet et vous propose de le télécharger. Bien entendu, tout reste à faire, mais la partie rébarbative est déjà faite.

Toutefois, il faudra penser à changer le charset par défaut, histoire de le passer en UTF-8 et ainsi se simplifier la vie niveau encodage.

C’est l’outil idéal pour les petits projets.

Google plus invitation

de arnaud

On juillet 11, 2011

dans Autre

Temps de lecture : < 1 minute

Google vient de mettre en ligne la nouvelle mouture de son réseau social Google+.
Très peu de personnes ont eu des invitations, cependant, j’ai eu la chance d’en faire partie.

J’apprécie tout particulièrement la gestion de la confidentialité de nos informations et les cercles de confidentialité en un simple clic.
En effet, on peut décider de divulguer un statut, une image ou une information personnelle à un ou plusieurs cercles. Les autres ne le verront pas. L’avantage c’est que l’on peut choisir au cas par cas.

Comme l’indique très bien Google sur le réseau social :

Note importante à propos de la version test de l’application -Vous faites partie d’un petit groupe de personnes qui testent Google+. Lorsque vous partagez un contenu avec des personnes qui ne sont pas encore en mesure d’utiliser Google+, ces dernières le reçoive par e-mail, mais ne peuvent pas le commenter ni l’utiliser comme les autres utilisateurs de Google+. Elles pourront rejoindre Google+ à mesure que nous accepterons davantage d’utilisateurs.

Par conséquent une fois l’invitation envoyée il faudra attendre que Google décide d’accepter de nouveaux utilisateurs pour les utiliser. Mais étant donné la bonne avancée du projet et l’absence de bogues importants, je pense que les invitations seront validées dans les 48h maxi.

Comme je fais partie des privilégiés à avoir un compte, je peux inviter quelques personnes sur Google+.

150 invitations à google plus disponible

Listes triées et animées avec Quicksand

de arnaud

On juillet 6, 2011

dans JQuery

Temps de lecture : < 1 minute

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.

Aider les webmasters avec UpgradeBrowsers

de arnaud

On juillet 4, 2011

dans JQuery

Temps de lecture : < 1 minute

Vous en avez marre de devoir faire des designs pour des versions non mises à jour de navigateur ? Oui, moi aussi. Alors insérez le plugin UpgradeBrowsers dans votre site Internet, dans votre page d’accueil par exemple. Le plugin indiquera simplement à l’utilisateur que son navigateur n’est pas à jour en l’invitant à le mettre à jour. Les autres utilisateurs ne se douteront même pas de la présence du plugin sur votre site.
Voici les quelques lignes de code à insérer dans votre page pour mettre en place le plugin, avant la fermeture du body.

http://upgradebrowsers.com/upgradebrowsers_v01/jquery.upgradebrowsers.min.js

En cas de navigateur non mis à jour voici le résultat affiché en haut de votre page :

Pensez-y, pour nous simplifier la vie.

Convertir des formules Latex en HTML

de arnaud

On juillet 1, 2011

dans Autre

Temps de lecture : < 1 minute

Le Latex est à mis chemin entre le langage de programmation et le traitement de texte. Il permet de rédiger des documents officiels sans avoir à mettre en forme manuellement le texte. En effet, avec de simples instructions, on peut ajouter des paragraphes, des titres ou des chapitres avec une mise en forme automatique.
Le point fort de Latex est qu’il permet d’insérer des formules mathématiques complexes.
C’est d’ailleurs pour cela que la plupart des mathématiciens l’utilisent régulièrement dans leurs articles ou leurs rapports.

Tout ceci est très intéressant, mais comment faire pour insérer une telle formule mathématique dans une page HTML ?
Eh bien, jusqu’à présent on écrivait nos formules en Latex puis on faisait une capture d’écran…

Mais la librairie mathjax vous permet, à partir de votre code Latex, d’afficher en HTML votre formule comme vous l’auriez eue sur un document pdf.

Vous pourrez trouver une démonstration complète de cette librairie à l’adresse suivante http://www.mathjax.org/demos/tex-samples/.

Je trouve le résultat assez impressionnant !

Voici une image montrant la qualité du résultat obtenu.