SPIP-Contrib

SPIP-Contrib

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

280 Plugins, 197 contribs sur SPIP-Zone, 115 visiteurs en ce moment

Accueil > Squelettes > Squelettes spéciaux > Squelettes pour petits écrans > iTwX - Mobile > iTwX - Mobile

iTwX - Mobile

9 janvier 2011 – par Seds – 33 commentaires

20 votes

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

PNG - 64.2 ko
Liste articles iphone_sommaire
PNG - 63.5 ko
Liste articles bberry_sommaire
PNG - 61.9 ko
Liste articles itwx_sommaire
PNG - 51.1 ko
Article
PNG - 30.7 ko
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.

Voir en ligne : http://plugins.spip.net/itwx_2_3_7_...

P.-S.

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.

Notes

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

Retour en haut de la page

Tout afficher

Vos commentaires

  • Le 28 février 2012 à 15:28, par quincailler En réponse à : iTwX - Mobile

    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) ?

    • Le 29 février 2012 à 15:03, par quincailler En réponse à : iTwX - Mobile

      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

  • Le 9 janvier 2012 à 15:11, par chankalan En réponse à : iTwX - Mobile

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

    • Le 13 janvier 2012 à 23:39, par Seds En réponse à : iTwX - Mobile

      Ca depend de la configuration du site...

    Répondre à ce message

  • Le 9 septembre 2011 à 13:52, par Ari En réponse à : iTwX - Mobile

    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 je l’ai mise dans « structure.html », juste avant #SPIP_CRON

    Voilà, merci pour ce plugin efficace !

    • Le 9 septembre 2011 à 14:20, par seds En réponse à : iTwX - Mobile

      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 ?

    • Le 22 décembre 2011 à 10:37, par hdeb En réponse à : iTwX - Mobile

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

    • Le 22 décembre 2011 à 12:04, par Seds En réponse à : iTwX - Mobile

      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

  • Le 2 août 2011 à 18:28, par Francois En réponse à : iTwX - Mobile

    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.

    • Le 2 août 2011 à 20:27, par seds En réponse à : iTwX - Mobile

      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

  • Le 6 mai 2011 à 13:38, par sebiad En réponse à : iTwX - Mobile

    Bonjour,

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

    • Le 6 mai 2011 à 15:15, par Seds En réponse à : iTwX - Mobile

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

    • Le 6 mai 2011 à 15:41, par sebiad En réponse à : iTwX - Mobile

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

    Répondre à ce message

  • Le 3 avril 2011 à 15:58, par chantoine En réponse à : iTwX - Mobile

    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

    • Le 3 avril 2011 à 16:41, par Seds En réponse à : iTwX - Mobile

      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 :)

    • Le 3 avril 2011 à 16:55, par chantoine En réponse à : iTwX - Mobile

      Merci beaucoup Seds !

    • Le 3 avril 2011 à 17:25, par chantoine En réponse à : iTwX - Mobile

      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 :-)

    • Le 3 avril 2011 à 17:59, par Seds En réponse à : iTwX - Mobile

      Quel est ton script ?

    • Le 3 avril 2011 à 18:16, par chantoine En réponse à : iTwX - Mobile

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

    • Le 3 avril 2011 à 19:35, par Seds En réponse à : iTwX - Mobile

      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

    • Le 3 avril 2011 à 19:47, par Seds En réponse à : iTwX - Mobile

      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 ;)

    • Le 4 avril 2011 à 08:32, par chantoine En réponse à : iTwX - Mobile

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

    • Le 4 avril 2011 à 18:18, par jeanmarie En réponse à : iTwX - Mobile

      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/

    • Le 6 avril 2011 à 09:50, par chantoine En réponse à : iTwX - Mobile

      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.

    • Le 6 avril 2011 à 10:19, par jeanmarie En réponse à : iTwX - Mobile

      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 :

      1. [(#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) :

      1. <INCLURE{fond=bberry_js}{id_article}>
    • Le 6 avril 2011 à 12:01, par chantoine En réponse à : iTwX - Mobile

      Jean-Marie,

      Géniale l’extension, merci !

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

      — 
      Christophe

    Répondre à ce message

  • Le 10 janvier 2011 à 18:22, par ? En réponse à : iTwX - Mobile

    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

    • Le 17 février 2011 à 08:45, par didier En réponse à : iTwX - Mobile

      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

    • Le 20 février 2011 à 16:15, par Seds En réponse à : iTwX - Mobile

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

    Répondre à ce message

  • Le 23 janvier 2011 à 23:14, par jcde En réponse à : iTwX - Mobile

    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 !
    • Le 24 janvier 2011 à 07:40, par Seds En réponse à : iTwX - Mobile

      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

  • Le 17 janvier 2011 à 12:48, par Frenchyfyl En réponse à : iTwX - Mobile

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

    • Le 17 janvier 2011 à 20:11, par seds En réponse à : iTwX - Mobile

      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

Répondre à cet article

Qui êtes-vous ?
  • [Se connecter]

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 Les choses à faire avant de poser une question (Prolégomènes aux rapports de bugs. )
Ajouter un document

Retour en haut de la page

Ça discute par ici

  • Le plugin ZotSpip

    28 mai 2012 – 95 commentaires

    Synchronise Spip avec une bibliothèque (personnelle ou partagée) de références bibliographiques Zotero. Utilisez Zotero pour gérer / importer / rédiger vos références bibliographiques, puis incorporez vos références bibliographiques dans votre Spip avec (...)

  • Plugin SEO

    6 août 2009 – 211 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 (...)

  • plugin refbase

    25 avril 2009 – 62 commentaires

    refbase est une application PHP/MySQL permettant de gérer une base de références bibliographiques en ligne. Ce plugin fournit un modèle <refbase> permettant d’extraire des références d’une base refbase en ligne et de les intégrer ainsi dans SPIP. (...)

  • Lecteur Multimédia

    28 février 2007 – 304 commentaires

    Le plugin « lecteur multimedia » permet la lecture et l’affichage de sons ou de vidéos. Il enrichit l’affichage des raccourcis des documents ajoutés <docX>. Il ajoute des lecteurs flash adaptés aux formats .MP3 et .FLV. Le plugin agit sur tous (...)

  • Thumbsites - documentation utilisateur

    30 juillet 2009 – 70 commentaires

    Proposer des captures d’écran de site à la volée via des balises, des filtres ou des modèles