ProduitsProduitsWebBlocksWebBlocks UIWebBlocks CMSQuizTemDoDoneHerne PanelHerne Panel Documentation (EN)WebBlocks PlayServicesBlogsContact
WebBlocks UI HTML-first readable system
WebBlocks UI

Des interfaces HTML-first que les personnes et l'IA peuvent lire

Un système d'UI visible dans le code source, construit à partir de patterns explicites, de design tokens et de contrats de composants, sans faire d'un runtime de framework le prérequis de base.

Discuter de WebBlocks UI
WebBlocks UI shared product foundations
fklavye.net · services web

Un produit, des fondations partagées

WebBlocks UI est développé avec des patterns réutilisables d'interface, de publication et d'exploitation, au sein d'une famille de produits cohérente.

WebBlocks UI interface to daily operation
Le produit en pratique

De l'interface à l'exploitation quotidienne

Une surface produit ciblée transforme des décisions explicites en logiciels qui restent clairs, maintenables et prêts à évoluer.

À voir : Pourquoi WebBlocks UI ? (Épisode 01)

Une présentation de 74 secondes du modèle à six couches, avec des démos de code wb-* en direct et de vrais patterns livrés. La série WebBlocks CMS complète de 9 vidéos est désormais disponible sur YouTube.

Épisode 01 · Qu’est-ce que WebBlocks CMS ?

Langue de la vidéo : anglais.

Ce contenu est fourni par YouTube. Autorisez son chargement pour le consulter.

Paramètres des cookies

Épisode 02 · Créer et publier sa première page

Langue de la vidéo : anglais.

Ce contenu est fourni par YouTube. Autorisez son chargement pour le consulter.

Paramètres des cookies

Épisode 04 · Comprendre les layouts, slots et blocs

Langue de la vidéo : anglais.

Ce contenu est fourni par YouTube. Autorisez son chargement pour le consulter.

Paramètres des cookies

Épisode 05 · Créer une page d’accueil avec Hero et Rich Text

Langue de la vidéo : anglais.

Ce contenu est fourni par YouTube. Autorisez son chargement pour le consulter.

Paramètres des cookies

Épisode 06 · Ajouter des images depuis la médiathèque

Langue de la vidéo : anglais.

Ce contenu est fourni par YouTube. Autorisez son chargement pour le consulter.

Paramètres des cookies

Épisode 07 · Créer la navigation et un en-tête partagé

Langue de la vidéo : anglais.

Ce contenu est fourni par YouTube. Autorisez son chargement pour le consulter.

Paramètres des cookies

Épisode 08 · Brouillons, révision, publication et versions

Langue de la vidéo : anglais.

Ce contenu est fourni par YouTube. Autorisez son chargement pour le consulter.

Paramètres des cookies

Épisode 09 · Gérer plusieurs sites dans une installation

Langue de la vidéo : anglais.

Ce contenu est fourni par YouTube. Autorisez son chargement pour le consulter.

Paramètres des cookies

Épisode 10 · Configuration développeur et intégration Laravel

Langue de la vidéo : anglais.

Ce contenu est fourni par YouTube. Autorisez son chargement pour le consulter.

Paramètres des cookies
Voir la playlist CMS de 9 vidéos sur YouTube
Capacités clés

Un socle d'UI pratique aux règles explicites

WebBlocks UI garde la structure de l'interface, les décisions visuelles et le comportement des composants compréhensibles dans le code source.

Patterns HTML-first

Les patterns commencent par du HTML sémantique qui peut être inspecté, copié et adapté sans reconstruire un arbre de composants caché.

Design tokens

Des tokens explicites coordonnent les couleurs, les espacements, la typographie, les surfaces et les états d'interaction à travers les interfaces produit.

Contrats de composants

Les composants exposent une structure claire et un comportement attendu, pour que les développeurs et les outils opérateur puissent les utiliser de façon cohérente.

Aucun runtime de framework comme prérequis

Les patterns d'UI de base n'exigent ni runtime de framework applicatif ni chaîne de build npm comme condition de départ par défaut.

Visiter le site de WebBlocks UI →
Approche technique

L'UI visible dans le code source comme discipline produit

Le système privilégie les fondations natives du web, l'amélioration progressive et une documentation qui reste proche des patterns qu'elle décrit.

Fondations web natives

La plateforme du navigateur fournit la couche de base, tandis que les utilitaires et les composants ajoutent un vocabulaire produit cohérent.

Amélioration progressive

Le comportement interactif se superpose à un balisage utilisable, au lieu de devenir un prérequis à la compréhension de l'interface.

Contrats lisibles par l'IA

Une structure visible dans le code source et des conventions explicites rendent les interfaces plus faciles à inspecter et à modifier en toute sécurité pour les agents IA et l'outillage opérateur.

Interface produit réelle

Un système d'UI qui se documente lui-même

La documentation actuelle de WebBlocks UI, rendue entièrement avec les assets du package livré, ses primitives, ses patterns et ses hooks JavaScript intégrés.

Current WebBlocks UI documentation rendered with package assets
Statut actuel

En développement produit actif

WebBlocks UI est un produit actif. La surface de documentation ci-dessus est rendue par le package actuel lui-même ; les patterns et exemples publics continueront de s'étoffer au fil des versions stables.

Se renseigner sur WebBlocks UI
Un périmètre de fonctionnement clair

Prérequis et état de livraison

Ce dont le package actuel a besoin, ce qui reste optionnel et comment l'accès est géré aujourd'hui.

HTML-first, sans runtime de framework

Utilisez du HTML standard avec le CSS livré. Les icônes et le runtime d'interaction sont optionnels ; aucune dépendance à Node, npm ou un framework n'est requise pour l'utilisation.

Épinglez la version que vous livrez

Les applications doivent consommer une version délibérée du package ou du CDN, et conserver le contenu et l'image de marque propres au produit dans le projet hôte.

Une adoption guidée par la documentation

La documentation et le playground actuels sont les surfaces d'adoption visibles dans le code source. Contactez fklavye.net pour toute question d'intégration ou de produit.