Master 1 - mention Audiovisuel, Médias Interactifs Numériques, et Jeux - parcours Direction de Projets Numériques

Enseignements au programme

Chaque cours ci-dessous aborde une facette complémentaire de la conception numérique : gestion de projet, outils du web, production et réalisation.
Vous pouvez les parcourir dans l’ordre proposé ou selon vos besoins du moment.

Voir tous les enseignements
ENSEIGNEMENT AU PROGRAMME

Usages des techniques numériques
- Maîtriser les technologies du web -

INTERMÉDIAIRE - 18h

Description

Ce module propose une exploration concrète des technologies fondamentales du web et de leur articulation dans la production de contenus numériques. À travers une approche progressive – du code HTML/CSS jusqu’à l’interface graphique avec Elementor – les étudiant·es apprennent à comprendre, structurer et styliser des pages web, tout en découvrant les logiques de gestion dynamique de contenu via un CMS.
Ils expérimentent la mise en ligne, le paramétrage, et la personnalisation de sites à l’aide de WordPress, dans une perspective de production autonome et professionnelle.

Objectifs pédagogiques

  • Comprendre la structure d’une page web : sémantique HTML, hiérarchisation de l’information, composants de base.
  • Appliquer les principes de mise en page avec CSS : grilles flexibles (Flexbox), responsivité, cohérence visuelle.
  • Réaliser une landing page fonctionnelle à partir d’une maquette de référence, en mobilisant les bonnes pratiques de lisibilité et d’accessibilité.
  • Installer, paramétrer et sécuriser un CMS WordPress dans une logique de site évolutif et maintenable.
  • Concevoir des interfaces graphiques responsives sans programmation grâce au constructeur Elementor, en appliquant les bases de l’UX/UI.
  • Identifier les paramètres clés d’un déploiement web professionnel : performances, légalité, arborescence, modularité.

Sommaire

  1. Panorama des technologies du web → comprendre l’écosystème, les langages et les logiques qui structurent le fonctionnement du web.
  2. Structure et éléments d’une page web → identifier les composants essentiels du HTML et organiser une page de manière cohérente.
  3. CSS : présentation et mise en forme d’une page web → appliquer les propriétés fondamentales pour structurer, styliser et mettre en page un contenu.
  4. Atelier 1 – HTML/CSS → mettre en pratique la création d’une page web à partir d’une structure HTML et d’une mise en forme CSS.
  5. Paramétrage d’un CMS – WordPress → installer, configurer et personnaliser un site en maîtrisant les réglages clés d’un CMS.
  6. Conception d’interface avec Elementor → construire une mise en page complète en utilisant un constructeur visuel et ses composants.
  7. Atelier 2 – WordPress & Elementor → produire une page aboutie en combinant structure, design et adaptation responsive dans un environnement WordPress.

1. Panorama des technologies du web

1. Introduction

  1. Comprendre l’écosystème technique du web
  2. Objectif : acquérir une culture générale pour dialoguer avec les équipes techniques
  3. Notions clés : architecture, langages, CMS, base de données, hébergement

2. Architecture client–serveur

  1. Principe général
  2. Composants clés :
    – Client
    – Serveur web
    – Serveur applicatif
    – Base de données
    – Protocoles réseau
  3. Schéma conceptuel
  4. Modèles d’architecture

3. Langages du front-end

  1. Les trois fondations :
    – HTML : structure
    – CSS : apparence
    – JavaScript : interactivité
  2. Outils modernes
    – Responsive design
    – Frameworks CSS
    – Préprocesseurs CSS
    – Bibliothèques JS 
  3. Évolutions historiques 
  4. Exemples concrets
  5. Bonnes pratiques

4. Frameworks front-end modernes

  1. Principe
  2. Grands frameworks
  3. Tendances 2025

5. Langages du back-end

  1. Rôles du back-end
  2. Principaux langage
  3. Frameworks majeurs
  4. Frameworks vs CMS
  5. Tendances
  6. Exemple complet 

6. Bases de données & SQL

  1. Rôles clés
  2. Types de bases :
    – Relationnelles
    –     NoSQL
  3. SQL
  4. Cycle complet des données
  5. Évolutions récentes 

7. CMS (Content Management Systems)

  1. Définition et principe
  2. Fonctionnement d’un CMS
  3. Les CMS les plus utilisés en 2025
  4. Avantages
  5. Limites

8. Hébergement, DNS et mise en ligne

  1. Mise en ligne : principes
  2. Types d’hébergement
  3. Hébergeurs courants
  4. DNS
  5. Étapes de mise en ligne :
    – Hébergeur
    – Domaine
    – FTP
    – Base de données
    – DNS
    – Tests
    – SSL
    – Maintenance
  6. Maintenance et sécurité
  7. Hébergement écologique
Télécharger le cours

