Application mobile¶

Il s'agit d'une application mobile rassemblant une série de pages d'information concernant la ville (horaires d'ouverture de la mairie, adresses des bibliothèques, etc.) ainsi que des liens vers des ressources externes, qui peuvent être affichées au sein même de l'application (vue "mobile" du site web des téléservices) ou dans un navigateur externe.

Le contenu de l'application est défini par un fichier json, que l'application peut mettre à jour à intervalle régulier quand elle est connectée.

Ce fichier json définit d'une part paramètres globaux à l'application (icône, titre, adresse email de contact, adresse de mise à jour du json, etc.) et d'autre part les différentes pages de l'application, la "racine" du fichier est une page comme les autres, correspondant à l'écran d'accueil de l'application.

Ces pages disposent chacune d'un titre (title) et d'un identifant optionnel (id) et peuvent être de trois types :

• page d'information, elle a un élément "content" reprenant l'HTML à afficher dans la page, elle peut aussi avoir un élément "pages" qui reprendra la série des pages "filles" ainsi qu'un élément "seealso" reprenant les identifiants de pages supplémentaires pour lesquelles des liens doivent être présentés en fin de page.
• page de lien externe, elle contient un élément "external-url" pointant vers une adresse devant être ouverte dans le navigateur.
• page de lien interne, elle contient un élément "internal-url" pointant vers une adresse devant être ouverte à l'intérieur même de l'application.

L'application interprète ce fichier json pour créer une série de pages et menus.

Exemple de fichier¶

(disponible en ligne, https://perso.entrouvert.org/~fred/ma-ville.json (la version en ligne tient lieu de référence))

{"meta": {
   "title": "Ma ville au quotidien",
   "icon": "assets/une-ville.png",
   "contact": "info@example.net",
   "update-freq": 86400,
   "update-url": "https://perso.entrouvert.org/~fred/ma-ville.json",
   "assets-url": "https://perso.entrouvert.org/~fred/ma-ville-assets.zip?1416471664" 
 },
 "title": "Ma ville",
 "content": "<p>Bienvenue !</p>",
 "pages": [
    {"title": "Découvrir la ville",
     "pages": [
       {"title": "Office de tourisme",
        "content": "<p>...</p>" 
       },
       {"title": "Histoire de la ville",
        "content": "<p>Début XXème:<br/><img src='assets/photo.jpg'/></p>..." 
       },
       {"id": "plan-poi",
        "title": "Plan de la ville",
        "content": "<p>...</p>" 
       }
     ]
    },
    {"title": "Culture, sports, loisirs",
     "pages": [
       {"title": "Bibliothèques",
        "content": "<p>...</p>" 
       },
       {"title": "Culture",
        "content": "<p>...</p>" 
       },
       {"title": "Sports",
        "content": "<p>...</p>" 
       },
       {"title": "Conservatoire",
        "content": "<p>...</p>" 
       },
       {"title": "Annuaire des associations en ligne",
        "external-url": "http://www.example.net" 
       }
     ]
    },
    {"title": "Démocratie locale",
     "content": "<p>C'est important.</p>",
     "pages": [
       {"title": "Conseil municipal",
        "content": "<p>...</p>",
        "seealso": ["plan-poi"]
       },
       {"title": "Rencontres de quartier",
        "content": "<p>...</p>" 
       }
     ]
    },
    {"title": "Démarches administratives",
     "pages": [
       {"title": "Démarches en mairie",
        "content": "<p>...</p>",
        "seealso": ["plan-poi", "demarches-en-ligne"]
       },
       {
        "id": "demarches-en-ligne",
        "title": "Démarches en ligne",
        "internal-href": "https://eservices.au-quotidien.com" 
       }
     ]
    }
 ]
}

Interprétation¶

Écran d'accueil

Ma ville
----------------------
Bienvenue !

 Découvrir la ville >
 Culture, sport, loisirs >
 Démocratie locale >
 Démarches administratives >

Le bouton "Découvrir la ville" amène sur la page "Découvrir la ville"

Découvrir la ville
----------------------

 Office du tourisme >
 Histoire de la ville >
 Plan de la ville >

Le bouton "Histoire de la ville" vers la page :

Histoire de la ville
----------------------
 Début XXème:
 [photo]
 ...

En retournant sur nos pas, en repartant de l'écran d'accueil, en allant sur "Démarches administratives" :

Démarches administratives
----------------------

 Démarches en mairie >
 Démarches en ligne >

En allant sur "Démarches en mairie",

Démarches en mairie
----------------------
....

Voir aussi :
 Plan de la ville >
 Démarches en ligne >

En allant sur "Démarches en ligne",

Démarches en ligne
----------------------
[contenu de https://eservices.au-quotidien.com]

Données de l'application¶

La clé "meta" du fichier json donne des indications pour la mise à jour des données de l'application :

• update-freq: la fréquence à laquelle la mise à jour doit être effectuée (en secondes)
• update-url: l'adresse contenant le fichier de données à jour
• assets-url: l'adresse contenant des données supplémentaires (css, images) de l'application (à télécharger uniquement si l'adresse est modifiée), il s'agit d'un fichier zip contenant un unique répertoire, nommé assets.

Rendu de l'HTML¶

Le fichier des assets contient un fichier css (assets/style.css) qui doit être utilisé pour le rendu du contenu des pages.