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


164 Messages
  • Bonjour,

    Bravo pour ce plugin très pratique.

    Je ne comprends pas comment fonctionne l’affichage des images contenues dans un article (squelette article.html) : en modifiant les paramètres de (#TEXTE|image_reduire0,0) je constate une modification de la définition de l’image mais pas de sa taille d’affichage : quel est le procédé qui force toutes les images de l’article àprendre toute la largeur de l’écran même lorsque la taille d’origine de l’image est plus petite ?

    Pour résumer je souhaite que les images moins large que l’écran conserve leur taille d’origine tandis que celles dont la largeur est plus grande soient réduites pour "entrer dans le cadre". Si c’est possible comment dois-je m’y prendre ?

    Merci de votre réponse.


  • Google-Mobile friendly 12 mars 2015 17:47, par Djclone

    Pour que la version de votre site mobile passe le test de compatibilté mobile Google disponible a cette adresse :

    https://www.google.com/webmasters/tools/mobile-friendly/

    Il faut que vous modifiez votre robots.txt et y ajoutez :

    Disallow :/local/
    Allow :/local/cache-css
    Allow :/local/cache-js
    Allow :/local/cache-vignettes

    Disallow :/plugins/
    Allow :/plugins/auto/[Nom_plugin_itwx_cimobile]/squel_mobiles/images/themes

    Voila votre site sera ensuite Google-mobile friendly


  • iTwX Mobile v3, pas d’affichage 27 janvier 2015 22:59, par Fourmi

    Bonjour,

    Et tout d’abord merci d’avoir proposé ce plugin très utile.

    je pense avoir bien activé le plugin, mais j’ai l’impression que l’affichage ne s’adapte pas (http://www.myrmecofourmis.fr/). J’ai installé et activé ITwX pour Cimobile, intégré les "inclure" pour les liens vers le site normal, et vidé le cache, mais rien ne change (testé sur un iphone).
    Y-a-t-il des incompatibilités avec d’autres plugins ? J’utilise "cache cool" "le couteau suisse" "liens explicites" "memoization" "nuage" "spip bonux" et une version très personnalisée d’un ancien squelette (ahuntsic) qui n’est plus disponible sur internet.

    Merci pour votre aide, je vous tiens au courant si je trouve de mon côté...


    • iTwX Mobile v3, pas d’affichage 28 janvier 2015 01:37, par seds

      Bonsoir, et bien tout semble fonctionner. Vous avez choisi le thème vert..


    • iTwX Mobile v3, pas d’affichage 29 janvier 2015 09:23, par Myrmecofourmis

      Bonjour,

      merci et désolé pour le dérangement, en effet, c’était un problème tout àfait indépendant du côté de mon hébergeur. Bonne journée et merci encore pour ce plugin !


  • Bonjour,

    J’utilise ITWX pour mes sites mobiles, et celui-ci fonctionne àmerveille.
    Cependant, je l’ai installé sur un SPIP mutualisé, et je souhaiterais modifier les paramètres de personalisation du plug-in afin celui-ci redirige vers des jeux de squelettes et non plus vers des feuilles CSS… (un jeu de squelette par site mutualisé - vu que je modifie ceux-ci en fonction de mes besoins par site) Y a t’il une solution simple pour faire cela ? Merci de votre réponse, cordialement.

    j’utilise ITWX couplé avec Cimobile.


    • Gérant une mutualisation ; je ne connais pas itwx.

      J’ai un peu de mal pour vous répondre, des urls exemple peu être ?

      si j’ai bien compris dans itwx on peu le configurer pour rediriger vers une url spécifique
      chaque site mutualisé peu donc realiser ce réglage indépendament des autres

      ou alors j’ai pas compris ...
      exemple le couteau suisse de chacun de mes sites a une configuration différents

      @micalement spipfactory.com


    • En fait, ITWX propose un jeu de squelettes, et permet de personnaliser via une CSS (en gros, effectivement, sur chaque site mutualisé, je peux choisir la couleur, mais pas les squelettes). Or, je souhaite avoir un jeu de squelettes spécifique mobile pour chaque site (organisation différente des sommaires, pages article, rubrique etc…)
      Pour ça, j’ai trois solutions :
      ▸ soit je bidouille itwx pour que le choix puisse se faire non plus sur des css mais sur des jeux de squelettes complets (un peu compliqué, je te l’accorde)
      ▸ soit j’arrive àcréer un répertoire plugin pour chaque site mutualisé - dans lequel je pourrai installer un ITWX différent avec mes jeux de squelettes personnalisés, mais je tombe sur une erreur (cf. ma question sur ce forum : http://forum.spip.net/fr_260048.html#forum260067)
      ▸ soit je fais un hack un peu crado dans mes squelettes mobiles du genre "if #URL_SITE_SPIP=mondomaine.tld" -> mon code de squelette "else" mon autre code de squelette. Mais c’est moche.

      C’est pour une plateforme web qui gère plusieurs sous-domaines dont l’architecture et l’ergonomie sont franchement différentes… (le seul domaine accessible pour l’instant est reussir-son-mandat.lafeve.org , les autres sont fermés car je suis en train de bosser dessus)
      Merci pour ton aide. Cordialement


    • ▸ soit j’arrive àcréer un répertoire plugin pour chaque site mutualisé - dans lequel je pourrai installer un ITWX différent avec mes jeux de squelettes personnalisés, mais je tombe sur une erreur (cf. ma question sur ce forum : http://forum.spip.net/fr_260048.html#forum260067)

      donc je suis a allez lire le forum et ça m’interpelle
      Je cherche àdéclarer un dossier plugins par site mutualisé (.../sites/mondomaine.tld/plugins donc…)

      ça c’est la méthode pour autoriser un site a pouvoir avoir un repertoire plugin et y telecharger des plugins via SVP

      a la lecture de ton fil , il te suffit de deposer dans le repertoire du mutualiser le repertoire : plugin/itwx

      et normalement ça doit le faire

      pour info sur notre plateforme
      seul le site maitre a le droit d’installer des plugins dans le repertoire plugin situé a la racine
      ensuite le site fraise peu installé les plugins de son choix dans son propre repertoire plugin
      ensuite tagada quand a lui ne peu pas installé de plugin mais a deux plugins pour lui explicitement dans son propre répertoire plugins itwx et cimobile

      le nom des sites est bidon mais la structure existe vraiment sur notre mutu

      @micalement spipfactory.com


    • Non, justement, ça ne fonctionne pas, sinon, je n’aurais pas posté des messages sur les forums pour comprendre où était le problème.
      Mais ça n’est pas gave, j’ai trouvé une astuce pour résoudre temporairement mon problème, il suffit de renommer le prefix du plug-in et de l’installer plusieurs fois àla racine. Comme ça j’active le PI qui va bien pour chaque site. On doit pouvoir faire plus propre, mais en l’occurrence, ça fonctionne.


  • iTwX Mobile v3 16 décembre 2013 23:02, par rodolphe

    Bonjour et merci pour ce plugin efficace !
    Je souhaiterais ajouter une bannière ou un logo dans le bandeau d’entete. Est ce possible ?
    Avez vous prévu d’ajouter cette possibilité dans l’administration du plugin, sans passer par du code ? (je suis novice)
    Merci


    • iTwX Mobile v3 17 décembre 2013 13:23, par Seds

      Bonjour,
      vous pouvez utiliser la fonction logo du site, celui-ci apparaîtra en entête sur la page d’accueil.
      Cdlt