iTwX Mobile v.3

Jeu de squelettes SPIP pour Mobiles, optimisé pour smartphones et tablettes.

Jeu de squelettes SPIP pour Mobiles, optimisé pour smartphones et tablettes.

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

Il intègre 2 jeux de squelettes pour mobiles et smartphones, et un jeu 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

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.

-  2 modes de redirection : automatique ou par notification push.

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.

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

Egalement

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

-  Compatible avec le plugin Agenda.

-  Compatible avec Configuration des URLs

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 , le lecteur flash est automatiquement supprimé des périphériques iPhone/iPod/iPad (SPIP2).
-  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 »
-  Plugin Google +1 : sélecteur « #googleplus1 »

Téléchargements & Documentation :

Sur le site de l’auteur : http://twxdesign.com/itwx-mobile-v3

Discussion

21 discussions

  • 1

    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

    Répondre à ce message

  • 2

    Bonjour,

    Après avoir installé :
    cimobile : détection et aiguillage des téléphones mobiles 1.2
    et
    iTwX Mobile pour cimobile 3.3.1
    j’ai dupliqué sommaire.html et rubrique.html pour les placer dans mon dossier « squelettes » en y ajoutant en bas des fichiers les lignes <INCLURE{fond=itwx/redirection}> et <INCLURE{fond=itwx/redirection}{id_rubrique}> (juste avant </body>)
    comme indiqué dans Squelettes / iTwX Mobile -> Configuration des squelettes iTwX Mobile

    Mais à

    – dans les pages article.html, breve.html, site.html, mot.html et auteur.html, remplacer avec l’objet id_ correspondant.
    • Style avec la class .itwx_alerte

    je suis perdu…


    PS : je suis en « local » et je n’ai pas d’iPhone ou autre SmartPhone pour tester.

    Juste : Firefox -> Outil -> Développement web -> Vue adaptative

    • Je viens de faire le même rajout au fichier article.html mais j’arrête les frais… ça déstabilise le site.

      Comme je suis en local, je visualise bien mon site comme depuis un SmartPhone en ayant ajouté ?cimobile=mobile après l’adresse local. Super.

    • L’écran d’un mobile étant trop petit, j’ai voulu supprimer « se connecter, etc. » mais pas moyen de faire reconnaître le fichier modifié dans « squelettes ».

      Je l’ai donc laissé (modifié) dans /plugins/auto/itwx_cimobile_3_3/… et ça marche mais n’est-il pas déconseillé de faire ça ?

    Répondre à ce message

  • 5

    Bonjour,
    les balises :

    Peuvent elles être placées dans un article ?

    Merci

    • ya pas de raison ! si vous rencontrez des problèmes merci de les décrire précisément

    • Voici une partie du code du squelette articles.html
      div=« twx-player »
      [(#MODELEcoolirisid_article)]
      /div
      div=« itwx-player »
      [(#MODELEcoolirisid_article)]
      /div
      le mur s’images est affiché 2 fois sur un PC.
      Il ne devrait s’afficher qu’une seule fois.

      Nota1 : j’ai enlevé les > et les < autour des div et /div pour que ce ne soit pas interprété
      Nota2 : dans l’aide ci dessus il manque, je pense, le / devant le 2e div

    • l’erreur est dans la doc ci-dessus,
      il faut écrire évidemment div class=« twx-player » et pas div="twx-player’

      Il faudrait corriger cette erreur dans l’aide ainsi que l’ajout du /div au lieu de div

    • Maintenant que cela fonctionne : super plugin. On en demanderait même plus !
      par exemple : l’option enlever les liens « share button » fonctionne pour l’album complet mais ils persistent lorsque l’on sélectionne une seule image.

    • bien vu pour la coquille sur div au lieu de /div
      c’est corrigé

    Répondre à ce message

  • 2
    Marines

    Bonjour,
    D’abord, merci pour ce superbe plugin !
    Je viens de découvrir un petit problème que je n’arrive pas à résoudre. J’utilise le plugin Lecteur multimédia pour afficher un dewplayer chaque fois qu’on publie un fichier mp3 dans un article.
    Lorsqu’on active le plugin iTwX Mobile, l’affichage du dewplayer sur le site web dans mon ordinateur (pas dans les tablets ou les smartphones) change comme on peut le voir dans l’image jointe.
    Je n’arrive pas voir où je peut intervenir. C’est au niveau des CSS ? dans le paramétrage des plugins ? mais quoi ?
    Si quelqu’un a eu déjà ce problème je suis preneuse de vos conseils !
    Merci :)

    • Marines

      C’est moi même !
      J’ai modifié le fichier itwx_player.css du plugin. La ligne :
      dl.spip_documents object width : 400px ; height:300px ; text-align : center ; padding:0 ; margin:0 ;
      par
      dl.spip_documents object text-align : center ; padding:0 ; margin:0 ;

      Je sais que ce n’est pas bien d’aller modifier les fichiers des plugins, mais c’est la seule solution que j’ai trouvé.
      Du coup je ne sais pas encore les conséquences de ce changement sur les autres dispositifs. S’il y en a je vous préviens !

    • vous pouvez aussi activer la surcharge css et mettre vos reglages dans le champ CSS iTwX perso.

    Répondre à ce message

  • 1

    Bonjour,

    Je voulais juste remercier les concepteurs de ce plugin ! et partager les légers bugs et façons de contourner avec les futurs utilisateurs et les développeurs :

    finalement installé sur Zpip ,
    -  installer les plugins Itwx_3_3 et CIMOBILE (130211) par transfert (FTP sous /plugings car pas dispo en automatiquesur spip3, puis les activer sous la gestion des plugin interface privée
    -  erreur 503 si nom du site >35 dans Itwx ou si la description dans Itwx est remplie : laisser vide cette dernière (bug ?)
    -  bien vider le cache image du site après chaque modif

    choix fonctionnel : sélections :
    sélectionner un theme !
    Configuration du switcher : sélections de :
    Rediriger tous les Smartphones vers la version Mobile du site
    Rediriger toutes les Tablettes vers la version classique du site

    Afficher la liste des rubriques dans le sommaire (sauf tablettes)

    Activer le sélecteur #socialtags : marche pas (inutile de sélectionner : bug ?)
    Activer le sélecteur #googleplus1 : Ok
    Activer l’Apple Touch Icon : default

    Voilà 10 mn par site : vous pouvez voir le résultat sur : http://www.yanfouom.net/ , http://www.productivix.com/ et http://www.saisie-mobile.eu/
    Merci Seds pour cet excellent travail !
    William

    • merci william pour votre retour.

      -  erreur 503 : en effet sous spip 3 la personnalisation du descriptif générait l’erreur, pas de solution donc cette fonction a été retiré dans la dernière màj
      -  #socialtags : je ne comprends pas, j’ai pu constater que la balise fonctionne parfaitement sur d’autres sites..

      cordialement

    Répondre à ce message

  • 1

    Désolé mais je n’ai pas acces a télécharge le plugin Itwx_3_3 ??? Ou puis-je le trouver ?

    Répondre à ce message

  • 4

    Bonjour,

    Suite à l’installation de ce très bon plugin qui fonctionne très bien en mode mobile, j’obtiens cette ligne sur la version web :

    « ) ; if(!(navigator.userAgent.match(/(iPhone|iPod|iPad)/i))) document.write( »

    voir sur : www.artsenscenes.fr

    S’agit il d’un bug ?

    Cordialement

    • désolée mais sur votre site je ne trouve nulle part cette ligne sauf en code source biensur. une capture peut-être ?

    • Bonjour,

      Et merci pour votre intérêt. Donc en effet ce désagrément n’apparaît pas sur le site lorsqu’on est connecté en visiteur. Par contre, il apparaît sur la version public connecté en administrateur.

      J’ai fais une copie d’écran pour que vous puissiez le visualiser.

      Cdlt

    • je pense que le pb est en rapport avec l’un de vos plugins notamment de gestion de squelettes. si vous aviez la possibilité de déterminer de quel plugin vient le problème ça serait bien, ou alors donnez la liste de vos plugins

    • Ok. Voici la liste. comment savoir lequel est ce ?

      • Agenda 3.11.8 - stable
      • AnythingSlider 2.0.0 - dev
      • API de vérification 1.0.2 - test
      • Autorité 0.9.13 - test
      • Aveline 2.3.4 - stable
      • Boutons dans le Texte 2.0.0 - test
      • CFG 3.0.0 - stable
      • Champs Extras 3.2.4 - stable
      • Champs Extras (Interface) 3.1.0 - stable
      • cimobile : détection et aiguillage des téléphones mobiles 1.2 - stable
      • Compositions 3.3.2 - test
      • Contacts & Organisations 2.6.5 - test
      • Coordonnées 2.0.19 - test
      • Corbeille 3.0.3 - stable
      • Couteau KISS 1.1.9 - stable
      • Crayons 1.15.2 - stable
      • Critères Suivant / Précédent 1.3.2 - stable
      • Duplicator 1.3.0 - test
      • Éditer Liens Simples 1.0.1 - experimental
      • Enluminures typographiques 3.3.2 - stable
      • Facteur 2.4.5 - stable
      • Formidable 1.3.5 - dev
      • Formulaire Upload 1.0.4 - test
      • Google +1 0.4.1 - stable
      • Google Analytics 0.4.2 - stable
      • Habillage pour AES 2.0.0 - stable
      • Import-Export 1.2.0 - test
      • iTwX Mobile pour cimobile 3.2.18 - test
      • Javascript Scroller 1.44.1 - stable
      • jQuery Cycle 2.2.6 - stable
      • Le Couteau Suisse 1.8.132 - stable
      • MailShot 1.4.1 - stable
      • MailSubscribers 1.3.0 - stable
      • Menu babbibel 3.0 - stable
      • Menus 1.4.4 - test
      • Mes fichiers 2.0.12 - stable
      • Mini Calendrier 2.3.4 - test
      • Newsletters 1.2.7 - stable
      • NoiZetier 2.2.0 - stable
      • NoSPAM 1.0.9 - stable
      • Notifications 3.0.10 - stable
      • Pays ISO 3166-1 2.1.1 - stable
      • Recommander à un ami 1.0.4 - stable
      • Saisies pour formulaires 1.30.2 - test
      • Sauvegarde automatique 1.0.6 - stable
      • Sauvegarde MySQL automatique de la base de données de SPIP
      • SkelEditor 2.7.4 - test
      • Social tags 1.0.4 - stable
      • SPIP Bonux 3.0.5 - stable
      • YAML 1.5.0 - stable
      • Zpip-dist v1 1.7.21 - stable
      • Zpip-vide 2.1.2 - stable

    Répondre à ce message

  • 1
    Régis

    dans les dossiers squelettes mobile et smartphone, j’ai tenté d’écrire un squelette spécifique pour une rubrique (par ex rubrique-15), mais cela ne semble pas marcher ? J’ai toujours ce qui était prévu dans le squelette rubrique-15 du site classique, sauf la mis en page, bien sûr. Que faire ?

    • normalement il n’y a aucun problème pour écrire un squelette différent du site classique. vous devez faire une erreur quelque part, pensez à bien nommer rubrique=15.html pour suivre votre exemple

    Répondre à ce message

  • Bonjour
    Utilisant votre jeu de squelettes, il y a une chose que je ne comprend pas par rapport aux images insérées dans le champ texte : pour le site normal mon appel aux images est de type #TEXTE|image_reduire280,0, dans la page article du squelette pour mobile #TEXTE|image_reduire320,0.
    Le filtre image_reduire pour mobile ne semble pas vouloir marcher, la page affiche toujours les images en 280 qu’elle récupère dans cache-vignette (< img width="280" height="210" src="local/cache-vignettes/L280xH210/plongee-atlantis-cdecc-dd9b1.jpg >).
    Par contre si je choisi une réduction plus petite que 280, là ça marche, l’image est affichée avec une plus petite taille et un nouveau dossier se crée dans cache-vignettes (exemple : cache-vignettes/L100xH100).
    Est ce normal ou je m’y prends mal ?
    (Je vide à chaque fois le cache et le cache image)
    Merci pour votre aide.

    Répondre à ce message

  • Excellent Plugin merci !!

    Répondre à ce message

Ajouter un commentaire

Avant de faire part d’un problème sur un plugin X, merci de lire ce qui suit :

  • Désactiver tous les plugins que vous ne voulez pas tester afin de vous assurer que le bug vient bien du plugin X. Cela vous évitera d’écrire sur le forum d’une contribution qui n’est finalement pas en cause.
  • Cherchez et notez les numéros de version de tout ce qui est en place au moment du test :
    • version de SPIP, en bas de la partie privée
    • version du plugin testé et des éventuels plugins nécessités
    • version de PHP (exec=info en partie privée)
    • version de MySQL / SQLite
  • Si votre problème concerne la partie publique de votre site, donnez une URL où le bug est visible, pour que les gens puissent voir par eux-mêmes.
  • En cas de page blanche, merci d’activer l’affichage des erreurs, et d’indiquer ensuite l’erreur qui apparaît.

Merci d’avance pour les personnes qui vous aideront !

Par ailleurs, n’oubliez pas que les contributeurs et contributrices ont une vie en dehors de SPIP.

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

Ce champ accepte les raccourcis SPIP {{gras}} {italique} -*liste [texte->url] <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

Ajouter un document

Suivre les commentaires : RSS 2.0 | Atom