INTERFACES VIRTUELLES - 570-G22-VM

Cégep du Vieux Montréal | Département de graphisme Plan de cours | Interfaces virtuelles | Hiver 2016 INTERFACES VIRTUELLES 570-G22-VM PLAN DE COURS Pondération du cours | 1-2-1 Session | Hiver 2016 Compétences | 0536 Programme | Graphisme Professeur(s) | Christopher Scully, Jean-François Pariseau Département de graphisme | bureau A5.33 Courriels | cscully@cvm.qc.ca, jfpariseau@cvm.qc.ca

Cégep du Vieux Montréal | Département de graphisme Plan de cours | Interfaces virtuelles | Hiver 2016 1 | Compétence visée par le cours 0536 Effectuer des mises en pages simples pour des interfaces visuelles Partiel : 45h/165h ÉLÉMENTS DE COMPÉTENCE OBJETS D’APPRENTISSAGE BALISES DE CONTENU 1.

Analyser le projet 1.4 Analyser le design graphique d’une maquette de présentation - Les composantes de la mise en page. - Le positionnement des éléments de mise en page en fonction des caractéristiques du média de présentation 1.5 Analyser des exigences techniques de diffusion électronique - L’étude des paramètres techniques du média de présentation 2. Construire le document de mise en pages 2.1 Fabriquer un dossier racine - Les notions de chemin relatif lors de la sauvegarde des fichiers - La gestion des fichiers informatiques 2.2 Élaborer des grilles de mise en pages - La structure des grilles de mise en page 2.3 Organiser des conteneurs de textes et d’images - Le choix des éléments HTML (balises) appropriés en fonction de leur contenu - La gestion de ces éléments dans un contexte de structure HTML 2.6 Utiliser le logiciel - Le choix du logiciel approprié en fonction des particularités du produit 2.7 Respecter la maquette de présentation - Les composantes de la mise en page - Le positionnement des éléments en fonction du média de présentation et de la maquette de présentation 2.8 Respecter l’architecture de l’information - La hiérarchisation des éléments de mise en page en fonction de leur importance 2.9 Respecter les règles d’ergonomie - Le positionnement de la barre de menu - Les dimensions des éléments interactifs/ajustables - La prise en charge de la surface de visionnement (viewport) du média de présentation 4.

Intégrer les textes 4.1 Importer et positionner des textes - L’acquisition de texte - Le téléversement des textes dans la mise en page finale 4.3 Attribuer des effets d’interactivité - Le système de navigation de la présentation à l’aide de: - CSS (Cascade Style Sheet) - Javascript (jQuery), etc. 4.4 Utiliser le logiciel - Les possibilités et les limites du logiciel utilisé pour la production de la mise en page 4.5 Respecter les niveaux hiérarchiques - L’attribution des styles typographiques (CSS) sur les éléments de texte en fonction de l’hiérarchie établie précédemment 4.7 Respecter la maquette de présentation - Les composantes de la mise en page - Le positionnement des éléments en fonction du média de présentation et de la maquette de présentation 5.

Intégrer les éléments visuels 5.1 Importer et positionner des éléments graphiques et des images - La gestion d’images numérique - L’importation d’images ou de portions d’image 5.2 Appliquer et adapter des styles d’objets - La gestion des feuilles de style (CSS) 5.3 Attribuer des effets d’interactivité - Le choix de scripts appropriés en fonction de l’effet d’interactivité à reproduire - L’application des scripts 5.4 Utiliser un logiciel - Le choix du logiciel approprié selon l’opération à effectuer 7. Faire approuver la mise en page 7.3 Sauvegarder des fichiers - Les notions de chemin relatif lors de la sauvegarde des fichiers - La gestion des fichiers informatiques 7.4 Respecter des délais - Le respect des délais et contraintes - La planification soigneuse de la ligne de temps

Cégep du Vieux Montréal | Département de graphisme Plan de cours | Interfaces virtuelles | Hiver 2016 2 | Présentation générale du cours Description du cours Dans le cours Interfaces virtuelles, les élèves analyseront les composantes formant une présentation multimédia. Ils apprendront à analyser le mandat, concevoir un visuel, et le produire en utilisant un logiciel de traitement d’image, en vue d’une intégration ultérieure dans un prototype multimédia.

