Développement Web, Webdesign, SEO, Multimédia - Guillaume Voisin, Ingénieur Web

Tutoriel: Apprendre les feuilles de style XSL(T)

Gui — Tue, 02 Feb 2010 15:35:26 +0000

Le XML est un format très répandu, utilisable dans de nombreuses applications:

Site Internet
Application Mobile
Progiciel
Application Flash
…

Il est donc très intéressant de penser à stocker ses données ou les exporter si celles-ci sont préalablement stockées dans une base de données, dans ce format là.

Mais les données sont alors brutes, sans mise en page particulière. C’est ici qu’intervient XSL(T).

DEMO DOWNLOAD

XSL(T) est un langage de transformation XML qui permet d’extraire les informations contenues dans un fichier XML, soit de manière graphique (vers un affichage HTML le plus souvent) soit de manière texte ou binaire (pour des utilisations tierces).

Nous allons donc voir dans ce tutoriel comment réaliser une page web simple à partir d’un document XML en s’appuyant sur une feuille de style XSL. Nous allons créer un CV en ligne.

Création du fichier XML

Tout d’abord, nous allons créer un fichier XML simple resume.xml avec le contenu suivant :

< ?xml version="1.0" encoding="UTF-8"?>
< ?xml-stylesheet type="text/xsl" href="resume.xsl"?>


	Spy

	
		John
		Doe
		
			7, Lombard Street
			90210
			Los Angeles
		
	

	

		
			Université UCLA
			Diplôme d'ingénieur en informatique
		

		
			Université de Boston
			License de marketing

Pour plus d’informations concernant la création de documents XML, suivez ce lien: Création de document XML.

Nous avons défini dans ce document différents noeuds XML:

correspond à la racine du document
reprend les informations générales sur la personne
correspond aux différentes formations suivies

Vous avez sans doute remarqué la ligne :

< ?xml-stylesheet type="text/xsl" href="resume.xsl"?>

Celle-ci permet de lier le document XML à une feuille de style XSL(T).

Création de la feuille de style XSL(T)

Nous allons donc créer un fichier resume.xsl et renseigner le type de document dont il s’agit ainsi que du format d’encodage :

Ensuite, nous allons informer le navigateur que nous utilisons une feuille de style XSL

Cette balise fonctionne comme la balise « html », elle encadre tout le contenu que l’on va mettre dans le fichier.

De la même façon que l’on définir une doctype pour un fichier XHTML, ici nous pouvons définir une doctype pour notre feuille de style :

Maintenant, nous pouvons commencer la transformation/extraction des données XML pour l’afficher en XHTML !

Transformation

Nous allons donc commencer à extraire les données du document XML. Pour cela, nous définissons un noeud template :

L’attribut match indique que la transformation s’applique à partir de la racine du document XML.

Nous pouvons ensuite ajouter un peu de markup pour habiller la page.

Extraction de valeur


	
		<xsl:value-of select="resume/title"/>

Nous avons extrait le titre de la page à partir du fichier XML via la balise dont on précise le noeud à partir duquel il doit récupérer l’information select= »resume/title ».

Il est important de toujours préciser le chemin vers la balise concernée depuis la racine du document resume/.

, ,

Boucles

Il est possible d’utiliser des boucles en XLS(T). Dans notre exemple, pour afficher les différentes formations, il nous faut parcourir les noeuds contenus dans .

On peut donc pour ça utiliser la syntaxe suivante :

Comme toujours, l’attribut select permet de cibler le noeud qui nous intéresse. Ici, nous allons itérer sur le noeud .

Tri

Nous pouvons également trier selon un attribut grâce à la commande suivante :

L’attribut <select> permet de sélectionner le paramètre de tri, qui est dans notre cas l’attribut « from ». On définit que ce paramètre est un nombre data-type= »number » et que l’on tri de manière décroissante order= »descending ».

Conditions

Il est possible de faire des tests conditionnels grâce à la méthode .



	
		From  to , , 
	

	
		From  to , ,

L’équivalent XSL(T) du if() else() est donc .

Ici, nous voulons simplement zébrer la liste des formations, grâce au test modulaire position() mod 2 = 0 qui renvoit 0 ou 1.

Conclusion

Et voilà, notre fichier XML et sa feuille de style sont prêts !

C’est ici pour la demo ou ici pour les sources.

Aller plus loin

Tutoriel: Réaliser un diaporama simple avec JQuery

Gui — Thu, 29 Oct 2009 13:59:10 +0000

JQuery est devenu rapidement un framework de développement javascript indispensable, très pratique que ce soit pour développer de simples fonctionnalités ou des sites complets.

Souvent, lors de la création d’un site internet, on rencontre les mêmes fonctionnalités de base (des rollover sur les images, un menu déroulant, un diaporama …), et pour chacun d’entre eux, il existe quasiment un plugin JQuery qui répond à ces attentes.

