Bloc Hisn Al-Mateen (IBHM)
Notre plus grand projet : une une de journal trilingue, des organigrammes et l'adhésion
Ce site a été réalisé dans le cadre de l'initiative Mustashar pour le secteur non lucratif.
Le site officiel du Bloc Hisn Al-Mateen, institution nationale à caractère associatif, sur son propre domaine almateen.org, en arabe, en français et en anglais : le plus grand projet réalisé par Mustashar à ce jour. Il rassemble les activités du Bloc depuis 2024 — 349 actualités, 1 029 photos et 75 articles de presse —, ouvre des archives filmées de sa présence à la télévision et dans la presse depuis 2021, présente chaque structure sous forme d'organigramme et reçoit les demandes d'adhésion dans un back-office qui attribue aux membres acceptés un numéro et une carte prête à imprimer. Le site a été offert dans le cadre de l'initiative Mustashar pour le secteur non lucratif.
Le besoin
Fondé par acte notarié en décembre 2023, le Bloc a rapidement étendu son action à travers les wilayas et dans les enceintes internationales, mais sa mémoire était dispersée dans des centaines de publications Facebook. Il lui fallait une vitrine institutionnelle trilingue à la hauteur de sa présence nationale et diplomatique, capable de conserver ses activités et sa couverture médiatique, et de recevoir puis suivre les demandes d'adhésion de façon structurée.
Ce que nous avons construit
Nous avons transformé les archives Facebook et les photos de l'institution en plusieurs centaines d'actualités rédigées en arabe, en français et en anglais, avec plus de mille photos, 75 articles de presse et 33 vidéos, dans un site généré par un script Python : 138 pages statiques et une page par actualité dans chaque langue, installé en octobre 2026 sur son propre domaine almateen.org. L'identité reprend les couleurs nationales et l'or : un arc encadré d'une corde dorée avec un sceau qui tourne, une « une » façon quotidien avec manchette en calligraphie ruqaa, des liserés tricolores et un motif de zellige. Chaque structure est devenue un organigramme qui se replie en arbre vertical sur mobile ; un tableau d'indicateurs et une carte des coordinations se mettent à jour à chaque publication, des archives filmées en forme de pellicule se regardent directement sur le site, les pages des causes s'ouvrent sur des albums photo et les statuts sont publiés en trois langues avec leurs PDF. Un back-office PHP gère adhésions, actualités, presse, agenda et coordinations, avec trois rôles d'utilisateurs.
Ce qui distingue ce site
Une façon quotidien
Une manchette en calligraphie ruqaa, un numéro égal au nombre d'actualités publiées, l'article principal, les dernières nouvelles et des vignettes, avec filtres par catégorie (huit) et par année.
Le Bloc dans les médias
Des archives filmées présentées comme une pellicule, classées par année depuis 2021 : reportages télévisés, presse écrite et dépêches d'agence, chaque document se regardant sur le site dans une fenêtre cinéma qui intègre les vidéos YouTube et Facebook sans les réhéberger.
Un organigramme par structure
De l'assemblée générale au bureau exécutif et à la coordination de wilaya : un arbre ramifié sur ordinateur, un arbre vertical indenté sur mobile.
Bilan en chiffres
Des indicateurs calculés automatiquement à partir du contenu publié : activités par mois, catégorie et année, presse par type, lieux les plus fréquents et calendrier d'activité.
Carte des coordinations
La carte des 58 wilayas distingue le siège national, les coordinations actives et celles ouvertes à la création ; elle se met à jour depuis le back-office.
Adhésion en quatre étapes
Quatre types d'adhésion, le choix de trois commissions parmi les treize commissions permanentes, deux pièces jointes et un numéro de référence à l'envoi.
Presse et tribunes
75 articles — tribunes, entretiens, déclarations, reportages et sujets télévisés — présentés comme des coupures de presse épinglées avec les pages d'origine, les vidéos se lançant d'un clic.
Photos, vidéos et albums
1 029 photos dans les actualités, des albums photo sur les pages des causes avec visionneuse, 33 vidéos compressées pour une lecture rapide sur mobile, des vidéos Facebook intégrées aux articles et un espace presse prêt pour les journalistes.
Identité nationale trilingue
Un arc bordé d'une corde dorée qui fait défiler les photos avec un sceau qui tourne, des liserés aux couleurs du drapeau et un motif de zellige ; l'arabe de droite à gauche en Almarai et Noto Kufi Arabic, le français et l'anglais en Playfair Display et Source Sans 3, chaque actualité étant traduite dans les trois langues.
Vidéo de lancement du site du Bloc Hisn Al-Mateen
Dix scènes qui racontent le site : un ordinateur 3D qui s'ouvre sur la une, un téléphone qui tourne entre les actualités, le mur des coupures de presse, la carte de l'Algérie et ses coordinations, les trois langues, l'organigramme, puis les couches du tableau de bord et la carte de membre.
Une gestion complète, sans compétence technique
- Demandes d'adhésion avec référence HM-YY-NNNN, filtres par statut, type, wilaya et commission, suivi de « nouveau » à « accepté », notes et historique
- Numéro de membre IBHM-YYYY-NNNN attribué à l'acceptation et carte recto verso au format CR80 avec QR code généré par un encodeur intégré, à imprimer sur A4 ou sur imprimante à cartes
- Tableau de bord : courbe des demandes sur 60 jours, wilayas les plus représentées, répartition par type et par statut, dernières demandes et messages
- Éditeur d'actualités trilingue : couverture et galerie compressées en WebP dans le navigateur, tri par glisser-déposer, vidéo et source, épinglage, mise en avant et brouillons
- Gestion de la presse, de l'agenda et des coordinations de wilaya qui alimentent la carte et les indicateurs
- Trois rôles (administrateur, rédacteur, chargé des adhésions), notifications Telegram ou e-mail, export CSV et journal d'activité
Le site sur tous les écrans
La page d'accueil en entier
Faites défiler le cadre pour parcourir la page d'accueil de haut en bas, telle qu'elle s'affiche sur ordinateur.
Envie d'un site de ce niveau ?
Parlez-nous de votre projet : nous vous proposerons l'architecture et les fonctionnalités adaptées.