Cours 420-B53-VM - cvm.qc.ca Programmation en...BOUCHER Amélie, Ergonomie web illustrée, Éditions Eyrolles, 2011, ISBN: 978-2-212- 12695-2 FELKE-MORRIS, Terry, Web Development and

Département d’informatique, Cégep du Vieux Montréal

Cours 420-B53-VM

Programmation en environnement

graphique

Pondération : 2-3-2

Programme : Techniques de l'informatique 420.A0

Voie de spécialisation : Informatique de gestion

Préalables : Programmation objet avancée ( 420-B43 )

Compétence visée : Concevoir et développer une application dans un environnement graphique ( 017C )

Produire une interface utilisateur ( 016X )

Session : Automne 2013

Professeur et coordonnées

Nom : Éric Labonté Courriel : [email protected]

Local : A5.37 Tél. : ( 514 ) 982-3437 poste 7982

Site web : www.cvm.qc.ca/elabonte


2

Ce plan de cours a été adopté par le département d'informatique lors de sa réunion de

juin 2010

Présentation générale du cours

Renseignements généraux

Le programme de technique de l’informatique vise à former des technicien(ne)s aptes à

développer et implanter des applications, exploiter du matériel informatique, exploiter

des bases de données, assurer du soutien technique et gérer des réseaux.

Brève description du cours

Ce cours vise à présenter les études faites au niveau de l’utilisabilité ( ergonomie ) de sites

web et d’applications portables. Les étudiants pourront appliquer les résultats de ces

études dans l’élaboration d’un site web utilisant de façon poussée les CSS ainsi qu'en

développant des applications portables Android.

But du cours et lien avec le programme de formation

À l’aide des principes vus en classe, les étudiants en viendront à

développer un design web adéquat incluant des éléments multimédias ( images,

sons).Ils développeront également des applications portables tout en relevant les défis

ergonomiques de ces nouvelles technologies. Le développement de ces applications

portables intégrera des interfaces utilisateur, un accès à des ressources

internet et à un système de bases de données intégré.

On vérifiera l’atteinte de la compétence 016X amorcée lors du cours B43 et celle de la

compétence 017C.

Objectifs intégrateurs de ce cours Au terme de ce cours, l’étudiant devra être capable de créer un site web et une

application portable Android selon des normes ergonomiques.


3

Objectifs spécifiques :

• Apprendre et appliquer des critères ergonomiques afin de rendre une application / un

site web plus facile à utiliser

• Développer une page HTML en utilisant de façon poussée les CSS ( Cascading Style

Sheets )

• Concevoir, développer et installer une application mobile sur un téléphone portable

ou un émulateur

Compétences ministérielles

016X Produire une interface utilisateur

Analyser les caractéristiques des utilisatrices et des utilisateurs

Établir les caractéristiques d’interaction

Choisir des périphériques d’entrée et de sortie

Planifier l’organisation globale de l’interface

Procéder à la programmation de l’interface utilisateur

017C Concevoir et développer une application dans un environnement graphique

Établir le cadre général de l’application

Préparer le travail de développement de l’application

Modéliser l’application

Programmer l’application

Produire la documentation relative à l’application

Organisation des activités d'enseignement et d'apprentissage

Le cours se déroulera entièrement en laboratoire. Plusieurs aspects caractériseront ce cours. L’étudiant pourra se familiariser avec les concepts-clés relatifs à l’ergonomie des sites web par des lectures et des études de cas. Il pourra les mettre en œuvre en classe dans le développement des pages web utilisant les langages XHTML et HTML5, les feuilles de style CSS et les animations Flash. Ultimement, une application web d’importance devra être développée.


4

D’autre part, l’étudiant développera des applications destinées à des appareils portables de technologie Android; l’étudiant pourra programmer ces applications avec le langage Java en tenant compte des défis technologiques que ces nouveaux appareils amènent ( taille de l’écran, utilisation d’un émulateur, dimensions relatives ). Les cours viseront majoritairement l’apprentissage par la pratique en abordant divers éléments à l’aide d’exercices pratiques à réaliser en classe sur ordinateur. Certains travaux devront être réalisés en partie en l’extérieur de la classe. Ces travaux seront notés selon les critères suivants :

Respect des normes ergonomiques étudiées

Fonctionnalité de l’application / du site web

Organisation du code en respect des principes vus en classe

Originalité du design

Ce qui est attendu de vous au niveau du comportement :

Une présence active à chacun des cours :

o la présence aux cours est fortement encouragée; en fait elle s’est avérée

directement proportionnelle à la note obtenue par le passé.

Aucun travail autre que celui du cours ne sera toléré durant les périodes de cours

Il est interdit de manger ou de boire dans les locaux informatiques

Votre téléphone intelligent ou non doit être fermé

