Christophe Gindro | 1 Message
12 jan

Le principe est de réaliser une version mobile du site Contingences.

Le site n’ayant pas un contenu trop volumineux, la première approche sera de réaliser une page unique contenant l’ensemble du site et utilisant la pagination intégrée à JQuery Mobile.

JPEG - 42.9 ko

En s’appuyant sur la documentation je créé une page mobile.html dans mon dossier squelettes.
Cette page à la structure suivante

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="#LANG" lang="#LANG" dir="#LANG_DIR">
<head>
 <title>[(#NOM_SITE_SPIP|textebrut)]</title>
 [<meta name="description" content="(#DESCRIPTIF_SITE_SPIP|couper{150}|textebrut)" />]
 <meta http-equiv="Content-Type" content="text/html; charset=#CHARSET" />
 <meta http-equiv="content-language" content="#LANG" />
 <meta name="generator" content="SPIP[ (#SPIP_VERSION)]" />
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
 <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
 <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
</head>
<body>

</body>
</html>

On notera l’absence de la balise #INSERT_HEAD puisque je n’ai pas besoin des css et javascripts fournis par les différents plugins dans cette version pour les plateformes mobiles.

Ensuite il faut créer la page d’accueil qui affichera les rubriques racines du site :

<div data-role="page" id="sommaire">
 <div data-role="header" data-theme="f">
   <h1>#NOM_SITE_SPIP</h1>
 </div><!-- /header -->

 <div data-role="content">
   <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="f">
     <li data-role="list-divider">Menu</li>
     <BOUCLE_rubriques_racine(RUBRIQUES) {par titre}{racine}>
     <li><a href="#rubrique-#ID_RUBRIQUE" title="#TITRE">#TITRE</a></li></BOUCLE_rubriques_racine>
   </ul>       
 </div><!-- /content -->
 <div data-role="footer" data-theme="f">&nbsp;</div>
</div><!-- /page -->

Puis on s’occupe des différentes rubriques, qui afficheront les sous-rubriques et articles qu’elles contiennent :

<BOUCLE_rubriques(RUBRIQUES)>
<div data-role="page" id="rubrique-#ID_RUBRIQUE">
 <div data-role="header" data-theme="f">
   <a href="#" data-icon="arrow-l" data-iconpos="notext" data-rel="back" class="ui-btn-left jqm-back" data-back-btn-text="previous">Retour</a>
   <h1>#NOM_SITE_SPIP</h1>
   <a href="#sommaire" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home">Accueil</a>
 </div>
 <div data-role="content">
   <h2>#TITRE</h2>
   <B_liste_rubriques>
   <ul data-role="listview" data-inset="true">
     <BOUCLE_liste_rubriques(RUBRIQUES){id_parent}{!par date}>
     <li><a href="#rubrique-#ID_RUBRIQUE">#TITRE</a></li></BOUCLE_liste_rubriques>
   </ul>
   </B_liste_rubriques>
   <B_liste_articles>
   <ul data-role="listview" data-inset="true">
     <BOUCLE_liste_articles(ARTICLES){id_rubrique}{!par date}>
     <li><a href="#article-#ID_ARTICLE">[(#LOGO_ARTICLE|image_reduire{0,80})] #TITRE</a></li>
     </BOUCLE_liste_articles>
   </ul>
   </B_liste_articles>
 </div>
 <div data-role="footer" data-theme="f">&nbsp;</div>
</div>
</BOUCLE_rubriques>

Ici dans la partie "header" on ajoute les boutons "précédent" et "Accueil".
On fera de même pour l’affichage des articles

<BOUCLE_articles(ARTICLES)>
<div data-role="page" id="article-#ID_ARTICLE">
 <div data-role="header" data-theme="f">
   <a href="#" data-icon="arrow-l" data-iconpos="notext" data-rel="back" class="ui-btn-left jqm-back" data-back-btn-text="previous">Retour</a>
   <h1>#NOM_SITE_SPIP</h1>
   <a href="#sommaire" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home">Accueil</a>
 </div>
 <div data-role="content">
   <h2>#TITRE</h2>
        [(#LOGO_ARTICLE||left)]
   [<div class="chapo">(#CHAPO|image_reduire{300,0})</div>]
   [<div class="texte entry-content">(#TEXTE|image_reduire{300,0})</div>]

   [<p class="hyperlien"><:voir_en_ligne:> : <a href="(#URL_SITE)" class="spip_out">[(#NOM_SITE|sinon{[(#URL_SITE|couper{80})]})]</a></p>]
   [<div class="ps surlignable"><h2 class="pas_surlignable"><:info_ps:></h2><div class="#EDIT{ps}">(#PS|image_reduire{300,0})</div></div>]
 </div>
 <div data-role="footer" data-theme="f">&nbsp;</div>
</div>
</BOUCLE_articles>

Le code complet :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="#LANG" lang="#LANG" dir="#LANG_DIR">
<head>
 <title>[(#NOM_SITE_SPIP|textebrut)]</title>
 [<meta name="description" content="(#DESCRIPTIF_SITE_SPIP|couper{150}|textebrut)" />]
 <meta http-equiv="Content-Type" content="text/html; charset=#CHARSET" />
 <meta http-equiv="content-language" content="#LANG" />
 <meta name="generator" content="SPIP[ (#SPIP_VERSION)]" />
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
 <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
 <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
</head>
<body>
<div data-role="page" id="sommaire">
 <div data-role="header" data-theme="f">
   <h1>#NOM_SITE_SPIP</h1>
 </div><!-- /header -->

 <div data-role="content">
   <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="f">
     <li data-role="list-divider">Menu</li>
     <BOUCLE_rubriques_racine(RUBRIQUES) {par titre}{racine}>
     <li><a href="#rubrique-#ID_RUBRIQUE" title="#TITRE">#TITRE</a></li></BOUCLE_rubriques_racine>
   </ul>       
 </div><!-- /content -->
 <div data-role="footer" data-theme="f">&nbsp;</div>
</div><!-- /page -->

<BOUCLE_rubriques(RUBRIQUES)>
<div data-role="page" id="rubrique-#ID_RUBRIQUE">
 <div data-role="header" data-theme="f">
   <a href="#" data-icon="arrow-l" data-iconpos="notext" data-rel="back" class="ui-btn-left jqm-back" data-back-btn-text="previous">Retour</a>
   <h1>#NOM_SITE_SPIP</h1>
   <a href="#sommaire" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home">Accueil</a>
 </div>
 <div data-role="content">
   <h2>#TITRE</h2>
   <B_liste_rubriques>
   <ul data-role="listview" data-inset="true">
     <BOUCLE_liste_rubriques(RUBRIQUES){id_parent}{!par date}>
     <li><a href="#rubrique-#ID_RUBRIQUE">#TITRE</a></li></BOUCLE_liste_rubriques>
   </ul>
   </B_liste_rubriques>
   <B_liste_articles>
   <ul data-role="listview" data-inset="true">
     <BOUCLE_liste_articles(ARTICLES){id_rubrique}{!par date}>
     <li><a href="#article-#ID_ARTICLE">[(#LOGO_ARTICLE|image_reduire{0,80})] #TITRE</a></li>
     </BOUCLE_liste_articles>
   </ul>
   </B_liste_articles>
 </div>
 <div data-role="footer" data-theme="f">&nbsp;</div>
</div>
</BOUCLE_rubriques>

<BOUCLE_articles(ARTICLES)>
<div data-role="page" id="article-#ID_ARTICLE">
 <div data-role="header" data-theme="f">
   <a href="#" data-icon="arrow-l" data-iconpos="notext" data-rel="back" class="ui-btn-left jqm-back" data-back-btn-text="previous">Retour</a>
   <h1>#NOM_SITE_SPIP</h1>
   <a href="#sommaire" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home">Accueil</a>
 </div>
 <div data-role="content">
   <h2>#TITRE</h2>
        [(#LOGO_ARTICLE||left)]
   [<div class="chapo">(#CHAPO|image_reduire{300,0})</div>]
   [<div class="texte entry-content">(#TEXTE|image_reduire{300,0})</div>]

   [<p class="hyperlien"><:voir_en_ligne:> : <a href="(#URL_SITE)" class="spip_out">[(#NOM_SITE|sinon{[(#URL_SITE|couper{80})]})]</a></p>]
   [<div class="ps surlignable"><h2 class="pas_surlignable"><:info_ps:></h2><div class="#EDIT{ps}">(#PS|image_reduire{300,0})</div></div>]
 </div>
 <div data-role="footer" data-theme="f">&nbsp;</div>
</div>
</BOUCLE_articles>
</body>
</html>

Cela fournit une bonne base pour générer une version mobile de son site.
La souplesse de Spip permet de réaliser ses propres boucles, et de les adapter au framework JQuery.

En réalisant une feuille de style grâce au générateur Themeroller, voici un premier jet du résultat pour la version mobile du site Contingences

Message (1)

  • jQuery Mobile exemple de mise en œuvre , par Chrys
    Le 15 août 2013 à 17:26

    Bonjour Christophe,

    Merci pour cet excellent point de départ.
    Utilisant SPIP, et ne souhaitant pas utiliser de plug in, vos explications vont fortement m’aider, merci.

    Puis je venir vers vous au cas ou je sèche !?

    Bien à vous, et… bonne vacances !

    — 

    ChL.


Un message, un commentaire ?
  • (Pour créer des paragraphes, laissez simplement des lignes vides.)

Qui êtes-vous ? (optionnel)

 
 

Catégories

 
 
Retour accueil  | Nous contacter  | Suivre la vie du site Flux RSS  | SPIP