filyb.info - Tag - Web

En vrac de rentrée

Thesa — Mon, 01 Sep 2008 22:50:00 +0200

Google s’apprêterait à lancer son propre navigateur web, un logiciel libre basé sur Webkit, nommé Google Chrome. Voici sa présentation, et surtout la BD détaillant son architecture, à voir absolument ! (Le Framablog en parle déjà)
Avoir le temps d’être humain : les interrogations de Karl sur ce qui est public et ce qui ne l’est pas.
Parents : parlez de Linux à votre enfant…
Une astuce si votre gestionnaire de fenêtre vous amène toujours Firefox en premier plan lorsque vous y ouvrez un lien depuis un autre logiciel (comme un agrégateur) : Open new firefox tab in background.
Et maintenant un peu d’OpenStreetMap : l’évolution de la cartographie de Paris en images.
Du routing avec OpenStreetMap ! C’est une démo tout à fait expérimentale, mais ça marche déjà très bien. Vivement son intégration dans le site principal !

Parlons du www

Thesa — Wed, 28 May 2008 14:26:00 +0200

Du www... voudrais-je dire du World Wide Web ? Non, juste des trois lettres www, que l'on trouve si souvent dans nos URL.

Un grand nombre d'adresses de sites web sont contiennent www, comme http://www.example.org/. Historiquement, le système de noms de domaine (DNS) propose que les noms des machines soient organisés de la sorte : hote.domaine.tld. Cela signifie que mamachine.chezmoi.org représente l'ordinateur mamachine, située dans le domaine (organisation, société, etc) chezmoi.org. Chaque machine peut avoir un usage spécifique, et il était d'usage de nommer la machine capable de proposer un site web www. Jusque là, tout va bien.

Sauf qu'actuellement, une même machine est capable de faire plusieurs choses en même temps (e-mail, site web, etc), peut héberger plusieurs sites web... et qu'on utilise bien souvent les noms d'hôte pour proposer plusieurs sites web sur le même nom de domaine. Ici même, filyb.info correspond à ce blog, alors que thefool.filyb.info correspond à la page d'accueil du serveur.

Dans ce cas, on pourrait se dire qu'il suffit que l'adresse du site corresponde à la machine qui l'héberge, si elle s'appelle www, on met le www, sinon, non. Au choix du propriétaire du site et de la machine... sauf que ça ne marche pas. Marketing ? Charabia d'informaticiens rentré dans le vocabulaire courant ? Je ne sais pas ce qui a propulsé les www au rang de symbole incontournable et obligatoire des sites webs, mais force est de constaté que pour l'internaute moyen, l'adresse d'un site doit commencer par http://www. Au point que (histoire vécue), ayant dit à un journaliste que l'adresse de mon site était http://florian.biree.name/, il a écrit dans son article www.florian.biree.name, ce qui d'un, ne fonctionne pas (maintenant si, je l'ai rajouté dans les DNS), et surtout n'a pas de sens informatiquement parlant : il n'y a pas machine nommée www.florian, et ce serait un nom plutôt stupide, en l'occurrence. Si nom d'hôte il doit y avoir, autant mettre florian, tout simplement.

Face à cet état de fait, on (le W3C, Opquast, etc) recommande généralement de faire en sorte qu'un site accessible via example.org le soit aussi via www.example.org.

Sauf que cela pose aussi un problème... Ça serait trop facile, sinon. Les sites web sont identifiés par leurs adresses. Donc, pour un programme informatique stupide et borné (Google, au hasard), example.org et www.example.org sont deux sites différents, qu'ils aient le même contenu ou pas. Du coup, le référencement sera moins bon, les liens se rapportant à votre site pouvant être soit avec, soit sans les www.

La solution consiste à mettre en place une redirection de l'un vers l'autre, indiquant à tout le monde laquelle des adresses est la bonne. Reste à choisir l'adresse de référence... avec ou sans www ?

Si d'aucun ont choisit de garder le www (avec des arguments tout aussi valables que ceux que je vais exposer), je me range pour ma part du côté de no-www : à mort le www !

