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
  • iTwX Mobile v3 1er septembre 2013 18:15, par DixasDig

    Hola.
    He instalado cimobile y twx, las ultimas versiones. Con SPIP 3.0.9.
    Funciona perfectamente desde el smartphone con android pero cuando accedo desde una nexus 7 (2013) con android 4.3 veo La versión de smartphone y no la clásica que es la que quisiera.

    Gracias


    • iTwX Mobile v3 2 septembre 2013 16:06, par Seds

      bonjour
      allez sur http://detectmobilebrowsers.com/ avec votre nexus 7 et notez ici le résultat


    • iTwX Mobile v3 5 septembre 2013 17:55, par Seds

      les utilisateurs de nexus7 sont priés^^ de tester cette config dans /itwx_cimobile/squel_mobile/_config_cimobile.php :

      ▸ retirer /* àligne 47 et */ àla ligne 98

      ▸ ligne 38 : remplacer par 'tablettes' => array('ipad','androidtablette','nokiatablette','blackberrytablette','archos','nexus7'),

      ▸ ligne 66 : ajouter une virgule après ’arches’ puis dessous, ajouter ',Nexus 7 Build,i'=>'nexus7'

      pas sure que ça fonctionne, alors merci de votre retour - DixasDig je compte sur vous :)


    • iTwX Mobile v3 9 septembre 2013 14:40, par Seds

      prueba la màj 3.3.1 SPIP 3


  • iTwX Mobile v3 22 juillet 2013 19:29, par Bermen

    Bonjour, je viens d’installer Itwx v3 sur une version 2.1 de SPIP

    Tout fonctionne correctement mais j’ai une erreur sur tous les articles de mon site principal (qui est bilingue) :
    "Aucun squelette redir/lang-article.html n’est disponible..."
    Pouvez-vous me dire d’où vient cette erreur et comment la supprimer ?

    Merci
    Bertrand


    • iTwX Mobile v3 23 juillet 2013 15:33, par Seds

      bonjour,
      quelle version utilisez-vous, itwx utilisable seul ou avec cimobile ? si vous en utilisez un, testez l’autre pour voir si le problème est résolu.


    • iTwX Mobile v3 31 juillet 2013 16:06, par Bermen

      Bonjour,

      J’utilise une version utilisable seule.
      Je vais essayer avec cimobile
      Merci
      Bertrand


    • iTwX Mobile v3 21 août 2013 14:30, par Bermen

      Bonjour,

      J’ai copié le répertoire \redir\
      de
      \plugins\itwx_mobile_3_2\itwx\
      dans
      \squelettes\
      et ça a l’air de fonctionner (plus de message d’erreur)

      Bertrand


    • iTwX Mobile v3 21 août 2013 16:17, par Seds

      dans ce cas mettez-le plutôt àla racine du plugin c.à.d \plugins\itwx_mobile_3_2\


    • iTwX Mobile v3 21 août 2013 17:02, par Seds

      J’ai trouvé l’erreur. il faut corrigé :

      \plugins\itwx_mobile_3_2\itwx\pipelines\itwx_switcher.php
      l.111

      il fallait remplacer ’redir/lang-’ par ’itwx/redir/lang-’ (telle la ligne 82)

      merci de votre retour !


    • iTwX Mobile v3 21 août 2013 17:12, par Seds

      corrigé avec la maj 2.1.16


    • iTwX Mobile v3 21 août 2013 20:38, par Bermen

      Ça marche !
      Merci pour votre célérité
      Bertrand


  • iTwX Mobile v3 7 juin 2013 14:49, par Wilowfr

    Bonjour
    J’ai un fichier audio mp3 intégré àun article et lu par le plugin ’lecteur_multimedia’ ..
    Lorsque je teste ma page sur monsite/cimobile=mobile sur le pc le lecteur s’affiche et je peux lire (écouter) le fichier mais quand j’affiche la page sur le mobile le lecteur n’apparait pas et seul le lien vers le fichier est visible.
    Est-ce qu’il y’a un moyen pour faire afficher un lecteur audio sur ce lien ?
    Merci d’avance et grand merci pour ce plugin


    • iTwX Mobile v3 13 juin 2013 11:53, par Seds

      malheureusement certains périphériques mobiles ne sont pas compatibles avec le lecteur multimédia car il fait appel àflash comme l’iPhone par ex. néanmoins le lien vers le mp3 devrait permettre de le lire


  • Erreur 503 avec Itwx et Cimobie 23 mai 2013 16:29, par christophe noisette

    Bonjour
    j’ai un site spip 3.0.8, j’ai installé Cimobile 1.2 et itwx (la dernière version présente sur cette page, soit 3.2.18). Quand je vais sur la page www.infogm.org/?cimobile=mobile, j’ai droit àune erreur 503. Or j’ai lu que ces erreurs étaient temporaires et liées au serveur. Mais le fait est que cette erreur perdure. La raison que spip donne àcette erreur est "1 Erreur de compilation plugins/itwx_cimobile_3_3/squel_mobiles/mobile/sommaire.html". J’ai essayé de modifier inc-head comme proposé sur kle forum du plugin Cimobile pour remplacer : script/notification}> par [(#PLUGINcimobile|non)
    script/notification}>]... en vain.
    Voilà. Si vous avez des idées, merci de vos aides toujours précieuses.


    • Erreur 503 avec Itwx et Cimobie 17 juin 2013 12:25, par Anthony

      Bonjour,

      J’ai la même erreur que toi, as-tu trouvé une solution ?

      Merci


    • Erreur 503 avec Itwx et Cimobie 17 juin 2013 14:28, par Christophe

      non j’ai pas trouvé, mais j’ai pas beaucoup cherché, j’avoue
      Cordialement
      /C/


    • Erreur 503 avec Itwx et Cimobie 24 juin 2013 11:46, par Miguel

      Bonjour,

      Même problème ici : http://clubastro.obspm.fr/?cimobile=smartphone
      Avec SPIP 2.1.1, Cimobile 1.02 et iTwX 3.2.16.
      Code d’erreur en PJ.

      Merci àtoute âme charitable qui proposerait une solution !


    • Erreur 503 avec Itwx et Cimobie 21 août 2013 17:15, par Seds

      Bonjour,
      avez-vous essayer la version iTwX utilisable seule ?
      Cordialement
      Seds


    • Erreur 503 avec Itwx et Cimobie 24 août 2013 14:36, par Seds

      seriez-vous tous en Zpip ?


    • Erreur 503 avec Itwx et Cimobie 9 septembre 2013 14:41, par Seds

      essayez la nouvelle mise àjour


    • Erreur 503 avec Itwx et Cimobie 18 septembre 2013 16:52, par Natacha Courcelles

      Bonjour
      même erreur 503
      dans la config j’ai eu la mauvaise idée d’écrire "autour de l’eau" dans la description
      en ajoutant un \’ avant l’apostrophe ça fonctionne
      de plus le pour la langue ne fonctionne pas

      bien cordialement
      Natacha Courcelles


    • Erreur 503 avec Itwx et Cimobie 18 septembre 2013 17:34, par Natacha Courcelles

      excusez moi il manque la balise multi
      de plus le

      pour la langue ne fonctionne pas


    • Erreur 503 avec Itwx et Cimobie 18 septembre 2013 17:56, par Seds

      Le descriptif personnalisé sur iTwX provoquait l’erreur 503 avec SPIP3, donc pour faire plus simple depuis la derniere màj, cette personnalisation n’est plus possible.

      En revanche pour le <multi>, n’utilisant pas cette balise, merci de me décrire davantage le problème.


    • Erreur 503 avec Itwx et Cimobie 18 septembre 2013 18:55, par Natacha Courcelles

      merci pour cette réponse hyper rapide
      et merci pour ce plugin qui fonctionne très bien
      c’est juste dans le descriptif personnalisé de iTwX que la balise multi ne fonctionnait pas (en plus de l’apostrophe non échappée )
      comme cette personnalisation n’est plus possible on oublie


  • iTwX Mobile v3 14 mars 2013 19:30, par Mail16

    Le plugin fonctionne parfaitement et la personnalisation facile.

    Par contre, la mise àniveau du plugin, par exemple itwxmobile 3.1.18, écrase tous les fichiers personnalisés ayant le même nom que les fichiers originaux installés dans les sous-dossiers de /squel_mobiles

    Y a-t-il la possibilité de créer, comme pour les squelettes du site version Web, un sous-dossier où installer les fichiers personnalisés, afin qu’ils soient conservés lors des mises àniveau et utilisés par le plugin et, si oui, où ?

    D’avance merci pour la réponse


    • iTwX Mobile v3 24 mars 2013 16:07, par Seds

      bonjour, pour le moment il n’y a pas de méthode automatique pour sauvegarder des fichiers pendant la mises àjour, mais c’est une idée àétudier :)
      sauf biensur qlq méthodes manuelles comme faire une sauvegarde ou renommer les dossiers squel personnalisés avant la mise àjour.
      cordialement