TwXDesign

jeudi 2 décembre 2010, par Seds

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 !

Télécharger le code

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

Messages

50 Messages
  • Bonjour,

    Pour information, le plugin « cimobile » détecte les téléphones mobiles et les aiguille vers le jeu de squelettes correspondant.

    Il n’est pas intrusif vis-à-vis des fichiers de squelettes. En particulier, il évite de recourir à des préfixes dans le nom des squelettes (par exemple « iphone_article »).

    Pour en savoir plus : http://www.spip-contrib.net/cimobile-plugin-detection-et-aiguillage-des-telephones

    Cordialement.


  • iTwX - Mobile 2 juin 2011 12:52, par jcdeloffre

    juste pour signaler un crochet oublié
    ligne 57 dans iphone_inc-documents.html.

    merci pour ce plugin.


  • iTwX - Mobile 1er juin 2011 10:45, par Ben

    Bonjour, ne fonctionne pas sur mon smartphone (Samsung galaxy S2, android).
    j’ai rajouté :
    (navigator.userAgent.match(/Mobile/i))

    dans la fonction MobileAlert.


  • iTwX - Mobile 26 mai 2011 12:40, par Lucia Frent

    Visitant des sites Web qui ont été créés par une organisation afin qu’ils puissent communiquer efficacement à leurs membres et d’autres types de public a toujours été d’intérêt pour moi. Ils l’utilisent en affichant des articles sur les annonces de projets ou tout simplement mises à jour sur les améliorations ou comment l’organisation fait. Cela m’a amené à faire un essai à ce sujet pour mon journal de gestion de communication ce terme. Je suis déterminé à arriver à un excellent pour moi de pouvoir fièrement l’inclure dans mon resume. Cet article et le site sera vraiment utile pour moi dans la réalisation de cet objectif.


  • iTwX - Mobile 19 avril 2011 21:44, par Raph

    Sous androïde je n’arrive pas à faire fonctionner le slide...


    • iTwX - Mobile 20 avril 2011 10:55, par seds

      je ne comprends pas de quoi vous parlez, il n’y a pas de slide. merci d’être plus précis