Cégep de Sherbrooke Département de graphisme Session 2012-03 Plan de cours 570-HAX-06 Introduction aux logiciels multimédias Programme 570.HAO Pondération : 3-3-2 Unités : 2,66 Groupes : 5305 et 5306 Cours préalable : 570-HAL-03 Introduction aux logiciels (logiciel de traitement d'images) Professeur : Vincent Desruisseaux Bureau: 4-42-145 Téléphone : 819 564-6350 poste 4581 Courriel : vincent.desruisseaux@cegepsherbrooke.qc.ca Professeur : François Théoret Bureau: 4-42-147 Téléphone : 819 564-6350 poste 4586 Courriel : francois.theoret@cegepsherbrooke.qc.ca
570-HAX-06 Introduction aux logiciels multimédias Compétence 00PL Exploiter des logiciels multimédias Pondération 3-3-2 2,66 unités Objectif Énoncé de la compétence 00PL Exploiter des logiciels multimédias Standard Contexte de réalisation À l aide de la documentation pertinente. À l aide d ordinateurs et de périphériques appropriés. À l aide de manuels d usagers. À l aide de logiciels. À l aide d images et de sons archivés. Note préliminaire Le multimédia est une discipline en constante progression, qui ouvre de nouveaux horizons à la communication. Cette pratique demande une maîtrise pointue des technologies, des principes de communication ainsi que des règles de graphisme. Des projets en multimédia sont trop souvent réalisés par des gens compétents en langage visuel, mais qui ne savent pas exploiter le maximum des technologies. Encore plus souvent, ce sont des spécialistes des technologies qui conçoivent et produisent des produits multimédias. Dans les deux cas, les projets qui en résultent n atteignent pas un niveau de qualité optimal. Le multimédia est une discipline à part entière qui comporte son lot de règles à suivre, de restrictions, de possibilités et de théories. Les acteurs qui évoluent sur la scène des communications interactives et du multimédia, qu ils travaillent tant à la production qu à la conception, doivent posséder une solide connaissance des technologies, une bonne maîtrise du langage visuel, ainsi qu une habileté à comprendre ou à créer des concepts fonctionnels de communication interactive. L'objectif de ce cours est de vous introduire aux langages de programmation et aux logiciels qui permettent la conception et la production de sites Web. Ce cours sera suivi du cours Graphisme multimédia à l'intérieur duquel seront approfondies les notions d'ergonomie et d'utilisabilité. 2
Éléments de la compétence 00PL Exploiter des logiciels multimédia Critères de performance Contenus - activités d apprentissage 1 Comprendre le multimédia. (9 heures) 2 Choisir un logiciel. (3 heures) 3 Utiliser différentes fonctions d un logiciel auteur. (30 heures) 4 Explorer des modules. (1 heure) 5 Évaluer les possibilités des fonctions. (3 heures) 6 Analyser le potentiel des outils. (4 heures) 1.1 Connaissance du contexte de ce média. 1.2 Compréhension de la réalité de la communication interactive. 1.3 Connaissance des différents médias. 1.4 Connaissance des différents intervenants. 2.1 Connaissance des différentes technologies et logiciels. 2.2 Évaluation juste de la compatibilité relative à d autres applications graphiques. 3.1 Repérage des fonctions générales et spécialisées. 3.2 Exploration des fonctions spécialisées. 3.3 Établissement d une marche à suivre efficace. 4.1 Établissement des liens entre chaque module. 4.2 Analyse pertinente des possibilités des modules. 4.3 Détermination complète des outils et des fonctions de chaque module. 4.4 Manifestation d initiative. 5.1 Pertinence des essais exécutés. 5.2 Analyse juste des résultats. 5.3 Détermination des limites. 6.1 Estimation juste du degré de précision des outils. 6.2 Utilisation optimale et précise des différents outils. 6.3 Recensement des utilisations possibles. Contexte historique et économique. Place dans la société actuelle. Tendances. Relation avec les autres médias. Objectifs et contextes de communication. Le Web. Langages de programmation. Le lien entre l objectif de communication, le média et les technologies. Les liens entre les technologies et les logiciels. Fonctionnement de base. Le principe même du logiciel. Son rôle par rapport à la technologie. Fonctions générales : comment faire le montage du contenu, comment travailler. Fonctions spécialisées. Établir une méthode de travail, suivre des normes, organiser le contenu. Application de l arborescence, différents types d arborescence. Les principes de navigation, différents types de navigations. Trouver des nouvelles solutions qui respectent les paramètres. Importance du prototype. Règles et utilités du «beta-testage». Le prototype atteint-il l objectif de communication? Qu'est-ce qui fait échouer l étape du «beta-testage». Les limites de la technologie utilisée. Les limites de fonctions utilisées. Exigences minimums pour le produit. Capacité de l outil à résoudre le problème. Être capable d utiliser le maximum de l outil. Les contraintes reliées à chaque outil. Qu est ce que cet outil me permet de faire? Pour quelle technologie peut-il être utilisé? 3
Éléments de la compétence 7 Utiliser le langage de programmation de base. (30 heures) Critères de performance 7.1 Respect des règles du langage de programmation. 7.2 Choix des commandes appropriées. 7.3 Création de liens interactifs opérationnels. Contenus - activités d apprentissage Les règles qui mettent en cause la fonctionnalité. Les règles d esthétique du code. Les standards. Connaître les commandes pour les fonctions de base. Commandes pour navigation, hyperliens, intégration d images, de sons. Commandes pour intégrer des éléments d interactivité. Créer des liens. 8 Préparer les produits finis. (10 heures) 8.1 Contrôle de la qualité. 8.2 Livraison et finalisation d un produit. 8.3 Diffusion et mise en marché. Importance du «beta-testage». Vérification de la qualité. Test sur différentes plates-formes, différents fureteurs. Conversion Mac/PC. Livrer un site sur un serveur www. 1 Objectifs d apprentissage Connaître la structure du langage HTML. Pouvoir exécuter une programmation simple en langage HTML. Concevoir des interfaces selon des critères d ergonomie. Concevoir et réaliser un site Web simple. Pouvoir créer une arborescence efficace pour un site Web. Maîtriser les fonctions de base d un logiciel de création de page Web. Apprendre à travailler en fonction d un produit virtuel (manipulation d images, couleurs, format de sauvegarde). 4 COLLÈGE DE SHERBROOKE
2 Calendrier des activités Cours 1 Lecture du plan de cours, présentation des objectifs du cours et des différents modes d évaluation. Explication des politiques de fonctionnement et d utilisation du laboratoire. Introduction à l utilisation de la plateforme PC. Historique d'internet et introduction au langage HTML. Exercice 1 (introduction au langage HTML) Évaluation / formatif Cours 2 Structurer un document HTML. Les principaux éléments de structure : Les balises; les attributs; les listes. Les liens hypertextes. La philosophie et la syntaxe du langage hypertexte. Exercice 2 (les listes et les hyperliens) Évaluation / formatif Cours 3 Les images : formats de sauvegarde; l utilisation de l élément image et ses attributs. Les tableaux. Exercices 3 et 4 (les images et les tableaux) Évaluation / formatif Cours 4 / 5 Introduction à Dreamweaver. L interface : les panneaux et les menus. Structurer un document HTML avec Dreamweaver : Le texte; les listes; l insertion d images; les liens hypertextes. Mise en page avec Dreamweaver : Introduction aux feuilles de style (CSS), la balise DIV; paramètres de contrôle. Exercices 5, 6, 7 (introduction à Dreamweaver) Évaluation / formatif Cours 6 / 7 Dreamweaver : Les propriétés de page; les feuilles de style. La création et la préparation des images dans Photoshop (tranches). Mettre un document en ligne avec Dreamweaver. Vérification multiplateforme avec différents fureteurs. Projet 1 (réalisation d'un microsite) Évaluation / 20 points Objectifs Appliquer les notions de créations de pages Web acquises préalablement. Créer, planifier et réaliser un produit virtuel fonctionnel. Intégrer les fonctions d un logiciel de création de page Web à interface graphique (Dreamweaver). Préparer des images en vue d une diffusion sur le Web. Faire la mise en ligne du site. 5 COLLÈGE DE SHERBROOKE
Critères d évaluation Concept et mise en page du site (lisibilité, choix des éléments visuels ). Réalisation technique (code HTML, CSS et mise en ligne). Ergonomie et convivialité du site. Cours 8 Examen de mi-session Évaluation / 20 points Objectifs Vérifier le degré de maîtrise des notions vues depuis le début de la session par le biais de questions théoriques et d un examen pratique. Critères d évaluation Respect des exigences. Efficacité de la réalisation et de la programmation du document HTML et CSS. Réponses pertinentes aux questions. Cours 9 / 10 / 11 / 12 Suite des CSS. Principes de l'architecture Web; possibilités et limites; mise en page à l aide des CSS et de Dreamweaver. Projet 2 (refonte de site) Évaluation / 30 points Objectifs Appliquer les notions de créations de pages Web acquises préalablement dans un contexte similaire au marché du travail. Préparer et intégrer adéquatement des images à un site Web. Créer, planifier et réaliser un produit virtuel efficace en relation avec les demandes et les attentes d un client et les contraintes d un contenu. Maîtriser les fonctions d un logiciel de création de page Web à interface graphique (Dreamweaver). Concevoir et réaliser une interface selon des principes de communication visuelle en tenant compte des fonctionnalités permises par les CSS. Critères d évaluation Concept et mise en page du site. Ergonomie et convivialité de l interface. Maîtrise des fonctions de base d un éditeur Web. Maîtrise des fonctions spécifiques d un logiciel de préparation d images. Fonctionnalité de la navigation. Expérimentation et initiative personnelle. Respect des contraintes et des échéances. Cours 13 / 14 / 15 Intégration d'éléments multimédia (fichier audio et vidéo). Introduction à After Effects. Les formulaires. Évolution et avenir du HTML et des CSS. 6
Projet 3 - projet synthèse (site avec intégration audio et vidéo) Évaluation / 30 points Objectifs Intégrer l ensemble des notions relatives aux CSS vues précédemment. Arrimer les éléments CSS à un contenu HTML. Concevoir et réaliser une interface selon des principes de communication visuelle en tenant compte des fonctionnalités permises par les CSS. Critères d évaluation Utilisation pertinente des feuilles de style. Ergonomie et convivialité de l interface. Expérimentation et initiative personnelle. Respect des contraintes et des échéances. Cours 16 Remise du projet 3 et critique de groupe. * Dans l éventualité d une exposition intéressante et pertinente au contenu du cours, il est possible qu un voyage d études soit organisé pendant la session. Advenant cette situation, une évaluation d au moins 10 % portant sur cette visite se substituera à une autre évaluation prévue à l échéancier, au choix de l enseignant. 3 Démarche pédagogique Avant de commencer la démonstration des logiciels, il est important que vous saisissiez bien le contexte dans lequel s inscrit l utilisation de ces logiciels. C est pourquoi l aspect un peu plus théorique de ce cours, celui qui traite de la sémantique et du balisage structurel des différentes composantes d'un site Web sera abordé en début de session. Les cours expliquant les fonctions des différents logiciels multimédias seront suivis d un ou plusieurs exercices pratiques afin que les notions apprises puissent être appliquées rapidement. Le projet synthèse vous aidera à intégrer ses apprentissages en sollicitant tous les acquis afin de concevoir un site Web. Application de la politique départementale La pénalité reliée aux absences non motivées s applique selon les termes suivants : une pénalité de 2 % est applicable à la première absence, de 3 % à la deuxième et de 5 % à la troisième pour un maximum de 10 % de votre note globale, pour la session. Les retards et les départs hâtifs sont également comptabilisés et pourront être cumulés pour constituer une absence. 7
4 Évaluation sommative Les points sont répartis de la façon suivante : Projet 1 Examen mi-session Projet 2 Projet 3 (projet synthèse) Total 20 points 20 points 30 points 30 points 100 points Toutes les évaluations tiendront compte des critères suivants : La pertinence (répondre aux exigences); Le respect des échéances; L initiative personnelle, l effort de l étudiant et sa participation; La qualité et la précision de l exécution. Évaluation finale L évaluation finale permettra de vérifier si l étudiant peut : Utiliser le vocabulaire propre au domaine; Maîtriser les principes de base des langages HTML et CSS; Utiliser les outils informatiques de façon appropriée; Connaître et comprendre les possibilités du multimédia; Gérer efficacement les différentes composantes d un produit multimédia; Concevoir et produire une page Web fonctionnelle. Note : La qualité de la langue et le souci de présentation des travaux sont objets d évaluation dans toutes les activités où il y a production écrite, orale ou visuelle. Le pourcentage des points alloués à la qualité du français sera par conséquent fixé à 10 % de la note globale pour chacun des projets et travaux présentés au département de graphisme du Cégep de Sherbrooke. 5 Rétroaction Une rétroaction sera faite après les principaux sujets ainsi qu à la fin de la session. Le professeur pourra rencontrer les étudiants individuellement au besoin. 8
6 Liste du matériel requis Pour ce cours, l étudiant devra se procurer le matériel suivant : Une clé USB ou disque dur portable; Un cartable à anneaux et un cahier de notes; Achat conseillé: DVD 7 Médiagraphie Negrino, Tom / Smith, Dori Adobe Dreamweaver CS6, Visual QuickStart Guide, Peachpit Press, U.S.A., 2012, 528 p. Adobe Creative Team, Adobe Dreamweaver CS6, Classroom in a book, Pearson Education, U.S.A., 2012, 448 p. Harris, Andy, HTML 5 Pour les nuls, First interactive, U.S.A., 2011, 290 p. MEYER, A. Eric, CSS: techniques professionnelle, Pearson, U.S.A., 2011, 304 p. Keith, Jeremy, HTML 5 pour les Web designers, Eyrolles, U.S.A., 2011, 98 p. Cederholm, Dan, Css3 pour les Web designers, Eyrolles, U.S.A., 2011, 132 p. WIEDEMANN, Julius, Web design: Navigation, Taschen, Germany, 2009, 191 p. ADOBE System Incorporated, Utilisation d'adobe Dreamweaver CS4 Professional, Adobe System Incorporated, California, 2008, 510 p. 9 COLLÈGE DE SHERBROOKE