SPIP-Contrib

SPIP-Contrib

عربي | Deutsch | English | Español | français | italiano

255 Plugins, 183 contribs sur SPIP-Zone, 197 visiteurs en ce moment

Accueil du site > Squelettes > Squelettes spéciaux > Squelettes pour petits écrans > iSPIP > Squelette iSPIP

Squelette iSPIP

votre site SPIP sur iPhone

11 juin 2008 – par Abel Poucet, Joseph, jsb – 101 commentaires

33 votes

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





Retour en haut de la page

Vos commentaires

  • Le 7 août à 11:20, par Eli

    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 !

    • Le 12 août à 21:14, par seds

      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 !

    • Le 15 août à 17:03, par Eli

      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 !

    • Le 20 août à 11:27, par seds

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

      remplacer class="spip_out" par target="_blank"

    • Le 26 août à 22:52, par Eli

      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...

    Répondre à ce message

  • Le 22 août à 18:07, par seds

    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

  • Le 13 août à 23:38, par seds

    ajouter les forums.
    à mon niveau, je n’ai pas réussi à recréer les formulaires pour en poster en ligne, donc avec les codes suivants, ils seront juste en consultation et c’est déjà pas mal !

    -  ispip-article, ispip-breve, etc :
    je n’ai pas réussi à inclure une page avec les codes globaux, donc je les ai mis sur chaque des pages en adaptant leurs codes respectifs

    code pour ispip-article.html :

    [(#REM) Nombre total de messages ]
    <BOUCLE_decompte(FORUMS) {id_article ?}{plat} />
    <hr />
    <div class="total">
    [(#TOTAL_BOUCLE|>{0}|?{#TOTAL_BOUCLE,''})
    [(#TOTAL_BOUCLE|=={1}|?{Message,Messages})]]<//B_decompte>
    </div>
    [(#REM) Messages du forum ]
    <B_forums>
    <ul class="forum">
    <BOUCLE_forums(FORUMS) {id_article ?} {par date}>
    <li class="forum-fil">       
    <div class="blabla">
    <div class="forum-tete">                               
    <strong class="#EDIT{titre} forum-titre">#TITRE</strong>
    <br>                               
    <small>[(#DATE|affdate_jourcourt)][&nbsp;(#DATE|heures)][:(#DATE|minutes)][, <:par_auteur:> <span class="#EDIT{qui}">(#NOM|couper{80})</span>]</small>               
    </div>       
    <div class="#EDIT{texte} forum-texte">               
    [(#TEXTE|image_reduire{300,300})]               
    [<p class="#EDIT{hyperlien} hyperlien"><:voir_en_ligne:> : <a href="(#URL_SITE)" target="_blank">>[(#NOM_SITE|sinon{[(#URL_SITE|couper{80})]})]</a></p>]               
    <BOUCLE_doc(DOCUMENTS){id_forum}>                       
    [(#EXTENSION|match{'^(gif|jpg|png)$'}|?{                               
    [(#MODELE{emb}|image_reduire{300})]                               
    ,                                       
    [(#LOGO_DOCUMENT|#URL_DOCUMENT)]                       
    })]                       
    </BOUCLE_doc>                                       
    </div>       
    </div>
    <B_forums_fils>
    <ul>               
    <BOUCLE_forums_fils(FORUMS) {id_parent} {par date}>               
    <li>               
    <div class="blabla">       
    <div class="forum-tete">                               
    <strong class="#EDIT{titre} forum-titre">#TITRE</strong>
    <br>                                               
    <small>[(#DATE|affdate_jourcourt)][&nbsp;(#DATE|heures)][:(#DATE|minutes)][, <:par_auteur:> <span class="#EDIT{qui}">(#NOM|couper{80})</span>]</small>                               
    </div>                       
    <div class="#EDIT{texte} forum-texte">                               
    [(#TEXTE|image_reduire{300,300})]                               
    [<p class="#EDIT{hyperlien} hyperlien"><:voir_en_ligne:> : <a href="(#URL_SITE)" target="_blank">>[(#NOM_SITE|sinon{[(#URL_SITE|couper{80})]})]</a></p>]       
    <BOUCLE_doc2(DOCUMENTS){id_forum}>
    [(#EXTENSION|match{'^(gif|jpg|png)$'}|?{       
    [(#MODELE{emb}|image_reduire{300})]
    ,               
    [(#LOGO_DOCUMENT|#URL_DOCUMENT)]
    })]
    </BOUCLE_doc2>                                                               
    </div>
    </div>               
    <BOUCLE_forums_boucle(boucle_forums_fils)></BOUCLE_forums_boucle>
    </li>
    </BOUCLE_forums_fils>
    </ul>
    </B_forums_fils>
    </li>
    </BOUCLE_forums>
    </ul>
    </B_forums>

    pour ispip-rubrique.html, ispip-breve.html, etc, remplacer id_article ? dans la BOUCLE_decompte et la BOUCLE_forums

    -  sur ispip.html, les 5 derniers messages - perso je les ai mis sous le groupe "Actualités"

    <li class="group">Derniers commentaires</li>
           
    <B_forums_liens>                       
    <BOUCLE_forums_liens(FORUMS) {plat} {par date}{inverse} {0,5}>       
    <li><a href="#URL_PAGE{ispip-article,id_article=#ID_ARTICLE}">[<b>(#DATE|affdate_court)</b> &ndash; ]#TITRE[, <:par_auteur:> <span class="#EDIT{qui}">(#NOM|couper{80})</span>]</a></li>               
    </BOUCLE_forums_liens>                                       
    </B_forums_liens>

    -  sur ispip_css.html :

    ajouter :

    /* * Habillage des forums */

    .total { color:#000; font-size: 1.2em; margin-bottom: 0.5em; font-weight: bold; }
    .blabla { background: #fff ; margin-bottom: 0.7em;  margin-right: 0.5em; padding-left: 0em; padding-top: 0em; border: 1px solid #C0C0C0;}

    ul .forum-tete { background: #C0C0C0; border-bottom: 1px solid #C0C0C0; padding: 0.5em; margin-bottom: 0em; }

    ul.forum { display: block; clear: both; padding: 0;  margin-bottom: 0.5em;}
    ul.forum, ul.forum ul { list-style: none; }

    .forum-fil { background: #c8c8c8 url(#CHEMIN{img_ispip/pinstripes.png}); padding-top: 0.7em; padding-left: 0.7em; padding-right: 0.7em; }

    .forum-fil ul { display: block; padding: 0; margin-left: 1em; }
    .forum-chapo .forum-titre, .forum-chapo .forum-titre a { display: block; margin: 0; padding: 0; font-weight: bold; text-decoration: none; color: #333; }
    .forum-chapo small {}
    .forum-texte { margin: 0; padding-top: 0em; padding-bottom: 0em; padding-left: 1.2em; padding-right: 0.5em; color: #333; }
    .forum-texte a { color: #919191; }
    .forum-texte a:hover { color: #919191; text-decoration: underline;}.forum-texte .forum-lien { margin-left: 0.5em;         font-weight: bold; }
    .forum-texte .forum-repondre-message { margin: 0; padding: 1px 0; text-align: right; }

    peut-être changer le background de ul .forum-tete, car celui-ci est adapté au design du site sur lequel je travaille

    • Le 14 août à 10:46, par seds

      je viens de m’apercevoir que le design css ne passe pas sur l’iphone..

    • Le 19 août à 15:12, par seds

      re !
      suffit de coller aussi les codes css de l’habillage de forums dans iui.css et iuix.css du dossier iui _ ;)

      ci-joint une tof des forums/iphone. attention les couleurs originales ont été modifiées, donc à réadaptées par vos soins

      PNG - 31.2 ko

    Répondre à ce message

  • Le 13 août à 23:56, par seds

    une dernière chose, plutôt une question :

    lorsque les rédacteurs ajoutent des vidéos à l’interieur des articles à l’aide de lignes de codes récupérées sur youtube, dailymotion etc, avec les dimensions évidemment incluses dans les codes, les dimensions dépassent le format de l’iphone.
    je ne souhaite pas modifier ces dimensions car cela les réduirait sur le site classique.

    mais je voudrais limiter les dimensions des ajouts de vidéo par les rédacteurs des articles, car cela fait bugger l’affichage sur l’iphone lorsqu’on tourne l’écran pour passer en affichage horizontal, et que l’on revient en affichage standage
    il s’agit souvent de codes <embed width=...></embed> ou encore <object width=...></object>, des choses comme celà. j’ai essayé de créer une commande sur le css, masi évidemment ça marche pas !

    serait-il possible, et comment pourrait-on forcer ce genre de dimensions pour ispip ?

    Répondre à ce message

  • Le 12 août à 21:43, par seds

    merci beaucoup pour ce plugin, que je n’ai pas encore testé sur un autre smartphone que l’iphone..

    petit soucis : le lien sur les images du portefolio renvoie sur le site classique

    j’ai donc apporté une petite modif au skel afin de générer une page ispip-document
    voici les codes :

    1/créer un fichier ispip-document.html
    y mettre les codes suivants :

    <BOUCLE_article(DOCUMENTS) {id_document}>               
    <div id="art[(#ID_DOCUMENT)]" class="panel" selected="true">               
    <div class="cartouche">               
    <h1>[(#TITRE|supprimer_numero)]</h1>
    #MODELE{article_traductions}
    </div><!--.cartouche-->               
    <br class="nettoyeur" />
    [(#MODELE{emb}|image_reduire{300,0})]
    [<div class="descriptif">(#DESCRIPTIF)</div>]
    <hr />       
    <p><a class="whiteButton" href="#URL_PAGE{ispip}" target="_self">
    <:accueil_site:></a></p>
    </div><!--.panel-->               
    </BOUCLE_article>

    2/ modifier ispip-article :
    dans la boucle portfolio, remplacer
    <a href="#URL_DOCUMENT" type="#MIME_TYPE" onclick="location.href='[(#URL_ARTICLE| (...)>
    par
    <a href="#URL_PAGE{ispip-document,id_document=#ID_DOCUMENT}">

    • Le 12 août à 22:01, par ?

      Je viens d’intégrer les modifications sur le dépot de la zone.
      Pouvez vous me dire, si tout est ok ?

    • Le 13 août à 00:40, par seds

      revoir ispip-article :
      dsl j’ai dû résumer le code original à remplacer, car la ligne de code était trop longue et m’empêchait d’avoir le bouton de validation pour poster mon message

      donc tu remplaces ton code sur ispip-article qui enferme le <a href....> par celui que j’ai donné
      soit
      [<a href="#URL_PAGE{ispip-document,id_document=#ID_DOCUMENT}">(#FICHIER|copie_locale|image_reduire{0,100}|inserer_attribut{alt,[(#TITRE|supprimer_numero|attribut_html|couper{60})]})</a>]
      dans la boucle portfolio

    • Le 13 août à 10:06, par jsb

      voilà c’est fait, merci pour ta contribution.

    Répondre à ce message

  • Le 20 juillet à 09:58, par rapdz

    Bonjour,

    J’ai installé les plugin ISPIP, pour que mon site soit compatible avec les smarphones Iphone, Android et Blackberry, Ipad

    Pour rediriger a partir de l’index de mon site, vers l’index sous ISPIP pas de problème voici la code :

    <script type="text/javascript">
    function iPhoneAlert() {
    if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/Android/i)) ||(navigator.userAgent.match(/BlackBerry/i))|| (navigator.userAgent.match(/iPod/i)))
    {
    location.replace("http://www.monsite.com/spip.php?page=ispip");
    }
    }
    </script>

    Mais pour rediriger les articles, vers les même articles sous ISPIP, c’est a dire de
    http://www.monsite.com/spip.php?article79 vers http://www.monsite.com/spip.php?page=ispip#_art79

    Je n’y arrive pas, le javascrip n’est pas trop mon fort, en sachant que les URL sous ISPIP sont comme suite :

    http://www.monsite.com/spip.php?page=ispip#_art79

    J’ai tenté comme ceci mais cela ne fonctionne pas

    1. location.replace("#URL_PAGE{ispip}|#_art#ID_ARTICLE");
    2. ou   location.replace("#URL_PAGE{ispip}|parametre_url{_art,#ID_ARTICLE}");

    Avez vous une solution ?

    • Le 6 août à 05:40, par troppur

      Bonjour,

      merci pour ce plugin.

      J’ai un problème dont personne n’a encore parlé ici :

      Dans ma page d’accueil sur iphone, mon titre "Recettes secrètes" devient "Recettes secrA"tes" (A avec un gna dessus...)
      et au-dessous les titres de mes rubriques possédant des accents aigus ou graves me donnent la même chose : ApA@ritifs (en fait l’arobase est un signe copiright), EntrA@es...pour Apéritif, Entrées...

      Une idée ? Merci.

    • Le 6 août à 12:16, par ?

      vérifie les réglages de l’encodage (passe en utf-8 normalemene)t

    Répondre à ce message

  • Le 6 juin à 00:35, par DD

    Bonjour,

    je voudrais ne pas faire apparaitre certains éléments comme les cartes insérées Gogle maps et j’ai donc mis dans la css de ispip des display:none mais ils ne sont pas pris en compte.
    Est-ce qu’il y a une syntaxe spéciale pour cette css ?

    merci
    dd

    • Le 6 juin à 00:36, par DD

      j’ai oublié de dire que ce plugin est nickel !

      merci à l’auteur

      dd

    Répondre à ce message

  • Le 10 mai à 15:01, par Chetcy

    Je pense qu’il serait bon d’indiquer ce lien dans la partie principe du plugin :
    (je n’ai pas lu les 30 messages afin de vérifier si cela avait été fait...)

    http://abel.foxylounge.com/Detecter-un-iPhone-iPod-Touch-et.html

    On y explique comment faire pour que l’iPhone détecte le bon squelette...

    • Le 10 mai à 15:59, par Joseph

      Ajouté dans le corps de l’article.

    • Le 10 mai à 16:05, par Chetcy

      Génial :D merci !

    Répondre à ce message

  • Le 19 avril à 14:23, par Rico

    Bonjour, j’utilise ispip, et j’ai un problème avec le formulaire ’ecrire_auteur’. Le formulaire s’affiche correctement, mais tous le processus qui suit n’est pas effectué. Les processus suivant l’entrée des données ne sont pas affiché. Est ce que ispip ne gère pas cette partie, ou bien , c’est un problème venant de moi ? Merci pour votre aide

    • Le 10 mai à 08:42, par Rico

      Message passé en mode inapercue apparement. Merci quand même >_<.
      Sujet Clos.

    Répondre à ce message

  • Le 26 avril à 16:50, par Philippe

    Bonjour, j’ai un souci avec l’affichage de certaines rubriques. Lorsque je clique sur l’une d’elles rien ne se passe. Il semble que cela se produise lorsqu’une rubrique comporte des articles avec des redirections. Comment contourner le problème ? Quelqu’un a-t-il une idée ?

    Merci

    Philippe

    • Le 27 avril à 09:12, par Jaina

      Salut !

      Peux-tu nous dire si l’adresse de la page change quand tu cliques sur cette rubrique ? (ou si vraiment rien ne se passe). A mon avis ça doit quand même te rajouter à la fin un "#rub1" par exemple.

    • Le 27 avril à 10:08, par Philippe

      Bonjour,

      effectivement cela met un #_rub35 à la fin de l’url comme les autres qui fonctionnent sauf que rien ne s’affiche le lien ne fonctionne pas.

    • Le 27 avril à 10:30, par Jaina

      A mon avis, ton problème vient du javascript qui n’est pas intégré. Vérifie que dans ispip.html, dans le head, tu as cette ligne :

      <script type="application/x-javascript" src="#CHEMIN{iui/iui.js}"></script>

      Et vérifie que le fichier iui est à côté et que le lien iui/iui.js est donc correct.

      Test également de cliquer sur rechercher en haut à droite de ta page ispip, si ça ne fonctionne pas, le problème vient du javascript.

      Bon courage :D

    • Le 27 avril à 10:35, par Philippe

      En fait tout est ok. Le javascript est présent dans le head. Le chemin vers iui/iui.js également.

      De même, le clic vers Rechercher fonctionne. Une autre idée ? ;)

    Répondre à ce message

Répondre à cet article

Qui êtes-vous ?

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
Ajouter un document

Retour en haut de la page

Ça discute par ici

  • SPIP-Immo : Présentation

    2 février 2009 – 29 commentaires

    Nous avons été amené à travailler pour plusieurs agences immobilières. A cette occasion, nous avons constaté qu’elles avaient toutes les mêmes demandes spécifiques liées à leur activité.

  • Plugin SEO

    6 août 2009 – 51 commentaires

    SEO est un plugin qui ajoute la possibilité d’insérer manuellement où vous le souhaitez ou de manière automatique dans la partie de votre site web : meta tags, URL canonique, Google webmaster tools Meta Code et Google Analytics javascript. Il est (...)

  • Multilang

    27 juin – 19 commentaires

    Gestion des tags multi Préambule Ce plugin a été initié par Renato en 2009. Son "cœur" est le fichier multilang.js. A l’origine il ne fonctionnait que sur les pages d’édition des rubriques. Le fichier multilang.js était stocké dans prive/javascript mais (...)

  • NoSPAM

    20 novembre 2008 – 138 commentaires

    Un plugin pour limiter le risque de spam dans les forums de SPIP.

  • Arclite

    24 novembre 2009 – 27 commentaires

    Un thème simple sur une base beige et marron sur 2 colonnes. Avec menu déroulant et logo. Largeur fluide entre 780 et 1200 px. Le thème se décline en 4 modes. Le menu principal peut contenir jusque 4 sous menu. Présentation Adapté de Arclite pour (...)

Urgent : vos articles ne s’affichent plus ce matin ? Un correctif est disponible