Tag / XHTML

by Kévin Dunglas

Du code dans vos pages web !

Sur ce blog comme c’est le cas sur beaucoup d’autres sites traitant de programmation, je suis souvent amené à publié des snippets de code source ou des dialogues homme – machine (des successions de commandes). HTML et XHTML disposent de balises dédiées à cette tache particulière qui sont malheureusement trop souvent ignorées alors qu’elles ont une forte valeur sémantique. Elles sont vieilles comme le web et supportées par tous les navigateurs les plus populaires.

Quels avantages ?

Structurer correctement l’information contenu dans les pages internet permet aux logiciels (robots des moteurs de recherches, …) de plus facilement lui donner un sens et déterminer sa nature. Une application concrète pourrait être la création d’un moteur de recherche de code source et de snippets à la Google Code utilisant les balises présentées ci-dessous pour déterminer le type d’articles et le langage utilisé. A l’échelle d’un blog comme le mien, on pourrait aisément mettre en place un système de coloration syntaxique (qui est en fait déjà développé) ou encore un agrégateur de snippets.

De manière plus pragmatique, utiliser le bon élément associé au type de donnée à représenter (code source, saisie clavier, sortie d’un programme, …) permet de simplement styler la page via les CSS pour en facilité la lecture (exemple : les entrées utilisateur en bleu, les sorties système en vert, …).

Intégrer le code source d’un programme

Comme son l’indique, la balise code permet d’afficher du code source. Combinée à la balise pre qui permet d’afficher du texte préformaté, elle est tout à fait adapté à des blocs de code :

Ce qui donnera :

La spécification HTML actuelle ne précise aucun moyen d’indiquer le langage de programmation dans lequel est écrit le code. Nous utilisons ici la convention présente dans le brouillon de HTML 5 (qui reste tout à fait valide en HTML 4.01 et XHTML 1.1) qui consiste à ajouter à la balise code un attribut class dont la valeur commence par language- et se termine par le nom du langage de programmation utilisé en toutes lettres : par exemple pour du C# nous utiliserons language-c-sharp. Comme nous le verrons plus bas, cette convention pourra être utilisée pour activer la coloration syntaxique.

Une autre balise peut être utile, plus spécifiquement lors de la publication de formules mathématiques ou d’algorithmes : il s’agit de var qui permet de représenter une variable.

Ce qui donne : Tant que la variable x vaut vrai, on boucle.

Représenter un dialogue homme – machine

Dans des tutoriels comme celui présentant l’installation d’une solution LAMP sur un serveur Gandi, il est nécessaire de retranscrire un grand nombre d’interactions avec le système. Généralement la saisie de commandes et la sélection d’items dans les menus.

Deux balises sont prévues à cet effet : samp et kbd. Le premier (issue de sample) représente la sortie d’un programme tandis que le second (pour keyboard) spécifie les entrées utilisateurs.

Un petit exemple de leur utilisation avec la saisie de la commande uname dans le terminal de Mac OS X :

Ce qui rendra :

Comme vous pouvez le voir, nous utilisons des balises samp et kbd au sein d'une balise samp ce qui nous permettra de le styler simplement à l'aide de CSS et rendre la lecture de cette interaction beaucoup plus claire pour l'utilisateur (par exemple à l'aide d'un code couleur pour les entrées/sorties).

Le brouillon de la spécification de HTML 5 définie plusieurs sortes d’agencement possibles pour les balises samp et kbd :

The kbd element represents user input (typically keyboard input, although it may also be used to represent other input, such as voice commands).

When the kbd element is nested inside a samp element, it represents the input as it was echoed by the system.

When the kbd element contains a samp element, it represents input based on system output, for example invoking a menu item.

When the kbd element is nested inside another kbd element, it represents an actual key or other single unit of input as appropriate for the input mechanism.

En voici une libre traduction :

L’élément kbd représente une entrée utilisateur (généralement une saisie clavier, bien qu’il puisse représenter d’autres entrées, tels que des commandes vocales).

Quand l’élément kbd est imbriqué dans un élément samp, il représente la saisie telle qu’elle a été affichée par le système.

Quand l’élément kbd contient un élément samp, il représente une entrée basé sur une sortie du système, par exemple pour appeler un item de menu.

Quand l’élément kbd est imbriqué dans un autre élément kbd, il représente la touche ou unité d’entrée équivalente utilisable avec le mécanisme d’entré.

La coloration syntaxique

