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 réduction image dans conteneur 31 décembre 2012 16:26, par jab

    Bonjour,
    J’utilise les attributs image width="100%" et height="100%" pour contenir une image dans sa dimension maximum àl’intérieur du conteneur article. Cette méthode fonctionne avec Sarka/spip. Néanmoins ça ne fonctionne plus avec les squelettes pour mobiles : l’image n’est pas réduite.
    Existe-t-il une solution ?


    • iTwX Mobile v3 réduction image dans conteneur 2 janvier 2013 15:40, par Seds

      bonjour,
      normalement les images sont calibrées sur la taille de l’écran
      si vous avez ajouté un attibut àvos images, utilisez "|vider_attribut" pour le supprimer du texte dans le squelette mobile

      ceci dit width=100% avec height=auto fonctionne tout aussi bien, cela évite qlq bataille de redimension de l’image

      sinon notez une url et votre méthode précise


    • iTwX Mobile v3 réduction image dans conteneur 3 janvier 2013 09:44, par jab

      Merci pour votre réponse.
      J’ai essayé d’appliquer le filtre |vider_attribut dans le squelette smartphone et càn’a donné aucun résultat.
      J’emploie une méthode que j’ai appelé "photoclasse" que j’applique dans un article spip pour appeler l’image.

      URL d’un exemple :
      http://anciens-lazos.org/spip.php?article146

      Pièce jointe : méthode "photoclasse".


    • iTwX Mobile v3 réduction image dans conteneur 3 janvier 2013 14:52, par Seds

      Dans ce cas, créez un nouveau "/modeles/photoclasse.html", sans attribut (je pense) dans le squelette mobile ou àla racine du plugin pour surcharger, celui du /squelettes. En tout cas c’est une piste àexplorer...


    • iTwX Mobile v3 réduction image dans conteneur 5 janvier 2013 09:46, par jab

      Merci pour votre proposition,
      J’ai placé mon modèle "photoclasse.html" dans le dossier du plugin avec comme attribut class="photo", puis j’ai utilisé la zone de surcharge CSS de la configuration pour placer le code suivant :

      #smart
      .photo {
      width:300px;
      height:225px;
      }

      et j’ai obtenu la réduction de taille demandée en utilisant mon smartphone.
      Il faudrait trouver une solution pour avoir une réduction fonction de la taille écran du mobile et de son mode d’affichage portrait ou paysage.


    • iTwX Mobile v3 réduction image dans conteneur 5 janvier 2013 10:44, par Seds

      Vous avez toutes les soluces ci-dessus :)


    • iTwX Mobile v3 réduction image dans conteneur 5 janvier 2013 10:51, par Seds

      En tout cas chez moi c’est nickel, faudrait retirer le scroll


    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 scroll horizontal 28 décembre 2012 20:05, par abarge

    Bonjour,
    J’expérimente ce plugin fort intéressant et j’aimerais faire fonctionner le scroll horizontal pour des contenus larges (tables).
    Dans le configurateur du plugin, j’ai coché "Activer la surcharge CSS" et renseigné le cadre CSS iTwX perso suivant la capture ci-jointe.
    Ai-je bien compris le mode d’emploi car je n’obtiens pas de résultat ?


    • iTwX Mobile v3 scroll horizontal 28 décembre 2012 20:58, par Seds

      Non d’abord la surcharge CSS est destinée au langage css et non au html comme vous l’avez fait.
      Ensuite pour faire fonctionner le scroll horisontal il suffit de mettre votre contenu large entre les div, ainsi

      <div class="twx_scroll"> [ contenu large ] </div>

      il faut donc l’écrire comme ci-dessus dans votre squelette ou dans la partie rédactionnel du texte en bref làoù vous avez mis votre contenu large
      Il est donc inutile d’activer la surcharge CSS, puisque cette fonction est déjàcomprise dans le style "twx_scroll".


    • iTwX Mobile v3 scroll horizontal 29 décembre 2012 11:49, par abarge

      Bonjour et merci pour votre aide,
      J’ai appliqué votre conseil dans le squelette et le scroll horizontal fonctionne lorsque j’utilise le simulateur indiqué dans votre article àl’adresse
      http://iphone4simulator.com/
      Par contre je n’ai pas réussi àle faire fonctionner directement sur un Nokia Lumia 610 utilisant Windows Phone 7, même après avoir vidé l’historique de navigation du Nokia.


    • iTwX Mobile v3 scroll horizontal 29 décembre 2012 12:01, par abarge

      Bonjour,
      Après essai plus approfondi, ça fonctionne aussi avec le Nokia 610, il suffit simplement de faire glisser le doigt dans le sens horizontal alors que le Nokia ne fait pas apparaître l’ascenseur comme pour le scroll vertical.
      Encore merci.


    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 v2.1 CIMOBILE 13 octobre 2012 19:22, par Ludo

    Bonjour,
    Je souhaite utiliser iTwX pour cimobile 2.1. J’ai spip 2.1.17 mais il ne veut pas s’installer. Nécessite spip 2.1.*
    Je ne peux pas utiliser la version 3 puisque j’utilise le plugin Spipimmo qui n’est pas compatible Spip v3. C’est pour cette raison que j’ai du reprendre le dernier spip v2 que j’ai trouvé.
    Avez vous une solution ?
    Cordialement !


    • iTwX Mobile v2.1 CIMOBILE 16 octobre 2012 08:10, par Seds

      Bonjour,
      Oui, Utilisez la version pour SPIP 2.1 (la màj iTwX n’ayant rien àvoir avec la version de SPIP)


    • iTwX Mobile v2.1 CIMOBILE 16 octobre 2012 20:28, par Ludo

      Bonsoir,
      Je me suis peut-être mal exprimé.
      J’ai spip 2.1.7 mais il refuse de prendre le plugin ItwX en me mettant le message suivant :

      Impossible d’activer le plugin ../plugins/itwx_mobile_3_2
      Nécessite SPIP en version [2.1.0 ;2.1.*] minimum.
      Nécessite SPIP en version [2.1.0 ;2.1.*] minimum.


      Le plugin Cimobile lui s’installe bien.


    • iTwX Mobile v2.1 CIMOBILE 18 octobre 2012 16:45, par Seds

      Essayez la nouvelle mise àjour :
      iTwX Mobile pour Cimobile, SPIP 2.1, màj 2.1.15


    • iTwX Mobile v2.1 CIMOBILE 18 octobre 2012 16:50, par Seds

      pardon : la màj 2.2.15


    • iTwX Mobile v2.1 CIMOBILE 19 octobre 2012 19:12, par Ludo

      Bonsoir,
      Déjàfait, même problème.


    • iTwX Mobile v2.1 CIMOBILE 19 octobre 2012 20:24, par seds

      le message ne peut être le même puisque je viens de corriger l’erreur sur la nécessité pour SPIP 2.1
      si avec cette nouvelle mise àjour le plugin ne s’installe toujours pas, notez-moi svp la liste de vos plugins, merci


    • iTwX Mobile v2.1 CIMOBILE 19 octobre 2012 21:24, par Ludo

      Bonsoir,
      Le message est le suivant :

      Impossible d’activer le plugin ../plugins/itwx_cimobile_3_2
      Nécessite SPIP en version [2.1.0 ;2.1.*] minimum.

      Mes plugins actifs sont :
      -API de Vérification
      -Bandeau
      -CFG
      -Cimobile
      -Couteau suisse
      -Mediabox
      -Saisies pour formulaires
      -SPIP Bonux
      -SPIP Immo

      Cdlt


    • iTwX Mobile v2.1 CIMOBILE 22 octobre 2012 18:06, par Ludo

      Bonsoir,

      Un grand merci pour ce suivi qui m’a permis d’installer ce plugin avec succès.

      Bonne continuation


    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 et réécriture d’URL 26 septembre 2012 18:13, par Steph

    Bonjour

    Le site se charge correctement pour la page d’accueil, mais ensuite toutes les autres pages sont affichées avec le squelette standard du site et pas les squelettes spécifiques.

    La ré-écriture d’url est activée, y-a-t-il un réglage àmodifier ?


    • iTwX Mobile v3 et réécriture d’URL 27 septembre 2012 10:50, par seds

      Non aucun reglage n’est necessaire.
      Quelle est votre configuration ?


    • iTwX Mobile v3 et réécriture d’URL 27 septembre 2012 14:05, par Steph

      Du spip 2.1.19 avec "cimobile" et le plugin "iTwX Mobile pour Cimobile SPIP 2.1 màj 2.1.14".

      Si je désactive les urls "libres" et supprime le fichier "htaccess" (celui fournit par défaut pas Spip), alors cela fonctionne.
      C’est curieux.


    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 1er septembre 2012 19:41, par Bernt

    Un grand merci pour ce plugin.
    Je l’utilise sur un site qui héberge des photos et cela marche très bien
    http://www.ruedesboulets.com/?cimobile=mobile


    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