Ici, avant de poursuivre la lecture, le plus simple consiste à visiter Issuu et à feuilleter les catalogues en ligne, ou à découvrir notre premier catalogue de démonstration : il a été publié en quelques secondes en utilisant les options de base d’Issuu : Salons d’affaire.

D’abord, Issuu se décline sous deux versions, gratuite et payante sous la forme d’une redevance mensuelle de 20 dollars. La version gratuite, que nous allons présenter en détail, oblige à souffrir l’affichage du logotype d’Issuu, plutôt sobre, et de l’ajout d’une barre latérale aux catalogues présentant des publications sur le même sujet. De même, la version gratuite oblige à passer par Issuu pour convertir et publier les documents, mais le processus s’avère rapide, tandis qu’il est possible de rendre privé ses documents. Autrement dit, la version payante n’est pas justifiée, sauf à vouloir commercialiser soi-même les services d’Issuu.

Issuu possède cependant quelques inconvénients, que nous citerons d’emblée pour ne pas avoir à y revenir. Le support technique n’est disponible qu’en anglais et la documentation peut se révéler confuse et aride… d’où l’intérêt du présent article. Les rares textes présent dans les catalogues, notamment sur les icônes, sont écrits en anglais ou en espagnol. Le code à intégrer dans les pages n’est pas valide Xhtml Strict… même si nous avons trouvé le moyen d’y remédier en améliorant la syntaxe proposée. La mention d’Issuu est présente sur les catalogues. Enfin, les Page Flip restent hébergés sur le site d’Issuu, bien que le stockage soit transparent pour le visiteur.

Nous allons d’abord présenter l’insertion et la personnalisation d’un Page Flip, puis sa publication sur une page autonome, c’est-à-dire un site externe, indépendant d’Issuu.

Insertion d’un Page Flip

Avant de télécharger un document sur Issuu, nous vous conseillons de vous inscrire pour gérer vos publications : le questionnaire est rapide à compléter.

Issuu permet de télécharger en ligne les documents…

• Jusque 500 pages et 100 méga-octets.
• Aux formats Pdf (jusqu’à la version 1.5 – au-delà, le document est converti, et le résultat peut être aléatoire), Word (.doc), Powerpoint (.ppt), Open Office (.ods, .odp), WordPerfect (.wpd), Rich Text Format (.rtf), Star Office (.sxi, sxw).
• Avec des images d’une résolution de 150 Dpi maximum (les images d’une taille supérieure sont redimensionnées et les vecteurs simplifiés).
• Avec une mise en page simple (cependant, n’avons pas rencontré d’erreurs avec des documents sophistiqués).

Le guide de conversion des documents sur Issuu donne des renseignements exhaustifs sur ce thème.

Par ailleurs, un sujet sur l’exportation avec Adobe InDesign sur Issuu peut aussi donner des informations utiles.

On peut télécharger un document sur Issuu soit depuis son poste de travail, soit depuis une Url. L’onglet Upload a file permet de télécharger un seul document. L’onglet Upload many files, uniquement disponible pour les utilisateurs enregistrés, permet de télécharger trois documents à la fois en spécifiant leurs Url : cette option plus rapide ne permet donc pas de télécharger plusieurs documents simultanément depuis son ordinateur.

Les renseignements demandés dans la rubrique General Information avec les champs Title, Description… sont obligatoires, mais ne présentent un intérêt que pour permettre l’indexation du contenu dans Issuu et dans les moteurs de recherche. Dès lors, pour une publication autonome c’est-à-dire sur son propre site Internet, cette étape peut être négligée en se contentant des renseignements basiques, car ils sont obligatoires. (Les champs de texte doivent contenir des minuscules ou des chiffres et ne pas contenir d’espaces ou d’accents.) La précision sur le type de document (livre, catalogue, journal…) n’influe pas sur l’apparence du contenu. La rubrique Target your audience ne présente pas non plus d’intérêt. La rubrique Sound permet de préciser un accompagnement sonore (nous n’avons pas testé cette possibilité), qui pourra être reprécisée lors de la publication. En revanche, il faut porter son attention sur Publishing Options et choisir Private pour éviter l’indexation et l’affichage du document dans Issuu. Enfin, la section Sharing options permet d’autoriser les commentaires, les votes et les téléchargements quand les catalogues sont hébergés sur Issuu.

Après conversion, un index est automatiquement créé (les miniatures des pages s’affichent dans le catalogue, par défaut en bas) et, si le document Pdf original embarque des liens hypertextes, ils sont conservés et fonctionnels.

Une fois que le document est téléchargé et traité, nous pouvons travailler à son intégration dans une page Web.

Personnalisation du Page Flip

Issuu propose un outil fabuleux, qui permet de personnaliser à loisir l’interface. Sans entrer dans les détails de son Api, voici quelques renseignements utiles pour une publication.

Lorsque le document est disponible dans l’interface My Library, on peut publier le document. Il suffit de sélectionner le document puis de cliquer sur le bouton Embed, ou d’utiliser le clic droit de la souris sur le document.

La fenêtre modale qui s’ouvre affiche deux extraits de code :

1. le premier permet d’intégrer le catalogue à l’interface personnalisée dans une page externe (Embed code),
2. le second permet d’ajouter un lien vers le catalogue (Link to), qu’il soit hébergé sur Issuu ou sur un autre site (Standalone with Styling), en personnalisant son interface.

Avant de copier l’extrait, l’interface du catalogue doit être choisie :

• affichage ou non des boutons Page Flip (Misc)
• agencement des pages (double, simple, simple de haut en bas) (Layout),
• taille (si on indique une taille personnalisée, attention à respecter les proportions du document) (Size),
• couleur ou thème (Color or theme),
• lancement automatique du feuilletage (Auto Flip),
• page de démarrage du Page Flip (Starting page),
• son (Audio).

Les modifications sont immédiatement répercutées dans l’aperçu en bas de la fenêtre (Preview) et dans les extraits de codes à intégrer en haut de la fenêtre. Aucune procédure d’enregistrement n’est prévue, cet outil servant juste à générer le code nécessaire : ainsi, lorsqu’on a peaufiné la présentation d’un premier document, le même code peut être ré-exploité sans passer par ce formulaire.

Couleurs et thème

La méthode la plus simple consiste à choisir une couleur ou un thème par défaut dans l’interface. Dans cette hypothèse, il n’y aura que la page Html à transférer sur le site : un script présent dans le code appelera les éléments de mise en page depuis Issuu.

L’autre méthode est plus complexe, mais ouvre des perspectives intéressantes : elle consiste à utiliser l’option Custom theme URL. Dans ce cas, il faudra concevoir (ou copier) et transférer le thème sur le serveur : le code appelera ce répertoire pour assurer la mise en page, à l’instar d’une feuille de style externe dans une page Internet classique.

Des échantillons de thèmes pour Issuu peuvent être téléchargés.

Contenu d’un thème

Un thème pour Issuu présente l’arborescence suivante…

