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


50 Messages
  • iTwX - Mobile 10 avril 2011 17:32, par Elsa

    Bonjour,

    Je viens d’installer ce plugin. Tout d’abord merci, car il n’y a pas grand-chose comme choix, pourtant il va falloir que l’on s’y mette, il y a de plus en plus de demande de version pour mobile.

    J’ai un petit problème, mon site était valide W3C, mais avec "body onLoad=..." dans mes pages, ça ne passe plus la validation. Y a t-il une autre façon plus valide de l’écrire ?

    Merci de m’aider.


    • iTwX - Mobile 10 avril 2011 21:01, par seds

      essaie avec onload plutôt que onLoad.

      nota : le plugin iTwX dans la version disponible ici ne passe pas malheureusement la validation w3c. Aussi une nouvelle version se termine et paraîtra très très prochainement !


      • iTwX - Mobile 11 avril 2011 07:41, par Elsa

        Bonjour,

        J’ai déjàessayé tout en minuscule, ça passe bien la validation, mais quand je test sur mon Lg, j’ai d’abord la question si je veux utiliser la version mobile, je fait "oui", mais ensuite j’ai le message que le service est indisponible.

        Je pensé alors que c’était àcause de onload, mais c’est peut-être autre chose alors ?
        C’est ici : http://www.koadeg.fr

        Merci


      • iTwX - Mobile 13 avril 2011 11:29, par Elsa

        Bonjour

        J’ai essayé de nouveau, mais que ce soit avec onload ou onLoad, c’est pareil, après la question si on veut la version mobile, j’ai toujours "service indisponible".

        J’ai vérifié, j’ai bien dans inc-head le script avec mon url, et tous mes body ont bien les onload.
        J’ai vidé le cache, je ne sais pas quoi faire. En attendant que ça marche, je garde onload tout minuscule pour rester valide.

        Une petite idée pour m’aider serait bienvenue. Merci


        • iTwX - Mobile 13 avril 2011 16:33, par seds

          je vois que vous avez trouvé d’où venait l’erreur ;)


          • iTwX - Mobile 13 avril 2011 16:51, par Elsa

            Euh, désolée, j’ai pas compris. Si c’est pour l’erreur du w3c, oui, mais pour l’erreur de "service indisponible" non. Je croyais savoir, j’avais oublié de noter l’adresse du site dans le script, j’ai corrigé et ça ne vient pas de là. C’est pour ça que j’ai tout revérifié, mais je ne trouve pas le problème.

            Merci de m’aider, je suis pas assez calé en dehors du html et css.


            • iTwX - Mobile 13 avril 2011 17:14, par seds

              je ne comprends pas non plus, ça fonctionne chez moi ^^

              j’avais vu que vous n’aviez pas personnalisé l’url, mais làc’est bon ! du mon pour la redir sur iphone..

              quel est votre script ? (poster ici entre balise '<code>')


              • iTwX - Mobile 13 avril 2011 17:44, par Elsa

                J’ai

                <script type="text/javascript">
                function iPhoneAlert()
                {
                        if(
                                   (navigator.userAgent.match(/iPhone/i))
                                ||(navigator.userAgent.match(/iPod/i))
                                )
                        {
                        var question = confirm("Souhaitez-vous naviguer sur le site optimis� pour iPhone/iPod?")
                                if (question)
                                {window.location = "http://www.koadeg.fr/spip.php?page=iphone_sommaire";        }
                                else{}
                        }
                };
                function BlackBerryAlert()
                {
                        if(
                                (navigator.userAgent.match(/BlackBerry/i))
                                ||(navigator.userAgent.match(/HTC/i))
                                ||(navigator.userAgent.match(/Palm/i))
                                )
                        {
                        var question = confirm("Souhaitez-vous naviguer sur le site optimis� pour Smartphone?")
                                if (question)
                                {window.location = "http://www.koadeg.fr/spip.php?page=bberry_sommaire";        }
                                else{}
                        }
                };

                function MobileAlert()
                {
                        if(
                                (navigator.userAgent.match(/Nokia/i))
                                ||(navigator.userAgent.match(/Samsung/i))
                                ||(navigator.userAgent.match(/LG/i))
                                ||(navigator.userAgent.match(/MOT/i))
                                ||(navigator.userAgent.match(/SonyEricsson/i))
                                )
                        {
                        var question = confirm("Souhaitez-vous naviguer sur le site optimis� pour Mobile?")
                                if (question)
                                {window.location = "http://www.koadeg.fr/spip.php?page=itwx_sommaire";        }
                                else{}
                        }
                }
                </script>

                Je l’ai mis au début du fichier inc-head. Est-ce que ça change quelque chose si je le met àla fin ?
                Je vais demandé au propriétaire du site de tester, il a un htc dream, android.
                En tout cas, moi sur mon lg c’est toujours pas bon.


                • iTwX - Mobile 13 avril 2011 18:00, par seds

                  votre code est correct
                  on va regarder ça en privé si vous voulez bien..


  • iTwX - articles virtuels 31 janvier 2011 18:32, par mokland

    Très bons squelettes, merci.
    J’ai bien lu le post précédent concernant les liens internes, si la réponse apportée est intéressante, je ne peux pas l’appliquer àmon cas.
    En effet, j’utilise des articles de redirection (articles virtuels) et les urls générées avec le paramètre de page empêchent la prise en compte de la redirection.
    Si je trouve une solution, je reviens la poster en réponse àce message ;)


    • iTwX - articles virtuels 31 janvier 2011 19:34, par Seds

      Il s’agit de solutions "alternatives", un peu roots il faut le reconnaître ! Et qui concernent essentiellement les urls spip.in. Une solution script est en cours..

      Pour ce qui concerne les articles virtuels, utilisés ici même dans la rubrique Actualités, ils fonctionnent très bien, àla différence que la redirection n’est pas automatique, comme c’est le cas en site la version classique. Je reconnais que la question a été mise de côté...


      • iTwX - articles virtuels 2 février 2011 11:40, par mokland

        Merci pour ta réponse.
        Le problème peut être résolu en détectant les articles virtuels via une expression régulière et en remplaçant l’url que votre plugin génère par l’url "classique" de spip pour laquelle la redirection sera prise en compte.
        La solution est disponible sur spip-contrib.net

        On ajoute la fonction suivante dans mes_fonctions.php :

        function expreg($text, $match) {
          return preg_match($match, $text);
        }

        puis on remplace le code suivant partout où cela est nécessaire :
        #URL_PAGE{iphone_article,id_article=#ID_ARTICLE}
        par :
        [(#CHAPO*|expreg{/^=/}|?{#URL_ARTICLE,#URL_PAGE{iphone_article,id_article=#ID_ARTICLE}})]
        Merci encore pour vos squelettes.


        • iTwX - articles virtuels 2 février 2011 11:45, par mokland

          Petite précision, peut-être superflue, le code que je propose doit être adapté en fonction du jeu de squelettes que vous utilisez (ici que pour les squelettes iphone).
          Ajout d’une précision, tutoiement puis vouvoiement dans le même message ... je m’étais pourtant relu ;P


          • iTwX - articles virtuels 3 février 2011 04:43, par seds

            Pas de soucis on peut se voutuyer !

            Merci de ta contrib, je vais étudier tout ça (pour la V3)...


  • iTwX - Mobile 23 janvier 2011 13:54, par Christian

    Je teste votre plug-squel-mobile que je trouve bien. merci. mais... j’ai deux problèmes :
    ▸ Les liens internes dans un article ne sont pas renvoyés vers la version mobile. ex [lien->art8] ne renvoi pas vers spip.php ?page=iphone_article&id_article=8 mais vers spip.php ?article8 !
    ▸ Idem pour les liens de traductions d’un article !

    Y’a-t-il une solution ?


    • iTwX - Mobile 23 janvier 2011 17:23, par seds

      liens internes :

      leur configuration est propre àspip.
      1/ vous pouvez utiliser un script d’alerte sur le fichier dist-squelette/article.htm pour renvoyer àla version mobile lorsque le visiteur arrive sur la version classique. solution la plus simple !

      2/ il y a une solution plus invisible si vous savez ce que vous faîtes :

      si vous utilisez un seul squel iphone, bberry OU itwx, créez et utilisez 2 codes sur dist-squelette/habillage.css et plugins/itwx_votre-version/XXX_habillage.css
      ▸ sur habillage, vous ajoutez un code ( càd sans "#" ou "." ) :
      mobile {display:none}
      ▸ sur XXX_habillage, vous ajoutez :
      classique {display:none}
      ▸ et dans la rédaction de l’article autour du lien de typo spip, vous mettez les codes et liens, un pour la version classique, un pour la version mobile, de cette manière :
      <classique>[nom du lien->url interne site classique]</classique> et collé juste après <mobile>[même nom du lien->http://monsite.fr/spip.php?page=XXX_article&id_article=numero-article]</mobile>
      ces codes sont inséré dans le texte de l’article, en site classique le lien vers le mobile n’apparaît pas, et sur la version mobile, c’est le lien vers le site classique qui disparait !

      cette solution est sans doute un peu laborieuse àla rédaction d’un article, mais a l’avantage d’être totalement invisible et plus confortable pour le visiteur : chaque version de la page (classique et mobiles) aura verra paraître seulement le lien qui la concerne

      si vous utilisez les 3 squelettes iphone_, bberry_ et itwx_ il faudra faire 4 codes :
      ▸ ajoutez sur habillage.css :

      bberry {display:none}
      itwx{display:none
      iphone {display:none}


      ▸ sur iphone_habillage.css :

      bberry {display:none}
      itwx {display:none}
      classique {display:none}


      ▸ sur bberry_habillage.css

      iphone {display:none}
      itwx{display:none}
      classique {display:none}


      ▸ et sur itwx_habillage :

      bberry {display:none}
      iphone{display:none}
      classique {display:none}


      ▸ ensuite dans l’article, il faudra rédiger le lien de cette manière :
      <classique> [nom du lien->url interne site classique]</classique><iphone>[même nom du lien->http://monsite.fr/spip.php?page=iphone_article&id_article=numero-article]</iphone><bberry>[même nom du lien->http://monsite.fr/spip.php?page=bberry_article&id_article=numero-article]</bberry><itwx>[même nom du lien->http://monsite.fr/spip.php?page=itwx_article&id_article=numero-article]</itwx>

      ce qui donne au final, un lienlienlienlien de ce type !

      traduction :

      pour le moment le plugin ne gère pas le multilingue, mais c’est une idée àdévelopper. pouvez-vous me donner l’url du site en question, ici ou via "contact" ?


  • boucle conditionnelle dans le script 23 janvier 2011 01:19, par Patrice

    Bonjour,

    n’est-il pas possible d’intégrer une boucle conditionnelle dans le script (àinsérer dans HEAD) ?

    En effet, le squelette pour Smartphone fonctionne bien pour Android. Alors il faudrait que le script renvoi les téléphones sous Android vers le squelette Smartphone et que le test suivant ne soit alors pas réalisé (sinon on se retrouverai avec un appel vers le squelette Mobile également pour les téléphones étant àla fois smartphone android et sony ericcson par exemple).

    Donc, une boucle "Si Android alors Smartphone et pas de test suivant pour les Mobiles".

    Qu’en pensez-vous ?

    bien cordialement,


    • boucle conditionnelle dans le script 3 février 2011 03:00, par seds

      Le probleme est que tous les androids ne gerent pas le squel smartphone, l’affichage dépend réellement du peripherique, en particulier du format de l’ecran(4/3 ; 16/9 ; 16/10..), l’habillage devant rester "elastique" pour permettre l’affichage vertical/horizontal de l’ecran. Certain sont trop etroits en vertical.. Aussi en l’etat actuel du plugin, je prefere diriger les androids vers itwx. Les squels devraient etre modifies pour la V3 afin de ne plus rencontrer ces types de problemes, et passer avec plus de certitude a une redirection par l’OS. Ne pouvant tester moi-meme tous les navigateurs et peripheriques, vos retours sont d’autant plus importants pour l’amelioration.

      En attendant, je vous propose de tester la redirection des sony vers les squel bberry_, plutot que passer par l’OS. Et faites-nous vos retours si vous rencontrez d’autres sony hors votre xperia mini.. ok ?


    • boucle conditionnelle dans le script 3 février 2011 04:35, par seds

      En fait la redirection avec android fait doublon avec la marque, et c’est pour cela que j’ai fini par le retirer du script. Mais le soucis par c’est que tous les MOT ne sont reconnus par la marque, mais par l’os, android en l’occurence..
      Et commencer avec un script, si A alors pas B, il faudrait aussi faire si B pas C, si D pas G etc et ça devient ingérable car toutes les configurations ne sont pas envisageables car trop volatiles..
      D’ou des modifs ànouveau dans l’habillage des squel, pour tenter une redirection selon OS, des nouvelles choses aussi pour une version 3 plus aboutie encore et disponible prochainement sur spip-zone !


  • iTwX - Mobile 17 janvier 2011 16:15, par Fifouille

    Bonjour,

    j’aimerais mettre un lien sur le logo d’un article dans une rubrique actualité. Une fois cliqué sur l’image je suis redirigé vers la version classique du site.

    Pourtant, j’utilise la redirection :

    [(#LOGO_ARTICLE_RUBRIQUE|#URL_ARTICLE{
    http://www.aubervilliers.fr/spip.php?page=iphone_article&id_article}|
    image_reduire{150,100})]

    et cela ne m’affiche pas la version iphone ?

    Si quelqu’un a une idée ?

    Merci


    • iTwX - Mobile 17 janvier 2011 21:18, par seds

      il y a un erreur dans votre lien. #URL_ARTICLE est le lien vers le squel classique

      vous devez noter dans une boucle :
      #URL_PAGE{XXX_article,id_article=#ID_ARTICLE} àla place de l’url html

      en ajoutant <br class="nettoyeur" /> entre le </li> et </BOUCLE_articles_recents> pour que le dernier logo de rogne pas sur la boucle suivante

      pour un lien ponctuel, remplacer #ID_ARTICLE par son numéro.

      N’oubliez pas de remplacer XXX par le nom du squel que vous modifiez (iphone, bberry ou itwx) !!


      • iTwX - Mobile 17 janvier 2011 22:06, par fifouille

        Bonsoir,

        j’ai modifié le code :

        [(#LOGO_ARTICLE_RUBRIQUE|#URL_PAGE{
        iphone_article,id_article=#ID_ARTICLE}|
        image_reduire{150,100})]

        Lorsque que je clique, cela me redirige vers le site classique puis détection version mobile.

        Je souhaite que quand je clique sur logo d’un article, cela me conduise vers l’url de l’article ?

        Si vous avez la solution, je vous en remercie par avance.

        Cordialement,


        • iTwX - Mobile 17 janvier 2011 22:28, par seds

          l’url doit être entre accolades, puis barre image_reduire..

          copiez le contenu de <BOUCLE_articles_recents> du fichier iphone_sommaire original pour un lien sur tout l’encadré, ou celui du fichier bberry_sommaire pour un lien sur titre et logo. collez-le dans <BOUCLE_articles> de XXX_rubrique, et retirez la div intro pour ne conserver que titre et logo.