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 :
- iSPIP sur le site de Joseph
- MobileSPIP, le squelette original, sur le site de son auteur Abel Poucet.
- le squelette avec les nouvelles fonctionnalités (brèves, événements)
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








iSPIP 2.0
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)][ (#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)][ (#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> – ]#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
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#_art79Je 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#_art79J’ai tenté comme ceci mais cela ne fonctionne pas
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