INTERFACE WEB ERGONOMIE DESIGN INTÉGRATION PROGRAMMATION COMMUNICATION

COLLÈGE JEAN-DE-BRÉBEUF Suzanne Roy DESIGN D INTERFACES ET INTÉGRATION WEB Bureau : B2.01 MED-A02-12 (514) 342-1320 # 5438 Suzanne.Roy@brebeuf.qc.ca www.idmuse.net HIVER 2014 FORMATION SPÉCIFIQUE : PROGRAMME ARTS ET LETTRES PROFIL CRÉATION MULTIMÉDIA ET COMMUNICATIONS CODE MEQ : 585-A02-BR PONDÉRATION : (2-1-3) 2 UNITÉS INTERFACE WEB ERGONOMIE DESIGN INTÉGRATION PROGRAMMATION COMMUNICATION CODE L OBJECTIF MINISTÉRIEL : 01D6 ÉNONCÉ DE LA COMPÉTENCE : Utiliser des techniques de création ou d interprétation du domaine des arts ou du domaine des lettres ÉLÉMENTS DE LA COMPÉTENCE : + Explorer différents procédés ou techniques de création ou d'interprétation + Expérimenter différents procédés ou techniques de création ou d'interprétation + Relier production de sens et utilisation de techniques ou de procédés de création ou d'interprétation DESCRIPTION DU COURS Le Web est un univers en constante évolution et sa principale plateforme, le site web, n en fait pas exception. Au cours des dernières années, le site web est devenu l outil de communication par excellence. C est un objet qui s est complexifié au point où aujourd hui, il regroupe toutes sortes de disciplines hyperspécialisées et de nombreuses étapes production bien définies. De plus, les outils permettant de réaliser un site web se sont multipliés et permettent de concevoir des pages pleinement fonctionnelles et intégrant une multitude de médias. C est dans cet esprit que le cours Design d interfaces et intégration web se veut offrir une base solide sur les particularités théoriques, techniques et esthétiques des nouveaux médias via la recherche, la structure, la mise en forme et surtout : la publication de contenu sur le Web. Les divers acquis se feront grâce à la création d interfaces, par l ajout, la conversion, l optimisation et la mise en ligne de médias, mais aussi par l exploration détaillée des différentes étapes de production d un site Web. OBJECTIFS GÉNÉRAUX DU COURS : Comprendre et appliquer les différentes étapes de production d un site Web Structurer du contenu et optimiser l écriture pour la lecture en ligne; Planifier l esthétique d une interface par rapport à son contenu; Maîtriser l interface des logiciels appris en classe et les utiliser de façon conjointe dans le cadre d un projet; Réaliser des sites Internet esthétiques, ergonomiques, fonctionnels et légers; Intégrer divers types de médias dans le cadre de vos productions. < 1 >

TRAVAUX DEMANDÉS SITE WEB PERSONNEL : «MOI» Création de votre premier site personnel sur une structure suggérée en classe. À travers ce site, vous devrez nous faire découvrir votre univers. Dans le cadre de cet exercice, 5 à 7 pages sont requises. Travail individuel. 10 + utilisation et maîtrise des concepts démontrés en cours... 6 Compréhension du logiciel, respect des consignes et planification du site, site publié (2) Tous les liens fonctionnels (2) Respect des règles de base (noms de fichiers, optimisation ) (2) + contenu intéressant et adapté au média... 4 Contenu adapté et structuré (1) Respect de la structure demandée, richesse du contenu (1) Interface esthétique et représentative de votre univers (2) REMISE DU TRAVAIL : 3 E SEMAINE 6 FÉVRIER SITE WEB VITRINE Création du site Web d un organisme, d un événement ou d une entreprise de votre choix. Utilisation des modèles, du design d interface, de l ergonomie, de l écriture web, du CSS et de l intégration de médias. Dans le cadre de cet exercice, 5 à 7 pages sont requises. Travail individuel. 10 + utilisation et maîtrise des concepts... 3 + technique... 4 + esthétique... 3 REMISE DU TRAVAIL : 7 E SEMAINE 13 MARS SITE WEB SUR UN INTERVENANT CULTUREL Sur un intervenant culturel de votre choix. Conception de la structure d un site et de son contenu. Dans le cadre de cet exercice, 12 à 15 pages sont requises. Travail en équipe de 2. 15 + planification, recherche et rédaction... 5 Planification, structure, écriture web, sources vérifiées et citées + compréhension du logiciel... 5 Respect des consignes, fonctionnalités du site + technique... 10 Modèle fonctionnel, CSS utilisés, design d interface, ergonomie, publication en ligne + esthétique... 5 Cohérence visuelle de l intégration, règles de mise en page appliquées REMISE DU TRAVAIL : 11 E SEMAINE 10 AVRIL < 2 >

