Pages pour mobiles

Le plugin « Pages pour mobiles » est très proche de « cimobile »: comme lui, il détecte les téléphones mobiles. Par contre, il les aiguille vers des pages de squelettes correspondantes quand elles existent (et non pas vers un jeu de squelettes correspondant comme « cimobile »).

Le but de ce plugin est de détecter le type de périphérique utilisé pour naviguer, puis de le rediriger (aiguiller) vers la page la plus adaptée si elle existe.

À l’instar de son modèle, ce plugin ne fournit aucun squelette ! Il ne sert qu’à détecter un mobile et à l’aiguiller vers la meilleure page possible.

Ce sera donc à vous de concevoir les pages adaptées en fonction de vos besoins.

Compatibilité et installation

Pages pour mobiles est compatible avec SPIP 3 et plus récent. Donc pour l’installer, le plus simple est de passer par l’interface de récupération et d’installation automatisée de SPIP 3.

Il est bien sûr toujours possible d’installer le plugin à la main en suivant cette procédure: Installer un plugin et en utilisant la dernière version du paquet référencée sur http://plugins.spip.net/pages_mobil....

Comme Pages pour mobiles inclus une partie de ce qui a été programmé pour cimobile, il est publié sous la même licence: Creative Commons BY-NC-SA.

Détection du type de périphérique de navigation

Pages pour mobiles reprend quasiment à l’identique la procédure de détection du mobile (type de périphérique de navigation) du plugin cimobile.

Cette détection se fait à chaque hit sur une page et en plusieurs étapes afin de limiter la charge du serveur:

  1. vérification de l’URL (le paramètre &pages_mobiles=nom_type_ou_groupe_mobile peut être passé dans l’URL)
  2. vérification du cookie (nommé pages_mobiles aussi)
  3. vérification rapide du user agent pour Firefox et Internet Explorer
  4. vérification étendue du user agent.

La vérification étant faite à chaque hit, Pages pour mobiles dépose un cookie dès la première détection, pour ne pas avoir à refaire une vérification exhaustive à chaque fois. Voir aussi la doc technique de cimobile : pdf/description_du_plugin_cimobile_110726.pdf

Redirection vers la meilleure page du squelette

Le plugin se différencie de cimobile sur la philosophie de la redirection : cimobile permet de rediriger vers un jeu de squelettes complet.

Alors que Pages pour mobiles ne redirige que vers la meilleure page et uniquement si elle existe. Cela évite d’avoir à développer un jeu de squelettes complet pour mobile et de ne pouvoir se concentrer que sur certaines pages.

Prenons un exemple concret: pour votre site vous avez développé un squelette de la page des articles spécifiquement pour les téléphones mobiles. Pour que Pages pour mobiles puisse en tenir compte et aiguille correctement le visiteur en fonction du type d’appareil qu’il utilise, il faut nommer ce squelette spécifique article.html (comme la page article normale), et le placer dans un sous-répertoire du dossier squelettes nommé mobile.

Ainsi, quand le visiteur de votre site cherche à voir un article, Pages pour mobiles détermine avec quel type d’appareil il navigue.

  • Si c’est un navigateur normal (d’ordinateur) il l’aiguille vers la page article.html normale qui est à la racine du répertoire de vos squelettes.
  • Si il navigue avec un mobile, Pages pour mobiles l’aiguille vers la page article.html placée dans le sous-répertoire mobile si elle existe (sinon il renvoie la page article.html normale placée à la racine du répertoire des squelettes).

Là où ça devient plus subtil, c’est que vous pouvez aussi vouloir une page article spécifique pour un appareil mobile particulier. Par exemple un ipad. Il vous suffit alors de placer ce squelette spécifique des ipad dans le sous-répertoire de votre squelette nommé ipad.

Votre dossier squelettes va alors contenir au moins:

  • ipad/
    • article.html
  • mobile/
    • article.html
  • article.html
  • autres fichiers à la racine

Le résultat sera le suivant:

  • si l’utilisateur utilise un ordinateur, il sera aiguillé vers le squelette article.html normal (à la racine du répertoire des squelettes)
  • si l’utilisateur utilise un ipad, il sera aiguillé vers le squelette article.html spécifique des ipad (placé dans le sous-répertoire ipad)
  • si l’utilisateur utilise un autre périphérique mobile, il sera aiguillé vers le squelette article.html pour les mobiles en général (placé dans le sous-répertoire mobile).

