Iptima » Xhtml http://www.iptima.com ... Miscellanées multimedia ® Tue, 08 Jun 2010 10:42:20 +0000 en hourly 1 Afficher un site Internet sur un téléphone mobile en pratique http://www.iptima.com/2010/02/24/afficher-un-site-internet-sur-un-telephone-mobile-en-pratique/ http://www.iptima.com/2010/02/24/afficher-un-site-internet-sur-un-telephone-mobile-en-pratique/#comments Wed, 24 Feb 2010 22:54:24 +0000 Vincent Roulet http://www.iptima.com/?p=426 Nous allons présenter ici un moyen rudimentaire de servir un contenu alternatif, sémantique, sans altérer le contenu principal. L’objectif est didactique. Si notre exemple ne sera évidemment pas utilisable en production (!), il constituera, le cas échéant, une piste de réflexion sur un développement. Nous utiliserons Php par commodité, mais le raisonnement pourra être repris avec d’autres langages de programmation.

D’abord, rendons-nous sur le site Detect Mobile Browsers, afin de télécharger le répertoire mobile_detect_device. Ce dossier contient le fichier mobile_device_detect.php. Son fonctionnement est sommaire, mais efficace… Il détecte le logiciel du navigateur : s’il se trouve dans la liste des agents utilisateurs des périphériques mobiles, il propose un traitement comme une direction. En revanche, il convient de maintenir à jour le fichier pour prendre en compte les nouveaux téléphones et les navigateurs correspondants.

Plaçons à la racine du site mobile_detect_device.

Nous disposons, à présent, de trois solutions pour rediriger vers un contenu alternatif :

  1. proposer un changement dynamique de la feuille de style avec l’Url,
  2. aiguiller vers un site alternatif, par exemple en sous-domaine,
  3. concevoir des pages à double contenu, l’un pour le contenu principal (ordinateurs classiques), l’autre pour le contenu alternatif (périphériques mobiles).

Dans le premier cas, il convient d’utiliser la syntaxe…

<?php
include('mobile_device_detect.php');
$mobile = mobile_device_detect();
if ($mobile == true)
{
  header('Location: http://your-website.com/?css=mobile_style') ;
}
?>

Cette solution conduit à ré-écrire une feuille de style, par exemple en cachant certains éléments avec la propriété display: none.

Dans le deuxième cas, il convient d’utiliser la syntaxe…

<?php
include('mobile_device_detect.php');
$mobile = mobile_device_detect();
if ($mobile == true)
{
  header('http://www.monsite.com/mobile/') ;
}
?>

Avec cette solution, plus simple et moins aléatoire, le site alternatif est autonome.

Dans le troisième cas, il convient d’utiliser la syntaxe…

<?php
include('mobile_device_detect.php');
$mobile = mobile_device_detect();
if ($mobile == true)
{
  /***** contenu alternatif pour les périphériques mobiles *****/
}
else {
  /***** contenu principal pour les ordinateurs classiques *****/
}
?>

Cette solution emporte notre préférence, car elle permet d’utiliser la même Url pour les pages, et donc de simplifier le référencement. Un Sitemap spécifique sera notamment inutile.

