Technologies web 1

Licence Informatique/Maths 1e année

Alexandre NiveauJean-Marc Lecarpentier

Enseignement des technologies du Web

 

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 mercredi de 8h15 à 9h15 en amphi 500) et 4h de TP (2×2h) par semaine pendant 6 semaines.

Enseignants

  • Alexandre Niveau (CM, TP)
  • Anne Garnavault-Rémy (TP)
  • Françoise Lambert (TP)
  • Gaétan Richard (TP)
  • Jean-Marc Lecarpentier (TP)
  • Maroua Bouzid (TP)
  • Sophie Schüpp (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)

Sujet du devoir et détail de l'évaluation pour le module

Semaine 1
mercredi 11 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
mercredi 17 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
mercredi 24 octobre

Mise en page CSS et images HTML/CSS

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
  • Bases de la mise en page avec CSS
    • Propriété display
    • Flottants, clearer
    • Présentation en zones
    • Positionnement absolu et relatif
  • Images sur le web (HTML/CSS)
    • Formats d’image pour le web
    • L’élément img et quelques-uns de ses attributs
    • Propriétés de base des backgrounds en CSS
    • Remplacement d’images

Travaux pratiques

Semaine 4
mercredi 8 novembre

Design adaptatif & ergonomie

Notes de cours

Travaux pratiques

Semaine 5
mercredi 15 novembre

CSS avancées

Notes de cours

Travaux pratiques

Semaine 6
mercredi 22 novembre

Formulaires HTML, transitions et transformations CSS

Notes de cours

  • Pages web dynamiques
    • Limites des pages statiques
    • Utilisation de langages pour générer dynamiquement le HTML
    • Transmission de données du client au serveur
  • Formulaires HTML
    • Fonctionnement général des formulaires HTML
    • Détails sur des widgets particuliers (boutons radio, select…)
    • Style et validation côté client
  • Transitions, transformations, animations
    • Animer les transitions entre valeurs d’une propriété
    • Transformations
    • Un mot sur les animations non transitionnelles

Travaux pratiques