Aller au contenu

Cours 1 | Bienvenue

Introduction

Présentations et plan de cours

Ressources du collège

Outils étudiants

Soutien et aide

Le développement Web

Le développement Web c’est ce qui permet de créer des sites Web, des outils ou des applications accessibles depuis un navigateur, peu importe l’appareil.

La notion plus classique du Web est composée des éléments suivants :

Toutefois, le développement Web permet aussi de concevoir une surprenante panoplie d'usage. En voici quelques exemples :

Tableaux de bord (ex. : Domotique)

Automatisation (ex. : IFTTT / Zapier)

Jeux vidéos (ex. : itch.io)

Environnement interactif (ex. : Réservation - Place des Arts)

Outils collaboratifs (ex. : Wooclap / Figma)

Visualisation de données (ex. : World Economic Forum)

Assistants virtuels : (ex. : ChatGPT)

Comment ça marche ?

Le développement Web est généralement divisé en deux grandes parties : le front-end (ce que voit l’utilisateur) et le back-end (la logique côté serveur).

Voici les trois langages principaux utilisés pour développer la partie front-end :

  • HTML : définit la structure et le contenu des pages (ex. : titres, paragraphes, images)
  • CSS : gère la présentation visuelle (ex. : couleurs, mise en page, typographie)
  • JavaScript : rend la page interactive et dynamique (ex. : menus déroulants, formulaires réactifs, animations)

Voici un exemple simple de code HTML :

<!DOCTYPE html>
<html>
  <head>
    <title>Web 1</title>
  </head>
  <body>
    <h1>Bienvenue en Web 1</h1>
    <p>Ok bye !</p>
  </body>
</html>

Bon qu'est-ce que je regarde ?

  1. J’observe des mots entourés des caractères « plus petit que » (<) et « plus grand que » (>). C'est ce qu'on appelle des balises HTML.
  2. J’observe aussi une certaine indentation (des espaces au début des lignes). C'est fait pour rendre le code plus lisible.
  3. Je reconnais du contenu textuel : « Web 1 », « Bienvenue en Web 1 » et « Ok bye ! ».

Outils

Éditeur de code

Techniquement, on peut programmer un site Web complet avec Notepad, mais ce serait particulièrement innéficace.

Un peu comme Microsoft Word sert à la rédaction de texte, Visual Studio Code (aussi appelé VSCode) est conçu spécifiquement pour programmer dans différents langages de programmation. C'est d'ailleurs l'application qui sera utilisée dans le cadre du cours et de la technique.

