IFT 1005 - Design et développement Web
0. Introduction
Sébastien Roy, Université de Montréal
9 janvier 2023
Remerciements
Merci à Guy Lapalme et Louis Salvail pour avoir partager le
matériel qu'ils ont monté pour IFT1005.
Le matériel de ce cours peut être réutilisé, sujet à la licence CC BY-SA 4.0.
Enseignant(s)
Les auxiliaires seront déterminés très bientôt...
Horaire
| Lundi | 15h30-18h30 | 1140 (AA) | Théorie |
| Mercredi | 11h30-13h30 | 1340 (AA) | Pratique |
Attention: il y a un conflit d'horaire pour la dernière heure le lundi (17h30-18h30). L'horaire pourrait changer.
Fonctionnement
- Le cours se donne en personne (théorie et pratique)
- Cours diffusés en direct et enregistrés
- On utilise Discord
pour communiquer
- Votre ordinateur doit être mis à jour...
- app discord
- éditeur de texte (sublime text, vi, etc...)
- outils réseaux (ssh/scp/...)
Ressources
Pas de livre pour le cours. L'internet suffira...
Les cours seront enregistrés.
Évaluation
| |
| Exercices (x11) | 15 |
| Devoir 1 (HTML+CSS) | 15 |
| Devoir 2 (SVG) | 15 |
| Devoir 3 (DOM+AJAX) | 25 |
| Intra (20 février) | 15 |
| Final (24 avril) | 15 |
Évaluation
À noter...
- Exercices à faire seul(e)
- Devoirs en équipe de 2
- Vous pouvez être questionné sur ce que vous avez remis
Faites vos travauxvous-même!
Google et StackOverflow
L'internet peut vous aider....
...mais peut aussi vous nuire!
C'est quoi ton langage préféré? ...Stack Overflow
Le matériel
Windows
- Pas très network friendly
- Pas d'éditeur de texte simple
- Linux caché à l'intérieur... (WSL)
- ...
Le matériel
Apple
- Proche de Linux
- Peu d'éditeurs texte simple
- Terminal peu utilisé, mais pratique
- Gestion des logiciels un casse-tête
- ...
Le matériel
Linux
- Ultime environnement de développement
-
- Très network friendly
- Plusieurs éditeurs de texte simple
- Intimidant, mais incontournable
Les logiciels
- Pas d'EDI
- Fichiers bruts, édités avec un éditeur de texte
- vim
- atom
- sublime text
- nano
- ...
- Gestion/manipulation de fichiers, sur Linux
Aucun autre logiciel! (sauf peut être wireshark, ...)
Au programme...
- 0 - Introduction
- 1 - Internet
- 2 - Web
- 3 - XML
- 4 - Structurer l'information
- 5 - HTML
- 6 - CSS
- 7 - SVG
- 8 - Design de site web
- 9 - DOM (+ javascript)
- 10 - XML asynchrone (+ javascript)
0. Introduction
Informations générales sur le cours.
- Plan de cours
- Ressources et références
- Matériel et logiciel
- Évaluation
Exercice 0 : Compte DIRO, ssh, ma première page web au DIRO!
1. Internet
Qu'est-ce que l'internet? Ce n'est pas parce qu'on s'en sert tous les jours qu'on sait comment ça fonctionne...
- Réseau
- Ethernet et OSI
- Routage et sécurité
- Protocoles de l'internet
Exercice 1 : traceroute, web devtools,
2. Web
Qu'est-ce que le World Wide Web?
- Un peu d'histoire
- Les URL
- Protocole HTTP
- Navigateur
- Serveur Web
- Architecture
Exercice 2 : Concours d'URL
3. XML
Structurer l'information par le balisage
- Balise
- Historique
- XML
- Sémantique
- Éléments et attributs
- Validation
Exercice 3 : On cuisine avec Sébastien
4. HTML
Pages web avec HyperText Markup Language
- Historique
- Syntaxe HTML
- Balises de base
- Structure d'une page web
- Contenu vs présentation
Exercice 4 : La publicité de M. Krab
5. CSS
Présentation avec Cascading Style Sheets
- Historique
- Style
- Syntaxe CSS
- Classes et Id
- Sélecteurs
- Modèle d'affichage
- Mise en page
- Contenu vs présentation
Exercice 5 : La vengeance de Plankton (+animation css)
6. Structurer l'information
Sémantique, organisation, présentation...
- annotation (SGML)
- données (JSON, YAML, TOML)
- web (HTML)
- graphisme (SVG)
- mathématiques (mathml)
Exercice 6 : (à déterminer)
7. SVG
Le graphisme avec Scalable Vector Graphics
- Historique
- Concept de graphisme vectorisé
- Formes de base
- Tracé (path)
- transformations
- Animations
- Lien avec CSS
Exercice 7 : Patience, ça charge
8. Design de sites web
- Concept de site web
- Création, scénarisation
- Architecture
- Accessibilité
- RGPD
- Concepts d'interface
- Ergonomie
Exercice 8 : Navigation de site web
9. DOM et Javascript
Le DOM (Document Object Model) et sa manipulation
- Concept du DOM
- Pages web dynamiques
- Intro à Javascript
- Javascript dans un navigateur web
- Applications du DOM
Exercice 9 : Roche, papiers, ciseaux!
10. Javascript et XML asynchrone
- Historique
- Pages web dynamiques
- AJAX
- Avantages et limitations
Exercice 10 : À déterminer
En pratique....
Les travaux ne sont pas remis sur Studium.
Vous avez un espace web au DIRO, c'est ce qu'on utilisera.
- Compte au DIRO!
- Linux de survie
- Editeur de texte
- Manipulation de fichiers