Ainsi on peut avoir quelque chose comme ça:

  • blackberry/
    • article.html
    • recherche.html
  • mobile/
    • article.html
  • tablettes/
    • sommaire.html
  • windowsphone7/
    • trucmuche.html

C’est à dire avec une page article spécifique pour Blackberry et une autre pour les mobiles en général, une page recherche spécifique pour Blackberry, une page trucmuche pour Windows Mobile 7, et une page sommaire que pour les tablettes.

Liste des sous-répertoires possibles

Pages pour mobiles va chercher les squelettes affichables dans des sous-répertoires du dossier squelettes qui dépendent du type de périphérique de navigation utilisé. Ces sous-répertoires sont nommés à partir des types de mobiles et des groupes de mobiles institués par le plugin cimobile.

  • types de mobiles:
    • ipod
    • ipad
    • androidtablette
    • android
    • blackberry
    • windowsphone7
    • windowsmobile
    • opera
    • S60
    • symbianos
    • palmwebos
    • nuvifone
    • sonymylo
    • nokiatablette
    • blackberrytablette
    • archos
    • mobile
  • groupe de mobiles:
    • ios_phones
    • smartphones
    • tablettes
    • autres_mobiles

Vous devez donc utiliser ces noms pour ranger vos pages spécifiques pour mobiles. À noter que la sous-répertoire mobile sera générique pour l’ensemble des mobiles en l’absence de répertoire plus spécifique.

Vous pouvez tester vos squelettes en utilisant dans l’URL le paramètre pages_mobiles avec les mêmes dénominations que les sous-répertoires possibles. Par exemple, pour tester l’affichage de l’article 42 sur un mobile Android, vous utiliserez http://votre_url/spip.php?page=article&id_article=42&pages_mobiles=android.

Pour revenir à l’affichage normal, utilisez la valeur “web” (sans guillemets) pour le paramètre pages_mobiles passé dans l’URL. Vous pouvez aussi vider le cookie pages_mobiles de votre navigateur.

Le logo du plugin est issu de nounproject: http://thenounproject.com/noun/appl... il est CC-BY Kyle Klitch.

Grand merci à Equipement pour son plugin cimobile : plugin « détection et aiguillage des téléphones mobiles ».

updated on 2 October 2019

Discussion