Sauf s'il y a encore une machine qui s'occupe spécifiquement de faire du web dans votre domaine, le www n'a aucun sens. Il ne fait que complexifier les adresses, avec un risque d'erreur (ajouter le www à un nom d'hôte, et non juste au domaine, de nombreux sites fonctionnent uniquement qu'avec les www, ou uniquement sans). La seule chose qui importe au début d'une adresse est le http://, qui indique le protocole utilisé.

Alors vous aussi, webmaster, supprimez ce www ! Vous pouvez par exemple rediriger vos domaines avec (en utilisant Apache et le mod_rewrite, par exemple dans un fichier .htaccess à la racine de votre site) :

RewriteEngine On
RewriteCond %{HTTP_HOST} ^www\.domain\.com$ [NC]
RewriteRule ^(.*)$ http://domain.com/$1 [R=301,L]

Mais surtout, surtout, évitez de créer des sites en ajoutant www à un nom d'hôte... Un exemple que je connais bien : pourquoi http://www.licinfo.ups-tlse.fr/ au lieu de http://licinfo.ups-tlse.fr/ ? N'est-ce pas plus simple ?

(Bon... voilà un billet prévu dans la lignée des billets d'après la mise à jour de juillet dernier : il n'est jamais trop tard pour bien faire.)

Les microformats – Et pour les utilisateurs ?

Thesa — Sat, 05 Jan 2008 14:43:00 +0100

Après la présentation des microformats, et les explication sur leur insertion dans vos pages webw, le dernier billet de cette série sur les microformats a pour but d'expliquer, du point de vue des utilisateurs, comment utiliser ces microformats.

Puisque ceux-ci sont inséré dans des pages web, leur interprétation devra être faite par les navigateurs web. À ce niveau, les différents navigateurs ont différent stades d'implémentations :

Pour Windows Internet Explorer, il existerait des extensions permettant de gérer les microformats. Je ne les ai pas testées, et vous encourage de toute façon à utiliser un autre navigateur web que celui-ci. À noter que Microsoft envisagerait d'intégrer un support des microformats dans IE 8.
Opera n'a, a ma connaissance, aucun support des microformats (s'il y en a un, merci de me le signaler).
Safari disposerait de plugins pour lui ajouter le support des microformats. Je ne les ai pas testés.
Konqueror inclut dans ses dernières version le support du microformat hCard. Si vous naviguez sur une page contenant du code hCard, un petit bouton micro apparaît en bas à droite de la fenêtre, et propose un menu pour ajouter les différentes cartes au carnet d'adresse. Voir une capture d'écran de Konqueror en action.
Et pour finir, Mozilla Firefox possède plusieurs extensions pour gérer les microformats, dont la plus intéressante est Operator (la télécharger chez Mozilla addons), développée par Michael Kaply des Mozilla Labs. Cette extension préfigure le support des microformats qui devrait être inclus dans Mozilla Firefox 3.

Operator en détails

Cette extension a un double intérêt : d'une part elle propose différentes interfaces utilisateur, d'autre part elle est elle-même extensible pour pouvoir supporter divers microformats et actions associées.

Barre d'outil, menu contextuel ou menu global ?

Les trois interfaces utilisateur sont les suivantes :

