Programmation Web, année 2019
Attention.
Les TD doivent être réalisés sous linux et non sous windows.
Quelques ressources en lignes
- Le site des tutoriels du W3C est une référence pour les langages du WEB (langue anglaise).
- Pour les non-anglophones le site de mozilla possède de nombreuses ressources en français pour HTML5, CSS3 et JavaScript
- Le site openclassrooms permet également de réviser les bases HTML5 et CSS3.
- Utiliser un client FTP pour téléverser des pages
Nous allons dans ce TD nous entraîner à styliser une page web existante et nous familiariser avec le répertoire distant où déposer les fichier.
Dans un premier temps, télécharger ici une archive zippé contenant un site web.
Décompresser le dans votre répertoire personnel. À l’aide de votre client FTP préféré, téléverser ce repertoire sur votre hébergement pédagogique, dans un réperotire nommé lecture.
Les codes d’accès à votre hébergement pédagogique ont du être reçu par mail la semaine dernière. Si ce n’est pas le cas, demandez moi de laide.
Avant de poursuvire, pensez à téléverser le TD de la semaine dernière. Il sera évalué dans le courant de la semaine.
Un premier site en JavaScript
Dans la suite, nous allons étudier et styliser la page web que vous avez décompressé dans le repertoire distant lecture
- Cliquez
Cliquez sur page suivante et
page précédente. Que constatez-vous?
- Le code source
Si vous-ouvrez le fichier index.html à l’aide d’un
éditeur, il n’y a pas de trace du livre. Comment cette page peut-elle
fonctionner ? Où sont stockées les données?
- Le fichier TD2.html
Créez un fichier TD2.html, ajoutez un lien vers
lecture/index.html.
- Un bug.
Ouvrez la console dans l’inspecteur (voir TD 1). Il y a un message d’erreur, que signifie t-il et comment y remédier ?
Un peu de CSS
- Mise en forme
Mettez en forme la page: lecture/index.html en modifiant
uniquement le fichier style.css et en respectant les
consignes suivantes:
- Faites en sorte que le contenu de cette page soit centré.
- Faites apparaître distinctement le titre et l’auteur du texte.
- Espacez les paragraphes du texte.
- Centrez le texte du roman horizontalement et verticalement.
- Réduisez la largeur des textes du roman.
- Centrez la numérotation de page sous le texte avec une couleur plus discrète.
- Faites apparaître distinctement et côte-à-côte
pages précédentesetpages suivanteset mettre en évidence graphiquement qu’il s’agit de boutons à cliquer. - Faites en sorte que la souris se comporte comme avec un lien hypertexte quand elle les survole.
- Modifiez la police de caractère et la taille de la police pour le titre, le nom de l’auteur, ainsi que pour le contenu et la numérotation.
Essayez autant que possible d’améliorer le rendu visuel de cette page
toujours en modifiant uniquement le fichier style.css.
Introductions aux transitions en CSS
Les transitions CSS sont un moyen simple et efficace de donner à une page web une allure dynamique. Il ne faut pas en abuser pour ne pas nuire à la lisibilité.
- Se documenter
Lisez cette page web introductive de mozilla
- Animer
Ajoutez dans TD2.html un élément div animé à l’aide de
transition CSS et qui ressemble à:
- Intégrer
Animez les boutons suivant et précédent de
la page lecture/index.html.
Modifier le contenu
Ouvrez le fichier book.json dans un éditeur de texte. Il
s’agit d’un fichier JSON, que l’on peut modifier à l’aide d’un éditeur
de texte.
- Se documenter
Lisez la page d’introduction de la w3school sur ce sujet.
- Un premier JSON
Créez un nouveau fichier JSON simpson.json avec trois
champs: * un champ “titre” qu’on associe à “Les Simpsons”. * un champ
“auteur” qu’on associe à “Matt Groening” * un champ pages qu’on associe
à la liste ["page0", "page1", "page2"].
Vérifiez à l’aide du site jsonlint que votre fichier
json est correct.
- Modifier le contenu
Copiez le fichier script.js en
script_simpson.js ainsi que le fichier
index.html en un fichier
index_simpson.html.
Modifiez le fichier script_simpson.js
pour qu’il charge le fichier simpson.json et non pas
book.json. Enfin modifiez index_simpson.html
pour qu’il charge script_simpson.js.
- Terminer le TD
Ajoutez un lien vers index_simpson.html dans
TD2.html.
Se repérer dans un fichier JavaScript
Repérer dans script.js:
- La fonction qui permet de créer dynamiquement un élément HTML
- La fonction qui permet d’ajouter un élément HTML à un autre élément HTML.
- La fonction qui permet de changer les attributs d’un élément HTML.
- La fonction qui permet de changer le contenu d’un élément HTML.
- Se documenter seul
D’après vous, à quoi sert l’élément XMLHttpRequest.
Compiled the: dim. 07 janv. 2024 23:19:21 CET