Programmation Web

introduction

Objectifs opérationnels
- Exploiter les possibilités du langage HTML pour créer des structures de pages web
- Utiliser le CSS et ses atouts afin de créer des interfaces claires et structurées
- Identifier les normes imposées par la W3C pour assurer une bonne compatibilité navigateur
- Rendre une interface interactive à l'aide de Javascript
- Appréhender et appliquer les notions de responsive web design
- Délivrer l'information de manière lisible et toujours accessible auprès des utilisateurs.
Objectifs d'apprentissage
- Concevoir une page Web structurée
- Permettre l'affichage de la page Web sur différents types d'écran

Le développement web englobe une variété de métiers, chacun spécialisé dans différents aspects de la création et de la gestion de sites web et d'applications web
- Développeur Frontend : partie visible du site web (interface utilisateur), avec HTML, CSS et JavaScript
- Développeur Backend : serveur, logique applicative et bases de données, avec des langages comme PHP, Python, Java, etc.
- Développeur Full Stack : combine les deux, capable de travailler sur toutes les facettes du développement web
D'autres métiers gravitent autour du développement web : Web Designer, UX/UI Designer, Architecte Web, Chef de projet, DevOps, QA, Administrateur de base de données, etc. — ils se chevauchent souvent selon la taille de l'organisation et la complexité des projets

Client (Navigateur web): Logiciel permettant d'interpréter des fichiers, afin d'afficher des pages web (Chrome, Firefox, Safari, Opera, Brave, etc.).
- On parle du client (celui qui demande et affiche les pages).
- Effectue des requêtes HTTP
Serveur (Serveur web): Logiciel permettant de répondre à des requêtes, en renvoyant des fichiers au client qui les a demandé (fichiers html, xml, css, txt, json, pdf, images, vidéos, etc.).
- On parle du serveur (celui qui traite les demandes et répond au client).
- Répond aux requêtes HTTP et permet de déclencher l'exécution de langages serveurs

URL (*U*niform *R*esource *L*ocator): L'adresse d'une ressource donnée, unique sur le Web. En théorie, chaque URL valide pointe vers une ressource unique.
- Ces ressources peuvent être des pages HTML, des documents CSS, des images, etc.
  https://developer.mozilla.org/en-US/docs/Learn/Common_questions/Web_mechanics/What_is_a_URL
- Les URL sont un sous ensemble des URI
  https://fr.wikipedia.org/wiki/Uniform_Resource_Identifier
Exemples :
La portion suivie d'un # s'appelle le hash. Cette portion vise à cibler une partie internet de la page localisée à l'url
La portion suivie d'un ? permet de spécifier des paramètres qui pourront être utilisés par des langages serveurs ou du Javascript. L'URL peut contenir plusieurs paramètres en les liant avec le symbole &, par exemple :
?param1=val1&param2=val2&param3=val3

Langages compilés : Un langage dit compilé signifie que le code source d'un programme doit être compilé (en général en fichier binaire) avant de pouvoir être exécuté
Des exemples de langages compilés : Java, C, Rust, Go, etc.
Langages interprété : Un langage dit interprété signifie que le code d'un programme va être directement exécuté à la lecture de son code source
Des exemples de langages interprétés : HTML, CSS, Javascript, PHP, etc.
Débogueur (Debugger) : Un débogueur ou débugueur (de l'anglais debugger) est un logiciel qui aide un développeur à analyser les bugs d'un programme.

Frontend : (Anglicisme informatique) Partie d'un programme informatique responsable uniquement de l'interface utilisateur, permettant à l'utilisateur d'interagir avec un backend.
“Effectuons les premières modifications, en commençant par le formulaire d'ajout de commentaires dans le frontend.”
Backend : Dans le contexte des systèmes informatiques multicouches, back-end est un terme désignant un étage (une couche) de sortie d'un logiciel devant produire un résultat.
“Le backend doit traiter les données envoyées depuis le formulaire d'ajout de commentaires et l'enregistrer dans la base de données du site”

Framework : En programmation informatique, un framework (appelé aussi infrastructure logicielle) est un ensemble cohérent de composants logiciels structurels qui sert à créer les fondations ainsi que les grandes lignes de tout ou partie d'un logiciel, c'est-à-dire une architecture.
https://fr.wikipedia.org/wiki/Framework

https://fr.wikipedia.org/wiki/Hypertext_Transfer_Protocol
“HyperText Transfer Protocol, généralement abrégé HTTP, littéralement « protocole de transfert hypertexte », est un protocole de communication client-serveur développé pour le World Wide Web. HTTPS (avec S pour secure, soit « sécurisé ») est la variante sécurisée par le chiffrement et l'authentification.”

Protocole de communication client-serveur développé pour le web.
Basé sur le protocole TCP/IP.
Requête / Réponse
La requête est une demande d'une ressource sur une URL (Uniform Resource Locator) :
- plusieurs méthodes: GET / POST / PUT / DELETE
L'URL est souvent constituée de plusieurs parties:
- Protocole: http / https
- Domaine: www.google.com
- Chemin: /search
- Paramètres: ?q=hello

On parle de sites web statiques lorsque aucun langage serveur ou bases de données ne sont utilisés
→ Dans ce cas, le serveur renvoie uniquement des fichiers “statiques”, comme des fichiers textes, html, des images, des fichier css, etc.
On parle de site web dynamiques lorsqu'une requête http déclenche l'exécution de langages serveurs (PHP, Python, etc) ou l'utilisation de bases de données pour formuler la réponse envoyée au navigateur

Figure 1: Cycle de vie d'une requête HTTP qui fait appel à des scripts PHP et une base de données

Permettent de gérer l'affichage, le style et l'interactivité du contenu
- HTML
- CSS
- Javascript
On peut aussi citer d'autres formats, qui sont utilisés dans d'autres contextes d'affichage (pour les robots, par les interfaces Frontend qui utilisent des API, etc.) :
- XML
- JSON

À l'issue de ce module, il est conseillé de pratiquer régulièrement et de lire la documentation Mozilla
Ce cours est largement issue de la documentation Mozilla