1. fichier crossdomain.xml,
2. répertoire issu
   1. sous-répertoire portant le nom du thème (ici, le nom n’a aucune importance, il n’apparaîtra pas)
      1. fichier crossdomain.xml,
      2. fichier layout.xml,
      3. fichier skins.fla ou skins.psd (ou les deux),
      4. fichier skins.swf ou skins.png (ou les deux).

Les fichiers .xml peuvent être manipulés avec n’importe quel éditeur de texte.

Le fichier skins.fla ou skins.psd n’aura évidemment pas besoin d’être transféré sur le site.

Le fichier crossdomain.xml

Les deux fichiers crossdomain.xml permettent d’autoriser son serveur à communiquer avec celui d’Issuu. Ils n’ont pas à être modifiés. Le premier doit être placé à la racine du site, tandis que le second doit être placé dans le sous-répertoire portant le nom du thème.

Le fichier layout.xml

Le fichier layout.xml permet de dessiner l’interface du catalogue.

D’abord, il est possible d’ajouter son propre logotype, comme l’explique l’article sur l’insertion de son propre logo, avec une syntaxe comme :

<object source="http://example.com/images/logo.png" />

Attention, pour les boutons, le fichier permet juste de les déclarer et de placer, non de personnaliser leur apparence (le fichier Flash ou Photoshop permettra de réaliser cette opération). En revanche, les boutons qui s’affichent en mode plein écran ne sont pas paramétrables, semble-t-il. Pour mémoire, les libellés des icônes sont en anglais par défaut, et ne peuvent pas (encore) être traduits.

Voici la liste des boutons et la syntaxe correspondante…

• Indexaction="index" upState="#IndexButton_up" overState="#IndexButton_over"...
• Fullscreenaction="fullScreen" upState="#FullscreenButton_up" overState="#FullscreenButton_over"...
• Viewmodeaction="viewMode" upState="#ViewModeButton_up" overState="#ViewModeButton_over"...
• Previousaction="pagePrevious" upState="#PreviousButton_up" overState="#PreviousButton_over"...
• Printaction="print" upState="#PrintButton_up" overState="#PrintButton_over"...
• Nextaction="pageNext" upState="#NextButton_up" overState="#NextButton_over"...
• Shareaction="share" upState="#ShareButton_up" overState="#ShareButton_over"...

Les boutons diposent de quatre états :

1. upState, avec le suffixe _up,
2. overState, avec le suffixe _over,
3. downState, avec le suffixe _down,
4. disabledState, avec le suffixe _disabled.

Attention au bouton Share : si l’utilisateur y recourt, l’animation s’ouvre dans Issuu.

Le bouton Print n’apparaît que si le catalogue est affiché en mode Single page.

Les boutons peuvent être groupés sur une ligne unique, grâce au conteneur Box.

Le conteneur Canvas permet d’ajouter une image de fond.

Iml permet de mettre en page le catalogue dans layout.xml. Le manuel de référence Iml donne des renseignements exhaustifs.

Voici, à titre d’exemple, quelques éléments de mise en page…

• Positionnement

  <image source="#Logo" left="10" top="20"/>

• Taille

  <image source="#Logo" left="10" top="20" width="200" height="50"/>

• Empilement

  <image source="#Image1" left="10" top="20" depth="1"/>

• Arrière-plan

  <viewer xmlns="http://issuu.com/viewer/1.0" backgroundImage="#TwilightBackground" backgroundPosition="left,center" backgroundRepeat="repeat,noRepeat">

Comme souvent en pareil cas, il ne sert à rien de s’imposer une longue et abstraite lecture des instructions : il vaut mieux s’approprier un fichier d’exemple, et le modifier au fil de l’eau en se reportant au manuel en cas de nécessité.

Dock permet d’indiquer l’emplacement des miniatures, cliquables, du Page Flip.

Peut être également personnalisée l’aspect et l’emplacement de la numérotation des pages.

Enfin, layout.xml doit indiquer la source des boutons…

<!-- Indique qu'un fichier Flash sera utilisé -->
<skin source="skins.swf"/>
<!-- Indique qu'un fichier Bitmap sera utilisé -->
<skin source="skins.png"/>

Le fichier skins.fla

Le fichier skins.fla permet de préciser les couleurs de l’interface et d’autres éléments décoratifs.

Dans Adobe Flash Cs3 Professional, à l’ouverture du document, apparaîssent les boutons et la couleur de l’arrière-plan avec deux calques, Description et Objects. Dans la bibliothèque, ouvrir par exemple le Clip IndexButton_up contenu dans le répertoire IndexButton, qui comprend deux calques : shape et icon. Dans shape, cliquer deux fois sur la forme : la couleur d’arrière-plan s’ouvre et peut être modifiée. Choisissons la couleur #333333. Tous les arrières-plans des boutons avec le suffixe _up se sont mises à jour. Continuer avec les autres boutons, en personnalisant ou non les calques icon, et enfin avec l’arrière-plan du document. Enfin, exportons l’animation.

On peut ajouter d’autres éléments pour parfaire l’animation. Ainsi, le thème Crayon proposé par Issuu comprend, en plus du Clip Background, à la racine de la bibliothèque, les Clips…