Il peut être également utile de développer un plugin pour une fonctionnalité simple mais à laquelle on se trouve souvent confronté et dont on veut maîtriser le fonctionnement.

Mon premier tutoriel s’articulera donc autour de la mise en place d’un plugin JQuery simple: un diaporama Photo.

DEMO DOWNLOAD

Introduction

Nous allons donc réaliser un diaporama de photos. Le principe étant que les photos défilent les unes après les autres avec une transition par fondu enchaîné. Nous allons aussi ajouter des boutons de contrôle pour mettre en pause le diaporama, accéder à la photo suivante ou précédente.

Première étape: partie HTML

Avant tout, il convient d’inclure la librairie JQuery dans notre page de test. Vous pouvez la trouver ici : Librairie JQuery

Ensuite, nous allons écrire une page HTML simple avec une liste de photos.



	
		Diaporama Simple JQuery
		

		
		
		

		
		
		
		
	

	

		Diaporama Simple

Deuxième étape: partie CSS

Le principe de base du diaporama est de superposer les images pour ensuite les faire défiler. Nous allons donc créer une feuille de style avec les propriétés suivantes :

.diaporama{
	position:relative;
	width:512px; /* Largeur d'une photo */
	height:288px /* Hauteur d'une photo */
}

.diaporama li{
	list-style-type:none;
	overflow:hidden;
	position:absolute /* Les images seront positionnées toutes au même endroit */
}

.diaporama_controls{
	width:512px;
	margin:3px 0;
	padding:5px;
	clear:both;
	overflow:hidden;
}

.diaporama_controls .btns{
	float:right;
}

.diaporama_controls a{
	font-weight:normal;
	width:10px;
	height:13px;
	text-indent:-9999px;
	display:inline-block;
	margin:0 3px;
}

.diaporama_controls .prev{
	background:url(img/fleches_diapo.png) no-repeat top right;
}

.diaporama_controls .next{
	background:url(img/fleches_diapo.png) no-repeat top left;
}

.diaporama_controls .pause{
	background:url(img/fleches_diapo.png) no-repeat bottom right;
}

.diaporama_controls .play{
	background:url(img/fleches_diapo.png) no-repeat bottom left;
}

Je ne détaillerai pas le contenu de la feuille de style page.css, celle-ci n’est utilisée que pour la mise en page de l’index.html.

Voici le résultat que nous avons pour l’instant :

Troisième étape: partie JQuery

Nous allons avoir deux fichiers javascript :

Notre fichier plugin « jquery.diaporama.js«
Un fichier de script, pour exécuter le diaporama « script.js«

Instanciation du plugin Diaporama

La fonction Diaporama doit être appelée dans la page html, au chargement de la page, au moyen de la fonction JQuery $(document).ready()

Cet appel sera effectué depuis le fichier script.js :

$(document).ready(function(){

	$(".diaporama").diaporama({
		animationSpeed: "slow",
		delay:2
	});

});

On va éxécuter la fonction diaporama sur tous les éléments qui ont une classe « diaporama ».

Structure du plugin

(function($){ // 1
	$.fn.diaporama = function(options) {

		// 2 Appliquer le diaporama sur chacun des éléments ciblés
		this.each(function(){

		});

		return this;  // 3 Continuer le chainage JQuery
	};
})(jQuery);

Voici la structure de base d’un plugin JQuery :

On utilise function($) pour explicitement dire qu’on va utiliser l’alias « $ » dans notre fonction
La fonction diaporama va être appelée sur un élément ou un ensemble d’éléments. Il convient donc d’éxécuter pour chacun des éléments rencontrés la fonction diaporama
Le chaînage permet de continuer d’appliquer des fonctions à notre sélecteur, par exemple, $(« .diaporama »).diaporama().show.fadeOut() …

Paramètres

Nous allons utiliser différents paramètres pour notre diaporama :

delay: le délai de balayage des images
animationSpeed: la durée de l’effet de transition
controls: affichage des boutons de contrôle

Cela va se traduire dans notre script par :

var defaults = {
	delay: 3,
	animationSpeed: "normal",
	controls:true
};

var options = $.extend(defaults, options);  // 1

$.extend est une fonction JQuery qui permet de créer une variable options à partir, soit de la variable defaults, soit des paramètres spécifiés dans l’appel de la fonction $.fn.diaporama = function(options)
De ce fait, les paramètres non spécifiés dans l’appel du plugin seront ceux par défaut.

Initialisation

On va maintenant initialiser le diaporama:

Vérifier que la liste contient au moins deux photos
Initialiser nos variables
Lancer la mécanique de rotation d’images

// On attribue à la variable obj, l'objet courant (le diaporama courant)
var obj = $(this);

