PLAN DE COURS CRM 142 Internet et multimédia 1 Hiver 2015 Groupe 3 jeudi 8 h 50, labo A4-255 Enseignante : Émilie Viau (emilie.viau@usherbrooke.ca) Bureau : A4-251 (local des chargés de cours) Disponibilités : avant et après les cours, de même que sur rendez-vous. Périodes de laboratoires : lundi, de 16 h à 18 h 50 et mercredi, de 8 h 50 à 11 h 40 (labo A4-255) Assistants de cours et de laboratoire : Zak P. Kelly (zak.p.kelly@usherbrooke.ca) Kevin Laroche (kevin.laroche@usherbrooke.ca) 1. Objectifs spécifiques S initier à la construction de sites Web (approche client) et revisiter le multimédia numérique dans le but d en connaître les modalités particulières d emploi sur Internet, notamment dans un site Web. Acquérir les connaissances théoriques et les compétences pratiques nécessaires à la conception (forme et contenu), à la construction, à la mise en ligne et à la mise à jour d un site Web multimédia entièrement mis en forme à l aide de feuilles de style. Apprendre non seulement à manipuler les outils logiciels appropriés pour ce faire, mais aussi, à faire des choix éclairés et à conduire une veille technologique. 2. Précisions sur les contenus Rappel des principes de la rédaction orientée Web. Caractérisation raisonnée des principales composantes multimédias Web dans le but d assurer la production d un site tenant compte des capacités et des contraintes inhérentes au médium et au canal et respectant les profils humain et technologique des utilisateurs. En ce qui concerne ce dernier aspect, apprentissage des principes de base de la mise en forme «accessible». Débroussaillage conceptuel et terminologique (HTML, CSS, standards, bibliothèques JavaScript comme jquery, etc.). Dans le cadre de la prise en main d un éditeur HTML, apprentissage du langage de balisage HTML, des différentes possibilités de mise en forme (cadres, tableaux, DIV), des particularités de l utilisation Web de l'imagerie, de la manipulation des feuilles de style en cascade (CSS) et de l intégration d éléments dynamiques et interactifs. Bref retour sur les logiciels de montage audio et vidéo avec une focalisation Web sur les formats, les réglages initiaux, la compression et le choix des codecs, le tout, pour une mise en ligne à l économie optimale. Initiation à la création et à l'insertion d'éléments dynamiques et/ou interactifs (bibliothèques JavaScript/jQuery, clips audio et vidéo, formulaires et scripts PHP, etc.)
Parallèlement, apprentissage du téléchargement des composantes Web sur un serveur FTP et acquisition d habiletés dans le travail en équipe à distance. Application de ces connaissances et habiletés dans le cadre d examens et de travaux pratiques articulés autour de la construction d un site Web multimédia dans lequel toutes les composantes auront fait l objet de choix raisonnés et auront été employés optimalement. Plus précisément, au moyen de logiciels inclus dans la suite Adobe CC 2014 et de divers petits utilitaires : transfert de fichiers vers un serveur (FileZilla); approfondissement des principes d'une «bonne» page Web (contenu, clarté textuelle, aération, structuration, «navigabilité», respect du profil des usagers, accessibilité, etc.); apprentissage, à l'occasion de la prise en main de l'éditeur Dreamweaver CC 2014, du langage de balisage HTML (logique, hypertextualité, balises et attributs, etc.) et des techniques de mise en forme d'une page (résolution, cadres, tableaux et DIV) au moyen de feuilles de style CSS (reparamétrage des valeurs par défaut des balises, création de classes, production de feuilles de style pour l'écran et pour l'impression, etc.); création de menus en HTML/CSS; apprentissage de la logique et des modalités d utilisation de bibliothèques JavaScript, notamment jquery, et de la configuration de gadgets logiciels (widgets) proposés dans de telles bibliothèques; apprentissage de la manipulation et de la configuration de formulaires interactifs (script PHP); caractérisation des formats graphiques matriciels dans une perspective de performance et d utilisation esthétique dans un site Web (formats, compression, affichage, etc.); approfondissement, dans une perspective d'économie et d'efficacité incontournable sur le Web, des techniques d échantillonnage, de compression et de diffusion de l audio (Adobe Audition CC 2014) et de la vidéo (Adobe Premiere CC 2014); apprentissage des modalités de leur insertion dans des pages HTML. À ces contenus pourraient se greffer, si le temps le permet, quelques courtes «capsules» complémentaires destinées à élargir les champs des connaissances informatiques et Web (choix d un nom de domaine, choix d un hébergeur, référencement, etc.). 2 3. Méthodologie 3.1. Les cours Présentation des éléments théoriques en classe (laboratoire PC, local A4-255) accompagnée d'exemples et de démonstrations. Lorsque le temps le permet, allocation de temps pour l apprentissage concurrent des logiciels ou l'avancement de la réalisation de composantes des travaux pratiques. 3.2. Les notes de cours Des notes de cours détaillées et partagées par les quatre groupes de CRM 142 sont disponibles directement sur le Web pour chacune des rubriques. La page d'accueil de ces notes loge à l'adresse : http://crm142-cm.espaceweb.usherbrooke.ca/
On retrouve dans ce site, en plus des notes de cours proprement dites, des pages consacrées à des ressources externes pertinentes, de même que les énoncés des TP et consignes de remise, les grilles de correction utilisées, les résultats, etc. On remarquera cependant que certaines rubriques pourront être mises hors ligne, le temps d être mises à jour ou développées. 3.3. Les laboratoires Des périodes (facultatives) de travail (avec le soutien technique de nos assistants Zak P. Kelly et Kevin Laroche) ont lieu le lundi, de 16 h à 18 h 50 et le mercredi, de 8 h 50 à 11 h 40, au laboratoire d informatique A4-255 à compter du lundi 19 janvier. Notez qu'il n'y aura pas de période de laboratoire le lundi 6 avril, congé de Pâques. Le grand labo A4-255 et les deux plus petits (situés au A4-268 et au A4-274) sont tous équipés de la suite Adobe CC 2014 et sont accessibles en tout temps lorsqu'ils ne sont pas réservés pour d'autres activités (la liste de leurs disponibilités respectives est habituellement affichée à la porte de chacun). 3 4. Projet d évaluation 4.1. Examens et travaux, ventilation des notes et équité Réalisation par incréments, en équipe de quatre, d'un site Web multimédia comptant pour 48 % de la note. Réalisation individuelle d un exercice portant sur le traitement d imagerie Web, comptant pour 12 % de la note. Deux examens écrits (mi-session et fin de session) à faire individuellement (respectivement 15 % et 25 %). 4.1.1. Travaux d'équipe Réalisation par incréments, en équipe de quatre, d'un site Web multimédia original comptant pour 48 % de la note. Ce site, de nature informative et traitant du sujet de votre choix, inclura des contenus préalablement rédigés par l équipe. Il devra nécessairement comporter les six rubriques (pages) suivantes : Accueil : mot d accueil pour présenter brièvement le site et sa vocation. Rubrique 1, rubrique 2 et rubrique 3 : trois pages distinctes traitant chacune d un aspect particulier de votre sujet (choisissez l appellation de la page en conséquence, ex. : «Histoire») Multimédia : éléments multimédias pertinents à l appui de votre sujet (contenus audio/vidéo correctement compressés et intégrés selon les exigences fixées; diaporama d images en jquery). Webmestres : brève description de chaque webmestre et information pour les joindre, incluant un formulaire de courriel (script PHP). De façon plus «technique», le site intégrera les dispositions et technologies suivantes : la mise en page en DIV; les feuilles de style (écran et version imprimable) correctement réalisées et appliquées (régissant tout le formatage et le contenu textuel); l application d hyperliens (liens relatifs et absolus, ancrage par identifiant, mailto);
4 l'intégration de l'imagerie statique récupérée «intelligemment» sur le Web (imagerie en lien avec la thématique) et mise en valeur de façon à appuyer le professionnalisme du site; un menu interactif (en HTML/CSS); un gadget logiciel (widget) jquery; l insertion de contenus audio et vidéo correctement compressés (sous forme de consoles de lecture et d'hyperliens de téléchargement); l insertion et le paramétrage d un formulaire de courriel (script PHP); la création et la mise en ligne fonctionnelle dans le compte d'un membre de l'équipe sur le serveur Espace Web de l'université de Sherbrooke. La réalisation de tout ce travail se fera par étapes et chacune d entre elles seront évaluées. Des énoncés détaillés à l'appui de la réalisation et de la remise de chacun de ces éléments seront fournis au préalable. Les grilles de correction sont également fournies. L'ultime étape de ce travail pratique consistera en la remise (en ligne) d'une version complète révisée et/ou augmentée du site, c'est-à-dire d'une version où, le cas échéant, toutes les lacunes auront été comblées, tous les correctifs suggérés aux précédentes étapes apportés, et toutes les composantes intégrées, l'ensemble formant un tout intéressant, esthétique, parfaitement fonctionnel, dans une langue de qualité et un style approprié. N.B. : Une participation inéquitable au travail de l'équipe peut entraîner, pour un membre de l équipe «peu participatif», une pénalité pouvant aller jusqu'à la moitié des points accordés à cette étape, alors qu'un défaut complet sera sanctionné par la perte de tous les points. Également, un retard injustifié ou justifié de façon non valable dans la remise d'un travail d'équipe ou individuel fera l'objet de pénalités cumulatives par demi-journée de délai. On remarquera que, en ce qui concerne le dépôt d'un travail d'équipe, tous les membres sont coresponsables de l'avis de remise. 4.1.2. Travaux et examens individuels En ce qui concerne l évaluation individuelle, on compte : un travail pratique individuel portant sur le rehaussement de l'apparence graphique du site d'équipe (image de bandeau, image d'arrière-plan, favicon et Web font) 12 %; un examen de mi-session 15 %; un examen de fin de session 25 %. Évidemment, tout le volet technique, à savoir la réalisation concrète du site Web et des sections individuelles, repose sur des décisions et des choix éclairés. De plus, lorsque vous serez appelé à agir comme personne-ressource en entreprise, vous devrez bien maîtriser les connaissances théoriques vues en classe. C est pourquoi deux examens théoriques (écrits) sont prévus au cours de la session. L'ensemble ainsi formé porte la note individuelle de session à 52 %. 5. Notation et échelle d équivalence de notation Tous les travaux étant notés en pourcentage (%) et non pas à l aide d une note littérale, une échelle d équivalence au cours de la session n est donc pas nécessaire. Cependant, tout en adoptant globalement les principes d attribution d une note finale littérale en vigueur dans le programme (de A+
à E), cette échelle peut être modifiée au terme de la session de façon à respecter les caractéristiques du groupe cours et les objectifs du programme. Niveau Cote finale à indiquer sur la feuille de résultats Notation des résultats Correspondance en points de moyenne cumulative À titre indicatif seulement, correspondance en notes* A+ 4,3 92 et plus Excellent A 4 88-91 A- 3,7 85-87 B+ 3,3 82 84 Très bien B 3 78 81 B- 2,7 75-77 Bien (limite C+ 2,3 72 74 pour réussite du C 2 68 71 baccalauréat) C- 1,7 65-67 Passable D+ 1,3 62 64 D 1 60-61 Échec E 0 59 et moins * La 4e colonne n est là que comme instrument de travail, approprié à certaines activités. À titre indicatif aussi, une distribution normale donne environ : 10 % de A; 35 % de B; 40 % de C; 15 % de D et de E Cette échelle de notation peut varier en fonction de divers facteurs : type d activité, taille du groupe, niveau du cours, atteinte des objectifs, résultats obtenus, etc. 5 Plus précisément, les évaluations consisteront en : Objet TP équipe, étape 1 : contenu textuel (commun) du site Web Réalisation Remise projetée Note (%) Mode de remise Équipe Période 5 7 % Imprimé Examen de mi-session Individuelle Période 8 15 % Écrit TP équipe, étape 2 : site Web : structuration du site, mise en forme en blocs (DIV), hyperliens, feuille de style d'écran, menu interactif (HTML/CSS) TP individuel : rehaussement de l'apparence graphique du site d'équipe (image de bandeau, image d'arrière-plan, favicon et ajout d'une Web font à l'aide du service en ligne Google Fonts) TP équipe, étape 3 : feuille de style d impression, gadget logiciel jquery, intégration de l'imagerie et Web font, insertion de composantes audio et vidéo (console et téléchargement), formulaire de courriel et version finale du site (complète, corrigée et affinée) Équipe Période 9 15 % En ligne Individuelle Période 11 12 % En ligne Équipe Période 15 26 % En ligne Examen final Individuelle Période 15 25 % Écrit
6 6. Plagiat et autres délits Vous trouverez ci-après un document informatif préparé par le groupe de travail antiplagiat de l Université de Sherbrooke à l attention des étudiantes et des étudiants. Nous vous invitons à le lire et à prendre connaissance du Règlement des études, plus particulièrement de la section 8 portant sur les règles relatives à la discipline que vous trouverez sur le site Internet du bureau du registraire : http://www.usherbrooke.ca/programmes/references/reglement/discipline/ Vous êtes également invités à visiter la page Internet Antiplagiat : http://www.usherbrooke.ca/ssf/services/antiplagiat/ et à participer au Quiz antiplagiat : http://www.usherbrooke.ca/ssf/services/antiplagiat/jetudie/quiz/ Dans tous les cas de plagiat ou de toute autre manœuvre visant à tromper, une plainte sera déposée auprès de la personne responsable des dossiers disciplinaires de la Faculté et traitée selon la procédure prévue au Règlement des études. Toute personne reconnue avoir commis un délit se verra imposer une sanction disciplinaire. 7. Logiciels et matériel FileZilla (transfert de fichiers), Adobe Dreamweaver CC 2014 (éditeur HTML), Adobe Photoshop CC 2014 (imagerie matricielle), Adobe Audition CC 2014 (compression audio),adobe Premiere CC 2014 (compression vidéo). Ces logiciels (de même que l'ensemble de la suite Adobe CC 2014) sont disponibles sur les appareils du laboratoire A4-255, ainsi que sur ceux du A4-268 et du A4-274. Dans la mesure du possible, il devrait également être possible de télécharger, pour vos ordinateurs personnels, la version d'évaluation valide pour une période de 30 jours. Comme chaque étudiant et étudiante est responsable de ses données propres, et chaque équipe, de ses données communes, il est préférable de se munir de dispositifs de sauvegarde de qualité (clés USB de bonne taille, disque dur portable, et/ou cd-rom et dvd-rom réinscriptibles), voire l'utilisation de services de stockage de données et de documents en ligne. N. B. : Vous remarquerez que le serveur Sirius, sur lequel vous disposez tous d'espace de stockage, n'est pas accessible par Internet (c'est-à-dire de l'extérieur de la Faculté). 8. Projet de contenus et calendrier N. B. : Dans ce qui suit, on remarquera que les contenus et l ordre de leur traitement sont présentés de manière indicative; ils sont sujets à changement selon la progression du groupe. Période 1 (8 janvier) : Présentations mutuelles et présentation du plan de cours : objectifs, contenus, méthodologie (déroulement, matériel et documentation), travaux et évaluations, projet de calendrier. Visite du site des notes de cours. Introduction au Web multimédia et aux préoccupations nécessaires des
webmestres : résolution d écran, matériel de l internaute, bande passante, etc. Principes de base d une «bonne» page Web (mise en page, poids des fichiers, style rédactionnel, etc.). Principes d ergonomie. Présentation des évaluations. En classe : activation de votre compte d hébergement sur le serveur Espace Web et discussions pour la formation des équipes. Période 2 (15 janvier) : Les pages Web (différentes mises en forme et structures possibles), leurs principales composantes et leurs «dessous» (page info et page source). Premier contact avec un éditeur HTML, sa logique, ses principales fonctions à l'occasion d'une introduction à Dreamweaver. L'utilité du fichier index.html. Le langage de balisage HTML, ce qu'il fait et comment le faire. Finalisation des équipes. Distribution de l énoncé du TP 1 d'équipe. Période 3 (22 janvier) : Les hyperliens (adresses relatives et absolues, liens mailto, liens vers points d ancrage). Les différents modes de mise en forme (DIV, cadres, tableaux). La mise en page en DIV avec l aide des styles CSS. Principes de base et intérêt des feuilles de style CSS, comment modifier les valeurs par défaut des balises HTML, comment créer et paramétrer des classes. Comment associer des feuilles CSS à une page Web. Distribution de l énoncé du TP 2 d équipe. Période 4 (29 janvier) : Suite et fin des styles CSS : l'utilisation «avancée» des styles. Les notions de priorité d'application et d'héritage des propriétés. Révision du logiciel de transfert de fichiers FTP FileZilla. En classe : activation d un accès partagé pour compte d équipe sur le serveur Espace Web. Période 5 (5 février) : Remise du TP 1 d'équipe (les textes). Principes et modalités de la création d'un menu interactif en HTML/CSS. Avancement en classe du TP 2 d équipe (présence en classe obligatoire). Période 6 (12 février) : Début de l'imagerie (format vectoriel contre matriciel, palettes, compression, anticrénelage, etc.). Caractérisation des principaux formats graphiques (.gif/gif animé,.jpg,.png) utilisés pour le Web. Examen de leur intérêt et de leurs limites. Sauvegarde et insertion d'images dans une page Web. Période 7 (19 février) : Fin de l'imagerie : Mise en transparence d images pour le Web (GIF, PNG). Création de favicons. Intégration combinée des principes d'imagerie et des styles CSS pour rehausser l'apparence graphique d'un site tout en respectant les principes d'ergonomie (images d'arrière-plan, coins arrondis, etc.). Distribution de l énoncé du TP individuel sur l imagerie. Révision en vue de l examen de mi-session. 7
Période 8 (26 février) Examen de mi-session (durée : 1 h 30). Au retour de l examen : l'utilisation des Web fonts, aspects techniques et précautions d'usage. L'exemple du service en ligne Google Fonts. Introduction au JavaScript et aux bibliothèques (jquery); leur logique et leur intérêt, leurs particularités et utilités, les modalités particulières de leur utilisation et de leur configuration. Début de la configuration et de l'intégration d'un gadget logiciel jquery. Période 9 (12 mars) *Relâche (5 mars)* Remise en ligne du TP 2 d'équipe. Suite et fin de JavaScript / jquery. Principes et modalités de création d'une feuille de style d impression. Distribution de l énoncé du TP3 d équipe. Période 10 (19 mars) Introduction à la notion de compression (audio et vidéo) : ses raisons d'être, ses principes, sa logique, etc. L'audio sur le Web: principaux formats et codecs, dans une perspective d'utilisation de la balise HTML5 <audio>. Examen de leur intérêt et de leurs limites. Les principes de la compression audio et modalités de diffusion. Enregistrement sonore et compression audio à l aide du logiciel Adobe Audition; diffusion du fichier sonore produit dans une console de lecture et par l'entremise d'un lien de téléchargement. Période 11 (26 mars) Remise en ligne du TP 1 individuel. La vidéo sur le Web : principaux formats et codecs, dans une perspective d'utilisation de la balise HTML5 <video>. Examen de leur intérêt et de leurs limites. Les principes de la compression vidéo et modalités de diffusion. Compression vidéo à l aide du logiciel Adobe Premiere; diffusion du fichier vidéo produit dans une console de lecture et par l'entremise d'un lien de téléchargement. Période 12 (2 avril) Suite et fin de l'audio, de la vidéo et de leur mise en ligne. Avancement du TP 3 d'équipe. Période 13 (9 avril) Notions théoriques sur le formulaire de courriel en PHP et l approche «côté serveur». Paramétrage et inclusion du script de courriel dans une page Web. Mise en forme du formulaire au moyen de styles CSS. Période 14 (16 avril) Quelques notions de base liées à l'accessibilité des sites Web. Révision en vue de l examen final. Temps accordé en classe pour régler les derniers détails de l étape finale du TP en équipe. Période 15 (23 avril) Examen final (durée de 2 h 30) Remise en ligne du TP3 d équipe (au plus tard le vendredi 24 avril, minuit) 8