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


18 nov

Les développeurs jQuery annoncent la disponibilité de la bibliothèque JavaScript mobile en version 1.0.

JQuery Mobile en version 1.0

Durant l’été 2010, le projet est lancé. L’idée de départ est de créer une version mobile de la bibliothèque open source JavaScript jQuery en se basant sur HMTL5, pour proposer un framework à destination des smartphones et tablettes.
Cette version 1.0, qui nécessite JQuery en version 1.6.4, permet donc la conception simplifiée de sites pour toutes les plateformes mobiles. Une version 1.1 pour supporter JQuery 1.7 est d’ores et déjà annoncée.
Les navigateurs disponibles sur les smartphones, tablettes et lecteur ebooks récents sont bien sûr compatibles, néanmoins les navigateurs plus anciens peuvent tout de même accéder au contenu.
De plus, comme pour JQuery, des plugins peuvent être déployés pour ajouter des fonctionnalités, comme par exemple 960 grid dor JQuery Mobile qui permet d’utiliser le framework CSS 960.gs pour un site mobile.

Themeroller pour JQuery Mobile Dans le même temps, l’équipe met en ligne Themeroller, un outil en ligne WYSIWYG pour définir l’interface de votre site mobile.

Quelques liens :

 
 

Catégories

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