Le cours Interfaces virtuelles est reparti en trois étapes importantes pour I’élaboration de votre projet multimédia interactif: 1 — Scénarisation (concept) 2 — Traitement de I’image (contenu) 3 — Intégration (montage multimédia) à l’aide des langages HTML5/CSS3 Ce cours d’une durée de 45 heures est constitué d’un bloc de 3 heures alloué à la création et à l’intégration multimédia.

Votre cheminement à I’intérieur du cours vous rendra apte à concevoir et à produire un projet multimédia de manière professionnelle.

But du cours et lien avec le programme Ce cours, le premier d’une série de cinq qui se poursuivra dans Interfaces et application web, Web, Conception évènementielle I et Conception évènementielle II, initie les étudiants au monde spécifique du multimédia. La mise en page faite en multimédia se distingue du graphisme traditionnel particulièrement au niveau de la présentation du contenu c’est-à-dire, la typographie, la couleur et le support. L’étudiant apprendra donc à adapter ce qu’il a appris précédemment dans les autres cours du programme, au support particulier qu’est l’écran d’ordinateur, utilisé pour afficher des contenus pour des interfaces Web, des documents de présentation, des cellulaires, des livres électroniques, etc.

Pour rencontrer les objectifs du cours, l’étudiant utilisera un logiciel de traitement/création d’images et un logiciel de multimedia. Par ce cours, il comprendra ce qu’est le multimédia.

Cégep du Vieux Montréal | Département de graphisme Plan de cours | Interfaces virtuelles | Hiver 2016 Objectifs du cours Objectif global Effectuer des mises en pages simples pour des interfaces visuelles Objectifs spécifiques À la fin du cours, l’élève sera en mesure de : 0536 (P) Effectuer des mises en pages simples pour des interfaces visuelles - Analyser le projet - Construire le document de mise en pages - Préparer les textes - Intégrer les textes - Intégrer les éléments visuels - Tester le fonctionnement des éléments à même l’interface visuelle - Faire approuver la mise en page Organisation des activités d’enseignement et d’apprentissage Utilisant l’approche contextuelle, la démarche proposée amènera l’élève à faire sa propre réflexion sur la présentation de contenu à caractère multimédia.

L’élève aura à faire des choix esthétiques ainsi que fonctionnels, en soupesant les besoins et exigences de ces deux principaux axes de création. En faisant l’analyse d’exemples concrets, l’étudiant sera amené à comprendre les principes régissant la présentation et la distribution de contenu multimédia et à réaliser des concepts (maquettes) multimédias au niveau visuel. Le professeur proposera l’apprentissage et l’acquisition de nouvelles connaissances en regard d’aspects spécifiques de la présentation multimédia. La théorie enseignée sera suivie d’un exercice et d’une mise en contexte. Cette dernière est essentielle à la compréhension de l’utilisation de la nouvelle fonction logicielle enseignée.

Les activités d’évaluation L’évaluation formative Le volet production/intégration amènera l’élève à se questionner, à l’aide d’exemples, sur la manière de présenter le contenu multimédia soumis par le client/professeur. De plus, de nouvelles programmations lui seront soumises à titre d’exploration. Ce volet amènera aussi l’élève à intégrer toutes les notions et réflexions acquises lors des étapes de création et de production. L’évaluation sommative Durant la session, I’étudiant(e) devra concevoir et produire des projets portant sur les étapes suivantes:

Cégep du Vieux Montréal | Département de graphisme Plan de cours | Interfaces virtuelles | Hiver 2016 SCÉNARIO (volet création) 1.

L’originalité 2. Développement du concept (clarté) 3. Présence des éléments demandés 4. Compréhension des liens entre chaque «interface» 5. Distribution de tâches et harmonie (échéancier) 6. Lisibilité et orthographe TRAITEMENT DE L’IMAGE + TYPOGRAPHIE (volet création) 1. Qualité des images et modifications au besoin 2. Réalisation des éléments visuels (mise en page, boutons, fonds, photos) et typographiques INTÉGRATION (volet production/intégration) 1. La gestion des médias (polices, contenu texte et image) 2. Qualité de l’écriture du code HTML5/CSS3 3. Qualité de l’ossature de la page web (wireframe) 4.

Qualité de la navigation Chaque volet comporte une évaluation sommative basée sur les critères spécifiques à chacune des étapes. L’addition de ces trois notes représentera la note finale. Notre pratique d’évaluation sommative est basée sur le système des lettres: A = 90 B = 80 C = 70 D = 60 E = échec La répartition des notes est la suivante: Projet 1 30% Projet 2 30% Projet 3 40% Les aspects création et production/intégration sont évalués à parts égales.

