2025-2026
Avenue Victor Maistriau 8a
7000 Mons
Fiche ects de l'unité d'enseignement #377 intitulée :
Développement web
Bachelier en Techniques Graphiques orientation Techniques infographiques - Bloc 1
Informations
Responsable d'UE : Ivan MILLER
Bloc : IFG1
Période : 1er quadrimestre
Durée : 72 h
Crédits : 6 ects
UE Prérequises : aucune
UE Corequises : aucune
Activités d'apprentissage (AA)
- Développement web - théorie : 24 h, Ivan MILLER
- Développement web - pratique : 48 h, Joan CLAUS, Johan Depreter
Connaissances et compétences préalables
-
Contribution aux objectifs du référentiel de compétences de l'ARES
- Communiquer et informer
- Assurer la diffusion vers les différents niveaux de la hiérarchie (interface)
- Utiliser le vocabulaire adéquat
- Présenter des prototypes de solution et d’application techniques
- Utiliser une langue étrangère
- Collaborer à la conception, à l’amélioration et au développement de projets techniques
- Elaborer une méthodologie de travail
- Analyser une situation donnée sous ses aspects techniques et scientifiques
- Rechercher et utiliser les ressources adéquates
- Proposer des solutions qui tiennent compte des contraintes
- S’engager dans une démarche de développement professionnel
- Prendre en compte les aspects éthiques et déontologiques
- S’informer et s’inscrire dans une démarche de formation permanente
- Développer une pensée critique
- Travailler tant en autonomie qu’en équipe dans le respect de la structure de l’environnement professionnel
- S’inscrire dans une démarche de respect des réglementations
- Respecter le code du bien-être au travail
- Respecter les normes, les procédures et les codes de bonne pratique
- Intégrer les différents aspects du développement durable
- Développer sa créativité
- Produire une communication graphique originale et innovante dans le respect des droits d’auteurs
- Observer et Analyser des « oeuvres » graphiques existantes
- Identifier et s’adapter aux contraintes économiques, techniques et communicationnelles, dépasser les contraintes
- Maîtriser les outils informatiques
- Utiliser efficacement les environnements et systèmes d’exploitations informatiques spécifiques à l’infographie
- Produire et traiter des images
- Concevoir et réaliser une communication interactive
- Structurer et analyser la communication
- Prendre en compte les contraintes liées à l’utilisation d’un média interactif (ergonomie, accessibilité, caractéristique du public cible, …)
Acquis d'apprentissage spécifiques
- Coder une structure de site web en HTML, tenant compte de la sémantique des éléments, et respectant les normes du W3C
- Coder une feuille de style CSS de mise en page de site web, assurant un comportement adaptatif
- Utiliser les outils de développement web des principaux navigateurs et les outils de validation en ligne agréés
- Tester et optimiser la compatibilité d'un site web avec les navigateurs actuels
- Appliquer des critères d'accessibilité (WCAG 2.2, niveau AA)
- Établir des maquettes de site web de type wireframes
- Optimiser le référencement naturel d'un site web (SEO)
- Optimiser l'ergonomie d'un site web
Contenu des AA
Développement web - théorie
- Introduction, tour d'horizon du développement web : aperçu des technologies web, historique du Web, navigateurs et tendances actuelles.
- Chapitre 1 - HTML : bases du langage, formats d'encodage, classification lignes/blocs, titres et paragraphes, éléments d'enrichissements de textes, éléments de structure de la page, couleurs, listes, tableaux, liens, images, cartes, sons et vidéos, frames et iframes, formulaires, méta-balises, etc.
- Chapitre 2 - CSS : utilisation des feuilles de style CSS, sélecteurs, unités de mesure CSS, déclarations et spécificités, propriétés (couleurs, polices, dimensions, bordures et marges, arrières-plans, alignements, transitions, animations, transformations, filtres, rognures, etc.), positionnements (statique, flottant, relatif, absolu, fixe, sticky, flexbox, grid layout), solutions aux problèmes de compatibilité, Responsive Design, outils CSS, accessibilité du Web, etc.
- Chapitre 3 - Ergonomie des sites web : gestaltisme et autres principes d'ergonomie appliqués au Web.
- Chapitre 4 - Référencement web : notions de base, SERP, Google, punitions, attaques SEO, etc.
Développement web - pratique
- Exercices HTML : listes, tableaux, liens, images, formulaires, méta-balises, etc.
- Exercices HTML et CSS : sélecteurs, propriétés, positionnements, Responsive Design, Flexbox, Grid Layout, etc.
- Projet global : maquette wireframe, structure HTML, mise en page CSS, référencement, ergonomie, adaptativité, accessibilité, etc.
Répartition des heures
Développement web - théorie : 24 h de théorie
Développement web - pratique : 48 h d'exercices/Labos
Méthodes d'enseignement
Développement web - théorie : cours magistral, approche avec TIC, utilisation de logiciels
Développement web - pratique : approche par projets, approche interactive, approche déductive, approche avec TIC, utilisation de logiciels, Workshop
Langues d'enseignement
Développement web - théorie : français
Développement web - pratique : français
Supports
Développement web - théorie : syllabus, activités sur eCampus, activités sur Quizineur
Développement web - pratique : syllabus, activités sur eCampus, activités sur Quizineur
Ressources bibliographiques
Développement web - théorie
Bibliographie
- ANDRIEU Olivier, Réussir son référencement web, éditions Eyrolles, 2018
- BEUZIT Patrick, aide-mémoire HTML 4 et CSS, éditions Eyrolles, 2002
- BOUCHER Amélie, Ergonomie Web, éditions Eyrolles, 2007
- CEDERHOLM Dan, CSS3 pour les Web Designers, éditions Eyrolles, 2012
- DRAILLARD Francis, Premiers pas en CSS et XHTML, éditions Eyrolles, 2009
- GOETTER Raphaël, CSS3 Grid Layout, éditions Eyrolles, 2019
- LAWSON Bruce & SHARP Remy, Introduction à HTML5, éditions Pearson, 2012
- MARCOTTE Ethan, Responsive Web Design, éditions Eyrolles, 2012
- MEYER A. Eric, Conception de sites Web avec les CSS, CampusPress, 2007
- NEBRA Mathieu, Réussir son site web avec XHTML et CSS, éditions Eyrolles, 2009
- PANDELE Eduard, HTML, éditions Marabout, 1997
Webographie
- Alsacréations : http://www.alsacreations.com
- Comment ça marche : http://www.commentcamarche.net
- Développez.com : http://www.developpez.com
- Les Infos-Stratèges : http://www.les-infostrateges.com
- OpenWeb : http://openweb.eu.org
- Validator W3C : http://validator.w3.org
- W3C : http://www.w3.org
- W3Schools : http://www.w3schools.com
- Wikipédia : http://fr.wikipedia.org
Développement web - pratique
-
Évaluation et pondération
Méthode d'évaluation : note globale à l'UE
Langues d'évaluation : français
Modalités d'évaluation :
Pratique 65%
- Workshop "Teknika Coding Day" : 10% (non remédiable en 2e session)
- Évaluation continue (dont projet et présence au labo) : 15% (non remédiable en 2e session)
- Examen pratique : 40% (à livre ouvert : syllabus papier ou pdf autorisé et documentation manuscrite papier autorisée)
Théorie 35%
- Activités e-learning : 5% (sur la plateforme Quizineur)
- Examen écrit : 30%
Attention, un étudiant absent à la moitié des séances peut se voir refuser l'accès aux examens de l'UE.
L'évaluation donne lieu à une cote globale de Développement web calculée à partir des cotes de la partie Pratique et de la partie Théorie.
En session de rattrapage (juin), quelques soient les points obtenus en janvier, l'étudiant peut repasser les épreuves remédiables qu'il souhaite.
En seconde session (août/septembre), si l'étudiant doit représenter Développement web, il est tenu de représenter toutes les épreuves remédiables de la ou les parties dont la note est inférieure à 10/20. L'étudiant peut, s'il le souhaite, représenter les épreuves remédiables de la partie dont la note est supérieure à 10/20.
Report de note d'une année à l'autre pour l'AA réussie en cas d'échec à l'UE :
- Développement web - théorie : non
- Développement web - pratique : non