Programme des cours 2022-2023
BINV2150-2  
Développement web : avancé
  • Javascript : avancé
  • Ergonomie web
Durée :
Javascript : avancé : 48h Pr
Ergonomie web : 12h Th
Nombre de crédits :
Bachelier en informatique de gestion6
Nom du professeur :
Javascript : avancé : Raphaël BARONI, Sébastien STREBELLE
Ergonomie web : Patrick KIBALE
Coordinateur(s) :
Raphaël BARONI
Langue(s) de l'unité d'enseignement :
Langue française
Organisation et évaluation :
Enseignement au premier quadrimestre, examen en janvier
Unités d'enseignement prérequises et corequises :
Les unités prérequises ou corequises sont présentées au sein de chaque programme
Contenus de l'unité d'enseignement :
Cette unité d'enseignement aborde les thèmes suivants :

  • Langage de programmation Javascript et technologies associées : manipulation du DOM, animations, Bootstrap, HTML, module bundler, AJAX, JSON, JWT...
  • Single-Page Applications intégrant une IHM et un web service en Node.js via le framework Express.
  • Ergonomie Web.
Acquis d'apprentissage (objectifs d'apprentissage) de l'unité d'enseignement :
Compétence(s) - Capacité(s): C1 - S'insérer dans son milieu professionnel et s'adapter à son évolution CA1.2 -Collaborer à la résolution de problèmes complexes avec méthode, rigueur, pro activité et créativité C2 - Communiquer ¿ Ecouter, informer, conseiller les acteurs tant en interne qu'en externe CA2.2 -Adapter ses techniques de communication, son vocabulaire à l'interlocuteur quel qu'il soit CA2.5 -Exploiter un document technique en français et en anglais C3 - Mobiliser les savoirs et les savoir-faire propres à l'informatique de gestion CA3.1 -Concevoir, implémenter et maintenir des algorithmes répondant aux spécifications et fonctionnalités fournies CA3.2 -Choisir et mettre en œuvre un standard défini ou une technologie spécifique (méthodologie, environnement, langage, framework, librairies, ...) CA3.3 -Traduire les besoins des utilisateurs en modèles d'analyse CA3.4 -Concevoir, implémenter, administrer et utiliser avec maîtrise un ensemble structuré de données C4 - Analyser les données utiles à la réalisation de sa mission en adoptant une démarche systémique CA4.4 -Prendre en compte la problématique de sécurité des applications CA4.5 -Soigner l'ergonomie des applications   Acquis d'apprentissage(s) terminaux visé(s): - Acquis d'apprentissage terminaux : AAT1. Concevoir des solutions informatiques efficaces qui répondent à des problèmes en maitrisant les structures de données véhiculées.C1-CA1.2 ; C3-CA3.1 et CA3.4 ; C4-CA4.4 *PROGRAMMATION ( AAT1) - Acquis d'apprentissage terminaux : AAT5. Se conformer aux bonnes pratiques du métier tout en restant critique. C1-CA1.4 ; C3-CA3.2 et CA3.5 ; C4-CA4.2 et CA4.3 et CA4.5 ; C5-CA5.3; C5-CA5.4 * QUALITE ( AAT5) - Acquis d'apprentissage terminaux : AAT6. Exploiter de façon autonome et rigoureuse les différentes ressources d'information (en français ou en anglais). C2-CA2.5 * AUTONOMIE ( AAT6) - Acquis d'apprentissage terminaux : AAT8. Collaborer au sein d'une équipe en s'adaptant à ses interlocuteurs, en organisant les différentes tâches d'un travail selon leur complexité et leur dépendance ainsi qu'en respectant les délais prévus. C1-CA1.1 ; C2-CA2.2(interne) ; C5- CA5.1 et CA5.2 et CA5.3 et CA5.6 ( AAT8) - Acquis d'apprentissage terminaux : AAT9. Affronter des situations nouvelles en se formant pour intégrer les changements. C1-CA1.5; C2- CA2.2; C5-CA5.2 * FLEXIBILITE ( AAT9)
Javascript : avancé
A la fin du cours, les étudiants seront capables de :




  • Créer une Interface Homme-Machine (IHM) interactive, moderne & esthétique ; c'est ce que ferait des développeurs frontend ;
  • Créer un service web ; c'est ce que ferait des développeurs backend ; ainsi les étudiants créeront plus spécifiquement des RESTful API, des applications mettant à disposition de clients des opérations sur des ressources ;
  • Créer une Single Page Application (SPA) intégrant une IHM et un web service ; c'est ce que ferait des frontend développeurs en développant une application web selon une architecture web moderne ;
  • Intégrer l'authentification, l'autorisation et les sessions d'utilisateurs au sein de SPA; c'est ce que ferait tant des développeurs frontend que des développeurs backend pour sécuriser l'accès à des opérations sur des ressources.
  • Déployer une SPA sur le cloud ; c'est ce que ferait des développeurs ou des administrateurs ; en effet, on préfère accéder à une application web via Internet que de devoir l'installer localement sur chaque machine où l'on souhaiterait l'utiliser.
  • Intégrer au développement d'une SPA des technologies non vues en cours ; les étudiants ont l'opportunité de sélectionner et appliquer des librairies JS non pratiquées directement dans les exercices de ce cours ; c'est ce que ferait tant des développeurs frontend que backend, ils doivent régulièrement analyser et appliquer la documentation associée à de nouvelles librairies ;
  • Documenter et présenter en vidéo le développement d'une SPA ; tous les développeurs doivent à un moment où l'autre documenter, présenter et "vendre" le travail réalisé.
  • Analyser le développement de SPA faites par des pairs ; les développeurs doivent régulièrement participer au processus de revue du travail fait par d'autres personnes ; cela permet d'augmenter la qualité d'une application, tout comme cela donne des idées pour ses futurs projets.
