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

  • Pour info, Billou, il est important que la boucle mots_de_art reste en dehors de la div #article. En effet, ainsi, la liste des mots-clefs liés à l’article n’apparaît pas sur la page, mais elle s’affichera (avec un joli slide) lorsque l’on tapottera sur le bouton « mot-clefs ».

    Si on veut la mettre dans la div #article la liste s’affichera directement en bas de la page article, il faudra alors virer le bouton « mots-clefs » qui ne servira plus à rien.

    La boucle corrigée est donc :

       </div><!-- div id article -->
    
                    [(#REM) MENU MOTS CLES ]
                    <B_mots_de_art>
                    <ul id="mots-art[(#ID_ARTICLE)]" title="Mots-clés">
                    <BOUCLE_mots_de_art(MOTS) {id_article}>
                            <li><a href="#URL_PAGE{ispip-mot,id_mot=#ID_MOT}">#TITRE</a></li>
                    </BOUCLE_mots_de_art>
                    </ul>
                    </B_mots_de_art>
    
            </BOUCLE_articles><!-- boucle principale -->

    En tout les cas, merci encore pour ton intérêt !

    Abel

    Répondre à ce message

  • C’est corrigé Billou. Merci.

    Répondre à ce message

  • Bonjour,

    Merci pour cette contribution très utile !

    J’ai quelques remarques à faire néanmoins sur le code du plugin. Il y a quelques erreurs dedans qui supprime des fonctionnalités, comme par exemple l’affiche des mots-clés associés à un article.

    La boucle qui permet ceci ne s’affiche pas car en dehors de la div qui affiche l’article, de plus l’adresse qui pointe vers la page qui affiche la liste des articles associés au mot-clé est erroné :

    Fichier ispip-article.html à la fin, voici le code que l’on y trouve :

        </div><!-- div id article -->
    
    		[(#REM) MENU MOTS CLES ]
    		<B_mots_de_art>
    		<ul id="mots-art[(#ID_ARTICLE)]" title="Mots-clés">
    		<BOUCLE_mots_de_art(MOTS) {id_article}>
    			<li><a href="#URL_PAGE{ispip-mot,id_mot=#ID_mot}">#TITRE</a></li>
    		</BOUCLE_mots_de_art>
    		</ul>
    		</B_mots_de_art>
    
    	</BOUCLE_articles><!-- boucle principale -->

    Or il devrait être :

        	[(#REM) MENU MOTS CLES ]
    		<B_mots_de_art>
    		<ul id="mots-art[(#ID_ARTICLE)]" title="Mots-clés">
    		<BOUCLE_mots_de_art(MOTS) {id_article}>
    			<li><a href="#URL_PAGE{ispip-mot,id_mot=#ID_MOT }">#TITRE</a></li>
    		</BOUCLE_mots_de_art>
    		</ul>
    		</B_mots_de_art>
            </div><!-- div id article -->
    </BOUCLE_articles><!-- boucle principale -->

    En résumé : Déplacement de la balise de fin de div, et le lien du mot clé pointait vers id_mot=#ID_mot au lieu de id_mot=#ID_MOT.

    J’ai modifié d’autres choses pour que le site mobile corresponde plus à mes besoins, mais je ne sais plus si dans le tas il y avait d’autres erreurs. Il ne me semble pas !

    Bonne continuation !

    PS : Je viens de voir via le premier message de ce forum que l’erreur était aussi présente dans ispip.html, apparemment un vilain copier/coller est responsable =D

    Répondre à ce message

  • Bonjour,

    Merci pour ce plugin, il est bien fait !

    Malheureusement javascript n’est pas pris en charge je crois, du moins la lame javascript des blocs dépliables de couteau suisse ne fonctionne pas.

    Quelqu’un saurait-il comment faire fonctionner les blocs dépliables ?

    Merci.

    Répondre à ce message

  • 2

    Merci pour cette contribution très à la mode (à la veille de la sortie de l’iPhone 3G).
    Y aurait-il un moyen pour rediriger automatiquement vers la version iPhone du site dès qu’une connection iPhone est reconnue ?
    Arno avait proposé ça :
    http://www.paris-beyrouth.org/Une-version-iPhone
    Est ce incorporable dans le plugin ?
    Bravo en tout cas !

    • Bonjour,

      En attendant d’intégrer la technique au plugin, ci dessous la marche à suivre optimisée pour le plugin.

      Grâce à un javascript on va détecter si le périphérique utilisé par le visiteur pour naviguer sur votre site est un iPhone ou un iPod Touch. Ensuite, si tel est le cas on va lui proposer de naviguer sur la version optimisée du site à l’aide de la boite de dialogue par défaut de l’iPhone.

      Il ne s’agit pas d’une redirection automatique, ici on laisse le choix à l’usager d’utiliser la version optimisée ou pas. L’usager peut, pour diverses raisons, préférer utiliser la version « originale » du site.

      1/ Le javascript proposant le choix au travers d’une boite de dialogue, à mettre en tre les balises head de la page sommaire :

      <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 = "#URL_PAGE{ispip}";
      }else{
      
      }
      }
      }
      </script>

      3/ Appeler la fonction avec la balise body de la page sommaire :

      <body onLoad="iPhoneAlert();">

      Pour en savoir plus avec des captures d’écrans : http://abel.foxylounge.com/Detecter-un-iPhone-iPod-Touch-et.html

    • En complément au message d’Abel Poucet ajoutant pour le visiteur le choix de naviguer en mode iPhone ou classique, voici une version :

      1. valide en XHTML Strict 1.0 (onload plutôt que onLoad)
      2. qui n’intègre pas le code d’alerte si le plugin n’est pas activé.
      [<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 = "(#URL_PAGE{ispip})";
      }else{
      
      }
      }
      }
      </script><!-- fin script iPhoneAlert -->]
      
      </head>
      <body dir="#LANG_DIR" class="#LANG sommaire"[ (#PLUGIN{ispip}|=={1}|?{ onload="iPhoneAlert();"})]>

      Ce code sera intégré à la prochaine mise à jour des squelettes d’Alternatives.

    Répondre à ce message

  • 1
    Nicolas Hoizey

    Excellent !

    Ceci étant un plugin, et non un « simple » jeu de squelettes, ne faudrait-il pas le déplacer sur la zone ?

    Répondre à ce message

  • 3
    Emmanuel Saracco

    Salut,

    Merci pour le plugin :-)

    Une petite erreur : dans le fichier ispip.html, dans la boucle des mots-clés, on a id_mot=#ID_mot au lieu de id_mot=#ID_MOT.

    a+

    • Corrigé. Merci pour ta vigilance.

    • Tom Dissing

      Its a fantastic plugin !
      well written, a bit slow.. (??)
      Maybe its just in my end, but Im very happy..

    • 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é votre plugin.

      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 ,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 !

      Bien à vous ,

      Jacques Chantraine

    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