MAGAZINE EN LIGNE En équipe, réalisation d une interface pour un magazine web culturel (pas une boutique) sur lequel vos articles (écrits en vue d une communication papier) seront revisités et adaptés au média web. Travail en équipe de 3 ou 4. 15 + recherche et rédaction... 5 Planification, structure, conversion et réactualisation du design papier en vue de la version web + technique... 5 Utilisation du CMS Wordpress, adaptation de l outil pour le sujet du site (design d interface, ergonomie, utilisation des extensions, des widgets et des thèmes), intégration de la version papier (pdf) au format flipbook + esthétique... 5 Cohérence visuelle de l intégration, transfert adéquat des éléments graphiques papiers en version Web. REMISE DU TRAVAIL : 14 E SEMAINE 1ER MAI ARTICLES Deux articles en lien avec votre magazine vous seront demandés. Thème à traiter en équipe, sujet à valider avec le professeur. 10 (2 TEXTES / 5 POINTS CHACUN) + texte... 5 choix et compréhension du sujet, qualité rédactionnelle (2) exemples concrets illustrant vos propos (1) remise : deux versions du même texte : traditionnelle + web (2) REMISE DU TRAVAIL : 12E ET 13E SEMAINE 17 ET 24 AVRIL EXERCICES EN ATELIER Deux ateliers vous permettront de vous familiariser avec divers langages web : html, css et php. Ces exercices, réalisés en classe, devront être compris et remis durant le cours. 25 + votre page d accueil... 5 + structure web... 5 + scénario utilisateur... 5 + mini portfolio... 5 + mon wordpress... 5 EXAMEN FINAL Réalisation d un site internet en laboratoire avec une structure et des consignes précises. 20 < 3 >

CONTENU DU COURS + Cet échéancier est également accessible sur le module Léa d Intraflex et sur le site www.idmuse.net 1 23.01 2 30.01 3 06.02 4 13.02 5 20.02 6 27.02 7 13.03 8 20.03 9 27.03 10 03.04 11 10.03 12 17.04 Présentation du plan de cours / Introduction au HTML Dreamweaver : les fonctions de base Dreamweaver : la suite TEMPS DE PRODUCTION : SITE MOI REMISE : PAGE D ACCUEIL () La publication et l indexation d un site REMISE : SITE MOI (10 %) Dreamweaver : les modèles, le CSS, l ergonomie REMISE : STRUCTURE WEB () Conception et planification d un site via sa structure TEMPS DE PRODUCTION : SITE VITRINE TEMPS DE PRODUCTION : SITE VITRINE REMISE : SCÉNARIO UTILISATEUR () REMISE : SITE VITRINE (10 %) Weebly et wix : la conception assistée en ligne TEMPS DE PRODUCTION : SITE INTERVENANT CULTUREL REMISE : MINI PORTFOLIO () REMISE : SITE INTERVENANT CULTUREL (10 %) Wordpress : installation et fonctions de bases Wordpress : personnalisation des thèmes REMISE : MON WORDPRESS () TEMPS DE PRODUCTION : SITE MAGAZINE TEMPS DE PRODUCTION : SITE MAGAZINE 10 % 10 % 10 % 13 24.04 REMISE : ARTICLES (2 VERSIONS) 10 % 14 01.05 REMISE SITE MAGAZINE (1) Révision en vue de l examen final 1 15 Examen final 20 % < 4 >

