Site Web Public
Le site Bemba dispose d'une page d'accueil publique accessible sans authentification. Cette page presente le Projet Capital Humain de la Guinee-Bissau et offre un point d'entree vers le portail de gestion.
Acces
| Environnement | URL |
|---|---|
| Préproduction | communiquée par l'administrateur |
| Production | https://bemba.ucp-pch.org |
Le nom public du site est Projeto Capital Humano ; Bemba reste le nom de l'outil. Le site est une seule application : la page d'accueil, les pages du projet, les actualités, le formulaire de réclamation et le portail de connexion partagent la même adresse.
Structure de la Page
La page d'accueil est composee de plusieurs sections :
En-tete (Header)
L'en-tete est fixe et change d'apparence au defilement (transparent → blanc avec ombre).
Elements du header
| Element | Description |
|---|---|
| Logo PCH | Identite visuelle du projet |
| Menu A Propos | Dropdown : Initiative, Objectifs, Zones, Partenaires |
| Menu Interventions | Dropdown : Composantes 1, 2, 3, Resultats |
| Actualites | Lien vers la page actualites |
| Réclamation | Formulaire de réclamation (voir plus bas) |
| Selecteur de langue | FR, PT, EN (le créole est réservé à l'assistant Bemba) |
| Bouton Connexion | Acces au portail (ou "Espace connecte" si authentifie) |
Menu mobile
Sur les ecrans mobiles, le menu se transforme en hamburger avec :
- Liens de navigation
- Selecteur de langue
- Bouton connexion
Carousel Hero
Section plein ecran avec un carousel d'images automatique.
Caracteristiques
| Element | Description |
|---|---|
| Images | Carousel automatique (5 secondes par image) |
| Badge | "Republique de Guinee-Bissau" avec armoiries |
| Titre | "Projet de Capital Humain" en gradient |
| Caption | Texte descriptif de l'image courante |
| CTA | Bouton "Voir les composantes" |
| Navigation | Fleches gauche/droite + indicateurs (dots) |
| Scroll indicator | Animation pour inviter au defilement |
Images par defaut
Les images du carousel sont configurables via l'API. Par defaut :
- hero-children.jpg (Education)
- hero-health.jpg (Sante)
Barre Statistiques Cles
Affiche 4 indicateurs cles du projet :
| Statistique | Valeur |
|---|---|
| Financement IDA | 20M USD |
| Menages vulnerables | 3 500 |
| Ecoliers du primaire | 111 000 |
| Enfants < 5 ans | 1M+ |
Ce sont les cibles du projet, saisies dans Administration > Site Public. Elles ne bougent pas avec les données du SIG.
Section A Propos
Presentation du projet avec :
| Element | Description |
|---|---|
| Image | Photo illustrant le projet |
| Badge flottant | Indice Capital Humain (HCI: 0.30) |
| Texte | Description du projet et financement |
| CTA | Bouton "Decouvrir les composantes" |
Section Zones d'Intervention
Presente les deux regions pilotes du projet :
| Region | Taux retard croissance |
|---|---|
| Oio | 36% |
| Bafata | 32% |
Chaque zone est presentee avec :
- Image de fond
- Nom de la region
- Description
- Statistique cle
Section Composantes du Projet
Trois cartes presentant les composantes :
| Composante | Budget | Description |
|---|---|---|
| 1. Transferts Monetaires | 6,74M USD | Investir dans les femmes et les enfants |
| 2. Sante & Education | 5,65M USD | Ameliorer la prestation de services |
| 3. Renforcement Institutionnel | 7,61M USD | Gestion et coordination du projet |
Section « Notre impact » : chiffres vivants
Depuis septembre 2026, cette section n'affiche plus des cibles écrites en dur mais les agrégats réels du SIG, recalculés au plus toutes les 15 minutes. La date de calcul est affichée sous les cartes.
| Carte | Source |
|---|---|
| Ménages enregistrés | Ménages du registre, tous projets confondus (archivés compris) |
| Ménages bénéficiaires | Ménages ayant au moins un enrôlement actif |
| Plaintes reçues | Plaintes enregistrées, avec le taux de plaintes résolues |
Le site ne publie ni montant transféré ni nombre de paiements, et aucun calendrier de paiement. Un chiffre rafraîchi automatiquement révélerait les dates des transferts, ce qui met en danger les bénéficiaires et les agents de paiement. Cette décision est volontaire ; ne pas réintroduire ces indicateurs.
Les compteurs s'animent une seule fois à l'entrée dans l'écran, sauf si le navigateur demande moins d'animations. Si l'API est injoignable, la section est masquée plutôt que d'afficher des zéros.
Section Plateforme PCH
Presentation des modules du systeme d'information :
Modules principaux (liste)
| Module | Description |
|---|---|
| Registre Social National | Enregistrement des menages pauvres et vulnerables |
| Transferts Monetaires | Transferts aux menages pour sante, education, nutrition |
Modules secondaires (grille)
- Carte SIG
- Suivi & Evaluation
- Gestion des Plaintes
- Securite & Audit
Section Partenaires
Logos des partenaires institutionnels :
| Partenaire | Role |
|---|---|
| Banque Mondiale | Financement |
| Ministere de la Sante | Mise en oeuvre |
| Ministere de l'Education | Mise en oeuvre |
| Min. Femmes et Solidarite | Mise en oeuvre |
Section Calendrier
Timeline horizontale du projet :
| Etape | Periode |
|---|---|
| 1. Evaluation et preparation | 2024 |
| 2. Approbation Banque Mondiale | 2025 |
| 3. Deploiement regions pilotes | 2025-26 |
| 4. Extension et consolidation | 2027-30 |
Footer
Colonnes du footer
| Colonne | Contenu |
|---|---|
| A propos | Logo, description, formulaire newsletter |
| A propos (liens) | Le Projet, Initiative, Objectifs, Zones, Partenaires |
| Contact | Adresse, email, horaires |
| Projet | Reference, periode, financement, ministeres |
Newsletter
L'inscription se fait en double opt-in :
- Le visiteur saisit son adresse e-mail et clique sur S'abonner.
- Le site confirme l'envoi d'un e-mail, sans dire si l'adresse était déjà connue.
- L'e-mail de confirmation, envoyé dans la langue du visiteur, contient un lien à suivre pour activer l'abonnement.
- Chaque envoi ultérieur contient un lien de désinscription.
Les adresses en attente, confirmées et désinscrites sont conservées dans le SIG. Les administrateurs récupèrent la liste des abonnés confirmés, en JSON ou en CSV, par l'API (voir la référence API, section Site public).
Liens legaux
Le pied de page renvoie vers deux pages du CMS, modifiables dans Administration → Gestion CMS :
| Page | Adresse |
|---|---|
| Política de privacidade | /#/pages/politica-de-privacidade |
| Termos de utilização | /#/pages/termos-de-utilizacao |
Elles existent en portugais, français et anglais. Le texte initial a été rédigé pour décrire ce que le site fait réellement (audience anonyme, newsletter, réclamation transmise à KoboToolbox) et doit être validé par l'UCP.
Déposer une réclamation
Le lien Réclamation de l'en-tête et le bouton flottant Réclamation ouvrent le formulaire Soumettre une réclamation, en quatre étapes :
- Identité : nom et téléphone, ou dépôt anonyme.
- Localisation : région, secteur, localité ou tabanca, adresse et coordonnées GPS facultatives.
- Détails : description, date de l'incident, urgence.
- Confirmation : résumé, consentement et souhait d'être recontacté.
La réclamation est transmise au formulaire de réclamation KoboToolbox du projet, puis importée dans le SIG par Plaintes (MGP) → Kobo - Plaintes. Le visiteur reçoit une référence à conserver pour le suivi.
Un bouton WhatsApp, Contacter via WhatsApp, ouvre aussi une conversation avec un message de réclamation pré-rempli.
Assistant Bemba public
Le bouton Parler à Bemba ouvre l'assistant du site public, réservé aux visiteurs non connectés. Il présente le projet et aide à déposer une réclamation. Il n'a accès à aucune donnée du registre. Pour éviter les abus, le nombre de questions est limité dans le temps ; au-delà, l'assistant indique quand réessayer.
Fonctionnalites Additionnelles
Banniere Cookies
Au premier acces, une banniere s'affiche en bas de page :
- Accepter : Stocke le consentement
- Refuser : Decline les cookies
Le choix est memorise dans le navigateur.
Boutons de Navigation Scroll
Deux boutons flottants en bas a droite :
- Fleche haut : Retour en haut de page (visible apres defilement)
- Fleche bas : Aller en bas de page
Contenu Dynamique
Le menu Administration → Site public règle le contenu de la page, en français, portugais et anglais. Ses onglets sont Hero & Carousel, Statistiques, À propos, Régions, Composantes, Partenaires, Calendrier, Initiative, Objectifs et Footer.
Les actualités et les pages légales se gèrent dans Administration → Gestion CMS (voir Gestion de contenu).
Connexion au Portail
Acceder a la page de login
Depuis la page d'accueil, cliquez sur :
- Le bouton Connexion dans l'en-tete
- Le bouton Connexion dans le CTA final
Vous serez redirige vers la page de connexion.
La page de connexion
La page de connexion met en avant le SIG, système d'information de gestion du Projeto Capital Humano : un grand monogramme « SIG » sur fond bleu, un rappel du Registre Social Unique, trois repères (ménages, éligibilité, transferts) et, à droite, le formulaire dans une carte blanche. Sur téléphone, le panneau bleu devient l'en-tête et la carte s'affiche dessous.
Methodes d'authentification
1. Email et mot de passe
- Entrez votre adresse email
- Entrez votre mot de passe
- Cliquez sur Se connecter au SIG
2. Authentification a deux facteurs (2FA)
Si votre compte a la 2FA activee :
- Connectez-vous avec vos identifiants
- Un ecran de verification apparait
- Ouvrez votre application d'authentification (Google Authenticator, Authy)
- Entrez le code a 6 chiffres
- Cliquez sur Verifier
3. Magic Link
- Cliquez sur Recevoir un lien de connexion par e-mail
- Entrez votre adresse email
- Cliquez sur Envoyer le lien de connexion
- Consultez votre boite de reception
- Cliquez sur le lien recu
Le lien de connexion expire au bout de 15 minutes. Verifiez votre dossier spam.
Apres connexion
Une fois authentifie, vous etes redirige vers le tableau de bord.
Si vous etes deja connecte, le bouton "Connexion" devient "Espace connecte" et vous redirige vers le dashboard.
Changer la Langue
Le selecteur de langue est disponible sur :
- La page d'accueil (en-tete)
- La page de connexion
- Le portail (barre superieure)
| Code | Langue |
|---|---|
| FR | Francais |
| PT | Portugues |
| EN | English |
Le changement est immediat et affecte l'ensemble de l'interface.
Sur les pages publiques, le choix est mémorisé dans le navigateur. À la connexion au SIG, la langue devient celle de l'ordinateur (langue du système ou du navigateur), quel que soit le choix fait sur le site public. Un ordinateur en portugais ouvre le SIG en portugais ; une langue non prise en charge donne le français. Le créole n'est pas une langue d'interface : il est réservé à l'assistant Bemba, qui a son propre réglage.
Design Responsive
Le site s'adapte a tous les ecrans :
| Taille | Adaptations |
|---|---|
| Mobile | Menu hamburger, sections empilees, carousel redimensionne |
| Tablette | Mise en page intermediaire |
| Desktop | Affichage complet avec grilles multi-colonnes |
Resolution de Problemes
Le carousel ne defiles pas
- Verifiez que JavaScript est active
- Videz le cache du navigateur (Ctrl+Shift+R)
Les images ne s'affichent pas
- Vérifiez les images dans Administration → Site public, onglet Hero & Carousel
- Videz le cache du navigateur (Ctrl+Shift+R)
Mot de passe oublie
Utilisez la fonctionnalite Magic Link pour vous connecter sans mot de passe.
Le site ne charge pas
- Vérifiez l'adresse du site
- Verifiez votre connexion reseau
- Essayez un autre navigateur