Cours 1 | Bienvenue¶

Introduction¶

Présentations¶

Ressources collégiales¶

Suite Microsoft 365 : Word, Office, Excel, PowerPoint
Teams : Cours, notes de cours, clavardage
Courriel
Wifi
ColNET : Bulletin, horaire, carte étudiante, messagerie médiévale.

Plan de cours¶

D'abord, un peu d'histoire¶

Ligne du temps ludique
La fabuleuse histoire de l'Internet

Le développement Web, c’est quoi ?¶

Le développement Web, c’est tout ce qu’on peut créer pour le Web : des sites, 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 :

Site vitrine : https://tim-montmorency.com/
Blogue / Forum : https://www.reddit.com/
Commerce en ligne : https://www.simons.ca/
Réseaux sociaux : https://www.instagram.com/
Messagerie : https://discord.com/
et cætera

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

Tableaux de bord : Domotique

Automatisation : IFTTT ou Zapier

Jeux vidéos : itch.io

Environnement interactif : Réservation - Place des Arts

Outils collaboratifs : Wooclap ou Figma

Visualisation de données : World Economic Forum

À propos des applications Web

De plus en plus d’organisations développent des applications Web pour remplacer les logiciels installés localement.
Par exemple, Microsoft Word en ligne peut remplacer la version traditionnelle installée sur un ordinateur.

Ces outils fonctionnent sur tous les types d’appareils et ne nécessitent aucune installation, juste un navigateur. La connexion à Internet n'est même pas obligatoire dans certains cas.

Comment ça marche ?¶

C'est d'abord du code. HTML.

Code source d'une page.

-> Démonstration : Analyse rapide de sites Web existants

Présentation de l'inspecteur du navigateur (Chrome DevTools)
- Inspection du code source HTML et CSS
Analyse pratique de quelques sites existants :
- Structure HTML
- Application des styles CSS
- Observation des principes UX/UI en pratique
Notion rapide de responsive design (adaptation mobile/tablette)

Un Web à plusieurs niveaux¶

Web surfacique

C’est la partie d’Internet accessible à tous via les moteurs de recherche classiques comme , le site du collège ou .

Web profond

Partie du Web qui n’est pas accessible aux internautes au moyen des moteurs de recherche usuels¹. Cela inclut les bases de données, les intranets ou les contenus protégés par mot de passe (ex. : Netflix, Gmail, AccèsD). Cette portion représente la majorité du Web. Certains estiment qu’elle en constitue jusqu’à 95%² du Web !

Web caché

Partie du Web invisible à laquelle on peut accéder en utilisant des navigateurs Web spéciaux et des logiciels permettant le cryptage des communications³.

Outils¶

Éditeur de code : VS Code.
Navigateurs : Chrome, Firefox. + Devtool

Shortcut (ex: hard refresh / ouvrir un tab fermé) Devtool

Plateformes collaboratives (GitHub, Teams, Discord).

Métiers du Web¶

Métier	Description
Développeur Frontend	Interface utilisateur (HTML/CSS/JS)
Développeur Backend	Serveurs, bases de données, API, sécurité
Intégrateur Web	Maquettes graphiques → code HTML/CSS
Designer UX/UI	Expérience utilisateur et interface graphique
Gestionnaire de projet Web	Coordination des équipes et ressources

Autres métiers connexes (SEO, rédaction Web, analyse Web).

Expérience utilisateur : bonnes pratiques¶

Définition : Qu'est-ce que l'UX (User Experience) ?
Principes fondamentaux de l'ergonomie Web :
- Lisibilité
- Accessibilité
- Cohérence
- Efficacité
Critères de Jakob Nielsen (heuristiques d’ergonomie)
Exemples pratiques (bons et mauvais exemples UX)

Composantes d’une page Web et interactivité¶

Structure de base :
- En-tête (<header>)
- Menu (<nav>)
- Contenu principal (<main>, <section>)
- Barre latérale (<aside>)
- Pied de page (<footer>)
Concepts d’interactivité simples :
- Formulaires
- Boutons et liens
- Animations basiques
Introduction au DOM (Document Object Model)
- Structure hiérarchique (relation parent-enfant)

Récapitulatif¶

Lexique :

HTML
UX
UI
Front-End