HTML (HyperText Markup Language) est le language utilisé pour structurer une page web et son contenu. Par exemple, le contenu peut être organisé sous forme de paragraphes, d’une liste à puces ou encore à l’aide d’images et de tableaux de données. C’est donc le contenu de base pour tout site web.
Les fichiers HTML décrivent la structure logique d’une page web, définissent le contenu des pages. Ils s’écrivent a l’aide de balises Markup de manière plutôt verbeuse.
La plupart des balises HTML peuvent recevoir des attributs, des paramètres qui permettent de les identifier, ce qui permet ensuite de gérer une homogéneité dans l’application du style dans les applicatifs.
Permet d’ajouter un style directement sur l’élément
<bstyle="color: red; font-size: 18px;">Ce n'est pas recommandé pour une application,
il est bien plus intéressant de centraliser
tout le style dans du code dédié.
</b>
Ce n’est pas recommandé pour une application, il est bien plus intéressant de centraliser tout le style dans du code dédié.
Bonnes pratiques
Identifiez vos éléments avec des ids unique, utilisation de classes pour regrouper des objets qui devront être stylisés de la même manière.
CSS (Cascading Style Sheets) est le language qui permet de styliser le contenu web. Sans CSS, un site n’a qu’une structure, mais pas de rendu visuel stylisé. Il est donc nécessaire de passer par la configuration de ces feuilles de style pour aboutir a un projet abouti côté Web.
A retenir : Les fichiers CSS : fichiers de style, ils gèrent l’apparence des balises présentées.
Le CSS permet de cibler et styliser les éléments HTML de différentes manières :
Cibler des éléments par balise (sans mettre de points)
/* Cible tous les éléments <div> */div{width:600px;/* taille fixe des div*/margin:5emauto;padding:2em;border-radius:0.5em;box-shadow:2px3px7px2pxrgba(0,0,0,0.02);}
Cibler tous les éléments par rapport à leur classe :
En milieu professionnel, le CSS “pur” est rarement utilisé directement. On lui préfère des outils plus puissants qui évitent la duplication de code et facilitent la maintenance :
Préprocesseurs : SCSS, SASS, LESS (variables, fonctions, imbrication)
JavaScript est un langage de programmation qui ajoute de l’interactivité aux sites web. Cela se produit dans les jeux, dans le comportement des réponses lorsque des boutons sont pressés, lors de la saisie de données dans des formulaires, avec des styles dynamiques, des animations, etc. Il permet de modifier le DOM, qui est le contexte rendu objet d’un site.
A retenir : Les fichiers javascript : éléments de scripts du site, permettent de réaliser des actions sur des éléments HTML ou CSS.
Un codepen bien plus fourni : Une petite application statique qui va chercher des informations sur un pokemon avec une requête http en javascript : https://codepen.io/mikemilio/pen/poXOywy
L’objectif aujourd’hui est de mettre a disposition une application comme un frontend, mais comment y gérer l’intelligence?
On peut tout coder dans une API et récupérer les données de notre API pour l’affichage (Voir module associé).
On peut également effectuer un rendu des pages côté serveur pour y incorporer des données requêtées par le serveur interne et donc de limiter la logique au maximum à des traitements internes a notre application : on parle alors de Server Side Rendering.
Cela a différents avantages / inconvénients : notamment un meilleur contrôle des requêtes ou également la rapidité dans le cas d’un cache applicatif.
Nous allons donc ici nous intéresser au contenu des pages rendues et donc aux fichiers html des sites, qu’on va vouloir templatiser et renseigner en fonction de divers informations qu’on aura a l’intérieur de nos programmes.
Un petit historique : La plupart des applications web “anciennes” sont en PHP + JS + HTML + CSS pour utiliser la flexibilité du php pour la construction de pages templatisées.
En python des applications du même type peuvent être construites avec le framework Django mais également a l’aide de FASTAPI en faisant renvoyer des pages HTML templatisées.
Un templating engine (ou moteur de templating) est un outil utilisé pour générer dynamiquement du contenu, généralement du HTML, en combinant des données et un modèle de mise en page (template). On s’en sert en général pour la génération de pages HTML côté serveur, en injectant les résultats de traitements applicatifs dans des pages.
NB: Cela permet de séparer la logique “service” de la logique vue (CF cours architecture)
Jinja2 est un moteur de template pour Python, largement utilisé dans les frameworks web comme Flask. Il permet de générer du HTML dynamique en utilisant des variables, des boucles et des conditions. Il est également utilisé dans une myriade d’outils d’où la présentation .
Voyez plutôt ce template, qui sert pour configurer un fichier a envoyer par mail.
<html><body><h1>Bonjour {{ user_name }},</h1><p>Merci de vous être inscrit sur notre plateforme.</p><p>Votre email : {{ user_email }}</p> {% if is_admin %}
<p><strong>Vous avez des privilèges administrateurs.</strong></p> {% endif %}
<p>Cordialement,</p><p>L'équipe du support du site XXXX</p></body></html>
Jinja2 utilise des doubles accolades {{ }} pour insérer des variables dynamiques dans un template. Ces variables sont remplacées lors du rendu du template.
Jinja2 prend en charge les structures de contrôle comme les conditions (if), les boucles (for) et les filtres (upper, lower, length etc.). Ces structures permettent d’adapter le contenu rendu en fonction des données.
Avec les valeurs user_name = "antoine", user_email = "antoinebrunetti@gmail.com" et is_admin = True
<html><body><h1>Bonjour antoine,</h1><p>Merci de vous être inscrit sur notre plateforme.</p><p>Votre email : antoinebrunetti@gmail.com</p><p><strong>Vous avez des privilèges administrateurs.</strong></p><p>Cordialement,</p><p>L'équipe de support</p></body></html>
Server Side Rendering (SSR) : Exemple avec FastAPI#
Le rendu côté serveur (Server Side Rendering, SSR) est une architecture où les pages HTML sont générées sur le serveur avant d’être envoyées au navigateur. Cela permet d’améliorer le temps de chargement initial.
Remarque on utilise aussi souvent cela pour le référencement (SEO), en particulier pour les moteurs de recherche qui ont du mal à indexer le contenu rendu côté client.
Comme vu précédemment, FastAPI est un framework web rapide pour Python, il permet de mettre a disposition du code via HTTP.
En s’appuyant sur du templating Jinja de pages HTML on peut donc dynamiquement répondre a des requêtes utilisateurs en fabriquant les pages HTML côté serveur.
Il est donc fortement recommandé de toujours travailler avec un serveur web local pendant le développement. Cela permet de limiter les problèmes au moment de l’hébergement (portabilité)
python -m http.server 8000
Remarque Importante :
Les serveurs applicatifs type uvicorn / django peuvent servir des ressources statiques et les serveurs frontend comme le serveur de travail en local proposé par vite (voir le cours sur reactjs) feront tout à fait l’affaire, mais il faut garder en tête qu’un site doit être hebergé et donc penser la portabilité dès le développement.
Cependant, il faut garder en tête qu’un site doit être hébergé en production sur un serveur web. Il est donc crucial de penser la portabilité dès le développement.
