Programmation Web

introduction

Pierre Blarre - Florian Rodriguez

1. Objectifs de la formation

  1. 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
    • Créer une interface administrateur et ses formulaires associés
    • 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.
  2. Objectifs d'apprentissage
    • Concevoir une page Web structurée
    • Permettre l'affichage de la page Web sur différents types d'écran

2. Sujets abordés pendant cette introduction

  • Vocabulaire
  • Protocole HTTP
  • Langages du web

3. Vocabulaire

3.1. Vocabulaire - Métiers du développement Web

  • 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. Les principaux métiers associés au développement web :
    • Développeur Frontend : Spécialisé dans le développement de la partie visible du site web, comme l'interface utilisateur. Il utilise des technologies comme HTML, CSS et JavaScript pour créer des sites interactifs et esthétiquement agréables.
    • Développeur Backend : Travaille sur le serveur, les applications et les bases de données qui alimentent le site ou l'application. Il utilise des langages comme PHP, Ruby, Python, Java ou .NET et gère la logique, le stockage des données et la sécurité.
    • Développeur Full Stack : Combine les compétences des développeurs frontend et backend, capable de travailler sur toutes les facettes du développement web, de l'interface utilisateur jusqu'aux bases de données.

3.2. Vocabulaire - Métiers Développement Web

  • Web Designer : Conçoit les éléments visuels d'un site web. Le web designer s'assure que le site est non seulement fonctionnel mais aussi esthétiquement plaisant. Il travaille souvent avec des outils de design comme Adobe Photoshop, Sketch ou Figma.
  • UX/UI Designer : Spécialisé dans la conception de l'expérience utilisateur (UX) et de l'interface utilisateur (UI), en s'assurant que le site web est facile à utiliser et répond aux besoins des utilisateurs.
  • Architecte Web : Responsable de la structure technique d'un site web, en s'assurant que les systèmes sont sécurisés, évolutifs et performants.
  • Testeur de Logiciel / QA Analyst : Assure la qualité et la fonctionnalité des sites web en exécutant différents tests pour détecter et corriger les bugs avant la mise en ligne.
  • Développeur CMS : Spécialisé dans les systèmes de gestion de contenu comme WordPress, Joomla ou Drupal. Il personnalise les CMS pour répondre aux besoins spécifiques d'un projet.
  • Administrateur de base de données : Gère les bases de données associées au site web, en s'occupant de leur structure, de leur maintenance et de leur sécurité.

3.3. Vocabulaire - Métiers Développement Web

  • Chef de projet web : Gère les projets de développement web, coordonnant les différentes équipes impliquées et veillant à respecter les délais et les budgets.
  • Développeur mobile : Bien que principalement lié aux applications mobiles, de nombreux développeurs mobiles travaillent également sur des aspects de développement web, en particulier pour les sites web responsives adaptés aux appareils mobiles.
  • Ingénieur DevOps : Travaille à l'intersection du développement et des opérations pour faciliter le déploiement et l'exploitation de solutions web, souvent en utilisant des outils d'automatisation et de monitoring continu.
  • Ces rôles peuvent se chevaucher ou se spécialiser davantage en fonction de la taille de l'organisation et de la complexité des projets.
  • Ils sont essentiels pour la création, le déploiement et la maintenance efficace des sites web et des applications web.

3.4. Vocabulaire - Client / Serveur

  • 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

3.5. Vocabulaire - URL

3.6. Vocabulaire - Langages compilés et interprétés

  • 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.

3.7. Vocabulaire - Frontend / Backend

  • 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”

3.8. Vocabulaire - Framework

  • 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

4. Protocole et requêtes HTTP

  • 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

http.svg

4.1. Sites statiques et dynamiques

  • 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

http-serveur.png

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

5. Langages du web

5.1. Langages clients :

  • 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

5.2. Langages serveurs

  • Permettent de gérer les fonctionnalités dynamiques d'un site (Calculs, traitements, connexions aux bases de données, à des API, etc.)
    • PHP
    • Java
    • Javascript (NodeJS)
    • Python
    • SQL
    • Ruby
    • Go
    • etc;

6. Documentation

  • À 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