20 discussions

  • 2
    PierreG

    Salut à tous,

    Est ce que les balises INCLURE fonctionnent avec ce plugin chez vous ?
    Chez moi ça ne veut pas !!

    Merci d’avance

    • c’est à dire? soyez plus précis. Expliquez ce que vous faites et en quoi “cela ne marche pas”

    • PierreG

      Je suis allé un peu vite à poster.
      Ça fonctionne bien en faisant cela : <INCLURE{fond=mobile/header}>
      pour un header.html placé à la racine du squelette mobile.

    Reply to this message

  • 6
    PierreG

    Bonjour,

    Je débute en SPIP, j’ai activé le plugin et pense avoir compris le fonctionnement.
    Par contre je ne comprends pas où doit se situer le répertoire “squelettes” dans lequel on place nos différentes versions selon le mobile.

    Cordialement

    • le répertoire squelettes (qui n’est pas propre à ce plugin mais fait parti du fonctionnement générale de SPIP) est à créer à côté des répertoires standards de SPIP (config, local, ecrire, tmp etc.)

    • PierreG

      OK merci ça fonctionne ;)

      Concernant le CSS, si il est commun à plusieurs squelettes, comment peut-on y faire référence s’il est dans un dossier parent ?

    • je n’ai pas compris la question.

    • PierreG

      Pour plusieurs squelettes mobiles, si ils ont du CSS en commun, dans quel dossier doit-on mettre ce CSS ?

    • ah. aucune idée, je ne suis pas l’auteur du plugin

    • mais vu la doc je dirais à la racine. A priori le plugin doit utiliser le système de chemin de SPIP, en le customisant un peu.

    Reply to this message

  • 10

    Oui si j’active les URL arbo et le plugin pages pour mobiles, la redirection n’aboutit pas depuis un terminal mobile : j’obtiens alors un “Not Found”.

    • Pareil pour moi sous spip 3.07 avec les urls arbo j’obtiens un not found avez vous une idée? La page mobile/sommaire.html n’est pas prise en compte non plus la page pour pc s’affiche alors que j’ai bien tout les paramètres dans l’url.

    • Aurélien

      Pour le problème du sommaire, je me suis rendu compte que la fonction retournait la valeur “404” au lieu de “sommaire” pour la variable $type_page. J’ai rajouté ce code à la ligne 162 du fichier pages_mobiles_options.php du plugin :

      if ( !ereg(“spip.php\?sommaire”,$GLOBALS[’REQUEST_URI’]))

      // urls_decoder_url() retourne le type de page et le contexte
      $contexte = $url_decodee[1];
      $type_page = $url_decodee[0];

      else
      //$contexte = array(“”);
      $type_page = “sommaire”;

      et ça à l’air de fonctionner.

    • Aurélien

      Pour le problème du sommaire, je me suis rendu compte que la fonction urls_decoder_url retournait la valeur « 404 » au lieu de « sommaire » pour la variable $type_page. J’ai rajouté ce code à la ligne 162 du fichier pages_mobiles_options.php du plugin :

      if ( !ereg("spip.php\?sommaire",$GLOBALS['REQUEST_URI']))
      {
              // urls_decoder_url() retourne le type de page et le contexte
              $contexte = $url_decodee[1];
              $type_page = $url_decodee[0];
      
      }else{
              //$contexte = array("");
              $type_page = "sommaire";
      }

      Désolé pour le premier post un peu foireux !

    • Merci Aurélien de ta réponse, le plugin sera mis à jour avec ces modifs et je devrais le télécharger à nouveau ? ou il faut que je fasse la modif manuellement?

      En tous cas merci d’avance !

    • Aurélien

      Bonsoir,
      Désolé mais je ne suis qu’un visiteur sur ce site et ne suis pas le développeur de ce plugin.
      La correction que je te donne n’est certainement pas la meilleure d’ailleurs mais elle fonctionne. Il faudra alors que tu fasses la modif manuellement.

    • Ok merci Aurélien, j’espère que “Beurt” verra ce message passé :) je vais tester de le faire manuellement comme tu nous l’a sympathiquement indiqué :p

    • Aurélien

      Pour gérer l’appel avec l’url simple de votre site ( sans paramètre ) du type www.monsite.fr, il faut remplacer la première ligne par celle-ci dans le code donné ci-dessus :

      if ( !ereg("spip.php\?sommaire",$GLOBALS['REQUEST_URI']) && ereg("spip.php",$GLOBALS['REQUEST_URI']))
    • Bonjour,

      Merci à Aurélien pour ces propositions de correctif... je vais essayer de tester au plus tôt (mais ce n’est peut-être pas pour tout de suite).

      Si tu veux Aurélien, tu peux faire les modifications au plugin lui-même: il est développé sur la zone qui est un espace de développement collaboratif où tout le monde peut participer http://zone.spip.org/trac/spip-zone/ (tu y serais le bienvenu :-)).

      NB: Loïc, toi aussi tu peux “commiter” (publier) les modifications proposées par Aurélien directement sur la zone pour que tout le monde en profite.

    • Finalement, je viens de corriger le plugin (version 1.0.5 qui sera zippée d’ici une heure ou deux)...

      Le bug était effectivement dû à un changement de comportement d’une fonction de SPIP qui renvoyait “404” au lieu de rien quand on était sur la page de sommaire.

      Je n’ai pas tout à fait repris le code d’Aurélien, j’ai juste modifié le code qui permet de détecter la page de sommaire qui était avant: if (!$type_page) $type_page = "sommaire"; et que j’ai modifié en if (!$type_page OR ($type_page == "404" AND $_GET[page] == false)) $type_page = "sommaire"; (un peu plus optimisé que la soltion d’Aurélien, ce qui est important car ce code est exécuté à chaque hit !).

      Merci à tous pour votre signalement et à Aurélien pour avoir pris le taureau par les cornes.

    • Merci beurt de ta réponse, pour participer à la correction de plugin je vais regarder comment ça marche sur ton lien car je l’ai encore jamais fait directement sur la zone.

      Merci à tous à bientôt !

    Reply to this message

  • 8
    le perceoreilles

    Bonjour

    Pour info, j’utilisais sans souci ce plugin sur www.perceoreilles.net et d’autres sites. Lors de la mise à jour de la 3.0.4 > 3.0.6, le plugin a généré des erreurs 500 dans la navigation interne, y compris sur PC (donc les squelettes non concernés par le plugin). Cela s’est passé sur le site du perce-oreilles seulement, pas sur les autres. Le désactiver a résolu le problème, mais je ne sais point pourquoi.

    Très pratique comme plugin, je vais tenter de comprendre pourquoi - ou si vous avez des idées...

    • Aie... Je n’ai pas encore eu le temps de tester SPIP 3.0.6... Je vais examiner le changelog de la 3.0.6 avec attention et l’installer pour regarder si ça coince aussi chez moi.

      Peut-être qu’il faudra se tourner vers une modif profonde du plugin (par exemple, celle que propose Charles S: #forum465457)

      Je pense que je testerais d’ici demain soir.

    • le perceoreilles

      Chose que je n’ai pas spécifiée mais qui pourra beaucoup aider à comprendre le bug : lorsque j’étais loguée dans la partie privée, le site fonctionnait normalement. Dès que j’étais déloguée (sur Firefox ou Chrome), les liens internes ne marchaient plus.

      En tout état de cause, bravo (ainsi qu’à léquipe de Cimobile) pour ce plugin ! Et je re-précise quand même que sur 2 autre sites avec ce plugin, pas de souci.

    • Salut, je t’avais mal lu (trop vite) et j’avais compris que c’était sur tous les sites !

      Si ce n’est que sur un seul site, il s’agit peut-être d’une mauvaise synergie entre plugins ? Pour l’instant je n’arrive pas à reproduire ce bug...

    • le perceoreilles

      Peut-être oui, mais je ne vois pas quel autre plugin pourrait interférer (pas de plugin d’autorisations spéciales ni de redirection). Voilà les plugins actifs (outre ceux de la dist) sur ce site :

      -  API de vérification
      -  CFG
      -  Champs Extras
      -  Champs Extras (Interface)
      -  Le Couteau Suisse
      -  Saisies pour formulaires
      -  speedsyndic2
      -  YAML

    • Je me demandais: utilises-tu les URL arbo ? Si oui, tu devrais peut-être essayer avec SPIP 3.0.7 (qui vient de sortir).

    • le perceoreilles

      Non, des URL Page. Mais je vais quand même mettre la 3.0.7, et tenter de comprendre où ça bugue avec le plugin ...

    • le perceoreilles

      Yes! Résolu avec le passage à la 3.0.7! Et j’en ai profité pour coller de jolies URLs au perceoreilles. Merci à toi!

    • Ouf ! je suis content que ça fonctionne pour toi ! j’étais surpris que ça ne dysfonctionne que pour un seul site...

    Reply to this message

  • 5
    Charles S

    Bonjour, Bravo pour cette initiative.

    Pouquoi tout simplement ne pas faire jouer la globale des dossiers squelettes?

    //include_spip('inc/headers');
    //redirige_par_entete("spip.php?page=pages_mobiles&squelette_mobile=$chemin_mobile".$liste_params);
                    }
            $GLOBALS['dossier_squelettes'] = 'mobile';
    voir même >
            $GLOBALS['dossier_squelettes'] = $type_mobile;
    
            } 

    Cordialement

    Charles

    • Bonne question :-)

      Je sais que je m’étais posé la question, et j’ai... oublié pourquoi j’ai choisi de faire differement (avec tous les problèmes que ça peut poser)...

      Par contre c’est une option que l’on peut rajouter, pourquoi pas !

    • Charles S

      D’autant que cela préservera la mécanique des urls…
      Préservera l’archi spip Un dossier squelettes_mobile, squelettes_android etc…

      J’en suis venu là car j’avais besoin de surcharger un squelettes mobiles (mon head en l’occurence), et à moins que j’ai loupé qqchose ce n’est pas possible sans globale

      En tout cas je suis à fond ce thread!

      Bravo et merci!

    • Charles S

      D’autant que cela préservera la mécanique des urls…

      Préservera l’archi spip Un dossier squelettes_mobile, squelettes_android etc…
      J’en suis venu là car j’avais besoin de surcharger un squelettes inclut mobiles (mon head en l’occurence), et à moins que j’ai loupé qqchose ce n’est pas possible sans globale

      En tout cas je suis à fond ce thread !

      Bravo et merci !

    • J’ai l’impression que tu en sais assez en PHP pour tenter d’implémenter ça (comme une option définie par une GLOBALE). N’hésite pas: le plugin est sur la zone !

      (moi je ne vais pas avoir le temps de m’y pencher avant plusieurs semaines)

    • Charles S

      Bien visé ! ;)

    Reply to this message

  • 2

    Bonjour,

    Si j’ai un plugin avec les squelettes pour mobile comment je peux le déclarer dans la config de pages_mobiles pour qu’il soit utilisé ?

    merci

    dd

    Reply to this message

  • 6

    Bonjour,

    Je n’arrive pas à installer le plugin( décompacté dans plugin/auto). Il est noté “incompatible” par le gestionnaire de plugins (SPIP 3.0.2). Est-ce ma version de spip qui pose problème ou y-a-t-il quelque chose d’autre à faire?

    Merci pour vos réponses ,

    Michel.

    • Effectivement, il faudra mettre à jour votre SPIP. Pages pour Mobiles ne fonctionne qu’à partir de SPIP 3.0.4.

      La version actuelle de SPIP 3 est la 3.0.5 (vous pouvez la télécharger ici: http://www.spip.net/fr_download, ou directement dans le pied de la page de la partie privée de votre site sous SPIP 3.0.2 où la mise à jour est signalée)

    • Merci beaucoup pour cette réponse rapide. J’ai effectué la mise à jour et le plugin fonctionne.
      Par contre, j’ai une question concernant le css. J’ai créé un répertoire android dans le répertoire squelette dans lequel j’ai créé les pages article.html et rubrique.html et un sous-répertoire css/style.css. J’ai modifié le css pour faire des essais mais celui-ci n’est pas pris en compte, spip utilise toujours le fichier css d’origine du dossier squelettes.

      J’ai ensuite essayé d’appeler à directement à partir de la page article.html du dossier android un fichier css spécifique nommé android.css, mais celui-ci n’est pas pris en compte non plus. Comment faut-il procéder?

    • J’ai ensuite essayé d’appeler à directement à partir de la page article.html du dossier android un fichier css spécifique nommé android.css, mais celui-ci n’est pas pris en compte non plus.

      Il faudrait savoir comment tu as essayé d’appeler à directement à partir de la page article.html... En théorie ça doit ressembler à:

      1. [<link rel="stylesheet" href="(#CHEMIN{android/css/style.css}|direction_css)" type="text/css" />]

      Est-ce le cas ?

    • Autant pour moi, j’avais appelé mon css comme à partir d’une page statique.
      Avec #CHEMIN, ça fonctionne.
      Par contre, j’ai remarqué une chose, il semble que style.css (le css du squelette normal) prennent le dessus sur android.css, ce qui oblige à donner un nom spécifique pour toutes les classes des pages mobiles.
      J’ai par exemple une classe sous-menu dans style.css et également dans android.css. C’est celle de style.css qui est prise en compte, l’autre est ignorée.

    • Il faudrait vraiment être plus précis sur où se trouvent android.css et style.css pour que je puisse t’aider. Notamment, il faudrait préciser s’ils sont dans un sous répertoire contenant des squelettes mobiles (ex.: mobile ou android) ou non.

      Là j’ai un peu de mal à voir dans quel cas tu es !

    • style.css se trouve dans “squelettes/css/style.css”
      android.css dans “squelettes/android/css/android.css”

      Mais encore une fois, je disais ça plutôt à titre d’information. Si je renomme une classe avec un suffixe, comme par exemple: “sous-menu_mobile”, ça fonctionne très bien. Le “souci” vient seulement quand les classes du css mobile et celles du css par défaut ont le même nom.

      Et puisque je ne l’ai pas encore fait, j’en profite pour te remercier pour ce très pratique plugin. C’est vraiment un beau travail. Merci aussi pour la rapidité de tes réponses.

      Michel

    Reply to this message

  • 2

    Salut,

    Peux-tu être plus précis quand tu dis que ça ne fonctionne pas avec les URL arbo ? la redirection ne se fait pas ? Elle n’aboutit pas ? Les pages qui sont affichées sont les pages web non-mobiles ?

    • Oui si j’active les URL arbo et le plugin pages pour mobiles, la redirection n’aboutit pas depuis un terminal mobile : j’obtiens alors un « Not Found ».

    • Mmmh... ça a l’air compliqué à résoudre...

      Je ne suis pas sûr que ce soit fait à court terme !

    Reply to this message

  • Excellent plugin, très simple et très efficace. Merci beaucoup.

    Reply to this message

  • Excellent plugin, c’est ce que je cherchais depuis un moment. Merci beaucoup.

    Par contre il semble ne pas fonctionner avec les URLs Arborescentes. Peut-on m’éclairer sur le sujet ?

    Reply to this message

Comment on this article

Who are you?
  • [Log in]

To show your avatar with your message, register it first on gravatar.com (free et painless) and don’t forget to indicate your Email addresse here.

Enter your comment here

This form accepts SPIP shortcuts {{bold}} {italic} -*list [text->url] <quote> <code> and HTML code <q> <del> <ins>. To create paragraphs, just leave empty lines.

Add a document

Follow the comments: RSS 2.0 | Atom