Iptima » JavaScript 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 Centrer parfaitement une galerie d’images http://www.iptima.com/2010/02/18/centrer-une-galerie-dimages/ http://www.iptima.com/2010/02/18/centrer-une-galerie-dimages/#comments Thu, 18 Feb 2010 11:39:59 +0000 Vincent Roulet http://www.iptima.com/?p=284 Nous nous sommes longtemps interrogé sur la manière de centrer parfaitement la dernière ligne d’une galerie, quel que soit le nombre d’images. En effet, sur la plupart des sites n’utilisant pas des effets dynamiques comme JavaScript ou Flash, les images restantes d’une dernière ligne incomplète sont inexorablement alignées à gauche : les exemples sont nombreux.

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.

]]> http://www.iptima.com/2010/02/18/centrer-une-galerie-dimages/feed/ 0 Activer le correcteur orthographique de WordPress en français par défaut http://www.iptima.com/2008/08/22/activer-le-correcteur-orthographique-de-wordpress-en-francais-par-defaut/ http://www.iptima.com/2008/08/22/activer-le-correcteur-orthographique-de-wordpress-en-francais-par-defaut/#comments Fri, 22 Aug 2008 15:42:13 +0000 Vincent Roulet http://www.iptima.com/?p=186 Pendant longtemps, nous avons utilisé WordPress, sans utiliser son correcteur orthographique. Cependant, nous avons prévu d’ouvrir un site, qui permettrait aux lecteurs d’écrire leurs propres articles. Dès lors, nous devions fournir une interface précise et conviviale.

De même, voulons-nous utiliser l’extension l’extension MCE Comments, qui propose une interface enrichie pour les commentaires des visiteurs. Internationalisation oblige, le correcteur d’orthographe activé par défaut pour la langue de Shakespeare.

Or, comme l’indique un débat non résolu récent sur le support francophone de WordPress, le correcteur d’orthographe de WordPress corrige par défaut la langue anglaise : comment y remédier ?

La solution que nous allons présenté ici fonctionne avec la version 2.6.1 de WordPress. Nous ne sommes pas partisan des modifications en dur des fichiers de WordPress, mais parfois nécessité fait loi !

Les fichiers à modifier sont :

  • ../wp-includes/js/tinymce/tiny-mce-config.php,
  • ../wp-includes/js/tinymce/Plugins/spellchecker/editor-Plugin.js.

Modifications à apporter dans tiny_mce_config.php

Dans tiny_mce_config.php, il convient de remplacer ligne no 67…

$mce_spellchecker_languages =
apply_filters('mce_spellchecker_languages','+English=en,Danish=da,
Dutch=nl,Finnish=fi,French=fr,German=de,Italian=it,
Polish=pl,Portuguese=pt,Spanish=es,Swedish=sv');

par

$mce_spellchecker_languages =
apply_filters('mce_spellchecker_languages','English=en,Danish=da,
Dutch=nl,Finnish=fi,+French=fr,German=de,Italian=it,
Polish=pl,Portuguese=pt,Spanish=es,Swedish=sv');

Autrement dit, il suffit juste de déplacer le symbole + devant French=FR.

Ces deux fichiers sont à remplacer dans l’installation de WordPress par Ftp.

Modifications à apporter dans editor-Plugin.js

Dans editor-Plugin.js, il convient de remplacer lignes no 78 et suivantes…

each(ed.getParam('spellchecker_languages', '+English=en,Danish=da,
Dutch=nl,Finnish=fi,French=fr, German=de,Italian=it,
Polish=pl,Portuguese=pt,Spanish=es,Swedish=sv',
'hash'), function(v, k) {
if (k.indexOf('+') === 0) {
  k = k.substring(1);
  t.selectedLang = v;
}
t.languages[k] = v;
});

par

each(ed.getParam('spellchecker_languages','English=en,Danish=da,
Dutch=nl,Finnish=fi,+French=fr,German=de,Italian=it,
Polish=pl,Portuguese=pt,Spanish=es,Swedish=sv',
'hash'), function(v, k) {
  if (k.indexOf('+') === 0) {
  k = k.substring(1);
  t.selectedLang = v;
}
t.languages[k] = v;
});

Là encore, il suffit juste de déplacer le symbole + devant French=FR.

Modifications à apporter dans l’extension TinyMce Comments

Dans TinyMCEComments.php, il suffit de remplacer la ligne 215…

$mcecomment_options['language'] = 'en';

par

$mcecomment_options['language'] = 'fr';

c’est-à-dire en par fr.

Ensuite, et pour être parfaitement exhaustif afin de satisfaire Jean-Yves (!), il faut transférer le fichier par Ftp, à moins d’effectuer la modification depuis l’éditeur d’extension de WordPress.

Si ces modifications sont faciles, il reste cependant un défaut auquel nous n’avons pas remédier. Le correcteur d’orthographe propose parfois certains équivalents accentués dans des caractères étranges, dont l’encodage n’est pas conforme.

Enfin, la traduction française sur l’icône du Spellchecker laisse à désirer. L’équipe française de traduction a pris le parti récemment de culbuter les apostrophes, qui ne sont pas correctement prises en charge par JavaScript ! (On retrouve le même écueil dans l’ajout d’image). Pour obtenir un résultat optimal, il convient donc aussi de remanier la traduction française.

]]> http://www.iptima.com/2008/08/22/activer-le-correcteur-orthographique-de-wordpress-en-francais-par-defaut/feed/ 0 Slimbox http://www.iptima.com/2007/08/09/plugin-slimbox/ http://www.iptima.com/2007/08/09/plugin-slimbox/#comments Thu, 09 Aug 2007 14:58:30 +0000 Vincent Roulet http://www.iptima.com/?p=28 <addendum>