• cloud1 (qui comporte quatre images-clés sur les Frames 1, 49, 50 et 98 avec deux interpolations de mouvement),
• cloud2 (qui comporte quatre images-clés sur les Frames 1, 40, 41 et 81 avec deux interpolations de mouvement),
• grass1 (qui comporte quatre images-clés sur les Frames 1, 72, 73 et 146 avec deux interpolations de mouvement),
• grass2 (qui comporte quatre images-clés sur les Frames 1, 80, 81 et 160 avec deux interpolations de mouvement),
• sun (qui comporte quatre images-clés sur les Frames 1, 40, 41 et 80 avec deux interpolations de mouvement.

L’article sur l’usage d’un fichier Flash sur Issuu donne des indications. Le guide de modification des images d’Issuu donne aussi des renseignements sur l’emploi d’un fichier .fla.

Le fichier skins.psd

À défaut d’utiliser Flash, on peut recourir à une image au format Png, gérée par exemple avec Photoshop. Dans ce cas, il suffit de colorier les boutons à sa guise, et d’indiquer les coordonnées des images dans le fichier layout.xml, avec une syntaxe comme :

<skin source="skins.png" type="image"/>
...
<button action="index" upState="#100,50,200,10" overState="#200,50,300,100" downState="#300,50,400,100" disabledState="#400,50,500,100"/>

On se reportera utilement à l’article sur l’usage d’un fichier Bitmap sur Issuu.

Publication du Page Flip

Enfin, il reste à publier notre Page Flip depuis la fenêtre modale.

Si l’on recourt aux couleurs ou thèmes par défaut, il suffit de copier l’extrait de code affiché dans Embed code et de l’insérer à la page Html de son choix. Si l’on utilise son propre thème, après l’avoir transféré sur son serveur dans le répertoire de son choix (qui n’a aucune importance), il convient d’indiquer l’emplacement du fichier layout.xml dans l’option Custom theme URL : l’extrait de code affiché dans Embed code se mettra automatiquement à jour avec les paramètres (la prévisualisation s’actualisera aussi instantanément), qu’il faudra copier dans la page Html de son choix.

Le code fourni par Issuu n’est pas valide au format Xhtml Strict.

Nous donnons le code pour remédier à cet inconvénient, mais cette pratique contrevient aux conditions d’utilisation d’Issuu. De plus, le code corrigé empêche la barre latérale, qui comprend des animations comparables pour promouvoir les services de l’éditeur, de s’afficher.

Code invalide fourni par Issuu…

<object style="width:600px;height:414px" ><param name="movie" value="http://static.issuu.com/webembed/viewers/style1/v1/IssuuViewer.swf?mode=embed&layout=http%3A%2F%2Fskin.issuu.com%2Fv%2Fcolor%2Flayout.xml&backgroundColor=000000&documentId=100403070328-b966961433834cdeb654d98b905e4b01&docName=document&username=user&loadingInfoText=Texte&et=1270974638339&er=9" /><param name="allowfullscreen" value="true"/><param name="menu" value="false"/><embed src="http://static.issuu.com/webembed/viewers/style1/v1/IssuuViewer.swf" type="application/x-shockwave-flash" allowfullscreen="true" menu="false" style="width:600px;height:414px" flashvars="mode=embed&layout=http%3A%2F%2Fskin.issuu.com%2Fv%2Fcolor%2Flayout.xml&backgroundColor=000000&documentId=100403070328-b966961433834cdeb654d98b905e4b01&docName=document&username=user&loadingInfoText=Texte&et=1270974638339&er=9" /></object>

Code valide équivalent (mais sans la barre latérale)…

<object type="application/x-shockwave-flash" width="600" height="414" data="http://static.issuu.com/webembed/viewers/style1/v1/IssuuViewer.swf?mode=embed&layout=http%3A%2F%2Fskin.issuu.com%2Fv%2Fcolor%2Flayout.xml&backgroundColor=000000&documentId=100403070328-b966961433834cdeb654d98b905e4b01&docName=document&username=user&loadingInfoText=Texte&et=1270974638339&er=9">
<param name="movie" value="http://static.issuu.com/webembed/viewers/style1/v1/IssuuViewer.swf?mode=embed&layout=http%3A%2F%2Fskin.issuu.com%2Fv%2Fcolor%2Flayout.xml&backgroundColor=000000&documentId=100403070328-b966961433834cdeb654d98b905e4b01&docName=document&username=user&loadingInfoText=Texte&et=1270974638339&er=9" />
<param name="allowfullscreen" value="true"/>
<param name="menu" value="false"/>
</object>

Notre catalogue final se nomme Hôtel. Nous avons choisi délibérément une interface sobre. Comme nous ne disposions pas d’un logo, nous avons utilisé avec notre subtilité coutumière (!) le symbole @. Le Page Flip se révèle d’une étonnante stabilité. Pourtant, le document Pdf original pèse 2,3 méga-octets et compte 24 pages.

Issuu propose des statistiques détaillées sur la consultation de chaque Page Flip, accessible depuis My Library.

Ajoutons qu’Issuu propose de concevoir des catalogues visualisables sur téléphone mobile. Cette possibilité est, pour l’heure, limitée aux terminaux fonctionnant avec le système d’exploitation Android, mais devrait prochainement être étendue aux iPhone. Pour autant, cette solution impose aux lecteurs de télécharger une application spécifique.

Enfin, Issuu proposent des extensions ou des codes spécifiques pour les principaux Sgc et les sites les plus populaires.

Ces catalogues feuilletables, à l’utilité anecdotique à première vue, peuvent cependant trouver des usages inattendus : site Internet simplifié à l’extrême (pour les graphistes qui ne veulent pas se lancer dans l’apprentissage du multimedia et ne se soucient pas du référencement), curriculum vitæ (s’il compte plus d’une page !)… et, d’une façon générale, documents trop sophistiqués pour être décrits avec Xhtml.

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.

Nous avons discuté récemment avec le fondateur d’un hôtel quatre étoiles… Le site Internet de son établissement a été conçu en Flash, voilà seulement deux ans. Or, en analysant le trafic de son site, l’hôtelier s’est aperçu que les demandes de connexion depuis un Smartphone étaient chaque jour plus nombreuses. Aussi, notre nouvel ami a demandé à une agence de refondre son site afin qu’il soient accessibles à l’ensemble des périphériques.

Nous n’avons pas encore découvert la nouvelle version du site de l’hôtel, mais la solution retenue constituerait un savant mélange de Flash et de Html, optimisé au passage pour le référencement ! Nous n’osons imaginer le résultat : faudra-t-il naviguer de page en page pour recharger à chaque fois une animation en Flash ou voir un contenu plus statique dédié aux périphériques de poches ?

Ne serait-il pas préférable de laisser en place l’existant, avec une animation qui fonctionne plutôt bien, pour les ordinateurs classiques ? Une animation en Flash sophistiquée peut demander un investissement lourd : il serait dommage de jeter le bébé avec l’eau du bain ! Aussi ne vaut-il pas mieux servir un contenu alternatif et allégé pour les Smartphones : lors de la demande de connexion, le navigateur est reconnu et redirigé vers la version classique ou simplifiée du site.

Nous ne sommes pas un détracteur de Flash (mais de Silverlight oui, pâle copie inutile et encombrante), car il faut reconnaître que cette technologie présente des avantages pour certains types de contenus… (Nous écrivons certains, car nous avons découvert récemment une pizzeria, dont le site au modeste contenu est exclusivement accessible avec Flash ! Aussi avons-nous dû télécharger l’application sur notre modeste Netbook pour lire la carte : combien de clients perd cet établissement qui livre à domicile ?) D’abord, l’animation est téléchargée une fois pour toutes permettant, après une attente raisonnable, une navigation fluide et interactive. Ensuite, Flash permet au pixel ou à la seconde près d’appeler un élément graphique ou sonore.

Cependant, un site en Flash devrait toujours demander l’adhésion (Opt-in) du visiteur, avec un éventuel préchargement de l’animation en tâche de fond : certaines animations, au fond sonore inattendu, peuvent être éprouvantes lors de l’accès à la page Web. Si le visiteur n’adhère pas (ou ne dispose pas ou ne veut pas du lecteur), il faut alors lui proposer un contenu alternatif, qui pourra être alors le même que celui servi pour les téléphones mobiles.

(Il semble qu’un lecteur Flash pour périphériques mobiles soit bientôt disponible. Gageons que, avec la mésentente entre constructeurs et éditeurs et une bande passante disponible de plus en plus réduite, la solution mettra du temps à s’implanter ! Le recours intégral à cette technologie sera-t-il, d’ailleurs, souhaitable, ou faudra-t-il considérer que les animations viendront uniquement agrémenter le contenu ?)

Servir un contenu alternatif peut aussi (et surtout) constituer l’occasion d’améliorer sa visibilité dans les moteurs de recherche, et, par exemple, d’obvier aux difficultés de référencement de contenu plus dynamique comme les animations écrites en Flash ou les pages au format Pdf (Google en a néanmoins considérablement amélioré le référencement, au cours de ces derniers mois).

Naturellement, ce contenu sera sémantique, car les moteurs de recherche aiment l’accessibilité. Pour y parvenir, il suffit d’appliquer quelques règles simples :

• hiérarchiser l’information en utilisant les niveaux de titre (de h1 à h6, du plus important ou moins important) ;
• utiliser avec prudence l’emphase ;
• légender les images, lorsque leur contenu est significatif ;
• choisir avec soin le titre des pages, leur description et leur mots clef ;
• optimiser la navigation ;
• s’assurer de la compliance du code aux normes définies par le W3c.

Sur le plan graphique, la feuille de style permettra ensuite le formatage du site, et autorisera d’afficher un titre de deuxième niveau avec des caractères plus gros que ceux d’un titre de premier niveau ou de supprimer l’emphase sur certains mots-clef (il ne s’agit en aucun de contenu caché ou de Cloacking).

Pour vérifier la compliance d’un site à ces pratiques, il suffit d’utiliser un navigateur en mode texte, comme Lynx : on verra le rendu qui apparaîtra pour les moteurs de recherche. Dans un deuxième temps, le contenu sera validé par W3C mobileOK Checker.

Enfin, pourquoi ne pas demander aux moteurs de recherche de ne référencer que le contenu alternatif, par exemple avec un fichier robots.txt ?

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 :

• Opera Mini Demo,
• dotMobi.

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 abbr: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.

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.

Aussi préférons-nous colorer nos liens hypertextes. Le lecteur distingue instantanément la différence, sans être gêné dans dans le fil de la lecture.

Cependant, si nous décidons d’utiliser la couleur verte dans nos titres en incluant un lien hypertexte en rouge, le résultat ne sera pas fort heureux ! De même, si nous colorons les citations en bleu, un lien hypertexte s’y affichera en rouge… Comment y remédier ? Css permet aisément de répondre au problème et de contextualiser les hyperliens.

D’abord, déclarons la couleur de nos liens hypertextes pour l’ensemble du document…

a {
  color: red;
  text-decoration: none
}


Ensuite, déclarons la couleur de nos titres…

h1, h2, h3, h4, h5, h6 {
  color: green
}


Enfin, déclarons la couleur de nos citations…

blockquote, cite, q {
  color: blue
}


Faute d’avoir trouvé une solution plus congruente, nous avons décidé que les hyperliens contenus dans un titre ou une citation auraient la même couleur que le titre ou la citation, c’est-à-dire son parent. En revanche, ils seront soulignés pour être identifiables.

Le soulignement peut sembler discutable. On pourrait s’en passer pour des raisons visuelles, sachant que les liens conserveront leur valeur sémantique. Cependant, il nous semble dommage de priver le lecteur d’une information accessible, d’autant que cette contextualisation s’applique à des portions courtes de texte.

Ainsi…

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
  border-bottom: 1px green solid; /* Nous préférons déclarer une bordure qu'un soulignement automatique dont le rendu est souvent trop proche du texte */
  color: green;
  text-decoration: none
}
blockquote a, cite a, q a {
  border-bottom: 1px blue solid;
  color: blue;
  text-decoration: none;
}


