Technologies web 1
Informations générales
L'objectif de ce cours est de donner aux étudiant·e·s les connaissances et les méthodes informatiques spécifiques à la réalisation de pages web simples (statiques et non interactives), en particulier les langages HTML5 et CSS. Une attention particulière sera donnée à l'ergonomie, l'accessibilité, et l'utilisation des standards du web tels qu'ils sont définis par le W3C.
Cette unité comprend 1h de CM (le lundi de 9h30 à 10h30, amphi 500) et 4h de TP (2×2h) par semaine pendant 6 semaines.
Enseignant·es
- Alexandre Niveau (CM, TP)
- Anaëlle Baledent (TP)
- Anne Garnavault-Rémy (TP)
- Françoise Lambert (TP)
- Gaétan Richard (TP)
- Jean-Marc Lecarpentier (TP)
- Judith Jeyafreeda Andrew (TP)
- Julien Courtiel (TP)
- Théo Grente (TP)
- Youssef Chahir (TP)
Contrôle des connaissances
Le contrôle des connaissances prendra plusieurs formes :
- évaluation du code de certains exercices faits en TP, compte-rendus de TP
- DM : conception d'un mini-site (sujet libre sur un thème imposé)
- contrôle terminal : épreuve écrite d'une heure (en première et seconde session) — le sujet de l'année dernière est récupérable en bas de la page
Semaine 1
lundi 12 octobre
lundi 12 octobre
Web et HTML
Notes de cours
- Le web, c’est quoi et comment ça marche ?
- Rappels sur Internet
- Le World Wide Web : définition et principes de base
- Les constituants principaux du web : HTTP, URL, HTML
- HTML : la base du web
- Balisage et structure de documents
- Les règles de HTML
- Notions d’hypertexte
- Notions d’accessibilité
- Les éléments de structuration d’HTML5
Travaux pratiques
Semaine 2
lundi 19 octobre
lundi 19 octobre
Modifier le style des pages : CSS
Notes de cours
- Introduction à CSS
- Propriétés de style
- Règles CSS
- Intérêt des feuilles de style
- Cascade et héritage
- Classes et identifiants
- Groupes et combinaison de sélecteurs
Travaux pratiques
Semaine 3
lundi 2 novembre
lundi 2 novembre
Modèle de boîte CSS, propriétés et sélecteurs
Notes de cours
- Modèle de boîte CSS3
- Visual formatting model de HTML/CSS
- Propriétés de base des boîtes
- Quelques propriétés CSS3
- Alignement de contenu
Travaux pratiques
Semaine 4
lundi 9 novembre
lundi 9 novembre
Images sur le web et bonnes pratiques CSS
Notes de cours
- Bases de la mise en page avec CSS
- Propriété
display - Positionnement absolu et relatif
- Mise en page classique et moderne
- Propriété
- Images sur le web (HTML/CSS)
- Formats d’image pour le web
- L’élément
imget quelques-uns de ses attributs - Propriétés de base des backgrounds en CSS
- Remplacement d’images
- Précisions sur les sélecteurs et bonnes pratiques CSS
- Utiliser divers sélecteurs ensemble
- Utiliser identifiants et classes
- Spécificité des sélecteurs
- Structuration des fichiers CSS
Travaux pratiques
Semaine 5
lundi 16 novembre
lundi 16 novembre
Sélecteurs avancés — Polices sur le web
Notes de cours
- Sélecteurs avancés
- Sélecteurs de descendance et d’adjacence
- Pseudo-classes
- Pseudo-éléments
- Interactivité avec CSS : topo sur les menus déroulants
- Bases de l’utilisation de polices sur le web
- Polices du système et font stack
- Utiliser n’importe quelle police avec
@font-face
Travaux pratiques
Semaine 6
lundi 23 novembre
lundi 23 novembre
Design adaptatif — Transitions et transformations CSS
Notes de cours
- Outils CSS de base pour le design adaptatif
- media queries
- viewport
- Propriétés utiles pour l’adaptatif
- Unités de distance dynamiques
- Transitions, transformations, animations
- Animer les transitions entre valeurs d’une propriété
- Transformations
- Un mot sur les animations non transitionnelles