DIU-EIL Lyon Bloc 1

Introduction à la programmation Web : HTML5, CSS3 et JavaScript

Romuald THION et Pierre Antoine CHAMPIN CC BY-NC-SA 3.0 FR

Mardi 3 mars 2020

Informations générales

Déroulé du mardi 03/03/2020, 10h-17h

  1. 10h00-12h00 Présentation générale
  2. 12h00-13h00 Travail pratique
  3. 14h00-16h30 Travail pratique
  4. 16h30-17h00 Restitution et retours

Point d’entrée https://diu-eil.univ-lyon1.fr/bloc1/bloc1v2/WEB/

Objectifs pédagogiques

  • Situer les technologies web dans l’informatique
  • Pratiquer la programmation web
    • HTML5, CSS3 et JavaScript
    • les API du navigateur (DOM)
    • programmation événementielle / asynchrone

Couverture du programme du DIU

  • 1.2.4. Diversité des langages de programmation
  • 1.2.5. Langages du Web : HTML, CSS
  • 1.2.6. Programmation web côté client : Javascript
  • 1.2.7. Gestion des événements dans une interface web

Ressources pour réaliser ce support

Introduction à la programmation Web

Architecture générale client/serveur

Le serveur Web

Serveur Web : répond aux requêtes HTTP, il sert des pages HTML et tous les fichiers statiques (images, CSS, JavaScript), gère la sécurité, le cache :

Serveur web statique

Serveur (Web) d’application (a.k.a. backend)

Serveur (Web) d’application : génère des pages, gère des applications. PHP-FPM pour PhP, Apache TomEE, Jetty en Java, Flask et Django en Python, Node.js en JavaScript etc.

Serveur d'application

Question : pourquoi garder le serveur web si celui d’application fait tout ?

La programmation Web

La programmation côté client (a.k.a. frontend)

Le tryptique de la programmation Web

HTML5, CSS3 et JavaScript

Le trio HTML5, CSS3, JS

Une évolution permanente depuis 1990

Et ça bouge toujours et encore ! E.g., Download the new Microsoft Edge based on Chromium

Le programmeur Web aujourd’hui

Serveur web statique

Un petit extrait !

Le langage des contenus : HTML5

Un modèle de document

HTML est un format textuel. Les balises sont des codes qui servent à indiquer le rôle du texte balisé. Les balises confèrent une structure d’arbre au document (voir chez PAC).

<X>
  <Y>Lorem
    <Z>ipsum</Z>
  </Y>
  dolor
  <X>sit.</X>
</X>

Serveur web statique

Séparation fond / forme

<!DOCTYPE html>
<html lang="fr">
  <head>
    <title>Titre du document</title>
    <meta charset="utf-8"/>
  </head>
  <body>
    ...
  </body>
</html>
  • Depuis la version 4, HTML décrit la structure logique du document.
  • La mise en forme est gérée par une feuille de style CSS.
  • Utiliser le validateur du W3C http://validator.w3.org/ !

Pour la séparation fond/forme, voir http://www.csszengarden.com/

Balises de structures HTML

  • Les paragraphes sont délimités par la balise <p>
  • Les titres sont délimités par les balises <h1>, <h2>…, <h6>
  • Depuis HTML5, on est encouragé à utiliser la balise <section>
    • et ses spécialisations <main>, <article>, <aside>, <header>, <footer>, <nav> (voir chez PAC)

Sections HTML

Des balises pour des types de textes

  • emphase : <em>, <strong>, <dfn>, <cite>, <q>
    • ne plus utiliser <b>, <i>, <u>
  • informatique : <code>, <kbd>, <samp>, <var>
  • édition de texte : <ins>, <del>
<strong>Définition :</strong> selon
<del>Google</del> 
<ins><cite>Wikipedia</cite></ins>,
la <dfn>prose</dfn> est : <q>la forme 
<em>ordinaire</em> de l'expression verbale.</q>

Définition : selon Wikipedia, la prose est : la forme ordinaire de l’expression verbale.

Des balises pour tout

  • les listes ordonnées ou non <ul>, <ol> et <li>
  • les liens <a>, les images <img>, les vidéos <video>
  • les tableaux <table>, <thead>, <tbody>, <tfoot>, <tr>, <th> et <td> (voir chez PAC)
  • les saisies utlisateurs et formulaires <label>, <input>, <select>, <option>, <textarea>, <button> et <form> (voir chez PAC)