On peut raffiner la condition et utiliser, par exemple, une redirection spécifique pour l’affichage sur iPhone (http://www.monsite.com/iphone/) et une autre pour l’affichage sur les autres périphériques de poche (http://www.monsite.com/mobile/) :

<?php
include('mobile_device_detect.php');
mobile_device_detect('http://www.monsite.com/iphone/',true,true,true,true,true,false,'http://www.monsite.com/mobile/');
?>

Le code a été généré par Detect Mobile Browsers, mais nous préférons les syntaxes plus lisibles (et bavardes…) !

Voyons, en pratique, comment servir deux contenus dans la même page pour optimiser la Seo. Notre contenu principal contiendra un titre, une animation en Flash, une image et un texte. Notre contenu alternatif contiendra les mêmes éléments, mais l’animation sera remplacée par un texte…

<?php header("Content-Type: application/xhtml+xml");
// Permet d'envoyer un format 'Multipurpose Internet Mail Extensions' (Mime) adapté à la consultation sur les périphériques mobiles, et doit être placé dès la première ligne avant toute autre instruction.
include('mobile_device_detect.php');
$mobile = mobile_device_detect();
if ($mobile == true)
// Le 'if' puis le 'else' comporte des répétitions, mais permet de ne demander qu'une requête Php.
{
/***** Génération du contenu pour les périphériques mobiles *****/
?>
  <?= '<' . '?xml version="1.0" encoding="utf-8"?' . '>' ?>
  <!-- Envoie un encodage spécifique pour les périphériques mobiles -->
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN" "http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd">
  <!-- Prologue spécifique pour les périphériques mobiles -->
  <html xmlns="http://www.w3.org/1999/xhtml">
  <head>
  <meta http-equiv="Cache-Control" content="max-age=200" />
  <!-- Mise en cache des données de l'en-tête pendant 200 secondes pour éviter les nouvelles requêtes et ralentir la navigation -->
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <link rel="stylesheet" href="../phone/css/mobile.css" type="text/css" media="screen" />
  <!-- Si 'hanled' est introuvable, 'screen' est retenu par défaut. -->
  <!-- On peut se passer de l'appel à certains scripts destinés aux pages 'classiques'. -->
  <title>Nuages</title>
  <meta name="description" content="Nuages et stratocumulus" />
  <meta name="keywords" content="ciel, stratocumulus, nuages, météo" />
  </head>
  <body>
  <h1>Nuages</h1>
    <p>Un nuage est formé d'un ensemble de gouttelettes d'eau (ou de cristaux de glace) en suspension dans l'air. L'aspect du nuage dépend de la lumière qu'il reçoit, de la nature, de la dimension, du nombre et de la répartition des particules qui le constituent.</p>
  <h2>Stratocumulus</h2>
    <div id="image">
    <img src="../phone/media/clouds_thumb.jpg" alt="stratocumulus" title="stratocumulus" />
    <!-- Le nom des images peut être modifié dynamiquement pour afficher une dimension spécifique pour les périphériques mobiles avec une expression régulière ou un 'str_replace()', à partir du moment où elles sont présentes sur le serveur en plusieurs tailles et portent un nom logique. Par exemple, on peut renommer 'image.jpg' en 'image_thumb'.jpg. On peut aussi créer des miniatures à la volée avec 'imagecopyresampled'.-->
    </div>
    <p>Le stratocumulus est un genre de nuage appartenant à l'étage inférieur et situé à une altitude comprise entre 500 et 2500 mètres. Son épaisseur est de 600 mètres. Il est d'origine convective, mais son extension verticale est immédiatement limitée par la stabilité de la couche supérieure. Visuellement, ce sont de larges masses sombres et arrondies, habituellement en groupe, lignes ou vagues. Pris isolément, ces nuages sont plus gros que ceux du type altocumulus et l'ensemble se situe à plus basse altitude (habituellement en dessous de 2000 mètres).</p>
  </body>
  </html>
<?php
}
/***** Fin de la génération du contenu pour les périphériques mobiles *****/
else
{
/***** Génération du contenu pour les ordinateurs classiques *****/
?>
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml">
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8 " />
  <link rel="stylesheet" href="../phone/css/default.css" type="text/css" media="screen" />
  <title>Nuages</title>
  <meta name="description" content="Nuages et stratocumulus" />
  <meta name="keywords" content="ciel, stratocumulus, nuages, météo" />
  </head>
  <body>
  <!-- On peut aussi renvoyer le contenu vers une autre page, l'en-tête étant alors optionnel !!! -->
  <h1>Nuages</h1>
    <div id="anim">
      <object type="application/x-shockwave-flash" data="../phone/media/clouds.swf" width="400" height="300">
      <param name="movie" value="clouds.swf" />
      </object>
    </div>
  <h2>Stratocumulus</h2>
    <div id="image">
    <a href="../phone/media/clouds_default.jpg" onclick="window.open(this.href, 'Clouds', 'height=384, width=640, top=100, left=100, toolbar=no, menubar=yes, location=no, resizable=yes, scrollbars=no, status=no'); return false;"><img src="../phone/media/clouds_thumb.jpg" alt="stratocumulus" title="stratocumulus" /></a>
    </div>
    <p>Le stratocumulus est un genre de nuage appartenant à l'étage inférieur et situé à une altitude comprise entre 500 et 2500 mètres. Son épaisseur est de 600 mètres. Il est d'origine convective, mais son extension verticale est immédiatement limitée par la stabilité de la couche supérieure. Visuellement, ce sont de larges masses sombres et arrondies, habituellement en groupe, lignes ou vagues. Pris isolément, ces nuages sont plus gros que ceux du type altocumulus et l'ensemble se situe à plus basse altitude (habituellement en dessous de 2000 mètres).</p>
  </body>
  </html>
<?php
}
/***** Fin de la génération du contenu pour les ordinateurs classiques *****/
?>

Ou sans commentaires…

<?php header("Content-Type: application/xhtml+xml");
include('mobile_device_detect.php');
$mobile = mobile_device_detect();
if ($mobile == true)
{
?>
  <?= '<' . '?xml version="1.0" encoding="utf-8"?' . '>' ?>
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN" "http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml">
  <head>
  <meta http-equiv="Cache-Control" content="max-age=200" />
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <link rel="stylesheet" href="../phone/css/mobile.css" type="text/css" media="screen" />
  <title>Nuages</title>
  <meta name="description" content="Nuages et stratocumulus" />
  <meta name="keywords" content="ciel, stratocumulus, nuages, météo" />
  </head>
  <body>
  <h1>Nuages</h1>
    <p>Un nuage est formé d'un ensemble de gouttelettes d'eau (ou de cristaux de glace) en suspension dans l’air. L'aspect du nuage dépend de la lumière qu'il reçoit, de la nature, de la dimension, du nombre et de la répartition des particules qui le constituent.</p>
  <h2>Stratocumulus</h2>
    <div id="image">
    <img src="../phone/media/clouds_thumb.jpg" alt="stratocumulus" title="stratocumulus" />
    </div>
    <p>Le stratocumulus est un genre de nuage appartenant à l'étage inférieur et situé à une altitude comprise entre 500 et 2500 mètres. Son épaisseur est de 600 mètres. Il est d'origine convective, mais son extension verticale est immédiatement limitée par la stabilité de la couche supérieure. Visuellement, ce sont de larges masses sombres et arrondies, habituellement en groupe, lignes ou vagues. Pris isolément, ces nuages sont plus gros que ceux du type altocumulus et l'ensemble se situe à plus basse altitude (habituellement en dessous de 2000 mètres).</p>
  </body>
  </html>
<?php
}
else
{
?>
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml">
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8 " />
  <link rel="stylesheet" href="../phone/css/default.css" type="text/css" media="screen" />
  <title>Nuages</title>
  <meta name="description" content="Nuages et stratocumulus" />
  <meta name="keywords" content="ciel, stratocumulus, nuages, météo" />
  </head>
  <body>
  <h1>Nuages</h1>
    <div id="anim">
      <object type="application/x-shockwave-flash" data="../phone/media/clouds.swf" width="400" height="300">
      <param name="movie" value="clouds.swf" />
      </object>
    </div>
  <h2>Stratocumulus</h2>
    <div id="image">
    <a href="../phone/media/clouds_default.jpg" onclick="window.open(this.href, 'Clouds', 'height=384, width=640, top=100, left=100, toolbar=no, menubar=yes, location=no, resizable=yes, scrollbars=no, status=no'); return false;"><img src="../phone/media/clouds_thumb.jpg" alt="stratocumulus" title="stratocumulus" /></a>
    </div>
    <p>Le stratocumulus est un genre de nuage appartenant à l'étage inférieur et situé à une altitude comprise entre 500 et 2500 mètres. Son épaisseur est de 600 mètres. Il est d'origine convective, mais son extension verticale est immédiatement limitée par la stabilité de la couche supérieure. Visuellement, ce sont de larges masses sombres et arrondies, habituellement en groupe, lignes ou vagues. Pris isolément, ces nuages sont plus gros que ceux du type altocumulus et l'ensemble se situe à plus basse altitude (habituellement en dessous de 2000 mètres).</p>
  </body>
  </html>
<?php
}
?>

Le résultat peut être affiché sur une page de démonstration, et sa version mobile visualisée à l’adresse http://demo.iptima.com/phone/phone.php, par exemple avec Opera Mini Demo.

Nous avons utilisé Flash comme exemple, mais le contenu pourrait aussi être servi avec des documents au format Pdf.

Nota. Les textes et l’image de démonstration viennent de Wikipedia. L’animation en Flash a été téléchargée sur Amara Software.

]]> http://www.iptima.com/2010/02/24/afficher-un-site-internet-sur-un-telephone-mobile-en-pratique/feed/ 0 Concevoir une feuille de style pour les périphériques mobiles http://www.iptima.com/2010/02/22/concevoir-une-feuille-de-style-pour-les-peripheriques-mobiles/ http://www.iptima.com/2010/02/22/concevoir-une-feuille-de-style-pour-les-peripheriques-mobiles/#comments Mon, 22 Feb 2010 22:07:32 +0000 Vincent Roulet http://www.iptima.com/?p=382 Pour les périphériques de poche, c’est-à-dire les téléphones mobiles, Smartphones et autres Pda, la gestion des feuilles de style est complexe : les modèles sont très nombreux, et n’interprètent pas toujours correctement les directives Html.

