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 :

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 :

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.