Technologies web 2.0

Libellé du cours :	Technologies web 2.0
Département d'enseignement :	MIN / Mathématiques - Informatique
Responsable d'enseignement :	Monsieur THOMAS BOURDEAUD HUY
Langue d'enseignement :	Français
Ects potentiels :	4
Grille des résultats :	Grade de A+ à R
Code et libellé (hp) :	G1G2_ED_MIN_TWE - Technologies web 2.0

Equipe pédagogique

Enseignants : Monsieur THOMAS BOURDEAUD HUY / Madame ISABELLE LE GLAZ
Intervenants extérieurs (entreprise, recherche, enseignement secondaire) : divers enseignants vacataires

Résumé

Ce cours couvre les principaux outils permettant de produire des interfaces riches pour le Web 2.0 (RIA). Il présente et permet la mise en œuvre des concepts de découpage d’architecture en couches (frontend et backend), AJAX et les API RESTful. L’électif est organisé en 3 modules de formation : FrontEnd, Backend et Single Page Apps. Un mini-projet permet aux étudiants d’appréhender les phases de développement d’une application Web de leur choix, depuis la rédaction du cahier des charges jusqu’au développement technique en passant par les étapes de conception de l’IHM et du système d’information. En plus de donner l’occasion aux étudiants de pratiquer les technologies présentées sur des problèmes de taille raisonnable, et de développer leurs capacités d’analyse et de travail en autonomie, ce mini-projet permettra notamment de mettre en évidence les problématiques d’expérience utilisateur et des éléments de méthodologie de projet agile.

Objectifs pédagogiques

À l’issue du cours, l’élève sera capable de : - Comprendre l’histoire des technologies Web, les solutions techniques actuelles du Web 2.0 (Ajax, RIA), le contexte et les problématiques du Web Mobile et les perspectives du domaine - Identifier et comprendre les interactions d’un navigateur Web avec un serveur, ainsi que les mécanismes mis en œuvre au sein du protocole HTTP - Comprendre l’organisation en couches du Web, côtés Frontend (structure, présentation, interaction) et Backend (Modèle, Vue, Contrôleur), et les bénéfices d’un tel découpage - Développer en utilisant les langages du Web : (X)HTML, CSS, javascript, format JSON, php, mysql - Manipuler des solutions de développement évoluées actuelles : API HTML5, jQuery, bootstrap, API RESTFul - Comprendre les problématiques d’ergonomie, d’UX et de responsive design - Comprendre les problématiques de sécurité du Web (injections SQL et failles XSS) - Comprendre les problématiques de performance et les spécificités des applications Web fonctionnant sur Mobile, l’intérêt des solutions offertes par HTML5 - Appréhender les bonnes pratiques de développement et d’industrialisation du code Contribution du cours au référentiel de compétences ; à l’issue du cours, l’étudiant aura progressé dans : - la capacité à concrétiser ou à réaliser un prototype (1.9). o En effet, il devra réaliser un mini-projet de développement d’application Web. - la capacité à comprendre et formuler le problème (2.1) ; la capacité à utiliser des concepts ou des principes dans les descriptions d'événements (2.2) ; la capacité à reconnaître les éléments spécifiques d'un problème (2.3) ; la capacité à identifier les interactions entre éléments (2.4) o En effet, il aura l’occasion d’utiliser des outils d’inspection de code et utilisera des diagrammes de conception pour représenter les interactions entre les différentes couches de l’architecture de sa solution. - la capacité à proposer un ou plusieurs scénarios de résolution (2.5). o En effet, il sera amené à organiser les solutions techniques vues en cours pour résoudre différents cas d’étude. Le domaine du Web est tel qu’il existe souvent de nombreuses solutions techniques pour parvenir à un même but fonctionnel. C’est par exemple notablement le cas dans le domaine du Web Design (HTML/CSS) ; o Dans le cadre de son mini-projet, il devra produire plusieurs documents de conception (mockups, modèles conceptuels et physiques de données) - la capacité à converger vers une solution acceptable (suivi hypothèses, ordres de grandeur...) (2.7) o En effet, dans le cadre du mini-projet, une démarche de développement incrémentale sera proposée. Ce sera l’occasion de revenir sur certaines fonctionnalités au fil des solutions techniques abordées dans les cours (par exemple, on pivotera de solutions de type “formulaires cliquodrômes” à des interfaces riches au fil de la découverte des solutions de type ajax et des interactions HTML5) - la capacité à appréhender toutes les dimensions scientifiques et techniques d'un projet (3.1) o En effet, il devra non seulement parvenir à un résultat fonctionnellement correct vis-à-vis du cahier des charges de son projet, mais il devra également justifier de la qualité de son développement au regarde des problématiques d’ergonomie/UX, de performance, de sécurité et de maintenabilité de son code. - la capacité à approfondir rapidement un domaine (3.2). o En effet, les langages du Web sont nombreux et en interaction. Dès les premiers cours, l’étudiant devra pouvoir mobiliser un ensemble de technologies vaste. Il devra être capable de comprendre en autonomie des ressources documentaires nombreuses et de qualité variable. Le cours l’amènera à découvrir également des solutions évoluées comme bootstrap, jQuery et jQuery UI - la capacité à définir et à négocier des objectifs (3.3). o En effet, à l’occasion du mini-projet les étudiants devront définir leurs objectifs en les hiérarchisant - la capacité à développer des méthodes de travail, à organiser (3.5). o En effet, des démarches de développement incrémentales seront proposées (méthodologie de développement agile, découpage du développement en User Stories et découverte d’un outil d’accompagnement du développement agile de type JIRA) - la capacité à intégrer les règles et normes qualité / sécurité / environnementales (3.9) o En effet, on sensibilisera les étudiants aux normes de qualité de code, au développement dirigé par les tests et aux solutions d’intégration continue, à l’occasion de témoignages de professionnels pratiquants