Sur ce principe, nous pouvons décliner à loisir l’apparence des hyperliens dans notre feuille de style.

Nous n’avons pas encore présenté les pseudo-classes link, visited, hover, active (LoVe HAte est un moyen mnémotechnique pour les retenir) : elles doivent être écrites dans cet ordre pour qu’elles fonctionnent, mais ne doivent pas forcément se suivre… contrairement à une opinion répandue ! Elles sont fort simples à utiliser…

a:link { /* apparence des liens actifs */
  color: green;
  text-decoration: none
}
a:visited { /* apparence des liens visités */
  color: yellow;
  text-decoration: none
}
a:hover { /* apparence des liens lors du survol avec la souris */
  border-bottom: 1px green solid;
  color: green;
  text-decoration: none;
}
a:active { /* apparence des liens lors du clic de la souris */
  color: green;
  text-decoration: none
}


Il suffit ensuite d’appliquer ces pseudo-classes une à une sur les éléments à personnaliser.

De la même façon, pouvons-nous personnaliser l’apparence de la balise acronym ou abbr (en Html 5, seule est valide la syntaxe abbr) selon le contexte, par exemple dans les titres…

h2 acronym, h2 abbr, h3 acronym, h3 abbr, h4 acronym, h4 abbr, h5 acronym, h5 abbr, h6 acronym, h6 abbr {
  border-bottom: 1px #green dotted;
  cursor: help
}


Voici un exemple tiré d’une feuille de style que nous utilisons en production.

