Micro-standards du web : les microformats

Initié par l'article de Alex Faaborg, ici, sur les microformats,

vous trouverez dans cet article une présentation et une liste de ces microformats qui vous facilitent la vie lors de la création de vos sites web (tout en restant "standard") et qui permet à vos lecteurs de traiter plus facilement les informations que vous souhaitez mettre à leur disposition.
Voir mon article détaillé sur le microformat qui permet de laisser facilement vos coordonnées, le microformat "hCard". Ici.
Pour accéder à l'article, cliquer sur Read more.


Cet article, se limite à :

• des généralités sur les microformats


• une liste de microformats avec des pour plus d'information.

Pour un blog en français très documenté sur les microformats, voir le blog de Christophe Duchamp : http://www.elanceur.org (la page dédiée au microformat).
(Pour ceux qui veulent plus de détails sur les microformats, je recommande la lecture de ce post plutôt que celui-ci)

Les microformats
Voir le site : http://microformats.org/
Voir le blog, le Wiki, le code, liste de microformats d'où j'ai puisées les informations.
Pour faire simple, les microformats s'apparentent à des règles d'utilisation des "class" et autres propriétés des éléments html (comme rel="") de façon plutôt semantique que présentationnelle.
C'est à dire une utilisation plus orientée vers le sens de la donnée que sur la façon de la présenter dans la page html (pour cela il y a le css).

Il s'agit de permettre à des moteurs, navigateurs, autres, de repérer ces informations dans votre code et de les traiter à travers ces "microformats" reconnus par la communauté du Web. Ainsi, une adresse sur votre site pourra être enregistrée dans votre bloc-note d'adresse (Outlook, autres) ou être positionée par un logiciel de localisation géographique (Maps, autres).

L'exemple le plus courant étant les coordonnées de l'auteur d'un site ou de son affaire. En respectant le microformat "hCard", on peut facilement récupérer ces données au format vCard (Outlook) ou demander à Map de localiser l'endroit.
Une programmation hCard a cet aspect :

<div class="vcard">
<div class="fn">Joe Doe</div>
<div class="org">The Example Company</div>
<div class="tel">604-555-1234</div>
<a class="url" href="http://example.com/">http://example.com/ </a> ;
</div>

Ce code html, que vous pouvez mettre en forme, sera repéré et traité par les navigateurs ou des moteurs de recherche au "microformat" hCard.
Il est important de noter qu'il existe des "générateurs" de codes au format de ces microformats facilitant ainsi l'implémentation de ces codes dans les sites et blogs sans grandes connaissances de la programmation.

Pour avoir accès à ces informations à partir de votre navigateur, Firefox 2 propose un add-on : Operator. Voir mon post sur hCard, ici, ou sur le site de Mozilla Firefox, ici.

Présentation de microformats
Note : les noms sont précédés d'un "h" indique le lien avec le html (hCard pour "HTML Card"). Un "x" indique le lien avec XML. Et relxxx indique une propriété de l'élément lien hypertext rel="...".

hCard, carte de visite
Voir mon blog ici. Plus d'information ici. Le générateur de code est là.

hCalendar, pour des événements de votre calendrier
Plus d'info ici. Le générateur de code est ici.

hReviews, pour des revues de produits, critiques de cinémas, autres
Plus d'info ici. Le générateur de code est ici.

hResume, pour vos ... CV
Plus d'info ici. Le générateur est ici.
Alors, simplifier vos CV dans vos sites.

rel-licence, pour indiquer le type de licence de votre site
Il s'agit en fait d'ajouter au lien de votre type de licence, la propriété <a http="..." rel="licence" >. Pour plus d'information, ici.

rel-tag, pour indiquer des tags
Plus d'information ici. Il n'existe pas de générateur de code mais des outils qui permettent qui génére des tags chez les hébergeurs (Technorati, autres).
Les tags sont lisibles avec Operator, l'add-on de Firefox, à Tagspace. Sur les sites gérant ces tags, on peut voir la mention "tags using reltag" et autres références à reltag.

RelNoFollow, une sécurité par les liens
Ce "microformat" a pour but de limiter le spam en indiquant au moteur de recherche de ne pas ajouter de "poids" à l'adresse qui est indiquée dans le lien. Pour cela, on ajoute à l'élément html des liens hypertext la propriété : <a href="..." rel="nofollow">.
Utilisé dans les blogs pour les liens qui sont placés dans les commentaires d'articles. Peut-être aussi utilisé par un rédacteur pour citer un lien sans lui apporter son soutien.