Nous l’avons vu, styler via CSS les éléments présentés précédemment permet de simplifier la lecture de nos articles. Concernant les codes sources publiés, n’importe quel développeur ayant utilisé autre chose que notepad.exe comme éditeur de texte vous le confessera : la coloration syntaxique est un plus indéniable pour la lecture et la compréhension.

Plusieurs logiciels permettent d’activer la coloration syntaxique sur vos pages webs :

  • GeSHi est l’un des plus populaires et performant. Écrit en PHP, il supporte de nombreux langages mais à la désavantage de coloré le code coté serveur et de détruire à la conversion tous le soin que vous aurez apporté au balisage de votre page web…
  • SyntaxHiglighter est lui un script JavaScript qui colorera le code à sa manière pour les lecteurs humains mais le préservera dans sa forme originelle pour tous les robots et autres terminaux ne supportant pas JavaScript. J’ai créé un tout petit patch afin de le rendre plus ou moins compatible avec les standards présentés dans cette article. (C’est celui qui est utilisé sur ce blog actuellement).
  • Ajax Syntax Highlighter est la solution hybride que je développe. Un script JavaScript côté client détecte les snippets inclus dans la page et les envoi côté serveur pour être colorés (pour l’instant à l’aide de GeSHi). Comme SyntaxHighlighter (dont il reprend une partie de la CSS), il dispose d’une fonction “voir comme texte”. (Ce projet n’est pas encore publié, il le sera d’ici très peu de temps).

Ce billet s’inspire en parti de l’article Lesser-know semantic elements disponible sur l’excellent centre de ressource Opera Web Standard Curriculum.

by Kévin Dunglas

Changer la couleur du texte sélectionné dans une page web

Comme vous pouvez l’avez peut-être remarqué sur ce blog, il est possible de changer la couleur des sélections dans une page web avec les CSS. Pour créer cet effet sympa, qui ne fonctionne que sous Firefox et Safari, nous devront utiliser les sélecteurs non standardisés ::-moz-selection pour le premier et ::selection pour le second. Ils supportent tous deux les propriétés color et background-color.

Un petit example :

Vous pouvez aussi changer les couleurs de la sélection pour un élément particulier. Par exemple span::-moz-selection pour les navigateurs basés sur le moteur de rendu Gecko et span::selection pour ceux utilisant Webkit n’affectera que le texte encadré de la balise HTML <span>.

by Kévin Dunglas

Le W3C n’est pas “W3C compliant” !

Le World Wide Web Consortium est l’organisation qui rédige et publie les standards du web. Il est à l’origine de XHTML, CSS et SVG. Le W3C fourni également des validateurs qui test le respect de ses formats par les documents soumis.

Mais même une page importante du W3C comme les spécifications du format SVG échoue lors de la validation : essayez par vous-même ! Peut-être que le W3C devrait utiliser le HTML 5 pour écrire ses pages web…

W3C

by Kévin Dunglas

The W3C website is not W3C compliant !

The World Wide Web Consortium is the organization that develops web standards. It is the source of XHTML, CSS and SVG. It produces some validators to test compliance with its formats.

But even an important W3C page like the SVG specification failed to respect their own standards : try by yourself ! Should the W3C use HTML 5 to write their pages ?

W3C

by Kévin Dunglas

Introduction au référencement

Cet article de vulgarisation concernant le référencement est destiné à être exposé à un public de techniciens en formations. Il se concentre sur les concepts basiques de la discipline et met volontairement de côté ses aspects purement techniques.

Introduction

En quelques dizaines d’années, le web est passé du stade de réseau marginal utilisé par quelques chercheurs à celui de moyen de communication incontournable. Son audience est désormais supérieur à la plupart des médiums classiques.

L’augmentation incessante du nombre d’internautes (12 millions en 2001, 30 millions en 2007) va de paire avec celle du contenu disponible sur la toile. Dans cette jungle d’informations, il est devenu beaucoup plus difficile de d’assurer à un site internet une bonne visibilité.
Sachant que le point d’entrée principal des utilisateurs sur internet sont les moteurs de recherche (Google en tête), une nouvelle discipline c’est créée : le référencement.

Le référencement, ou SEO en anglais (Search Engine Optimisation), c’est l’art de positionner un site internet dans les premiers résultats des moteurs de recherches. C’est une étape devenue obligatoire pour promouvoir un service ou un produit sur le web. D’elle dépend le succès des campagnes marketing virtuelles.

Problématique : A l’heure du web 2.0, comment s’assurer une bonne visibilité sur Internet ?

