Voici le diaporama qui a servi de support au workshop sur le référencement avec HTML5 que j’ai animé jeudi 31 janvier pour La Coopérative des Tilleuls :
Ce sont le thème Prestashop HTML5 optimisé pour le référencement et l’implémentation de TodoMVC avec Symfony et Backbone.js qui ont servi de support.
Le prochain workshop de cette série sera justement dédié à la programmation JavaScript avancée avec Chaplin.js et Backbone.js. Il se déroulera début mars, toujours à Co-Factory.
Jeudi prochain, j’animerais pour La Coopérative des Tilleuls, un atelier gratuit sur l’utilisation des propriétés sémantiques de HTML5 pour améliorer le référencement naturel des sites internet. C’est chez nos amis de Co-Factory que ça se passe (677 avenue de la République, Lille).
Au programme :
Ce workshop est gratuit et ouvert à tous mais il est impératif de réserver au préalable. Venez !
Exemple d’extrait enrichi (Rich Snippet) sur Google
J’ai contribué il y’à quelques temps déjà la migration vers HTML5 du thème par défaut de Prestashop, la plateforme e-commerce libre. En attendant l’inclusion de ce patch dans la version upstream je vous propose au téléchargement un thème autonome libre et gratuit compatible avec les versions 1.5 et supérieures de Prestashop.
Il s’agit donc du thème par défaut techniquement optimisé pour un meilleur référencement naturel, plus accessible aux personnes handicapées et avec le support automatique des extraits enrichis affichés dans Google (voir l’illustration plus haut).
Voici la liste détaillée des fonctionnalités ajoutées :
header, nav, footer et article pour un meilleur référencement (support des anciens navigateurs via Modernizr)Bien sûr cette template est complétement personnalisable, faites pour se charger vite et compatible avec le mode multiboutique et multilingue de Prestashop. C’est une base moderne pour personnaliser l’apparence de sa boutique sans négliger le référencement.
A la demande générale La Coopérative des Tilleuls vous invite à un troisième workshop d’initiation aux technologies du web.
Après avoir appris les bases de HTML lors du premier workshop et de CSS lors du second, nous réaliserons ensemble l’intégration complète d’une page web à partir d’une maquette graphique.
Nous apprendrons à découper une maquette afin de la transformer en page web puis nous reverrons les techniques apprises lors des premiers ateliers et les mettrons en pratique sur ce cas concret.
C’est l’occasion pour ceux qui n’ont pas pu assister aux séances précédentes de prendre le train en marche et pour les autres de se perfectionner.
Pour bien se préparer :
Ce workshop est destiné aux débutants. Aucune connaissance préalable n’est nécessaire à son suivi mais il est préférable de prendre connaissance du contenu des ateliers précédents.
L’encadrement est assuré par des développeurs professionnels coopérateurs à La Coopérative des Tilleuls. C’est gratuit.
L’atelier se déroulera le jeudi 28 juin à 14h à Co-Factory, 677 avenue de la République à Lille (arrêt de tramway Buisson). Réservation obligatoire auprès de Kévin : kevin@la-cooperative-des-tilleuls.com
HTML Purifier is a awesome PHP filter library designed to secure and add standard compliance to HTML. In websites including user generated content, this library allow to have mutlimedia pages including image, text formating and YouTube videos in a secure and SEO proof way thanks to rich text editors like Tiny MCE or FCK Editor and HTML purifier.
A plugin called sfXssSafePlugin is designed to integrate this library as an escapement strategy in symfony. If you have tried it with symfony 1.2 you can see this message:
HTML Purifier autoloader registrar is not compatible
with non-static object methods due to PHP Bug #44144;
Please do not use HTMLPurifier.autoload.php (or any
file that includes this file); instead, place the code:
spl_autoload_register(array(‘HTMLPurifier_Bootstrap’, ‘autoload’))
after your own autoloaders.
There are also some strict standards and constants compatibility problems. I’ve just wrote a patch to get this plugin working with symfony 1.2.
) and add the following code into the configure() method:
|
1 2 |
<code>require_once(sfConfig::get('sf_plugins_dir').'/sfXssSafePlugin/lib/vendor/htmlpurifier/HTMLPurifier/Bootstrap.php'); spl_autoload_register(array('HTMLPurifier_Bootstrap', 'autoload'));</code> |
It’s done ! I’ve submitted this patch to the plugin’s author. I hope it will be upstream soon 
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.
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, …).
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 :
|
1 2 3 4 5 6 |
<code class="language-html"><pre><code class="language-c">#include <stdio.h> int main() { printf("Bienvenue sur Lapin Blanc !\n"); return 0; }</code></pre></code> |
Ce qui donnera :
|
1 2 3 4 5 6 |
<code class="language-c">#include <stdio.h> int main() { printf("Bienvenue sur Lapin Blanc !\n"); return 0; }</code> |
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.
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 :
|
1 2 3 4 |
<code class="language-html"><pre><samp>Welcome to Darwin! <samp class="prompt">Crokette:~ keyes$</samp> <kbd>uname -a</kbd> Darwin Crokette.local 8.11.1 Darwin Kernel Version 8.11.1: Wed Oct 10 18:23:28 PDT 2007; root:xnu-792.25.20~1/RELEASE_I386 i386 i386 <samp class="prompt">Crokette:~ keyes$</samp> <samp class="cursor">_</samp></pre></code> |
Ce qui rendra :
|
1 2 3 4 |
<samp>Welcome to Darwin! <samp class="prompt">Crokette:~ keyes$</samp> <kbd>uname -a</kbd> Darwin Crokette.local 8.11.1 Darwin Kernel Version 8.11.1: Wed Oct 10 18:23:28 PDT 2007; root:xnu-792.25.20~1/RELEASE_I386 i386 i386 <samp class="prompt">Crokette:~ keyes$</samp> <samp class="cursor">_</samp></samp> |
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
kbdelement represents user input (typically keyboard input, although it may also be used to represent other input, such as voice commands).When the
kbdelement is nested inside asampelement, it represents the input as it was echoed by the system.When the
kbdelement contains asampelement, it represents input based on system output, for example invoking a menu item.When the
kbdelement is nested inside anotherkbdelement, 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
kbdrepré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
kbdest imbriqué dans un élémentsamp, il représente la saisie telle qu’elle a été affichée par le système.Quand l’élément
kbdcontient un élémentsamp, 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
kbdest imbriqué dans un autre élémentkbd, il représente la touche ou unité d’entrée équivalente utilisable avec le mécanisme d’entré.
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 :
Ce billet s’inspire en parti de l’article Lesser-know semantic elements disponible sur l’excellent centre de ressource Opera Web Standard Curriculum.
La nouvelle a fait le tour du web. Google indexe désormais les sites en Flash, ou plutôt le contenu textuel présent dans les fichiers SWF. L’annonce d’Adobe précise que le plus populaire des moteurs de recherche sera bientôt suivi de Yahoo!.
Est-ce l’avènement des sites à interface riche réalisés en Flash / Flex, la fin des techniques hybrides comme celle présentée ici même ? Malheureusement non.
Google précise que son robot est incapable d’indexer les fichiers SWF chargés avec Javascript, or nombre de sites Flash modernes utilisent le script SWF Object qui permet une bonne gestion de l’absence du plugin d’Adobe. Pire le contenu chargé dynamiquement par l’appel de fichiers XML, ce qui est le cas de tous les sites d’une taille respectable (boutiques en ligne, CMS, …), ne sera pas non plus pris en compte directement (les fichiers XML pourront être indexés séparément).
De plus, le format Flash souffre de limitations intrinsèques qui nuisent à la l’extraction de données pertinentes :
Cette annonce, grand coup marketing pour Adobe, se révèle pourtant relativement désuette. L’indéxation des fichiers Flash par Google est à rapprocher de celui des documents Word ou PDF. Ils ne resteront que des réponses annexes, des résultats complémentaires, et ne risquent pas d’atteindre les premières pages des mots-clefs convoités.
… est accessible.
La technologie Flash / Flex d’Adobe est en passe de s’imposer sur le marché des applications internet riches. Elle permet une expérience utilisateur impressionnante impossible à atteindre avec du HTML standard, les sites en Flash sont fluides, jolis et très interactifs. Côté licence, la plateforme Flex est libre (sous licence MPL) alors que les spécifications de Flash et certains de ses composants sont en train d’être libérés.
Pourtant, un lourd défaut noirci le tableau : les animations Flash sont contenues dans un format binaire (les fichiers d’extension SWF), difficilement lisibles par les robots et peu ou pas accessibles aux personnes souffrants de handicaps et utilisant, par exemple, des lecteurs d’écrans. Ce format de fichier est très pénalisant pour un site à contenu car il sera mal indexer par les moteurs de recherches, source principale de trafic pour un site internet classique, et très difficile à référencer.
Autre problème dont souffre de nombreuses applications Flash / Flex : l’impossibilité de mettre en favoris une page précise du site ni d’utiliser les boutons suivants et précédents du navigateur. A l’heure des systèmes de favoris sociaux, des blogs et des agrégateurs à la DIGG, il est nécessaire de fournir des “permaliens” (liens permanents), permettant d’accéder directement à une ressource précise afin, la encore, de ne pas perdre un trafic non négligeable.
Nous nous trouvons donc en-face d’un dilemme, souhaitons nous un site attractif très positif pour l’image de marque ou un site populaire bien classé dans les moteurs de recherches ? Les deux, bien entendu.
Une première réponse se trouve dans l’utilisation de SWF Address. Cette bibliothèque libre utilisant les ancres HTML et Javascript permet de simuler différentes pages au sein d’une animation Flash, d’y accéder directement depuis la barre d’adresse (donc de l’ajouter aux marques pages) et de réactiver les boutons précédent et suivant du navigateur. SWF Address constitue un petit plus pour l’usabilité et notre site pourra maintenant profiter pleinement des systèmes de bookmarks sociaux comme des digg-like, pourtant le problème principal n’a pas disparu : comment feront un lecteur d’écran ou le robot d’un moteur de recherche pour accèder au site ?
L’idée est de générer une version alternative du site, en pur HTML, dispensant le même contenu. Ce site sera accessible à tous les robots et autres logiciels incapables de lire du Flash. Malheureusement, un visiteur effectuant une recherche arriverait lui aussi sur la page HTML et ne profiterait pas de l’interface amélioré. Détectons donc la présence du plugin Flash et le redirigeons vers la même page dans sa version Flash, ce qui est désormais possible grâce à l’utilisation de SWF Address !
Pourtant, créer et maintenir deux versions d’un même site est long et fastidieux. Il nous faut donc trouver un moyen de générer automatiquement la version HTML du site. Pour cela, on pourrait transformer les animations Flash en HTML avec l’outil d’Adobe nommé swf2html. Malheureusement, celui-ci ne sait extraire que les textes statiques et ne supporte pas les dernières versions de Flash (adieu la 3D temps réel, l’Action Script 3 et autres joyeusetés). De plus, il est déjà utilisé par les moteurs de recherche pour tenter d’indexer les sites Flash et les résultats sont loin d’être encourageants.
Une approche plus saine serait de séparer le contenu de la présentation, c’est à dire de stocker les données du site en dehors des animations, dans des fichiers XML. Flash gère très bien ce format et pourra récupérer les données qui lui sont nécessaires à la volée en lisant. Cette méthode est transparent pour l’utilisateur et permet une maintenance beaucoup plus aisé du site (en cas de modifications dans le contenu plutôt que dans le contenant, il suffit d’éditer un fichier texte, pas besoin de disposer du logiciel Flash ni de recompiler l’animation complète). Nous pourrons ensuite très facilement transformer nos données XML en site internet HTML, par exemple en utilisant XSLT. Nous aurons ainsi deux versions de notre site internet et celui-ci sera accessible, parfaitement référencé, et disposant d’une interface riche de dernière génération.
Cerise sur le gâteau, cette technique rend notre site accessible aux périphériques mobiles ne supportant pas les dernières versions de Flash (téléphones mobiles, PDA, …).
Encore une fois, XML nous permet de marier le meilleur de deux technologies, en ne négligeant ni l’expérience utilisateur ni l’accessiblité et le référencement !
Chose promise chose due !
Les archives de Bienvenue chez moi, mon ancien blog, sont désormais disponibles. Tous les commentaires et articles ont étaient restaurés. Vous y trouverez un grand nombre de tutoriels pour Ubuntu et Linux en général ainsi que les anciennes version de Easy Ubuntu, des modules pour PunBB, et des billets traitant de programmation (PHP, Python, DokuWiki, …).
Bienvenue chez moi c’est plus de 100 billets et de 15 000 commentaires, c’est quelques premières pages de Digg, et ce fut une partie de moi pendant un certain temps !
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 :
|
1 2 3 4 5 6 7 8 9 10 |
<code name="code" class="css">/* Le code pour Firefox / Gecko */ ::-moz-selection { color: white; background-color: #379CB3; } /* Le code pour Safari / Webkit */ ::selection { color: white; background-color: #379CB3; }</code> |
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>.