Ergonomie web
  • Comprendre ce qu'est une approche marketing à l'ergonomie, et être capable de l'appliquer.
  • Evaluer un site Web ou une App sur base de recommandations de référence et théorèmes marketing.
  • Maîtriser un processus de création d'un site Web ou une App en utilisant une méthodologie dédiée à l'ergonomie.
  • Proposer et implémenter des améliorations ergonomiques à un site web existant.
Savoirs et compétences prérequis :
BINV1050-1 - Développement web : bases
Javascript : avancé
/  
Activités d'apprentissage prévues et méthodes d'enseignement :
Activités       Intitulé de l'activité              Volume horaire
BINV2150 A    Javascript                                        48
BINV2150 B    Ergonomie web                                12

Ces deux activités d'apprentissages sont regroupées car le cours d'ergonomie utilise les interfaces utilisateurs développées dans le cours de JavaScript pour mettre en œuvre des compétences d'ergonomie.

De même, la qualité des projets développés en JavaScript est augmentée grâce à l'application de compétences en ergonomie.
Javascript : avancé
Etape 1. Découvertes des SPA (32h de travail en présentiel, environ 24h à distance)

Introduction

La première partie du cours consiste à la découverte et la mise en pratique, de manière incrémentale, des concepts associés aux « Single-Page Applications » (SPA). Cette partie met en œuvre les principales compétences du cours, chaque compétence étant découpée en un ou plusieurs module(s). Un module traite des concepts à voir et pratiquer pendant deux séances de cours, et donc généralement tout au long d'une semaine. Pour cette étape 1, il y a 8 modules pour un total de 32h de cours en présentiel ainsi que des exercices pratiques qui nécessitent du travail à domicile de la part des étudiants.

Les 3 activités d'apprentissage prévues pour chaque module sont données ci-dessous.

Activité pédagogique n°1 - découverte des concepts via des tutoriels et des applications existantes (environ 1h par module en présentiel)

En présentiel, ou à domicile si nécessaire, les étudiants découvrent en autonomie les concepts associés aux modules de la semaine en lisant les supports de cours sur le site web du cours.

C'est en exécutant du code donné, et par le biais d'explications écrites, que les étudiants créent leurs premières applications. Les étudiants sont invité à poser leurs questions ou à demander de l'aide quand nécessaire.

Au sein des tutoriels, des questions écrites sont posées aux étudiants afin de stimuler leur apprentissage. 

Activité pédagogique n°2 - pratique des concepts via des exercices (environ 2.5h en présentiel, 2.5h à distance par module)

Suite à la première activité, en présentiel ou à domicile, les étudiants pratiquent les concepts via des exercices. Ces exercices sont donnés sur le site web du cours, invitant les étudiants à écrire du code sur base de consignes bien dirigées.

Les étudiants sont encouragés à poser leur questions ou à demander de l'aide en cas de difficultés sur un exercice.

Dans la mesure du possible, pour permettre une différenciation dans l'apprentissage en autonomie, des conseils écrits sont offerts pour chaque exercice, ainsi que des challenges optionnels. Si les étudiants éprouvent de la difficulté, ils choisiront de réaliser un exercice en utilisant ou pas les conseils donnés. De même, si les étudiants souhaitent approfondir ou élargir leur apprentissage, ils pourront le faire en implémentant les challenges. 

Activité pédagogique n°3 - vérification de la compréhension des concepts et présentation si nécessaire (environ 0.5h en présentiel, 0.5h à distance par module)

Avant le début de la deuxième séance de cours d'un module, les étudiants s'assurent d'avoir compris tous les concepts découverts lors de l'activité n°1 et préparent leurs questions.

Lors du début de la deuxième séance de cours, toute la classe écoute chaque question et participe, dans la mesure du possible, pour apporter une réponse.

Des questions sont aussi posées aux étudiants afin de s'assurer de la bonne compréhension des concepts. Si nécessaire, des explications, illustrations et présentations sont offertes.

Afin d'améliorer les interactions lors de cette activité pédagogique, il est planifié de régulièrement demander aux étudiants de donner leur avis et de décrire des points positifs et négatifs. 

Etape 2. Projet et revues de projets par les pairs (16h de travail en présentiel, environ 28h à distance)

Activité pédagogique n°4 - projets (16h en présentiel, environ 24h à distance)

