IFT-1005 — Design et développement Web


Professeur: Stefan Monnier


Page Moodle du cours pour H2016.

Description

Le web est devenu un medium de communication incontournable qui ne pourrait exister sans l’informatique et les informaticiens qui continuent à le développer; il est donc essentiel que nos étudiants puissent assez tôt en comprendre les principes sous-jacents.

Le but du cours est d’initier les étudiants au développement Web moderne en motivant le balisage sémantique plutôt que de présentation. Les pages web devront être indépendantes de leur présentation pour en faciliter la réutilisation et la présentation sur plusieurs types d’appareils.

Les travaux pratiques de programmation sont importants car ils font partie intégrante d’une formation en informatique au même titre que les laboratoires dans les sciences traditionnelles. Ces travaux seront effectués dans l’environnement du réseau IRO. En plus de deux projets web de plus grande envergure, il y aura chaque semaine des exercices à compléter dans le cadre des démonstrations.

Manuel recommandé

Terry Felke-Morris, Web Development and Design Foundations with HTML5, Pearson Addison-Wesley, 2014.

Horaire

Jour Heure Lieu Type
Lundi 15h30-16h30 Z-210 Cours
Mercredi 11h30-13h30 Z-337 Cours
Lundi 16h30-18h30 AA-1340 Démonstration
22 fév 15h30-17h30 N-615 Intra
25 avr 15h30-18h15 Y-115 Final

Le choix des salles n'est pas sous mon contrôle et est parfois changé sans préavis, donc dans le doute, faites plutôt confiance au formulaire insupportable de Synchro

Démonstrateurs

Pas encore connu.

Évaluation

Il y aura 2 travaux pratiques (pour un total de 45 points) et deux examens de 25 points chacun, plus 5 points sur les exercices hebdomadaires. La note finale sur 100 sera convertie en note litérale à la fin du cours seulement, selon un barème qui dépendra de la moyenne du groupe et de la répartition des notes des étudiants. Un total aux deux examens inférieur à 25 points (i.e. la moitié des points) est éliminatoire.

Les travaux pratiques sont à faire en groupe de 2 (jamais plus, et très rarement moins). Les exercices sont à faire seuls. Et les examens se font à livre fermé: vous n'avez droit qu'à une page de notes (recto) écrite à la main, pas de livre ni de calculatrice autorisés.

Rappel

Le plagiat et la copie sont des fautes graves passibles de sanctions disciplinaires. Dans ce cours, nous prendrons toutes les mesures que nous jugeons nécessaires pour dépister et contrer ce genre d'activités.

Envoyez vos courriels depuis une adresse à umontreal.ca plutôt que turlutu.fr si vous voulez qu'il soient pris au sérieux plutôt qu'ils tombent dans l'oubliette du dossier spam.

La page Moodle du cours inclus un forum de discussions que je vous encourage à utiliser.


Notes de cours

Ces notes sont tirées de celles de Guy Lapalme, sauf les erreurs bien sûr.

Introduction
Langages de balisage
Validation XML
Balises HTML
Interlude Emacs
Feuilles de style
Images
Mise en page
Tableaux
SVG
HTTP et formulaires
Javascript
Sécurité
Vitesse

Démonstrations

Les données de chaque démonstration seront placées ici.
Les exercices sont à faire individuellement, pas en groupe.

Exercices 0 à faire à la démo du 18 janvier.
Exercices 1 à faire à la démo du 25 janvier.
Exercices 2 à rendre avant la démo du 1e février.
Exercices 3 à faire à la démo du 1e février.
Exercices 4 à rendre avant la démo du 8 février.
Exercices 5 à faire à la démo du 8 février.
Exercices 6 à faire à la démo du 15 février.
Exercices 7 à faire à la démo du 7 mars.
Exercices 8 à rendre avant la démo du 14 mars.
Exercices 9 à faire à la démo du 21 mars.
Exercices 10 à rendre avant la démo du 4 avril.
Exercices 11 à faire à la démo du 4 avril.
Exercices 12 à rendre avant la démo du 11 avril.
Exercices 13 à faire à la démo du 11 avril.

Travaux Pratiques

Les travaux pratiques sont à faire par groupes de deux.

TP #1

La donnée du travail.

TP #2

La donnée du travail.


Liens pour Emacs

GNU Emacs est l'éditeur recommandé dans ce cours pour écrire les programmes et les rapports. Parmi les bonnes ressources pour ce qui a trait à Emacs, nous trouvons le Emacs Manual en-ligne disponible dans le menu Help, l'Introduction to Emacs Lisp dans le menu Help (sous-menu More Manuals), le Emacs Lisp Reference dans le même sous-menu, la commande 'i' dans ces manuels, le groupe de discussion gnu.emacs.help, le Wiki, et la "refcard" qui est distribuée avec Emacs, dans un fichier nommé quelque chose comme /usr/share/emacs/24.5/etc/refcard.pdf.

Emacs est préinstallé sur toutes les machines GNU/Linux du DIRO. Pour l'installer sur votre propre machine, la procédure habituelle ressemble à:

Completion dans Emacs

Pour des raisons historiques, la completion en Emacs se fait par défaut avec la touche M-TAB, qui depuis quelques années est généralement réquisitionnée par votre environnement (i.e. Emacs ne la reçoit pas). Pour cette raison, je vous recommande d'ajouter la ligne suivante dans votre fichier ~/.emacs: (setq tab-always-indent 'complete) qui permet d'utiliser la touche TAB autant pour faire l'indentation automatique que pour faire la completion.

HTML5 dans Emacs

Par défaut, Emacs utilise html-mode pour éditer les pages HTML, qui est un mode d'édition trop permissif pour les besoins de ce cours (il n'offre pas de validation) et plutôt primitif.

À la place, il vous faudra utiliser le mode nXML. Cependant, Emacs n'est distribué à l'heure actuelle qu'avec le schéma de HTML4. Vous pouvez corriger ce problème en installant le paquet html5-schema disponible dans GNU ELPA. Pour ce faire, il suffit de démarrer Emacs et d'y faire: M-x package-install RET html5-schema RET

Une fois cela fait, Emacs utilisera le schéma HTML5 avec nxml-mode pour vos fichiers HTML.

Une autre manière de faire l'installation est de faire (toujours depuis Emacs) M-x list-packages RET qui devrait vous donner une liste de paquets (qui devrait inclure html5-schema) et vous permettre d'en faire alors l'installation.

RelaxNG Compact dans Emacs

Le mode nXML distribué avec Emacs sait utiliser les fichiers au format RelaxNG Compact pour valider vos fichiers XML, mais il n'offre pas de soutient particulier pour éditer les fichiers RelaxNG Compact.

Donc avant d'éditer de tels fichiers, je vous recommande d'installer le package rnc-mode disponible dans GNU ELPA. Pour ce faire, il suffit de démarrer Emacs et d'y faire: M-x package-install RET rnc-mode RET