Vous êtes ici : Accueil / Disciplines / INFORMATIQUE / Static Apps

Présentation

Introduction

La construction de site web a beaucoup évolué depuis quelques années, il y a une jungle d'outils et d'applications. On est passé des applications qui générait un site web de base (ClarisWorks, ...) aux outils de programmeurs avec des commandes en ligne (HarpJS, Jekyll, ...).

Les liens qui suivent présentent cette nouvelle approche plus orientée pour les programmeurs.

Un site statique est défini dans les pages suivantes : site de base http://www.staticapps.org/ avec la définition d'un "static web app" sous http://www.staticapps.org/articles/defining-static-web-apps

Il faut comprendre qu'une page web et a fortiori un site web statique est fait de plusieurs couches :

  • HTML, fournit la structure des pages (langage déclaratif)
  • CSS, gère les styles appliqués dans les pages HTML en utilisant des sélecteurs
  • Javascript, amène la dynamique aux pages web en permettant d'interagir aux événements générés par l'utilisateur et peut modifier dynamiquement le contenu d'une page en la manipulant au travers du DOM (structure hiérarchique des objets qui composent la page)

Des librairies

Pour toutes ces couches il existe des librairies javascript qui simplifient l'approche :

  • bootstrap, pour la CSS
  • AngularJS, jQuery, ..., pour la gestion des pages (DOM au travers de la CSS, plus ...)
  • ...

Des outils ou frameworks

Pour aider les programmeurs dans la gestion des différentes couches. Certains fournissent des outils de déploiement pour gérer les fichiers sur le filesystem (structure de fichiers) et qui gèrent la génération de certains fichiers au travers de préprocesseurs (ex de préprocesseurs : SASS, LESS pour la CSS et EJS pour le templating et le javascript), enfin des outils comme grunt permettent de gérer les dépendances entre ces différentes parties (comme buildout pour les projets python).

  • jekyll, de la communauté Ruby, nécessite l'installation de Ruby
  • harp (harpjs) nécessite l'installation de node.js (npm) 

 

Il faut chercher un peu sur le web, mais on trouve des "boilerplates" (templates pour ces frameworks), par exemple pour harp sous github.com (voir le fichier suivant et identifier les projets github qui commencent par "hb-" - pour HarpBoilerplates - vous verrez que selon les boilerplates différentes outils sont utilisés - jade, ejs, less, ...)

 

 

 

 

Actions sur le document