D’abord, les résolutions des écrans sont multiples, les navigateurs parfois spécifiques, plus ou moins élaborés, voire conformes. Il faut donc trouver un poids moyen, car il serait vain de concevoir une version dédiée pour chaque modèle ! Le succès actuel de l’iPhone peut, toutefois, conduire à envisager un développement spécifique pour des raisons de stratégie commerciale.

Aussi, utilisons-nous deux outils en ligne pour émuler le fonctionnement des périphériques de poche :

Dès que le rendu est correct avec Opera Mini Demo et validé par le W3C mobileOK Checker (la page d’accueil Iptima obtient le score de 99/100 et le présent article 98/100… scores perfectibles !), nous validons le développement.

Ensuite, certains navigateurs de périphériques de poche n’identifient pas le medium Handled dans l’en-tête des pages Html, et ne retiennent que le medium Screen !

Afficher un contenu identique est illusoire, n’en déplaise aux tenants des mises en page liquides ou fluides : les bannières ou les images ne sont pas redimensionnables le plus souvent, et toujours trop larges pour un téléphone, et leur largeur est forcément fixe !

Aussi faut-il servir un contenu spécifique pour les périphériques de poche, soit en l’adaptant soit en le créant. Le principe est simple… Lors de la demande de connexion, le navigateur est identifié : s’il est reconnu comme mobile, il est redirigé vers le contenu alternatif. Sur le plan technique, la mise en œuvre n’est guère plus compliquée (il suffit de consulter Iptima avec son radio-téléphone ou d’utiliser Opera Mini Demo pour voir une illustration !), mais dépasserait le cadre de cet article. Nous essaierons d’y revenir prochainement.

Une feuille de style pour périphérique de poche doit être courte, car le délai de son téléchargement a de l’importance. De plus, il est inutile de vouloir perfectionner à outrance l’aspect de la page, car certains navigateurs restent sourds aux raffinements (comme la suppression des puces dans les listes), et il vaut mieux se concentrer sur l’essentiel : marges et couleurs, à assortir au site principal.

À l’instar des feuilles de style dédiées à l’impression, nous avons décidé d’utiliser essentiellement des unités relatives et réduites, en raison de l’étroitesse de l’écran, avec l’unité em ou %. L’affichage des polices de caractères se limite à une seule valeur. Les largeurs des bordures sont relatives. Nous avons aussi renoncé à appliquer un fond de couleur pour recourir à un arrière-plan transparent. Les images sont toujours centrées, en raison de l’étroitesse de l’écran.

body {
  background-color: transparent;
  color: #000000;
  font-family: sans-serif;
  /* Permet de spécifier une police sans empattements plus lisible sur un écran. */
  font-size: 1em;
  margin: 1em
}
#header {
  border-bottom: medium solid #ffa97a;
  border-top: medium solid #ffa97a;
  padding-bottom: 0.25em;
  text-align: center
}
img {
  display: block;
  margin-left: auto;
  margin-right: auto
}
ol.commentlist li, ol.pinglist li {
  border: thin dotted #666666;
  list-style-position: inside;
  list-style-type: decimal;
  margin: 0.9375em 0 0 0.9375em;
  /* margin: 15px 0 0 15px; dans la feuille de style pour l'écran du site principal */
  padding: 0.3125em;
  /* padding: 5px; dans la feuille de style pour l'écran du site principal */
}

Nous pouvons aussi cacher certains conteneurs, même si le contenu alternatif devrait permettre d’obvier à l’affichage de ces éléments…

#adsense, #advertising {
  display: none

Enfin, nous avons prévu d’afficher la signification des acronymes juste après leur affichage avec les pseudo-classes acronym:after, abbr:after, car l’équivalent des souris sur les Pda ne permettent pas toujours le survol. Ainsi, le lecteur connaît instantanément la signification. Tant pis pour les téléphones et les utilisateurs qui ne reconnaîtront pas cette règle…

acronym:after, abbr:after {
  content: " ["attr(title)"]";
  text-decoration: none

Attention ! il est tentant de redimensionner les images trop larges avec une feuille de style : l’image originale sera téléchargée, et obligera le navigateur à effectuer le redimensionnement, ralentissant l’affichage de la page.

]]> http://www.iptima.com/2010/02/22/concevoir-une-feuille-de-style-pour-les-peripheriques-mobiles/feed/ 0 Concevoir une feuille de style pour l’impression http://www.iptima.com/2010/02/22/concevoir-une-feuille-de-style-pour-limpression/ http://www.iptima.com/2010/02/22/concevoir-une-feuille-de-style-pour-limpression/#comments Mon, 22 Feb 2010 16:49:28 +0000 Vincent Roulet http://www.iptima.com/?p=369 Les feuilles de style pour les imprimantes ne peuvent convenir à celles utilisées pour les écrans : un Design harmonieux sur un moniteur se révèle désastreux à l’impression, comme les fonds colorés. En outre, les imprimantes utilisent une résolution plus élevée, et la notion de pixel est difficilement transposable pour le papier. Enfin, il impossible de prévoir les caractéristiques de l’imprimante et les préférences de l’utilisateur : impression en noir et blanc ? impression en mode portrait ou paysage ?… taille de la feuille ?…

Les feuilles de style dédiées à l’impression sont toujours reconnues avec les navigateurs, contrairement à handled pour les périphériques de poche : pourquoi utiliser une solution complexe et coûteuse en ressources comme JavaScript ou Php ?

Si une impression normée s’avère souhaitable, il vaut mieux alors générer un document Pdf à la volée.

Cependant, il n’est pas judicieux de concevoir une feuille de style sophistiquée dans les moindres détails : comme le recours à l’impression reste marginal, les règles peuvent être rudimentaires.

Aussi avons-nous décidé de lâcher prise pour l’impression : nous allons utiliser des unités relatives avec em, nous ne spécifierons pas une police de caractères, et afficherons du noir et blanc. Ainsi, le navigateur gèrera par défaut l’impression… avec des résultats moins hasardeux !

En revanche, nous avons développé une solution spécifique pour la gestion des liens, des acronymes et des images, qui permet de tirer parti astucieusement des spécificités du medium Print.

Quelques propriétés…

D’abord, appelons le medium Print dans l’en-tête de nos pages Html…

<link rel="stylesheet" href="http://www.monsite.com/styles/print.css" type="text/css" media="print" />

Réglons ensuite l’apparence de notre site…

body {
  color: #000000;
  /* Nous imprimons en noir et blanc */
  font-family: serif;
  /* Permet de spécifier une police à empattements plus lisible sur le papier. */
  font-size: 1em;
  margin: 1.5em
}

Ensuite, cachons les éléments purement décoratifs ou non significatifs, images ou non…

#adsense, #advertising {
  display: none
}

Imprimons nos liens en noir et blanc…

