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

  • 5

    Bonjour, j’en profite pour poser moi aussi une question.

    Lorsque je saisis l’adresse : « http://mon_site/?page=ispip#_art1 » dans mon navigateur, je suis automatiquement redirigé vers la page « http://mon_site/?page=ispip#_home ».

    Est-ce qu’il faut saisir les adresses d’une manière différente pour accéder à une page particulière ?

    Merci.

    • Si tu entres ton adresse directement dans la barre d’adresse essaye :

      -  http://mon_site/?page=ispip-article&id_article=#id_article
      -  http://mon_site/?page=ispip-rubrique&id_rubrique=#id_rubrique

      #id_rubrique et #id_article correspondent au numéro de l’article ou de la rubrique souhaitée.

      J’espère que c’est ce dont tu as besoin.

    • J’avais déjà essayer mais je rencontrais un problème :

      La mise en page iPhone est perdue (voir screenshot).

      Je suis en local pour l’instant mais j’ai testé sur un site et le problème est le même !

      Comment peut-on garder la mise en page ?

      Merci

    • Apparemment il n’y a aucun fichier .css qui s’applique lorsqu’on tape ce type d’adresse, problème de lien ? exception non gérée ? Je cherche :P

    • Est-ce qu’il existe une doc iSPIP svp ? Ou, pourrait-on m’expliquer les liens entre ispip.html et tous les autres fichiers html ? Merci

    • Bonjour Jaina,

      la structure de iSPIP est basé sur le framework iUI dont vous pouvez trouver des infos par ici : http://code.google.com/p/iui/

    Répondre à ce message

  • 3
    Boyquotes

    Bonsoir,

    Tous d’abord, merci pour se plugin efficace.

    Je souhaite que Ispip prenne en charge une page annonce.html , pour cela j’ai créer une page ispip-annonce.html, mis une boucle dedans et dans la page ispip.html j’ai créer une boucle ANNONCES (à la manière de la boucle_menu_princ(RUBRIQUES) du même fichier) qui créer les liens vers la page ispip-annonces.html , les liens se génère bien, au survol il ont la même forme que les rubriques :

    spip.php?page=ispip-annonce&id_annonce=2081

    Mais quand je clique dessus, ça m’envoi bien un nouvel affichage mais avec comme adresse :

    spip.php?page=ispip#___5__

    Hors il faudrait sans doute arriver à ça

    spip.php?page=ispip#_ann1

    Je pense que ça vient du javascript mais n’arrive pas à mieux cerner le problème.
    Si vous avez une idée de ce problème, vient’il du fait que ce n’est pas un objet spip standard (article, breve, rubrique) ?

    Merci.
    Bonne soirée/nuit.

    • Quel est le squelette de votre page ispip-annonce ?

    • Bonjour,

      Dans mon fichier ispip-annonce.html j’ai ce code (pour tester ma boucle)

      <BOUCLE_annonces_ispip(ANNONCES) {id_annonce}>
      #ID_ANNONCE
      #PRIX_LOYER
      			<hr />
      
      	
      		<p><a class="whiteButton" href="#URL_PAGE{ispip}" target="_self"><:accueil_site:></a></p>
      		
             </div><!--.panel-->		
             
      </BOUCLE_annonces_ispip>

      Il s’agit d’une boucle qui utilise le plugin SPIPImmo.

      Et dans ispip.html , j’ai ajouté ça pour faire le lien vers les annonces :

      		<BOUCLE_menu_princ_annonces(ANNONCES) {0,3} {par prix_loyer}>
      			[<li><a href="#URL_PAGE{ispip-annonce,id_annonce=#ID_ANNONCE}">(#ID_ANNONCE)</a></li>]
      		</BOUCLE_menu_princ_annonces>

      Voilà.

      Nicolas.

    • Bonjour,

      J’ai trouvé mon erreur, il fallait ajouté un div avec un id particulier pour que le javascript prenne le relais pour l’affichage,

      _ 		<div id="ann[(#ID_ANNONCE)]" class="panel"[ title="(#TITRE|supprimer_numero|attribut_html|couper{80})"]  

      donc le code ispip-annonce.html est maintenant comme ça :

      <BOUCLE_annonces_ispip(ANNONCES) {id_annonce}>
      		<div id="ann[(#ID_ANNONCE)]" class="panel"[ title="(#TITRE|supprimer_numero|attribut_html|couper{80})"]  selected="true">
      
      #ID_ANNONCE
      #PRIX_LOYER
      			<hr />
      
      	
      		<p><a class="whiteButton" href="#URL_PAGE{ispip}" target="_self"><:accueil_site:></a></p>
      		
             </div><!--.panel-->		
             
      </BOUCLE_annonces_ispip>

      Bonne journée.

    Répondre à ce message

  • Oui c’est ça, Samuel, le fichier CSS (iUI.css) est dans le dossier iUI, les images sont dans ce même dossier. Tu peux bien sûr modifier les éléments d’interface à ta guise.

    Répondre à ce message

  • 1
    Samuel Hall

    Je souhaiterais adapter iSPIP pour mon site en modifiant l’aspect graphique de facon a ressembler aux application iphone du type « les inrocks » ou « le monde ».
    Est ce realisable ?
    Quel est la feuille de style a modifier sur iSPIP ?

    • Euhhh Désolé mais je ne saurai pas trop dire. Pour ma part, je n’ai pas développé le squelette, je l’ai juste passé en plugin. Il faudrait voir avec Abel Poucet.

      iUi est une librairie graphique pour iPhone. Une grosse partie du design est donc gérée par iUi. Cependant les CSS utilisées sont celles définies par le fichier ispip_css.html
      C’est ce fichier qui est chargé par ispip et non le fichier situé dans le sous-répertoire iUi qui lui est le fichier css d’origine.

      Cordialement

    Répondre à ce message

  • jaipastoutcompris

    Quel est la difference entre le dossier « img_ispip » et « iui » puisqu’on retrouve les images dans les 2 dossiers ?

    Répondre à ce message

  • 1

    Hello

    Comment faire pour que l acces d un site via iSpip soit restreint a certains visiteurs seulement ?
    Dupliquer les rubriques concernees et utiliser Acces Restreint ...
    Une autre idee ?

    • Si vous utilisez Accès Restreint, les rubriques filtrées sur le site public sont normalement également filtrées avec iSPIP.

      En effet, Accès Restreint surcharge toutes les boucles du site. Cela concerne donc tous les squelettes.

      Cordialement

    Répondre à ce message

  • Je me réponds à moi-même :
    A priori pas de soucis avec « self » au lieu de « blank »

    Répondre à ce message

  • Désolé,

    Encore une question : Est il nécessaire pour iSpip d’ouvrir une nouvelle page pour chaque lien consulté ?
    ça peut se régler ?

    Répondre à ce message

  • 1

    Hello,

    J’ai finalement modifié ma page d’accueil iSpip en excluant les rubriques non voulues
    « id_secteur !IN 1,2,3,4 .... »

    Merci

    • C’est en effet le plus simple, tu adaptes le squelette de la page d’accueil ispip et tu la place dans ton répertoire squelettes.

      Une autre possibilité consiste à intégrer une option dans le fonds CFG d’iSpip et de modifier le squelette en conséquence : si on a lister une liste de rubrique à exclure dans le CFG, alors elles sont exclues de la page d’accueil, sinon on affiche tout.

      Cordialement

    Répondre à ce message

  • Bonjour Joseph,

    Y a il un moyen (simple) de n’afficher que certaines rubriques du site lorsqu’on le visionne sous iSPIP (et non la totalité comme actuellement) ?
    Merci d’avance de votre réponse

    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