Thématiques
Participants 10
Durée 2h30
Public Adultes dès 15 ans
Prérequis Maîtrise de base de l’ordinateur
Matériel
Présentation du lieu, de(s) animateur(s). Demander aux participants ce qu’ils connaissent du développement web, de l’architecture des sites. Demander leurs attentes, notamment pour de futurs ateliers.
Présenter l’objectif de l’atelier : créer une page web personnelle. Montrer, par exemple, chalier.fr.
À la base (Web 1.0) les pages web sont des objets très simples. Il s’agit uniquement de texte. Sur le bureau, créer un dossier « www ». Dedans, créer un nouveau document texte nommé « page.txt ». À l’aide du Bloc-notes, écrire quelques mots à l’intérieur. Ouvrir le navigateur, et dans la barre d’adresse, écrire « file:///C:/ » puis cliquer sur « Users », l’utilisateur en question, puis « Desktop », « www », et enfin « page.txt ». Le contenu du fichier apparaît alors.
Un site internet, ce n’est vraiment qu’un tas de dossiers et de fichiers, auxquels on accède à distance néanmoins.
Le problème avec notre fichier texte, ce que ce n’est pas très pratique pour en structurer le contenu, et donc pour l’afficher joliment sur n’importe quel ordinateur. On utilise donc un langage particulier, plus expressif que du texte tout simple : le HTML. Renommer le fichier « page.txt » en « page.html ». À l’aide du Bloc-notes, ouvrir le fichier et y inscrire quelque chose comme :
<h1>Bonjour</h1>
<p>Comment allez-vous ?</p>Afficher la page dans le navigateur, et constater le résultat. Les deux phrases sont affichées différemment : l’une en titre, l’autre comme du texte normal. C’est le rôle du HTML, utiliser des balises pour marquer le texte. Il s’agit de dire au navigateur comment il doit afficher cette partie du texte.
Avant d’aller plus loin, nous allons devoir changer d’outil. En théorie, on peut tout faire avec le Bloc-notes, mais ce n’est clairement pas le plus pratique. Ouvrir Visual Studio Code, et ouvrir le dossier « www ».
Présenter les balises h2, h3, b, i, u, a, ul, ol et li.
Demander aux participants de rédiger le contenu de leur page de présentation. Donner comme indications : mettre son nom en titre h1, rédiger un petit paragraphe de présentation, rajouter quelques liens vers leurs réseaux sociaux, etc.
Les participants sans inspiration peuvent prendre du texte de Lorem Ipsum, et faire pointer quelques liens vers example.org.
Se rendre sur Avataaars Generator et créer un avatar. Respecter quelques contraintes :
Télécharger le fichier au format SVG. L’inclure dans la page à l’aide de la basile img.
Entourer le code actuel par la balise body. Ajouter une balise head au-dessus. Entourer le tout de la balise html. Rajouter quelques balises dans head :
<meta charset="utf8">
<meta name="viewport" content="width=device-width">
<title>Prénom Nom</title>Créer un nouveau fichier, dans le dossier « www », nommé « style.css ». Rajouter la balise dans head :
<link rel="stylesheet" href="style.css">Dans le fichier CSS, choisir une couleur de fond pour le body, une couleur d’écriture pour le texte, potentiellement aussi pour les liens. C’est l’occasion d’introduire la façon dont est représentée une couleur en informatique. Pour s’aider, on peut par exemple utiliser le Sélecteur de couleur de Google.
Arrondir la photo, et rajouter une couleur de fond.
Entourer le code par une balise div avec un identifiant comme « contenu ». Ajouter une largeur maximale au #contenu, avec des marges automatiques, afin que le texte occupe une colonne centrale.
Se rendre sur Google Fonts et choisir une police. Sélectionner une police, cocher les styles « Regular », « Regular Italic », « Bold » et « Bold Italic », et copier-coller les balises à inclure dans head, puis modifier le fichier CSS pour utiliser cette police.
Créer une animation en CSS pour changer une couleur de fond à l’aide du mot-clé @keyframes, et l’utiliser pour changer la couleur de fond de l’image à l’aide de l’attribut animation.
Nous allons maintenant rendre notre page un peu plus dynamique avec un petit effet : faire en sorte que les yeux de l’avatar suivent du regard la souris. En soit, ce n’est pas nécessaire, et c’est un peu compliqué. C’est surtout pour vous montrer que c’est possible, sans que vous puissiez le refaire directement chez vous.
Création du script. Créer un fichier « script.js » dans le même dossier « www ». Ajouter la balise script correspondante. Dans le script, ajouter une ligne avec console.log. Dans le navigateur, ouvrir la console, et rafraîchir la page. Le contenu s’affiche.
Position du curseur. Javascript permet de manipuler tous les éléments HTML, en temps réel, en fonction des actions de l’utilisateur. Première chose que nous pouvons faire, c’est voir où est la souris de l’utilisateur. Ajouter un EventListener sur l’événement mousemove et afficher les coordonnées dans la console. Tester et comprendre comment fonctionne les coordonnées de la souris.
Contrôle des yeux. Pour aller plus loin, nous avons besoin de contrôler chaque œil indépendamment. Pour l’instant, ce n’est pas possible : notre avatar est tout entier caché dans la balise img. Mais il se trouve que l’avatar est un fichier au format SVG. C’est un format d’image vectoriel, qui se trouve être également un langage de texte, avec des balises : tout comme le HTML ! On peut substituer le contenu du fichier SVG à la balise img. Ne pas oublier de mettre à jour la règle CSS. Identifier les balises des yeux, qui sont deux balises circle avec un identifiant « Eye ». Changer les identifiants pour « Eye1 » et « Eye2 ». Montrer que l’on peut désormais contrôler le style de chaque œil indépendamment. Par exemple, régler l’attribut fill à red pour un œil et blue pour l’autre.
Afficher les positions d’un œil. Nous pouvons également afficher la position des yeux à l’écran. Pour cela, récupérer les objets à l’aide de getElementById et la position avec getBoundingClientRect. Enregistrer la position dans deux variables, positionX et positionY, qui enregistrent la position du centre des yeux. Commencer par ne faire cela que pour un seul œil.
Calcul de l’angle. Pour faire notre effet, nous allons avoir besoin de géométrie. Il faut pouvoir calculer l’angle de la droite reliant le centre de l’œil et le curseur de la souris. Faire un schéma sur un tableau, sur Paint ou sur Excalidraw. L’angle est donc défini comme l’arc tangente du rapport entre le décalage en Y et le décalage en X entre le curseur et le centre de l’œil.
Déplacement de l’œil. Maintenant que nous connaissons l’angle, nous pouvons calculer le déplacement de l’œil. Il s’agit d’un cercle, le déplacement en X est le cosinus de l’angle, multiplié par le rayon. Le déplacement en Y est le sinus, multiplié par le rayon. Pour cela, on peut modifier la propriété de style transform avec la transformation translate. Un rayon de 5 pixels fait l’affaire.
Les deux yeux. Copier-coller le code du premier œil, et modifier pour l’adapter au deuxième œil.
Présenter le site GitHub, et distribuer une fiche expliquant comment créer un compte, un dépôt, y téléverser ses fichiers, et activer la version publique. Faire la démonstration de la création d’un dépôt et de l’activation de l’espace « Pages ». Les participants pourront faire cela chez eux à l’aide de la fiche.