11 mai

Une nouvelle version de Beespip est désormais disponible sur le site http://www.beespip.org. Celle-ci a été entièrement repensée graphiquement et simplifiée, notamment dans l’usage des mots clés.

JPEG - 44.5 ko

Merci par avance de vos retours afin de la faire évoluer et de l’améliorer.


17 avr

Cette nouvelle version apporte sont lots d’améliorations et nouveautés avec notamment le chargeur Ajax, les animations et barres d’outils fixes. De plus la documentation a été retravaillée et les transitions sont plus fluides et plus rapides.
Elle supporte JQuery jusqu’en version 1.7.1

PNG - 65.3 ko
JQuery Mobile en version 1.1

Themeroller permet d’importer un thème 1.0.x pour le convertir en version 1.1.

Parmi les évolutions prévues, un module nommé "Custom Download Builder" permettra de personnaliser votre "framework mobile" en spécifiant les éléments qu’il devra inclure.

Plus de détails sur le blog officiel


30 jan

En novembre, nous avions évoqué la sortie de la version 1.0.
Cette nouvelle version supporte désormais Bada (le système d’exploitation pour smartphone de Samsung). Elle corrige quelques bugs et apporte de légères améliorations.

La version 1.1, incluant notamment l’amélioration des transitions AJAX, est prévue pour fin février, et la version 1.2, permettant la prise en compte de "popup", pour le printemps.

Plus de détails sur le blog officiel


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