TwXDesign

iTwX Mobile

Voir désormais iTwX Mobile v3

JEUX DE SQUELETTES SPIP POUR MOBILES
Optimisés pour iPhone/BlackBerrry/HTC et autres mobiles

2_3_7


Ce plugin est utilisé par 307 sites

Les squelettes et les designs optimisés pour iPhone ne fonctionnent pas sur d’autres périphériques. Le Slide notamment est particulièrement lourd et lent à charger, y compris sur les générations inférieures à l’iPhone4.

Aussi l’optimisation iTwX mobile pour site SPIP a été conçue pour être supportée par tous les modèles quelle qu’en soit leur puissance.

 

Ce plugin consiste en un triple jeu de squelettes :

– pour iPhone/iPod,
– pour BlackBerry, HTC et Android,
– pour tous les autres modèles tels que Nokia, Samsung, LG, Motorola et SonyEricsson.

Une fois activé, vous pourrez réaliser les redirections vers la version mobile de votre site SPIP en fonction de la marque du mobile.

Ces trois squelettes ont l’avantage de s’adapter à la performance supposée des différentes périphériques, notamment pour les pages itwx_ en encodage allégé. Ils permettent également de personnaliser l’habillage de façon différente, indispensable notamment sur les iPhones dont la codification des css peuvent être différentes, ainsi que pour la gestion des fichiers multimédias sans flash.

Installation

Ce plugin s’intalle comme n’importe quel autre plugin SPIP (voir documentation SPIP).

Compatiblité

Le plugin est compatible avec Agenda 2.0.

Fonctionnalités

Ce plugin gère
   – les articles
   – les brèves
   – les rubriques
   – les sites référencés
   – les mots-clés sur brève, article, rubrique et site référencé
   – les forums sur article et brève
   – les auteurs
   – le portfolio
   – les documents joints

Sommaire :
   – 8 derniers articles
   – 5 derniers messages sur articles (uniquement)
   – rubriques
   – 5 dernières brèves
   – agenda
   – mots clés
   – auteurs
   – rechercher
   – plan
   – connexion
   – site classique

Prise en charge de la fonction-mot clé invisible sur rubriques et articles.

Votre ’apple-touch-icon’

Vous pouvez personnaliser le raccourci accueil de votre iPhone, en créant votre propre logo au format .png 128x128, qui sera nommé apple-touch-icon.png et remplacera celui qui se trouve à la racine du plugins (voir aussi ces instructions).

Détection du mobile et redirection par notification push (boite de dialogue)

Un javascript va détecter le périphérique utilisé par le visiteur et proposer une redirection sur la version optimisée.

Les iPhone et iPod seront redirigés vers la page :
.../spip.php ?page=iphone_sommaire

Les BlackBerry, HTC et Android seront redirigés vers la page :
.../spip.php ?page=bberry_sommaire

Les autres mobiles seront redirigés vers la page :
.../spip.php ?page=itwx_sommaire

Télécharger le code ci-dessous, le copier et coller ou entre les <head></head> de vote page d’accueil sommaire.html (sauf modification de votre part), ou dans le fichier inc-head.html du dossier squelettes-dist, pour que toutes les pages proposent la redirection.

Sachez qu’en installant ce code dans le head du sommaire.html, seule cette page proposera la redirection. En l’installant dans le inc-head.html, toutes les pages redirigeront vers la version XXX(*)_sommaire du plugin iTwX Mobile.

Si vous utilisez le plugin NOTIFICATION, ou souhaitez que les moteurs de recherche redirigent le contenu d’une page vers sa version mobile,
il faut remplacer les urls "http://monsite.fr/spip.php?page=XXX_sommaire" dans chaque page à rediriger :

- "http://monsite.fr/spip.php?page=XXX_article&id_article=#ID_ARTICLE" pour les pages article.html

- "http://monsite.fr/spip.php?page=XXX_breve&id_breve=#ID_BREVE" pour les pages breve.html

– etc.

(*) remplacer XXX par iphone, bberry et/ou itwx

N’oubliez pas de personnaliser l’url de votre site !

Télécharger le code

Ensuite appelez la fonction avec la balise body :
<body onLoad="iPhoneAlert();BlackBerryAlert();MobileAlert();">

