Avant toute chose
Resources:
- Les slides sur les Markup Languages
- Les slides sur HTML+CSS
- Resources locales sur HTML et CSS.
- L'API en ligne de codage: http://www.Repl.it
À 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>
- Pour que cela soit simple pour la suite, faites une liste non-ordonnée
- 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)
- Pour simplifier pour la suite, utilisez une balise
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
- CSS est très puissant. Jetez un oeil au site http://www.csszengarden.com. Toutes les pages de ce site contiennent le même code HTML. Seul le CSS change...
- Des milliards de resources existent sur le net
- Des tonnes de recettes, par exemple
- W3Schoold: (beaucoup) d'exemples
- CSS-tricks: encore des exemples
- CSS-tricks: des boutons
- Une discussion sur le centrage d'éléments
- Une discussion sur le redimensionnement d'images
- Comment faire des tabs ici, ici, ou encore ici, ou ici.
- Des jolis formulaires, sur purecss.io, ou ici, ou ici.
- Des boites qui grandissent de façon contrôlée.
- Mais aussi simplement l'étude de ce qui a été fait dans un site particulier: tout le code est accessible, par construction puisque votre navigateur l'a chargé...
- Des tonnes de recettes, par exemple
- Si ce n'était pas déjà clair, il est important de se rendre compte que TOUT LE SOURCE CE QUE VOUS VOYEZ sur le net est disponible... Vous n'avez qu'à le réutiliser le cas échéant.
À faire
- 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
- Admirez le résultat dans votre navigateur.
- 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:
- 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 tableautab
et une fonctionf
, et qui a le comportement suivant:
Votre fonction pourrait ressembler à cela:
- Utilisez les fonctions
fact
etapplique
pour faire la factorielle de tous les éléments d'un tableau:
- Utilisez
applique
à une fonction non-nommée:
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
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.