a:link {
/* Cette feuille de style gagnerait à être simplifiée, mais elle est didactique */
  color: #770010;
  text-decoration: none
}
a:visited {
  color: #607800;
  text-decoration: none
}
a:hover {
  border-bottom: 1px #770010 solid;
  color: #770010;
  text-decoration: none
}
a:active {
  color: #770010;
  text-decoration: none
}
/****** Titres ******/
h1, h2, h3, h4, h5, h6 {
/* Couleur par défaut des titres */
  color: #607800
}
h1 a:link, h2 a:link, h3 a:link, h4 a:link, h5 a:link, h6 a:link {
/* Liens actifs dans les titres */
/* Exemple. <h2><a href="http://www.idtgv.fr/" title ="aller sur le site Interactif Détente Tgv (s'ouvre dans une nouvelle fenêtre)\">iDTGV</a></h2> */
  border-bottom: 1px #607800 solid;
  color: #607800;
  text-decoration: none
}
h1 a:visited, h2 a:visited, h3 a:visited, h4 a:visited , h5 a:visited , h6 a:visited {
/* Liens visités dans les titres */
  border-bottom: 1px #607800 solid;
  color: #607800;
  text-decoration: none
}
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover {
/* Liens visités lors du survol avec la souris dans les titres */
  border-bottom: 1px #770010 solid;
  color: #770010;
  text-decoration: none
}
h2 a:active, h3 a:active, h4 a:active, h5 a:active, h6 a:active {
/* Liens lors du clic de la souris dans les titres */
  border-bottom: 1px #607800 solid;
  color: #607800;
  text-decoration: none
}
h2.post_title a:link, h2.post_title a:visited, h2.post_title a:hover, h2.post_title a:active, h3.post_title a:link, h3.post_title a:visited, h3.post_title a:hover, h3.post_title a:active {
/* Liens dans les titres d'articles */
  border-bottom: none;
  color: #770010;
  text-decoration: none
}
h2.page_title a:link, h2.page_title a:visited, h2.page_title a:hover, h2.page_title a:focus, h2.page_title a:active {
/* Liens dans les titres d'articles */
  border-bottom: none;
  color: #770010;
  text-decoration: none
}
h1 acronym, h1 abbr, h2 acronym, h2 abbr, h3 acronym, h3 abbr, h4 acronym, h4 abbr, h5 acronym, h5 abbr, h6 acronym, h6 abbr {
/* Acronymes et abbréviations dans les titres */
/* Exemple. <h2><abbr title="Interactif Détente Tgv">iDTGV</acronym></h2> */
  border-bottom: 1px #607800 dotted;
  cursor: help
}
/****** Citations ******/
cite, q {
  color: #333333;
  font-style: normal;
  font-weight: 600 /* par défaut, la valeur 'bold' vaut 700 et 'normal' vaut 500
}
blockquote {
  color: #333333;
  font-style: normal;
  font-weight: 600;
  margin: 0 10px
}
h1 q, h2 q, h3 q, h4 q, h5 q, h6 q, h1 cite, h2 cite, h3 cite, h4 cite, h5 cite, h6 cite {
/* Citations dans les titres */
/* Exemple. <h2><q>Dormir nuit</q> déclare le marchand de sable</h2> */
  color: #607800;
  font-style: italic
}
blockquote a:link, cite a:link, q a:link {
/* Liens actifs dans les citations */
/* Exemple. <p><q>Je consulte fréquemment le site <a href="http://www.sncf.com/" title ="aller sur le site de la Société Nationale des Chemins de Fer Français">Sncf</a>.</q></p>*/
  border-bottom: 1px #333333 solid;
  color: #333333;
  font-style: normal;
  text-decoration: none
}
blockquote a:visited, cite a:visited, q a:visited {
/* Liens visités dans les citations */
  border-bottom: 1px #333333 solid;
  color: #333333;
  font-style: normal;
  text-decoration: none
}
blockquote a:hover, cite a:hover, q a:hover {
/* Liens lors du survol avec la souris dans les citations */
  border-bottom: 1px #333333 solid;
  color: #333333;
  font-style: normal;
  text-decoration: none
}
blockquote a:active, cite a:active, q a:active {
/* Liens lors du clic de la sourisdans les citations */
  border-bottom: 1px #333333 solid;
  color: #333333;
  font-style: normal;
  text-decoration: none
}
blockquote em a:link, cite em a:link, q em a:link {
/* Liens actifs dans les citations lorsque le texte est écrit avec emphase, c'est-à-dire en italique */
/* Exemple. <p><q><em>Voyager avec la <a href="http://www.sncf.com/" title ="aller sur le site de la Société Nationale des Chemins de Fer Français">Sncf</a> ou <a href="http://www.airfrance.fr/" title ="aller sur le site d'Air France (s'ouvre dans une nouvelle fenêtre)">Air France</a></em> est une question récurrente</q>, explique-t-il.</p> */
  border-bottom: 1px #333333 solid;
  color: #333333;
  font-style: italic;
  text-decoration: none
}
blockquote em a:visited, cite em a:visited, q em a:visited {
/* Liens visités dans les citations lorsque le texte est écrit avec emphase, c'est-à-dire en italique */
  border-bottom: 1px #333333 solid;
  color: #333333;
  font-style: italic;
  text-decoration: none
}
blockquote em a:hover, cite em a:hover, q em a:hover {
/* Liens lors du survol avec la souris dans les citations lorsque le texte est écrit avec emphase, c'est-à-dire en italique */
  border-bottom: 1px #333333 solid;
  color: #333333;
  font-style: italic
}
blockquote em a:active, cite em a:active, q em a:active {
/* Liens lors du clic de la souris dans les citations lorsque le texte est écrit avec emphase, c'est-à-dire en italique */
  border-bottom: 1px #333333 solid;
  color: #333333;
  font-style: italic
}
blockquote cite, q cite {
/* Citation courte incluse à une citation longue */
  font-style: italic;
  font-weight: bold
}
/****** Acronymes et abréviations ******/
acronym, abbr {
  border-bottom: 1px #000000 dotted;
  cursor: help
}
blockquote acronym, blockquote abbr, cite acronym, cite abbr, q acronym, q abbr {
/* Acronyme ou abréviation incluse à une citation */
/* Exemple. <p><q>Le <abbr title="Train à Grande Vitesse">Tgv</acronym> reste moins rapide que l'avion.</q></p> */
  border-bottom: 1px #333333 dotted;
  cursor: help;
  font-style: normal
}
em acronym, em abbr {
/* Acronyme ou abréviation incluse à une citation lorsque le texte est écrit avec emphase, c'est-à-dire en italique */
/* Exemple. <p><em>Le <abbr title="Train à Grande Vitesse">Tgv</acronym> est-il aussi rapide que l'avion ?</em>, se demande-t-il.</p> */
  border-bottom: 1px #333333 dotted;
  cursor: help;
  font-style: italic
}
blockquote em acronym, blockquote em abbr, cite em acronym, cite em abbr, q em acronym, q em abbr {
/* Acronyme ou abréviation lorsque le texte est écrit avec emphase, c'est-à-dire en italique */
/* Exemple. <p><q>La plupart des voyageurs se demande <em>le <abbr title="Train à Grande Vitesse">Tgv</acronym> est-il moins rapide que l'avion ?</em>.</q>, explique-t-il.</p> */
  border-bottom: 1px #333333 dotted;
  cursor: help;
  font-style: italic
}


Les possibilités de varier le style sont infinies, même s’il est difficile de prévoir l’ensemble des cas lors de l’écriture de la feuille de style.

Le principe de la personnalisation des liens hypertextes est facile à transposer avec d’autres attributs.

À ce propos, et le concept n’est pas facile à comprendre pour les débutants, les feuilles de style en cascade ne constituent pas une juxtaposition de règles hétéroclites définissant chaque élement d’une page Web. Par cascade, il faut comprendre factorisation : chaque règle suit la précédente (c’est le principe de l’héritage entre parent et enfants) ou l’infirme.

Aussi faut-il ne pas oublier de refléter l’arbre logique du document dans l’écriture des styles, en respectant l’ordre d’apparition des éléments dans la page, c’est-à-dire leur héritage, de gauche à droite.

Ainsi, si nous voulons supprimer les puces devant chaque liste du document, nous écrirons…