Tant qu'à y être, créons notre première page Web !

  1. Ouvrir l'application VSCode
  2. Créer une nouvelle page et nommez la index.html
  3. Sauvegarder sur le bureau
  4. Dans la page, inscrire le caractère ! (point d'exclamation) puis appuyer sur Enter
  5. Entre les balises <body> et </body>, inscrire n'importe quoi.
  6. Sauvegarder
  7. Sur le bureau de votre ordinateur, double-cliquer sur le fichier index.html.

Les navigateurs principaux : Chrome, Safari, Edge et Firefox

StatCounter

Inspecteur

Onglet élément de l'inspecteur

L'inspecteur (ou DevTools) est un outil qui sert à analyser et déboguer une page Web.

On y accède soit en appuyant sur la touche F12, soit en faisant un clic droit et en choisissant Inspecter.

Essayons ensemble l'inspecteur 🕵

  1. Ouvrir la page Web créée plus tôt
  2. Ouvrir l'inspecteur et observer le contenu de l'onglet « Éléments »
  3. Trouver le moyen de changer le contenu du HTML

🧑‍🏫 Démo du prof

Essayons l'inspecteur sur le site https://www.banq.qc.ca/ et observez bien ce qu'on peut réaliser avec !

Raccourcis

  • Naviguer une page Web à l’aide du clavier : Tab
  • Rouvrir un onglet fermé : Ctrl+Shift+T
  • Rechargement forcé (hard reload) sans utiliser le cache (mémoire temporaire du navigateur) : Ctrl+Shift+R

Vocabulaire et concepts Web

Open source

Application dont la programmation est accessible au public. Le code peut être consulté, modifié et redistribué. L'inverse d'une application propriétaire.

Responsive

Mise en page qui s’adapte à la taille de l’écran

Terme Description
Header En-tête d’une page Web, généralement fixe, contenant le logo, le menu de navigation et parfois un bouton de recherche.
Footer Pied de page contenant des liens secondaires, des infos légales, les coordonnées ou les réseaux sociaux.
Navigation Ensemble de liens qui permet de se déplacer entre les différentes pages ou sections d’un site.
Accordéon Composant qui permet d’afficher ou masquer du contenu en cliquant sur un titre ou une section.
Breadcrumb (fil d’Ariane) Chemin de navigation qui montre à l’utilisateur sa position dans la structure du site (ex. : Accueil > Cours > Chapitre 1).
Carte (Card) Bloc visuel regroupant une image, un titre, un résumé et une action (souvent cliquable). Très utilisé pour des listes de contenus.
Carousel / Slideshow Composant qui affiche plusieurs éléments (souvent des images) un à un, avec un défilement automatique ou manuel.
CTA (Call to Action) Élément (souvent un bouton) incitant clairement l’utilisateur à faire une action précise (ex. : "S’inscrire", "Acheter").
Hero Grande bannière en haut d’une page, souvent visuelle, servant à capter l’attention avec un message fort et un CTA.
Modal / Popup / Lightbox Fenêtre flottante qui s’ouvre au-dessus du contenu, pour afficher des informations, des formulaires ou des images en grand (zoom galerie).
Onglets (Tabs) Composant permettant de naviguer entre plusieurs sections de contenu sans quitter la page.
Placeholders Texte gris dans un champ de formulaire qui donne un exemple de ce que l’utilisateur doit écrire.
Toasts Petites notifications temporaires qui apparaissent à l’écran pour informer (ex. : "Message envoyé").
Tooltips / Popovers Bulles d’information contextuelle qui apparaissent lorsqu’on survole ou clique sur un élément.

Expérience utilisateur

L’expérience utilisateur (UX) c'est ce qui désigne la qualité de l’interaction d'une personne avec un produit ou un système.

La qualité se mesure en fonction de son efficacité, de son efficience et de la satisfaction1.

Efficacité et efficience, c'est pas la même chose ?

Non 😜

  • Efficacité : Est-ce que l’utilisateur atteint son objectif ?
  • Efficience : Combien d’efforts ou de temps ça lui prend pour y arriver ?

Prenons l'exemple d'arroser un jardin avec un toyeau d'arrosage ou avec un verre d'eau. Les deux sont efficace, mais il y en a un plus efficient que l'autre.

10 principes UX

Voici la liste des 10 heuristiques d’utilisabilité de Jakob Nielsen.

1️⃣ Visibilité de l’état du système

Le système doit toujours informer l’utilisateur de ce qui se passe.

2️⃣ Correspondance entre le système et le monde réel

L’interface doit utiliser un langage et des concepts familiers aux utilisateurs.

3️⃣ Contrôle et liberté de l’utilisateur

Les utilisateurs doivent pouvoir annuler ou corriger facilement leurs actions.

4️⃣ Cohérence et standards

Le design doit suivre des conventions reconnues afin que les utilisateurs n’aient pas à se poser de question ou à apprendre de nouveaux concepts.

5️⃣ Prévention des erreurs

Le design doit minimiser les risques d’erreurs en guidant correctement l’utilisateur.

6️⃣ Reconnaissance plutôt que rappel

Les interfaces doivent minimiser la mémoire nécessaire de l'utilisateur. Prioriser la reconnaissance plutôt que le rappel.

❌ Quelle est la capitale du Japon ?

✅ Est-ce que Tokyo est la capitale du Japon ?

7️⃣ Flexibilité et efficacité

Le système devrait convenir autant aux débutants qu’aux utilisateurs expérimentés.

L'exemple parfait ici est l'existence de l'inspecteur dans le navigateur.

8️⃣ Design esthétique et minimaliste

L’interface ne doit pas être surchargée. Chaque élément visuel ou textuel doit servir un objectif clair.

Less is more

9️⃣ Aider à reconnaître, diagnostiquer et corriger les erreurs

Les messages d’erreur doivent être compréhensibles, indiquer la nature du problème et suggérer une solution.

🔟 Aide et documentation

Même si le système est simple, une aide doit être accessible pour les utilisateurs qui en ont besoin.

  1. The Definition of User Experience (UX) ↩