CONDITION DE RÉUSSITE AU COURS Pour réussir ce cours, le total de toutes les évaluations du cours doit être de 60 % ou plus. L évaluation finale correspond à 45% note globale. Les travaux représentants cette évaluation finale sont : + Site web vitrine (10 %) + Site web Magazine (1) + L examen final (20 %) La réussite du cours «Design d interface et intégration Web» doit témoigner de l atteinte des objectifs ministériels associés au cours, soit Utiliser des techniques de création ou d interprétation du domaine des arts ou du domaine des lettres INDICATIONS MÉTHODOLOGIQUES APPROCHE PÉDAGOGIQUE Ce cours est basé sur une pédagogie par projets. La partie magistrale du cours sera suivie d une période en atelier afin de favoriser les apprentissages. Par ce procédé, l étudiant pourra mettre en pratique l acquisition des concepts vus en classe dans le cadre d un projet concret. Ceci implique une autonomie de la part de l étudiant, car il devra planifier son temps en laboratoire et s assurer d avoir en sa possession tous les éléments nécessaires à la conception de ses travaux. LES TRAVAUX Sachez que lors d un travail en équipe, la présence est obligatoire pendant les ateliers. Une absence non motivée lors de ces ateliers sera pénalisée de par absence sur la note du travail de l étudiant absent. COMMENT REMETTRE SES TRAVAUX Le courriel permet d assurer une trace de vos documents ou de vos liens remis (ainsi que la date de remise). Pour des travaux de + de 10 Mo, utilisez l outil sur idmuse.net via la rubrique «contact» ou utilisez Dropbox en partage avec votre professeur. Dans tous les cas, les documents doivent être nommés avec la nomenclature suivante : nom_titredutravail.(doc, pdf, psd) LOGICIELS VUS EN CLASSE CETTE SESSION Adobe Dreamweaver CS6 Adobe Photoshop CS6 Wordpress RÈGLEMENTS PÉDAGOGIQUES PLAGIAT ET FRAUDE 8.1 Toute fraude, collaboration à une fraude ou tentative de fraude, dans tout travail, contrôle ou examen, entraîne un avertissement accompagné d une pénalité pouvant aller jusqu à l attribution de la note zéro pour cette évaluation et de la soustraction de la valeur de cette évaluation à la note globale de la session. 8.2 Tout plagiat, collaboration à un plagiat ou tentative de plagiat, dans tout travail, contrôle ou examen, entraîne un avertissement accompagné d une pénalité pouvant aller jusqu à l attribution de la note zéro pour cette évaluation et de la soustraction de la valeur de cette évaluation à la note globale de la session. 8.3 Toute fraude, collaboration à une fraude ou tentative de fraude, de même que tout plagiat, collaboration à un plagiat ou tentative de plagiat, doit être rapportée à la Direction des études qui pourra déposer une note à cet effet dans le dossier de l étudiant, et en aviser l étudiant ainsi que ses répondants. < 5 >

Il y a plagiat si : a) dans tout objet d évaluation (travail, contrôle, examen, rapport, exposé ou autre), toute source consultée ou utilisée, en tout ou en partie, provenant d une œuvre protégée ou non par des droits d auteur, ou produit par un professeur, un collègue, un étudiant ancien ou actuel du Collège ou autre, n est pas indiquée en bibliographie ou médiagraphie. Ou encore si : b) dans tout objet d évaluation (travail, contrôle, examen, rapport, exposé ou autre), tout texte, schéma ou autre source utilisée, en tout ou en partie, provenant d une œuvre protégée ou non par des droits d auteur, ou produit par un professeur, un collègue, un étudiant ancien ou actuel du Collège ou autre, n est pas indiqué de manière précise (extrait entre guillemets s il s agit de texte) et avec une note en bas de page, en fin de document ou en légende. Des renseignements supplémentaires sur le plagiat et ses conséquences se trouvent à l article 8 des règlements pédagogiques. POLITIQUE SUR LA LANGUE FRANÇAISE Le français est la langue d usage obligatoire dans tous les travaux. Même dans le cadre d un cours de multimédia, il est essentiel de connaître et d utiliser les termes francophones exacts dans vos travaux. Selon l article 2.1.6.2 des règlements pédagogiques, un étudiant peut perdre jusqu à 20% des points dans la remise d un travail et jusqu à 10 % des points dans un examen à cause d erreurs de ponctuation, de syntaxe ou d orthographe. En cas de besoin, n hésitez pas à prendre rendez-vous avec le Centre d aide et de perfectionnement en français. PRÉSENCES AUX COURS Une période correspond à 50 minutes. L article 4 des règlements pédagogiques indique que tout étudiant en retard peut se voir refuser l entrée au cours. Trois retards équivalent à une absence. La présence au cours est obligatoire. Outre des absences motivées, tout autre absence sera cumulée et pourra faire diminuer la note de présence et de participation au cours. RETARDS DES TRAVAUX Les travaux remis en retard seront pénalisés en conformité avec la politique départementale. 5% par jour de retard seront retirés de la note, et ce, jusqu à l obtention de la note 0. Le multimédia permettant la remise de travaux par courrier électronique en tout temps, le retrait du 5% sera appliqué tous les jours de la semaine, incluant le samedi et le dimanche. OBJETS TECHNOLOGIQUES Les objets technologiques (notamment les baladeurs et les cellulaires) ne sont pas les bienvenus en classe. Éteignez-les et rangez-les durant les cours. Cependant, conservez vos écouteurs pour les ateliers. RÈGLES DE SÉCURITÉ En cas d urgence, repérez un téléphone rouge dans les lieux du Collège et composez le 100. Ce numéro vous mettra en lien avec la sécurité du Collège. < 6 >