// On teste si il y a plus d'une image, sinon le diaporama n'est pas nécessaire
if($(obj).find("li").length > 1){

	// On va exécuter la fonction nextElt à chaque intervalle de temps
	var inter = setInterval(function(){nextElt(options)}, (options.delay*1000));

	// On enregistre le sens de rotation
	var sens = "right";

	// Par défaut, le diaporama n'est pas en pause
	var pause = false;

	// On cache tous les éléments de la liste
	$(obj).find("li").hide();

	// Le premier élément s'affiche progressivement et se voit attribuer la classe "active"
	$(obj).find("li:first-child").addClass("active").fadeIn(options.animationSpeed);
}

Si le paramètre controls est défini à true, alors on ajoute les boutons de contrôle:

// On veut ajouter des boutons de contrôle
if(options.controls)
{
	// On insère après la liste un  contenant les boutons "précédent", "suivant" et "pause"
	$(obj).after("Prec. Pause Suiv.");

	// On définit l'action click pour le bouton "précédent"
	// La méthode siblings() permet de trouver les éléments "frères" de l'élément courant
	$(obj).siblings().find(".prev").click(function(){
		// On supprime l'intervalle automatique de transition d'image
		clearInterval(inter);

		// On appelle la fonction qui affiche l'image précédente
		prevElt(options);

		// Si le diaporama n'est pas sur pause, on relance l'affichage automatique
		if(!pause)
			inter = setInterval(function(){prevElt(options)}, (options.delay*1000));

		// On définit le sens à gauche
		sens = "left";
	});

	// On applique la même méthode ou presque au bouton "suivant" (dans l'autre sens)
	$(obj).siblings().find(".next").click(function(){
		clearInterval(inter);
		nextElt(options);
		if(!pause)
			inter = setInterval(function(){nextElt(options)}, (options.delay*1000));
		sens = "right";
	});

	// Si on appuie sur "pause", on définit deux actions
	$(obj).siblings().find(".pause").toggle(

		// On change l'image de fond du bouton via la classe "play"
		function(){
			$(this).removeClass("pause").addClass("play");

			// On supprime l'intervalle
			clearInterval(inter);

			// On positionne le booléen à true
			pause = true;
		},
		function(){

			// On remet l'image originale
			$(this).removeClass("play").addClass("pause");

			// On relance le diaporama dans le sens où il était
			inter = setInterval(function(){ (sens == "right")?nextElt(options):prevElt(options)}, (options.delay*1000));
			pause = false;
		}
	);
}

Ensuite, nous allons développer la fonction qui permet de passer à l’image suivante:

function nextElt(options)
{
	// On cache de manière progressive l'image active
	$(obj).find("li.active").fadeOut(options.animationSpeed);

	// Si l'image active courante n'est pas la dernière image de la liste
	if(!$(obj).find("li.active").is(":last-child"))
	{
		// Alors on cherche l'image suivante (".next()"), on lui ajoute la class "active",
		// et on retire cette classe à l'image précedente (l'ancienne image active)
		$(obj).find("li.active").next().addClass("active").prev().removeClass("active");

		// On affiche la nouvelle image active progressivement
		$(obj).find("li.active").fadeIn(options.animationSpeed);
	}
	// L'image est la dernière de la liste
	else
	{
		// On fait la même chose mais en prenant la première image de la liste via le sélecteur "first-child"
		$(obj).find("li:first-child").addClass("active").fadeIn(options.animationSpeed);
		$(obj).find("li:last-child").removeClass("active");
	}
}

Script final

Et voilà, nous avons à présent tous les éléments dont nous avons besoin pour que le diaporama fonctionne.

Voici le script final diaporama.js :

