Le HTML, le CSS & le JS : la base du web

Le web tient sa richesse de par des langages essentiels, structurés et structurants. L’un permet la structure globale d’une page, l’autre sa mise en forme et le dernier son dynamisme.

Le HTML, CSS et JS forment la base pour tout site Web et application Web moderne.

Structurer sa page Web : le HTML

Le terme HTML signifie HyperText Markup Language, soit en Français "langage de balise pour l'hypertexte".

Il s'agit d'un langage qui trouve ses origines au début des années 90. Pendant longtemps concurrent au XHTML, le W3C qui s'occupe du HTML depuis sa version 2, s'est définitivement imposé avec la version 5 du HTML, notamment encadré par des ingénieurs de Google et de Microsoft.

On appelle HyperText un système permettant de naviguer entre un document et un autre, choisis par l'utilisateur, via des Hyperliens.

Le HTML est un langage de balise. Ce sont ces balises qui structurent sa page, en les imbriquant les unes dans les autres, à la manière d’un système de poupées russes. Le contenu peut ensuite y être placé à l’intérieur.

L’intérêt d’avoir des blocs structurés ainsi est notamment d’avoir une mise en forme efficace, où l’on peut indiquer quel élément est un titre, lequel est un paragraphe, un lien vers une autre page, etc.

Le HTML, le CSS et le JS : la base du Web

Ces éléments composent le DOM, Documented Object Model soit en français "modèle objet de document". Il s'agit là du modèle, sous forme d'arbre, formant une page HTML via ses différents blocs, appelés nœuds.

Des langages permettent d'ajouter une mise en forme et même de rendre la page dynamique en se basant sur ses nœuds. Il s'agit respectivement du CSS et du JS.

Styliser sa page Web : le CSS

Le terme CSS signifie Cascading Style Sheets, soit en Français "feuilles de style en cascade" et trouve ses origines au milieu des années 90.

Cette feuille de style, et son fonctionnement en cascade, établit les règles visuelles d'une page Web. Par exemple, le choix de police d'écriture, la couleur des éléments, leur taille, etc.

Le HTML, le CSS et le JS : la base du Web

La séparation entre le code HTML, gérant la structuration d'une page, et le code CSS, gérant le style, a plusieurs atouts. Parmi ces avantages, on évoquera :

  • un code globalement plus accessible
  • un changement de mise en forme plus efficace
  • un document construit avec une architecture moins complexe
  • une réutilisabilité du code entre chaque page afin de conserver un ensemble cohérent

D'autres langages, comme le SASS ou le SCSS existent. Grâce à eux, il est possible d'écrire des règles similaires à du CSS avec des nuances accélérant le développement, pour ensuite être transpilé en CSS lisible par n'importe quel navigateur.

De nombreux frameworks donnent accès à une stylisation de pages ordonnées et aux normes du Web moderne. Next Decision compte parmi ses outils notamment : Bootstrap, Bulma, Materialize, OfficeUI, etc.

Rendre sa page Web dynamique : le JS

Le Javascript (JS), aussi appelé ECMAScript, est un langage principalement orienté pour le Web. Il permet, entre autre, de gérer le dynamisme des pages en modifiant les nœuds du DOM.

On peut peut imaginer divers cas d'utilisations, par exemple :

  • des listes d’éléments peuvent être affichées dynamiquement en fonction de paramètres sélectionnés
  • des boutons peuvent être activés ou désactivés en fonction de l'état d'autres éléments
  • et bien d'autres possibilités encore…

De puissants frameworks, que maîtrise Next Decision, rajoutent une couche de faisabilité et d’efficacité à l'écriture à l'écriture de JS standard. Il s'agit notamment de ReactJS ou de VueJs.

Ces frameworks se basent sur le "design pattern" de l'application tel que que le Model qui gère les données et les règles métiers, la ViewModel qui fait la transition entre les données et la vue, et enfin la View qui s'occupe d'afficher les données.

Avec la somme de ces frameworks et de leurs modèles, il est possible de créer des Applications "OnePage". Il s'agit là d'un type d'application qui propose une latence minimisée pour une fluidité de navigation optimale, car seules les données sont échangées avec le serveur.

Ainsi, l'application est découpée en deux parties globales : le FrontEnd qui est la partie visible par l'utilisateur final, et le BackEnd, où sont traitées toutes les données.

Pour faciliter l'implémentation du FrontEnd, Microsoft met à disposition son "Office Fabric UI" qui contient des composants complets et efficaces, aux couleurs de la mise en forme structurée de Microsoft.

Ces technologies font partie intégrante du panel de compétences de Next Decision.

Next Decision vous propose son expertise pour élaborer et mettre en place vos interfaces utilisateurs simples, agréables, fonctionnelles et répondant à vos attentes. Faites nous part de votre projet sur la page Contact, nous reviendrons vers vous dans les meilleurs délais !