Plan de cours COM2580 Informations générales Applications Internet (Automne 2012) Département de communication Université de Montréal Horaire de cours : Mercredi de 8h30h à 11h30 Salles de cours : Pavillon Marie- Victorin, B- 340 Site Web du cours : http://lrcm.com.umontreal.ca/greg/com2580/ Crédits : 3 Chargé de cours : Grégory Petit (gregory.petit@umontreal.ca) Bureau : Pavillon Roger Gaudry, V- 13-1 Téléphone : (514) 343-6111, ext 8725 Auxiliaire de cours : À préciser prochainement. Description du cours dans le syllabus Préparation des images pour la diffusion multimédia. Conception et production de sites Internet. Ergonomie, scénarisation interactive et intégration des médias. Production d'animations et programmation d'interactions simples. Objectifs du cours Apprendre les notions pertinentes à la conception et à la production de sites Internet, Maitriser les outils et techniques de production d'un site Internet, en particulier Dreamweaver CS6, Adapter un scénario de site Internet en fonction des possibilités techniques, puis intégrer des médias selon les principes de communication et d'ergonomie cognitive. Description du cours Ce cours veut amener les étudiants à produire un site Internet sans qu ils aient de notions fondamentales en programmation informatique. Les étudiants développeront ainsi des méthodes et compétences de design et de production de divers éléments constituant un site Internet. Le cours passera, entre autre, au travers les différentes méthodes de mise en page et formatage d un site Internet, ainsi que l intégration d images produites avec Illustrator et Photoshop. La majeure partie de ce cours est basée sur la pratique même si diverses théories seront rappelées aux étudiants. Des études de cas et ateliers pratiques seront donc mis en place à la fin de chaque cours pour appliquer ce qui est vu. Ces travaux d équipe permettront d'habituer les étudiants à la conception au sein d équipes de production et les amèneront à développer un sens critique.
Il est recommandé que les étudiants aient suivis le cours COM2571 Interfaces et Scénarisation, avant de suivre le cours COM2580. Les notes de chaque cours seront mises en ligne sur le site Web du cours au plus tard la veille par le professeur. Évaluation Deux travaux à faire individuellement et un projet final à faire en binôme. Premier travail (10%) : conception d une page Web basique (à rendre le 31 octobre au plus tard à 8h30) Le but de ce travail est de produire une page Web personnelle avec Dreamweaver. C est un travail assez simple permettant de vérifier si les étudiants ont compris l utilisation des composants de base d une page Web. Les étudiants doivent réaliser une page Web personnelle les décrivant. La page peut contenir des éléments académiques, professionnels et/ou personnels. Le contenu de la page importe peu, c est la façon dont elle est conçue qui importe. La page Web devra au moins contenir les éléments suivants : Une organisation en divisions Des zones de texte Des en- têtes Au moins deux images Un tableau Aucun rapport écrit n est demandé pour ce travail. Travail à rendre : Un fichier zip comprenant : Le fichier HTML de la page Web Les images sources utilisées dans la page Web Second travail (30%) : conception d un petit site Internet de 3 pages Web avec gestion des styles (à rendre le 28 novembre au plus tard à 8h30) Le but de ce travail est de concevoir un micro site Internet de seulement trois pages. Le site Internet devra présenter un domaine qui intéresse l étudiant (sport, technologie, mode, etc.). Ce travail permettra de vérifier si les étudiants ont correctement compris l utilisation des feuilles de styles. Le site sera réalisé à l aide de Dreamweaver. Une maquette simpliste du site devra être faite avant toute conception puis être remise sur papier. La conception du site devra correspondre à ce qui a été défini sur la maquette. Le site devra être obligatoirement organisé en divisions. L aspect visuel du site devra être strictement gérée avec un fichier CSS. Aucune information de mise en page et de formatage ne devra figurer dans les fichiers HTML. L architecture du fichier CSS devra être simple et compréhensible.
Travail à rendre : La maquette papier Un cours rapport les méthodes de mise en page et de formatage utilisés pour faire correspondre le site Internet à sa maquette. Un fichier zip comprenant : Les fichiers HTML des trois pages Web Le fichier CSS Les éventuelles images sources utilisées dans pour le site Évaluation du travail Maquette papier - 15% Rapport - 15% Site Internet - 70% Aspect visuel du site - 20% Aspect technique du site - 50% Projet de session en binôme (60%) : maquette d'un site Internet, puis conception de ce site. (à rendre au plus tard le 16 janvier à 8h30 et à présenter le jour même) En groupe de 2, les étudiants doivent concevoir un site Internet. Ce projet de session permettra aux étudiants de mettre en pratique la majorité des éléments vus dans ce cours. Contrairement aux deux premiers travaux, il n y a aucune contrainte d élément HTML et de sélecteur CSS pour ce projet. Néanmoins, les étudiants doivent montrer qu ils maitrisent leur fonctionnement. Il est de leur intérêt d utiliser les différents aspects de développement Web vus en cours. Comme lors de toute conception de site Internet, une analyse de besoins et une maquette du site devront être faites. La maquette pourra être faite sur papier ou sur ordinateur. Le site Internet doit être réalisé pour un vrai client (faire approuver par le professeur, mais le client n'a pas à donner l'autorisation ou à contribuer). Le site devra contenir au minimum 7-8 pages Web différentes. Chaque groupe devra présenter son projet devant la classe. Cette présentation devra durer 10 minutes et aura lieu la dernière semaine de cours. Le site Internet devra être publié sur le Web via votre compte (voir le cours Intégration Web) Rapport à rendre l'analyse des besoins contenant : le public cible, les objectifs pour répondre aux besoins du public cible, la concurrence, les métaphore et style utilisés, la maquette la justification des méthodes de mise en page et de formatage utilisés pour faire correspondre le site Internet à sa maquette (incluant l utilisation des CSS, les designs fait via Illustrator et Photoshop) Le lien vers votre site Internet
Évaluation du travail Rapport - 50 % Analyse des besoins - 10% Maquette papier - 15% Justification de la mise en page et du formatage - 15% Présentation orale - 10% Site Internet - 50% Aspect visuel du site - 20% Aspect technique du site - 30% Pondération des notes Lettre Description Points Pourcentage A+ 4,3 90-100% A Excellent 4,0 85-89% A- 3,7 80-84% B+ 3,3 77-79% B Très bon 3,0 73-76% B- 2,7 70-72% C+ 2,3 65-69% C Bon 2,0* 60-64% C- 1,7 57-59% D+ Passable 1,3 54-56% D 1,0** 50-53% E Faible (échec) 0,0 35-49% F Nul (échec) 0-34% * Note de passage dans un programme. ** Note de passage dans un cours. Remarque générales : Le texte doit être bien organisé et le français doit être correct. Cela ne sert à rien de faire des phrases très longues avec des mots incompréhensibles. Une personne qui lira les travaux ne devra pas plonger dans un dictionnaire toutes les minutes. Tout retard entraine une diminution des points (un échelon pour les premières 24 heures (par ex. de A- à B+) et ensuite un échelon pour chaque semaine de retard). Attention au plagiat! Dans vos rapports, mettre entre guillemets ce qui est cité et indiquer la source!!! Programme du cours 3 octobre - Présentation du cours Introduction au cours Revue du plan de cours
HTML Dreamweaver CS6 10 octobre - Introduction à la production de site Web Pourquoi fait- on des sites Web Entête des pages Web Organisation des fichiers d un site Web La structure des pages Web 17 octobre - Introduction au HTML L élément HTML Passage en revue des éléments Web essentiels 24 octobre Les feuilles de style Introduction des feuilles de style Les règles CSS Gestion des feuilles de styles dans Dreamweaver Attributs de formatage 31 octobre - La mise en page - remise du premier travail (heure limite : 8h30) Les éléments de mise en page Les attributs CSS de mise en page L utilisation des tableaux pour la mise en page Attributs de formatage 7 novembre - Intégration d'images dans une page Web Les types d image Gestion de la taille des images Utilisation des images avec Dreamweaver 14 novembre - Scénarisation interactive Analyse des besoins Maquette Validation 21 novembre - Ergonomie des sites Web Les critères ergonomiques Maquette Validation 28 novembre - Les formulaires - remise du second travail Les formulaires Les champs de formulaire
5 décembre - Intégration Web et éléments complexes de Dreamweaver Intégration Web Éléments complexes de Dreamweaver 12 décembre - Composante Photoshop CS6 Images- liens avancées o Texte et couleur de fond o Texture de fond o Survol de l image- lien Image- map 19 décembre - Avancement sur le projet de site Internet 9 janvier - Avancement sur le projet de site Internet 16 janvier - Remise et présentation du projet de site Internet Références Pour ce cours, il n'y aura pas d'ouvrages de référence obligatoires. Malgré tout, vous disposerez de quelques ouvrages complémentaires qui vous seront utiles pour mieux maitriser la matière. Critères ergonomiques pour l'évaluation des interfaces Humain- Ordinateur Christian Bastien, Dominic Scapin Institut National de Recherche en Informatique et en Automatique, Rocquencourt (France), 1993. Principes de spécification de l'utilisabilité Eric Brangier, Javier Barcenilla Concevoir un produit facile à utiliser: adapter les technologies à l'homme (Ch. 3), Éditions d'organisation. Paris (France), 2003. Aspects psychologiques et organisationnels des nouvelles technologies de l'information et de la Communication Eric Brangier, Alain Lancry, Claude Louche Les dimensions humaines du travail: Théories et pratiques de la psychologie du travail et des organisations (pp. 213-249), Presses Universitaires de Nancy. Nancy (France), 2004. The GUI Style Guide Susan L. Fowler, Victor R. Stanwick AP Professionnal. Boston (Massachussets, USA), 1995. Conception de sites Web, l art de la simplicité Jakob Nielsen Campus Press, 2000. Creating your first website David Powers
Adobe, 2010. Heuristic evaluation of user interfaces Jakob Nielsen, Rolf Molich Proceedings of ACM CHI'90 Conference Seattle (Washington, USA), 1990. Ergoweb (Site Web) Alain Robillard- Bastien, 2011. Designing the User Interface: Strategies for Effective Human- Computer Interaction (Fifth ed.) Ben Shneiderman, Catherine Plaisant Addison Wesley Publishing Company, 2009.