Important !
Pour rediriger tous les mobiles vers un seul et même squelette, installez ce code dans le head avec le nom du squelette que vous aurez choisi, puis appelez avec <body onLoad="MobileAlert();"> .

Détection du mobile et redirection par alerte dans une div sur site classique

Il est aussi possible de proposer une redirection plus discrète vers votre site mobile, par un message d’alerte intégré sur une page web de votre site classique, et qui ne s’affichera que sur les périphériques mobiles.

   – Téléchargez ce fichier et choisissez le script de redirection à copier
   – Collez-le sur le fichier squelette-dist/sommaire.html et/ou toute autre page qui vous conviendra, à l’endroit où vous souhaitez qu’apparaisse l’alerte
   – Si besoin personnalisez le texte d’alerte du script
   – Vous pouvez personnaliser les div dans squelette-dist/habillage.css avec #iphoneAlerte a..., #mobileAlerte a..., et/ou #smartphoneAlerte a...

Templates

Il existe pour le moment 4 versions de ce plugin :
   – Classique (bleu),
   – Noir&Blanc,
   – Vert,
   – mauve.

En chantier

   – mise à jour automatique
   – redirection en fonction du navigateur
   – optimisation de l’accès privé

Desiderata et Développement

Ce plugin a été conçu pour des besoins bien précis et testé sur un certain nombre de mobile mais pas la totalité. Aussi, si vous remarquez des problèmes qui n’ont pas été rencontrés jusqu’à maintenant, merci de les signaler.

Egalement, si vos versions mobiles nécessitent une compatibilité particulière avec certains plugins, ou si vous avez des idées d’améliorations, n’hésitez pas à en parler ici !

Mises à jour & Corrections importantes

2.3.7 sur :
lignes 215 / 217 / 219 - iphone_habillage
lignes 212 / 214 / 216 - bberry_habillage
lignes 172 / 174 / 176 - itwx_habillage
boucle documents joints - XXX_inc-documents, XXX_rubrique

2.3.6 sur les lignes :
78 / 183 - iphone_sommaire
80 / 184 - bberry_sommaire
64 / 168- itwx_sommaire
244 - iphone_rubrique
239 - bberry_rubrique
233 - itwx_rubrique
143 - iphone_mot
147 - bberry_mot
138 - itwx_mot

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

