Programmation Web, année 2019

Attention.

les TD doivent être réalisés sous linux et non sous windows. Chaque étudiant doit être inscrit sur Moodle. Le forum peut être utilisé pour poser des questions pendant et en dehors des TD.

Les navigateurs disponibles sur les machines de l’université sont Chromium et Firefox. On utilisera obligatoirement Firefox. Enfin, l’utilisation du logiciel Atom comme éditeur de texte et vivement conseillé.

Quelques ressources en lignes

Pour répondre aux TD

Chaque TD doit être réalisé sous la forme d’une page web (nomé TD1.html, TD2.html, ect … ) qui sont à stocker dans votre répertoire personnel dans un sous répertoire nommé Prog_Web2. Vous pouvez également créer des dossier TD1, TD2, … pour stocker d’éventuelsfichiers intermédiaire.

Attention, les TD pourront être évalué par la suite.

Captures d’écran:

Dans la version présente sur les machines du campus de Firefox, vous disposez d’un outil pour prendre des captures d’écran de votre navigateur. Lorsque cela sera demandé, vous devrez prendre une capture d’écran et l’ajouter (à l’aide d’une balise <img> au document TD1.html, ect…).

Pour prendre une capture d’écran, il faut cliquer sur l’icône comme l’image suivante:

Courte introduction à l’inspecteur

Une introduction à l’inspecteur est disponible ici. N’hésitez pas à consulter ce site si vous êtes perdus.

  1. Accéder au code source:

Ouvrez la page perdu dans Firefox et utilisez le raccourci Ctrl+u pour avoir accès au code source. Alternativement, vous pouvez utiliser le menu à l’aide d’un clique droit puis afficher le code source.

Copiez-collez le code source dans un fichier perdu.html à la racine du dossier TD1. Ajoutez un lien vers ce fichier dans TD1.html.

  1. Accéder et modifier l’arbre du site:

Appuyez sur Ctrl+Maj+I pour ouvrir l’inspecteur. Vous pouvez changer dynamiquement le contenu et le style de la page.

Pour changer le contenu d’un élément, il suffit de double-cliquer dessus et de l’éditer directement. Pour changer le style d’un élément existant, il suffit d’utiliser le menu de droite et d’ajouter des champs dynamiquement au CSS de la page. Pour ajouter des balises, vous pouvez utilisez l’option clique droit+éditer comme du HTML.

Vous devriez quelque chose qui ressemble à:

Perdu sur le Web

Pas de panique, on va vous aider

 *   <----- vous êtes ici

Faites une capture d’écran du résultat et ajoutez la à TD1.html.

Rechargez la page. Vos modifications ont disparu car elles étaient côté client et non pas côté serveur.

  1. Inspecter un site web.

Un site web peut avoir une structure très complexe et un code source de plusieurs milliers de lignes de codes. L’inspecteur permet de nous y balader et de mieux comprendre la structure du site. Répondez aux questions suivantes dans TD1.html.

Remplacez le titre de l’article principal par Les simpsons s’emparent du Monde!! ainsi que l’image de cet article par l’image présente ici. Modifier le CSS de l’image pour qu’elle s’affiche correctement.

Vous devriez obtenir le résultat suivant:

Faites une capture d’écran et ajoutez la à TD1.html

L’inspecteur pour analyser les performances réseaux des sites web

Un site web peut être plus ou moins long à charger. Cette vitesse dépend de plusieurs facteurs:

Ces performances sont utilisées par les moteurs de recherche pour évaluer la qualité d’une page web mais fournissent une bonne indication du temps d’attente pour le client, en particulier ceux qui ont des ordinateurs anciens et des connexions lentes.

  1. Performance des sites web.

Dans l’inspecteur, l’onglet Network permet d’obtenir énormément d’informations sur la quantité de données et sur les performances réseaux des sites web. On y trouve par exemple les informations suivantes:

On peut trier chaque requête en fonction de sa taille ou de sa lenteur à être chargée.

  1. Utilisez l’inspecteur pour comparer les performances du site perdu.com et ma page web sur chacun de ces points (à ajouter dans TD1.html)

  2. Comparer les performances des pages web d’universités.

Comparez les performances réseaux des pages université de Lille, université de Lyon et l’université de Strasbourg:

Répondre aux questions suivantes dans TD1.html:

Enfin, comparez ces performances avec la page Youtube (qui est le deuxième site le plus consulté au monde d’après wikipedia). Que constatez-vous ?