(function($){
	$.fn.diaporama = function(options) {

		var defaults = {
			delay: 3,
			animationSpeed: "normal",
			controls:true
		};

		var options = $.extend(defaults, options);

		this.each(function(){

			var obj = $(this);

			if($(obj).find("li").length > 1){
				var inter = setInterval(function(){nextElt(options)}, (options.delay*1000));
				var sens = "right";
				var pause = false;

				$(obj).find("li").hide();
				$(obj).find("li:first-child").addClass("active").fadeIn(options.animationSpeed);

				// Controls

				if(options.controls)
				{
					$(obj).after("Prec. Pause Suiv.");

					$(obj).siblings().find(".prev").click(function(){
						clearInterval(inter);
						prevElt(options);
						if(!pause)
							inter = setInterval(function(){prevElt(options)}, (options.delay*1000));
						sens = "left";
					});

					$(obj).siblings().find(".next").click(function(){
						clearInterval(inter);
						nextElt(options);
						if(!pause)
							inter = setInterval(function(){nextElt(options)}, (options.delay*1000));
						sens = "right";
					});

					$(obj).siblings().find(".pause").toggle(
						function(){
							$(this).removeClass("pause").addClass("play");
							clearInterval(inter);
							pause = true;
						},
						function(){
							$(this).removeClass("play").addClass("pause");
							inter = setInterval(function(){ (sens == "right")?nextElt(options):prevElt(options)}, (options.delay*1000));
							pause = false;
						}
					);
				}

				// Affiche l'élément suivant

				function nextElt(options)
				{
					$(obj).find("li.active").fadeOut(options.animationSpeed);

					if(!$(obj).find("li.active").is(":last-child"))
					{
						$(obj).find("li.active").next().addClass("active").prev().removeClass("active");
						$(obj).find("li.active").fadeIn(options.animationSpeed);

					}
					else
					{
						$(obj).find("li:first-child").addClass("active").fadeIn(options.animationSpeed);
						$(obj).find("li:last-child").removeClass("active");
					}
				}

				// Affiche l'élément précédent

				function prevElt(options)
				{
					$(obj).find("li.active").fadeOut(options.animationSpeed);

					if(!$(obj).find("li.active").is(":first-child"))
					{
						$(obj).find("li.active").prev().addClass("active").next().removeClass("active");
						$(obj).find("li.active").fadeIn(options.animationSpeed);

					}
					else
					{
						$(obj).find("li:last-child").addClass("active").fadeIn(options.animationSpeed);
						$(obj).find("li:first-child").removeClass("active");
					}
				}
			}
		});

		return this;
	};
})(jQuery);

Téléchargements et Démo

La démo est disponible ici.

Les fichiers sources : télécharger les fichiers sources de l’example.

Le CSS Orienté Objet

Gui — Thu, 24 Sep 2009 10:09:58 +0000

La Programmation Orientée Objet est un concept qui a fait ses preuves dans la conception de sites internet. En effet, elle permet d’avoir un code structuré, facilement réutilisable et dont la mise à jour est rapide et aisée.

Pourquoi ne pas l’adapter au CSS ?

A priori, le CSS n’a pas grand chose à voir avec de la POO. Pourtant, à y regarder de plus près, on y retrouve des concepts bien familiers:

Système de Classes
Propriétés
Héritage

Comment l’appliquer au CSS

Les classes CSS

Plutôt que d’attribuer à chaque élément de mise en page une classe CSS dont les propriétés sont spécifiques à cet élément précis, on peut tout à fait prévoir de créer des classes génériques que l’on utilisera au besoin selon la mise en page souhaitée.

Exemple ci-dessous d’une mise en page dite « spécifique »:

index.html


  Une photo:

style.css

.photo{
    float:left;
    font-style:italic;
    font-weight:bold;
    width:50%
}

Il est évident que le code CSS ci-dessous est exclusivement réservé à cet élément « photo ». Pour des éléments quasi similaires (correspondance de deux voire trois propriétés), le code CSS devient redondant, ce qui implique un alourdissement du poids de la feuille de style et la nécessité de passer dans chacune des classes concernées lors de mises à jour.

Exemple ci-dessous d’une mise en page dite « orientée objet »

index.html


  Une photo:

style.css

.floatleft{
    float:left
}

.strong{
    font-weight:bold
}

.italic{
    font-style:italic
}

.half{
    width:50%
}

Ici au contraire, le code est:

« générique »,
réutilisable sur d’autres éléments,
compréhensible,
explicite,
n’alourdit pas la feuille de style (seulement un peu l’index.html vous me direz …)

La nomenclature des classes CSS est importante et doit être bien écrite pour être réutilisable. Ainsi, il ne faut pas écrire:

p.chapeau span.lettrine{
    font-size:2.5em
}

Mais

.chapeau .lettrine{
    font-size:2.5em
}

De cette façon, vous pouvez changer à souhait le code xhtml mais aussi utiliser ces classes sur d’autres éléments.

L’héritage

Quoique vous fassiez, vous l’utilisez. A partir du moment où vous définissez un sous ensemble, c’est de l’héritage. Par exemple :

.mondiv .header p{
    margin:0 10px
}

Après, il convient de l’utiliser à bon escient.

Trop de détails encombre la feuille de style et oblige à redéfinir les propriétés par la suite.

Ainsi:

#header #bandeau .top ul li a{
    text-decoration:underline
}

peut se réduire à :

#header .top li a{
    text-decoration:underline
}

De manière générale, il est plus intéressant d’appliquer des styles par héritage que par définition de classes. De cette manière, il est plus simple de changer la structure sans devoir repasser sur chacun des éléments afin d’y changer la classe.

Exemple:


  
    Item 1
    Item 2

Avec comme feuille de style:

.itemlist{
    padding:5px
}

peut être remplacé par:


  
    Item 1
    Item 2

.list li p{
    padding:5px
}

