Squelette iSPIP

votre site SPIP sur iPhone

iSPIP fournit une version d’un site SPIP optimisée pour les terminaux iPhone et iPodTouch basée sur la bibliothèque iUI développée par Joe Hewitt.

Note : le plugin est d’ores-et-déjà opérationnel. Cependant, ses fonctionnalités sont encore limitées (voir plus bas).

Historique

iSPIP correspond au portage sous forme de plugin d’un squelette développé par Abel Poucet et nommé MobileSPIP.

Principe

Une fois activé, ce plugin fournit une version optimisée de votre site pour l’iPhone et l’iPod Touch accessible à l’adresse http://monsite.example/spip.php?page=ispip.

Exemples :

Installation

iSPIP étant développé dans SPIP-Zone, vous pouvez y récupérer la dernière version sous forme de fichier zip. Il s’active comme tout plugin (voir la documentation officielle).

Personnaliser votre ’apple-touch-icon’

Il s’agit d’une sorte de super favicon utilisé par l’iPhone / iPod Touch pour rajouter un accès direct à un site sur le springboard (le « bureau » de l’iPhone). Vous trouverez plus d’informations sur cette page.

Pour personnaliser l’apple-touch-icon de votre site, créer une image PNG de 57x57 pixels ou plus, nommez-là apple-touch-icon.png et placez là dans le répertoire squelettes. Elle viendra surcharger l’icône fournie par iSPIP.

Compatibilité

iSPIP est compatible avec les plugins Accès restreint et Accès restreint par groupes : les rubriques en accès restreint seront normalement filtrées. Pour le moment, iSPIP ne propose pas encore de formulaire d’identification permettant d’avoir accès au contenu restreint.

Le plugin est compatible avec le plugin agenda2. La gestion des événements est faite sous forme de liste. Seuls les prochains événements sont gérés pour l’instant.

Nécessaire

Le plugin sélection d’articles qui permet de changer l’ordre des articles dans les rubriques.

Nouveautés

version 1.1

  • intégration de la gestion des brèves,
  • affichage des prochains événements ( plugin agenda nécessaire ).
  • utilisation du plugin sélection d’articles pour changer l’ordre d’affichage dans les rubriques

Détecter un iPhone/iPod Touch et proposer une redirection vers iSPIP

Voir http://abel.foxylounge.com/Detecter...

En chantier...

Voici une liste non exhaustive de fonctionnalités à intégrer à iSPIP :

  • Personnalisation et configuration avec CFG
  • Gestion correcte des liens internes
  • Internationalisation du squelette
  • Ajout d’un formulaire de choix de la langue
  • Gestion des traductions
  • Gestion des forums
  • Formulaire d’identification
  • Gestion correcte des liens internes entre articles
  • Détection de l’iphone sur les pages standard du site et proposition le cas échéant de basculer sur la version iphone

Captures d’écran





Discussion