50 Messages
  • Smartphone non reconnu 10 janvier 2011 01:20, par Patrice HARDOUIN

    Bonjour,

    que ce soit sur mon site ou sur le votre, il n’y a pas moyen de se connecter directement sur le squelette smartphone avec le téléphone XPeria Mini (Android).

    Y-a-t’il quelque chose de supplémentaire àfaire (en plus du script et de l’inclusion dans la balise "body") ?

    bien cordialement,

    Patrice HARDOUIN


    • Smartphone non reconnu 10 janvier 2011 19:33, par Patrice HARDOUIN

      Comment fait-on pour utiliser #INSERT_HEAD àla place de copier le javascript ?


    • Smartphone non reconnu 11 janvier 2011 02:05, par seds

      Pour ce qui concerne la redirection de ce site, c’est un peu normal car elle était "en travaux". Connectez-vous ànouveau, notamment via la notification de message, la redirection est rétablie. A ce propos je vous invite àrelire le paragraphe sur la redirection, suite àvos questions j’y ai apporté quelques précisions, et autres alternatives.

      Ensuite, j’ai regardé votre site, et en effet cela ne peut fonctionner pour 2 raisons :
      ▸ le code javascript n’est pas installé dans la page sommaire (accueil du site). Suivez bien les instructions
      ▸ votre appel dans le body doit être fait ainsi : <body onLoad="iPhoneAlert();BlackBerryAlert();MobileAlert();" dir="ltr"> au lieu de <body dir="ltr" onLoad="iPhoneAlert();BlackBerryAlert();MobileAlert();"> comme vous l’avez noté.

      Pour ce qui est de la question sur le #INSERT_HEAD, il était possible en effet d’utiliser le pipeline du plugin, mais préférant laisser libre toutes les alternatives que peut offrir l’utilisation de iTwX Mobile, cette option n’a pas été retenue.

      Ce plugin étant encore en test, nous attendons de voir les différents usages afin d’envisager les mises àjour nécessaires.

      A ce propos, l’utilisation du plugin sur votre site a révélé une erreur dans les boucles, la mise àjour 2.3.5 devrait la corriger. Je vous invite donc, si vous le voulez bien, àl’installer pour confirmation.

      Cordialement


      • Smartphone non reconnu 11 janvier 2011 11:48, par Patrice HARDOUIN

        Bonjour,

        effectivement, je n’avais pas vu que j’avais dupliqué mon fichier inc_header depuis mon fichier de plugin (sarkaspip) vers /squelettes. C’est maintenant corrigé.

        J’ai également mis àjour le plugin itwx et je vais retrouver un pote pour tester tout cela.

        Concernant #INSERT_HEAD ce serait tout de même nettement plus pratique pour les mises àjours du squelette.

        Bien cordialement,

        Patrice


        • Smartphone non reconnu 11 janvier 2011 22:42, par Patrice HARDOUIN

          En fait, sur le Xperia X10 mini (android) le site demande si on veux se connecter au site pour Smartphone puis il demande si on veux se connecter sur le site pour Mobile. Si on répond OUI aux deux on se retrouve naturellement sur le site pour Mobile. Si on répond OUI pour le site Smartphone et NON pour le site Mobile on se retrouve sur le site Smartphone mais sans avoir la possibilité de cliquer sur les flèches àdroite des résumés d’articles ou autres.

          Si on clique sur les logos des articles alors l’article s’affiche mais en noir sur fond de couleur assez foncé (assez difficile àlire).

          Voilàpour les remontées actuelles.

          bien cordialement,

          Patrice


          • Smartphone non reconnu 11 janvier 2011 22:44, par Patrice HARDOUIN

            Il n’y aurait pas moyen de coder le script àinsérer dans HEAD pour qu’il affiche directement l’adresse du site (plutôt que d’avoir àconfigurer l’adresse àtrois endroits dans ce script) ?


            • Smartphone non reconnu 12 janvier 2011 05:22, par seds

              Apparemment il y a un probleme avec ce modele mobile ! Parlons-en privé.

              Pour l’insertion, copier le script dans sommaire.html reste la solution la plus simple.


            • Smartphone non reconnu 17 janvier 2011 11:16, par seds

              Correction importante concernant les articles syndiqués. Merci de procéder àla mise àjour.


    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 6 janvier 2011 17:45, par jeanmarie

    Salut,

    merci pour ce plugin... ça fonctionne bien.

    j’ai commencé àl’utiliser et, forcément, àl’adapter àmon cas particulier. Le problème, c’est que du coup je dois faire les modifs en triple (squelette pour iPhone + squelette pour BlackBerry/Android + squelette pour les autres) et ça, pour chacune des pages... pas pratique.

    Du coup, j’aurais voulu savoir quelles sont les différences entre les 3 squelettes ? Et si je dois n’en choisir qu’un pour tous les smartphones (et éviter de devoir faire mes modifs en triple), lequel est le plus standard, lequel est susceptible de fonctionner sur quelque soit la plateforme ?

    Pour info, ma config : SPIP 2.1.6 / Android 2.1 / Motorola Millestone / Dolphin Browser HD


    • iTwX - Mobile 8 janvier 2011 23:21, par seds

      La différence entre les 3 squelettes est essentiellement dans les modes d’habillage (fichiers css et liens sur squelettes).

      Les pages iPhone prennent la totalité de l’encadré d’un lien dans une liste d’article, pour optimiser le toucher, et sur les Bberry, seulement le titre car lorsque l’encadré a trop de contenu (ex : titre+logo+chapo) le lien ne fonctionne pas.

      Sur les page iPhone et Bberry, les barres de transition entre les différents niveaux de liens, ou les boutons rubriques sur les articles par ex, sont habillés par une image de fonds et des arrondis en angles. Sur iTwx, une couleur de fond est seulement appliquée.

      Enfin les pages iTwx, sont encodés pour le wap sans mise en page trop sophistiquée, afin que les navigateurs les plus basiques puissent charger les pages sans soucis.

      Alors pour répondre àta question, les page itwx_ sont les plus standards et applicables sur n’importe quel navigateur et périphérique, mais l’habillage reste basique. Sinon les bberry_ te permettront de conserver l’habillage style "iphone" mais sans garantie sur les mobiles d’entrée de gamme !...

      N’oublie pas de faire la redirection qui conviendra àton choix, voir l’avertissement dans l’article.


      • iTwX - Mobile 18 janvier 2011 16:21, par jeanmarie

        Salut,

        je me remets dessus après qqs temps sur d’autres projet...
        J’utilise donc le squelette bberry avec le script générique (tous les mobiles sont aiguillés dessus). Ça marche plutôt bien, bravo pour ce plugin/squelette...

        Du coup, voilàmes retours (un peu en vrac) :

        • Dans le script générique pour tous les mobiles, il manque Android et Palm comme userAgent. Un fois rajoutés, le script fonctionne pour ma config (Android 2.1 / Millestone / Dolphin HD)
        • Pour le lancement du script MobileAlert, il manque un ; dans l’article : onLoad="MobileAlert()" ;
        • Fichier bberry_inc-documents : on dirait qu’il il ya des crochets en trop (ligne 57 "[" en trop et ligne 67 "]" en trop)
        • Dans les pages rubriques, il ya un problème avec la pagination : ça ne "passe" pas en largeur quand il ya plus de 80 articles. Et comme le #pagin qui la contient a un height de 20px fixe (bberry_habillage.css / ligne 211), ça déborde en dessous. Il faudrait soit afficher moins de pagination (70 max), soit donner un height libre. Le pb doit se retrouver aux autres endroits où il ya de la pagination.
        • La couleur bleue des liens a.spip_out (bberry_style.css / ligne 56) ne colle pas avec le squelette noir & blanc
        • Est-ce qu’il serait possible de renommer les fichiers bberry_ en smartphone_ ou quelque chose de plus général qui ne fasse pas référence àune marque.

        Ensuite, j’ai apporté une modif au script pour afficher un texte en haut de page ("Consulter la version pour smartphone du site...") plutôt qu’un boite d’alerte qui est plus intrusive (si la personne ne veut pas aller sur le site pour smartphone, àchaque retour sur la page, il aura l’alerte).
        Je te l’envoie pas mail, SPIP refuse que je le mette dans le commentaire/forum pour cause de spam...

        En tout cas, bravo pour la réactivité :)

        jeanmarie


      • iTwX - Mobile 18 janvier 2011 16:42, par jeanmarie

        Est-ce que ton plugin sera disponible en SVN ?
        C’est plus pratique pour les mises àjours...


        • iTwX - Mobile 19 janvier 2011 19:29, par seds

          merci pour tes retours, j’y réponds dans le même ordre :

          j’ai ajouté Palm dans le script. Après quelques recherches, cette marque semble être de gamme supérieure, je l’ai mis dans la catégorie Smart.
          je préfère utiliser pour les moins avertis des userAgent avec les marques uniquement, car il y a trop de nouveautés en terme de navigateur pour mobile, tout le monde y a de sa petite innovation, c’est ingérable. il y a moins de mouvements chez les fabricants. le userAgent Android est par exemple, un navigateur utilisé sur différentes marques et modèle, avec performances tout aussi différentes. doublé par un userAgent marque dans le script on abouti àun doublon remarqué par patrice dans un post précédent.
          aussi ajouter palm dans le script me semble suffisant, sauf si tes périphériques testés sont de marques non répertorié dans le script. aussi faudrait me les donner. Je reconnais que répertorier tous les fabricants de smartphones performants est une tâche très laborieuse...

          J’ai rajouté le " ;". merci, qlq fois réactivité rime avec étourderie :/

          les "[" "]" de inc-documents ont été corrigés depuis 2.3.7. j’ai trouvé également une autre erreur dans la boucle douments_joints sur le lien vers le doc. il faudra donc mettre àjour ce fichier ainsi que le fichier XXX_rubrique (ou boucle documents_joints).

          pagination/habillage : le height est désormais libre, mais le fichier img_itwx/listsousGroup.png a été modifié en conséquence (v2.3.7).

          oui la couleur a.spip_out était restée standard. j’ai modifié les XXX_styles des différents templates (v2.3.7) pour uniformiser..

          je note ta remarque sur bberry_, et smart_ me parait bien. ceci dit il s’agit d’un squel prévu au départ pour ces modèles et qui s’est élargit au cours du dev.

          quant àl’alternative au script d’alerte par push, c’est vrai que ça peut être ennuyant pour qui veut rester sur la version classique du site, mais en même temps, la version mobile a son utilité. si on étudie les redirections de la version mobile et touch du plus grand réseau social.. on remarquera que le problème est voisin : en revenant àla version classique, on peut atterir àla version mobile sans avertissement !!
          quoiqu’il en soit ton script est intéressant cependant il ne propose pas la redirection multi squel qui peut être utilise. néanmoins je l’intègre àl’article, pour plus de choix encore !

          Pour finir, le svn est en cours. Je vous tiens au courant...


          • iTwX - Mobile 20 janvier 2011 10:40, par jeanmarie

            Salut,

            merci pour les mises àjour...

            Le script ne fonctionnait pas pour mon Millestone (Motorola). Il tourne sous Android.

            Gérer les redirection par marque va être compliqué vu le nombre croissant de constructeurs qui s’y mettent, alors que pour les OS, c’est plus simple cf :
            http://en.wikipedia.org/wiki/Mobile_operating_system
            Avec Apple/iOS, Android, RIM/BlackBerry OS, Windows Mobile et Symbian, tu touches 90% des matériels... Tu rajoutes PlamOS/webOS et Bada (Samsung) par acquis de conscience et le tour est joué.
            De plus, le marché des OS est en train de se stabiliser alors que celui des constructeurs est en pleine expansion.
            Et pour une même marque tu peux avoir un Smartphone et un Wap (cf Sony Xperia et Sony C510).

            J’ai modifié le script pour être redirigé sur la version pour smartphone de la page en cours (sommaire, rubrique, article) plutôt que systématiquement vers le sommaire. Ca permet de conserver la navigation si on arrive directement sur un article.
            Je te l’envoie par mail...

            jeanmarie


            • iTwX - Mobile 20 janvier 2011 15:52, par seds

              J’entends bien ce que tu dis. Mais tu oublies Opera mini, les nouveaux Firefox mobile ou encore tous les OS alternatifs a safary sur iphone/pod/pad.., tous veulent leur part du gateau, et pour le moment l’engouement pour les smartphones vient de commencer. Il faut attendre de voir comment se comportent les consommateurs et fabricants. Ca va etre long en fonction de la dynamique de la concurrence..

              Un autre ex : android sur samsung galaxy spica et sur sony Xperia mini ne donne pas le meme resultat. Le 1er gere bien le squel bberry_ et le 2nd preferera itwx_.

              D’où un choix arbitraire mais simple de commencer par des userAgent fabricants, et de les rediriger vers des squels differents, et itwx_ en particuliers pour les outsiders.


              • iTwX - Mobile 20 janvier 2011 17:49, par jeanmarie

                Ok...

                pour info, sur mon Milestone voilàle user agent avec Dolphin HD :
                Mozilla/5.0 (Linux ; U ; Android 2.1-update1 ; fr-fr ; Milestone Build/SHOLS_U2_02.38.1) AppleWebKit/530.17 (KHTML, like Gecko) Version/4.0 Mobile Safari/530.17
                Dans mon cas précis, la marque (Motorola) n’est pas indiquée...

                Il serait intéressant d’avoir des retours de plusieurs User Agent selon les marques/modèles avec par exemple le site http://whatsmyuseragent.com/

                jeanmarie


                • iTwX - Mobile 23 janvier 2011 19:26, par seds

                  >> la marque (Motorola) n’est pas indiquée...
                  ceci expliquant cela..

                  quoiqu’il en soit, si tu regardes ça par ex (et qui n’est pas àjour, ya encore du boulot pour faire le point sur les redirections OS ! et pour ma part, j’ai "malheureusement" d’autres urgences.. ;/


            • iTwX - Mobile 3 avril 2011 15:54, par chantoine

              Jean-Marie, Seds,

              J’ai modifié le script pour être redirigé sur la version pour smartphone de la page en cours (sommaire, rubrique, article) plutôt que systématiquement vers le sommaire. Ca permet de conserver la navigation si on arrive directement sur un article.
              Je te l’envoie par mail...

              Cette modification m’intéresse beaucoup, elle permet d’améliorer largement l’usage de ce super plugin.

              Serait-il possible d’en bénéficier ?

              Merci
              Christophe


        • iTwX - Mobile 23 juillet 2011 07:24, par Eskandar

          Merci pour ce site qui est une idée géniale


    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