04/03/2009.

Le fonctionnement d’Iptima a changé en un an et demi… ImageManager a été largement oublié… En outre, nous n’utilisons plus l’extension Slimbox ! Nous avons préféré ajouter à notre thème le code de la Slimbox en dur, comme le propose Christophe Beyls, concepteur originel de la Slimbox, avec JQuery.

Nota. L’effet Slimbox n’est pas réservé aux sites fonctionnant sous WordPress !

Pour ne pas pénaliser les lecteurs et dans un but didactique, l’article est laissé en l’état, mais sans les images. Pour autant, nous garantissons que les codes fonctionnaient lors de la rédaction de l’article… même si l’informatique est parfois capricieuse !

</addendum>

Aujourd’hui, nous nous sommes mis en quête d’un outil afin de pouvoir agrandir les photos présentes sur le weblogue.

Sans doute aurions-nous pu nous contenter de l’outil pour agrandir proposé par ImageManager que nous utilisions alors, mais il ne nous satisfaisait pas : nous trouvions la présentation des images austère et nous voulions un effet plus dynamique. Ici, nous avons longtemps hésité entre Lightbox et son fils, Slimbox. Nous avons fini par adopter le dernier pour plusieurs raisons… Nous apprécions son installation, car il ne nécessite pas de modifier certains fichiers. Il permet d’ajouter une légende aux photos agrandies. Il autorise la navigation d’images en images en ajoutant un code simplissime. Enfin, il affiche correctement les caractères accentués et les apostrophes.

Passons à la pratique…

Avec une image

Il est demandé à ImageManager de créer une miniature avec lien sur l’image. ImageManager a généré le code suivant :

<a rel="lightbox" href="/wp-content/uploads/bordeaux/bordeaux_a.jpg"><img src="/wp-content/uploads/bordeaux/.thumbs/.bordeaux_a.jpg" title="le Miroir d'eau à Bordeaux" style="photos" class="photos" width="96" height="72" hspace="5" vspace="5" border="0" /></a>

Pour que la photo agrandie comporte un titre en bas à gauche, il a fallu donner un titre à la lightbox. Le code a été modifié ainsi :

rel="lightbox" title="le Miroir d'eau à Bordeaux"

La photo agrandie comporte alors une image et, sur le côté inférieur, une légende et un bouton fermer.

Avec une galerie d’images

À présent, nous allons voir que Slimbox permet de naviguer entre les images agrandies avec l’instruction rel=lightbox[roundtrip].

Le code généré par ImageManager ne change évidemment pas.

En revanche, l’appel à la lightbox sur chaque image est rédigé comme suit :

rel="lightbox[roadtrip]"

Là encore, il convient de ne pas oublier l’attribut title à la lightbox si l’on veut une légende en bas à gauche de l’image agrandie.

Lorsque l’image est agrandie, la légende de l’image et le bouton fermer sont toujours présents. De plus, il suffit de diriger la souris vers l’un des côtés de l’image pour que les boutons précédent ou suivant apparaissent.

Certes, ces boutons de navigation ne sont guère accessibles… Voilà pourquoi, aucun texte n’invite l’utilisateur à agrandir l’image ! Si l’internaute est novice ou handicapé, il n’utilisera pas le JavaScript, et sa navigation n’en sera pas affectée. Quand au visiteur confirmé, il cliquera sur l’image, mais son expérience lui permettra de naviguer sans difficultés.

Dans la version originale de Slimbox, les boutons étaient en anglais. Nous avons donc voulu les changer. Faute d’avoir réussi à produire un texte net avec nos outils de dessin, nous nous sommes contenté des symboles. Nous avons aussi francisé un terme dans le code JavaScript à la ligne no 144 du fichier slimbox.js afin que le mot of soit remplacé par de. Ainsi peut-on lire Image 1 sur 3 au lieu de Image 1 of 3. Enfin, nous avons modifié la feuille de style afin d’assortir le couleur de fond au reste de notre weblogue.

]]> http://www.iptima.com/2007/08/09/plugin-slimbox/feed/ 1