XFN, votre réseau d'amis (Xhtml Friends Network)
Plus d'info ici, avec un renvoi vers GMPG. Le générateur de code est ici.

XOXO, pour vos listes
Autour des éléments HTML "Définition" : dl, dt; dd ; et "List" : ol, li
Plus d'info ici. Pas de générateur mais un validateur de code, ici.

xFolk, pour vos bookmarks
Plus d'info ici. Les bookmmarks sont lisibles avec Operator, l'add-on de Firefox, à Tagspaces.

VoteLinks, pour voter "Pour" ou "Contre". Abstention prévue
Plus d'info ici. Pas de générateur mais un lien vers un site dont les "votes" peuvent être liées à votre site : http://jyte.com/.

Pour la liste exhaustive de ces microformats, voir http://microformat.org, ici ; et chez microinformatique.com, ici, auteur d'un livre sur ce sujet.

Pour les liens en français,
microformats sur le Wikipedia français, ici. Noter que celui-ci n'est pas complètement traduit.
Je rappelle le lien vers http://www.elanceur.org, ici, et un autre lien vers http://microformateurs.org, ici.

Dryat120

Read More......

Joomla, un CMS pour l'hébergement chez Free

Après avoir fait plusieurs essais de CMS, ces logiciels qui permettent la contruction et la gestion aisée de sites web, je me suis fixé sur Joomla.

Il me paraît simple et surtout, il existe une communauté qui connaît bien la technique pour une installation chez Free.

Toute les informations sur Joomla :
Site officiel : http://joomla.org
L'aide : http://help.joomla.org
Les extensions : http://extensions.joomla.org
et le développement avec des tutos avancés : http://dev.joomla.org/

Le portail francophone : http://joomla.fr Onglet Potail,
Onglet extensions : http://www.joomlafrance.org/
L'onglet Aide : http://www.joomlafacile.com/
Ici beaucoup d'info en français et le guide d'installation pour Free.fr, ici.
et longlet forum : http://forum.joomlafacile.com/

Démos sur templates : http://www.joomlakb.com
Info pour l'installation sur Free.fr

Un site de tutos (soft) : http://www.joomladraft.org

Les CMS (Content Management System) sont présentés comme des logiciels qui permettent la publication d'un site web sans connaître la programmation html, php, MySQL, etc.

C'est vrai. Pour cela, vous utilisez dans le panneau d'administrateur :
- des commandes qui vont vous permette de créer la navigation (menus)
- et un éditeur qui va vous permettre de rédiger et mettre en forme vos articles.
Le résultat est assez proche d'un blog mais avec beaucoup plus de possibilité de navigation.

Il existe aussi des "extensions" qui vont vous permettre de mettre en oeuvre des fonctions avancées de sites web comme des galeries photos, autres.

Pour la mise en forme de votre site, vous êtes tributaire des "templates". Il en existe de nombreux, gratuits et payants.
Ces templates sont ouverts et vous pouvez les modifier avec un minimum de connaissance en HTML et en CSS.

Au final, c'est quand même complexe, j'ai donc ouvert un autre blog pour noter mes expériences avec Joomla : http://myjoomlaexperience.blogspot.com.

Quelques conseils pour démarrer :

- Vous avez besoin d'un hébergement avec MySQL et PHP, idéalement PHP 5. L'hébergement Free est parfait et vous bénéficiez de nombreux conseils et forums dans les liens donnés plus haut.

- Joomla n'est pas un éditeur où vous allez créer et télécharger des pages. Joomla "est" votre site. Vous devez le télécharger là où votre site sera hébergé puis vous créez votre structure et vos articles à partir de panneau d'administration. Il n'est pas utile d'avoir une phase de développement en local sur votre poste (localhost avec EasyPHP par exemple), vous pouvez directement travailler en ligne.

