Contactez-nous

1

Une version iPhone

2 avril 2008
par ARNO*

[SPIP 1.9] J’ai réalisé en quelques jours, pour notre magazine de mode en ligne, Flip-Zone, une version adaptée à la consultation sur iPhone (et iPod Touch).

La caractéristique qui m’intéresse ici est la suivante : il suffit de se connecter à l’adresse habituelle de Flip-Zone pour que SPIP détecte automatiquement que l’on est sur iPhone et utilise des squelettes adaptés. Il s’agit, ici, de ne pas recourir à une URL différente, mais d’afficher des squelettes différents selon que le visiteur est sur iPhone ou utilise un navigateur Web classique.

Cette fonction est très simple à mettre en place : il suffit de changer automatiquement, en fonction du logiciel utilisé par le visiteur, le nom du dossier contenant les squelettes.

Par défaut, mes squelettes sont installés dans un dossier /squelettes. Lorsque le visiteur est sur iPhone, j’indique simplement à SPIP que le dossier de squelettes à utiliser est un autre dossier, installé à la racine du site, /iphone.

Ensuite, il suffit d’ajouter, dans mes_options.php, les lignes suivantes :

  1. if (ereg("iPod|iPhone|Aspen", $_SERVER["HTTP_USER_AGENT"])) {
  2. $GLOBALS["dossier_squelettes"] = "iphone";
  3. }

Télécharger

Ici, on cherche la chaîne « iPhone » dans le nom du logiciel client, mais aussi les chaînes « iPod » et « Aspen » (le nom du simulateur d’iPhone livré dans le SDK gratuit d’Apple).

Remarques

— Il est très facile d’étendre ce système pour proposer, par exemple, des interfaces adaptées à d’autres supports, comme par exemple MSIE sur Windows Mobile. Il suffit de créer des dossiers des squelettes supplémentaires et des tests dans mes_options.php.

— Ce fonctionnement simplissime est permis dans les versions récentes de SPIP (sauf erreur, à partir de la 1.9), car celle-ci gère des systèmes de cache différents selon le nom des dossiers de squelettes. Auparavant, on n’aurait pas pu réaliser cela facilement car, les adresses (URL) des différentes pages dans les deux versions étant identiques, on n’aurait pas eu deux versions différentes des pages en cache.

— Le kit de développement pour iPhone a été largement commenté, mais une utilité est largement ignorée : ce kit n’est pas seulement utile pour développer des applications natives sur iPhone (et, pour cela, il faut être un gros velu du code), mais également pour simplement créer des sites Web adaptés à l’iPhone (c’est-à-dire simplement du code HTML standard adapté à l’affichage sur un « petit » écran). En effet, le SDK (gratuit) d’Apple contient un « simulateur d’iPhone » qui contient Safari ; il suffit de lancer ce simulateur, d’y lancer Safari et d’entrer l’adresse à tester. On peut de cette façon tester ses squelettes sur un « faux » iPhone, ultra réactif, sans avoir besoin de le faire sur un véritable iPhone (Mac Intel uniquement).

Il suffit de faire attention au fait que la connexion depuis un iPhone ou un iPod est beaucoup plus lente qu’avec le simulateur, et que les différentes animations Javascript (j’utilise jQuery directement pour la version iPhone) sont aussi beaucoup rapides sur le simulateur que sur un véritable iPhone.

— « I’m one happy webmaster » : notre version de Flip-Zone pour iPhone a été référencée sur le site d’Apple, et a obtenu le label « Staff Pick ».

  • Nicolas Hoizey
    Avril 2008

    Superbe adaptation à l’iPhone/iPod Touch, notamment la navigation dans les collections par glissement, bravo !

    Par contre, je viens de tester avec mon iPod Touch, il faut "cliquer" deux fois sur "sommaire" pour s’y déplacer, le premier "click" semble le charger sans nous y envoyer...

  • jacques
    Juillet 2008

    Bonjour ,

    mon site est le suivant : seishokan.be.ma , j’avais vu le web toolkit de beeweb permettant à Wordpress , Joomla d’être vu par des Ipod ou Itouch ou tout autre mobile , dommage le cms spip pas repris. Sur la zone de spip , on m’a recommandé Ispip , plugin que j’ai installé cependant....

    Il tourne sous spip 192d et le squelette sarka 2.02 , j’ai installé le plugin Ispip,vu que je n’ai pas de Ipod ni Iphone ,que je n’ai pas de Mac à disposition , j’ai utilisé Safari comme recommandé cependant lors de ma demande de référencement Ipod et Iphone , l’admin du site m’a renvoyé ce message :

    "PArcontre il y a des problemes avec pour plug in spip. Il est pas possible de revenir dans les pages precedente, et le format de la page n’est pas bonne...."

    Comment puis-je corriger ce blème car en regardant le site avec safari , cela me semblait bon toutefois .... Une petite aide serait la bienvenue ! Un truc à ajouter peut-être ?

    Bien à vous ,

    Jacques

    P.S comment simuler un Ipod ou Itouch sous Win Xp et où trouver votre squelette pour site Iphone ? Apparement,peut-être, quelques différences par rapport à Ispip ?

  • glums
    Juillet 2008

    Salut Arno* !

    Magnifique contrib, mais j’ai des soucis avec, je te fais un récap rapide, crée le fichier "mes_options.php" dans "ecrire", crée un dossier "iphone" à la racine du serveur, crée dedans le fichier "sommaire.html". Je visualise le site sur iphone 3G, je vois la home standard de mon dossier "squelettes" et pas "iphone", j’ai recalculé le cache pourtant. Une "Idée..." ??

    Merci et BRAVO !!!

  • ARNO*
    Juillet 2008

    Salut Karim,

    — Tout d’abord, note que désormais, il est conseillé de placer mes_options dans /config plutôt que dans /ecrire.

    — Essai de mettre un

    dans ton fichier d’options, pour voir ce qu’il affiche.

    Il y a des chances que ça fonctionne à partir de PHP 4.1.

    Si ça ne te retourne rien, mets

    dans ton fichier pour forcer l’affichage de toutes les variables que te passe le serveur, et repère laquelle contient la mention de ton iphone.

  • glums
    Juillet 2008

    (re)

    Super merci, je test je te tiens au courant...

    ++

  • glums
    Juillet 2008

    (re :)

    Ca marche !!!, j’ai fait les tests cités ci-dessus dans "mes_options.php, je suis en php 5.1 et detection du brouteur, mis "mes_options.php" dans "config" sans vider le cache et ça marche !!!

    Ca m’embête de pas comprendre pourquoi car je n’ai rien fait d’exceptionnel, m’enfin ça fonctionne.

    Encore merci et encore BRAVO !!!

  • Balme
    Décembre 2009

    Bonjour,

    Moi j’ai tout fait comme décrit ci-dessus, mais je n’ai aucun affichage sur mon Iphone et ça me vire la barre "admin" sur la page sommaire.
    Peut être que cela vient du fait que mon site spip est dans un dossier et non à la racine !
    http://www.oulala.net/Portail

    Une idée ? Merci

  • filnug
    Mai 2010

    Bonjour,

    Y a t il également une solution pour qu’un smartphone sous android pointe vers le squelette iphone ? Comment faire pointer l’ensemble des smartphones et ipad vers le bon squelette ?

    Je serai curieux de comprendre le principe vu que vous avez déjà réalisé un site pour ipad !?!!!

    Merci pour ce tuto et bravo !!

Qui êtes-vous ?
Votre message

Ce formulaire accepte les raccourcis SPIP [->url] {{gras}} {italique} <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.