% INF3190 — Introduction à la programmation Web % UQAM — Département d'informatique % Plan de cours — Été 2020 * Horaires, locaux et enseignants: Responsable(s) du cours ======================= Coordination ------------ Mosser, Sébastien PK-4820 poste 3904 Enseignement ------------- Tsheke Shele, Johnny PK-4115 poste 3699 - Les étudiants doivent consulter régulièrement leur courriel UQAM, moyen de communication de l'enseignant avec le cours-groupe. - Un [canal de discussion (https://mattermost.info.uqam.ca/forum/channels/inf3190)](https://mattermost.info.uqam.ca/forum/channels/inf3190) est aussi disponible pour interagir avec les enseignants, les démonstrateurs et les autres étudiant.e.s. Description du cours ==================== Ce cours introduit à la conception et au développement Web, tant du côté client que serveur. Sommaire du contenu ------------------- Les fondements du web : navigateur, serveur, protocoles. Langages et normes du Web (HTML5, JavaScript, PHP, CSS). Introduction à un cadre d'applications (cadriciel, framework). Notions de conception d'interface et de logiciel en tant que service (Software as a service, SaaS). Modalités d'enseignement ------------------------ Ce cours comporte une séance obligatoire de laboratoire (2 heures). Préalables académiques ---------------------- - INF1120 - Programmation. I - INF1070 - Utilisation et administration des systèmes informatiques. Objectif du cours ================= Ce cours vise à fournir aux étudiants les connaissances nécessaires dans la programmation du web du côté client et du coté serveur: - Comprendre l'évolution du web et des langages de marquage. - Étudier les aspects de structure, de style et traitement dans un site web. - Se familiariser avec les langages HTML et XHTML. - Comprendre et utiliser les feuilles de style. - Se familiariser avec les outils d'intégration des objets multimédia. - Étudier les éléments importants de programmation du côté du client à l'aide de langages de scripts tels que JavaScript. - Comprendre les bases de la programmation du côté des serveurs web. - Appliquer les concepts appris dans des cas pratiques. - S'initier au développement des sites web accessibles aux personnes en situation de handicap ([Web Accessibility Initiative - WAI](https://www.w3.org/WAI/)). Quelques aspects pratiques ========================== Compte tenu du contexte actuel de COVID-19, de la nécéssité de proposer une solution adaptée au plus grand nombre et du surcharge de travail engendré pour l'enseignant; les activités se poursuivront sous la forme suivante: - Cours à distance. - Les présentations, les videos et les références seront mises à la disposition des étudiants sur [moodle](https://moodle.uqam.ca). - Les séances synchrones sur zoom serviront à illustrer la matière, discuter, répondre aux questions et faire le suivi des travaux. - Un [canal de discussion](https://mattermost.info.uqam.ca/forum/channels/inf3190) est ouvert pour faciliter les échanges et le suivi des questions/réponses. - L'accent sera mis sur le travaux pratiques et/ou l'évaluation par les pairs comme cela se fait dans les cours à distance et/ou les [MOOCs](https://en.wikipedia.org/wiki/Massive_open_online_course). - Lorsqu'on fait usage de l'évaluation par les pairs, la correction des travaux des autres est une activité notée. Concrètement, la qualité de votre correction sera elle-même notée. Contenu du cours ================ - Introduction - Évolution du web - Langages de marquage - - Client/serveur web - Navigateurs - Plateformes de développement - - Accessibilité du web - Structure de document web - Quelques balises HTML : head, body, ... - HTML - Balises de formatage : listes, tableaux , div, span, img, ... - Formulaires - Cartes (images cliquables) - Multimédia - CSS - Stylisation de textes, de fontes, de liens , de listes, de tables, etc. - Concept de boîtes, marges, etc. - Feuilles de style en cascade ( hiérarchie) - Notion de classe CSS, Sélecteur, priorité, - JavaScript, JSON - Variables - Structures de contrôle - Fonctions - Node.js, expressjs - Introduction node.js - Routes, chemins et paramètres des endpoints - Traitement des formulaires - CSS3, Icônes et Introduction Bootstrap - CSS3(flexbox,transform, transition,) - Animation - Introduction bootstrap: grille, Quelques classes pour site responsive, tables, formulaires, images, couleurs contextuelles, etc - Initiation à Fontawesome (Librairie des icônes) - Canvas, JQuery et plugins - Chargement, utilisation - Quelques sélecteurs : id, classe, balise, etc. - Événements. - Manipulation CSS. - Librairies: Datatables, jsTree, Bootstrap, etc. \*etc - Examen Intra - Introduction XML et AJAX - XML - Programmation AJAX - Angular (partie 1) - Introduction - Directives (ng-app, ng-init, ng-model, ng-bind, etc.) - ng-include (inclure document html) - expression - Filter - Angular (partie 2) - Module - Controler - scope - formulaire - validation - Angular (partie 3) - Routing - ajax \$http - service - evenement - table - Angular (partie 4) - Création d'une application complete - Aperçu des concepts et technologies populaires du web - Reactjs - Material design - ASP - Python - JSP, servlet - php - Symfony, MVC, Saas, etc - Examen Final Modalités d'évaluation ====================== Description sommaire Échéance Pondération ------------------------------------ ------------ ------------- Quiz 1 Semaine 5 5% TP 1 Semaine 7 20% Examen intra Semaine 8 20% Quiz 2 Semaine 10 5% TP 2 Semaine 14 25% Quiz 3 Semaine 15 5% Examen final (devoir + correction) Semaine 15 20% > - Chaque Quiz dure environ 20 minutes et porte sur toute la matière > vue à date. Les questions seront tirées au hasard d'une banque de > questions Moodle. > > - L'examen Intra sera sous forme de questions tirées au hasard d'une > banque des quetions Moodle et aura une durée de 3h. > > - L'examen final sera sous forme d'un devoir à faire à la maison et > évalué de manière anonyme par les pairs. Une partie de la note > sera obtenu sur base la qualité de la correction des travaux des > autres étudiant.e.s. > - La série et l'ordre des questions/réponses de l'examen Intra et/ou > quizzes pourraient donc varier d'une personne à l'autre. Chaque > évaluation portera sur toute la matière vue à date. > Règles concernant le seuil de passage ------------------------------------- - L'étudiant doit obtenir une moyenne générale pondérée supérieure ou égale à 50% Médiagraphie ============ VO Présentations du cours et manuel d'exercices (disponibles sur ). VR sur le web : - - - VR Reg Braithwaite -- JavaScript Allongé, the "Six" Edition VR David Sklar -- Learning PHP, A Gentle Introduction to the Web's Most Popular Language O'Reilly Media, 2016. (Disponible en ligne, après un abonnement gratuit, à BAnQ) VR FELKE-MORRIS, Terry -- *Web Development and Design Foundations with XHTML* -- 5/E. ADDISON-WESLEY, 2010. Fortement recomandé. VR SEBESTA, Robert -- *Programming the World Wide Web* -- 5/E. ADDISON-WESLEY, 2010. VR LEMAINQUE, Fabrice -- *HTML, XHTML, CSS, Scripts, Le guide Complet* -- EDITIONS MICRO APPLICATION, 2008. VR NEBRA, Mathieu -- *Réussir son site Web avec XHTML et CSS* -- EYROLLES, 2010.