- A ce jour, octobre 2007, c'est la version 1.0.13 qui est stable (et proche de Mambo qui est la source de Joomla). Il existe une version 1.5 dite Release Candidate, c'est à dire pratiquement en production (que je n'ai pas essayé encore).

- Pour un hébergement chez Free, il suffit d'utiliser une adresse e-mail. Noter que vous pouvez avoir plusieurs adresses emails à partir de votre compte principal. Pour activer vos pages perso et la base de données MySQL, dans l'interface Free, vous entrez l'identifiant et mot de passe de votre adresse e-mail. Vous arrivez dans une interface qui vous propose entre autres l'activation de vos pages perso (incluant l'activation de la base de données, choisisser MySQL). Il faut attendre un certain temps, plusieurs jours voire plusieurs ... semaines. Si cela apparaît trop long, envoyer un mail à la hot line pour demander l'activation de vos pages. Vous n'êtes pas informé de l'activation, il vous faut aller dans votre interface pour vérifier que celle-ci a été activée.

Bon courage pour la suite.


Dryat120

Read More......

Presentation, le diaporame de Google sur Docs

A côté du traitement de texte et du tableur, nous avons maitenant la possibilité de faire des diaporamas et de les publier facilement grâce à ce nouveau soft de Google.

Justement, j'ai fait la présentation de Présentation dans un diaporama que j'ai mis en ligne
Pour y accéder, "Read more".

Plutôt que de faire une présentation dans ce blog, j'ai simplement réalisé un diaporama présentant Presentation que j'ai ensuite publié.

Pour voir le diaporama : ici.

Lien vers l'aide que je place aussi (en anglais et liste multilingue) ici.

Dryat120

Read More......

Augmenter votre classement chez Google

Quelques recommandations pour améliorer votre classement dans les recherches Google.
Voir aussi l'article sur le "Pense-bête du référenceur" dans ce blog.
Tout l'article dans une nouvelle page avec "Read more"

Il n'y a pas que les mots dans la balise meta qui comptent, les mots de la page sont pris en compte lors de l'analyse par Googlebot ainsi que les noms de pages et la description du site.

Pour savoir comment les mots de votre site sont "indexés" par le moteur Google, utiliser la commande : "site:monsite.ext mot-clé". Exemple sur mon blog : site:http://dryat120.blogsopot.com freego.


En général, vous pouvez augmenter votre classement par le nombre croissant de liens qui pointent sur votre site venant de sites qui sont déjà bien classés par Google.
Info Google sur le classement des pages ici.
Un guide Google pour la création d'un site en bonne intelligence avec Google ici.

Voir l'article de Google ici.

Dryat120

Read More......

Faire une carte de votre site (sitemap) pour Google

Comment présenter les informations de votre site comme vous le souhaitez dans l'affichage des résultats d'une recherche Google.
Simple, il suffit de réaliser une carte de votre site. Ainsi, lorsque Google présentera le résultat de sa recherche, il présentera les informations de votre site selon cette carte (sitemap).
Tout l'article dans une nouvelle page avec "Read more"

Principe
Proposer à Google d'indexer votre site selon un répertoire spécifique.

Comment
Pour cela, il faut : créer un fichier contenant cette "sitemap", enregistrer ce fichier sous la racine du site et déclarer ce fichier dans l'outil Google Webmaster Tools (onglet "sitemap"). Voir info Google ici

Il existe un générateur de "sitemap" cher Sourceforge. Voir ici comment l'utiliser.
L'outil "Google-sitemap_gen" chez Sourceforge.net ici. Il semble qu'il soit nécessaire d'avoir un site qui accepte les scripts Python.

Il est possible de créer ce fichier sitemap en xml en quelques clics, aller sur ce site : http://www.googlepageranks.net, cliquer sur l'onglet "Sitemap" et entrer les informations pour générer le fichier xml sitemap.
Lisez le fichier dans le navigateur, copier ce texte dans un fichier xml et uploader ce fichier à la racine de votre site. Attenion, pour le premier tag, remplacer la première ligne par :
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">


Dryat120

Read More......

BlogThis! Vous vous ne vous en passerez plus !

"La fonctionnalité BlogThis! est un moyen rapide de créer un message dans un blog sans passer par le site blogger.com. Lorsque vous ajoutez le lien BlogThis! à la barre d'outils de votre navigateur, vous pouvez publier des messages instantanément dans vos blogs, à l'aide d'un simple clic."
J'ai justement fait cet article avec cette fonction sur la page d'aide de cette fonction .
en sélectionnant le texte à publier.

Pour installer BlogThis ou pour connaître d'autres méthodes pour blogger à distance, cliquer sur Read more.

"La fonctionnalité BlogThis! crée une mini interface avec Blogger afin d'insérer directement dans votre blog un lien vers la page Web que vous consultez, ou le texte que vous avez sélectionné sur la page affichée. Vous pouvez, le cas échéant, ajouter du texte avant de publier un message dans votre blog en cliquant sur BlogThis!.
Vous pouvez faire appel à la fonctionnalité BlogThis! de deux façons :
- dans Windows et Internet Explorer, utilisez le bouton BlogThis! directement à partir de la barre d'outils Google." Sur la Toolbar version 3, vous accédez à BlogThis! par le menu "Send To" puis en cliquant sur "Blogger. Vous accédez aussi à la commande BlogThis! par le menu contextuel. Sur le texte à blogger, faire un clic droit à la souris et, dans le menu contextuel, sélectionner "Send To" puis "Blogger".
"- Dans les autres navigateurs, faites glisser le lien ci-dessous sur la barre Liens de votre navigateur. Ensuite, il vous suffit de cliquer sur BlogThis! dès que vous souhaitez publier un message dans votre blog :
BlogThis! <-- faites glisser ce lien dans la barre Liens de votre navigateur."

Alors, convaincu !

Petit rappel, autres méthodes pour écrire des blogs en dehors du site blogger.com, par e-mail, par l'outil de Microsoft "Writer". Ici, on a affaire à une interface enrichie qui permet par exemple la publication facile de tableau dans votre post.
Le lien vers l'aide de blogger pour cet article (il a peut-être été mis à jour depuis) : ici.
L'information pour les blogs par e-mail: ici.

Enfin, le lien pour blogger à partir de l'éditeur enrichi Writer : ici (Désolé, c'est le site de "Windows Live Betas").

Dryat120

Read More......

Tafiti (beta), c'est génial

Je viens de lancer Tafiti, la nouvelle interface du moteur de recherches de Microsoft Live Search. C'est Génial !!!
Une super ergonomie qui facile la recherche dans les différents médias : pages Web, images, livres, news, RSS. Tafiti facilite aussi la façon de gérer le résultat de ses recherches en vous permettant d'entasser les éléments de la recherche sur une étagère située à droite.
De plus, vous pouvez demander l'affichage des résultats de votre recherche non pas sous la forme d'une liste mais sous la forme d'un arbre.
Tout l'article dans une nouvelle page avec "Read more"

Tafiti est une nouvelle interface du moteur de recherche de Micrososoft Live Search.
Il n'est pas nécessaire d'avoir un compte Live Search pour utiliser Tafiti mais c'est nécessaire pour retrouver ses précédentes recherches.
Le mot "Tafiti" veut dire "faire des recherches" dans la langue Swahili (Langue du centre-est de l'Afrique).
Pour utliser Tafiti, vous devez d'abord installer SilverLight, c'est ici (En anlglais). SilverLight est outil Microsoft pour l'affichage de contenu multimédia riche. SilverLight est le concurrent de Flash d'Adobe.
Après avoir installe SilverLight, pour accéder à Tafiti, c'est ici : http://tafiti.com.
Pour conserver ses recherches, s'inscrire sur le site en suivant le lien sous le logo "Sign in".

Pour faire une recherche, taper votre texte dans la texte box.

Pour sélectionner le type de média de votre recherche (pages web, images, autres), dans le carrousel de gauche, cliquer sur l'image représentant le média adéquat.

Pour sauvegarder ses recherches au niveau des articles, faire glisser l'item retenu sur une des cinq étagères sur le côté droit. Sur une même étagère, vous pouvez conserver des items des différents médias (pages Web, images, autres).

Pour gérer le contenu de ces étagères, cliquer sur l'étagère dont vous voulez le détail, l'ensemble des items enregistrés apparaissent dans une même page.

Pour supprimer un des éléments de l'étagère, survoler l'élément à supprimer dans la page de l'étagère et utiliser la commande "Remove".

Pour nommer sa recherche, survoler l'étagère et entrer un nom dans la boîte texte.

Pour supprimer sa recherche, survoler l'étagère et cliquer sur la croix en haut à gauche.

Pour retrouver les recherches que vous avez placé sur l'étagère lorsque vous étiez logué, ouvrer simplement Tafini et le contenu des étagères réapparaît à votre login.

Pour diffuser le résultat de votre recherche (e-mail et blog), cliquer sur l'étagère, en haut à gauche, cliquer sur le lien pour le diffuser par e-mail ou par blog.

Vous pouvez faire apparaître le résultat de la recherche sous la forme d'un arbre au lieu d'avoir une liste.

Pour obtenir la liste des résultats sour la forme d'un arbre, cliquer sur "Tree".

En conclusion, même si la recherche est un peu longue (dû à Live Search paraît-il) le principe de la sauvegarde de ses recherches au même endroit pour les différents médias est très intéressant. Tafiti est en version Beta, donc à suivre.

Et M. Google, quelle est votre réponse ?

Dryat120

Read More......