iTwX Mobile
Voir désormais iTwX Mobile v3
JEUX DE SQUELETTES SPIP POUR MOBILES
Optimisés pour iPhone/BlackBerrry/HTC et autres mobiles
2_3_7
Ce plugin est utilisé par 307 sites
Les squelettes et les designs optimisés pour iPhone ne fonctionnent pas sur d’autres périphériques. Le Slide notamment est particulièrement lourd et lent à charger, y compris sur les générations inférieures à l’iPhone4.
Aussi l’optimisation iTwX mobile pour site SPIP a été conçue pour être supportée par tous les modèles quelle qu’en soit leur puissance.
Ce plugin consiste en un triple jeu de squelettes :
– pour iPhone/iPod,
– pour BlackBerry, HTC et Android,
– pour tous les autres modèles tels que Nokia, Samsung, LG, Motorola et SonyEricsson.
Une fois activé, vous pourrez réaliser les redirections vers la version mobile de votre site SPIP en fonction de la marque du mobile.
Ces trois squelettes ont l’avantage de s’adapter à la performance supposée des différentes périphériques, notamment pour les pages itwx_ en encodage allégé. Ils permettent également de personnaliser l’habillage de façon différente, indispensable notamment sur les iPhones dont la codification des css peuvent être différentes, ainsi que pour la gestion des fichiers multimédias sans flash.
Installation
Ce plugin s’intalle comme n’importe quel autre plugin SPIP (voir documentation SPIP).
Compatiblité
Le plugin est compatible avec Agenda 2.0.
Fonctionnalités
Ce plugin gère
– les articles
– les brèves
– les rubriques
– les sites référencés
– les mots-clés sur brève, article, rubrique et site référencé
– les forums sur article et brève
– les auteurs
– le portfolio
– les documents joints
Sommaire :
– 8 derniers articles
– 5 derniers messages sur articles (uniquement)
– rubriques
– 5 dernières brèves
– agenda
– mots clés
– auteurs
– rechercher
– plan
– connexion
– site classique
Prise en charge de la fonction-mot clé invisible sur rubriques et articles.
Votre ’apple-touch-icon’
Vous pouvez personnaliser le raccourci accueil de votre iPhone, en créant votre propre logo au format .png 128x128, qui sera nommé apple-touch-icon.png et remplacera celui qui se trouve à la racine du plugins (voir aussi ces instructions).
Détection du mobile et redirection par notification push (boite de dialogue)
Un javascript va détecter le périphérique utilisé par le visiteur et proposer une redirection sur la version optimisée.
Les iPhone et iPod seront redirigés vers la page :
.../spip.php ?page=iphone_sommaire
Les BlackBerry, HTC et Android seront redirigés vers la page :
.../spip.php ?page=bberry_sommaire
Les autres mobiles seront redirigés vers la page :
.../spip.php ?page=itwx_sommaire
Télécharger le code ci-dessous, le copier et coller ou entre les <head></head> de vote page d’accueil sommaire.html (sauf modification de votre part), ou dans le fichier inc-head.html du dossier squelettes-dist, pour que toutes les pages proposent la redirection.
Sachez qu’en installant ce code dans le head du sommaire.html, seule cette page proposera la redirection. En l’installant dans le inc-head.html, toutes les pages redirigeront vers la version XXX(*)_sommaire du plugin iTwX Mobile.
Si vous utilisez le plugin NOTIFICATION, ou souhaitez que les moteurs de recherche redirigent le contenu d’une page vers sa version mobile,
il faut remplacer les urls "http://monsite.fr/spip.php?page=XXX_sommaire" dans chaque page à rediriger :
- "http://monsite.fr/spip.php?page=XXX_article&id_article=#ID_ARTICLE" pour les pages article.html
- "http://monsite.fr/spip.php?page=XXX_breve&id_breve=#ID_BREVE" pour les pages breve.html
– etc.
(*) remplacer XXX par iphone, bberry et/ou itwx
N’oubliez pas de personnaliser l’url de votre site !
Ensuite appelez la fonction avec la balise body :
<body onLoad="iPhoneAlert();BlackBerryAlert();MobileAlert();">
Important !
Pour rediriger tous les mobiles vers un seul et même squelette, installez ce code dans le head avec le nom du squelette que vous aurez choisi, puis appelez avec <body onLoad="MobileAlert();"> .
Détection du mobile et redirection par alerte dans une div sur site classique
Il est aussi possible de proposer une redirection plus discrète vers votre site mobile, par un message d’alerte intégré sur une page web de votre site classique, et qui ne s’affichera que sur les périphériques mobiles.
– Téléchargez ce fichier et choisissez le script de redirection à copier
– Collez-le sur le fichier squelette-dist/sommaire.html et/ou toute autre page qui vous conviendra, à l’endroit où vous souhaitez qu’apparaisse l’alerte
– Si besoin personnalisez le texte d’alerte du script
– Vous pouvez personnaliser les div dans squelette-dist/habillage.css avec #iphoneAlerte a..., #mobileAlerte a..., et/ou #smartphoneAlerte a...
Templates
Il existe pour le moment 4 versions de ce plugin :
– Classique (bleu),
– Noir&Blanc,
– Vert,
– mauve.
En chantier
– mise à jour automatique
– redirection en fonction du navigateur
– optimisation de l’accès privé
Desiderata et Développement
Ce plugin a été conçu pour des besoins bien précis et testé sur un certain nombre de mobile mais pas la totalité. Aussi, si vous remarquez des problèmes qui n’ont pas été rencontrés jusqu’à maintenant, merci de les signaler.
Egalement, si vos versions mobiles nécessitent une compatibilité particulière avec certains plugins, ou si vous avez des idées d’améliorations, n’hésitez pas à en parler ici !
Mises à jour & Corrections importantes
2.3.7 sur :
lignes 215 / 217 / 219 - iphone_habillage
lignes 212 / 214 / 216 - bberry_habillage
lignes 172 / 174 / 176 - itwx_habillage
boucle documents joints - XXX_inc-documents, XXX_rubrique
2.3.6 sur les lignes :
78 / 183 - iphone_sommaire
80 / 184 - bberry_sommaire
64 / 168- itwx_sommaire
244 - iphone_rubrique
239 - bberry_rubrique
233 - itwx_rubrique
143 - iphone_mot
147 - bberry_mot
138 - itwx_mot