La deuxième partie du cours est constituée d'un projet mettant en œuvre toutes les compétences du cours. Un projet est constitué d'environ 4-5 étudiants pouvant réaliser leur travail à leur rythme sous réserve du respect des jalons imposés. Cette partie couvre un total de 16h de travail en présentiel réparties sur 4 semaines de 2 séances de 2h par semaine. Il est aussi nécessaire que les étudiants fournissent un travail à domicile pour atteindre les objectifs du projet.

Tout au long du développement associé au projet, les étudiants doivent compléter un rapport individuel en utilisant le modèle de document qui sera donné. Les étudiants doivent notamment s'exprimer par rapport à l'atteinte des objectifs fonctionnels, aux difficultés rencontrées et à d'autres questions ouvertes.

Durant le projet, les étudiants doivent compléter un rapport de groupe en utilisant le modèle de document qui sera offert. Les étudiants doivent s'exprimer par rapport à l'atteinte des objectifs fonctionnels, aux difficultés rencontrées et aux conseils pour appliquer cette technologie.

A la fin de leur projet, les étudiants doivent réaliser une présentation vidéo de 5 à 10 minutes ayant notamment pour but de promouvoir leur projet.

Les étudiants sont encouragés à poser leur questions ou à demander de l'aide en cas de difficultés sur leur projet, tant pour les difficultés techniques, organisationnelles ou relationnelles.

Activité pédagogique n°5 - revues de projets par les pairs (environ 4h à distance)

Une fois la deadline de soumission des projets atteinte, la saison de revues des projets est ouverte. Les étudiants participent à la revue bienveillante, aux critiques constructives, de sites web faits par leurs pairs.
Mode d'enseignement (présentiel, à distance, hybride) :
Voir descriptions des activités d'apprentissages.
 
Javascript : avancé
  • Activité pédagogique n°1 - découverte des concepts via des tutoriels et des applications existantes : principalement en présentiel, à distance si nécessaire
  • Activité pédagogique n°2 - pratique des concepts via des exercices : principalement en présentiel, à distance si nécessaire
  • Activité pédagogique n°3 - vérification de la compréhension des concepts et présentation si nécessaire : préparation à faire en distanciel, discussions en présentiel
  • Activité pédagogique n°4 - projets : en présentiel et à distance
  • Activité pédagogique n°5 - revues de projets par les pairs : à distance
Ergonomie web
Enseignement en présentiel:
  • des cours de 2h seront données suivant le calendrier définies en début d'année
  • des sessions de questions / réponses sur la matière sont organisées par l'enseignant
Lectures recommandées ou obligatoires et notes de cours :
Javascript : avancé
  • Site web du cours contenant tous les supports : découverte des concepts, tutoriels, exercices...
  • Notes de cours
Ergonomie web
  • Slides fournis par le professeur
  • Références externes listées par le professeur
  • Notes de cours
Modalités d'évaluation et critères :
Responsable de l'évaluation: BARONI Raphaël
 
Langue de l'évaluation: Français
 
Mode d'évaluation et pondération: Examen écrit
 
La pondération de la note globale de l'UE est au prorata des heures associées aux différentes activités d'apprentissage :

  • Javascript (5 ECTS, 48h) : 80%
  • Ergonomie web (1 ECTS, 12h) : 20%
L'évaluation de cette UE n'est pas intégrée ; elle est composée d'activités d'apprentissage distinctes donnant lieu, à partir de 10/20, à des reports de notes légaux d'une session à l'autre et d'une année académique à l'autre.

Les compétences évaluées dans le cadre de JavaScript sont principalement associées à une production de code, alors qu'en ergonomie les compétences évaluées sont principalement liées à de l'analyse. Les deux activités d'apprentissage sont donc évaluées de manière distinctes.
 
Javascript : avancé
  • En première session, les compétences des étudiants sont évaluées par le biais d'un projet (30% des points) et d'un examen (70% des points).
  • Le projet consiste à la mise en œuvre d'une application web reprenant les technologies vues en cours et appliquant des librairies JS à explorer.
  • L'examen consiste en la production de code reprenant les compétences développées lors du cours.
  • En deuxième session, les compétence des étudiants seront évaluées par le biais d'un examen seulement (100% des points). Toute évaluation réalisée préalablement ne sera pas prise en compte dans l'évaluation finale.
Ergonomie web
  • Les compétences de l'étudiant·e seront évaluées par le biais d'un projet (30% des points) et d'un examen (70% des points).
  • Le projet consiste à la mise en œuvre d'une application reprenant la matière vue en cours ;
  • L'examen consiste en une épreuve écrite (théorie et étude de cas)
  • En deuxième session, les compétence de l'étudiant·e seront évaluées par le biais d'un examen seulement (100% des points). Toute évaluation réalisée préalablement ne sera pas prise en compte dans l'évaluation finale.
Stage(s) :
Remarques organisationnelles :
Lors du calcul de la moyenne arithmétique pondérée du PAE d'un étudiant, ainsi que du calcul de la moyenne arithmétique pondérée globale de son cursus, le poids associé à la note de la présente UE est son nombre d'ECTS.
Contacts :