Objectifs de développement durable

Modalités de contrôle de connaissance

Contrôle Continu
Commentaires: Tests finaux (CB) pour chaque module Tests en ligne éventuels Le mini-projet sera associé à des livrables intermédiaires qui seront évalués. Il sera l’objet d’une soutenance à la fin du module également évaluée.

Ressources en ligne

Il existe une multitude de supports de qualité variée sur les langages du Web. Le cours identifiera les supports les plus pertinents et les plus à jour pour chaque couche concernée. A la date de rédaction de cette fiche, il s’agit de : ● La suite des cours thématiques du site W3Schools, équipé d’une solution de développement en ligne “TryIt Yourself” bien pratique : <http://www.w3schools.com/> ● Les blogs <http://www.alsacreations.com/> et <http://alistapart.com/> dédiés aux technologies Frontend et à leurs bonnes pratiques ● Le manuel du langage php en français : <http://php.net/manual/fr> Des supports de cours ont également été développés depuis des années pour l’ig2i. Le serveur pédagogique moodle de ces cours (accessibles de manière anonyme) contient donc une grande variété de ressources pédagogiques complémentaires (sujets et corrigés d’exercices, de CTP et de DS) : ● Web1 : Frontend & Backend ● Web2 : Rich Internet Applications Les cours de l'ED sont disponibles pour la plupart sous forme de podcasts réalisés lors de la période du COVID.

Pédagogie

L’électif est organisé en 3 modules : FrontEnd, Backend et Rich Internet Applications. Chaque module est développé sous forme de cours introduisant les concepts et les technologies, puis de cas d’études pratiques de taille scolaire réalisés sur la base de “Live Code” : après avoir laissé les étudiants chercher un peu, des corrections sont systématiquement réalisées par l’enseignant pour insister sur les bonnes pratiques à mettre en œuvre. Il est complété par un mini-projet démarrant dès le début de l’électif qui amène les étudiants à construire une application Web en suivant une méthodologie incrémentale, permettant de développer les capacités d’analyse et d’autonomie.

Séquencement / modalités d'apprentissage

Nombre d'heures en CM (Cours Magistraux) :	0
Nombre d'heures en TD (Travaux Dirigés) :	0
Nombre d'heures en TP (Travaux Pratiques) :	0
Nombre d'heures en Séminaire :	42
Nombre d'heures en Demi-séminaire :	0
Nombre d'heures élèves en TEA (Travail En Autonomie) :	24
Nombre d'heures élèves en TNE (Travail Non Encadré) :	0
Nombre d'heures en CB (Contrôle Bloqué) :	0
Nombre d'heures élèves en PER (Travail PERsonnel) :	0
Nombre d'heures en Heures Projets :	0

Pré-requis

Connaissances de base d’algorithmique (qui peuvent être acquis en classe préparatoire et dans le cours de tronc commun de AAP). Des connaissances supplémentaires en bases de données (SQL) seront appréciées (électif Systèmes d’Information au S6a), mais ne sont pas indispensables. Les étudiants doivent venir à chaque séance avec leur PC équipe du système d'exploitation Linux.

Nombre maximum d'inscrits

64

Remarques