« MINIT » : différence entre les versions

De EduTech Wiki
Aller à la navigation Aller à la recherche
mAucun résumé des modifications
(15 versions intermédiaires par le même utilisateur non affichées)
Ligne 3 : Ligne 3 :
Cette page fait référence à la partie facultative de l'atelier MINIT prévue dans le cadre du Master MALTT.  
Cette page fait référence à la partie facultative de l'atelier MINIT prévue dans le cadre du Master MALTT.  


{{bloc important | Programme et contenus valables pour la volée '''Baldur''' (année académique 2021/2022) }}
{{bloc important | Programme et contenus valables pour la volée '''Concordia''' (année académique 2022/2023) }}


;Dates :
;Dates :


* '''Jeudi 23 septembre''', matin et après-midi
* '''Mercredi 21 septembre''', matin et après-midi
* '''Vendredi 24 septembre''', matin
* '''Jeudi 22 septembre''', matin


Voir plus bas pour le programme en détail.
Voir plus bas pour le programme en détail.
Ligne 71 : Ligne 71 :


Organisation des demi-journées :
Organisation des demi-journées :
* Jeudi....... 09:00 – 12:30 -> Introduction à HTML5
* Mercredi....... 09:00 – 12:30 -> Introduction à HTML5
* Jeudi....... 14:00 – 17:30 -> Introduction à CSS
* Mercredi....... 14:00 – 17:30 -> Introduction à CSS
* Vendredi.... 09:00 – 12:30 -> Introduction au transfert des fichiers (SFTP)
* Jeudi.......... 09:00 – 12:30 -> Introduction au transfert des fichiers (SFTP)


Ici de suite le programme plus détaillé pour chaque session.
Ici de suite le programme plus détaillé pour chaque session.


===Jeudi matin===
===Mercredi matin===