Enfin, sachez qu’en utilisant trop d’héritage vous pourriez rencontrer des problèmes de redéfinition de classe.

En effet, mettons que vous avez cette classe dans votre page principale:

#content .header p{
    color:blue
}

Et que vous voulez qu’en règle générale tous les paragraphes du « header » soient de couleur rouge. Vous écririez logiquement :

.header p{
    color:red
}

Eh bien, malheureusement, cette dernière propriété ne sera pas prise en compte car la définition précédente à l’aide d’un identifiant est prioritaire par rapport à la définition par la classe.

Vous pourriez toutefois ruser en écrivant :

.header p{
    color:red !important /* Prend le pas sur toutes les définitions */
}

Mais ce n’est pas du joli joli !

Conclusion

Voici donc un aperçu du CSS Orienté Objet, une façon simple, logique et structurée d’améliorer votre intrégration xHTML, qui vous fera gagner du temps précieux, et rendra votre code nettement plus lisible et réutilisable !

Aller plus loin …

Les iPhones gagnent du terrain sur le web !

Gui — Thu, 17 Sep 2009 12:58:32 +0000

Qui aujourd’hui ne peut pas se connecter à Internet depuis son téléphone ?! L’offre est devenue presque « basique ». Les portables sont très performants, ergonomiques et disposent de grands écrans, seul le forfait adapté peut faire plancher le consommateur.

Source: AT Internet Institute

Il n’est donc pas surprenant de voir que la fréquentation des sites internet (du moins sur la période estivale) depuis un iPhone, qui est sans doute à l’heure actuelle, le smartphone le plus abouti et le plus apprécié, représente presque 1 % des visites totales !

Il faudra donc dans un avenir proche penser à concevoir vos sites internet pour les téléphones portables aussi, en terme d’interaction et d’affichage.

Par ailleurs, si vous voulez que j’adapte mon site pour iPhone, achetez-en moi un

guillaumevoisin.fr se fait tout beau pour la rentrée!

Gui — Sat, 05 Sep 2009 21:36:07 +0000

Comme chaque année maintenant, le site fait peau neuve. La tendance actuelle: « l’élasticité » et le « fluid design« . Au menu de ce nouveau design: des couleurs sobres mais harmonieuses, pas mal d’interactivité, une amélioration générale de l’ergonomie et bien sûr, un refus catégorique de passer 36h à faire en sorte que le site sorte propre sur IE 6.

Nouveau design pour guillaumevoisin.fr : Fluide

Eh oui c’est une première, si vous vous plaigniez du mauvais affichage sous IE6, ce n’est pas que je l’ai oublié mais au contraire bien pensé à ne pas y faire attention . Pour rappel, nous sommes passés à IE 8 maintenant, alors à vos mises à jour !

Les bases du référencement naturel

Gui — Fri, 21 Aug 2009 08:56:10 +0000

Voici un petit rappel des principes de base de référencement naturel à mettre en place lors de la conception d’un site internet.

Sémantique et standards

Structure

L’un des aspects les plus importants pour le référencement d’un site est la structure HTML de celui-ci. Il est primordial d’utiliser les éléments de base du langages tels que:

Les balises de type headers ,
, … pour les titres
Les balises
pour les paragraphes
Les balises
- pour les listes d’éléments
- Les balises pour la mise en avant de texte
Non seulement l’utilisation de ces balises de base permettent aux moteurs de recherche de mieux cibler le contenu, de mieux l’interpréter mais cela permet également en cas de non affichage des feuilles de style de conserver une mise en page cohérente, puisque ces balises ont un style par défaut.

Standards W3C

Dans la mesure du possible chaque page d’un site internet devrait respecter les standards imposés par le W3C.

Cela permet non seulement d’avoir un code « propre », plus facilement interprétable par les différents navigateurs, mais également une meilleure identification du contenu par les moteurs de recherche.

Il faut donc proscrire certaines balises comme:

pour le gras, préferer la balise

pour souligner, préférer le faire en css avec la propriété text-decoration:underline

De même, veillez à ne pas insérer de balises au mauvais endroit, par exemple:

des balises
à l’intérieur de
…

Métas

L’utilisation des métas est indispensable pour la bonne indexation d’un site internet.

Le titre

La balise doit comporter le titre de la page. Il est important de: <ol> <li>Insérer des mots clés pertinents qui seront repris dans la page</li> <li>Ne pas dépasser si possible la taille de 65 caractères (au délà les moteurs de recherche n’y feront plus attention)</li> <li>Personnaliser chaque titre, ne pas répéter les mêmes titres sur différentes pages.</li> <li>Commencer le titre par les mots clés les plus importants, exemple:<title>Conception et Réalisation de Sites Internet – Nom de la société

Meta description