Arriver quelques minutes avant le début du cours afin d’être en état

d’apprentissage lors du début du cours

Ce qui est attendu de vous au niveau de vos compétences :

Etre capable de s’auto-évaluer et d’aller chercher de l’aide s’il y a problème.

Faire les travaux demandés et les remettre dans les délais prévus

Manifester une attitude positive et agréable envers ses collègues et l’enseignant.


5

Périodes de disponibilité

jour heures

lundi

mardi 14h25 - 16h10

mercredi 9h50 - 11h35

jeudi

vendredi 9h50 - 10h40 *** Bien entendu, on peut se rencontrer à d'autres moments si nécessaire. Vous pouvez également me contacter par courriel : [email protected] ou par MIO.

Les activités d'évaluation

La note finale de l'étudiant sera calculée selon les normes énoncées ci-dessous :

Évaluation Nombre Pondération Dates importantes

Examens 2 35% Examen HTML/CSS : Vendredi 20 septembre

Examen de mi-session : date à déterminer

Travaux 2 15%

Épreuve certificative

Examen final 1 35% Mercredi 11 décembre

Projet 1 15% Lundi 16 décembre

Remarques : Examens :

Toute documentation sera permise lors des examens

La présence aux contrôles et aux examens est obligatoire. Voir Annexe à la fin du document.


6

Travaux / projet :

Les travaux et le projet seront remis de manière individuelle et doivent être réalisés de manière individuelle également ( travaux dont certaines parties ou le tout sont identiques se verront octroyer la note 0 )

Les travaux devront être remis dans le module de remise de LÉA. Les modalités de remise des travaux seront expliquées en classe.

Dans la situation exceptionnelle où vous ne pouvez pas remettre un travail à la date de remise convenue, une pénalité de 10% par jour ouvrable de retard sera appliquée. Aucun retard ne sera permis pour la remise du projet final

Double seuil : Afin de réussir ce cours, l’étudiant devra obtenir : • Une moyenne d’au moins 60% dans l’ensemble des évaluations • Une moyenne d’au moins 60% dans l'épreuve certificative de ce cours ( voir page

suivante ). Si l'étudiant n'obtient pas 60% dans l'épreuve certificative, il n'aura pas réussi le cours même si sa moyenne dans l'ensemble des évaluations est supérieure à 60%. La note de 55% sera attribuée à un étudiant dans cette situation improbable mais mathématiquement possible.

Activités de synthèse ( Épreuve certificative )

Deux mesures permettront d’évaluer l’atteinte des éléments visés par les compétences et seront donc considérés comme activité synthèse de ce cours :

1) Un examen vérifiera la matière vue durant la session. Il combinera une partie écrite et une partie à réaliser à l’ordinateur consistant à programmer une page web et une application pour téléphone portable Android.

2) Un projet où l’étudiant devra, à partir d’un énoncé décrivant une situation réelle :

Analyser le contexte, faire de la cueillette d’informations et préparer le design ( Activités ) d’une application Android

Coder l’application comme telle

Rendre l’application la plus ergonomique possible en tenant compte des concepts vus en classe

Tester, documenter le projet et remettre un produit fini


7

Contexte de réalisation : Le projet sera fait individuellement par les étudiants en fin de session Critères généraux d’évaluation : L’évaluation du projet se fera en deux phases afin d’aider au maximum les étudiants à réussir l’ensemble de l’activité et avoir ainsi en mains un projet fonctionnel et stimulant à la fin de la session. L’évaluation du projet s’appuiera sur les points suivants :

• La recherche des informations, du contenu de l’application • L’organisation du code respectant les principes orientés objet • La fonctionnalité de l’application soumise

Calendrier des activités

Module Sujets abordés Activités

1 Révision XHTML

Balises d’entête

Balises de listes

Balises de liens

Validation W3C

Annexes 1 à 6

Nombreux exercices en classe

Notes de cours supplémentaires en classe

2

Feuilles de style CSS

Sélecteurs, propriétés

Sélecteurs spéciaux ( class, id )

Marges, paddings, bordures

Dimensions, polices, couleurs

Balises div, span

Éléments de bloc vs éléments inline

Pseudo-classes

Utilisation d’images

Nouveautés CSS3 / HTML5

3

Design d’une page web

Propriété float, clear

Types de layouts ( fixe, liquide, semi-liquide ) , modèles

Propriété position

Annexes 7 à 10

TP1 ( 10% )

Examen 1 ( 10%)


8

4

Utilisation de logiciels de dessin vectoriel

Utilisation de Adobe Illustrator

Dégradés

Masque d’opacité

Calques

Sauvegarde d’images sous forme matricielle

Notes de cours en classes

Annexe 11

5 Utilisabilité / ergonomie

