Code Civil Cloud

Le Code Civil, propulsé par AngularJS et Github

a marqué ce sujet comme résolu.

Bonjour les zesteux!

Voici une petite présentation d'un site web que j'ai commencé ce weekend : Code Civil Cloud. Mon objectif est de m'améliorer en AngularJS et de m'amuser tout en se rendant utile (peut-être). :D

Lien vers le site web : http://codecivil.bytevortex.net

Présentation

Il s'agit d'un site web permettant de parcourir le Code Civil français et de rechercher des articles, mais surtout rapidement et facilement. La particularité du site est qu'il s'appuie sur l'API de GitHub et ce dépôt git pour fournir le contenu du Code. Le dépôt (non-officiel) dispose des textes versionnés du Code Civil. Il est ainsi facilement possible de suivre l'évolution du Code Civil.

Objectifs

Les principaux objectifs du projet sont les suivants :

  • présenter de manière claire le contenu du Code Civil,
  • proposer une navigation très rapide et agréable, sur ordinateur ou mobile,
  • permettre de facilement suivre l'évolution du Code Civil.

Avancement

Deux fonctionnalités principales sont actuellement disponibles :

  • parcourir le Code Civil en suivant les Livres et Titres,
  • rechercher du texte dans tout le Code Civil à l'aide du champ de recherche en haut de page,
  • Afficher les modifications récentes apportées au Code Civil par le gouvernement (à travers les commits effectués sur le dépôt GitHub du Code Civil) et les présenter de manière claire,
  • Mode Sombre pour lecture nocturne.

Il est possible d'afficher le contenu des articles dans l'arborescence du Code en cliquant sur le bouton "Afficher les articles". L'option sera mémorisée pour votre prochaine visite.

Le design du site est responsive et compatible mobile.

Parmi les futures fonctionnalités, en priorité :

  • Enregistrer son email pour recevoir une notification lorsque le Code Civil est modifié,
  • (Peut-être) Fil de discussion Disqus sur les articles,
  • Faire un vrai logo ?

Captures d'écran

Page d'accueil

Arborescence du Code Civil

Un Article du Code

Rechercher dans le code civil n'a jamais été aussi facile !

Sous le capot

Le site web est entièrement réalisé avec ces trois langages du web bien connus :

  • HTML
  • CSS
  • Javascript

On peut d'ailleurs voir les statistiques du code sur le GitHub :

Statistiques du code

Le niveau de compatibilité est HTML 5 et CSS 3. Normalement, tout navigateur moderne devrait être capable d'afficher correctement le site web.

Javascript

Le gros morceau se trouve côté Javascript : en effet, le site est entièrement structuré autour du framework AngularJS de Google. Le site suit donc une logique de séparation des responsabilités, avec différents composants :

  • le routeur qui va appeler le template et le contrôleur adéquats en fonction de l'adresse URL de la page,
  • un contrôleur pour l'Accueil, un autre pour l'affichage de l'arborescence, un autre pour l'affichage d'un article, un pour la recherche…
  • des directives pour définir de nouveaux éléments et attributs HTML comme ng-enter="search()", <search-result> et <article-preview>,
  • des services : un pour la connexion à l'API RESTful de GitHub pour obtenir les données, un autre pour la sauvegarde des préférences de l'utilisateur à l'aide de l'objet localStorage et un dernier regroupant plusieurs fonctions utiles.

Aussi, une grande partie du site est générée dynamiquement par AngularJS : liste des dossiers et des fichiers, liste des résultats de recherche, affichage des articles en markdown, etc. Tout ceci à grand renfort de data-binding ! (Le data-binding permet de mettre automatiquement à jour l'affichage lorsqu'on modifie une donnée dans l'application, ou inversement de mettre à jour une variable si l'utilisateur modifie le contenu d'un champ de saisie, ce qui est le cas pour le champs de recherche.)

Liens

Site web : http://codecivil.bytevortex.net

Code source : https://github.com/Akryum/code-civil

Données : https://github.com/steeve/france.code-civil

AngularJS : https://angularjs.org/

Brackets.io (l'éditeur que j'utilise) : http://brackets.io/

Fontawesome (les icônes) : https://fortawesome.github.io/Font-Awesome/

Le petit mot de la Fin

Merci de m'avoir lu ! Si vous avez des questions, remarques, suggestions ou idées, n'hésitez pas à les partager ! :)

Salut,

je trouve que ce projet est plutôt sympa car il te permet déjà d'apprendre et de faire connaître l'initiative de la publication du code civile à un grand nombre de personne, c'est plutôt positif.

La seule fonctionnalité qui peut être intéressante dans ce genre de site c'est la recherche. Et là peut être que l'aspect "autoapprentissage" de ton site pose sa première limite : tu vas sûrement en rester à "je cherche un mot et je le surligne".

Le problème, c'est qu'un moteur de recherche c'est un poil plus sioux que ça. Il faut avant tout essayer de comprendre "mais qu'est-ce que les gens vont poser comme question"? Regarde le moteur de recherche de zds. On l'a mis en place car on avait un outil assez puissant nommé Solar à notre disposition puis on l'a laissé de côté. Résultat ce moteur n'est pas très utilisable et je ne pense pas qu'il soit très utilisé.

En tout cas bon courage à toi et bonne initiative.

J'aime beaucoup ce genre d'initiatives. Elles permettent d'ouvrir une porte vers un domaine important, mais délaissé du grand public car peu accessible. En ce sens, je trouve que ça devrait être encouragé. Au délà d'une démarche pédagogique, c'est une démarche citoyenne.

Et c'est cool.

+1 -0

Principalement une manière différente de présenter le Code Civil. Les principaux axes sont :

  • Design agréable et compatible mobile,
  • Mise en évidence des différentes modifications apportées au code,
  • Une plus grande interactivité (notifications, discussions, etc.).

D'ailleurs, une réflexion est en cours sur le GitHub du Code Civil pour l'intégration des autres codes (commerce, pénal, etc.).

Connectez-vous pour pouvoir poster un message.
Connexion

Pas encore membre ?

Créez un compte en une minute pour profiter pleinement de toutes les fonctionnalités de Zeste de Savoir. Ici, tout est gratuit et sans publicité.
Créer un compte