2. Structure et éléments d’une page web

1. Introduction

2. Anatomie d’une page web

  1. Les trois couches fondamentales :
    – HTML : contenu
    – CSS : présentation
    – JavaScript : interactions
  2. Le modèle minimal universel
    <!DOCTYPE html>
    <head> : métadonnées (SEO, encodage, viewport…)
    <body> : contenu visible
  3. Structure complète d’un site en HTML
    Balises sémantiques avec tableau détaillé

3. Balises sémantiques & structuration du contenu

  1. Importance de la sémantique
  2. Hiérarchie des titres
  3. Bonnes pratiques

4. Médias : images, son, vidéo et intégrations

  1. Images
  2. Vidéo & audio
  3. Intégrations externes

5. Formulaires & interactions de base

  1. Structure d’un formulaire complet
  2. Validation & accessibilité

6. Analyse & audit d’une page web existante

  1. Objectif
  2. Exemple : page GitLab.com

7. Synthèse générale

Télécharger le cours

3. CSS : Présentation et mise en forme d’une page web

1. Introduction au CSS

  1. Rôle du CSS
  2. Séparation HTML / CSS / JavaScript
  3. Adaptation multi-supports (responsive design)
  4. Le CSS définit comment l’interface apparaît

2. Principes fondamentaux du CSS

  1. Rôle principal du CSS
  2. Fonctionnement du CSS
  3. Les unités CSS

3. Où placer le CSS ?

  1. Feuilles externes (recommandé)
  2. CSS interne
  3. CSS inline (à éviter)

4. Reset & Normalize CSS

  1. Pourquoi un reset ?
  2. Reset minimal
  3. Normalize.css
  4. Bonnes pratiques

5. Sélecteurs et spécificité

  1. Les 7 grandes familles :
    – Sélecteurs de type
    – Sélecteurs de classe
    – Identifiants
    – Sélecteurs structurels
    – Sélecteurs d’attribut
    – Pseudo-classes
    – Pseudo-éléments
  2. Notions avancées :
    – Ciblage DOM
    – Pseudo-classes d’interaction
    – Formulaires
    – Structure
    – Pseudo-éléments
    – Cas particuliers 

6. Parent / enfant / ancêtre : structure du DOM

  1. Comprendre l’arbre DOM
  2. Relations : parent, enfant, ancêtre, frères
  3. Importance pour cibler correctement les éléments

7. Le Box Model

  1. Les 4 couches :
    Content / Padding / Border / Margin
  2. Calcul des tailles :
    – Modèle standard
    – Problèmes de largeur totale
  3. border-box indispensable
  4. Margin collapse
  5. Propriétés essentielles : width, height, padding, border, margin

8. Typographie & Couleurs

  1. Typographie :
    – Choisir une police
    – Google Fonts
    – Tailles 
    – Interlignage
    – Graisses & styles
    – Alignements
  2. Couleurs :
    – Formats
    – Arrière-plans
    – Contraste & accessibilité
    – Variables de couleur

9. Variables avancées & Design Tokens

  1. Définir des variables dans :root
  2. var() et fallback
  3. Tokens de design 
  4. Avantages 

10. Positionnement CSS

  1. static
  2. relative
  3. absolute
  4. fixed
  5. sticky
  6. z-index & superposition
  7. Rôles dans les composants interactifs

11. Effets visuels

  1. Ombres : box-shadow, text-shadow
  2. Arrondis : border-radius
  3. Dégradés : linear-gradient, radial-gradient
  4. Filtres et backdrop-filter : blur, brightness, etc.
  5. Arrière-plans avancés : image + gradient

12. Flexbox & Grid

  1. Flexbox (1 dimension)
  2. Grid (2 dimensions)
  3. Combiner Flexbox et Grid

13. Responsive design

  1. Media queries
  2. Images responsives
  3. Responsive avec Flexbox & Grid
  4. Optimisations mobiles
  5. Pourquoi le responsive est indispensable ?
Télécharger le cours

4. Atelier 1 - HTML-CSS

1. Introduction : structure et mise en forme du web

  1. Rôle fondamental des deux langages : HTML & CSS
  2. Comprendre l’architecture d’une page web
  3. Traduire un concept graphique en code
  4. Objectifs pédagogiques 

2. Contexte de l’atelier

  1. Reproduire une landing page complète à partir d’une image fournie
  2. Comprendre la logique HTML (squelette) + CSS (mise en forme)
  3. Compétences visées :
    – HTML sémantique
    – Mise en page avec Flexbox
    – Gestion couleurs / polices / espacements
    – Bonnes pratiques de code & accessibilité

3. Brief du projet

  1. Reproduire une mini-landing page sur le thème Exploration spatiale
  2. Contenu minimal :
    – header
    – s    ection hero 
    – section features
    – f    ooter
  3. Contraintes :
    – HTML5 sémantique
    – CSS structuré, organisé, commenté
    – Code propre, indenté, sans redondance
  4. Visuel de référence :
    Le document inclut l’image de la landing page à reproduire