Utilité vs utilisabilité d'un site web

Efficience

Tests d'utilisabilité

Loi de Fitts

Critères ergonomiques de Bastien et Scapin

Lois de la Gestalt

Conseils de navigation

Notes de cours en classe

TP2 ( 5% )

6 Développement d'un site Web mobile

Responsive design

Reconnaitre un navigateur ayant une petite résolution

notes de cours en classe

Examen de mi-session ( 25% )

7 Applications Android

Créations de projets, d’Activités

Émulateur

Cycle de vie d’une Activité, gestion des événements reliés à ce cycle

LinearLayout, RelativeLayout : dessiner une interface utilisateur

Développer des listes

Annexes 1 à 6 ( Android )

Exercices en classe

notes de cours en classe

8 Android – utiliser des Intentions

Transmettre des infos d’une Activité à l’autre ( Bundle )

Utiliser des Intentions afin de démarrer des activités de base ( Internet, contacts )

9 Android – utiliser la base de données SQLite

Créer la base de données

Créer la table SQLIteOpenHelper

Requêtes, notion de Cursor

Jeux : Les scènes, les sprites, les particules, le son


9

10 Épreuve certificative Projet Final ( 15 % )

Examen Final ( 35% )

Environnement du cours Environnement:

Système d’exploitation Windows 7

Logiciels Adobe Dreamweaver CS5, Illustrator CS4

Eclipse Helios SR2 ( disponible dans Logiciels Libres )

Android SDK Manager Ordinateurs disponibles :

Chaque élève doit disposer d'un micro-ordinateur pour toutes les périodes du cours.

Matériel requis pour le cours

Livre obligatoire : Aucun matériel spécifique n'est requis pour ce cours. Cependant, je vous recommande un abonnement à la Grande Bibliothèque ( gratuit ) . Vous pouvez avoir accès à un grand nombre de livres virtualisés, explications en classe.

Notes de cours / annexes :

À télécharger sur le site web : www.cvm.qc.ca/elabonte ou bien dans l’espace LÉA

Médiagraphie

Livres BOUCHER Amélie, Ergonomie web illustrée, Éditions Eyrolles, 2011, ISBN: 978-2-212-12695-2 FELKE-MORRIS, Terry, Web Development and Design Foundations with XHTML, 2009, Pearson/Addison-Wesley, 639 pages, ISBN-13 : 978-0-321-53019-6 LAFRENIÈRE, Daniel, Le Design Web Raisonné, Editions Logiques, 2005

LAWSON Bruce et Remy Sharp, Introducing HTML 5 ( 2nd edition ), 2011, Pearson, 240 pages, ISBN : 9780321687296

http://www.cvm.qc.ca/elabonte


10

MCGRATH Mike, CSS in Easy Steps, 2009, In Easy Steps Ltd., 142 pages, ISBN : 978-1-84078-364-3 NIELSEN Jakob et Hoa LORANGER, Site Web : Priorité à la simplicité, 2007, Campus Press, 403 pages, ISBN : 978-2-7440-2152-7 PROEHLICH Christopher, Android App Development , Penguin Group, 2011, 403 pages, ISBN : 978-1-61564-1-062 SAWYER MCFARLAND, David, CSS The Missing Manual, 2009, O’Reilly, 538 pages, ISBN : 978-0-596-80244-8 WEI MENG, Lee, Beginning Android Application Development, 2011, Wiley, ISBN : 978-1-118-01711-1 WILLARD, Wendy, Web Design : A Beginner’s Guide, 2010, McGraw – Hill, 364 pages, ISBN: 978-0-07-170134-1

ZELDMAN, Jeffrey, Designing with Web Standards, 2003, New Riders, 436 pages, ISBN : 0-7357-1201-8

SItes web Des articles provenant de sites web sont également disponibles sur mon site web : cvm.qc.ca/elabonte ( section liens ou blogue )

Politique départementale

Département des techniques de l'informatique

Résumé des règles d’encadrement départementales relatives

à l’évaluation des apprentissages (adopté le 16 mars 2010)

Ces règles précisent certaines modalités relatives à la Politique d’évaluation des apprentissages du cégep du

Vieux Montréal. Nous invitons les élèves à la consulter :

www.cvm.qc.ca/cegep/reglesPolitiques/Documents/PolitiqueEvaluationApprentissages.pdf

MODALITÉS DE REPRISE.

Si, pour des raisons exceptionnelles, un élève n’a pu se présenter à la date prévue pour un test ou un

examen, le professeur peut l’autoriser à reprendre ce test ou cet examen si la raison de l’absence est

consignée et agréée par écrit par le professeur; l’élève subit alors un examen dans les délais qui lui sont

impartis et selon les conditions fixées par le professeur. Dans le cas où l’absence n’est pas agréée par