* 09:00 – 09:30 Visioconférence (détails dans l'espace MINIT 2021 sur Moodle) avec présentation sur le déroulement de la journée et introduction à HTML5
* 09:00 – 09:30 Visioconférence (détails dans l'espace MINIT 2022 sur Moodle) avec présentation sur le déroulement de la journée et introduction à HTML5
* 09:30 – 10:30 Activité en autonomie à distance :  
* 09:30 – 10:30 Activité en autonomie à distance :  
** Installation et configuration [[Visual studio code]]
** Installation et configuration [[Visual studio code]]
Ligne 87 : Ligne 87 :
* 12:00 - 12:30 Synthèse de la demi-journée en visioconférence
* 12:00 - 12:30 Synthèse de la demi-journée en visioconférence


===Jeudi après-midi===
===Mercredi après-midi===


* 14:00 – 15:30 Visioconférence (détails dans l'espace MINIT 2021 sur Moodle) avec présentation de CSS
* 14:00 – 15:30 Visioconférence (détails dans l'espace MINIT 2022 sur Moodle) avec présentation de CSS
** [[Introduction à CSS]]  
** [[Introduction à CSS]]  
* 15:30 – 16:00 Pause
* 15:30 – 16:00 Pause
Ligne 95 : Ligne 95 :
* 17:00 - 17:30 Synthèse de la demi-journée en visioconférence
* 17:00 - 17:30 Synthèse de la demi-journée en visioconférence


===Vendredi matin===
===Jeudi matin===


* 09:00 – 10 :30 Installation du logiciel SFTP Cyberduck et transfert de fichiers sur le serveur tecfaetu.unige.ch
* 09:00 – 10 :30 Installation du logiciel SFTP Cyberduck et transfert de fichiers sur le serveur tecfaetu.unige.ch
Ligne 103 : Ligne 103 :
==Introduction à HTML5==
==Introduction à HTML5==


Une version plus approfondie de cette partie est disponible dans la page EduTechWiki suivante que vous pouvez consulter pour rappel ou si vous étiez absent-e-s :
Une version plus approfondie de cette partie est disponible dans la page EduTechWiki suivante que vous pouvez consulter pour rappel ou si vous étiez absent-es :


{{ Goblock | [[Introduction à HTML5]] }}
{{ Goblock | [[Introduction à HTML5]] }}
Ligne 121 : Ligne 121 :
* L’utilisation des outils de développement d’un navigateur web
* L’utilisation des outils de développement d’un navigateur web
* L’utilisation et la configuration d’un éditeur de texte
* L’utilisation et la configuration d’un éditeur de texte
cliquez sur cette magnigique page : https://tecfaetu.unige.ch/minit/concordia
===Présentation===
Les slides de la présentation sont disponibles directement comme pages/application HTML5 en utilisant [[Reveal.js]], une [[bibliothèques JavaScript|bibliothèques JavaScript]] que nous allons voir dans le cours [[STIC:STIC I]] :
{{ Goblock | [https://mafritz.ch/slides/fr/intro-html5/ Présentation de HTML5]}}


===Outils===
===Outils===
Ligne 161 : Ligne 169 :
====Squelette HTML5====
====Squelette HTML5====


<source lang="HTML5">
<syntaxhighlight lang="HTML5">
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="fr">
<html lang="fr">
Ligne 174 : Ligne 182 :
</body>
</body>
</html>
</html>
</source>
</syntaxhighlight>


==== Titres ====
==== Titres ====


<source lang="HTML5">
<syntaxhighlight lang="HTML5">
<h1>Titre de premier niveaux (Grand)</h1>
<h1>Titre de premier niveaux (Grand)</h1>
<h2>Titre de deuxième niveaux</h2>
<h2>Titre de deuxième niveaux</h2>
<h3>Titre de troisième niveaux</h3>
<h3>Titre de troisième niveaux</h3>
</source>
</syntaxhighlight>


==== Paragraphes ====
==== Paragraphes ====
<source lang="HTML5">
<syntaxhighlight lang="HTML5">
<p>Texte du premier paragraphe.</p>
<p>Texte du premier paragraphe.</p>
<p>Texte du deuxième paragraphe.</p>
<p>Texte du deuxième paragraphe.</p>
</source>
</syntaxhighlight>


==== Liens hypertextuels ====
==== Liens hypertextuels ====


<source lang="HTML5">
<syntaxhighlight lang="HTML5">
<a href="http://tecfa.unige.ch">TECFA</a>
<a href="http://tecfa.unige.ch">TECFA</a>
<a href="../lien-relatif/page.html">Lien relatif</a>
<a href="../lien-relatif/page.html">Lien relatif</a>
</source>
</syntaxhighlight>


==== Listes à puces ====
==== Listes à puces ====
Ligne 201 : Ligne 209 :
; Non-ordonnée
; Non-ordonnée


<source lang="HTML5">
<syntaxhighlight lang="HTML5">
<ul>
<ul>
     <li>Premier item non ordonné</li>
     <li>Premier item non ordonné</li>
Ligne 207 : Ligne 215 :
     <li>Troisième item non ordonné</li>
     <li>Troisième item non ordonné</li>
</ul>
</ul>
</source>
</syntaxhighlight>


; Ordonnée
; Ordonnée


<source lang="HTML5">
<syntaxhighlight lang="HTML5">
<ol>
<ol>
     <li>Premier item ordonné</li>
     <li>Premier item ordonné</li>
Ligne 217 : Ligne 225 :
     <li>Troisième item ordonné</li>
     <li>Troisième item ordonné</li>
</ol>
</ol>
</source>
</syntaxhighlight>


==== Images ====
==== Images ====
Ligne 231 : Ligne 239 :
** Vous pouvez utiliser par exemple [[GIMP]] pour modifier une [[image matricielle]], voir [https://www.gimp.org/tutorials/GIMP_Quickies/ GIMP Quickies] pour un bref tutoriel à ce propos
** Vous pouvez utiliser par exemple [[GIMP]] pour modifier une [[image matricielle]], voir [https://www.gimp.org/tutorials/GIMP_Quickies/ GIMP Quickies] pour un bref tutoriel à ce propos


<source lang="HTML5">
<syntaxhighlight lang="HTML5">
<img src="chemin/au/fichier/image.jpg" alt="Texte alternatif pour screenreaders" title="Description de l'image" />
<img src="chemin/au/fichier/image.jpg" alt="Texte alternatif pour screenreaders" title="Description de l'image" />
</source>
</syntaxhighlight>


La balise <code>img</code> est une balise ''vide'' qui n'accepte pas de contenu. Pour cette raison, il est de bonne pratique de placer le <code>/</code> de clôture à la fin de la balise.
La balise <code>img</code> est une balise ''vide'' qui n'accepte pas de contenu. Pour cette raison, il est de bonne pratique de placer le <code>/</code> de clôture à la fin de la balise.
Ligne 305 : Ligne 313 :
L'éditeur va automatiquement insérez dans le code le squelette HTML5 suivant :
L'éditeur va automatiquement insérez dans le code le squelette HTML5 suivant :


<source lang="HTML5" line>
<syntaxhighlight lang="HTML5" line>
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
<html lang="en">
Ligne 318 : Ligne 326 :
</body>
</body>
</html>
</html>
</source>
</syntaxhighlight>


Souvenez-vous de changer l'attribut <code>lang="en"</code> en <code>lang="fr"</code> à ligne 2 si votre document est en français.
Souvenez-vous de changer l'attribut <code>lang="en"</code> en <code>lang="fr"</code> à ligne 2 si votre document est en français.
Ligne 326 : Ligne 334 :
==Introduction aux CSS==
==Introduction aux CSS==


Une version plus approfondie de cette partie est disponible dans la page EduTechWiki suivante que vous pouvez consulter pour rappel ou si vous étiez absent-e-s :
Une version plus approfondie de cette partie est disponible dans la page EduTechWiki suivante que vous pouvez consulter pour rappel ou si vous étiez absent-es :


{{ Goblock | [[Introduction à CSS]] }}
{{ Goblock | [[Introduction à CSS]] }}
Ligne 338 : Ligne 346 :
* La séparation entre contenu (HTML5) et forme (CSS)
* La séparation entre contenu (HTML5) et forme (CSS)
* Les éléments HTML en tant que « boites » avec des coordonnées
* Les éléments HTML en tant que « boites » avec des coordonnées
* La différence entre le document et le viewport
* Les manières d’ajouter des styles à vos pages web (attribut, inline et fichier externe)
* Les manières d’ajouter des styles à vos pages web (attribut, inline et fichier externe)
* Les propriétés et valeurs de style les plus fréquentes
* Les propriétés et valeurs de style les plus fréquentes
* Les différentes manières de positionner les éléments HTML (propriété CSS position)
* Les différentes manières de positionner les éléments HTML (propriété CSS position)
===Présentation===
Les slides de la présentation sont disponibles directement comme pages/application HTML5 en utilisant [[Reveal.js]], une [[bibliothèques JavaScript|bibliothèques JavaScript]] que nous allons voir dans le cours [[STIC:STIC I]] :
{{ Goblock | [https://mafritz.ch/slides/fr/intro-css/ Présentation de CSS]}}


===Outils===
===Outils===
Ligne 351 : Ligne 364 :
==== Avec l'attribut style====
==== Avec l'attribut style====


<source lang="HTML5">
<syntaxhighlight lang="HTML5">
<body style="background-color: black; color: white">
<body style="background-color: black; color: white">
</source>
</syntaxhighlight>


==== Avec la balise style ====
==== Avec la balise style ====
Ligne 359 : Ligne 372 :
Dans le <code><head>...</head></code> de votre page :
Dans le <code><head>...</head></code> de votre page :


<source lang="HTML5">
<syntaxhighlight lang="HTML5">
<head>
<head>
     <meta charset="UTF-8">
     <meta charset="UTF-8">
Ligne 370 : Ligne 383 :
     </style>
     </style>
</head>
</head>
</source>
</syntaxhighlight>


==== Avec un fichiers CSS externe (conseillé) ====
==== Avec un fichiers CSS externe (conseillé) ====
Ligne 376 : Ligne 389 :
Lien dans le <code><head>...</head></code> de votre page :
Lien dans le <code><head>...</head></code> de votre page :


<source lang="HTML5">
<syntaxhighlight lang="HTML5">
<head>
<head>
     <meta charset="UTF-8">
     <meta charset="UTF-8">
Ligne 382 : Ligne 395 :
     <link rel="stylesheet" href="style.css" type="text/css" />
     <link rel="stylesheet" href="style.css" type="text/css" />
</head>
</head>
</source>
</syntaxhighlight>


Le fichier doit exister et respecter le bon chemin. Dans ce cas, le fichier s'appelle <code>style.css</code> et doit se trouver au même niveau de la page HTML :
Le fichier doit exister et respecter le bon chemin. Dans ce cas, le fichier s'appelle <code>style.css</code> et doit se trouver au même niveau de la page HTML :


<source lang="CSS">
<syntaxhighlight lang="CSS">
/* This is an external CSS file */
/* This is an external CSS file */


Ligne 396 : Ligne 409 :
     color: white;
     color: white;
}
}
</source>
</syntaxhighlight>


===Balises pour le style===
===Balises pour le style===
Ligne 403 : Ligne 416 :


* <code><nowiki><div>...</div></nowiki></code> à utiliser pour des bloques de contenu, par exemple :
* <code><nowiki><div>...</div></nowiki></code> à utiliser pour des bloques de contenu, par exemple :
*: <source lang="HTML5">
*: <syntaxhighlight lang="HTML5">
<div>
<div>
   <p>Paragraphe à l'intérieur du div</p>
   <p>Paragraphe à l'intérieur du div</p>
   <p>Autre paragraphe à l'intérieur du div</p>
   <p>Autre paragraphe à l'intérieur du div</p>
</div>
</div>
</source>
</syntaxhighlight>
* <code><nowiki><span>...</span></nowiki></code> à utiliser surtout pour des bouts de texte, par exemple :
* <code><nowiki><span>...</span></nowiki></code> à utiliser surtout pour des bouts de texte, par exemple :
*: <source lang="HTML5">
*: <syntaxhighlight lang="HTML5">
<p>Mon texte avec un <span>mot</span> qui possède un style particulier</p>
<p>Mon texte avec un <span>mot</span> qui possède un style particulier</p>
</source>
</syntaxhighlight>


===Sélecteurs et propriétés fréquentes===
===Sélecteurs et propriétés fréquentes===
Ligne 419 : Ligne 432 :


# Nom de la balise
# Nom de la balise
#: <source lang="CSS">
#: <syntaxhighlight lang="CSS">
body {
body {
   ...
   ...
Ligne 427 : Ligne 440 :
   ...
   ...
}
}
</source>
</syntaxhighlight>
# Nom de la classe, par exemple pour <code><nowiki><p class="important">Text</p></nowiki></code>
# Nom de la classe, par exemple pour <code><nowiki><p class="important">Text</p></nowiki></code>
#: <source lang="CSS">
#: <syntaxhighlight lang="CSS">
.important {
.important {
   ...
   ...
}
}
</source>
</syntaxhighlight>
# ID de l'élément (une seule ID par page), par exemple <code><nowiki><h1 id="unique">Titre</h1></nowiki></code>
# ID de l'élément (une seule ID par page), par exemple <code><nowiki><h1 id="unique">Titre</h1></nowiki></code>
#: <source lang="CSS">
#: <syntaxhighlight lang="CSS">
#unique {
#unique {
   ...
   ...
}
}
</source>
</syntaxhighlight>


==== Aligner du contenu (simple) ====
==== Aligner du contenu (simple) ====
Ligne 445 : Ligne 458 :
Pour aligner du contenu simple (e.g. texte ou image à l'intérieur d'un paragraphe ou d'un div), utiliser :
Pour aligner du contenu simple (e.g. texte ou image à l'intérieur d'un paragraphe ou d'un div), utiliser :


<source lang="CSS">
<syntaxhighlight lang="CSS">
.aligner-au-centre {
.aligner-au-centre {
   text-align: center;
   text-align: center;
}
}
</source>
</syntaxhighlight>


Dans ce cas, la classe doit s'appliquer à l'élément conteneur des éléments qui doivent être alignées au centre. Par exemple :
Dans ce cas, la classe doit s'appliquer à l'élément conteneur des éléments qui doivent être alignées au centre. Par exemple :


<source lang="HTML5">
<syntaxhighlight lang="HTML5">
<div class="aligner-au-centre">
<div class="aligner-au-centre">
   <p>Mon texte va être aligné au centre</p>
   <p>Mon texte va être aligné au centre</p>
Ligne 459 : Ligne 472 :
   <img src="logo.png" title="Image va être alignée au centre">
   <img src="logo.png" title="Image va être alignée au centre">
</div>
</div>
</source>
</syntaxhighlight>


==== Colorer (simple) ====
==== Colorer (simple) ====
Ligne 465 : Ligne 478 :
On peut colorer presque tous les éléments, ici on va voir le background et la couleur du foreground (normalement du texte) :
On peut colorer presque tous les éléments, ici on va voir le background et la couleur du foreground (normalement du texte) :


<source lang="CSS">
<syntaxhighlight lang="CSS">
body {
body {
   background-color: black;
   background-color: black;
   color: white;
   color: white;
}
}
</source>
</syntaxhighlight>


On peut utiliser également les valeurs hexadécimaux pour les couleurs (plus avancé) :
On peut utiliser également les valeurs hexadécimaux pour les couleurs (plus avancé) :


<source lang="CSS">
<syntaxhighlight lang="CSS">
body {
body {
   background-color: #000;
   background-color: #000;
   color: #FFF;
   color: #FFF;
}
}
</source>
</syntaxhighlight>


Ou encore les valeurs RGB :
Ou encore les valeurs RGB :
<source lang="CSS">
<syntaxhighlight lang="CSS">
body {
body {
   background-color: rgb(0, 0, 0);
   background-color: rgb(0, 0, 0);
   color: rgb(255, 255, 255);
   color: rgb(255, 255, 255);
}
}
</source>
</syntaxhighlight>


'''Ce trois bouts de code produisent exactement le même résultat'''
'''Ce trois bouts de code produisent exactement le même résultat'''
Ligne 592 : Ligne 605 :
#Insérez le serveur : <code>tecfaetu.unige.ch</code>
#Insérez le serveur : <code>tecfaetu.unige.ch</code>
#Saisissez votre nom d'utilisateur court
#Saisissez votre nom d'utilisateur court
#Cliquez sur la flèche '''Plus d'options''' si une partie de la fenêtre ne s'affiche pas, et ajouter le chemin d'accès de l'espace, par exemple <code>/home/etu28/votre-login-court</code> --> '''Attention''': chemin valable seulement pour la volée '''baldur''', référez vous à la section suivante pour les chemins précis !
#Cliquez sur la flèche '''Plus d'options''' si une partie de la fenêtre ne s'affiche pas, et ajouter le chemin d'accès de l'espace, par exemple <code>/home/etu29/votre-login-court</code> --> '''Attention''': chemin valable seulement pour la volée '''concordia''', référez vous à la section suivante pour les chemins précis !
#Fermez la fenêtre, les informations sont sauvegardées automatiquement
#Fermez la fenêtre, les informations sont sauvegardées automatiquement


Ligne 605 : Ligne 618 :
Il s’agit d’un espace privé dont le contenu '''n’est pas accessible par les navigateurs web'''. Vous pouvez utiliser cet espace pour vos fichiers personnels.  Vous trouverez votre espace home dans ce chemin:
Il s’agit d’un espace privé dont le contenu '''n’est pas accessible par les navigateurs web'''. Vous pouvez utiliser cet espace pour vos fichiers personnels.  Vous trouverez votre espace home dans ce chemin:


  /home/etu28/''votre-login-court''
  /home/etu29/''votre-login-court''


Sur un serveur, tous les utilisateurs ont leur nom qui se trouvent à l'intérieur du dossier '''home'''. Dans le spécifique du MALTT, faites bien attention à ne pas confondre cet espace avec l'espace personnel où vous allez placer votre homepage (voir point suivant).
Sur un serveur, tous les utilisateurs ont leur nom qui se trouvent à l'intérieur du dossier '''home'''. Dans le spécifique du MALTT, faites bien attention à ne pas confondre cet espace avec l'espace personnel où vous allez placer votre homepage (voir point suivant).
Ligne 626 : Ligne 639 :
Le fichiers contenus dans cet espace seront accessible depuis le web à l'adresse :
Le fichiers contenus dans cet espace seront accessible depuis le web à l'adresse :


* http://tecfaetu.unige.ch/etu-maltt/baldur/votre-login-court/
* http://tecfaetu.unige.ch/etu-maltt/concordia/votre-login-court/


Vous trouverez votre espace travaux dans ce chemin :
Vous trouverez votre espace travaux dans ce chemin :


  /web/etu-maltt/baldur/''votre-login-court''
  /web/etu-maltt/concordia/''votre-login-court''


=== Anatomie d'un lien hypertextuel ===
=== Anatomie d'un lien hypertextuel ===
Ligne 727 : Ligne 740 :
* [[:en:CSS]] (page avec plusieurs liens à des sujets plus spécifiques)
* [[:en:CSS]] (page avec plusieurs liens à des sujets plus spécifiques)


[[Category: Ressources STIC]]
== Activités Concordia ==
 
== Activités Baldur ==


=== Tâche obligatoire ===
=== Tâche obligatoire ===
Ligne 738 : Ligne 749 :
* Styliser votre page avec quelques déclarations CSS
* Styliser votre page avec quelques déclarations CSS
* Publier dans votre espace travaux, dans un sous dossier spécifique
* Publier dans votre espace travaux, dans un sous dossier spécifique
* Publier le lien de votre page dans le forum [https://tecfalms.unige.ch/moodle/mod/forum/view.php?id=27205 Forum test de l'espace Moodle MINIT 2021]
* Publier le lien de votre page dans le forum [https://tecfalms.unige.ch/moodle/mod/forum/view.php?id=28736 Forum test de l'espace Moodle MINIT 2022]


Contraintes :
Contraintes :
Ligne 745 : Ligne 756 :
* Vous devez avoir au moins une déclaration de style dans un fichier .css externe
* Vous devez avoir au moins une déclaration de style dans un fichier .css externe
* Modifiez les dimensions de l'image dans le code (style css dans l'attribut ou dans le fichier externe, à choix) pour une hauteur de 450px
* Modifiez les dimensions de l'image dans le code (style css dans l'attribut ou dans le fichier externe, à choix) pour une hauteur de 450px
* Votre page doit se trouver dans un dossier '''minit/vive-html5/''' dans votre espace travaux, ça veut dire que le chemin doit ressembler à <code>/web/etu-maltt/votre-login-court/...</code>
* Votre page doit se trouver dans un dossier '''minit/vive-html5/''' dans votre espace travaux sur tecfaetu.unige.ch, ça veut dire que le chemin doit ressembler à <code>/web/etu-maltt/concordia/votre-login-court/</code> + '''les dossier que vous créez'''
* Ajouter à la fin de la page la date et votre nom
* Ajouter à la fin de la page la date et votre nom


Ligne 757 : Ligne 768 :
* Ajoutez un lien hypertextuel à la page sur CSS qui pointe vers la page sur HTML
* Ajoutez un lien hypertextuel à la page sur CSS qui pointe vers la page sur HTML
* Publiez le tout sur votre espace travaux pour que les changements soient mis à jour
* Publiez le tout sur votre espace travaux pour que les changements soient mis à jour
[[Category: Ressources STIC]] [[Catégorie:Cours et travaux]]

Version du 22 septembre 2022 à 14:58

Info pratiques

Cette page fait référence à la partie facultative de l'atelier MINIT prévue dans le cadre du Master MALTT.

Programme et contenus valables pour la volée Concordia (année académique 2022/2023)
Dates
  • Mercredi 21 septembre, matin et après-midi
  • Jeudi 22 septembre, matin

Voir plus bas pour le programme en détail.

Contacts

Introduction

L’atelier d’initiation pour les novices se déroule sur 3 demi-journées, chacune avec un thème spécifique, mais qui dans l’ensemble ont l’objectif d’introduire le fonctionnement des pages web. Le choix de ce sujet présente plusieurs objectifs pédagogiques et techniques :

  • Il s’agit d’une technologie qui peut aller du très simple au très complexe
  • Publier une page web nécessite des connaissances à plusieurs niveaux
    • Codage HTML5 + CSS
    • Gestion de différents fichiers et dossiers
    • Utilisation d’un éditeur de texte
    • Fonctionnement « avancé » d’un navigateur web
    • Fonctionnement d’un serveur web
    • Fonctionnement d’un serveur (S)FTP
  • Le contenu de l’atelier sert comme base pour les cours techniques STIC I et II
  • La connaissance « approfondie » d’une technologie peut être généralisée à d’autres technologies

Objectifs

À la fin de l'atelier, vous devez être capables de :

  • Utiliser un éditeur de texte pour :
    • Créer des pages HTML5 et structurer le contenu avec des balises appropriées
    • Savoir appliquer des déclarations de style CSS qui déterminent l'affichage graphique des contenus
  • Utiliser un logiciel de transfert de fichiers pour :
    • Publier tous les fichiers nécessaires à l'affichage d'une page ou petit site web (e.g. fichiers HTML5, CSS, images, SVG, ...) à des endroits précis sur le serveur tecfaetu.unige.ch

Des objectifs plus spécifiques sont illustrés dans la suite de la page.

Prérequis

Aucune connaissance spécifique n’est demandée pour participer à l’Atelier technique. Par contre, on s’attend à ce que vous maîtrisiez les fonctions « de base » de votre ordinateur telles que :

  • Créer, renommer, déplacer et effacer des fichiers/dossiers
  • Savoir utiliser un navigateur web (pour l’atelier on utilisera de préférence Google Chrome)
  • Download et extraction de fichiers
  • Download et installation de logiciels

Est-ce que je dois participer ?

L'atelier est facultatif. Dans cette page vous trouvez plusieurs sections avec les objectifs de chaque demi-journée. Si vous pensez déjà les maîtriser, il est inutile que vous veniez.

Pensez néanmoins à configurer un logiciel de transfert de fichier avec les données du serveur tecfaetu.unige.ch (voir section SFTP plus bas pour les détails) avant le début des cours (en particulier le cours STIC I).

Je voudrais participer mais je ne peux pas

Si vous ne pouvez pas participer à une ou plusieurs demi-journées, cette page propose toutes les activités qui sont prévues pendant l'atelier, y compris les ressources utilisées. Certaines activités (e.g. les "workshop") sont conçues afin que vous puissez les faire (ou refaire) également chez vous. En cas de problèmes, n'hésitez pas à nous contacter.

Matériel et logiciels

Vous devez avoir votre ordinateur portable avec vous avec un chargeur. Au niveau des logiciels, nous installerons le nécessaire pendant l'atelier.

Profitez de l’atelier

L’atelier est le moment pour poser des questions ou demander de l’aide au niveau technique.

Il ne faut pas hésiter ou se dire que vous aurez le temps pour apprendre. Après l’atelier technique, les cours vont commencer directement et les connaissances techniques dévoilées pendant l’atelier d’initiation seront considérées acquises.

Programme

Organisation des demi-journées :

  • Mercredi....... 09:00 – 12:30 -> Introduction à HTML5
  • Mercredi....... 14:00 – 17:30 -> Introduction à CSS
  • Jeudi.......... 09:00 – 12:30 -> Introduction au transfert des fichiers (SFTP)

Ici de suite le programme plus détaillé pour chaque session.

Mercredi matin

  • 09:00 – 09:30 Visioconférence (détails dans l'espace MINIT 2022 sur Moodle) avec présentation sur le déroulement de la journée et introduction à HTML5
  • 09:30 – 10:30 Activité en autonomie à distance :
  • 10:30 – 11:00 Pause
  • 11:00 – 12:00 Workshop HTML5 (exercices en autonomie) avec permanence via visioconférence en cas de questions.
  • 12:00 - 12:30 Synthèse de la demi-journée en visioconférence

Mercredi après-midi

  • 14:00 – 15:30 Visioconférence (détails dans l'espace MINIT 2022 sur Moodle) avec présentation de CSS
  • 15:30 – 16:00 Pause
  • 16:00 – 17:00 Workshop CSS (exercices en autonomie) avec permanence via visioconférence en cas de questions.
  • 17:00 - 17:30 Synthèse de la demi-journée en visioconférence

Jeudi matin

  • 09:00 – 10 :30 Installation du logiciel SFTP Cyberduck et transfert de fichiers sur le serveur tecfaetu.unige.ch
  • 10:30 – 11:00 Pause
  • 11:00 – 12:30 Création d’une page HTML5 + CSS et publication en ligne

Introduction à HTML5

Une version plus approfondie de cette partie est disponible dans la page EduTechWiki suivante que vous pouvez consulter pour rappel ou si vous étiez absent-es :

Référez-vous à la section Workshop HTML5 pour les exercices de consolidation du contenu.

Objectifs

Après la séance consacrée à l’introduction à HTML5 vous devrez être familier avec :

  • Les grandes lignes du fonctionnement requête/réponse d’une ressource/page web
  • Qu’est-ce qu’un langage de marquage
  • L’existence de différentes versions de HTML
  • La structure d’un document HTML5
  • Les balises et attributs HTML les plus fréquents
  • Les liens hypertextuels : protocoles, domaines, chemins, noms de fichiers, extensions
  • Différents type de fichiers (pages web, images, …)
  • L’utilisation des outils de développement d’un navigateur web
  • L’utilisation et la configuration d’un éditeur de texte

cliquez sur cette magnigique page : https://tecfaetu.unige.ch/minit/concordia

Présentation

Les slides de la présentation sont disponibles directement comme pages/application HTML5 en utilisant Reveal.js, une bibliothèques JavaScript que nous allons voir dans le cours STIC:STIC I :

Outils

Outils de développement du navigateur web

Nous allons utiliser les outils de développement d'un navigateur pour montrer dans la pratique comment une page HTML est affichée par un navigateur web.

Nous allons utiliser les outils de développement qui sont disponibles dans la plupart des navigateurs web. Dans le contexte de l'Atelier, nous allons utiliser Google Chrome, car pour longtemps c'était le navigateur avec les meilleures outils de développement disponibles. Depuis 2020 les outils de développement de différents navigateurs se ressemblent beaucoup, donc vous pouvez utiliser votre navigateur de choix si vous le préférez, en sachant que dans ces cas, il y aura quelques différences à prévoir. De plus, dans certains navigateurs il faut d'abord activer ces outils pour pouvoir les utiliser.

Si vous décidez d'utiliser Chrome et vous ne l'avez pas encore, installez-le sur votre ordinateur :

Une fois installé le logiciel, ouvrez-le et pointer vers la page de TECFA :

Pour ouvrir les outils procédez de cette manière (voir également l’image) :

  1. Cliquez sur l’icône du menu sur la droite de l’écran
  2. Sélectionnez l’item « Plus d’outils »
  3. Cliquez sur « Outils de développement »
Ouvrir les outils développeur sur Google Chrome

Vous devrez obtenir un résultat similaire à celui-ci :

Capture d'écran de la page TECFA avec outils développeur sur Google Chrome

Éditeur de texte

Un éditeur de texte est un logiciel qui permet d'écrire du code dans plusieurs langages (e.g. HTML, CSS, JavaScript), avec des fonctionnalités d'aide comme par exemple la mise en évidence de la syntaxe, l'aide pour compléter des mots, la signalisation d'erreurs, etc.

Pour l'Atelier et pour la suite du cours STIC I, nous proposons d'adopter Visual studio code, un logiciel open-source développé est maintenu par Microsoft. Le logiciel est disponible pour Windows, Mac et Linux. Pour plus de détails voir la page de ce Wiki :

À la fin de la partie sur l'installation de Visual studio code vous devez avoir :

  1. Visual studio code installé sur votre ordinateur
  2. Modifié les settings pour que l'option Editor: Word wrap soit sur on
  3. Installé l'extension Live Server by Ritwick Dey
  4. Installé l'extension Prettier - Code formatter by Prettier

Code et balises fréquentes

Squelette HTML5

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Titre du document</title>
</head>
<body>
    
</body>
</html>

Titres

<h1>Titre de premier niveaux (Grand)</h1>
<h2>Titre de deuxième niveaux</h2>
<h3>Titre de troisième niveaux</h3>

Paragraphes

<p>Texte du premier paragraphe.</p>
<p>Texte du deuxième paragraphe.</p>

Liens hypertextuels

<a href="http://tecfa.unige.ch">TECFA</a>
<a href="../lien-relatif/page.html">Lien relatif</a>

Listes à puces

Non-ordonnée
<ul>
    <li>Premier item non ordonné</li>
    <li>Deuxième item non ordonné</li>
    <li>Troisième item non ordonné</li>
</ul>
Ordonnée
<ol>
    <li>Premier item ordonné</li>
    <li>Deuxième item ordonné</li>
    <li>Troisième item ordonné</li>
</ol>

Images

Le fichier avec l'image doit posséder un URL. Évitez de pointer à des images qui :

<img src="chemin/au/fichier/image.jpg" alt="Texte alternatif pour screenreaders" title="Description de l'image" />

La balise img est une balise vide qui n'accepte pas de contenu. Pour cette raison, il est de bonne pratique de placer le / de clôture à la fin de la balise.

Workshop HTML5

Fichiers pour le workshop

Lors de l’activité workshop, vous allez travailler sur des fichiers que nous avons préparés pour cette partie de l’atelier. Les fichiers sont disponible dans un dépôt GitHub, un environnement qui sera abordé par la suite dans le cours STIC I. Pour l'instant, il est utilisé seulement pour télécharger les fichiers nécessaires :

  1. Aller à l’adresse https://github.com/MALTT-STIC/minit-html5-essentials
  2. Cliquer sur le bouton vert en haut à droite « Code »
  3. Cliquer sur « Download ZIP »
Capture d'écran du répositoire avec les fichiers pour le Workshop

Il faudra ensuite extraire le contenu du fichier et le mettre sur votre ordinateur. Puis l’ouvrir avec Visual Studio Code. Cliquez d'abord sur :

File > Open folder…

Chercher le dossier que vous avez extrait dans votre gestionnaire des fichiers et sélectionnez-le. Vous devrez obtenir un résultat similaire à l'image suivante :

Capture d'écran du dépôt avec les fichiers pour le Workshop ouverts en Visual studio code

La partie du gestionnaire des fichiers a été agrandie pour l'utilité de la capture d'écran. Pour contrôler l'affichage, vous pouvez utiliser le menu View > Appearance > Zoom in/out

Fonctionnement du Workshop

Lorsque vous ouvrez le fichier du workshop avec Visual Studio Code, vous avez trois dossiers :

  • examples
  • hands-on
  • tasks

Les dossiers Examples et Tasks contiennent des sous-dossiers qui sont en relation. Pour chaque dossier exemple, qui contient des fichiers HTML5 avec du code, il existe un dossier dans les tâches où vous trouverez une « challenge » et la solution au problème. Le dossier « Hands-on », par contre, est vide.

Les trois dossiers sont conçus pour créer un flux de travail de la manière suivante :

  1. Vous regardez le code et le rendu de la page d’exemple
  2. Lorsque vous avez compris l’exemple, vous créez un sous-dossier dans le dossier hands-on et vous essayez vous-même de coder quelque chose de très simple similaire à l’exemple.
    • Il faudra créer les dossiers et les fichiers à partir de zéro pour émuler une situation de départ.
    • Adoptez déjà la bonne pratique de nommer vos dossiers/fichiers en n'utilisant que des lettres minuscules (sans accents) et les symboles - ou _
    • Évitez de faire du copier/coller !
  3. Quand vous pensez maîtriser le sujet, vous pouvez essayer de résoudre la tâche associée.
    1. Ouvrez le fichier qui termine avec xxxx-challenge.html et lisez les instructions dans le commentaire en haut de la page
    2. Essayez de résoudre la tâche
    3. Regardez la solution dans le fichier xxxx-solution.html
  4. Passez à l’exemple suivant

N’hésitez pas à demander de l’aide si vous en avez besoin. De temps en temps, on regardera ensemble quelques exemples ou solutions aux tâches.

Astuces d'édition pour vous faciliter la vie

La prise en main d'un éditeur de texte comporte plusieurs difficultés qui font partie du processus d'apprentissage. Voici quelques astuces qui peuvent vous rendre la vie plus facile (ou moins compliquée au moins !) :

  1. Enregistrez/sauvegardez régulièrement votre travail en utilisant le raccourci clavier CTRL + S. Un fichier dont les modifications ne sont pas encore enregistrées est caractérisé dans l'éditeur par un circle noir à côté de son nom.
    Un circle à côté du nom du fichier signale que les modifications n'ont pas été enregistrées.
  2. Faites très attention au nom des fichiers et à leur extension, notamment le fait que l'extension est séparée du nom par un point (nom-du-fichier.extension). Utilisez que des lettres minuscules, sans espaces ni caractères spéciaux (sauf - ou _) ! Si vous avez besoin de modifier le nom d'un fichier vous avez deux alternatives :
    • Faire clique droit sur le nom du fichier et choisir Rename depuis le menu contextuel
    • Cliquer normalement sur le nom du fichier et utiliser le raccourci clavier F2
  3. Il est utile d'avoir les fichiers d'exemple et le fichier de travail (hands-on ou tâche) en même temps à l'écran. Vous pouvez diviser l'éditeur en colonne avec le menu View > Editor Layout > Two columns. Pour afficher un fichier dans une colonne spécifique, vous pouvez le trainer dans le Group correspondant dans l'éditeur de fichiers, ou si non trainer le nom du fichier dans l'éditeur pour le déplacer dans l'autre colonne.

Créer un squelette de document HTML

Les documents HTML présentent toujours une structure similaire, en commençant par le DOCTYPE et la vision entre head et body. Pour éviter d'écrire à la main ce code répétitif, VSC met à disposition un raccourci pour créer un squelette de code. Pour bénéficier de cette fonctionnalité, suivez les étapes suivantes :

  • Dans le gestionnaire de fichiers, créez un document avec extension .html
  • Ouvrez-le en édition
  • Dans le document vide, saisissez html:5 (sans <...>)
  • Déjà après quelques lettre l'éditeur vous propose les options relatives, donc vous pouvez cliquer sur html:5 même avant
Créer un squelette de document HTML5

L'éditeur va automatiquement insérez dans le code le squelette HTML5 suivant :

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>Document</title>
 8 </head>
 9 <body>
10     
11 </body>
12 </html>

Souvenez-vous de changer l'attribut lang="en" en lang="fr" à ligne 2 si votre document est en français.

Le fichier doit déjà avoir l'extension .html, si non vous n'aurez pas le menu contextuel qui vous propose le choix du squelette !

Introduction aux CSS

Une version plus approfondie de cette partie est disponible dans la page EduTechWiki suivante que vous pouvez consulter pour rappel ou si vous étiez absent-es :

Référez-vous à la section Workshop CSS pour les exercices de consolidation du contenu.

Objectifs

Après la séance consacrée à l’introduction aux CSS vous devrez être familier avec :

  • Le fonctionnement « avancé » d’un navigateur web (parsing et rendering)
  • Le Document Object Model (DOM)
  • La séparation entre contenu (HTML5) et forme (CSS)
  • Les éléments HTML en tant que « boites » avec des coordonnées
  • Les manières d’ajouter des styles à vos pages web (attribut, inline et fichier externe)
  • Les propriétés et valeurs de style les plus fréquentes
  • Les différentes manières de positionner les éléments HTML (propriété CSS position)

Présentation

Les slides de la présentation sont disponibles directement comme pages/application HTML5 en utilisant Reveal.js, une bibliothèques JavaScript que nous allons voir dans le cours STIC:STIC I :

Outils

Nous allons continuer à utiliser/explorer l’éditeur de texte Visual studio code qui propose des fonctionnalités qui facilitent le codage CSS. De plus, nous allons utiliser l’environnement web codepen.io qui permet de montrer des exemples HTML + CSS de manière simple et intuitive. Cet environnement sera utilisé également dans le cours STIC I lors de l’introduction à JavaScript

Ajouter du CSS à vos pages HTML

Avec l'attribut style

<body style="background-color: black; color: white">

Avec la balise style

Dans le <head>...</head> de votre page :

<head>
    <meta charset="UTF-8">
    <title>Style inline</title>
    <style>
        body {
            background-color: black;
            color: white;
        }
    </style>
</head>

Avec un fichiers CSS externe (conseillé)

Lien dans le <head>...</head> de votre page :

<head>
    <meta charset="UTF-8">
    <title>Style with external file</title>
    <link rel="stylesheet" href="style.css" type="text/css" />
</head>

Le fichier doit exister et respecter le bon chemin. Dans ce cas, le fichier s'appelle style.css et doit se trouver au même niveau de la page HTML :

/* This is an external CSS file */


/* There is no need for any header, and it must contain only CSS syntax */

body {
    background-color: black;
    color: white;
}

Balises pour le style

Les propriétés CSS peuvent s'appliquer à toutes les balises HTML5, cependant, par convention, il existe deux balises qui sont souvent utilisées lorsque les éléments ont exclusivement une fonction de style (i.e. pas de relation sémantique avec le contenu). Les deux balises sont :

  • <div>...</div> à utiliser pour des bloques de contenu, par exemple :
    <div>
      <p>Paragraphe à l'intérieur du div</p>
      <p>Autre paragraphe à l'intérieur du div</p>
    </div>
    
  • <span>...</span> à utiliser surtout pour des bouts de texte, par exemple :
    <p>Mon texte avec un <span>mot</span> qui possède un style particulier</p>
    

Sélecteurs et propriétés fréquentes

Trois modalités de sélection

  1. Nom de la balise
    body {
      ...
    }
    
    p {
      ...
    }
    
  2. Nom de la classe, par exemple pour <p class="important">Text</p>
    .important {
      ...
    }
    
  3. ID de l'élément (une seule ID par page), par exemple <h1 id="unique">Titre</h1>
    #unique {
      ...
    }
    

Aligner du contenu (simple)

Pour aligner du contenu simple (e.g. texte ou image à l'intérieur d'un paragraphe ou d'un div), utiliser :

.aligner-au-centre {
  text-align: center;
}

Dans ce cas, la classe doit s'appliquer à l'élément conteneur des éléments qui doivent être alignées au centre. Par exemple :

<div class="aligner-au-centre">
  <p>Mon texte va être aligné au centre</p>
  <p>Mon texte va être aligné au centre</p>
  <img src="logo.png" title="Image va être alignée au centre">
</div>

Colorer (simple)

On peut colorer presque tous les éléments, ici on va voir le background et la couleur du foreground (normalement du texte) :

body {
  background-color: black;
  color: white;
}

On peut utiliser également les valeurs hexadécimaux pour les couleurs (plus avancé) :

body {
  background-color: #000;
  color: #FFF;
}

Ou encore les valeurs RGB :

body {
  background-color: rgb(0, 0, 0);
  color: rgb(255, 255, 255);
}

Ce trois bouts de code produisent exactement le même résultat

Workshop CSS

Le workshop CSS aura la même structure du Workshop HTML5 du matin. Les fichiers comprimés dans un archive .zip se trouvent sous ce lien :

Si vous n’arrivez pas à télécharger directement le fichier .zip, vous pouvez :

  1. Aller à l’adresse https://github.com/MALTT-STIC/minit-css-essentials
  2. Cliquer sur le bouton vert en haut à droite « Clone or download »
  3. Cliquer sur « Download ZIP »

Suivez les mêmes indications que pour le Workshop HTML5 (voir plus haut dans la page)

Exemples CodePen.io

Quelques exemples pour consolider/découvrir d'autres possibilités :

  1. Exemple de base : comment appliquer des propriétés de style à un ou plusieurs éléments du DOM
  2. Sélecteurs CSS - bases : les trois manières les plus fréquentes pour sélectionner un élément à style (tag, class et id)
  3. Sélecteurs et héritage : comment les propriétés de style se propage dans l'arborescence du DOM
  4. Sélecteurs et priorité : que se passe-t-il si un élément a plusieurs sélecteurs/styles en même temps ?
  5. Composition de sélecteurs : les sélecteurs peuvent se combiner pour former des sélecteurs très précis
  6. Tailles de police : pixels, pourcentage, ...
  7. Largeur et hauteur : différence entre dimensions absolues et pourcentages
  8. Block vs. Inline element : la différence entre éléments block et inline, et les dangers de faire confusion...
  9. Margin and padding : combien d'espace prend une boîte?
  10. Positioning : déterminer le positionnement d'un élément avec des coordonnées
  11. Floating : différentes manières pour placer un élément à côté d'un autre, mais voir plutôt une méthode plus récente avec Flexbox
  12. Animation CSS : possibilité d'animer des "boîtes" (technique avancée)

Vous pouvez accèder à l’ensemble des exemples ici :

Éventuellement au programme

S’il reste du temps à la fin de la journée, nous verrons également quelques techniques plus avancées pour faciliter la création de pages web ou les rendre plus « professionnelles ». Nous allons voir :

Introduction au transfert des fichiers

Objectifs

Après la séance consacrée à l’introduction au transfert des fichiers vous devrez être familier avec :

  • Qu’est qu’un serveur web
  • La différence entre fichiers locaux (sur votre ordi) et fichiers distants (sur le serveur)
  • Le logiciel de transfert de fichiers Cyberduck (ou alternative, par exemple FileZilla ou WinSCP)
  • La différence entre HTTP et (S)FTP
  • L’arborescence et les chemins de vos dossiers personnels sur le serveur tecfaetu.unige.ch
    • Votre dossier home (privé)
    • Votre dossier perso/homepage (public)
    • Votre espace travaux (public)
  • Publier des fichiers sur internet et connaître leurs URL (domain + path + nom de fichier + extension)

Outils

Vous allez installer sur votre ordinateur le logiciel de transfert de fichier Cyberduck qui est disponible pour Windows et Mac :

Nous allons configurer ce logiciel pour que vous puissiez transférer des fichiers sur le serveur qui est mis à disposition des étudiants MALTT.

Nous vous encourageons aussi à installer FileZilla, une alternative appréciée par certaines personnes. Aux utilisateurs Windows, on conseille WinSCP, logiciel plus complexe mais plus efficace car il utilise une interface de type "Norton Commander".

Installation de Cyberduck

Pour installer Cyberduck, téléchargez-le depuis le site officiel https://cyberduck.io/.

Attention : il existe une versione payante du logiciel (à travers les stores Apple et Windows), mais la version gratuite suffit dans le contexte du Master !
  1. Choisir le download selon votre système d'exploitation
  2. Suivre les instructions du programme d'installation (normalement il n'y a pas d'options à choisir à ce moment)

À la fin du processus d'installation vous devrez obtenir une résultat similaire au suivant lorsque vous ouvrez le logiciel pour la première fois (caputre d'écran pour la version 5.1 sous Windows) :

Capture d'écran du logiciel Cyberduck (version 5.1 sous Windows)

Création d'un signet

Créer un signet vous permet d'ouvrir facilement une connexion SFTP avec un serveur pour transférer des fichiers. Le signet se "souvient" de :

  1. L'adresse du serveur
  2. Votre login utilisateur
  3. Un chemin spécifique sur le serveur (optionnel)

TECFA met à disposition des étudiants trois espaces sur le serveur tecfaetu.unige.ch (voir plus bas pour les détails). Vous devrez donc créer trois signets différents. De suite les étapes pour en créer un, il faudra répéter l'opération avec les chemins spécifiques de chaque espace (voir plus bas).

Ajouter un nouveau signet

Suivre d'abord ces étapes (voir également image plus bas) :

  1. Assurez-vous d'être dans l'écran des signets
  2. Cliquez sur le + en bas de l'écran pour ajouter un nouveau signet
  3. Choisissez depuis le menu déroulant des protocols l'option SFTP (SSH File Transfer Protocol)
Attention: les serveurs TECFA marchent exclusivement en SFTP, pour des raisons de sécurité le protocole FTP n'est pas activé. L'une des erreurs les plus fréquentes est un mauvais choix du protocole !
Assurez-vous bien de choisir le protocol SFTP (et non pas FTP), si non la connexion ne marche pas !
Configurer le signet avec les données du serveur tecfaetu.unige.ch

Suivre ces étapes (voir également l'image plus bas) :

  1. Choisir un surnom pour le signet, par exemple Espace HOME (tecfaetu). Vous pouvez choisir un autre nom, cela n'affecte pas le fonctionnement.
  2. Insérez le serveur : tecfaetu.unige.ch
  3. Saisissez votre nom d'utilisateur court
  4. Cliquez sur la flèche Plus d'options si une partie de la fenêtre ne s'affiche pas, et ajouter le chemin d'accès de l'espace, par exemple /home/etu29/votre-login-court --> Attention: chemin valable seulement pour la volée concordia, référez vous à la section suivante pour les chemins précis !
  5. Fermez la fenêtre, les informations sont sauvegardées automatiquement
Insérez les informations du serveur tecfaetu.unige.ch pour créer le signet

Vos dossiers personnels sur le serveur

Sur le serveur tecfaetu.unige.ch vous disposez de trois dossiers que vous pouvez/devez utiliser pour vos fichiers :

  1. Un espace home (privé)
  2. Un espace personnel/homepage (public)
  3. Un espace travaux (public)

Espace home

Il s’agit d’un espace privé dont le contenu n’est pas accessible par les navigateurs web. Vous pouvez utiliser cet espace pour vos fichiers personnels. Vous trouverez votre espace home dans ce chemin:

/home/etu29/votre-login-court

Sur un serveur, tous les utilisateurs ont leur nom qui se trouvent à l'intérieur du dossier home. Dans le spécifique du MALTT, faites bien attention à ne pas confondre cet espace avec l'espace personnel où vous allez placer votre homepage (voir point suivant).

Espace personnel/homepage

Cet espace est à votre disposition pour vos fichiers qui peuvent être accédés par le web à travers un URL du style :

C’est dans ce dossier, d’ailleurs, qui doit se trouver votre homepage personnel.

Vous trouverez votre espace personnel dans ce chemin :

/web/perso/maltt/votre-login-court

Espace travaux

Cet espace est dédié à vos rendus « officiels » pour certains de cours du MALTT, notamment les cours STIC I et STIC II.

Le fichiers contenus dans cet espace seront accessible depuis le web à l'adresse :

Vous trouverez votre espace travaux dans ce chemin :

/web/etu-maltt/concordia/votre-login-court

Anatomie d'un lien hypertextuel

Les ressources que vous publiez sur les espaces personnel/homepage et espace-travaux seront disponibles directement sur le web à travers ce qu'on appelle une URL, c'est-à-dire l'adresse de la ressource. C'est important de bien comprendre l'anatomie des adresses pour deux raisons :

  1. Savoir dans quel dossier précis téléverser les fichiers
  2. Savoir récupérer l'URL correspondant

Voici un exemple concret :

Cette adresse pointe vers une simple page HTML5 qui se trouve à un endroit spécifique du serveur tecfaetu.unige.ch. Nous pouvons décomposer l'URL de la manière suivante :

  1. http représente le protocole pour communiquer avec le server. Dans le cas du web, on utilise normalement http ou https pour la communication sécurisée
  2. tecfaetu.unige.ch représente le domaine ou, plus précisement dans ce cas, le sous-domaine de l'URL. tecfaetu est en effet un sous-domaine du domaine principale unige.ch
  3. /minit/test-url/ représente le chemin (ou path en anglais). Il s'agit, dans ce cas, de l'arborescence du serveur web qui permet de trouver le fichier à un endroit précis. Par rapport à la racine du serveur web, nous nous trouvons donc dans un dossier minit qui a à son intérieur un sous-dossier test-url
  4. page-test.html représente le nom du fichier qui se compose également de l'extension .html

La page présente à son intérieur une image SVG du logo HTML5. Cette image possède elle-même son propre URL. Vous pouvez le voir de la manière suivante :

  1. Click droit sur l'image
  2. Ouvrir l'image dans un nouveau onglet

Un nouveau tab du navigateur s'ouvre et affiche l'image du logo en plus grande échelle. Notez bien l'URL dans la barre des adresses du navigateur :

Vous pouvez noter que, par rapport à l'URL de la page, le chemin de cette URL est plus long. En effet, l'image se trouve dans un sous-dossier assets qui possède un sous-dossier images. Le nom du fichier a également une extension différente, car il s'agit dans ce cas d'un fichier SVG.

Ces fichiers existent "physiquement" dans le serveur tecfaetu.unige.ch dans un dossier qui s'appelle /web/minit. Vous pouvez noter, cependant, que dans le chemin de l'URL il n'y a pas de /web/, car le chemin commence directement avec /minit/. En effet, la configuration du serveur tecfaetu a été faite ainsi que le dossier racine du serveur pour les fichiers publiques soit justement le dossier /web/. Donc tout ce qui se trouve à son intérieur est disponible sur le web avec un URL définit par l'arborescence des dossiers contenus dans le dossier /web/.

Vous pouvez "naviguer" directement du web l'arborescence des fichiers à travers l'URL http://tecfaetu.unige.ch/minit/test-url/ car ce dossier ne possède pas de fichier index.html ou welcome.html. En revanche, à l'intérieur du dossier vous trouver également un dossier nommé with-default, si vous cliquez sur ce dossier - ou vous y accédez avec l'url http://tecfaetu.unige.ch/minit/test-url/with-default/ - vous allez voir une page et non pas la liste des fichiers contenus. Ceci s'explique par le fait que le dossier with-default possède un fichier qui s'appelle index.html.

En fonction de la configuration du serveur web tecfaetu.unige.ch, si un dossier possède un fichier qui s'appelle :

  • index.html ou
  • welcome.html

celui-ci est affiché même si l'URL se limite au chemin, sans préciser le nom du fichier. En d'autres termes, les deux URL suivants donnent exactement la même réponse :

Création d’une home page personnelle

Nous terminerons l’atelier avec une activité qui sera ensuite complétée lors du premier exercice du cours STIC I : la création d’une home page personnelle que vous devrez publier sur votre espace personnel (voir plus haut). Cette activité vous permettra d’utiliser tous les éléments abordés pendant l’atelier. L’activité sera également l’occasion pour chercher de l’aide auprès de vos collègues et/ou les responsables de l’atelier.

Ressources complémentaires

Ici de suite une liste de ressources qui peuvent être utiles pour compléter et/ou consolider les acquis.

Fonctionnement web

  • What is the internet ? – vidéo tirée de code.org
  • HTTP et HTML – vidéo tirée de code.org (essayez de trouver à quel moment la vidéo dit quelque chose de différent par rapport à ce que vous avez vu pendant l’atelier)

La série complète « How the internet works » est disponible sous ce lien https://code.org/educate/resources/videos

HTML5

CSS

Validation des pages

Guides de style de codage

Ressources internes à ce Wiki

Dans ce wiki vous pouvez également trouver des pages qui portent sur les sujets traités dans l'atelier. Veuillez néanmoins noter que ces pages sont souvent écrites par des étudiants comme vous, ce qui peut être à la fois un avantage (même niveau de connaissance) et un désavantage (informations incomplètes ou pas claires). Voici quelques références :

Ressources EduTechWiki en anglais

La version anglaise de ce wiki contient plus d'informations sur les mêmes sujets. Voici une liste :

Activités Concordia

Tâche obligatoire

Tâche à effectuer :

  • Créer une page HTML5 avec un message "Vive HTML5", le logo de HTML5, et un paragraphe de votre choix
  • Styliser votre page avec quelques déclarations CSS
  • Publier dans votre espace travaux, dans un sous dossier spécifique
  • Publier le lien de votre page dans le forum Forum test de l'espace Moodle MINIT 2022

Contraintes :

  • Votre fichier doit s'appeler index.html
  • Le logo doit se trouver dans un sous dossier assets/images/
  • Vous devez avoir au moins une déclaration de style dans un fichier .css externe
  • Modifiez les dimensions de l'image dans le code (style css dans l'attribut ou dans le fichier externe, à choix) pour une hauteur de 450px
  • Votre page doit se trouver dans un dossier minit/vive-html5/ dans votre espace travaux sur tecfaetu.unige.ch, ça veut dire que le chemin doit ressembler à /web/etu-maltt/concordia/votre-login-court/ + les dossier que vous créez
  • Ajouter à la fin de la page la date et votre nom

Tâche facultative

Si vous avez terminé la première tâche :

  • Ajouter une deuxième page qui parle de CSS, placez-la où vous voulez
  • Insérez du contenu de votre choix
  • Ajouter un lien hypertextuel à la page sur HTML5 qui pointe vers la page sur CSS
  • Ajoutez un lien hypertextuel à la page sur CSS qui pointe vers la page sur HTML
  • Publiez le tout sur votre espace travaux pour que les changements soient mis à jour