Démonstration - Introduction à  l'environnement de travail

Obtention de votre compte usager

Vous devez avoir votre nom d'usager du DIRO-DESI dont le mot de passe est de 14 caractères. Vous êtes censé avoir reçu un courriel avec les informations. Si vous ne l'avez pas encore, veuillez suivre les instructions dans la page ci-dessous:

Compte DIRO-DESI

Téléchargement de logiciels pour le travail à partir de votre ordinateur

Informations importantes pour les étudiantes de la DESI

Lisez avec attention les documents suivants:

Lisez aussi avec attention les informations fournies par le support technique sur le fonctionnement des laboratoires de la DESI

Connexion avec Winscp

La connexion avec Winscp vous donne accès au réseau Unix du laboratoire à partir de la maison:

Dans la liste de programmes, choisissez le programme Winscp et entrer avec:

Dans winscp, les données nécessaires pour la connection à distance avec le serveur du laboratoire.
Dans winscp, les données nécessaires pour la connexion à distance avec le serveur du laboratoire.

Lecture du Courriel

Quelques conseils:

Édition d'un fichier HTML dans l'éditeur VSCode

Au laboratoire de l'université, vous devez toujours travailler sur le disque R: (en non sur le disque C:). Le disque R: est accessible à partir de toutes les machines. Donc, si vous changez de poste de travail d'une semaine à l'autre, vous aurez tous vos fichiers.

Nous allons utiliser au laboratoire l'éditeur VSCode.

Créez un nouveau dossier sur le disque R: dont le nom est demoIntro pour mettre les fichiers développés dans la démonstration d'aujourd'hui.

Téléchargez le fichier simple.html dans le dossier demoIntro. Pour télécharger un fichier à partir d'une page web, vous devez, avec le bouton de la souris sur le lien, cliquez sur le bouton droit et choisir l'option Enregistrer la cible du lien sous. Ce fichier contient le modèle de page que nous utiliserons dans notre cours.

Dans la liste de programmes, choisissez le programme VSCode.

Choisir VSCode dans la liste de programmes.
Le choix de VSCode à partir du menu de démarrage de Windows.

Édition de fichier HTML:

Cliquez sur "Ouvrir fichier" et sélectionnez le fichier simple.html sur le disque R:, dans le dossier demoIntroHTML:

Ouvrir le fichier simple.html dans VSCode.
Ouvrir le fichier simple.html dans VSCode.

Édition de fichier HTML

Visualisation du fichier <i>simple.html</i> dans VSCode.
Visualisation du fichier simple.html dans VSCode.

Entrez avec le titre de la page dans l'élément title Ma première page Web.

Fichier simple.html dans VSCode.
Fichier simple.html dans VSCode. Observez que la localisation du fichier est indiqué dans la première ligne. Dans l'image, mon répertoire demoIntro est sur le disque C (parce que je suis à la maison). Pour vous, au labo, le fichier doit être sur le disque R.

VSCode indique que le fichier n'est pas sauvegardé dans le premier icône à gauche en haut.

Vous pouvez sauvegarder le fichier avec l'option Save (ou Sauvegarder dans la version française) sur le menu File (ou Fichier). En bas de l'option Save, il y a aussi l'option de sauvegarder le fichier avec un autre nom et aussi l'option de sauvegarder tous les fichiers ouverts dans VSCode.

Sauvegarde du fichier simple.html dans VSCode .
Sauvegarde du fichier simple.html dans VSCode.

Visualisation d'un fichier HTML dans le navigateur Chrome

Une fois la page sauvegardée, nous pouvons la réperée dans l'explorateur de fichiers pour l'ouvrir dans le navigateur.

Après avoir sélectionné le fichier <i>simple.html</i> dans l'explorateur de fichier Windows,  il faut cliquer sur le bouton droit de la souris pour sélectionner l'opération 
        <i>Open with</i> et, ensuite, il faut choisir <i>GoogleChrome</i>.
Après avoir sélectionné le fichier simple.html dans l'explorateur de fichier Windows, il faut cliquer sur le bouton droit de la souris pour sélectionner l'opération Open with et, ensuite, il faut choisir GoogleChrome.

Visualisation du HTML dans le navigateur

Visualisation de la page dans Chrome.
Visualisation de la page dans Chrome.
  1. Le contenu de la page affiché dans le navigateur
  2. la ligne d'adresse de la page avec l'indication du protocole file pour trouver la page localement dans l'ordinateur du client
  3. le titre de la page indiqué dans l'onglet du navigateur

Il est possible de visualiser le code source de la page dans le navigateur.

Fichier simple.html dans VSCode.
Avec le bouton droit de la souris, nous pouvons sélectionner le l'opération View page source dans Chrome.

Le code source de la page tel quel édité dans l'éditeur de texte est donc affiché dans une autre page du navigateur.

Visualisation du code source HTML dans Chrome.
Visualisation du code source HTML dans Chrome.

Suppression de la mémoire cache dans le navigateur Chrome

Chaque navigateur permet la suppression de sa mémoire cache.

Dans <i>Chrome</i>, il faut cliquer sur les trois
        petits points en haut à droite et, ensuite, choisir l'option <i>Delete browsing data</i>.
Dans Chrome, il faut cliquer sur les trois petits points en haut à droite et, ensuite, choisir l'option Delete browsing data.

Chrome nous permet donc de choisir quelles données seront effacées.

Nous pouvons tout effacer pour être sûrs de vider la cache au complet ou choisir la catégorie de données
            à effacer. Pour notre cours, il est recommandé d'éffacer les images et les fichiers sauvegardés.
Nous pouvons tout effacer pour être sûrs de vider la cache au complet ou choisir la catégorie de données à effacer. Pour notre cours, il est recommandé d'éffacer les images et les fichiers sauvegardés.

N'oubliez pas de sélectionner le bouton Delete data après avoir fait votre choix.

Ressources à explorer

Travail à la maison

C'est pratique et commode de travailler à la maison. Pour pouvoir le faire vous devez :