Cégep du Vieux Montréal | Département de graphisme Plan de cours | Interfaces virtuelles | Hiver 2016 L’épreuve certificative L’étudiant devra faire l’idéation, la conception, la production et la diffusion d’un site web de 4 à 5 pages, en utilisant les technologies HTML5 et CSS3 de base. Contexte de réalisation - Pour des interfaces Web, des documents de présentation, des cellulaires, des livres électroniques, etc.

À partir d’une maquette de présentation, de l’information relative à l’architecture de l’information et du cahier des charges. - À partir de textes et d’éléments visuels.

À l’aide de chartes de couleurs. - À l’aide de bibliothèques de polices. - À l’aide de logiciels utilitaires, de mise en page et d’applications. - À l’aide de règles d’ergonomie. - À l’aide du média de destination. Critères généraux d’évaluation - Analyse juste des exigences techniques de diffusion électronique. - Respect de l’architecture de l’information et des règles d’ergonomie. - Utilisation appropriée du logiciel.

Attribution correcte des effets d’interactivités en respect des niveaux hiérarchiques. - Importation et positionnement corrects des éléments graphiques, des images et adaptation efficace des styles d’objets. - Attribution correcte des effets d’interactivités. - Téléversement appropriés des fichiers et bonne utilisation des fonctions de l‘interface visuel. - Validation de l’interactivité ainsi que la validation de la précision du positionnement des textes et des éléments visuels.

Ce qui est attendu de vous La théorie étant exposée une seule fois, vous devez absolument assister à chaque volet de tous les cours (voir notre politique départementale sur le site web à www.cvm.qc.ca/graphisme/politique-departementale.pdf).

Faire tous les exercices et travaux demandés et les remettre dans le temps requis. Réaliser les projets et cela en respectant les normes et les contraintes liées au cours. Tout travail doit être effectué entièrement par l’étudiant lui-même. L’espace réseau est obligatoire — nous vous suggérons 300MB. Apporter le matériel nécessaire à chaque cours. Autonomie, responsabilité, dynamisme et participation active.

Cégep du Vieux Montréal | Département de graphisme Plan de cours | Interfaces virtuelles | Hiver 2016 3 | Calendrier des activités Voir la liste complète des activités à l’adresse suivante: www.cvm.qc.ca/graphisme/web1/notes.htm Semaine 1 - Présentation du cours - Présentation de la profession de designer web - Historique de l’interface Semaine 2 - Le rôle du graphiste, définition du métier et des intervenants - Atelier Photoshop Semaine 3 - Étude des composantes d’une page web - État du design en 2015: tendances, normes, mobile, etc. - Atelier Photoshop Semaine 4 - Système de mesure (pixels) - Étude de la surface de visionnement (sizing) Semaine 5 - De l’ossature d’une page web (wireframe) à l’esquisse au final PS - Production de maquettes en fonction d’une interface (1) - Grilles de base en web Semaine 6 - Production de maquettes en fonction d’une interface (2) Semaine 7 - Découpage d’une maquette en fonction de leur diffusion en HTML (slicing) Semaine 8 - Le langage de programmation HTML5 (introduction) Semaine 9 - Le langage de programmation HTML5 (suite) - Le langage de programmation CSS3 (introduction) Semaine 10 - Les langages de programmation HTML5/CSS3 (suite) Semaine 11 - Les langages de programmation HTML5/CSS3 (suite) - Les polices personnalisées sur le web: en ligne vs locales Sem.

12-15 - Les langages de programmation HTML5/CSS3 (rappels) - Présentation de l’épreuve certificative - Conception et production d’un site web avancé

Cégep du Vieux Montréal | Département de graphisme Plan de cours | Interfaces virtuelles | Hiver 2016 4 | Matériel requis pour le cours Cahier de notes (de type cahier Canada ou équivalent) Clé USB — pour copies de sécurité et transferts Espace réseau de stockage:100 MB au minimum 5 | Médiagraphie Les notes de cours sont disponibles à l’adresse suivante: www.cvm.qc.ca/graphisme/web1 6 | Politique départementale Voir la politique départementale à l’adresse suivante: www.cvm.qc.ca/graphisme/politique-departementale.pdf

Vous pouvez aussi lire
Partie suivante ... Annuler