h1, h2, h3, h4, h5, h6 {
  color: #000000;
  padding: 0.5em;
  text-align: center;
  text-decoration: none
}
h1.a, h1 a:link, h1 a:visited, h2.a, h2 a:link, h2 a:visited, h3.a, h3 a:link, h3 a:visited, h4.a, h4 a:link, h4 a:visited, h5.a, h5 a:link, h5 a:visited, h6.a, h6 a:link, h6 a:visited {
  color: #000000;
  text-decoration: none
}

Préférons les unités relatives pour les bordures…

.postmetadata {
  border: thin solid #999999;
  /* Il existe trois unités relatives pour désigner la largeur de la bordure : 'thin', 'medium', ou 'thick'. */
  margin: 1em;
  padding: 1em
}

Continuons à jouer avec les unités relatives…

ol.commentlist li, ol.pinglist li {
  border: thin dotted #666666;
  list-style-position: inside;
  list-style-type: decimal;
  margin: 1.5em 0 0 1.5em;
  /* margin: 15px 0 0 15px; dans la feuille de style pour l'écran */
  padding: 0.5em;
  /* padding: 5px dans la feuille de style pour l'écran */
}

Gestion des liens et des acronymes

Par défaut, les liens et les acronymes sont imprimés en l’état, c’est-à-dire soulignés ou non. Néanmoins, un lien souligné n’est guère informatif pour le lecteur de la version imprimée, et il devra retourner sur le site pour retrouver l’adresse ! Aussi pourquoi ne pas afficher l’adresse du lien ou la signification de l’acronyme juste après l’affichage ? Css permet aisément de spécifier la propriété avec :a:after…

h1 a:after, h2 a:after, h3 a:after, h4 a:after, h5 a:after {
  border-bottom: thin solid #000000;
  content: " ["attr(href)"]";
  /* Noter l'espace juste après le premier guillemet pour éviter que le contenu ne colle au lien. */
}
acronym:after, abbr:after {
  border-bottom: thin dotted #000000;
  content: " ["attr(title)"]"
}

Gestion des images

Pour les images, il ne semble pas toujours utile de les imprimer. En effet, la plupart des images ne présente aucune valeur informative, et l’impression d’une image d’une résolution de 72 pixels par pouce se révèle souvent catastrophique. C’est pourquoi, nous avons pris le parti de ne pas les afficher à l’impression (au passage, les droits d’auteur sont ainsi préservés), mais de signaler leur existence par deux moyens : avec le contenu de la balise alt, d’une part, et, d’autre part, avec la mention [img] (nous avons repris sobrement le nom de la balise Html pour assurer l’internationalisation de la feuille de style). Ces deux affichages peuvent sembler redondants, mais la pseudo-classe img:after n’est pas gérée par tous les navigateurs. Ainsi, le lecteur ne perd aucune information essentielle !

dl.gallery {
  text-align: left /* Nos images sont placées dans des listes de définition */
}
.gallery_dt, .gallery_dd {
  margin-left: 0 /* Évite le décalage à droite imposé par le navigateur */
}
.gallery dt a img {
  display: none
}
.gallery dt a img:after {
  content: " ["attr(alt)"] [alt]"
}
.gallery dt:after {
  color: #333333;
  content: "[img] ";
  font-style: italic
}
.gallery dd:after {
  color: #333333;
  font-style: normal
}
.gallery dt, .gallery_dd {
  font-style: italic
}

Nota. Le marquage sémantique d’une liste de définition permet une gestion plus fine de l’affichage.

Si l’on ne souhaite pas se passer de l’impression des images, peut-être vaut-il mieux proposer, à titre alternatif, le téléchargement d’une image à la résolution spécifique.

En revanche, nous ne savons pas gérer correctement les veuves (Widows) et les orphelines (Orphans) pour éviter l’affichage disgracieux de lignes isolées en haut ou en bas de page : gageons que Css 3, voire l’évolution des navigateurs, permettra de combler nos attentes de typographe !

Lien intéressant : Faites bonne impression avec les CSS.

]]> http://www.iptima.com/2010/02/22/concevoir-une-feuille-de-style-pour-limpression/feed/ 0 Les listes en Html http://www.iptima.com/2008/10/28/les-listes-en-html/ http://www.iptima.com/2008/10/28/les-listes-en-html/#comments Tue, 28 Oct 2008 10:34:24 +0000 Vincent Roulet http://www.iptima.com/?p=267 Plutôt que recourir à des tirets, Html ou Xhtml permet de gérer harmonieusement les listes. Ainsi, la présentation est améliorée, et les listes prennent une valeur sémantique. On distingue trois catégories :

  • les listes non-ordonnées,
  • les listes ordonnées,
  • les listes de définitions.

Les balises utilisées dans les listes ont les significations suivantes dans la langue de Shakespeare :

ul
Unordered Lists
ol
Ordered Lists
li
List items
dl
Definition Lists
dt
Definition Term
dl
Definition Description

Les listes ordonnées permettent une énumération simple. Les listes ordonnées appliquent un chiffre devant chaque item. Contrairement à leur nom, les listes de définition peuvent être aussi utilisées pour relier des éléments entre eux.

Les listes débutent toujours par la balise <ul> et finissent par la balise </ul> pour une liste non-ordonnée ou <ol> et </ol> pour une liste ordonnée. À l’intérieur, on utilise les balises <li> et </li>. Les listes de définition se comportent différemment.

Les listes ordonnées

Exemple…

<ul>
  <li>papier,</li>
  <li>ciseaux,</li>
  <li>cailloux.</li>
</ul>

Affichera…

  • papier,
  • ciseaux,
  • cailloux.

La feuille de style gère le retrait du paragraphe et l’aspect de la puce.

Les listes non-ordonnées

Exemple…

<ol>
  <li>papier,</li>
  <li>ciseaux,</li>
  <li>cailloux.</li>
</ol>

Affichera…

  1. papier,
  2. ciseaux,
  3. cailloux.

La feuille de style gère le retrait de paragraphe et l’aspect de la numérotation. Pour des raisons esthétiques, on peut supprimer la numérotation et afficher normalement le texte. Pour autant, cette liste numérotée conservera sa valeur sémantique !

Imbrication de listes

Il est possible d’imbriquer des listes à l’infini pour des raisons logiques.

Nota. On peut, avec Css, styler différemment chaque enfant d’une liste.

Exemple…

<ul>
  <li>Aquitaine
    <ul>
      <li>Dordogne,</li>
      <li>Gironde,</li>
      <li>Landes,</li>
      <li>Lot-et-Garonne,</li>
      <li>Pyrénées-Atlantiques.</li>
  </ul>
  </li>
  <li>Languedoc-Roussillon
    <ul>
      <li>Aude,</li>
      <li>Gard,</li>
      <li>Hérault,</li>
      <li>Lozère,</li>
      <li>Pyrénées-Orientales.</li>
    </ul>
  </li>
</ul>