le professeur, l’élève obtient la note zéro (0).

http://www.cvm.qc.ca/cegep/reglesPolitiques/Documents/PolitiqueEvaluationApprentissages.pdf


11

L’absence lors d’une épreuve synthèse de programme entraîne la note zéro (0), à moins que cette

absence ne soit justifiée auprès de la coordination du département qui décidera avec les professeurs et

les professionnels concernés des mesures à prendre. La réussite de l’épreuve synthèse est une condition

d’obtention du diplôme d’études collégiales. Les consignes relatives à l’absence à l’épreuve synthèse

doivent être communiquées à chaque session aux élèves concernés.

ÉVALUATION.

a) Évaluation du français. La pondération liée à la qualité du français de tout travail écrit en français est de 10%. Les travaux

sont corrigés à l’aide de la grille simplifiée. Chaque faute comptera pour 0.2 point.

b) Plagiat et fraude.

Le plagiat ou la fraude au cours d’un examen ou d’un travail entraîne automatiquement la note zéro

(0) pour cet examen ou ce travail.

Un second cas de plagiat ou fraude entraîne l’échec du cours.

c) Absence aux cours.

L’absence au cours peut entraîner un échec lorsque la présence au cours est reconnue comme

essentielle à l’atteinte d’objectifs précis prévus au plan cadre de ce cours et identifiés au plan de cours.

Le cas échéant, toute absence non motivée par une raison de santé sera sanctionnée suivant les

modalités prévues au plan de cours.

d) Présence au cours.

En général, et à moins d’indication contraire au plan de cours, il n’y a pas de pénalité pour une

absence au cours. Cependant, le département d’informatique constate une forte corrélation entre la

présence au cours et la réussite du cours. Dans cette optique, il encourage fortement la présence et la

participation au cours. L’étudiant absent au cours se verra attribuer la note zéro pour sa participation

lorsque celle-ci est obligatoire et prévue au plan de cours.

e) Participation à certaines activités. L’élève absent au cours se verra attribuer zéro (0) pour sa participation lorsque celle-ci est

obligatoire et prévue au plan de cours. Cependant, un maximum de 10% de la note finale peut être

obtenu ainsi, suite à la participation à certaines activités pédagogiques liées aux objectifs du cours.

Les modalités de la participation sont inscrites au plan de cours.

f) Correction des travaux, des examens et des diverses épreuves. Le temps requis pour la correction des travaux de session et des projets peut dépasser le délai

habituel de deux semaines, à condition d’être signalé au plan de cours. Le délai ne pourra être

supérieur à quatre semaines.

g) Note de passage. Les erreurs de mesure peuvent faire varier la note accordée pour une évaluation. En conséquence, un

intervalle de confiance est précisé pour la note de passage. Afin de démarquer de façon significative

l’échec de la réussite, aucun professeur ne mettra une note finale entre 55 et 60. Dans le cas où le


12

résultat de l’élève est proche de la note de passage, cet intervalle permettra au professeur de disposer

d’une marge de manœuvre afin de porter un jugement sur l’atteinte par l’élève des objectifs du cours

avant de lui accorder ou non la note de passage.

Un cours peut comporter un double seuil de passage. Pour réussir ce cours, l’élève doit alors obtenir

60% à l’épreuve certificative du cours et 60% pour le total de ses évaluations. Les modalités

doivent être présentées dans le plan de cours.

VOIES DE RECOURS DES ÉLÈVES EN MATIÈRE D’ÉVALUATION.

L’article 7 de la PEA s’applique.

a) Modification de note pendant le cours Il s'agit d'une demande auprès du professeur, aussitôt après la remise du travail ou de l’examen

corrigé, afin que la note obtenue soit modifiée. Après étude, le professeur maintient ou modifie la

note.

b) Modification de note après la réception du relevé de notes Première étape: la demande de correction de note.

Suite à la réception de son relevé de notes, l'élève peut compléter une demande de modification

de note, dans laquelle il expose les motifs sérieux de sa demande. Celle-ci est acheminée à

l’enseignant qui en prend alors connaissance et décide de maintenir ou de modifier la note finale.

Deuxième étape (étape facultative): La demande de révision de note.

Après avoir pris connaissance du résultat de sa demande de correction de note, l’élève qui se croit

encore lésé par la note finale peut demander une révision de note selon le mécanisme prévu en

précisant les motifs de sa demande. Un comité de révision de note est alors constitué. Ce comité de

trois professeurs devra alors vérifier que la correction d'un travail ou d'un examen soit faite en

appliquant rigoureusement le barème de correction. Les motifs d'une demande de révision de note

portent donc sur :

une mauvaise application du barème de correction une mauvaise interprétation de la réponse.