I) Le fonctionnement des moteurs de recherche

Les moteurs de recherche utilisent des algorithmes propriétaires et secrets afin d’indexer et de classer les sites internet. Ceux-ci sont soumis à des évolutions constantes.
Pour s’assurer qu’un site apparaisse en bonne place dans un moteur de recherche il est indispensable de comprendre comment se déroule son indexation !

a/ L’analyse du contenu

Pour indexer les sites internet, les moteurs de recherche utilisent des robots (les spybots) qui vont naviguer et analyser le contenu de chaque page qu’ils rencontrent.
Un robot n’est capable de lire que du texte brut. Impossible pour lui de déchiffrer les images, vidéos, son sou ou animations.
De ce texte il extraira des mots-clefs. Lorsque l’utilisateur effectuera une recherche, le moteur sélectionnera les liens les plus pertinents par corrélation entre les termes entrés et ceux extraits des pages.

b/ Le Page Ranking

Le Page Ranking consiste à noter récursivement chaque page internet suivant des critères de popularité et de qualité. Cette note est attribuée automatiquement à une page en fonction de ses pages référentes. Un exemple vaut mieux qu’une explication alambiquée : si des liens pointent sur l’un de vos articles depuis des sites renommés tels lemonde.fr, telecharger.com ou Wikipédia, il héritera de leurs notes et c’est sa note déterminera sa position dans les résultats.
Le Page Rank des liens pointant sur une page prévaut sur le nombre de liens qui lui font référence. Mieux vaut deux liens depuis des sites reconnus que 100 provenant de sites notés 0.
Cette technique, qui à fait le succès de Google, est complémentaire à l’analyse du contenu.
Le Page Ranking permet aux moteurs de recherche d’augmenter la pertinence de leurs résultats et d’éliminer bon nombre de sites fraudeurs (mots-clefs cachés, fermes de liens, …).

c/ Le web sémantique

Plus récemment, de nouveaux formats destinés à faciliter l’indexation de contenu par les machines sont apparus. La plupart sont basés sur XML. C’est le cas des systèmes de syndication RSS et Atom qui ont fait le succès des blogs. Ils permettent d’extraire automatiquement les dernières publication d’un site internet.
Le format Sitemap, initié par Google et repris par beaucoup d’autres, est spécialement destiné aux moteurs de recherche. Il permet quant à lui de lister exhaustivement le contenu d’un site internet.

Ces nouveaux formats sont très prisés par les moteurs de recherches car ils permettent de traiter quasiment dès sa publication l’information brute, extraite des “tags soups” et autres calamités que peuvent contenir les pages internet classiques.

II) Adapter le site en conséquence

Même si le contenu reste primordial, l’indexation d’un site et son classement dans les résultats des moteurs de recherche dépend fortement du conteneur, de l’écrin de l’information. Plus un site sera fourni en articles et mis-à-jour régulièrement, plus il sera indexé souvent et précisément. Toutefois, des astuces structurelle et techniques permettent d’optimiser le référencement.

a/ La structure du site

La première des chose à faire afin d’être correctement référencer par les moteurs de recherche est de structurer correctement son site internet. Il faut veiller à ce que le robot puisse accéder le plus rapidement possible au contenu intéressant. En effet, plus les pages sont profondes et plus elles sont pénalisées. (On peut définir la profondeur par le nombre de clics nécessaires depuis la page d’accueil pour parvenir au contenu).
Il faut que la navigation dans le site, l’enchaînement des informations, soit intuitif et logique pour les humains comme pour les robots. La mise en place d’un plan de site est un plus indéniable pour l’indexation comme pour les visiteurs.

b/ Titres, URLs et respect des standards

Sans aucun doute, le titre de la page (situé entre les balises <title> et </title> du code HTML) est l’élément le plus important d’une page web pour son référencement. C’est lui qui qui apparaîtra dans le listing du moteur de recherche. Il faut qu’il reflète précisément le contenu.

Un autre paramètre très important lors de l’indexation des pages est l’URL. Il faut savoir que les moteurs de recherche valorisent les mots-clefs qui apparaissent dans l’adresse même. Idéalement une URL doit être courte, explicite et contenir trois mots clefs de longueur supérieur à trois caractères (si le nombre de mots-clefs est trop important, ils seront ignorés).

Exemple d’adresse bien formée : http://www.monsite.fr/recette/tourte-tomate