<form action="#">
  <div>
    <label for="name">Nom :</label><input id="name">
  </div>
  <div>
    <label for="gname">Prénom :</label><input id="gname">
  </div>
  <button>Click</button>
</form>

Le langage de la mise en forme : CSS3

Déclaration de CSS

  • CSS signifie Cascading StyleSheet.
  • HTML ne décrit que la structure logique (le fond) des documents,
    • la structure physique (la forme) est spécifiée par une feuille de style en CSS.
<head>
  <link rel="stylesheet" type="text/css"
        href="mystyle.css" />
</head>
<head>
  <style type="text/css">
    /* your CSS here */
  </style>
</head>

Les règles CSS

  • En CSS, la mise en forme est spécifiée par un ensemble de règles.
  • Une règle typique est composée de trois parties :
    • un sélecteur,
    • une propriété,
    • une valeur
  • voir chez PAC
em   { font-weight: bold ; color: blue }
cite { font-weight: bold ; color: blue }
/* le contenu des balises <em> et <cite> devrait être en gras et bleu */

Validateur W3C https://jigsaw.w3.org/css-validator/

Les propriétés CSS

  • Propriétés du texte
    • Propriétés sur la police : font-style, font-weight, font-variant, font-family, font-size
    • Couleurs : color, background-color
    • Alignement : text-align
<p>
  <span style="color:red">Texte</span> 
  <span style="text-decoration:line-through">d'exemple</span> pour
  <span style="font-size: 150%"> montrer
    <span style="font-weight:bold;background-color:blue"> de très </span> très
  </span>
  <span style = "font-family:fantasy">belles choses</span>.
</p>

Texte d’exemple pour montrer de très très belles choses.

Les sélecteurs CSS de base

On peut sélectionner les éléments où appliquer les règles :

  • selon leur élement
    • element { /* règles */}
  • selon leur attribut id, un identifiant HTML supposé unique
    • #identifiant { /* règles */}
  • selon leur attribut class, un nom de style CSS
    • .maClasse { /* règles */}
  • l’astéristique * pour sélectionner tous les éléments
article.post { /* tout <article> de la classe 'post' */ }
.funny       { /* tout élément de la classe 'funny' */ }
ol#contents  { /* toute <ol> avec l'id 'contents' */ }
#contents    { /* tout élément avec l'id 'contents' */ }

Les sélecteurs CSS complexes

On peut combiner ces sélecteurs de base en sélecteurs complexes (voir chez PAC)

X, Y  { /* s'applique à tout X ou à tout Y*/ }
X Y   { /* s'applique à tout Y situé à l'intérieur d'un X*/ }
X > Y { /* s'applique à tout Y situé directement à l'intérieur d'un X */ }
X + Y { /* s'applique à tout Y situé immédiatement après un X */ }
X ~ Y { /* s'applique à tout Y situé après un X */ }
q        { font-style: italic; }
q em     { font-weight: bold; }
q strong { text-decoration: underline; }
body>h1  { text-align: center; }
h1 + * { font-variant: small-caps; }
ul ul li { font-size: 80%; }

Les pseudo-sélecteurs CSS

  • :first-child : élément qui est le premier enfant de son parent
  • :last-child : élément qui est le dernier enfant de son parent
  • :nth-child(i) : élément qui est le i-ème enfant de son parent
  • :first-of-type : premier élément sélectionné
  • et bien d’autres…

Les sélecteurs CSS sont standardisés et réutilisés, par exemple par https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector

Le box model CSS

Box model CSS

Le positionnement en CSS

Deux grands types d’affichage:

  • Elements inline : s’étend horizontalement
    • pas de retour à la ligne
    • ne prend que la place horizontale nécessaire
    • <span> (la balise neutre inline), <a>, <img>, <strong>, etc.
  • Elements block : s’étend verticalement
    • retour à la ligne
    • prend autant de place horizontale que possible
    • <div> (la balise neutre block), <section>, <form>, <nav>, <p>, <table>etc.

Il faut lire horizontal = sens de lecture et vertical = sens perpendiculaire

Le positionnement en CSS