Autrement plus importante, la balise de description n’a plus d’incidence sur le positionnement d’un site internet. Elle n’est utilisée que pour l’affichage des résultats dans google notamment.

Il est cependant important de soigner cette présentation pour avoir plus d’impact lors de la recherche d’un utilisateur. Pour cela, il est conseillé de limiter cette description à ~200 caractères.

Meta keywords

De même cette balise n’est plus utilisée par Google ou par les autres grands moteurs de recherches. S’ils sont déjà en place, ils pourront toujours servir pour d’autres moteurs.

Les balises Metas ne sont donc plus le facteur le plus important pour le bon positionnement d’un site internet.

Contenu Original et Linking

Un contenu unique

L’ un des aspects les plus importants du référencement est le contenu.

Il se doit d’être:

Original, unique et soigné, pour se démarquer des sites concurrents et éviter la duplication de contenus.

Constitué de bons mots clés, le contenu d’une page sur la conception de sites internet devrait reprendre ce mot clé 4 à 5 fois dans le contenu (ainsi que dans le titre de la page). Ce sont eux les keywords importants maintenant.

Avoir de bons liens internes et externes. Un lien de qualité (ciblé et dans le même thème aura beaucoup plus d’impact que des liens ordinaires). Toutes les pages d’un site doivent communiquer entre elles le plus possible.

Conséquent, il faut une bonne quantité de contenu de qualité dans la page, si possible placé le plus haut dans la page.

De bons liens

En plus des liens internes, plus le site comporte de backlinks (liens retour vers notre site), mieux c’est. Les liens peuvent comporter l’attribut « title » qui permet notamment dans le cas de liens externes de préciser de quoi il s’agit.

Il faut également éviter de mettre des liens du type « Cliquez ici », « lire la suite … » car les liens sont très importants et ceux ci ne comportent pas de mots clés. On peut par exemple écrire « Continuer la lecture de [titre de l'article] ».

Sitemap

Il est important de toujours mettre un plan du site (html) pour guider l’utilisateur mais également pour indiquer au moteur de recherche toutes les adresses du site.

Il faut également soumettre un sitemap.xml à Google qui reprend toutes les pages du site.

Utilisation des medias

Bien évidemment, plus il y a de texte dans une page web, mieux c’est pour le référencement. Ainsi, les images ne doivent dans la mesure du possible ne pas être utilisées pour afficher du texte, dans les menus notamment (Voir le script Flash Sifr)

En ce qui concernent les images, celles-ci doivent bien sûr comporter les deux attributs « alt » pour Internet Explorer et « title » pour Firefox et autres.

Réécriture des adresses (Url Rewriting)

Un point très influent dans l’indexation d’un site internet est la réécriture d’Urls.

Celle-ci consiste via un fichier .htaccess (sous Apache) à réécrire les urls dynamiques contenant des paramètres en adresses compréhensibles, comportant des mots clés.

Exemple:

monsite.com/index.php?cat=12&id=23

Deviendra

monsite.com/technologie/referencement-naturel

On peut donc ainsi ajouter de nouveaux mots clés en concordance avec le titre de la page ainsi que ceux écrits dans le contenu de la page.

De plus, pour l’utilisateur, il devient plus facile de comprendre sur quel site il s’aventure, sans pouvoir pour autant en modifier les paramètres.

Il faut également éviter de dupliquer les adresses sur deux noms de domaine différents. Par exemple la page http://monsite.com/index.php est la même que la page http://www.monsite.com/index.php mais les deux seront indexées.

Mises à jour

Pour veiller à la bonne indexation d’un site internet, il est important d’apporter des mises à jour régulières, via par exemple un module d’actualités, ou ajouter de nouveaux projets. Ceci créera de nouvelles pages, donc de nouveaux éléments à indexer pour les moteurs de recherche.

Inscription dans les annuaires

Cette étape est importante pour le démarrage d’un nouveau site.

Il faut veiller à ce que:

le lien vers le site doit être en adresse absolue évidemment

le texte du lien doit être optimisé (pas de Cliquez ici ou Voir le site)

l’annuaire doit être bien indexé par les moteurs et même mieux : il doit être bien positionné dans Google pour la thématique qui nous intéresse, c’est une preuve que cet annuaire nous apportera quelque chose en termes de référencement

le contexte sémantique du lien vers le site doit être bon

Page 404

La page 404 est importante car elle permet de rediriger une page inexistante tapée maladroitement par un utilisateur ou un moteur vers une page d’erreur personnalisée qui affichera par exemple une plan du site ou une liste de liens en rapport avec les mots clés saisis.

Fichier robots.txt

Ce fichier déposé à la racine du serveur permet d’informer les différents moteurs de recherches dont Google quels dossiers il ne doit pas indexer. Par exemple le dossier admin …

Firefox 3.5 est sorti !

Gui — Tue, 30 Jun 2009 16:47:40 +0000

Enfin! 1 an après la sortie de Firefox 3, voici la dernière version du légendaire renard de feu. Plus puissant, plus rapide, il reste le meilleur navigateur sur la toile !

Vous pouvez le télécharger dès maintenant sur le site de la fondation Mozilla.

Vous pourrez ainsi tester les nouvelles performances du navigateur, son mode de navigation privée ainsi que sa gestion native des balises HTML 5.

Alors à vos téléchargements !

World Wide Developer Conference 2009 à San Francisco

Gui — Mon, 08 Jun 2009 16:37:55 +0000

A 19h, heure française, débutera la conférence mondiale des développeurs (WWDC) à San Francisco aux Etats Unis.

C’est l’occasion pour Apple, de présenter pendant toute une semaine, toutes ses nouveautés, aussi bien dans les appareils mobiles (iPhone) que les ordinateurs portables (MacBook) et bien sûr le nouveau système d’exploitation Mac OSX Snow Leopard.

Beaucoup d’attente pour cet évènement qui rassemble des développeurs du monde entier.

Depuis pas mal de semaines les rumeurs s’enchaînent, et on espère bien découvrir de belles surprises!

Les nouveautés très attendues cette année sont:

Nouveau système d’exploitation Mac OSX Snow Leopard

Nouveau iPhone OS 3.0

Un nouvel iPhone 3GS 2009?

Rendez vous tout de suite sur Mac Génération pour suivre en direct le déroulement de la conférence.

Ajax et référencement

Gui — Wed, 29 Apr 2009 12:44:31 +0000

La technologie Ajax, qui a vu le jour il y a déjà quelques années maintenant, permet de développer des sites très ergonomiques, pratiques et intuitifs. C’est l’effet Web 2.0.

Explication

Le principe de base est de récupérer la plupart des contenus du site en interrogeant des scripts serveurs externes via des appels en Javascript.

Mais au delà de l’interactivité du site, il existe aussi un réel enjeu: le référencement (SEO).

Si tous les contenus sont créés dynamiquement à partir de Javascript, il n’existe donc pas réellement de contenu « physique » dans la page. Il n’y a donc aucune donnée à indexer par les moteurs de recherche.

Hors nous avons vu l’importance de la sémantique dans le référencement naturel d’un site.

Solution

Préambule

Le web 2.0 a engendré de nombreux changements dans la façon d’organiser un site. L’un des principaux est la séparation du contenu (html), de l’affichage (css), et des interactions utilisateurs (script).

Tous les styles sont donc stockés dans une feuille de style externe et les scripts Javascript dans un fichier .js externe.

A quoi ça sert?

Il y a plusieurs bonnes raisons de recourir à une telle organisation:

Beaucoup moins de fichiers à éditer en cas de modifications du site

Une plus grande clarté dans le code

Une indépendance du script par rapport au contenu

Application

1) Première étape