ACHAT REQUIS AU COURS Aucun achat n est requis pour ce cours Cependant, vos notes de cours ainsi que plusieurs tutoriels se trouvent sur le site du professeur : idmuse.net. Prenez le temps de réviser la matière et de pratiquer vos acquis. Le site contient diverses ressources et des liens pertinents pour vous aider dans vos apprentissages. MATÉRIEL REQUIS Vous devez vous procurer une clé USB de bonne capacité ou un disque dur portable pour faire une sauvegarde de vos documents. LECTURES OBLIGATOIRES Il n y a aucune lecture obligatoire pour ce cours, mais les notes de cours et des articles offerts sur www.idmuse.net ainsi que les livres et les sites Web de la médiagraphie peuvent vous guider dans le cadre de vos productions. < 7 >

MÉDIAGRAPHIE + LIVRE ALTINIER, Armony. Accessibilité Web, Eyrolles, Paris, 2011 BOUCHER, Amélie. Ergonomie Web 3e éd., Eyrolles, 2011 BOYLE, Cailin. L harmonie des couleurs sur le Web, Montréal, Les éditions de l Homme, 2002 CEDERHOLM, Dan. CSS3 pour les web designers, Eyrolles, Paris, 2011 GUÉNEAU, Grégory et Olivier SALVATORI. Conduite de projets en création numérique, Paris, Eyrolles, 2005 JOANNÈS, Alain. Communiquer en rich media : structurer les contenus en optimisant texte, sons, images et liens, Paris, CFPJ, 2009 KEITH, Jeremy. HTML5 pour les Web designers, Eyrolles, Paris, 2011 KISSANE, Erin. Stratégie de contenu web, Eyrolles, Paris, 2011 MARCOTTE, Ethan. Responsive web design, Eyrolles, Paris, 2011 NIELSEN, Jakob. Site Web : priorité à la simplicité, Campuspress, Paris, 2007 PIPES, Alan. Concevoir un site web, Pyramyd, Paris, 2011 PROULX, Serge. La révolution Internet en question, Québec Amérique, 2004 ROUQUETTE, Sébastien. L'analyse des sites Internet : une radiographie du cyberespace, De Boeck, 2009 SIEGEL, David. Secrets des sites Web qui réussissent, Paris, Simon & Schuster Macmillan, 1997 SZILAS, Nicolas et Jean-Hugues RÉTY. Création de récits pour les fictions interactives : simulation et réalisation, Paris, Hermès, 2006 WIEDEMANN, Julius. Web design : Navigation, Taschen, Italie, 2009 WILLARD, Wendy. Web Design, 2e éd., McGraw Hill, USA, 2010 LESAGE, Jérôme, Adobe Photoshop CS5, Le guide complet, Micro Application, Paris, 2010 CHOUQUETTE, Francis, WordPress, Toutes les clés pour créer, maintenir et faire évoluer votre blog, Le Campus, Pearson, Paris, 2009 ADOBE CLASSROOM IN A BOOK, Pearson : Dreamweaver et Photoshop et Illustrator (version CS5), 2009 + WEB http://www.ergolab.net/ http://tv.adobe.com/ http://www.tutsps.com http://www.webdesign-tutoriaux.com http://www.wks.fr http://www.siteduzero.com http://www.deviantart.com http://sxc.hu D autres sites ressources sont disponibles sur www.idmuse.net < 8 >