CentraleSupélec — Département informatique
Gâteau du Glouton
3 rue Joliot-Curie
F-91192 Gif-sur-Yvette cedex
Côté client : Un site de dépot de messages

Avant toute chose

Resources:

À noter

  • On accède au code source d'une page internet à l'aide de clic droit > code source, ou encore Ctrl+U.
  • Pour ouvrir une page en local (c'est à dire sur le disque dûr, pas sur internet), utilisez Ctrl+O, ou Fichier > Ouvrir.
  • Sur Firefox, la barre de menu est par défaut cachée: utilisez Alt pour la faire apparaître.

1 - HTML

Un fichier HTML se concentre uniquement sur le fond, sur la structure. Nous nous occuperons de la mise en forme avec du CSS. Ainsi le titre général et les différentes rubriques devraient être représentées par des balises <section>, <h1>, <h2> etc. Les listes devraient être introduites par <ul>, <ol>, etc. Un squelette de page web est donné en annexe.

Outre le tuto, vous trouverez la liste des éléments HTML5 sur le site w3schools. Et dans le menu de gauche vous avez la liste de tous les tags HTML en géneral.

Ici nous allons commencer une application web pour afficher et poster des messages. Bien que très limitée, elle permettra de voir comment on peut conceptualizer ---et utiliser--- un petit service web.

Dans ce modèle très simple, on souhaite une seule page HTML, avec les éléments suivant:

  • Un bandeau de titre présentant le sujet des messages
  • Une liste de 5 messages avec du texte quelconque, juste pour remplir (dans un second temps, ces messages seront récupérés du serveur)
    • Pour que cela soit simple pour la suite, faites une liste non-ordonnée <ul>
  • Un <textarea> qui servira ultérieurement pour poster de nouveaux messages
    • N'en utilisez qu'un seul (pour simplifier pour la suite)
  • Un bouton pour envoyer le message.
    • Pour simplifier pour la suite, utilisez une balise <button>
    • N'en utilisez qu'un seul (pour simplifier pour la suite)

La présentation et la mise en forme est laissée à votre bon vouloir. Commencer par quelque chose de simple, vous compliquerez plus tard si le cœur vous en dit.

À faire

Cloner le repl https://repl.it/@kindjob5578/MockUp et mettez en place la structure demandée.

L'intérêt d'utiliser ce service est qu'en cas de problème, vous pourrez me donner l'adresse, voir partager avec moi, et je pourrais regarder ce qui se passe.

Quelques remarques

  • On veut à priori des pages web ACCESSIBLE, qui utilisent les balises à bon escient.
  • Vérifiez la conformité de votre page aux standards à l'aide du validateur HTML du W3C. Corrigez-la tant qu'elle n'est pas valide.

2 - CSS

Les feuilles de style CSS permettent de spécifier finement l'apparence des pages web HTML. Nous allons utiliser le CSS pour donner un aspect sympathique à votre page. Nous ne nous intéressons plus du tout au contenu ici, juste à l'apparence.

Comme pour HTML, en plus du tuto vous pouvez consulter le site w3schools qui est assez complet sur les tags CSS: ils sont classés par type de balises, et vous avez la version CSS 2 et les nouveautés introduites dans la version 3. Mais bien sûr tout autre référence que vous trouverez en ligne sera très bien.

Quelques remarques préalables

À faire

  1. Remplissez la feuille de style CSS style.css du repl pour mettre en forme votre page. On veut pour le moment quelque chose de TRÈS SIMPLE:
    • La couleur du titre
    • Les marges
    • La couleur des fonds
  2. Admirez le résultat dans votre navigateur.
  3. Vérifiez la conformité de votre feuille de style avec les normes en utilisant le validateur CSS du W3C.

Note

  • Vous pouvez incorporer plusieurs feuilles de styles CSS dans un même document. Cela vous permet de séparer par exemple les couleurs, les polices de caractères, la disposition et les marges...

3 - Un peu de javascript

3.1 - Un petit peu de programmation

Il vous faut au minimum une console javascript. Tous les navigateurs en proposent une avec les outils de développement.

Avec Repl.it, la zone noire en bas à droite est la console javascript de la page. Pour les besoins du TD c'est le plus simple, cela permet de garder une trace de ce qui est fait.

À faire

On va travailler dans le fichier javascript script.js.

  • Écrivez une fonction qui calcule la factorielle d'un entier positif n: 
function fact(n) {

   // code de la fonction

}
  • Utilisez votre fonction pour afficher la factorielle de 6 dans la console:
    • console.log("blah blah blah") imprime la chaine de caractère dans la console (en bas à droite dans repl.it)
  • Écrire une fonction applique qui prend en argument un tableau tab et une fonction f, et qui a le comportement suivant: 
applique(f,[1,2,3]);
// retourne le tableau [f(1),f(2),f(3)]

Votre fonction pourrait ressembler à cela: 

function applique(f, tab) {

   // code de la fonction

}
  • Utilisez les fonctions fact et applique pour faire la factorielle de tous les éléments d'un tableau: 
applique(fact,[1,2,3,4,5,6]);
  • Utilisez applique à une fonction non-nommée: 
applique(function(n) { return (n+1); } , [1,2,3,4,5,6]);

Essayez le code et assurez-vous de comprendre ce qui se passe.

Note

Si ça fonctionne, vous êtes prêt à travailler avec javascript.

3.2 - Un peu de dynamique dans la page

Dans votre fichier script.js, définissez la variable 

msgs = [
  { "msg" : "Hello World" },
  { "msg" : "Blah Blah" },
  { "msg" : "I love cats" }
];

puis définissez une fonction update qui

  • prend en entrée un tableau avec la même structure que msgs
  • efface la liste des messages de la page
  • passe au travers du tableau et créée pour chaque élément un nouvel <li> avec le message correspondant.

Ensuite, ajoutez comme action à un click sur le bouton de la page l'appel à update(msgs).

Changez les valeurs du tableau et vérifiez que cliquer sur le bouton change les messages affichés en conséquence.

Dans la deuxième partie...

Nous réaliserons un micro-service de gestion de message que nous utiliserons pour rendre cette page dynamique.