li {
  list-style-type: none


Partant de cette règle, nous pouvons toutefois ajouter des puces devant un élément particulier, par exemple dans le conteneur post, en écrivant :

.post li {
  list-style-type: square


Ici, il faut peser avec soin l’intérêt d’une règle générale : il est contre-productif de déclarer la suppression des puces dans l’ensemble du document pour les ajouter ensuite à chaque élément ! Cependant, la redondance peut présenter l’avantage de simplifier la lecture et la maintenance du code.

Enfin, il est encore plus simple pour maintenir une feuille de style de regrouper les attributs par sélecteurs : couleurs, bordures, alignements, polices de caractères… Ainsi, si l’on souhaite changer une couleur, elle s’appliquera instantanément à tous les attributs concernés, grâce à cette explosion. La ré-écriture d’une feuille de style sous cette forme est fastidieuse, mais elle permet ensuite de gagner du temps.

Voici un problème relativement simple à formuler, mais dont la solution ne saute pas aux yeux. Après avoir parcouru en vain les arcanes du Web francophone puis anglophone, nous avons développé notre propre technique, que nous présentons ici.

Nota. Dans notre présentation, par commodité, O désignera une image, tandis que X désignera une espace. (C’est notre modeste contribution à l’Ascii Art !) Nous partirons aussi du postulat qu’une galerie correspond à des images de petites tailles alignées les unes avec les autres sur une page, dont leur largeur (et, idéalement, leur hauteur !) est équivalente.

Ainsi, pour cinq images, l’affichage sur une colonne s’effectue ainsi…

OXOXOXOXO

Pour les images restantes, le navigateur renvoie logiquement, sauf instruction contraire, les images restantes les unes à la suite des autres…

S’il reste quatre images…

OXOXOXOXX

S’il reste trois images…

OXOXOXXXX

S’il reste deux images…

OXOXXXXXX

S’il reste une image…

OXXXXXXXX

Or, ce résultat ne nous semble pas satisfaisant sur le plan visuel, car nous avons une fâcheuse tendance à cultiver la symétrie (… qui peut expliquer certains choix esthétiques… étonnants !).

Nous voulons obtenir l’affichage suivant…

S’il reste quatre images…

XOXOXOXOX

S’il reste trois images…

XXOXOXOXX

S’il reste deux images…

XXXOXOXXX

S’il reste une image…

XXXXOXXXX

Ainsi l’affichage nous semblera harmonieux, puisque les espaces seront équilibrés. Il ressemblera à :

OXOXOXOXO
XOXOXOXOX
XXOXOXOXX
XXXOXOXXX
XXXXOXXXX

Autrement posé, il s’agit de styler différemment les lignes complètes et la ligne incomplète, orpheline.

Aussi allons-nous motoriser les images. Nous utilisons Php, mais le raisonnement peut être transposé à d’autres langages de programmation.

Programmons les images

Retournons à l’école pour un raisonnement arithmétique simple… Le nombre d’images à afficher (inconnu à l’avance – sinon, l’effort serait inutile !) est-il divisible par 3, dans l’ensemble des nombres entiers Z ? Dans l’affirmative, des lignes pleines s’afficheront. Dans la négative, quel sera le reste de la division ? 2 ou 1.

Ainsi…

• … pour 58 images, 58/3 = 19 images, reste 1 image ;
• … pour 104 images, 104/3 = 34 images, restent 2 images.

(Pour une ligne de cinq images, le même raisonnement conduirait à avoir cinq cas possibles.)

Voici un exemple de code…

<?php
$images = array('paris.jpg', 'marseille.jpg', 'lyon.jpg', 'lille.jpg', 'strasbourg.jpg');
$result = count($images);
$target = 3;
/* La "cible" (c'est-à-dire une ligne "pleine") est de trois images */
$orphans = fmod($result, $target); // "orphans" comme "orphelines"
/* 'fmod' retourne le reste d'une division */
$total = ($result - $orphans); // "total" pour une ligne pleine
foreach($images as $key => $image)
/* Nous utilisons la deuxième forme d'une boucle 'foreach' qui permet d'utiliser la valeur $key utile dans les calculs. */
{
  if (($key + 1) <= $total) // Pour trois images
/* La valeur + 1 permet d'éviter que le résultat soit égal à zéro à la fin de la boucle. Nous aurions pu assigner la valeur au début des instructions... pour ne pas avoir à la ré-écrire ensuite dans les deux conditions suivantes ! Tant que le total n'est pas dépassé, l'instruction s'applique. */
    {
      echo '<dl class="gallery_c">'; // On créée la liste de définition "gallery_c" (voir ci-dessous)
    }
  else
    {
    if ((($key + 1) > $total) && ($orphans == 2)) // Pour deux images
/* La première condition permet de vérifier que le total est dépassé. S'il ne reste plus de lignes pleines et que le nombre d'images restantes est de deux, l'instruction s'applique. */
      {
        echo '<dl class="gallery_b">'; // On créée la liste de définition "gallery_b", (voir ci-dessous)
      }
    if ((($key + 1) > $total) && ($orphans == 1)) // Pour une image
/* La première condition permet de vérifier que le total est dépassé. S'il ne reste plus de lignes pleines et que le nombre d'image restante est de une, l'instruction s'applique. */
      {
        echo '<dl class="gallery_a">'; // On créée la liste de définition "gallery_a" (voir ci-dessous)
      }
  }
  echo $image;
/* La boucle 'foreach' affiche ensuite chaque image tour à tour. */
  echo '</dl>'; // On ferme la liste de définitions
}
?>

Ou sans les commentaires…

<?php
$images = array('paris.jpg', 'marseille.jpg', 'lyon.jpg', 'lille.jpg', 'strasbourg.jpg');
$result = count($images);
$target = 3;
$orphans = fmod($result, $target);
$total = ($result - $orphans);
foreach($images as $key => $image)
{
  if (($key + 1) <= $total)
    {
      echo '<dl class="gallery_c">';
    }
  else
    {
    if ((($key + 1) > $total) && ($orphans == 2))
      {
      echo '<dl class="gallery_b">';
    }
      }
    if ((($key + 1) > $total) && ($orphans == 1))
      {
        echo '<dl class="gallery_a">';
      }
  }
  echo $image;
  echo '</dl>';
}
?>

Les images ont été placées dans un tableau à titre didactique. Naturellement, en production, il faudra recourir à une méthode plus simple.

C’est pourquoi, nous présentons le code utilisé avec WordPress, mais qui peut être utilisé dans n’importe quel environnement…

<?php
$gallery_bottom = get_post_meta($post->ID, 'gallery_bottom', false);
/* Avec WordPress, 'get_post_meta' permet de récupérer le(s) enregistrements correspondant dans une table MySql. Ensuite, on retrouve l'interaction habituelle entre Php et MySql. Les enregistrements des images sont enregistrées dans une table sous la forme : source, titre, légende (optionnel), Copyright (optionnel)...
http://www.monsite.com/uploads/france.jpg,france,photo de la France,© Wikimedia Commons
http://www.monsite.com/uploads/suisse.jpg,suisse,photo de la Suisse,© Wikimedia Commons
http://www.monsite.com/uploads/portugal.jpg,portugal,photo du Portugal,© Wikimedia Commons
http://www.monsite.com/uploads/danemark.jpg,danemark,photo du Danemark,© Wikimedia Commons
*/
if ($gallery_bottom)
{
  $resulttgb = count($gallery_bottom); // "tgb" comme "Temporary Gallery Bottom" pour individualiser le processus
  $targettgb = 3;
  $orphanstgb = fmod($resulttgb, $targettgb);
  $totaltgb = ($resulttgb - $orphanstgb);
  foreach($gallery_bottom as $key => $tgb)
  {
    list($fulltgb, $alttgb, $txtatgb, $txtbtgb) = explode(",", $tgb);
    /* On coupe la chaîne en segments pour récupérer chaque élément. */
    $extfull = array(".jpg", ".jpeg", ".png", ".gif");
    $extthumb = array("-100x100.jpg", "-100x100.jpeg", "-100x100.png", "-100x100.gif");
    /* Chaque élément est remplacé dans l'ordre des deux tableaux. On convertit le nom de l'image pour afficher le nom de sa vignette, et éviter une double saisie de l'utilisateur. Naturellement, les images "-100x100.jpg" sont déjà stockées ! Ainsi, 'france.jpg' devient 'france-100x100.jpg'. */
    $srctgb = str_ireplace($extfull, $extthumb, $fulltgb);
    /* 'str_ireplace' n'est pas sensible à la casse, et permet, par exemple, de transformer ".GIF" en ".gif". */
    {
      if (($key + 1) <= $totaltgb)
      {
        echo '<dl class="gallery_c">';
      }
      else
      {
        if ((($key + 1) > $totaltgb) && ($orphanstgb == 2))
        {
          echo '<dl class="gallery_b">';
        }
        if ((($key + 1) > $totaltgb) && ($orphanstgb == 1))
        {
          echo '<dl class="gallery_a">';
        }
      }
      echo '<dt><a href="'.$fulltgb.'" title="'.$alttgb.'"><img src="'.$srctgb.'" alt="'.$alttgb.'" title="'.$alttgb.'" /></a></dt>';
      /* On concatène chaque élément récupéré tout à l'heure avec 'explode' dans une chaîne Html pour provoquer l'affichage de la vignette et du lien vers l'image. Par commodité, on utilise la même valeur pour les champs 'alt' et 'title'.*/
      if ($txtatgb) // Puisque le champ est optionnel
      {
        echo '<dd>'.$txtatgb.'</dd>';
      }
      if ($txtbtgb) // Puisque le champ est optionnel
      {
        echo '<dd>'.$txtbtgb.'</dd>';
      }
      echo '</dl>';
    }
  }
  echo '<div class="spacer"></div>'; // Pour éviter le flottement d'un élément adjacent avec la propriété Css 'clear: both;' chère à Mark Newhouse
}
?>

Ou sans les commentaires…

<?php
$gallery_bottom = get_post_meta($post->ID, 'gallery_bottom', false);
if ($gallery_bottom)
{
  $resulttgb = count($gallery_bottom);
  $targettgb = 3;
  $orphanstgb = fmod($resulttgb, $targettgb);
  $totaltgb = ($resulttgb - $orphanstgb);
  foreach($gallery_bottom as $key => $tgb)
  {
     list($fulltgb, $alttgb, $txtatgb, $txtbtgb) = explode(",", $tgb);
    $extfull = array(".jpg", ".jpeg", ".png", ".gif");
    $extthumb = array("-100x100.jpg", "-100x100.jpeg",     "-100x100.png", "-100x100.gif");
    $srctgb = str_ireplace($extfull, $extthumb, $fulltgb);
    {
      if (($key + 1) <= $totaltgb)
      {
        echo '<dl class="gallery_c">';
      }
      else
      {
        if ((($key + 1) > $totaltgb) && ($orphanstgb == 2))
        {
          echo '<dl class="gallery_b">';
        }
        if ((($key + 1) > $totaltgb) && ($orphanstgb == 1))
        {
          echo '<dl class="gallery_a">';
        }
      }
      echo '<dt><a href="'.$fulltgb.'" title="'.$alttgb.'"><img src="'.$srctgb.'" alt="'.$alttgb.'" title="'.$alttgb.'" /></a></dt>';
      if ($txtatgb)
      {
        echo '<dd>'.$txtatgb.'</dd>';
      }
      if ($txtbtgb)
      {
        echo '<dd>'.$txtbtgb.'</dd>';
      }
        echo '</dl>';
      }
 }
 echo '<div class="spacer"></div>';
}
?>

Nota. Depuis que WordPress intègre la gestion des vignettes, nous n’utilisons plus les champs personnalisés !

Stylons les images

Nous avons utilisé les listes de définition pour afficher les images. La structure de ces listes est commode, grâce à l’attribut <dd>, optionnel, qui permet ou non d’ajouter une légende, en restant compatible Xhtml Strict. Un exemple d’utilisation est donné dans l’excellent article Les listes de définitions : mal utilisées ou mal comprises ?

Si une ligne est complète, c’est-à-dire comporte trois images, l’attribut gallery_c est utilisé pour les images. Si une ligne est incomplète et comporte deux images, l’attribut gallery_b est utilisé pour les images. Si une ligne est incomplète et comporte une image, l’attribut gallery_c est utilisé pour l’image.

dl.gallery_a, dl.gallery_b {
  float: left /* Inutile de provoquer le flottement de la dernière galerie, puisqu'il n'y a qu'une image ! */
}
dl.gallery_a dt, dl.gallery_b dt, dl.gallery_c dt, dl.gallery_a dd, dl.gallery_b dd, dl.gallery_c dd {
  text-align: center
}
dl.gallery_a dd, dl.gallery_b dd, dl.gallery_c dd {
  font-weight: bold
}
dl.gallery_a {
  width: 33.33% /* Nous fûmes longtemps persuadé que la version 5.5 d'Internet Explorer interprétait mal les décimales, à tort ! */
}
dl.gallery_b {
  width: 50%
}
dl.gallery_c {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 100%
}


Avec les largeurs fixes, il devient plus délicat d’aligner correctement les images, et le code est nettement moins élégant.

Ainsi, soit une feuille de style qui comporte les propriétés suivantes, sachant que la largeur du conteneur est de 625 pixels et celle d’une image est de 129 pixels avec ses bordures et ses marges…

dl.gallery_a, dl.gallery_b, dl.gallery_c {
  float: left
}
dl.gallery_a {
  margin: 15px 248px /* 248 pixels + 129 pixels + 248 pixels = 625 pixels */
}
dl.gallery_b {
  margin: 15px 91px /* 91 pixels + 129 pixels + 91 pixels + 91 pixels + 129 pixels + 91 pixels = 622 pixels - on doit se contenter de cette approximation - 91 pixels + 91 pixels, puisque les marges se juxtaposent */
}
dl.gallery_c {
  margin: 15px 39px; /* 39 pixels + 129 pixels + 39 pixels + 39 pixels + 129 pixels + 39 pixels + 39 pixels + 129 pixels + 39 pixels = 621 pixels - on doit se contenter de cette approximation - 39 pixels + 39 pixels, puisque les marges se juxtaposent */
}


Nota. Pour déterminer facilement, la largeur des espaces entre les images, il suffit d’appliquer le calcul :

(((largeur du conteneur ou de la page - (nombre d'images x largeur de chaque image))/((nombre d'images + 1) x 2)))

Par exemple, la largeur d’un conteneur est de 618 pixels (cette valeur simple est arbitraire !). Nous voulons y placer trois images de 150 pixels.

• Largeur du conteneur ou de la page : 618 pixels.
• Nombre d’images : 3.
• Largeur de chaque image : 150 pixels.
• 150 pixels x 3 images = 450 pixels.
• Nombre d’espaces nécessaires : 3 images + 1.
• Soient (((618 – (3 x 150))/((3 + 1) x 2))) = 21.
• Soient (((618 pixels – (3 images x 150 pixels))/((3 espaces + 1) x 2))) = 21 pixels.

Nous avons utilisé des listes de définitions pour centrer nos images, mais notre solution peut s’adapter à d’autres types de balises et de contenu.

• 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.

Lors de nos débuts avec WordPress, nous avions essayé divers plugicels, comme Image Manager ou Nextgen Gallery, mais ces solutions semblaient lourdes à mettre en œuvre au quotidien. Aussi avions-nous décidé de nous passer d’images dans nos articles, d’autant que la production de photographies est coûteuse… à moins de les voler !

Or, voilà quelques jours, nous avons décidé de réaliser pour un photographe amateur un Photoblog sous WordPress. Comme nous détestons la facilité (!), nous avons décidé de ne pas recourir à une solution prête à l’emploi… Nous ne mesurions pas l’ampleur de la tâche !

Nous ne nous appesantirons pas ici sur la mise au point, somme toute complexe, du thème. En revanche, nous détaillerons comment gérer spécifiquement les images dans un thème. Le processus passe par :

• la modification de la feuille de style,
• l’ajout de fichiers spécifiques au thème,
• l’ajout d’une extension pour gérer correctement, sur le plan de l’affichage comme de la sémantique, les galeries,
• la syntaxe permettant de gérer les images.

Modification de la feuille de style

Le code permettant de gérer l’affichage des images dans un thème est largement diffusé. Pour mémoire, la syntaxe standard (mais dont la syntaxe Css est invalide !) à incorporer dans la feuille de style est :

/*-------------Images-----------------*/
p img {
  padding: 0;
  max-width: 100%
}
img.centered {
  display: block;
  margin-left: auto;
  margin-right: auto
}
img.alignright {
  padding: 4px;
  margin: 0 0 2px 7px;
  display: inline
}
img.alignleft {
  padding: 4px;
  margin: 0 7px 2px 0;
  display: inline
}
.alignright {
  float: right
}
.alignleft {
  float: left
}
/* Begin Images */
p img {
  padding: 0;
  max-width: 100%
}
img.centered {
  display: block;
  margin-left: auto;
  margin-right: auto
}
img.alignright {
  padding: 4px;
  margin: 0 0 2px 7px;
  display: inline
}
img.alignleft {
  padding: 4px;
  margin: 0 7px 2px 0;
  display: inline
}
.alignright {
  float: right
}
.alignleft {
  float: left
}
/* End Images */
/* Captions */
.aligncenter, div.aligncenter {
  display: block;
  margin-left: auto;
  margin-right: auto
}
.wp-caption {
  border: 1px solid #ddd;
  text-align: center;
  background-color: #f3f3f3;
  color: #000;/**/
  padding-top: 4px;
  margin: 10px;
  -moz-border-radius: 3px;
  -khtml-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px
}
.wp-caption img {
  margin: 0;
  padding: 0;
  border: 0 none
}
.wp-caption p.wp-caption-text {
  font-size: 11px;
  line-height: 17px;
  padding: 0 4px 5px;
  margin: 0
/* End captions */


En dépit de ce formatage, nous nous retrouvions avec un bogue : lorsque l’image d’un article était située après le texte, avec un alignement à gauche ou à droite, elle chevauchait les méta données gérées par la classe postemetada ainsi que l’article suivant. Eurêka ! Il suffisait d’appliquer un spacer, doté de la propriété clear, pour empêcher l’image d’être adjacente. En d’autres termes, il fallait écrire :

.postmetadata {
  clear: both


Ajout de fichiers spécifiques

Trois fichiers permettent de gérer les images dans un thème :

• image.php.
• attachment.php,
• index.php.

Dans la hiérarchie des modèles, WordPress va d’abord utiliser image.php, puis attachment.php et enfin index.php.

Faute d’avoir trouvé la documentation nécessaire, y compris en anglais, nous sommes parti de la dernière version de Kubrick pour ajouter et personnaliser les deux fichiers en fonction des caractéristiques de notre thème. : cette opération est plus fastidieuse que complexe et nous ne la détaillerons pas.

Emmanuel Gorgeon a écrit un article théorique fort intéressant sur la gestion des pièces jointes par WordPress.

Dans le fichier functions.php du thème, on peut limiter la taille des images à téléverser avec cette syntaxe :

<?php
// Uploads
$GLOBALS['content_width'] = 640;
?>

Ajouts d’une extension pour gérer une galerie

Nous nous sommes ensuite intéressé à l’ajout d’une galerie d’images dans un article… Nous avons été surpris : WordPress se présente comme un Sgc nativement respectueux des standards, mais l’affichage d’une galerie rend la page non valide Xhtml Strict !

Cependant, nous avons déniché une extension écrite par le célèbre Justin Tadlock, Cleaner WordPress Gallery Plugin. Ce plugiciel, d’une taille colossale de 3 Kilo-octets (!), permet d’afficher une galerie Xhtml Strict et d’ajouter un effet Lightbox (ou Slimbox) à ces images.

Il est surprenant que cette fonctionnalité ne soit pas incluse dans WordPress par défaut.

Syntaxe pour gérer les images

Il existe une syntaxe spécifique pour gérer les images, sous forme de code abrégée (shortcode pour les anglicistes !), comme l’enseigne le Codex. Les exemples présentés sont nombreux et devraient convenir aux novices comme aux chevronnés.

15/09/2009.

Nous laissons cet article en l’état cet article, pour mémoire : à l’usage, les services de 000webhost constituent une anarque, et fonctionnent plutôt mal, mais ils sont idéals pour héberger des sites expérimentaux ou poubelles. En cas de problème, les services payants de Hosting24 sont proposés, mais il ne valent guère mieux. Autant être prévenu !

</addendum>

Avec 000webhost, nous pensons avoir trouvé l’hébergeur idéal :

• 350 Mega-octets d’espace disque,
• 100 Giga-octets de bande passante,
• Php et MySql en version 5,
• activation immédiate du compte, y compris de l’accès Ftp et de la base MySql,
• hébergement en nom de domaine, ou en sous domaine avec une adresse comme http://chezmoi.site40.net,
• installation en un clic des plates-formes de weblogue (WordPress, Nucleus, b2evolution…), de Sgc (Drupal, Joomla, Typo3…) et cetera pour les moins chevronnés,
• haute disponibilité,
• sans publicité,
• serveur de mel,
• gratuit.

Autrement dit, ce service propose l’ensemble des fonctionnalités d’un hébergeur classique, mais il est gratuit. Le modèle économique repose sur les dons et, essentiellement, sur les souscriptions payantes à des services supplémentaires.

Les serveurs sont situés aux États-Unis d’Amérique, mais les temps de réponse sont comparables à ceux d’un hébergeur situé (au hasard…) en Allemagne !

L’assistance technique est limitée à un forum de discussion, mais semble aussi réactive que les hotliners des hébergements classiques à l’entendement parfois limité.

Cette offre est idéale pour débutants, par exemple sous WordPress : plutôt qu’installer une version du weblogue en local au risque de ne pas savoir exporter la base de données avec la mise en production, il est plus utile d’utiliser un serveur dès ses premiers pas.

Sont parfois à déplorer certaines sautes du serveur, qui durent le plus souvent quelques secondes. Cet écueil n’est guère gênant pour les sites amateurs.

Désormais, nous ne connaissons plus d’erreur 500 sur nos sites ni de problème d’allocation de mémoire Php. Notre vie de concepteur de sites a changé grâce à 000webhost !