57 discussions

  • Bonjoru, je viens de faire une mise à jour de votre plugin sur mon site et voila le message qui s’affiche....

    Impossible d’activer le plugin ../plugins/auto/ispip_2_0
    Nécessite SPIP en version [2.0.0 ;2.0.99] minimum.

    voila ce qui est affiché sur mon site pour SPIP :
    SPIP 2.1.10 [17657] est un logiciel libre distribué sous licence GPL

    Est-ce un pb de mon site ou un bug du plugin ?

    merci

    Répondre à ce message

  • 9

    Bonjour,

    Merci beaucoup pour ce plug-in.
    J’ai un petit souci avec les liens externes à l’intérieur de mes articles : quand on clique dessus, ils ne s’ouvrent pas (sauf si on fait un clic droit et qu’on ouvre dans une nouvelle fenêtre).
    Comment faire pour rajouter target=« _self » de manière automatique ? (je n’ai aucune target).
    Merci beaucoup !

    • je pense que ce problème tient plus à spip lui même dans l’utilisation de la barre typo qui génère les raccourcis spip, qu’au plugin.
      souvent j’ai été obligé de remplacer dans le target, le spipout par blank..
      perso je souhaite que ces liens s’ouvrent sur une nouvelle fenêtre mais je n’ai pas trouvé où faire la modif.
      avis aux amateurs confirmés !

    • D’accord, merci de ton retour.
      comment as-tu fait pour remplacer dans le target, le spipout par blank.. Tu es allé dans quel fichier ?
      Merci !

    • dans tous les fichiers comportant les hyperliens càd article breve... surtout site.html

      remplacer class=« spip_out » par target=« _blank »

    • Ok, en fait mes liens ne fonctionnent toujours pas. C’est peut être effectivement lié à la barre typo.
      Pourtant j’ai vu certains sites utilisant le plug in qui ont leurs liens qui fonctionnent bien (et d’autres qui ne fonctionnent pas...).
      Si quelqu’un a une solution...

    • Tu peux donner les urls de ces sites ?

    • Salut tout le monde,

      j’ai le même problème de liens externes... je ne trouve pas où iUI les gère.

      Pour ma part, je souhaiterais que tous les liens à l’intérieur des articles s’ouvrent dans la fenêtre entière (_self) plutôt que dans l’interface iUI (en ajax) car ça pose pas mal de problèmes (pas de redimensionnement des pages par le navigateur DolphinHD sous Android, ouverture de PDF impossible...).

      J’ai cherché sur http://code.google.com/p/iui/ mais je n’ai rien trouvé...

      Voilà, si quelqu’un à une piste...

      Merci pour ce plugin en tout cas :)

      jeanmarie

    • La librairie UI utilisée pour iSpip est clairement destinée au seul navigateur Safari de l’Iphone. Il faut reconstruire sur une autre librairie pour proposer un squelette mobile multi-plateforme.

    • Si je peux me permettre, jai conçu un jeu de squelette qui semble fonctionner sur tous les navigateurs mobiles, et qui devrait resoudre votre probleme. Dans le cas contraire, merci de m’en avertir.

      Plugin telechargeable ici
      Article sur Spipcontrib en cous de validation..

    • Salut,

      @ Cédric : ça se tient :) Merci pour la réactivité...

      @ Seds : je teste ton plugin et je ferai des retours... merci pour l’info.

      jean marie

    Répondre à ce message

  • 4

    Bonjour à tous,
    L’un de mes clients qui me commande un site bilingue, souhaite que je lui installe une version de son site pour IPhone. J’ai vu que la gestion des langues n’est pas encore supportée par ce plugin.
    D’où ma question : avez-vous des conseils à me donner pour que ses visiteurs puissent accéder, selon leurs besoins, à une version française ou anglaise sur leur IPhone ? Par exemple : comment puis-je développer le multilinguisme dans le site normal pour que la consultation sur mobile gère le choix de la langue ?
    Merci mille fois pour vos pistes et conseils.

    • Tout dépend comment est implémenté la gestion des langues dans tes squelettes.

    • Merci pour ton aide. En fait, c’est un peu le sens de ma question. Avant de démarrer le développement, j’aimerais savoir comment implémenter le multilinguisme pour que le passage sur IPhone se fasse au mieux. Merci d’avance.

    • Personnellement je te conseille de ne pas utiliser ce plugin qui n’est pas complet et, effectivement, ne gère pas le multilingue.

      Je te conseillerai d’utiliser tout simplement une CSS distincte pour iPhone et autres mobiles que tu appellera dans head avec :

      [(#REM) Feuille de styles pour iPhone, Android et smartphones ]
      <link media="only screen and (max-device-width: 480px)" href="(#CHEMIN{mobile.css}|direction_css)" type="text/css" rel="stylesheet" />

      Ainsi tu géreras ta version mobile avec le même squelette que ta version desktop, tu peux donc gérer ton multilingue comme tu l’entends. Pour les CSS, tu peux t’inspirer de UiUI Kit : http://code.google.com/p/iphone-universal/

      Tu perdras peut-être les animations de iUI mais de toutes façons elles sont lourdes et saccadent sur iPhone. Si tu veux à tout prix des animations tu peux essayer jQtouch, qui est basé sur jQuery et qui est fluide : http://www.jqtouch.com/

      Bonne route !

    • Remarque très pertinente, les CSS permettent plein de choses ;)

      Cette technique permet de rester dans les clous et de prendre en charge tous les OS mobiles. Pas besoin de faire un truc spécifique pour les iOS d’Apple.

    Répondre à ce message

  • 4

    Salut et merci !

    Je cherche en vain à faire fonctionner le plugin avec des boucles de pagination.

    Y a t il une solution ?

    Merci

    • Tu demandes quelque chose de compliqué, l’API javascript de l’interface est succepible de rentrer en conflit avec le javascript made by jquery utilisé natif dans spip.

      pas facile de répondre autrement pour l’instant.

    • Ah, dommage....

      Peut-on passer des paramètres dans l’url et les récupérer avec #ENV ?

    • J’ai une solution pratique qui fonctionne en utilisant le critère debut_xxx,10 dans une boucle article sur une page rubrique :

      <a href="[(#URL_PAGE{ispip-rubrique,id_rubrique=#ID_RUBRIQUE}|parametre_url{debut_event,#ENV{debut_xxx}|plus{10}})]">Suivant</a>
    • Tu peux envoyer le code modifié en privé que je valide ?

      L’idéal serait de valider sur un site ... une URL, puis d’intégrer directement tes modifications dans le SVN de la zone ... c’est un peu fait pour ça ;)

    Répondre à ce message

  • 1

    Bonjour,

    Il me reste un petit problème pour lequel je sollicite votre aide.

    J’utilise Sarka-SPIP et le mot clé « invisible » associé à une rubrique et aux articles qui ne doivent pas apparaître dans l’espace public. Il suffit d’ajouter à mes_fonctions.php dans /squelettes le code suivant :

    //pour rubrique des articles invisibles
    define('_PERSO_MOT_SECTEURS_SPECIALISES', 'invisible');
    define('_PERSO_TYPE_SECTEURS_SPECIALISES', 'motcle');
    define('_PERSO_FOND_SECTEURS_SPECIALISES', '-');

    Comment adapter le squelette iSPIP à cela pour que la rubrique « invisible » et son contenu n’apparaisse pas sur l’iPhone comme ICI ?

    Merci

    • Résolu le problème ci-dessus avec un filtre interdisant l’accès à la rubrique qui regroupe les articles invisibles. Un peu brutal sans doute ...

    Répondre à ce message

  • Bonjour,

    Merci pour ce plugin.

    Je ne dispose pas d’iPhone ni de Mac et je ne peux pas téléphoner toutes les 5 minutes à un malheureux équipé de la sorte pour lui demander si ça marche !

    On peut tester l’apparence de ce qu’on réalise avec un simulateur d’iPhone. Il y en a plusieurs dont certains fonctionnent en ligne.

    J’ai fini par dénicher iBBDemo2.

    iBBDemo2 a l’avantage de simuler une connexion d’iPhone côté serveur, ce qui provoque sa détection comme le montre l’extrait suivant du log de notre hébergeur :

    « Mozilla/5.0 (iPhone ; U ; CPU like Mac OS X ; en) AppleWebKit/420.1 (KHTML, like Gecko) Version/3.0 Mobile/3B48b Safari/419.3 »

    Il ne s’agit que d’un simulateur qui reproduit l’affichage sur un iPhone et pas d’un emulateur, il n’a donc aucune des fonctions propres à l’iPhone mais ça donne ça ...

    J’espère que ça pourra être utile !

    Répondre à ce message

  • cela fonctionne bien et avec le source, on peut arriver à ce que l’on veut.
    il me reste juste un petit soucis dans les articles avec les liens internes écrit comme ceci [lien interne->40].
    Fonctionnant avec des url propres, spip va me générer des url du style http://monsite.com/une-url-propre.html mais étant en train de naviguer via ispip, il faudrait rester dans une syntaxe du type
    http://monsite.com/spip.php?page=ispip-article&id_article=40
    Par contre, dans les répertoires, cela est correctement géré pour adresser les articles

    EDIT : mea culpa, je vois que c’est mis dans la liste des choses à faire

    Répondre à ce message

  • 4

    Bonsoir
    merci pour ce squelette, là je me retrouve devant un véritable casse-tête, je poste ici - car sur le site d’Abel, je n’arrive pas à laisser un message.
    Donc j’ai pris son java script pour détecter un iphone et le rediriger par le prompt sur le squelette adapté pour iphone - ispip.
    Sauf que j’ai fait une bêtise, en vouloir faire vite j’ai laissé l’adresse générique http://iphone.monsite.com/
    -  et me voilà piégé, même après correction, l’iphone, le mien, veux toujours ouvrir http://iphone.monsite.com/ je pensais d’abord que c’était mon iphone qui avait cela dans un cache quelconque - que je n’arrivais pas à effacer (après avoir vidé tous les cache de spip, y compris par ftp)
    mais voilà que je fais tester quelqu’un d’autre avec le sein, même chose
    ça doit donc être lié à spip, mais où

    une idée ?

    site culturelle

    Merci pour tout
    Martin

    • Bonjour,
      je n’ai pas la réponse à votre question. Désolé.
      D’autant plus que dans le code source de votre page j’ai bien :

      <script type="text/javascript">
          function iPhoneAlert() {
          if((navigator.userAgent.match(/iPhone/i))||(navigator.userAgent.
          match(/iPod/i))){
          var question = confirm("Souhaitez-vous naviguer sur le site optimisé pour iPhone?")
          if (question){
         window.location = "http://culturelle.asso.univ-poitiers.fr/spip.php?page=ispip";
         }else{
         window.location = "http://culturelle.asso.univ-poitiers.fr/";
         }
         }
         }
       </script>

      ...

    • Merci quand même, n’ayant pas trouvé la parade, j’ai fini par virer le script...
      recommencerai peut-être plus tard.

    • Bonsoir,

      J’ai eu le même problème que Tinou quand j’ai mis le script dans la page inc-head.html. Quand on l’insère entre les balises

      du squelette sommaire.html, ça marche très bien.

      Merci Abel pour ce beau plugin bien utile !

    • Bonne nouvelle !

      D’autant plus que ne mettre l’avertissement uniquement sur la page d’accueil est moins envahissant pour le visiteur qui ne souhaiterait pas utiliser le site mobile.

    Répondre à ce message

  • 3

    Bonjour

    J’essaie de limiter à 10 le nombres articles affichés dans une boucle, mais ça ne semble pas fonctionner, est ce normal docteur ?

    Merci pour le plugin

    • C’est mieux avec le code que j’utilise ...

      Bonjour

      Merci pour le plugin

    • <BOUCLE_articles_derniers(ARTICLES) {lang} {par date}{id_mot=4}{inverse} {0,10}>
    • En relisant mon script ce matin, j’ai trouvé la boulette que j’ai fait, c’est un erreur de ma part.

      Merci encore

    Répondre à ce message

  • bonjour
    en personnalisant la page d’accueil, avec la liste des x derniers articles (titre+chapo), j’aimerais ajouter également le logo de l’art.
    je voudrais faire un affichage de l’article en 2 colonnes dans le lien vers la page : titre+chapo à gauche et logo à droite réduit à 150/100 par ex.
    seulement je n’y arrive pas. j’ai réussi à faire les colonnes mais à me fout un bins dans l’affichage général de la page : la barre « group » et les rubriques remontent et se mélangent aux articles. Oh ! Reur !

    j’ai déjà vu ça en bidouillant le skel, mais là j’ai tout essayé sauf la bonne solution semble-t-il

    une idée ? solution pour un affichage en colonnes sur iSpip ?

    Répondre à ce message

Ajouter un commentaire

Avant de faire part d’un problème sur un plugin X, merci de lire ce qui suit :

  • Désactiver tous les plugins que vous ne voulez pas tester afin de vous assurer que le bug vient bien du plugin X. Cela vous évitera d’écrire sur le forum d’une contribution qui n’est finalement pas en cause.
  • Cherchez et notez les numéros de version de tout ce qui est en place au moment du test :
    • version de SPIP, en bas de la partie privée
    • version du plugin testé et des éventuels plugins nécessités
    • version de PHP (exec=info en partie privée)
    • version de MySQL / SQLite
  • Si votre problème concerne la partie publique de votre site, donnez une URL où le bug est visible, pour que les gens puissent voir par eux-mêmes.
  • En cas de page blanche, merci d’activer l’affichage des erreurs, et d’indiquer ensuite l’erreur qui apparaît.

Merci d’avance pour les personnes qui vous aideront !

Par ailleurs, n’oubliez pas que les contributeurs et contributrices ont une vie en dehors de SPIP.

Qui êtes-vous ?
[Se connecter]

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici

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

Ajouter un document

Suivre les commentaires : RSS 2.0 | Atom