INTERFACES VIRTUELLES - 570-G22-VM PLAN DE COURS - Cégep du Vieux Montréal
←
→
Transcription du contenu de la page
Si votre navigateur ne rend pas la page correctement, lisez s'il vous plaît le contenu de la page ci-dessous
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 20161 | Compétence visée par le cours
0536 Effectuer des mises en pages simples pour des interfaces visuelles
Partiel : 45h /165h
ÉLÉMENTS DE OBJETS D’APPRENTISSAGE BALISES DE CONTENU
COMPÉTENCE
1. Analyser le 1.4 Analyser le design - Les composantes de la mise en page.
projet graphique d’une - Le positionnement des éléments de mise en page en fonction des
maquette de présentation caractéristiques du média de présentation
1.5 Analyser des exigences - L’étude des paramètres techniques du média de présentation
techniques de diffusion
électronique
2. Construire le 2.1 Fabriquer un dossier - Les notions de chemin relatif lors de la sauvegarde des fichiers
document de racine - La gestion des fichiers informatiques
mise en pages
2.2 Élaborer des grilles de - La structure des grilles de mise en page
mise en pages
2.3 Organiser des conteneurs - Le choix des éléments HTML (balises) appropriés en fonction de leur contenu
de textes et d’images - 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 - Les composantes de la mise en page
présentation - 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 - La hiérarchisation des éléments de mise en page en fonction de leur importance
de l’information
2.9 Respecter les règles - Le positionnement de la barre de menu
d’ergonomie - 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 4.1 Importer et positionner - L’acquisition de texte
textes des textes - Le téléversement des textes dans la mise en page finale
4.3 Attribuer des effets - Le système de navigation de la présentation à l’aide de :
d’interactivité - 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 - L’attribution des styles typographiques (CSS) sur les éléments de texte en
hiérarchiques fonction de l’hiérarchie établie précédemment
4.7 Respecter la maquette de - Les composantes de la mise en page
présentation - Le positionnement des éléments en fonction du média de présentation et de la
maquette de présentation
5. Intégrer les 5.1 Importer et positionner - La gestion d’images numérique
éléments visuels des éléments graphiques - L’importation d’images ou de portions d’image
et des images
5.2 Appliquer et adapter des - La gestion des feuilles de style (CSS)
styles d’objets
5.3 Attribuer des effets - Le choix de scripts appropriés en fonction de l’effet d’interactivité à reproduire
d’interactivité - L’application des scripts
5.4 Utiliser un logiciel - Le choix du logiciel approprié selon l’opération à effectuer
7. Faire approuver 7.3 Sauvegarder des fichiers - Les notions de chemin relatif lors de la sauvegarde des fichiers
la mise en page - 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 20162 | Présentation générale du cours
Description du cours
Dans le cours Interfaces virtuelles, les élèves analyseront les composantes formant une présen-
tation 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 tra-
ditionnel 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 cel-
lulaires, 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 com-
prendra ce qu’est le multimédia.
Cégep du Vieux Montréal | Département de graphisme
Plan de cours | Interfaces virtuelles | Hiver 2016Objectifs 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 prin-
cipaux 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 fonc-
tion 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 nou-
velles 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 2016SCÉ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 2016L’é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/poli-
tique-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 300 MB.
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 20163 | 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 20164 | 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
Cégep du Vieux Montréal | Département de graphisme
Plan de cours | Interfaces virtuelles | Hiver 2016Vous pouvez aussi lire