Cela implique des nouvelles conventions de nommage: fini les Lien.

Maintenant, il suffit de donner un identifiant à cet élément Lien, puis dans notre fichier javascript d’appliquer un traitement particulier pour cette élément, soit par la méthode getElementById(« lien1″), soit si on utilise un framework javascript comme JQuery, $(« #lien1″).

Une fois que tous les éléments de notre page html ont été identifiés, tous les traitements peuvent être effectués depuis notre fichier javascript externe.

2) Deuxième étape

Pour optimiser au mieux le référencement de son site, il est important de prendre des mesures particulières:

Bien indiquer les adresses des liens même lorsqu’on appelle une fonction Ajax en cliquant dessus.

Appliquer ces fonctions à des liens ().

Pourquoi? La raison est simple: si Javascript est désactivé (ce qui est le cas des robots des moteurs de recherche) alors la fonction ne s’applique pas et le lien est suivi normalement.

Cela signifie que le site entier est consultable par un robot et que tout le contenu est bien indexable car physiquement présent.

En effet, dans le cas où Javascript est désactivé, il suffit de créer sa page en prenant en compte des paramètres serveur et d’afficher le contenu en fonction, alors qu’en utilisant ajax, cela se fait sans recharger sa page.

Simplifier

En utilisant un framework Javascript, il devient encore plus facile de réaliser ce genre d’application.

En effet, en utilisant des selecteurs, il est très facile de manipuler les liens d’une page html:

Exemple ici avec JQuery:

$("div.contenu a").click(function(){ appelAjax(); // Appel fonction Ajax return false; // Très important }

Explication:

Ce script va effectuer un appel à la fonction appelAjax() sur tous les liens contenus dans le <div> qui a la classe « contenu« .

A noter l’utilisation de « return false« , qui permet de ne pas rediriger sur l’adresse du lien.

Exemple

Mon portfolio personnel est construit de cette façon là, essayez donc de désactiver javascript et vous verrez!

Conclusion

Aujourd’hui, et grâce principalement aux frameworks Javascript, Référencement et Ajax c’est possible. Il suffit de bien organiser son site, de prévoir les pages serveurs qui seront utilisées par les moteurs de recherche (sans javascript) et les scripts Ajax utilisés par les utilisateurs.

Plus de lecture …

Référencement et Ajax sur le journal du net

Optimiser un site en Ajax

M6 se paye notre tête!

Gui — Mon, 20 Apr 2009 18:38:03 +0000

Surprise ce matin, des amis m’apprennent que Sébastien Angot et moi-même sommes passés à la TV. Ca s’est passé le vendredi 17 avril sur M6 dans l’émission 100% Mag. Jusque là rien d’étonnant…

Le petit détail, c’est que nous n’étions pas au courant!

Explications

Nous apparaissons effectivement dans une photo illustrant un reportage vidéo sur Céline Dion au Québec où nous sommes en tenue de Hockey sur Glace dans un vestiaire à Montréal.

Cela se passe à la 38ème minute. Vous pouvez voir la vidéo dans les archives de M6.

Commentaire audio du reportage, parlant du fils de Céline Dion:

… et s’il est trop mauvais comme joueur de hockey, il pourra toujours nettoyer les vestiaires …

Que faut-il comprendre ? … Que nous sommes des joueurs de hockey exceptionnels ou que nous sommes bons pour faire le ménage? A vous de décider

Comment notre photo a-t-elle atterri ici?

Cette photo a été prise par Réjane lors de notre année universitaire à Montréal, au Canada. Sébastien et moi tenions alors un blog où nous postions régulièrement des news et des photos.

Google faisant bien son travail, de nombreuses photos ont été référencées par le géant américain et M6 n’a eu donc qu’à piocher dans la grande bibliothèque d’images de Google sans se préoccuper des potentiels droits d’auteurs de celles-ci.

On peut en effet trouver cette photo sur le blog de Sébastien mais également sur google images en combinant les mots clés: vestiaire montréal hockey

Qu’avons nous fait?

Sébastien est entré en contact avec M6 pour leur demander des explications, notamment par rapport à deux points particuliers:

La photo n’est pas libre de droit et ne peut être exploitée sans l’autorisation de son auteur

Le droit à l’image. Nous sommes tous deux bien identifiables sur la photo.

Voici ce que dit la loi:

Le droit à l’image permet à toute personne de s’opposer – quelle que soit la nature du support utilisé – à la reproduction et à la diffusion, sans son autorisation expresse, de son image.

source: CNIL

Qu’a répondu M6

L’interlocuteur chez M6 a reconnu que l’utilisation de l’image n’était pas conforme à la loi et nous a donc proposé un dédommagement, ce que nous avons accepté.

Morale de l’histoire

Ne jamais renoncer à ses droits!

Développement Web, Webdesign, SEO, Multimédia - Guillaume Voisin, Ingénieur Web

Tutoriel: Apprendre les feuilles de style XSL(T)

Création du fichier XML

Création de la feuille de style XSL(T)

Transformation

Extraction de valeur

Boucles

Tri

Conditions

Conclusion

Aller plus loin

Tutoriel: Réaliser un diaporama simple avec JQuery

Introduction

Première étape: partie HTML

Diaporama Simple

Deuxième étape: partie CSS

Troisième étape: partie JQuery

Instanciation du plugin Diaporama

Structure du plugin

Paramètres

Initialisation

Script final

Téléchargements et Démo

Le CSS Orienté Objet

Pourquoi ne pas l’adapter au CSS ?

Comment l’appliquer au CSS

Les classes CSS

L’héritage

Conclusion

Aller plus loin …

Les iPhones gagnent du terrain sur le web !

guillaumevoisin.fr se fait tout beau pour la rentrée!

Les bases du référencement naturel

Sémantique et standards

Structure

,

, … pour les titres

Standards W3C

à l’intérieur de …

Métas

Le titre

Meta description

Meta keywords

Contenu Original et Linking

Un contenu unique

De bons liens

Sitemap

Utilisation des medias

Réécriture des adresses (Url Rewriting)

Mises à jour

Inscription dans les annuaires

Page 404

Fichier robots.txt

Firefox 3.5 est sorti !

World Wide Developer Conference 2009 à San Francisco

Ajax et référencement

Explication

Solution

Préambule

A quoi ça sert?

Application

1) Première étape

2) Deuxième étape

Simplifier

Exemple

Conclusion

Plus de lecture …

M6 se paye notre tête!

Explications

Comment notre photo a-t-elle atterri ici?

Qu’avons nous fait?

Qu’a répondu M6

Morale de l’histoire

à l’intérieur de
…