iTwX - Mobile

Ceci est une ARCHIVE, peut-être périmée. Vérifiez bien les compatibilités !

JEUX DE SQUELETTES SPIP POUR MOBILES
Optimisés pour iPhone/BlackBerrry/HTC et autres mobiles

voir désormais iTwX-Mobile v-3 en développement sur le site de l’auteur

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 peut être différente, ainsi que pour la gestion des fichiers multimédias sans flash.

Captures d’écran

Liste articles iphone_sommaire
Liste articles bberry_sommaire
Liste articles itwx_sommaire
Article
Personnalisation iphone_sommaire

Installation

Ce plugin s’intalle comme n’importe quel autre plugin SPIP (voir documentation SPIP).

Compatiblité

Le plugin est compatible avec Agenda 2.0 et Google analytics .

On peut également personnaliser le squelette avec Blocs Dépliables du Couteau Suisse.

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

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 [1]_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.

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();"> .

Templates

Il existe 4 versions de ce plugin :
   – Classique (bleu),
   – Noir&Blanc,
   – Vert,
   – mauve.

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 !

Téléchargement

Toutes les versions

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-doncuments, XXX_rubrique

En savoir plus.

Notes

[1remplacer XXX par iphone, bberry et/ou itwx

iTwX Mobile v3 disponible en automne !

Cette version apporte de nouvelles options et corrige les defauts importants de version actuelle. Tous les squelettes et boucles ont ete modifiees.

Discussion

9 discussions

  • 1

    Bonjour,
    J’utilise la nouvelle version iTwX 3 pour ciMobile pour Spip2, spip à jour, cimobile aussi, bref, en théorie pas de soucis.
    Les 2 plugins couplés fonctionnent parfaitement, seulement avec le plugin (à jour couteau suisse), j’utilise la lame « jolis coins », et je ne les ai plus. idem, j’utilise des onglets, et ils ne sont plus mis en forme sur la page d’accueil .... Et à l’intérieur du site, j ’utilise un peu de jquery pour déplier la colonne de navigation droite et hélas ça ne marche plus maintenant, ça reste ouvert tout le temps ...
    C’est quoi le soucis à votre avis ? Un conflit javascript ? ajax ? jquery ? Couteau suisse (désactivé : aucun résultat) ?

    • Il y avait des petites coquilles dans le code du pipeline.

      Problème résolu, une nouvelle version est en ligne.
      Merci encore pour ce plugin ! (et le suivi réactif aussi ! ;) )

    Répondre à ce message

  • 1

    bonjour,
    pour info : le plugin itwx nb 2.3.7 sur SPIP3beta2 fonctionne sans soucis...

    Répondre à ce message

  • 3

    Je viens d’installer ce plugin sur le site http://atelier.mediaslibres.lautre.net/ et ça marche nickel. Pour info concernant les sites utilisant Zpip, comme j’ai un peu cherché :
    -  il faut coller le script dans le fichier « head.html », peu importe l’endroit (je crois).
    -  la ligne <body onLoad="iPhoneAlert();BlackBerryAlert();MobileAlert();"> je l’ai mise dans « structure.html », juste avant #SPIP_CRON

    Voilà, merci pour ce plugin efficace !

    • Merci :)
      la nouvelle version iTwX mobile est sur le point de sortir (Automne) qui corrige de gros defauts de la version actuelle et offre plus d’options.
      En statut test, il serait interessant que vous nous fassions vos remontees.
      Ok ?

    • Bonjour,
      Voici l’hiver !
      Où en est la version 3 ?
      Merci beaucoup ;-D
      Henri

    • Elle arrive dans qlq jours encore.. Promis :)
      Un peu de retard pour etre en conformité avec spip3, et desormais couplé avec cimobile.

      Je mettrai un lien ici vers la version beta, a tester donc..

    Répondre à ce message

  • 1
    Francois

    Bonjour et merci pour cet excellent plugin. S’il fonctionne parfaitement bien sur HTC ou Iphone, il y a un chevauchement des lignes avec l’entête pour la page « mobile » chez moi.

    • quelle est votre peripherique, marque, modele et OS ?
      Merci de vous connecter depuis votre appareil sur http://detectmobilebrowser.com et de me donner ici le resultat.

      Pouvez-vous poster egalement une capture d’ecran illustrant le pb rencontré ?

    Répondre à ce message

  • 2
    sebiad

    Bonjour,

    Est-ce que les plugins GoogleMap et Gis Escoitar fonctionnent sur ces squelettes ?
    Merci d’avance !

    • Y’a pas de raison ! Ajoutez les boucles/balises necessaires au skel, ca devrait fonctionner.

      Maintenant, comment les cartes s’integre ds l’habillage mobile, je ne saurais vous dire, mais il faut essayer ! Vous nous direz..?
      S’il faut ajouter des corrections au plugin pour l’integrer de facon optimisee, elles seront pris en compte ds la prochaine version.

      Tenez-nous au courant !!

    • sebiad

      Ok, dès les premiers tests je vous tiendrai au courant ;)
      Merci Seds pour cette réponse rapide.

    Répondre à ce message

  • 12

    Sur le forum du site IwX Design, Jean-Marie a fait l’intervention suivante en janvier :

    J’ai modifié le script pour être redirigé sur la version pour smartphone de la page en cours (sommaire, rubrique, article) plutôt que systématiquement vers le sommaire. Ca permet de conserver la navigation si on arrive directement sur un article.
    Je te l’envoie par mail...

    Cette modification m’intéresse beaucoup, elle permet d’améliorer largement l’usage de ce super plugin.

    Serait-il possible d’en bénéficier ?

    Merci
    Christophe

    • Voilà le script de jean-marie :

      <script type="text/javascript" charset="utf-8">
      // JavaScript Document
              if(
                      (navigator.userAgent.match(/Android/i)) 
                      ||(navigator.userAgent.match(/BlackBerry/i))
                      ||(navigator.userAgent.match(/HTC/i))
                      ||(navigator.userAgent.match(/Nokia/i)) 
                      ||(navigator.userAgent.match(/Palm/i))
                      ||(navigator.userAgent.match(/Samsung/i))
                      ||(navigator.userAgent.match(/LG/i))
                      ||(navigator.userAgent.match(/MOT/i))
                      ||(navigator.userAgent.match(/SonyEricsson/i))
                      ||(navigator.userAgent.match(/iPhone/i))
                      ||(navigator.userAgent.match(/iPod/i))
                      )
              {
                      document.write("<div id=\"smartphoneAlerte\"><a href=\"/actualite/spip.php?page=[(#ID_RUBRIQUE|ou{#ID_ARTICLE}|?{"", bberry_sommaire})][(#ID_RUBRIQUE|?{bberry_rubrique&id_rubrique=#ID_RUBRIQUE})][(#ID_ARTICLE|?{bberry_article&id_article=#ID_ARTICLE})]\">Consulter la version pour smartphone des actualités</a></div>");
              }
      </script>

      La prochaine version du plugin plus complète, devrait optimiser la redirection selon OS. Et j’espère qu’elle te plaira tout autant :)

    • Merci beaucoup Seds !

    • Seds,

      En fait j’aurais voulu si possible ton message d’alerte, puis être re-dirigé le cas échéant non vers le sommaire mais vers l’article (ou la rubrique) initialement invoqué...

      J’ai bien essayé de mixer ton script avec celui de Jean-Marie mais je me retrouve systématiquement au sommaire. Idem avec le script de Jean-Marie en l’état (particularité liée à mon Smartphone ? Au fait que j’utilise 2 navigateurs différents sans aucun en navigateur par défaut ?).

      Bref, pas grave, je vais donc conserver ton script en l’état, si ce n’est que je l’ai réduit à une seule fonction « Smartphone alert » renvoyant systématiquement vers bberry_sommaire.

      J’attends avec impatience ta mise à jour :-)

    • Quel est ton script ?

    • Le voici :

      <script type="text/javascript">
      function SmartphoneAlert()
      {
      if(
      (navigator.userAgent.match(/iPhone/i))
      ||(navigator.userAgent.match(/iPod/i))
      ||(navigator.userAgent.match(/Android/i))
      ||(navigator.userAgent.match(/BlackBerry/i))
      ||(navigator.userAgent.match(/HTC/i))
      ||(navigator.userAgent.match(/Nokia/i))
      ||(navigator.userAgent.match(/Samsung/i))
      ||(navigator.userAgent.match(/LG/i))
      ||(navigator.userAgent.match(/MOT/i))
      ||(navigator.userAgent.match(/SonyEricsson/i))

      )
      {
      var question = confirm("Souhaitez-vous naviguer sur le site optimisé pour Smartphone")
      if (question)
      {window.location = "http://www.cabinet-antoine.fr/spip.php?page=bberry_sommaire"; }
      else{}
      }
      }
      </script>

      Et, non connaissant rien en codage, pensais qu’en remplaçant :
      /spip.php ?page=bberry_sommaire

      par
      /spip.php ?page=spip.php ?page=[(#ID_RUBRIQUE|ou#ID_ARTICLE| ?« », bberry_sommaire)][(#ID_RUBRIQUE| ?bberry_rubrique&id_rubrique=#ID_RUBRIQUE)][(#ID_ARTICLE| ?bberry_article&id_article=#ID_ARTICLE)]

      ça irait...

    • J’ai pas le temps de me pencher sur un script mixant celui de JM et la notification de l’alerte. Mais ce peut etre une piste à explorer.

      Sinon je te propose de mettre un script sur chaque page, c’est la redirection utilisée sur TwxDesign (tu peux regarder le code course !)

      Sur ta page sommaire comme tu l’as fait, tu mets en location ta page "http://www.cabinet.fr/spip.php?page=bberry_sommaire"
      Sur rubrique tu mets en location "http://www.cabinet.fr/spip.php?page=bberry_rubrique&id_rubrique=#ID_RUBRIQUE"
      Et tu adaptes selon article breve etc

    • Nota : pour aider la prochaine, peux-tu donner la marque modele et navigateurs de ton smartphone ?

      Mieux : aller sur http://detectmobilebrowser.com/mobile
      Et noter ici le resultat

      Merci ;)

    • Merci pour ces pistes.

      Voici les infos :
      Mozilla/5.0 (Linux ; U ; Android 2.1-update 1 ; fr-fr ; MB525 Build/JRDNEM_U3_2.21.0) AppleWebKit/530.17 (KHTML, licke Gecko) Version/4.0 Mobile Safari/530.17

      Et c’est un Motorola Defy.
      Christophe

      PS : rien à voir mais comment mettre à jour l’adresse mail sur laquelle je suis notifié des messages ici ? J’ai mis à jour mes coordonnées de rédacteur / visiteur mais reçois toujours les notifs à l’ancienne adresse...

    • Salut Chantoine,

      petite question : ton script est-il directement dans la page (article, rubrique... etc) ou est-ce un include ?
      Si c’est un include, passes-tu le id_article ou id_rubrique ?

      Et pour info, il ya une extension Firefox qui permet de changer de User Agent pour tester sur ordinateur : http://chrispederick.com/work/user-agent-switcher/

    • Salut Jean-Marie,

      C’est un include, dans le inc_header.html de mon squelette (SarkaSPIP)... et euh... je ne sais pas comment passer le id_article ou le id_rubrique :-) Ça doit être pour cela que ton script ne fonctionne pas pour moi (oups).

      Désolé pour le délai de réponse, je changeais de FAI.

    • Sur la page article, tu mets id_article pour passer le numéro de l’article à ton include. Pour page la rubrique, tu mets id_rubrique... Ainsi de suite (id_mot...).
      Si tu ne fais pas ça, le numéro de l’article ne passe dans le script et tu retombes à chaque fois sur le sommaire car le 1er test est vrai :

      [(#ID_RUBRIQUE|ou#ID_ARTICLE| ?"", bberry_sommaire)]

      J’imagine que tu connais cette page, c’est la bible SPIP : http://www.spip.net/@
      Tu y trouveras tous les Critères pour toutes les boucles...

      Du coup, ça doit donner un truc du genre (page article) :

      <INCLURE{fond=bberry_js}{id_article}>
    • Jean-Marie,

      Géniale l’extension, merci !

      Merci également pour les conseils, je vais pouvoir reprendre ma copie...

      — 
      Christophe

    Répondre à ce message

  • 2

    pour dire que sous Zpip, il faut mettre le js dans head/page-sommaire.html

    et noter la redirection dans le sommaire en ne mettant que la page de destination : spip.php?page=iphone_sommaire

    • bonjour,
      super boulot . merci pour la contrib .
      par contre j’ai une question .
      lors de la connexion ( site spip+sarka), la page de connexion revient automatiquement sur le site normal .
      avez vous prevu un develloppement pour rester sur les pages dedié iphone/blackberry.... et non pas repasser par l’acceuil du site en mode html ?

      merci

    • merci, je prends note de ta remarque, je regarderai ce que je peux faire sous sarka

    Répondre à ce message

  • 1

    bonsoir
    merci pour ce travail. j’ai une question relative à la détection et la redirection vers la version optimisée selon le mobile. le code est copié entre les balises

    mais je ne sais pas trop où il faut copier la balise body. dans le doute je l’ai placé juste après le

    et avant

     ?! Le test ( Iphone et samsumg galaxy) effectué ne propose pas de redirection. merci de votre aide !
    • Sur ton fichier, après </head> tu dois déjà avoir <boby class="qlq-chose">
      L’appel devra être inserée de cette manière :
      <body onLoad="ton-alerte-ou-tes-alertes;" class="...">

    Répondre à ce message

  • 1
    Frenchyfyl

    Bonjour, ce pluggin est-il compatible avec Spip 1.9.2 ?

    • Le plugin a été conçu sur la base des versions 2.1. dont le fonctionnement des boucles notamment est sensiblement différent aux versions 1.9.2.
      Il pourrait fonctionner, mais dans une certaine limite, et des erreurs peuvent survenir !

    Répondre à ce message

Ajouter un commentaire

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

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

Dernière modification de cette page le 5 septembre 2018