La barre d'outil Operator, qui propose une barre supplémentaire dans l'interface de Mozilla Firefox (Affichage > Barres d'outils > Barre d'outils d'Operator pour l'afficher si elle ne l'est pas).
Le menu contextuel agrémenté des actions d'Operator, lors d'un clique sur un élément contenant un microformat.
Le menu général d'Operator, accessible soit par une icône dans la barre d'état, soit par la même icône dans la barre d'adresse (position qui sera probablement retenue pour Mozilla Firefox 3).

De plus, il est possible de choisir la façon dont sont classées les informations (quelque soit l'interface utilisée). Dans les captures précédentes, les actions sont classées en fonction des données (Type de donnée, puis une donnée spécifique, puis les actions disponibles sur cette donnée). On peut choisir, dans les options d'Operator, de classer par action. Voici ce que devient dans ce cas le menu principal :

Étendre l'extension

L'un des gros avantages d'Operator, c'est qu'il se content d'être un outil générique d'accès aux microformats, et qu'il est potentiellement utilisable pour réaliser n'importe quelle action pour n'importe quel microformat. Il suffit d'ajouter l'action ou le microformat par le biais d'un script utilisateur. Un ensemble de script est dors et déjà disponible.

Utilité

Les cas d'utilisation simples et utiles sont nombreux : ajouter les coordonnées d'une personne à son carnet d'adresse, un évènement à son agenda, ou localiser un lieu sur une carte. Par exemple, en utilisant le fait que de nombreuses photos de Flickr sont géo-localisées, on peut :

Se rendre sur la page d'une photo ;
Se demander où puis-je aller pour voir cela ? et demander à Operator la réponse :
Et voir le lieu sur Google Maps :

D'autres possibilités sont montrées en image et en anglais sur la page Operator des Mozilla Labs.

Les interfaces utilisateur des microformats n'en sont qu'à leurs prémices. Leur intégration dans la prochaine génération des navigateurs web (Mozilla Firefox 3, Windows Internet Explorer 8) va probablement leur donner une bien plus grande visibilité et importance. On peut imaginer que bientôt, les logiciels ou services web pour directement s'ajouter à Operator (ou similaire), lors de leur installation ou lors de l'inscription d'un utilisateur au service.

Et même, on pourrait imaginer d'autres services plus différents, un portail des tags, par exemple, qui indexerait les mots-clefs, et proposerait pour chacun les pages, billets de blog, photos, etc en relation, ou portail des évènements, voir même un moteur de recherche des carnets d'adresses, un réseau social décentralisé basé sur XFN. Toutes les possibilités sont ouvertes.

Les microformats – Comment les utiliser ?

Thesa — Fri, 04 Jan 2008 15:56:00 +0100

Nous avons vu précédemment l'utilité des microformats. Après la théorie, passons à la pratique : comment baliser les informations d'un site web en utilisant des microformats ?

Mais où est la doc ?

Les microformats, pour micro qu'ils soient, restent des formats. Leurs spécifications sont discutées, et passent par divers stades de brouillon avant d'être considérées comme des standards. Jouant le jeux du web, la définition de la plupart des microformats est ouverte, et centralisée sur un site, microformats.org, qui fonctionne sous forme de wiki, et dont la section francophone est la plus importante des sections non-anglophones.

Ainsi, on trouve référencés sur ce site les différentes spécifications de microformats, ainsi que des liens vers ceux qui ont étés développés autre part. La démarche de création des microformats tente d'être la plus constructive possible, en réutilisant des formats existants par ailleurs (par exemple le format vCard pour les données concernant une personne ou une organisation), en construisant les différents microformats suivant des règles de balisage similaires, et en incluant des microformats les uns dans les autres.

Je vais maintenant présenter brièvement quelques microformats que je trouve utile. Rappelez-vous cependant que la spécification (dont le lien sera donné) reste le document de référence, et peut être amené à évoluer dans un sens incompatible avec mes exemples.

Marquer un mot-clef, une licence ou une page d'accueil

Je commence par ces trois microformats, et je les mets ensembles, parce qu'ils sont simples et assez similaires. Tous trois s'utilisent en donnant un attribut particulier à l'attribut rel d'un lien.

Pour définir un lien comme représentant un mot-clef attaché à la page actuelle, utilisez le microformat rel-tag. La page actuelle a le tag Microformats, qui est signalé (avant ou après le contenu) par un lien <a href="http://filyb.info/tag/Microformats" rel="tag">Microformats</a>. Attention : cela signifie que le tag concerne la page actuelle, et non que l'adresse du lien concerne une page de mots-clefs. Ainsi, la liste de mots-clefs sur la gauche ne possède pas cet attribut, car elle n'est pas en rapport avec le contenu de la page.
Pour associer une licence à la page actuelle, utilisez le microformat rel-license. Par exemple, en bas de la page actuelle se trouve lien suivant : <a rel="license" href="http://creativecommons.org/licenses/by-sa/2.0/fr/" hreflang="fr" title="Résumé de la licence"><acronym title="Creative Commons Paternité-Partage des Conditions Initiales à l'Identique 2.0 France">CC-BY-SA France 2.0</acronym></a>.. Notez que si plusieurs liens de ce type se trouvent sur une même page, cette page est considérée comment étant sous les termes de toutes les licences considérées.
Sur bien des sites, il y a un lien vers la page d'accueil, mis en évidence. Afin de faire comprendre aux navigateurs web quel est ce lien, utilisez le microformat rel-home (attention : cette spécification n'est encore qu'à un stade de brouillon). Ainsi, sur cette page, vous pouvez trouver le lien : <a href="http://filyb.info/" rel="home" accesskey="1">filyb</a>.

Marquer un passage concernant une personne

L'un des microformats les plus intéressant est le microformat hCard, qui correspond à la transposition en XHTML du format vCard (RFC2426). On en trouve de nombreux exemples sur ce site.

Les auteurs des commentaires sont balisés de la sorte : <span class="vcard"><a href="http://devloop.lyua.org/blog/" class="fn url">World Domination</a></span>.

Ma page contact contient le code suivant :

<div id="hcard-Florian-Birée" class="vcard">
    <a class="url fn" rel="me" href="http://florian.biree.name/">Florian Birée</a>
    <ul>
        <li>Adresse e-mail : <a class="email" href="mailto:florian@biree.name">florian@biree.name</a></li>
        <li>Identifiant Jabber : <a class="url" href="xmpp:florian.biree@jabber.fr">florian.biree@jabber.fr</a></li>
        <li>Identifiant <acronym title="Session Initiation Protocol">SIP</acronym> : <a class="url" href="sip:florian.biree@ekiga.net">florian.biree@ekiga.net</a></li>
        <li>Ma <a class="url" href="http://filyb.info/public/florian.biree-pgp-public-key.asc" type="application/pgp-keys">clef <acronym title="GNU Privacy Guard">GPG</acronym></a></li>
        <li><span class="tel"><span class="type">Fax</span> : <span class="value">+33 9 59 46 58 03</span></span></li>
        <li>Mon carnet web : <a class="url" rel="me" href="http://filyb.info" hreflang="fr">filyb.info</a></li>
    </ul>
</div>

Vous remarquerez que ce microformat permet de baliser assez précisément les données de contact, et ainsi de permettre de générer à la volée des fiches de carnet d'adresse. À mon sens la plus grosse lacune du format vCard (lacune qui est reportée sur hCard) est le manque de standard pour les identifiant de messagerie instantanée. J'ai respecté le conseil à propos des Nouveaux types d'information de contact qui préconise d'utiliser des liens avec des protocoles particuliers (et plus ou moins standards). Mais cette méthode n'est pas la seule, par exemple KAdressBook utiliser une propriété propriétaire pour cela.

Comme hCard fait partie des microformats les plus utilisés, un hCard creator a été créé. Mais pour l'avoir testé, je préfère m'en passer pour avoir du code (un peu) moins lourd, et plus fin.

Marquer un évènement

Un autre microformat dont l'utilité est immédiate est le microformat hCalendar, qui correspond à la transposition en XHTML du format iCalendar (RFC2445). Le billet précédent, Dédicace des Trois soleils de Sermelarande à Saint Sulpice en est un exemple.

Voici le code :

 <div id="hcalendar-Dédicace-des-Trois-soleils-de-Sermelarande" class="vevent">
 <a href="http://biblio.ismalaris.org/publications/les-trois-soleils-de-sermelarande/#Dedicace-StSulpice" hreflang="fr" title="Site de la Grande Bibliothèque d'IsmalariS" class="url">
  <abbr title="20080112T1500+0100" class="dtstart">12 janvier 2008, 15h</abbr>–<abbr title="20080112T1730+0100" class="dtend">17h30</abbr> – <span class="summary">Dédicace des <cite>Trois soleils de Sermelarande</cite></span>– à la <span class="location">Librairie du Grand Rond, Saint Sulpice (81370)</span>
 </a>

 <div class="description">
  <p>Je dédicacerai <a href="http://biblio.ismalaris.org/publications/les-trois-soleils-de-sermelarande/" hreflang="fr" title="Page sur le site de la bibliothèque d'IsmalariS"><cite>Les trois soleils de Sermelarande</cite></a> le samedi 12 janvier à la Librairie du Grand Rond, à Saint Sulpice (Tarn, 30<acronym title="Kilomètres">km</acronym> de Toulouse en direction d'Albi).</p>
  <p>Venez nombreux !</p>
 </div>
</div>

Vu que c'est pas toujours drôle de tout faire à la main, comme pour hCard, il existe un générateur de code hCalendar. Comme le précédent, je ne le trouve pas très pratique, il faut adapter le code fourni a ses besoins.

L'utilité de ce microformat est multiple : autant pour le visiteur, qui peut ajouter en un clique un tel évènement à son logiciel d'agenda, autant pour un service qui pourrait agréger les évènements, un peu à la manière de Google, et fournir un moteur de recherche / agenda décentralisé.

Les critiques

Il existe même un brouillon de microformat pour les critiques (de ce que vous voulez). Il s'agit du microformat hReview. Je l'utilise depuis quelques temps pour mes billets Lectures. Exemple avec Rédemption 4 – Les Rives de l'infini :

<div class="hreview" id="hreview-les-rives-de-linfini">
 <span class="type" style="display: none;">product</span>
 <span class="version" style="display: none;">0.3</span>

 <a href="http://www.noosfere.org/icarus/livres/niourf.asp?numlivre=7252" hreflang="fr" title="Page noosfere des Rives de l'infini" class="image">
  <img alt="Couverture des Rives de l'infini" src="http://www.noosfere.org/images/couv/j/jl4858-1998.jpg" class="photo left" />
 </a>

 <p class="little-text">Critique établie le <abbr class="dtreviewed" title="20080103T2231++0100">3 janvier 2008</abbr> par <span class="reviewer vcard"><a href="http://florian.biree.name/" hreflang="fr" title="Site web de Thesa alias Florian Birée" class="fn url">Thesa</a></span>.</p>

 <p class="item"><a class="fn url" href="URN:ISBN:2-290-04858-5">Les Rives de l'infini</a> est un roman [...]
 Ici, on donne des informations factuelles sur l'objet. Pour un livre, son titre, son auteur, etc.
 </p>

 <blockquote class="description">
  <p>Et ici, on place la critique en tant que telle.</p>
 </blockquote>
</div>

Et comme pour les autres, il existe un créateur de code hReview. Cependant, j'insiste sur le fait que hReview n'est qu'au stade de brouillon, donc que la spécification est susceptible de changer.

Les sites des copains

Pour finir, un dernier microformat, plus ancien que les autres, et plus utilisé : XFN. Ce microformat est un peu à part, et ses spécifications ne sont pas hébergées sur microformats.org.

Il permet de préciser les relations existant entre la personne propriétaire de la page où se trouve le code, et celle propriétaire de la page vers laquelle pointe un lien. Il suffit d'ajouter des mots-clefs à la propriété rel d'un lien.

De nombreuses possibilités existent, je vous laisse les tester avec le générateur de code XFN, qui, une fois n'est pas coutume, est simple et pratique.

Les utilisateurs de DotClear noteront que celui-ci inclus la possiblité d'ajouter directement des relationsXFN dans les lien de la Blogroll.

Voici pour ajourd'hui. Cette liste n'est bien sûr pas exhaustive, mais ce sont les microformats qui m'ont semblé les plus utiles. La prochaine fois, nous verront comment l'utilisateur peut-il exploiter ces microformats.

Comment créer une teinte pour le fond d'un site web ?

Thesa — Sun, 07 Oct 2007 13:17:00 +0200

Afin d'étendre la science de Kazo, voici un petit tutoriel pour appliquer une teinte transparente sur une zone de page web.

Commençons par le problème : Ici, le texte est difficilement lisible, mais on désire ne pas masquer l'image. On va donc appliquer une teinte, de la couleur jaune de la bordure (#f2c56c), avec une opacité de 85%.

La solution du futur

Le W3C est en train de préparer la recommandation CSS 3, qui apporte des améliorations notables pour l'opacité, comme la propriété opacity ou les couleurs RGBA (voir aussi les différences entre opacity et RGBA).

Mais cette recommandation n'est pas terminée, et est susceptible d'évoluer. Certains navigateurs n'ont pas attendu, et ont commencé à l'implémenter, parfois via des attributs propriétaires (-moz- chez Mozilla, etc). Et il n'y a aucun support de cette propriété chez Internet Explorer.

La solution du passé

Cette solution consiste à créer un fichier .gif de 2x2 pixels. Les fichiers .gif sont parfaitement gérés par tous les navigateurs depuis longtemps, aucun problème de ce côté là. Je rappelle que la transparence du format gif est binaire : un pixel peut être totalement transparent, ou totalement opaque avec une couleur. Le principe est de créer un damier de pixel coloré et transparent.

À l'aide de GIMP, il suffit de créer une image (Fichier > Nouveau...) de 2x2 pixel, avec un fond transparent.

À l'aide de l'outil crayon avec une brosse de 1 pixel, on crée le damier.

Il suffit ensuite de l'enregistrer (Fichier > Enregistrer sous) au format gif (en terminant le nom du fichier par .gif).

Pour appliquer ce damier à la page web, il suffit de modifier la feuille de style de la façon suivante :

#content {
    background: url(damier.gif);
}

Voici le résultat : Je vous l'accorde, c'est loin d'être idéal. Ça peut être utile dans certains cas, mais il faut savoir jouer sur le damier et la police du texte pour avoir un résultat potable. Heureusement, il y a mieux.

La solution actuelle

Au lieu du damier, nous allons utiliser une image au format png. Ce format est bien meilleur que le format gif, notamment grâce à son support d'une couche de transparence. Mais hélas, cette transparence n'est pas très bien gérée par Internet Explorer dans ses versions d'avant la 7.

Création du fond

Nous allons créer un fichier de 1x1 pixel (qui sera répété sur tout le fond de la zone concernée, vu qu'il est uniforme, autant le faire de la taille la plus petite pour accélérer le téléchargement de la page). On commence par choisir nos couleurs dans la fenêtre d'outils de GIMP : Plaçons dans le premier rectangle (la couleur de premier plan) la couleur à partir de laquelle nous souhaitons réaliser la teinte, et dans le second la couleur qui sera affichée par Internet Explorer 6 et précédent (ici du blanc). On choisit la couleur en cliquant sur le rectangle, notez le cadre qui permet de coller directement une couleur html.

Ensuite, on crée une nouvelle image (Fichier > Nouveau), de 1x1 pixel, en choisissant comme remplissage la couleur de premier plan :

Notre petit pixel est créé, il faut jouer avec le zoom (en bas de la fenêtre de l'image) pour y voir quelque chose. Nous allons maintenant appliquer une transparence au calque qui correspond à la couleur de fond, et qui a été créé automatiquement lors de la création de l'image. Il suffit d'aller dans la fenêtre des calques : Le réglage opacité permet de choisir la transparence du calque.

Ensuite, on enregistre l'image (Fichier > Enregistrer sous) au format png (en terminant le fichier par .png). Un message demande de fusionner les calques, on accepte. Ensuite une fenêtre d'options apparaît, veillez à ce que l'option Enregistrer la couleur d'arrière-plan, qui permet à Internet Explorer d'afficher la couleur que nous avons affecté à l'arrière plan.

Mise en place du fond pour les navigateurs modernes

Dans la feuille de style de la page, on ajoute :

#content {
    background: url(teinte.png);
}

(content représente le cadre en question sur la page, et teinte.png le chemin du fichier png créé auparavant.)

Et voici le résultat :

Et pour Internet Explorer ?

Sans rien faire, Internet Explorer devrait afficher la couleur d'arrière-plan (mais ça n'a pas marché avec mon Internet Explorer 6 émulé pour GNU/Linux, il faudrait le tester sous Microsoft Windows).

Microsoft a aussi publié un bricolage pour que les png s'affichent bien. Sauf que ça ne me semble pas vraiment donner du code valide, mais c'est le dernier des soucis de Microsoft (et mettre du code spécifique à Internet Explorer n'est jamais plaisant).

Il existe aussi la possibilité d'encadrer le code dans la feuille de style par des commentaires conditionnels. Là aussi, c'est un vilain bricolage. On peut trouver une bonne explication sur les commentaires conditionnels chez Blog and Blues. Ainsi, on peut afficher en image de fond un machin hideux avec écrit Changez de navigateur !.