Affichera…

  • Aquitaine
    • Dordogne,
    • Gironde,
    • Landes,
    • Lot-et-Garonne,
    • Pyrénées-Atlantiques.
  • Languedoc-Roussillon
    • Aude,
    • Gard,
    • Hérault,
    • Lozère,
    • Pyrénées-Orientales.

Pour simplifier la gestion des balises, la méthode consiste à indenter le code, car le risque d’erreur est grand de se tromper. La plupart des logiciels d’édition de code propose une coloration ou une mise en évidence des balises ouvrantes et fermantes. Cette fonction est fort utile.

De même, peut-on placer entre <li> et </li> des paragraphes, des images…

Exemple…

<ul>
  <li>Papiers
    <p>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi.
    </p>
  </li>
  <li>Ciseaux</li>
  <li>Cailloux</li>
</ul>

Affichera…

  • Papiers

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi.

  • Ciseaux
  • Cailloux

Listes de définition

Les listes de définition débutent toujours le conteneur <dl> et finissent par </dl>. À l’intérieur, on utilise les balises <dt> et </dt> qui indique le terme à définir, puis <dd> et </dd> pour donner la définition.

Dans une même listes de définitions, il peut y avoir plusieurs balises <dt> et </dt> et plusieurs balises <dd> et </dd> qui peuvent être mélangées, mais évidemment une seule balise <dl> et </dl>.

Par exemple, pour définir les mois de janvier et de février, on écrira…

<dl>
  <dt>Janvier</dt>
  <dd>Premier mois de l'année.</dd>
  <dt>Février</dt>
  <dd>Deuxième mois de l'année.</dd>
</dl>

Qui affichera…

Janvier
Premier mois de l’année.
Février
Deuxième mois de l’année.

L’affichage des listes de définition est différent entre Firefox et Msie. Le premier navigateur reconnaît notamment la propriété dd:before dans une feuille de style.

Les listes de définition peuvent avoir un usage varié. Imaginons que nous soyons écrivain ; nous voulons informer les lecteurs de nos séances de dédicace. Nous pourrions écrire au kilomètre…

Jeudi 21 août 2008, de 17 h 00 à 18 h 30, présentation puis dédicace d’« En quête » de lecteurs à la Bibliothèque Municipale et, à partir de 18 h 30, à la Librairie Alphabétique de Bordeaux (Gironde).

En réorganisant et en factorisant l’information (c’est l’un des défis les plus intéressants d’Xhtml selon nous !), nous pourrions recourir à la présentation suivante…

<dl>
  <dt>Jeudi 21 août 2008</dt>
  <dd>Bordeaux (Gironde)</dd>
  <dt>de 17 h 00 à 18 h 30</dt>
  <dd>Bibliothèque Municipale</dd>
  <dt>de 18 h 30 à 19 h 00</dt>
  <dd>Librairie Alphabétique</dd>
  <dd>Présentation puis dédicace d<strong><em>« En Quête » de lecteurs</em></strong>.</dd>
</dl>

Qui affichera…

Jeudi 21 août 2008
Bordeaux (Gironde)
de 17 h 00 à 18 h 30
Bibliothèque Municipale
de 18 h 30 à 19 h 00
Librairie Alphabétique
Présentation puis dédicace d’« En Quête » de lecteurs.

De la même façon, nous pourrions nous servir d’une liste de définition pour présenter les commentaires (forcément élogieux !) de lecteurs sur notre ouvrage. Nous indiquerions comme termes l’identité du lecteur puis la date de l’avis, la description correspondant au libellé du commentaire.

Au-delà d’une présentation plus aérée, les moteurs de recherche référenceront mieux l’information présentée ainsi.

]]> http://www.iptima.com/2008/10/28/les-listes-en-html/feed/ 0 Ajouter des « Widgets » à un thème WordPress http://www.iptima.com/2008/08/19/ajouter-des-%c2%ab-widgets-%c2%bb-a-un-theme-wordpress/ http://www.iptima.com/2008/08/19/ajouter-des-%c2%ab-widgets-%c2%bb-a-un-theme-wordpress/#comments Tue, 19 Aug 2008 17:55:40 +0000 Vincent Roulet http://www.iptima.com/?p=152 Dans WordPress, il est désormais possible d’ajouter des Widgets dans quatre zones :

  • l’en-tête,
  • le contenu,
  • la colonne latérale,
  • le pied de page.

Le nombre de zones n’est pas limité : on peut très bien imaginer un thème avec deux colonnes latérales de Widgets et un pied de page avec trois zones de Widgets !

La plupart des thèmes disponibles se contente de proposer une ou plusieurs colonnes latérales Widget Ready. Or, pour des raisons esthétiques ou de séméiologie (!), on peut vouloir afficher WordPress sur une colonne, avec les informations complémentaires dans le pied de page.

Nous allons donc voir ici, à travers quelques codes simples que nous avons développés (nous préfèrerons ici la pratique à la théorie, car c’est en forgeant qu’on devient forgeron), comment ajouter des Widgets à un thème dans une colonne ou dans un pied de page. Leur adaptation demandera un minimum d’effort, nous en sommes persuadé…

Dans notre premier thème, nous nous contenterons d’afficher une deuxième colonne latérale dans le corps de la page affichant des Widgets ; dans le deuxième, nous créerons un pied de page développé, qui comprendra trois zones de Widgets.

Précisions au préalable que la widgetization d’un thème demande la modification de trois fichiers :

  • le fichier functions.php,
  • la feuille de style que nous appellerons par commodité styles.css,
  • le fichier de destination, sidebar.php ou footer.php, selon la zone de destination des widgets dans nos exemples présentés ici.

Le fichier functions.php

Le fichier functions.php comportera l’instruction suivante pour notre thème à la deuxième colonne :

<?php
if (function_exists('register_sidebar'))
register_sidebar(array('name'=>'barre',
  'before_widget' => '<div id="%1$s" class="widget_sidebar %2$s">',
  'after_widget' => '</div>',
  'before_title' => '<h2 class="widgettitle">',
  'after_title' => '</h2>',
));
?>

Ici, sidebar a été utilisé au singulier, car nous demandons la création d’une seule zone.

Pour notre pied de page développé, nous écrirons :

<?php
if (function_exists('register_sidebar'))
register_sidebars(3,array(
  'before_widget' => '<div id="%1$s" class="widget_sidebar %2$s">',
  'after_widget' => '</div>',
  'before_title' => '<h2 class="widgettitle">',
  'after_title' => '</h2>',
));

Ici, la déclaration est la même que précédemment, à l’exception du chiffre 3 qui précise le nombre de Sidebars attendu et de l’ajout de la marque du pluriel à sidebar.

Cette solution présente un inconvénient ergonomique : aucun nom ne sera donné à la zone, au risque de créer une confusion dans l’esprit de l’utilisateur. Aussi vaut-il mieux déclarer un par un chaque widget, en leur attribuant un nom significatif : par exemple, pied_gauche, pied_centre et pied_droit.

