Iptima » référencement http://www.iptima.com ... Miscellanées multimedia ® Sun, 02 Oct 2011 17:52:06 +0000 fr hourly 1 http://wordpress.org/?v=3.2.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 Lire la suite →]]> 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/ 1 All in one SEO Pack http://www.iptima.com/2007/09/09/all-in-one-seo-pack/ http://www.iptima.com/2007/09/09/all-in-one-seo-pack/#comments Sun, 09 Sep 2007 17:51:36 +0000 Vincent Roulet http://www.iptima.com/2007/09/09/all-in-one-seo-pack/ Lire la suite →]]> Pendant longtemps, nous ne sommes pas préoccupé de la Seo, autrement dit de l’optimisation de notre weblogue pour les moteurs de recherche. En effet, lorsque nous avions choisi notre thème, l’auteur avait mentionné Seo Ready, et nous l’avions cru sur parole (!). Dès lors, nous pensions ne pas avoir à nous occuper du référencement.

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

<addendum>

20/03/2008.

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

</addendum>

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

Il nous fallait donc trouver une solution.

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

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

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

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

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

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

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

<addendum>

20/03/2008.

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

</addendum>

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

<?php wp_head(); ?>

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

]]> http://www.iptima.com/2007/09/09/all-in-one-seo-pack/feed/ 0