Iptima » Gsm 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 Servir un contenu alternatif pour favoriser le référencement http://www.iptima.com/2010/02/23/servir-un-contenu-alternatif-pour-favoriser-le-referencement/ http://www.iptima.com/2010/02/23/servir-un-contenu-alternatif-pour-favoriser-le-referencement/#comments Tue, 23 Feb 2010 11:04:45 +0000 Vincent Roulet http://www.iptima.com/?p=411 Servir un contenu alternatif destiné aux téléphones mobiles peut sembler constituer une contrainte. Pour autant, cette possibilité peut constituer un avantage pour la Seo, comme nous allons le voir.

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 ?

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

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

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

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

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

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

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

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

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

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

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

#adsense, #advertising {
  display: none

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

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

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

]]> http://www.iptima.com/2010/02/22/concevoir-une-feuille-de-style-pour-les-peripheriques-mobiles/feed/ 0 Ypthima Mobile http://www.iptima.com/2007/09/18/afficher-wordpress-sur-un-peripherique-mobile/ http://www.iptima.com/2007/09/18/afficher-wordpress-sur-un-peripherique-mobile/#comments Tue, 18 Sep 2007 16:53:28 +0000 Vincent Roulet http://www.iptima.com/2007/09/18/afficher-wordpress-sur-un-peripherique-mobile/ Comment afficher WordPress sur un téléphone mobile ou sur un organiseur ?

Lors de nos développements antérieurs, nous affichions nos sites sur les périphériques mobiles avec une feuille de style dédiée, conçue pour le medium handled. Les résultats nous semblaient à peu près satisfaisants, même si certains navigateurs de téléphone n’appliquaient pas les règles spécifiques.

Aussi avons-nous cherché un module d’extension permettant l’affichage de WordPress sur les radio-téléphones et autres assistants personnels.

Nous nous sommes d’abord tournés vers WordPress Mobile Edition d’Alex King. Nous avons renoncé à utiliser son Plugin, car il est ancien mutatis mutandis, et Alex semble avoir laissé son weblogue à l’abandon. Enfin, WordPress Mobile Edition nécessite l’emploi d’une adresse spécifique pour son affichage comme http://www.iptima.com/wp-mobile.php, et cette contrainte ne nous semble pas ergonomique.

Nous avons donc voulu user du module d’extension écrit par Andy Moore, l’incontournable Wp-mobile. À vrai dire, ce Plugin nous semble idéal pour afficher WordPress sur un périphérique de poche, avec un travail minimal. La feuille de style est personnalisable. Des raccourcis claviers (ou accesskeys) sont même prévues. Nous n’avons noté aucun bogue. Par contre, est gênant l’affichage des publicités Admob, qui sont majoritairement en faveur de services adultes. Si nous avons compris les termes de la licence, il n’est pas autorisé d’empêcher cet affichage. À défaut de posséder un compte sur Admob, la rémunération est versée à Andy Moore. Enfin, Wp-mobile comporte un défaut rédhiboire : il n’affiche pas les textes que nous générons avec Text-Replace.

Poursuivant nos investigations, nous avons découvert Wp-Pda développé par Imthiaz Rafiq. Contrairement à son nom restrictif, Wp-Pda est capable d’afficher WordPress sur les téléphones mobiles. Il ne nécessite pas l’emploi d’une adresse spécifique, et n’impose pas de publicité. De plus, ce Plugin sait afficher les données envoyées par Text-Replace. Une version francisée est également disponible.

Hélas, au fil de nos essais, nous avons découvert plusieurs bogues, qui empêchait son fonctionnement optimal… Nous avons visité les pages des weblogues utilisant Wp-Pda, et nous avons rarement pu atteindre la deuxième page !

À deux reprises, nous avons écrit à Imthiaz en proposant des corrections, mais nos messages nous sont revenus en erreur, comme si cette adresse électronique n’existait plus.

C’est pourquoi, nous avons décidé de reprendre entièrement le développement de ce module d’extension pour le rendre fonctionnel. Son internationalisation, défaillante, a été également améliorée. Pour rendre son affichage plus simple, nous avons supprimé l’affichage des catégoriers et des marques sous les artciles. Nous n’avons pas su le rendre valide Xhtml Mobile Profile, mais le site Ready Mobi attribue à son affichage une excellente note de 4. Plusieurs feuilles de style ont été créées dans des couleurs différentes pour coller au design de nos thèmes WordPress : bleu acier, rouge brique, olive, vert océan, bordeaux et noir. Deux versions sont disponibles, avec ou sans l’affichage d’annonces Google Adsense pour les mobiles. Le plugiciel peut être téléchargé sur notre weblogue. Il suffit de placer le plugicel dans le repertoire Plugins et de l’activer depuis l’interface d’administration de WordPress. Last but not least, Ypthima Mobile est iPhone ready !

]]> http://www.iptima.com/2007/09/18/afficher-wordpress-sur-un-peripherique-mobile/feed/ 2