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


9 mar

Spip propose un outil simple pour suivre les visites de son site. Comme l’indique la documentation

SPIP identifie chaque jour les « visiteurs uniques » de votre site en fonction de leur adresse IP. Le système est rapide et relativement fiable (il s’agit d’une estimation relativement correcte du nombre de visiteurs du site, et non des simples « hits » ou des « pages vues » ; un visiteur qui visite plusieurs fois la même page est bien compté pour un unique « visiteur unique »)


Cet outil privilégie la rapidité et une occupation de l’espace disque limitée.

JPEG - 81 ko

Pour effectuer un suivi plus détaillé il est nécessaire d’installer un outil de mesure d’audience spécialisé. Vous pourrez alors obtenir de nombreuses informations sur vos visiteurs :

  • Geolocalisation
  • Navigateur
  • Système d’exploitation
  • Résolution

  • et donc adapter votre site si cela s’avère nécessaire.

Il faut considérer les résultats comme une tendance

Analyser les statistiques de son site est indispensable pour l’évaluer et le faire progresser, mais aucune mesure n’est précise à 100%.
La définition d’une "visite" étant différente pour chaque outil de mesure, il n’est pas possible de comparer les chiffres fournis, mais ils permettent de suivre la tendance des visites. En outre, les robots des moteurs de recherche sont parfois considérés comme des visiteurs, ce qui donne forcément des variations entre les mesures des différents outils.

Les logs pour les serveurs et les marqueurs pour les sites

Parmi ces outils, on retrouve ceux qui analysent les "logs" serveur (Urchin, AWstats, Webalizer, …) et ceux nécessitant la mise en œuvre de marqueurs (Piwik, Google Analytics, Xiti, …).
Les analyses de "logs" se basent sur les adresses IP de connexion. Un groupe de personnes se connectant avec une même adresse IP est considéré comme un unique visiteur. De plus chaque appel serveur (page, image, frame, …) est considéré comme un hit.
Alors que les marqueurs, en plaçant un cookie dans le navigateur du visiteur, différencient tous les internautes (y compris si ils utilisent une même adresse IP). Le tag est placé dans une partie de la page, ainsi cette dernière est comptabilisée précisément. Cependant certains marqueurs fonctionnent uniquement en javascript et dans le cas où le visiteur l’aurait désactivé, ce dernier ne serait pas comptabilisé dans les statistiques.
Il faut considérer ces outils comme complémentaires puisque leurs méthodes d’analyses ne sont pas identiques.

En bref, il faut utiliser ces outils comme des indicateurs de visites qui vous fournissent des informations précieuses sur l’ergonomie, "l’usabilité" et la pertinence des contenus afin de les améliorer. De plus il ne faut pas comparer les données entre ces différents outils, mais comparer les évolutions respectives.


9 fév

Les organisations publiques traitent différentes informations et données dans le cadre de leurs missions, le principe est de les rendre disponible sous des formats ouverts (csv, xml, kml, …) dans un souci de transparence et d’interopérabilité. Nous avons envie d’y croire. Ces données sont variées

  • Cartographies
  • Urbanisme et espaces verts
  • Etablissements publics et lieux touristiques
  • Réseaux urbains et mesure (eau, énergie, transports, …)
  • Des événements

Suivant le mouvement initié par les Etats-Unis et la Grande-Bretagne, l’état français s’est doté, début décembre 2011, d’un site pour publier ses données publiques ouvertes. http://www.data.gouv.fr/

JPEG - 129 ko
http://www.data.gouv.fr/

Cette plate-forme a été mise en œuvre par la mission Etalab, placée sous l’autorité du Premier ministre, dans le cadre du développement de l’administration électronique. Elle permet de récolter et de rendre accessible les données publiques des administrations.
Etalab a aussi défini une licence ouverte pour permettre une utilisation libre et gratuite des données.
Pour l’instant la plate-forme annonce 352 000 jeux de données publiques transmises par 90 producteurs (ministères, INSEE, BnF, …), mais seul 1% des fichiers sont ouverts, les autres étant des fichiers Excel (.xls) ou Word (.doc) qui sont des formats propriétaires, quid de l’interopérabilité ?

Le collectif Regards Citoyens est à l’origine de plusieurs initiatives dans le monde des données publiques ouvertes, et notamment du site www.debug-data-gouv.fr qui permet de signaler les erreurs de la plate-forme data.gouv.fr afin de contribuer à son amélioration.

Quelques plate-formes de collectivités locales

Et maintenant, que faire de ces données ?

Les possibilités sont multiples, la combinaison des données et leur réutilisation peuvent faire émerger des concepts innovants grâce à l’imagination des développeurs.
Cela permettra de développer des services et créer des applications utiles à tous. Des plate-formes organisent des concours pour favoriser l’exploitation des données et générer des applications innovantes.

JPEG - 165.8 ko
http://opendata.montpelliernumerique.fr/

Quelques exemples de mise en oeuvre :

Après l’ouverture des données publiques, il faut désormais œuvrer pour son utilisation.


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

 
 

Catégories

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