Le respect des standards établis par le W3C entre également en jeux : une page valide sera forcément et entièrement indexée par les robots. Ce n’est pas obligatoirement le cas pour les pages invalides. Séparer le contenu de la présentation grâce aux feuilles de style est une autre bonne pratique. Elle permet aux robots d’aisément détecter les informations importantes.

Les méta-informations ont aussi leur importance. Les balises méta, même si elles ne sont plus que peu prises en comptes, permettent de fournir des informations additionnels aux robots qui pourront leurs être utile (courte description, public visé, …).
Plus important : décrire les images, vidéos et autres contenus multimédia avec les attributs “alt” et “title” du langage HTML. Seuls ces champs permettront aux robots de présumer du contenu des documents qu’ils sont incapable de lire et de les indexer.

c/ RSS, Sitemap, etc

Comme vu précédemment, la diffusion de contenu via les dialectes XML spécialisés est très apprécié des moteurs de recherche. Un site sans fils RSS et/ou Atom se priverait d’une source importante de trafic et d’une bien meilleure indexation. Les sitemap quant à eux permettent également d’assigner à chaque page une priorité, de hiérarchiser votre contenu. Les technologies du web sémantique évoluent très rapidement. Afin de toujours avoir une longueur d’avance, d’obtenir le petit plus qui vous donnera la tête des résultats, il est important de mener un travail de veille technologique. Google et ses Webmasters Tools comme les sites spécialisés (Web Rank Info) sont de bonnes sources d’information que tout bon référenceur devrait consulter régulièrement.

III) Obtenir des liens

L’obtention de liens de qualité pointant vers le site internet à référencer et primordial pour son classement dans les moteurs de recherche.

a/ Inscription aux annuaires et web social

La première étape pour faire connaître un site internet et de l’inscrire aux nombreux moteurs de recherches et annuaires dont regorge la toile. Les moteurs de recherche proposent la plupart du temps un formulaire de demande d’indexation. Même si votre site finira sûrement par être indexé lorsque les robots le rencontreront au détour d’un lien, utiliser ce type de formulaire accèlere souvent le processus. L’acceptation d’un site dans les annuaires qui font référence, DMOZ et Yahoo! en tête, permet d’augmenter sa position dans les moteurs de recherche. En effet, les moteurs de recherche considèrent que la présence d’un site dans ceux-ci comme un gage de qualité et augmentent sa note en conséquence.
L’avénement des blogs et des technologies tels que RSS à fait émerger un nouveau type de services webs dits sociaux. Être syndiqué par Technorati ou FeedBurner, des services “web 2.0”, apporte un plus question audience et permet d’obtenir assez rapidement un grand nombre de liens grâce aux rétroliens. Les systèmes de ping (Ping-o-Matic!, My Yahoo!, …) assurent une présence rapide des nouveaux articles dans les index des moteurs de recherche.

b/ Partenariats et échange de liens

Comme nous l’avons détaillé plus haut, obtenir des liens depuis des sites de qualité compte beaucoup pour le positionnement. L’éditeur d’un site internet ne devra pas rechigner à faire la tournée de ses partenaires (fournisseurs, clients, …) afin d’obtenir des liens depuis leurs pages, surtout si ils sont bien implantés sur le net. La souscription à des programmes d’échanges de liens et la sollicitation des sites phares du même secteur d’activité sont également vivement recommandés.

c/ Référencement payant

Les sociétés spécialisées dans le référencement fleurissent sur le web. Elles offrent différent type de services, allant de la simple inscription automatique à un grand nombre d’annuaires à la véritable stratégie marketing avec refonte du site internet et la mise en place d’un “buzz”.
Si leurs résultats peuvent être impressionnants il faut se méfier des usurpateurs, de ceux qui demandent des sommes importantes pour des résultats nuls… voir négatifs.
Le référencement ne se fait pas définitivement, c’est un régulier à mener. Il s’agit de bien se renseigner sur la réputation et les résultats de l’entreprise avant de souscrire à un programme de référencement. Comme toujours sur le web, on trouve le meilleur comme le pire.

Conclusion

Le référencement est une des disciplines reine du marketing sur l’Internet. Il est la clef du succès et de la visibilité des sites internet. Il nécessite un travail d’analyse et de structuration important, un réseau relationnel de qualité ainsi qu’une veille technologique toujours plus importante.
Indispensable, le référencement nécessite à la fois des compétences techniques avancée et une vision des règles et de l’évolution social de l’Internet pour être efficace.

D’autres bloggeurs en parlent :