Le fichier style.css

Après avoir déclaré les Widgets et le formatage attendu, nous pouvons les styliser dans le fichier style.css comme suit dans notre thème à la colonne :

#sidebar {
/* 8 juin 2010. La syntaxe de cette feuille de style est laide comme les suivantes dans l'article, car nous avons progressé depuis la rédaction de l'article. Cependant, nous laissons l'article en l'état... qui pourra peut-être éclairer les débutants. */
  float: left;
  margin: 0 0 0 20px;
  padding: 0
  width: 320px
}
#sidebar ul {
  margin-bottom: 20px
}
#sidebar a {
  color: #000
}
.widget_sidebar {
  display: block;
  float: left;
  font-size:1em;
  margin: 0 0 5px 0;
  padding: 0;
  width: 320px
}
.widget_sidebar h1, .widget_sidebar h2, .widget_sidebar h3 {
  background: #ffe6e6;
  border-bottom: 1px solid #000;
  border-top: 1px solid #000;
  color: #fff;
  margin: 0;
  padding : 2px 0px 2px 5px
}
.widget_sidebar ul h2 {
  border-bottom: dashed 1px #000;
  font-size: 1.5em;
  padding-bottom: 10px
}
.widget_sidebar ul li {
  border-bottom: dashed 1px #000;
  font-size: 1.1em;
  line-height: 1.6em;
  list-style: none
}
.widget_sidebar ul ul li {
  border-bottom: dashed 1px #000
}
#sidebar a:hover {
  text-decoration: underline
}
.widget_sidebar p {
  font-size: 1em;
  padding: 10px;
  text-align: center
}
/*--------------Widgets--------------*/
li.widget h2 {
  color: #000;
}
/*-------------Calendar-----------------*/
#wp-calendar {
  margin-top: 5px;
  text-align: left;
  width: 180px
}
#wp-calendar th {
  margin-top: 5px
}
#wp-calendar caption {
  margin-top: 5px;
  font-size: 1.2em

Pour le pied de page, nous le styliserons ainsi…

#footer_sidebar {
  display: block;
  height: 260px;
  margin-left: 25px;
  margin-right: 25px;
  padding-top: 25px
}
#footer_sidebar_1 {
  float: left;
  margin-right: 25px;
  width: 180px
}
#footer_sidebar_2 {
  float: left;
  margin-right: 25px;
  width: 180px
}
#footer_sidebar_3 {
  float: left;
  width: 180px
}
#footer ul {
  margin-bottom: 20px
}
.widget_sidebar h1, .widget_sidebar h2, .widget_sidebar h3 {
  color: #000;
  border-bottom: 1px solid #000;
  border-top: 1px solid #000;
  margin: 0;
  padding: 2px 0px 2px 0px;
  text-align: center
}
.widget_sidebar ul h2 {
  border-bottom: dashed 1px #000;
  font-size: 1.5em;
  padding-bottom: 10px
}
.widget_sidebar ul li {
  border-bottom: dashed 1px #000;
  font-size: 1.1em;
  list-style: none;
  line-height: 1.6em
}
.widget_sidebar ul ul li {
  border-bottom: dashed 1px #000
}
#sidebar a:hover {
  text-decoration: underline
}
.widget_sidebar p {
  color: #000;
  font-size: 1em;
  padding: 10px;
  text-align: center
}
/*--------------Widgets--------------*/
li.widget h2 {
  color: #000
}
/*-------------Calendar-----------------*/
#wp-calendar {
  margin-top: 5px;
  text-align: left;
  width: 180px
}
#wp-calendar th {
  margin-top: 5px
}
#wp-calendar caption {
  font-size: 1.2em;
  margin-top: 5px

(Nota. Pour les exemples, nous nous sommes contenté de la couleur noire, qui n’affichera pas grand’chose !)

Déclaration des Widgets dans les fichiers de destination

Enfin, il reste à déclarer les Widgets dans la colonne de notre premier thème. Il suffit d’ajouter à notre fichier sidebar.php la déclaration…
<?php
if ( !function_exists('dynamic_sidebar')
|| !dynamic_sidebar(1) ) : ?>
<?php endif; ?>

Pour notre fichier footer.php du deuxième thème, l’instruction sera :

<div id="footer_sidebar">
  <div id="footer_sidebar_1">
  <?php if (!function_exists('dynamic_sidebar')
|| !dynamic_sidebar(1)) : ?>
  <?php endif; ?>
  </div>
  <div id="footer_sidebar_2">
  <?php if (!function_exists('dynamic_sidebar')
|| !dynamic_sidebar(2)) : ?>
  <?php endif; ?>
  </div>
  <div id="footer_sidebar_3">
  <?php if (!function_exists('dynamic_sidebar')
|| !dynamic_sidebar(3)) : ?>
  <?php endif; ?>
  </div>
</div>

Traditionnellement, cette déclaration est placée en tête du fichier, le restant étant laissé vide. Néanmoins, il est possible de coder en dur certains éléments, et d’ajouter la déclaration à la suite. Ainsi, l’ajout de Widgets dans l’interface d’administration de WordPress n’affectera pas le codage.

À l’usage, nous avons noté un dysfonctionnement. Si trois zones de widgets sont prévues dans le pied de page à gauche, au centre et à droite, la zone centrale ne peut être laissée vide : sinon, les Widgets placés dans la zone de droite occupent le centre. Pour obvier à cet inconvénient, il suffit d’ajouter un Widget texte vide dans la zone centrale, avec un espace insécable.

(Nota. Nous prions nos lecteurs de nous excuser pour les anglicismes, plus ou moins incontournables en la matière !)

]]> http://www.iptima.com/2008/08/19/ajouter-des-%c2%ab-widgets-%c2%bb-a-un-theme-wordpress/feed/ 8 Désactiver le Html dans les commentaires de WordPress http://www.iptima.com/2008/08/06/desactiver-le-html-dans-les-commentaires-de-wordpress/ http://www.iptima.com/2008/08/06/desactiver-le-html-dans-les-commentaires-de-wordpress/#comments Wed, 06 Aug 2008 08:35:17 +0000 Vincent Roulet http://www.iptima.com/?p=107 Parfois, les commentaires peuvent compromettre la validité Xhtml, stricte ou transitionnelle, d’une page. et, partant, compromettre son affichage dans les navigateurs. En effet, WordPress autorise par défaut l’usage de certaines balises. Or, certains commentateurs, qui ne maîtrisent pas la syntaxe informatique, oublient de fermer ces tags. Au demeurant, ces balises sont sans grand intérêt et ne visent qu’à décorer le texte. Sauf à reprendre chaque intervention une à une pour les conformer (!), il semble donc préférable de désactiver le Html dans les commentaires.

À cet effet, il convient de supprimer le code…

