TwXDesign

iTwX Mobile v3

JEUX DE SQUELETTES SPIP POUR MOBILES
Optimisés pour smartphones et tablettes


Ce plugin est utilisé par 531 sites

Issue du plugin iTwX v2, cette nouvelle version corrige et améliore l’outil, et désormais, tout ou presque est configurable..

2 possibilités :
– Jumelé avec le plugin Cimobile
– iTwX Mobile en version utilisable seule (! bug sur la redirection automatique / persistance de la notification // ?? )

Force de l’expérience de iTwX v2, désormais il n’existe plus que 2 jeux de squelettes pour mobiles, et un squelette pour tablettes avec navigateur "webkit" :

▸ pour smartphones : iPhone, Android, BlackBerry, HP iPAQ, Windows Phone OS 7, Smartphone, Palm, Nuvifone
▸ pour mobiles : tous les autres
▸ pour tablette : iPad, Playbook, Maemo (experimental [1])

Cimobile vs iTwX Mobile

D’abord quelles différences entre le plugin iTwX Mobile avec ou sans Cimobile ?

Jumelé avec Cimobile, le chargement des pages lors de la redirection est plus rapide. Ensuite, la version iTwX pour Cimobile permet la personnalisation des urls et également la gestion des articles virtuels. Depuis l’accès privé, en fonction du cookie Cimobile, on passe directement sur la version mobile.

PNG - 2.6 ko
Cimobile
sur spip-contrib

Malheureusement, certaines configurations de spip ou squelettes spéciaux, ne prennent en compte la redirection Cimobile. Aussi la version iTwX Mobile (utilisable seule), propose les mêmes fonctionnalités, à la différence du switcher entre Accès privé et squelettes iTwX qui se fera donc via des liens spéciaux en navigation et bandeau Visiter si activé. Enfin les versions squelettes ont recourt aux préfixes "mob_" pour squelette mobile, "smart_" pour smartphone et "tab_" pour tablette.

Version Test

Le plugin est proposée ici en test. Si vous trouvez des erreurs, des incompatibilités ou tout autre dysfonctionnement pouvant donner lieu à des corrections visant à parfaire cet outil, n’hésitez pas à les signaler.

Nouveautés

▸ Thèmes couleurs : choisissez votre thème couleur (6 colori disponibles).

▸ Choix de la redirection :
– Les smartphones peuvent ainsi être redirigés vers le site dit "Mobile" plus allégé, et les tablettes conserver l’habillage du site classique.
– Le mode de redirection : automatique ou par notification push.

▸ Personnalisation du nom du site Mobile :
Certains noms de sites sont trop long pour rester à l’emplacement prévu. Aussi, le nom du site quelque soit le nombre de caractères est limité à 35 (sauf tablette), et ne reviendra pas à la ligne. Par conséquent il est désormais possible de personnaliser le nom de votre site mobile.

▸ Surcharges CSS :
– Si votre configuration présente des particularités non prises en compte par les css iTwX, depuis beta 2.2.5, vous pouvez activer puis personnaliser vos propres réglages CSS directement depuis la configuration iTwX.
– Depuis beta 2.2.12, <div class="twx_scroll"></div> vous permet d’ajouter un scroll (horizontal) pour les contenus trop larges pour tenir à l’intérieur d’un écran mobile, pour les tableaux par ex.

▸ Gestion des lecteurs flash (expérimentale) :
Les périphériques iPhone/iPod/ iPad, ne supportent aucune compatibilité avec Flash Player. Aussi pour parer à l’espace vide laissé par un lecteur flash sur ces appareils, les class "itwx_player" et "twx_player" permettent afficher ou non un contenu, en fonction du périphérique.
 – twx_player : affiche sur tout périphérique sauf iPhone/iPod/ iPad
 – itwx_player : affiche uniquement sur iPhone/iPod/ iPad

et ce dans la rédaction “Texte” quelque soit le squelette, classique ou iTwX.

Autrement dit, tout contenu, codes d’importation ou autre, se trouvant entre <div="twx-player"></div>, ne sera pas affiché sur iPhone/iPod/ iPad,
tout contenu entre <div="itwx-player"></div>, ne sera affiché que sur iPhone/iPod/ iPad.

Gère automatiquement le lecteur flash du plugin Lecteur Multimédia [2] (voir §Compatibilités).

Enfin les documents de format mp4 afficheront le lecteur QuickTime sur iPhone, iPod, iPad en utilisant le filtre :
<docXX|iplayer>

Ainsi dans un article, mettre <docXX|iplayer> et <docYY|player>, affichera pour docXX la vignette QuickTime du fichier .mp4 sur iPhone/iPod/iPad, et pour docYY le lecteur Flash du plugin Lecteur Multimedia pour fichier .flv sur les tous autres périphériques.

Squelettes :

▸ Gestion multilingue :
iTwX Mobile v3 gère désormais le multilingue et traduction d’articles.
Les squelettes sont traduits en arabe [ar], catalan [ca], en tchèque [cs], danois [da], allemand [de], anglais [en], espagnol [es], français [fr], hongrois [hu], italien [it], néerlandais [nl], polonais [pl], portugais [pt], roumain [ro], suedois [sv] et turc [tr].
La configuration iTwX est traduite en français, anglais, allemand, espagnol, italien et catalan (sauf contrib), traductions demandant à l’heure actuelle probablement quelques corrections. Les autres langues demeurant en anglais.

▸ Site Classique :
Vous pouvez également ajouter un lien sur vos pages classiques vers vos pages iTwX avec les inclures suivantes :

<INCLURE{fond=itwx/redirection}> dans sommaire.html de votre squelette classique.
Ajouter {id_article} dans l’inclure pour article.html. Fonctionne également avec rubrique.html, breve.html, site.html, mot.html et auteur.html, en remplaçant l’objet id_ correspondant.

Personnaliser l’alerte avec la class .itwx_alerte dans votre fichier css.

▸ Paginations, formulaires forums login et inscription, en ajax.

▸ Compatible avec le plugin Agenda.

▸ Compatible avec Configuration des URLs

Personnalisation des squelettes mobiles

Depuis la mise à jour de Cimobile du 01/07/2016, il est possible d’ajouter un dossier des squelettes mobiles personnalisés, de la manière suivante

▸ Copier/coller le dossier /squel_mobiles à la racine du plugin iTwX, et renommer /mobiles.
▸ Ajouter dans /config/mes_options.php les lignes suivantes :

<?php

if (!defined("_ECRIRE_INC_VERSION")) return;

// Nom du dossier contenant les sous dossiers de squelettes mobiles personalisés
define('CIMOBILE_RACINE_SQUELETTES', 'mobiles');

?>


▸ Modifier vos squelettes personnalisés dans ce nouveau dossier /mobiles

Votre apple-touch-icon

Depuis beta 2.2.5, l’apple-touch-icon est inseré par la balise #INSERT_HEAD. Ainsi quelque soit la version sur laquelle le visiteur navigue, en particulier si vous avez conservé l’habillage classique pour les tablettes, on pourra installé l’apple-touch-icon en raccourci écran. Celui-ci se trouve désormais à la racine du plugin iTwX Mobile.
Pour personnaliser votre apple-touch-icon, veillez à bien conserver le nom de fichier : apple-touch-icon.png !

Vous avez la possibilité de l’activer, soit en mode par défaut (icône ombré), soit en mode précomposé (icône sans modification)

Compatibilités

▸ Plugin Agenda
▸ Plugin Lecteur Multimedia 0.77.0 [2], le lecteur flash est automatiquement supprimé des périphériques iPhone/iPod/iPad.
▸ Plugin Video(s), sur format h.264.
Avec les autres formats (utilisant un lecteur flash), pour ne pas laisser d’espace vide sur iPhone/iPod/iPad, écrire <div="twx-player"><videoXXX><div>
▸ Plugin Social Tags : sélecteur "#socialtags" [3]
▸ Plugin Google +1 : sélecteur "#googleplus1" [3]

Chantier :

Fichiers langues.

Utilitaires :

Si vous ne possedez pas d’iPhone et/ou d’iPad, installez iBBDemo2 (
http://iphonemonsta.com/free-iphone-browser-simulator-for-windows-linux-mac)

http://iphone4simulator.com/ est un simulateur en ligne. Seulement comme nombreux simulateurs en ligne, le userAgent reconnu sera celui de votre périphérique (ex votre PC), donc la redirection vers la version iTwX ne s’effectuera pas. Dans ce cas, ajoutez  ?cimobile=smartphone ou  ?cimobile=mobile à la fin de l’url de votre page d’accueil, et &cimobile=smartphone ou &cimobile=mobile depuis les articles, breves etc, tel que :

http://monsite.fr/?cimobile=smartphone

et http://monsite.fr/spip.php?article1&cimobile=smartphone

Vos commentaires :

Pour tout problème d’affichage, de redirection ou d’incompatibilité :

▸ merci d’aller sur http://detectmobilebrowsers.com/ depuis votre périphérique et de copier le résultat dans votre commentaire.
Ex. iPhone : Mozilla/5.0 (iPhone ; U ; CPU iPhone OS 5_0_1 like Mac OS X) AppleWebKit/534.46 (KHTML, like Gecko) Version/5.1 Mobile/9A405 Safari/7534.48.3

▸ et de noter également la version spip que vous utilisez.

Pour tout problème de fonctionnement de la redirection avec Cimobile, merci de vous adresser aux créateurs du plugin sur spip-contrib.net.

Avertissement :

Un bug de redirection vers la page d’accueil - sommaire.html - alors que sur articles, rubriques etc, la redirection fonction. J’ai noté que certaines configuration ne permettent pas la redirection de la page sommaire. Des réglages .htaccess, paramétrage perso peuvent en être la cause. Pour comprendre ce dysfonctionnement, il est important de consulter minutieusement le source. Néanmoins, sur la version utilisable sans cimobile, il peut être ajouté manuellement le script de redirection. A testé.. Donc à suivre !!

Pour tout problème de page blanche récurrente sur certaines configuration, tester d’abord la version sans cimobile, itwx utilisable seul. Si le probleme persiste RDV sur IRC afin de nous aider à corriger le problème.

Portfolio


[1Configuré pour webkit, on ignore à ce jour le comportement et la gestion css des tablettes sans "webkit".

[2Le plugin Lecteur Multimédia - 2.0.0 est lui compatible avec Spip3, mais ne contient pas de Player vidéo

[3par défaut, les blocs (activables en Configuration iTwX) sont insérés en-dessous du bloc date d’édition/traductions des articles.

Messages


Poster un message
Fermer
modération a priori

Ce forum est modéré a priori : votre contribution n’apparaîtra qu’après avoir été validée par un administrateur du site.

Qui êtes-vous ?
Votre message
  • Pour créer des paragraphes, laissez simplement des lignes vides.

Ajouter un document

164 Messages
  • iTwX Mobile v3 7 août 2012 23:45, par formatec

    je tente une install du plugin 3.2.15 sur un spip SPIP 3.0.0-rc [19781] en mutualisation et il me dit : "iTwX Mobile 3.2.15-p - test
    version incompatible"

    est-ce du àla mutu ?


    • iTwX Mobile v3 8 août 2012 12:45, par Seds

      bonjour, et bien non, c’est qu’il est temps de mettre àjour votre rc pour une version de SPIP plus officielle de 3.0.0 au 3.04 actuel :)


    • iTwX Mobile v3 8 août 2012 13:11, par Seds
    • iTwX Mobile v3 8 août 2012 15:41, par formatec

      merci seds, j’ai eu de grosses frayeurs pendant l’upgrade car apparemment des conflits avec cimobile et la 3.0.0 mais une fois passé en 3.0.4 ça roule


    • iTwX Mobile v3 15 août 2012 19:50, par UOL

      sur SPIP 3.0.4, avec cimobile installé, <INCLURE{fond=itwx/redirection}> placé dans sommaire, j’obtiens une page blanche, cache vidé bien sà»r.
      desinstallation, réinstallation complete des 2 plugins, le problème persiste.
      La desinstallation de cimobile ET itwx corrige le problème.
      une idée ? un peu d’aide ...


    • iTwX Mobile v3 17 août 2012 08:35, par Seds

      C’est un problème récurrent apparemment dès que le site a une configuration particulière (pour ne pas dire sophistiquée). Mais sans entrer dedans difficile d’en trouver l’origine, cimobile, iTwX ou autre... Aussi je vous invite àvenir sur IRC afin de trouver une solution


    Répondre à ce message
    Fermer
    modération a priori

    Ce forum est modéré a priori : votre contribution n’apparaîtra qu’après avoir été validée par un administrateur du site.

    Qui êtes-vous ?
    Votre message
    • Pour créer des paragraphes, laissez simplement des lignes vides.

    Ajouter un document

  • iTwX Mobile v3 25 juillet 2012 04:56, par spipfactory

    Bonjour suite a la lecture de

    Version Test

    Le plugin est proposée ici en test. Si vous trouvez des erreurs, des incompatibilités ou tout autre dysfonctionnement pouvant donner lieu àdes corrections visant àparfaire cet outil, n’hésitez pas àles signaler.

    Donc a ce jour aucun soucis d’installation sur une plateforme spip mutualisé

    @micalement


    Répondre à ce message
    Fermer
    modération a priori

    Ce forum est modéré a priori : votre contribution n’apparaîtra qu’après avoir été validée par un administrateur du site.

    Qui êtes-vous ?
    Votre message
    • Pour créer des paragraphes, laissez simplement des lignes vides.

    Ajouter un document

  • modification des squelettes 15 juin 2012 21:14, par jimv

    Bonjour,

    J’essaye de modifier les squelettes standards dont je vous remercie.
    (En particulier supprimer les brèves).
    Les nouveaux squelettes sont bien sur mon site, les cache bien vidé,
    http://44capitelles.free.fr/
    dans votre herbier.
    Pas moyen, àl’aide !

    jean-michel


    • modification des squelettes 16 juin 2012 18:26, par Seds

      Bonjour,
      Je ne comprends pas votre pb, si vous souhaitez retirer les breves vous supprimez les boucles qui les concernent manuellement. Et ici en sommaire du squel plugins/itwxmobile(*)/squel_mobile/mobile que vous utilisez actuellement, l.25 ou pas tres loin, et non sur le squel_mibile/smartphone (precision au cas où)

      (*) nom de votre version iTwX


    • modification des squelettes 16 juin 2012 21:24, par jimv

      C’est bien làque je ne comprenais pas non plus !
      Je vous remercie de votre réponse rapide et de l’excellence de votre production.

      Une fois de plus c’était moi qui était le maillon faible !
      je vous ai dérangé pour rien.

      C’était juste que Dreamweaver, je ne maitrise pas (sauf en code) et
      que mon Cyberduck me disait que c’était téléchargé alors que non !

      C’est fait àl’instant et ça marche, comme vous le dite il n’y avait pas de problème de conception.

      Merci.
      A moi de faire un squelette qui réponde ànos besoins ...
      Dès qu’ils seront opérationnels (àmon âge on n’est pas très rapide) je vous ferais un petit signe.

      Merci encore.


    Répondre à ce message
    Fermer
    modération a priori

    Ce forum est modéré a priori : votre contribution n’apparaîtra qu’après avoir été validée par un administrateur du site.

    Qui êtes-vous ?
    Votre message
    • Pour créer des paragraphes, laissez simplement des lignes vides.

    Ajouter un document

  • problème sous SPIP 3.01 28 mai 2012 15:26, par patrice

    Bonjour,

    lors de l’installation auto sous SPIP 3.01 cela me bloque tout le site (pages blanches et sources vides pour toutes les pages, y compris dans l’espace privé).

    Pour revenir au site fonctionnel je suis obligé de supprimer le répertoire d’ITWX par FTP.

    C’est peut-être du àla validation de l’option "html 5" dans SPIP mais je n’ai pas encore vérifié.

    bien cordialement


    • problème sous SPIP 3.01 28 mai 2012 15:29, par patrice

      Concernant le html5 c’est exactement le même problème si je reste en html 4 sur le site public. J’ai utilisé cimobile et itwx_cimobile_3_2.zip.


    • problème sous SPIP 3.01 10 juin 2012 21:06, par Seds

      cette version du plugin n’est pas compatible avec spip3


    • problème sous SPIP 3.01 11 juin 2012 01:07, par Patrice

      Bonjour,

      dans ce cas il faut corriger la ligne 41 du fichier plugin.html et en retirer le point-virgule qui valide le plugin pour toute version supérieure ou égale à2.1.0.

      bien cordialement,

      Patrice


    • problème sous SPIP 3.01 11 juin 2012 01:13, par Seds

      c’est noté. ceci dit, l’information est bien précisée dans l’encadré "Compatibilité".


    Répondre à ce message
    Fermer
    modération a priori

    Ce forum est modéré a priori : votre contribution n’apparaîtra qu’après avoir été validée par un administrateur du site.

    Qui êtes-vous ?
    Votre message
    • Pour créer des paragraphes, laissez simplement des lignes vides.

    Ajouter un document

  • iTwX Mobile v3 17 mai 2012 19:00, par dd

    Bonjour,

    j’ai un peu de mal àcomprendre comment cela fonctionne : j’ai installé les dernières version de itwx mobile ( 3.00 spip2 beta_2.2.10 pour cimobile) et cimobile 1.0 sur un spip 2.1.14 (en local pour les tests) sans aucune modification des plugins.

    Lorsque je vais visiter mon site depuis un PC (donc l’URL classique) mes feuilles de style qui sont dans squelettes/css ne sont plus prises en compte et donc toute ma mise en page est foireuse.

    j’ai vidé le cache et les cookies > pas d’amélioration.

    Lorsque je désactive iTwX Mobile le problème disparaît

    dd


    • iTwX Mobile v3 17 mai 2012 21:39, par Seds

      que dis votre source ? comparatif header source avec plugin et sans..

      de mon coté je vais tester spip2.1.14


    • iTwX Mobile v3 17 mai 2012 22:14, par Seds

      RAS avec 2.1.14 tout fonctionne normalement chez moi.
      j’ai fait une màj de 2.1.12 vers 2.1.14, mais au début j’ai eu le même pb, mais rien àvoir avec le plugin. j’ai regardé dans /squelettes et le dossier était vide.. pas bien compris.. donc j’ai recollé le contenu et c’est reparti.

      àvous, je ne peux rien voir sur votre local


    • iTwX Mobile v3 17 mai 2012 22:48, par dd

      alors voilàce que j’ai dans le header de la page sommaire avec itwx activé :

      Date : Thu, 17 May 2012 20:39:21 GMT
      Server : Apache/2.2.20 (Ubuntu)
      X-Powered-By : PHP/5.3.6-13ubuntu3.7
      X-Outils-CS : glossaire, blocs
      Vary : Cookie,Accept-Encoding
      Composed-By : SPIP 2.1.14 @ www.spip.net + images(1.0.1), msie_compat(1.0.0), porte_plume(1.7.8), safehtml(1.3.7), vertebres(1.0.0), ancresdouces(1.4), bando(1.1.10), outils_article(0.3.0), boutonstexte(0.3.3), cfg(1.16.0), typo(1.0), ck(1.1.4), crayons(1.13.1), dd(0.2.1), typoenluminee(3.3.0), facteur(1.8.9), forms(0.401), fulltext(0.6.6), typo_guillemets(1.5.0), image_ragged(0.2), couteau_suisse(1.8.41.04), player(0.77), mailcrypt(2.1.0), mediabox(0.6.10), minibando(0.1.6), nospam(0.8.11), pages(0.3.7), skiplink(1.0.2), soundcloud(0.1.1), spip_bonux(2.3.0), step(0.15.6), tipafriend(1.5.1), varicelle(0.2.1), adxmenu(1.23), autorite(0.9.9), medias(1.6.13), saisies(1.14.0), videos(0.8.7), aed(0.1.1), ppp(1.0.3), cimobile(1.0), itwx(3.00 spip2 beta_2.2.10 pour cimobile), compresseur(1.0.1)
      X-Spip-Cache : 3600
      Content-Encoding : gzip
      Content-Length : 9255
      Keep-Alive : timeout=5, max=100
      Connection : Keep-Alive
      Content-Type : text/html ; charset=utf-8
      200 OK

      extrait du code source :

      <script type="text/javascript">//<![CDATA[
      if ((navigator.userAgent.match(/(iPhone|iPod|iPad)/i) )) {
      document.write("<!-- compact [
      plugins/auto/itwx_cimobile_3_2/itwx/itwx_iplayer.css
      plugins/auto/itwx_cimobile_3_2/itwx/itwx_player.css
      squelettes/css/habillage.css
      squelettes/css/spip_formulaires.css
      squelettes/css/style2.css
      page=adxmenu_css.css(type_menu=htb)
      page=adxmenu_css_styles.css(type_menu=htb)
      ] 72.3% -->
      <link rel='stylesheet' media='projection, screen, tv' href='local/cache-css/bdb188d41a74918fdcf68d5f7fdcd362.css' type='text/css' />
      " );
      }
      if (!(navigator.userAgent.match(/(iPhone|iPod|iPad)/i) )) {
      document.write("" );
      }
      //]]></script>

      et après desactivation de itwx :

      Date : Thu, 17 May 2012 20:44:10 GMT
      Server : Apache/2.2.20 (Ubuntu)
      X-Powered-By : PHP/5.3.6-13ubuntu3.7
      X-Outils-CS : glossaire, blocs
      Vary : Cookie,Accept-Encoding
      Composed-By : SPIP 2.1.14 @ www.spip.net + images(1.0.1), msie_compat(1.0.0), porte_plume(1.7.8), safehtml(1.3.7), vertebres(1.0.0), ancresdouces(1.4), bando(1.1.10), outils_article(0.3.0), boutonstexte(0.3.3), cfg(1.16.0), typo(1.0), ck(1.1.4), crayons(1.13.1), dd(0.2.1), typoenluminee(3.3.0), facteur(1.8.9), forms(0.401), fulltext(0.6.6), typo_guillemets(1.5.0), image_ragged(0.2), couteau_suisse(1.8.41.04), player(0.77), mailcrypt(2.1.0), mediabox(0.6.10), minibando(0.1.6), nospam(0.8.11), pages(0.3.7), skiplink(1.0.2), soundcloud(0.1.1), spip_bonux(2.3.0), step(0.15.6), tipafriend(1.5.1), varicelle(0.2.1), adxmenu(1.23), autorite(0.9.9), medias(1.6.13), saisies(1.14.0), videos(0.8.7), aed(0.1.1), ppp(1.0.3), cimobile(1.0), compresseur(1.0.1)
      X-Spip-Cache : 3600
      Cache-Control : no-cache,must-revalidate
      Pragma : no-cache
      Content-Encoding : gzip
      Content-Length : 8827
      Keep-Alive : timeout=5, max=93
      Connection : Keep-Alive
      Content-Type : text/html ; charset=utf-8
      200 OK


      si je n’ai pas copié/collé les bons extraits, dis-moi ce qui serait utile .

      merci
      dd


    • iTwX Mobile v3 18 mai 2012 03:52, par Seds

      ce qui vous intéresse se trouve entre <head></head>

      en l’occurrence, le plugin ne fait qu’y ajouter ces lignes :

      <!-- Player iTwX -->
      <script type="text/javascript">//<![CDATA[
      if ((navigator.userAgent.match(/(iPhone|iPod|iPad)/i) )) {
      document.write("<link rel='stylesheet' href='plugins/itwx_cimobile_3_2/itwx/itwx_iplayer.css' type='text/css' media='projection, screen, tv' />" );
      }
      if (!(navigator.userAgent.match(/(iPhone|iPod|iPad)/i) )) {
      document.write("<link rel='stylesheet' href='plugins/itwx_cimobile_3_2/itwx/itwx_player.css' type='text/css' media='projection, screen, tv' />" );
      }
      //]]></script>
      <!-- Fin Player iTwX -->

      et

      <!-- iTwX Icone WebClip -->
      <link rel="apple-touch-icon" href="plugins/itwx_cimobile_3_2/apple-touch-icon.png" />
      <!-- Fin iTwX Icone WebClip -->

      Ensuite il vous faut faire le tri.


    Répondre à ce message
    Fermer
    modération a priori

    Ce forum est modéré a priori : votre contribution n’apparaîtra qu’après avoir été validée par un administrateur du site.

    Qui êtes-vous ?
    Votre message
    • Pour créer des paragraphes, laissez simplement des lignes vides.

    Ajouter un document