Project

General

Profile

Contexte

Le portail citoyen (ou front-office) est indépendant techniquement du site web, il possède une url propre qui peut être un sous domaine de celui de la collectivité du type https://demarches.laville.fr (le nom sera choisi par la collectivité), exemple de notre portail de démonstration : https://portail-citoyen-publik.entrouvert.com/
Les urls (pages, sous-pages, téléprocédures..) de l'ensemble du portail citoyen peuvent être pointées depuis une page du site web si nécessaire.
L'ensemble du portail citoyen est full-web, il a été pensé pour permettre aux usagers une prise en main rapide et simple. Les interfaces en front-office sont étudiées pour être légères et pour ne recourir au javascript que lorsque cela est nécessaire. Cela nous permet d'assurer une compatibilité avec l'ensemble des navigateurs web, y compris les navigateurs mobiles (smartphone, tablette).

L’intégration graphique de base consiste à personnaliser les feuilles de style du portail citoyen avec les couleurs et le logo de la ville.
Entr’ouvert pourra travailler en totale autonomie sur la base des éléments webs récupérables en ligne sur le site ou pourra exploiter des éléments transmis par la collectivité (cf. infra).

Éléments pour l'intégration de la Charte graphique dans Publik

Ce dont nous aurons besoin pour adapter la charte graphique de votre portail citoyen Publik :
  • caractéristiques du texte (police) et mise en forme des titres (taille, couleur)
  • éléments graphiques (fichiers images) si intégration souhaitée d'un logo et/ou d'une image de header
Pour la personnalisation graphique d'un portail citoyen Publik, plusieurs sources peuvent être fournies par la collectivité :
  • la charte graphique de votre collectivité (cf. exemple de la Ville de Meudon : Charte_graphique_Meudon_extrait.pdf
  • et/ ou le site web actuel de votre collectivité, celui-ci sera pris en tant que modèle
    • si votre site utilise une police de caractères propriétaire, merci de la fournir ou de choisir une police équivalente libre

Pour plus de détails sur ce qui peut être fourni, voir également ce document : Guide_integration_graphique_dans_Publik.pdf

Ce dont nous n'aurons pas l'utilité :
  • d'une maquette fonctionnelle avec écrans puisque la structure du portail citoyen et l'enchaînement des écrans est pré-définie dans Publik

Feuilles de styles (CSS) et pages html

Si vous ne disposez pas de charte graphique et que votre site web ne peut pas être la référence (nouveau site en cours d'élaboration ou réfection), il est également possible de nous fournir des feuilles de styles. À noter que cette solution n'est pas à privilégier car elle rajoute des complexités techniques et des délais.

Voici trois pages représentatives de Publik, qui peuvent servir à guider la réalisation de la maquette : pages-publik.zip

De manière générale, tout ce qui est en-dehors du <div id="content"> est tout à fait libre, ces éléments sont contrôlés par le thème.

Concernant le contenu des pages :

  • index.html représente une page du CMS, celles-ci sont constituées de "zones", ici une barre latérale (<div id="sidebar">), une colonne de gauche (<div id="left">) et de droite (<div id="right"). L'alimentation de ces zones se fait au moyen de "cellules" (tous les <div> avec "cell" comme classe) ; le contenu des cellules est libre, une contrainte est qu'elles ne peuvent pas être imbriquées.
  • demarche.html représente une page d'une démarche, avec différentes étapes, des champs de différent type, etc. C'est sur le module des démarches qu'il y a le moins de latitude avec le balisage HTML, idéalement il ne devrait pas être modifié, et être assez souple pour que des manipulations CSS permettent d'obtenir les rendus souhaités.
  • journal.html représente une page d'une démarche terminée, reprenant quelques mots, son résumé et le journal de son activité. C'est également une page du module des démarches, avec donc un balisage HTML fixé.

Vous pouvez utiliser du javascript. Si jquery est utilisé, il faut que ce soit la version 1.10 pour éviter les problèmes de compatibilité avec les scripts existants.

Pour voir d'autres pages ou comment certains points peuvent varier, il aussi possible d'utiliser la démonstration de Publik en ligne : https://portail-citoyen-publik.entrouvert.com

Charte_graphique_Meudon_extrait.pdf (384 KB) Stéphane Laget, 22 Aug 2017 03:08 PM

pages-publik.zip (510 KB) Stéphane Laget, 22 Aug 2017 03:08 PM

Guide_integration_graphique_dans_Publik.pdf - Guide complet pour intégration dans Publik GRU (16.1 MB) Brice Mallet, 08 Apr 2019 05:16 PM

Also available in: PDF HTML TXT