<?php _e('You can use these tags:','news'); ?>
<?php echo allowed_tags(); ?>

dans le fichier comments.php, au dessus de la déclaration de la zone de texte multiligne. Sur le plan technique, cette désactivation ne présente aucun intérêt, mais évite d’induire en erreur le commentateur.

Ensuite, il faut télécharger l’extension Peter’s Litteral Comments, qui utilise la fonction htmlspecialchars de Php. Après décompression de l’archive à la taille impressionnante de 1,51 Kilo-octets, il convient de la téléverser dans le répertoire Plugins, puis de l’activer.

]]> http://www.iptima.com/2008/08/06/desactiver-le-html-dans-les-commentaires-de-wordpress/feed/ 0 Ypthima Keys http://www.iptima.com/2007/09/22/ypthima-keys/ http://www.iptima.com/2007/09/22/ypthima-keys/#comments Sat, 22 Sep 2007 18:40:22 +0000 Vincent Roulet http://www.iptima.com/2007/09/22/ypthima-keys/ <addendum>

15/09/2009.

Nous laissons cet article pour mémoire, car nous ne maintenons plus l’extension, devenue incompatible avec les versions suivantes de WordPress.

</addendum>

Dans le cadre de notre travail sur l’accessibilité, nous avons voulu trouver le moyen d’implémenter des raccourcis claviers dans WordPress.

À l’issue de patientes recherches, nous avons fini par dénicher le Plugin Access Keys.

L’usage de ce module d’extension nécessite que le thème fonctionne avec les marqueurs de modèle (ou template tags) wp_list_pages et wp_list_categories. Or, nous utilisions wp_list_cats. En modifiant notre thème, nous avons pu apprendre que wp_list_cats était déprécié (attention, la syntaxe de ces deux marqueurs de modèle n’est pas identique).

Malheureusement, le plugiciel ne fonctionnait pas. Dans les commentaires sur Access Keys, l’allemand Thomas Schvenke proposait une modification fonctionnelle du code original que nous avons adoptée.

En revanche, nous avons dû revoir l’écriture du Plugin afin que son affichage soit compatible Xhtml strict, et nous avons donné naissance à Ypthima Keys, qui peut être téléchargé sur notre weblogue. Il suffit de placer le plugicel dans la racine du repertoire Plugins et de l’activer depuis l’interface d’administration de WordPress.

Ypthima Keys s’administre grâce au bouton Gérer, onglet Access Keys. Il suffit d’assigner le caractère choisi aux pages et aux catégories — mais, comme nous l’avons vu dans notre article sur l’accessibilité, le nombre de caractères réellement utilisables est réduit —, puis de cliquer sur le bouton Save.

]]> http://www.iptima.com/2007/09/22/ypthima-keys/feed/ 1 Accessibilité avec WordPress http://www.iptima.com/2007/09/21/accessibilite-avec-wordpress/ http://www.iptima.com/2007/09/21/accessibilite-avec-wordpress/#comments Fri, 21 Sep 2007 18:50:17 +0000 Vincent Roulet http://www.iptima.com/2007/09/21/accessibilite-avec-wordpress/ L’accessibilité des sites est une question fondamentale dans la conception de sites Web. Pour l’instant, aucune obligation n’est imposée aux maîtres-toile privés, mais il semble que la réglementation doive évoluer.

Aussi avons-nous cherché une solution nous permettant de rendre accessible notre weblogue.

Après avoir décrit les principes de l’accessibilité, nous essaierons de dégager des solutions pour WordPress

Considérations générales sur l’accessibilité

Rendre un site accessible, c’est permettre sa consultation non seulement par des déficients visuels ou moteurs (sans compter les handicapés auditifs, cognitifs ou neurologiques), mais aussi par des internautes disposant d’une connexion en bas débit assurée par Rtc ou par Gsm. Enfin, c’est respecter la navigation et prendre en compte les différences linguistiques. La connaissance de ces contraintes et des solutions correspondantes permet de mieux concevoir ses pages au bénéfice de l’ensemble de ses visiteurs.

Accessibilité pour les déficients visuels

Les déficients visuels correspondent aux mal-voyants, daltoniens et aux aveugles. Pour les mal-voyants, il faut autoriser un redimensionnement du texte en utilisant des tailles de police proportionnelles. Idéalement, il faudrait que l’ensemble des valeurs des feuilles de style soient exprimé en valeurs relatives, par exemple avec l’unité em. Le contraste doit être suffisant entre les entre couleur de texte et couleur de fond pour les daltoniens.

Quant aux non-voyants, ils utilisent des lecteurs Braille. JavaScript ne peut servir à naviguer ou à informer, sans équivalents textuels. Autrement exprimé, le langage JavaScript ne doit ajouter qu’une fonctionnalité supplémentaire mais ne jamais la remplacer. Pour la même raison, les textes ne peuvent être affichés sous la forme d’images. Les images doivent être légendées avec les balises alt et title ; lorsque les images ne sont pas significatives, c’est-à-dire décoratives, les balises peuvent être laissées vides.

Il faut utiliser Css et la sémantique Xhtml en renonçant à l’usage de tableaux pour la mise en page, hormis pour la présentation de données. Pour ne pas pas entretenir la confusion, un lien hypertexte doit s’ouvrir dans la même fenêtre. Il convient de préciser dans le lien hypertexte la langue utilisée, lorsque la ressource est dans une langue différente de celle du texte ; à cet effet, on utilise dans l’appel du lien une balise de forme pour un document en anglais. Enfin, la signification des acronymes doit être précisée, car elle est lue par les lecteurs Braille.

Afin de valider l’accessibilité de son site pour les déficients visuels, la solution la plus probante consiste à utiliser un navigateur en mode texte : si chaque information est affichée, la conception du site est correcte.

Accessibilité pour les handicapés moteurs

Comme les handicapés moteurs ne peuvent recourir à une souris, il faut envisager une navigation spécifique. À cet effet, le concepteur d’un site peut prévoir que la navigation s’opérera à l’aide la touche tabulation du clavier : chaque lien hypertexte (ou entrée de formulaire) est affecté d’une valeur tabindex. Prenons la valeur tabindex=”3” : depuis le haut de la page, trois appuis sur la touche tabulation donneront le focus à ce lien, qui s’ouvrira en pressant la touche Entrée. Pour informer le visiteur de la valeur, il suffit de l’indiquer dans la balise title du lien. Lorsqu’aucun tabindex n’est défini dans la page, l’appui sur la touche tabulation permet en principe de naviguer de lien en lien, du haut en bas de la page.