4. Déroulé de l’atelier (4h)

 
Télécharger l'atelier

5. Paramétrage d'un CMS - WordPress

1. Introduction au paramétrage WordPress

  1. Comprendre ce qu’est un CMS modulaire
  2. WordPress comme système extensible : cœur + thèmes + plugins
  3. Objectifs du module
  4. Positionnement 

2. Analyser les enjeux du paramétrage avancé

  1. Identifier les caractéristiques d’un CMS modulaire
  2. Bonnes pratiques de mise en production
  3. Préparer un site évolutif

3. Configurer un environnement WordPress professionnel

  1. Réglages fondamentaux du système
  2. Gestion des utilisateurs & rôles
  3. Choisir un constructeur (builder)
  4. Sélection d’un thème professionnel
  5. Sécurisation avancée
  6. Optimisation des performances & SEO
  7. Maintenance & sauvegardes continues

4. Structurer un site WordPress pour un usage évolutif

  1. Custom Post Types (CPT)
  2. Taxonomies personnalisées
  3. Champs personnalisés (Custom Fields)
  4. Modèles de pages dynamiques
  5. Thème enfant (Child Theme)
  6. Menus, widgets & zones dynamiques
  7. Préparer les extensions futures

5. Synthèse finale

Télécharger le cours

6. Conception d'interface avec Elementor

1. Introduction à Elementor et aux constructeurs visuels

  1. Contexte
  2. Définition d’un constructeur visuel
  3. Architecture d’une page Elementor :
    – Section → Colonne → Widget
  4. Interface d’Elementor :
    – Barre latérale, zone de prévisualisation, barre inférieure
  5. Les widgets de base
  6. Principe de travail étape par étape
  7. Elementor & thème enfant :
    – rôles complémentaires
  8. Différence Thème vs Constructeur
  9. Thème Hello Elementor
  10. Synthèse :
    – version gratuite vs Elementor Pro

2. Installation et configuration d’Elementor

  1. Installation du plugin Elementor :
    – Étapes d’installation
    – Bouton “Modifier avec Elementor”
  2. Choisir & configurer le thème
  3. Réglages globaux d’Elementor :
    – Types de contenu
    – Désactivation des styles par défaut
    – Styles globaux : couleurs, polices, boutons
  4. Mise en page par défaut :
    – Mode pleine largeur
    – Masquage du titre des pages
  5. Extensions complémentaires :
    – Essential Addons
    – Happy Addons
    – Envato Elements
    – Importance de limiter les plugins
  6. Préparer le responsive :
    – Gestion des breakpoints
    – Police & marges par format
    – Philosophie Mobile First
  7. Bonnes pratiques professionnelles :
    – Structure, Performance, Sauvegarde, Cohérence
  8. Synthèse des réglages

3. Créer des mises en page visuelles et responsives

  1. Structure de base :  
    – Section → Colonne → Widget
    – Rappel du rôle de chaque niveau 
  2. Construire une première mise en page :
    – Ajouter une section
    – Ajouter des colonnes
    – Ajouter des widgets (titre, texte, image, bouton)
  3. Maîtriser les options de style :
    – Onglets : Contenu / Style / Avancé
    – Gestion typographies, couleurs, ombres
    – Grille 
  4. Gestion des espacements & respiration visuelle :
    – Padding vs Margin
    – Espacements entre sections
    – Importance d’une grille 
  5. Créer une page complète :
    – section hero
    – section Présentation
    – section Services / Projets
    – section Contact / Footer
  6. Conception responsive :
    – Ajustements par format
    – Masquage d’éléments
    – Réduction des marges
    – Règles Mobile First 
  7. Réutiliser et uniformiser les sections :
    – Dupliquer / Enregistrer comme modèle
    – Réutilisation pour cohérence globale
  8. Synthèse du chapitre

4. Concevoir des modèles de pages cohérents

  1. Définition d’un modèle de page
  2. Intérêt
  3. Avec Elementor Gratuit :
    – Enregistrement de modèles de sections
    –     Enregistrement de pages entières
    –     Réutilisables dans tout le site

5. Intégrer les principes UX/UI dans Elementor

  1. Cohérence visuelle
  2. Hiérarchie de l’information
  3. Respiration & lisibilité
  4. Alignements & contrastes
  5. Navigation claire
  6. Contrôle de la densité visuelle

6. Optimiser le site pour les performances et la maintenance

  1. Éviter les effets lourds
  2. Optimisation images
  3. Nettoyage des plugins
  4. Sauvegarde des modèles
  5. Cohérence via styles globaux
  6. Structure propre et durable

7. Synthèse du module

Télécharger le cours