La propriété [display: val permet de spécifier le comportement :

  • inline et block
  • inline-block : inline mais avec un contenu block
  • table : pour se comporter comme un <table> (et idem pour table-cell, table-row etc.)
  • flex : comme un block mais organisé selon un conteneur flexible
  • grid : comme un block mais dans une grille 2D controllée en CSS
<section>
  <p>I'm a paragraph</p>
  <p>I'm a paragraph too</p>
  <span>I'm a word</span>
  <span>I'm a word too.</span>
</section>

I’m a paragraph

I’m a paragraph too

I’m a word I’m a word too.

Le positionnement en CSS

La propriété position: val permet de spécifier le positionnement :

  • static : la valeur par défaut
  • relative : par rapport à la position normale
  • fixed : fixe par rapport à la fenêtre du navigateur
  • absolute : relatif au dernier ancêtre positionné
  • sticky : est relatif puis fixé

C’est tout un métier (de web designer)… et souvent un cauchemar pour les développeurs

Le langage du navigateur : JavaScript

JavaScript le langage pour dynamiser les pages (côté client)

Des origines à ECMAScript 6 (2015). Quelques caractéristiques :

  • Inspiré par la programmation fonctionnelle
  • Un modèle objet basé sur les prototypes
  • Une bibliothèque standard riche
  • Une API DOM fournie par le navigateur

Sur plusieurs points, assez proche de Python mais naturellement fait pour la programmation événementielle/asynchrone

JavaScript permet de modifier dynamiquement les pages et d’ajouter des comportements aux intéractions avec l’utilisateur

L’API Document Object Model (DOM)

Le DOM fait le lien entre JavaScript et les documents (HTML, SVG, XML) :

  • il fournit une représentation structurée (objet) du document
    • un ensemble d’objets possédant des propriétés et des méthodes
  • il définit la façon dont la structure peut être manipulée
  • les nœuds peuvent avoir des gestionnaires d’événements
    • qui se déclenchent lorsqu’un événement se produit

Voir Introduction to the DOM et Document Object Model (DOM)

Associer des traitements à des évenements

Il existe trois façon différentes d’associers des traitements à des événements du navigateur :

<!-- on met le code javascript directement dans le HTML à éviter -->
<element onclick="myScript"> 
// recommandée
object.onclick = function(){myScript};
// permet d'associer plusieurs handlers, mais difficile de les supprimer
object.addEventListener("click", myScript);

Il y a des événements pour tout.

Voir w3school pour onclick.

Manipuler la structure de la page

Blabalk

Exemple complet

document.addEventListener("DOMContentLoaded", () => {
  let heading = document.createElement("h1");
  let heading_text = document.createTextNode("Big Head!");
  heading.appendChild(heading_text);
  document.body.appendChild(heading);
});

function replace_btn() {
  this.value = prompt('Saisir une valeur');
}
document.getElementById('demo').onclick = replace_btn;

Question : que fait ce code ?

La boucle d’évènements

Voir What the heck is the event loop anyway?, In The Loop et The browser event looptarget="_blank"} (source de l’image).

La boucle d'événements du navigateur

La boucle d’événement, grossièrement

while (queue.waitForMessage()) {
  queue.processNextMessage();
}

Exemple avec setTimeout

console.log('Start');                 // (A)
setTimeout(                           // (T1)
  () => console.log('Call back #1')   // (CB1)
  , 3000);
console.log('Middle');                // (B)
setTimeout(                           // (T2)
  () => console.log('Call back #2')   // (CB2)
  , 1500);
console.log('End');                   // (C)

Programmation asynchrone : CPS, callbacks

Voir javascript.info, Chap. 11, Overview of Events and Handlers et Callback function, Using Callbacks

Exemple AJAX avec l’API fetch

function chargeInsere(rendu) {
  return (url, id) =>
    fetch(url)
      .then(x => x.json())
      .then(rendu)
      .then(str => {document.getElementById(id).innerHTML= str;});
}

Activité pratique “introduction à HTML5, CSS3 et JavaScript”

  1. Matin : prise en main des outils
  2. Après-midi : tutoriaux HTML5, CSS3 et JavaScript

Colophon

Crédits images

Wikimedia Commons, Mozilla Developper Network, Node.js®, Ethan Bradley et Axel Rauschmayer. Pierre-Antoine Champin

Licence

CC BY-NC-SA 3.0 FR