Une autre solution passe par la mise en œuvre de raccourcis claviers (ou Accesskeys) : l’utilisateur appuie sur une combinaison de touches pour parvenir à l’information souhaitée. Cette solution, séduisante en théorie, n’est pourtant pas la panacée. En effet, les raccourcis clavier demandent des contorsions digitales à un utilisateur handicapé ! Ensuite, même lorsqu’ils sont reconnus par les agents utilisateurs, les raccourcis clavier peuvent entrer en conflit avec les raccourcis implémentés dans ces navigateurs. Pour cette raison, le nombre d’Accesskeys est fort limité. Le gouvernement britannique fournit des directives d’accessibilité en proposant les raccourcis claviers suivants :

  • S - passer la navigation
  • 1 - accueil
  • 2 - actualités
  • 3 - plan du site
  • 4 - recherche
  • 5 - foire aux questions
  • 6 - aide
  • 7 - procédure de plainte ou contact
  • 8 - conditions d’utilisation
  • 9 - retour d’information
  • 0 - liste des raccourcis clavier

Ainsi, pour utiliser le raccourci clavier 0, il suffira d’ajouter au lien la valeur Accesskey=”0”.

]]> http://www.iptima.com/2007/09/21/accessibilite-avec-wordpress/feed/ 2 All in one SEO Pack http://www.iptima.com/2007/09/09/all-in-one-seo-pack/ http://www.iptima.com/2007/09/09/all-in-one-seo-pack/#comments Sun, 09 Sep 2007 17:51:36 +0000 Vincent Roulet http://www.iptima.com/2007/09/09/all-in-one-seo-pack/ Pendant longtemps, nous ne sommes pas préoccupé de la Seo, autrement dit de l’optimisation de notre weblogue pour les moteurs de recherche. En effet, lorsque nous avions choisi notre thème, l’auteur avait mentionné Seo Ready, et nous l’avions cru sur parole (!). Dès lors, nous pensions ne pas avoir à nous occuper du référencement.

Néanmoins, nous étions surpris de constater que les balises d’en-tête de nos pages étaient vides, aussi bien pour les mots-clés que pour la description. Cet inconvénient ne nous semblait guère important : Google ou Yahoo référencent prioritairement le contenu textuel des pages.

<addendum>

20/03/2008.

Depuis la rédaction de cet article, nous avons revu notre jugement… Google affiche systématiquement, dans les résultats d’une recherche, un extrait du champ description.

</addendum>

En revanche, à l’usage, nous nous sommes aperçu avec effroi que, lorsque nous accédions aux archives de notre weblogue, le titre affiché était sous la forme année mois (en lettres et en anglais) jour. De même, le titre des catégories apparaîssait sous le libellé notre_categorie category…

Il nous fallait donc trouver une solution.

Nous avons choisi un Sgc pour ne pas avoir à travailler sur le code source, mais nous consentons à modifier les thèmes et les plugiciels lorsque nous en comprenons le fonctionnement.

À l’issue d’une tentative malheureuse de correction manuelle en modifiant le fichier header.php de notre thème, notre choix s’est porté sur un Plugin, qui semble populaire dans la communauté WordPress : All in One SEO Pack.

La taille de ces modules d’extension nous laisse toujours pantois. Pour un modeste fichier compressé de 13.3 Kilo-octets, All in One SEO Pack ajoute d’importantes fonctionnalités à WordPress !

Après la procédure classique décompression du plugiciel suivie du téléchargement dans le répertoire wp-content/Plugins/ et activation dans l’interface d’administration de WordPress, All in One SEO Pack se gère depuis l’onglet Options grâce au bouton All in One SEO.

L’interface d’administration de All in One SEO Pack permet de choisir l’intitulé, la description et les mots-clés du weblogue. Concernant les titres de format, nous avons choisi de ne pas les modifier. Nous eûmes aimé modifier le champ %date%, mais nous n’avons pas su comment y parvenir. Cet éceuil n’est pas gênant : les dates s’affichent en français, conformément aux options générales déclarées dans WordPress. La date restent toujours sous la forme année, mois, jour, mais la logique, du général au particulier, est respectée. Nous dirons donc qu’il ne s’agit pas d’un bogue, mais d’une fonctionnalité !

Toutefois, nous avons modifié Search Title Format afin qu’il affiche Résultats de la recherche. Lorsque l’option par défaut est laissée en l’état, le titre reprend l’intitulé de la recherche en plaçant en capitales la première lettre de chaque mot, ce qui n’est pas conforme à l’usage en français.

Dans les fenêtres d’édition des articles et des pages est ajoutée une rubrique All in One SEO Pack, qui proposent trois champs : le titre, la description et les mots-clés. Le titre peut-être copié collé avec celui de l’article. La description doit être brève. Quant aux mots-clés, ce champ ne demande pas à être complété ; en effet, All in One SEO Pack complètent automatiquement ce champ avec les catégories et les marques sélectionnées lors de l’édition.

<addendum>

20/03/2008.

Attention… Pour des raisons évidentes (!), les champs titre et description ne doivent pas comporter de guillements, si l’on veut que le Xhtml soit bien formé.

</addendum>

Après l’installation de All in One SEO Pack, la logique commande de modifier la balise title du fichier head.php comme suit :

<?php wp_head(); ?>

Enfin, nous avons lu que, dans les permaliens, accessibles depuis l’onglet Options de WordPress, il était utile de demander une structure basée sur la date et le titre. Cette méthode permet d’éviter une numérotation chaotique des articles ou des pages en cas de suppression !

]]> http://www.iptima.com/2007/09/09/all-in-one-seo-pack/feed/ 0 De l’intérêt des balises li et dd http://www.iptima.com/2007/08/20/de-linteret-des-balises-li-et-dd/ http://www.iptima.com/2007/08/20/de-linteret-des-balises-li-et-dd/#comments Mon, 20 Aug 2007 17:42:16 +0000 Vincent Roulet http://www.iptima.com/?p=47 Dans le cadre du développement de notre thème Xhtml 1.0 strict, nous avons découvert le site Css4Design, entretenu par Bruno Bichet, qui est une source précieuse d’informations francophones.

Ainsi avons-nous appris, grâce à l’article la sidebar à la loupe, comprendre les widgets et déclarer une “WAR” que…

[la] balise li est une des rares balises Html de deuxième niveau avec dd (mise à part le body évidemment) qui accepte tout type de balises en son sein. Il est même possible d’y placer du texte directement sans perdre en conformité. Ce comportement associé au fait qu’on peut justifier l’utilisation d’une liste à partir de deux ou trois élements faisant partie d’une même unité logico-sémantique, explique le succès des listes ul ou ol auprès des intégrateurs Html.

Voilà qui nous permet de savoir comment coder les textes dans nos Widgets WordPress !

<addendum>

21/03/2008.

Malheureusement, WordPress a tendance à texturiser le code lors de la rédaction des articles. Ainsi est-il impossible de placer une liste simple dans une liste de définition : le code Xhtml n’est plus valide.

</addendum>

]]> http://www.iptima.com/2007/08/20/de-linteret-des-balises-li-et-dd/feed/ 0