SIO-3103 : Introduction à la programmation Web. Enseignant : Sehl Mellouli (professeur)

Transcription

1 SIO-3103 : Introduction à la programmation Web SECTION Z1 Hiver 2011 Enseignant : Sehl Mellouli (professeur) Plage horaire du cours : Cours en salle : Jeudi 8 h 30 à 11 h 20 Local 2327 PAP Site de cours : *Coordonnées et disponibilités Sehl Mellouli Professeur Pavillon Palasis-Prince, local 2521 sehl.mellouli@fsa.ulaval.ca Disponibilités : Prendre rendez-vous par courrier électronique Soutien technique : Comptoir d aide APTI (CAA) Pavillon Palasis-Prince, local poste 6258 caa@fsa.ulaval.ca Horaire : automne et hiver Lundi 8 h 15 à 21 h 45 Mardi 8 h 15 à 21 h 45 Mercredi 8 h 15 à 21 h 45 Jeudi 8 h 15 à 21 h 45 Vendredi 8 h 15 à 21 h 45 Samedi 9 h à 16 h Dimanche 9 h à 16 h Remarque : le genre masculin est utilisé tout au long de ce plan de cours dans le seul but d en alléger la lecture.

2 Description du cours Introduction Ce cours a pour objectif de permettre à l'étudiant de se familiariser avec les concepts de base de la programmation web, le cycle de développement d'une application et les différents outils d'aide au développement. L'étudiant apprendra à développer une application web fonctionnelle avec le langage de programmation orienté objet Python et le cadre d'application Django, en utilisant une approche de développement par spirale et des outils d'aide au développement comme Eclipse, Assembla et Mercurial. Ce cours s'adresse aux étudiants ayant peu d'expérience en programmation, mais peut aussi convenir aux étudiants voulant parfaire leurs connaissances dans la programmation web ou les différentes technologies utilisées dans le cadre de ce cours. Les concepts abordés aideront les futurs spécialistes en systèmes d'information à se familiariser avec les différents aspects de la conception et réalisation d'une application web, ce qui leur donnera la chance de pouvoir mieux estimer l'envergure, la durée et les embûches de la création d'un système d'information. En effet, il est important pour un analyste en systèmes d'information de maîtriser à la fois le langage des gestionnaires et celui des informaticiens. Remarque concernant la charge de travail : Ce cours universitaire de premier cycle exige en moyenne 9 heures de travail par semaine. Soyez donc bien conscient qu il est essentiel pour votre apprentissage et pour la réussite du cours d avoir du temps à y consacrer. Objectif général du cours Ce cours a pour principal objectif de familiariser les étudiants aux différents concepts de base de la programmation web. De plus, le cours vise à faire acquérir des connaissances de base dans ces différentes technologies et outils d'aide au développement : Python Langage de programmation orienté objet populaire, utilisé autant pour les applications clients que serveurs. Django Cadre d'application web qui utilise Python pour fournir du contenu dynamique à des pages web. XHTML (extensible HyperText Markup Language) Langage de balisage ; version plus stricte et épurée de HTML. CSS (Cascading Style Sheets) Langage de présentation qui permet de contrôler l'agencement et la stylisation hors des documents XHTML. Eclipse Environnement de développement intégré (IDE) utilisé pour écrire le code de programmation. Page 2 de 15

3 Mercurial Mercurial est un système de gestion de versions permettant en particulier la gestion de version décentralisée. Il est disponible sur plusieurs plateformes : systèmes Unix, Windows, Mac OS X. Mercurial est écrit principalement en Python. Assembla Site web dédié à faciliter la collaboration entre développeurs de logiciels à l'aide de différents outils avancés et de pratiques de gestion de projets. Assembla fournit un espace Mercurial ou le code de programmation peut être sauvegardé de façon similaire à la sauvegarde de données dans une base de données. Outre que Mercurial, Assembla offre plusieurs autres outils comme Wiki pour organiser de l'information de base sur notre projet et Scrum pour faire la gestion des contributions individuelles au projet. Google App Engine (GAE) GAE pour Python et Java proposent une solide offre d'hébergement de serveur d'applications. Cette solution de cloud computing est conçue comme «platform as a service» : Google fournit l'infrastructure complète ainsi que l'environnement pour héberger l'application. App Engine propose ainsi de nombreux services dont notamment un système de base de données appelé datastore (basé sur Google Big Table). GAE permet d'exécuter vos applications web sur l'infrastructure de Google. Les applications App Engine sont faciles à construire, faciles à maintenir et supportent facilement la montée en charge de votre trafic et de vos besoins croissants de stockage de données. Avec App Engine, il n'y a pas de serveurs à maintenir. Vous chargez juste vos applications et elles sont aussitôt disponibles pour vos utilisateurs Avec l'environnement d'exécution Python App Engine, vous pouvez implémenter votre application en utilisant le langage de programmation Python et l'exécuter dans un interpréteur Python optimisé. App Engine inclut des APIs riches et des outils pour le développement d'applications web en Python, incluant des APIs de modélisation de données riches, un framework d'application web simple d'utilisation et des outils pour manager et accéder aux données de votre application. Vous pouvez aussi profiter d'une grande variété de librairies matures et de frameworks pour le développement d'application web en Python, tel que Django. Vous pouvez mettre à disposition vos applications depuis votre propre nom de domaine (tel que en utilisant Google Apps. ou vous pouvez utiliser directement le nom qui vous est fourni sur le domaine appspot.com. Vous pouvez partager votre application avec le monde ou limiter l'accès aux membres de votre organisation. Google Datastore Une application de GAE ne peut pas écrire sur le système de fichiers. Une application peut lire des fichiers mais seulement les fichiers chargés avec le code de l'application. L'application doit utiliser la base de données App Engine ("datastore"), memcache ou d'autres services pour toutes les données qui persistent entre les requêtes. Page 3 de 15

4 La base de données de GAE appelée datastore repose sur le SGBD Big Table développé en interne par Google. Celui-ci a la particularité d'être hautement scalable et s'appuie sur un système de fichiers distribués géré par GFS (Google File System). Big Table est une Map ordonnée multidimensionnelle. Les données (ou entités) sont stockées sous forme de <Clé, Valeur> dans des partitions appelées tablets. Des tablettes META1 référencent l'ensemble des tablettes contenant les entités. Une tablette maître appelée META0 référence et les tablettes META1 permettent au client d'accéder aux tablettes de la base. Pour optimiser les performances, un mécanisme de cache permet au client de s'adresser directement aux tablettes META1 et aux tablettes contenant les entités. *Liens avec les buts et objectifs du programme Pour maintenir notre accréditation AACSB, la FSA doit se conformer aux derniers standards relatifs à l Assurance of Learning. En résumé, le concept d Assurance of Learning stipule que pour chacun de nos programmes menant à un grade universitaire, soit le BAA, le MBA, la M. Sc. et le Ph. D., nous devons établir des buts et des objectifs de programme. Nous avons également le devoir de nous assurer qu un apprentissage a effectivement lieu pour chacun de ces buts et chacun de ces objectifs. Pour ce faire, nous devons en mesurer le degré d atteinte dans certains cours ciblés, mais tous nos cours du MBA doivent démontrer un lien avec ces buts et objectifs. Matrice du programme MBA : Degré d atteinte dans le cours 1 1. S'initier à la prise de Amorce décision. 2. Communiquer En développement efficacement. 3. Gérer des équipes de Intégration travail. 4. Être ouvert sur le monde. Amorce 5. Maîtriser les outils Intégration technologiques. 6. Être ouvert au Amorce changement. 7. Avoir un comportement Amorce éthique. Méthode d évaluation utilisée 2 Exercices en équipe Exercices en équipe Exercices 1 L amorce veut dire qu un apprentissage commence à se manifester chez l étudiant en lien avec les buts ou les objectifs du programme. En développement indique des acquis identifiables en relation avec l apprentissage de ces mêmes buts et objectifs. L intégration indique que l apprentissage des buts et objectifs est compris et appliqué de manière pertinente à une variété de contextes ou de situations nouvelles. Un cours donné peut couvrir un ou plusieurs buts et objectifs de programme. Aussi, un cours peut amorcer l apprentissage d un but et intégrer l apprentissage d un autre, selon les habiletés et les compétences visées par le cours. 2 Nous faisons référence ici à la méthode d évaluation utilisée dans le cours pour évaluer le degré d atteinte du but du programme, par exemple : étude de cas, question ouverte à l examen, projet, portfolio, quiz, etc. Ces mêmes méthodes d évaluation pourraient être utilisées pour collecter des données pour l Assurance of Learning. Page 4 de 15

5 Approche pédagogique Le matériel didactique et la formule utilisés vous permettent d'adopter une démarche d'apprentissage axée sur la collaboration, la communication et le travail individuel. Ces méthodes pédagogiques vous amèneront à gérer votre temps de manière flexible mais structurée, et ce, afin de respecter le rythme du cours. Le cours est basé sur le cours donné par Charles Severance l'auteur du livre Using Google App Engine - Building Web Applications : Voici la liste des activités d apprentissage qui seront utilisées durant la session : Lectures obligatoires GAE : Using Google App Engine - Building Web Applications, Charles Severance, O'Reilly, Django : Écrire votre première application Django, version web, Lectures facultatives The Django Book, Adrian Holovaty and Jacob Kaplan-Moss, version web, Présentations (Notes) Logiciels et exemples Nous utiliserons le contexte de la programmation web pour expliquer les concepts de base de la programmation. Ce choix est principalement justifié par les tendances de développements actuelles et le potentiel de réutilisabilité des concepts web à la suite du cours. En effet, plutôt que d'utiliser un système d'affichage relié à une plateforme ou un langage, l'affichage web permettra aux étudiants de créer ou éditer des pages web en utilisant n'importe quelle plateforme. De plus, l'utilisation de XHTML et CSS (et non HTML) permettra aux étudiants de connaître les standards web établis. Nous utiliserons le cadre d'application Django pour fournir le contenu dynamique aux pages web. Le choix de Django est justifié par son accent sur le langage Python. De plus, Django utilise une approche de différenciation marquée entre la portion modèle et vue (MVC) d'une application web, ce qui permet de bien répliquer l'environnement de travail en entreprise pour les positions de designer web et programmeur. La gestion de projets se fera en utilisant deux outils principaux, soit Assembla et Mercurial. Ces outils permettront aux étudiants d'avoir une version unique de leur projet (en ligne), de présenter leur projet, d'organiser le débogage et de faire la gestion de leur équipe. Page 5 de 15

6 Remarque : Étant donné la nature pratique des méthodes pédagogiques utilisées, il est impératif que vous ne preniez pas de retard. Les concepts appris chaque semaine sont préalables à la semaine suivante. Encadrement Le calendrier de travail proposé dans la section Contenu du cours est adaptable selon votre horaire. En effet, la formule d'enseignement à distance vous permet d'apprendre à votre rythme. Toutefois, en adoptant un rythme d'apprentissage régulier dès le début de la session, vous serez en mesure de respecter les échéances du cours, vous pourrez utiliser le levier de votre communauté d apprentissage pour vous aider dans votre démarche d apprentissage et vous pourrez bénéficier d'une rétroaction de l enseignant sur la matière en cours. La personne inscrite reste bien sûr la seule gestionnaire de son temps, mais elle s'engage à remettre les travaux notés aux moments prescrits sous peine de sanction. L enseignant vous fournira des rétroactions sur vos travaux notés, par l entremise du forum de discussion, par courriel ou par téléphone. Concernant les forums de discussion, l enseignant y lancera des débats et guidera la classe dans sa démarche de résolution de maîtrise des concepts reliés à l'orientéobjets. C est un lieu d apprentissage où l erreur est permise. Remarque par rapport à l encadrement : L enseignant essaiera de lire tous les messages sur les forums. L enseignant visitera le site du cours 2 fois par semaine. Les questions ne seront pas traitées instantanément. Afin d éviter des délais supplémentaires, il est recommandé d être explicite dans vos questions et vos commentaires (ex. : spécifiez les noms des documents et les pages référées). Contenu et activités La session est divisée en 12 séances. Le contenu du cours est divisé en fonction du nombre de séances. À chaque séance, un thème spécifique est abordé. Pour avoir la description complète des activités, consultez la section Séances de votre site de cours. Séance 1 : Introduction au développement Web Thèmes abordés : Google Application Engine Cloud computing Rappel Python Séance 2 : HTML et CSS Thèmes abordés : Les feuilles de style CSS Validation de pages CSS Page 6 de 15

7 Séance 3 : Envoi de données à l'application Thèmes abordés : Requêtes HTTP Envoi de données Séance 4 : Le moteur de l'application web Thème abordé : Développement du moteur de l'application Séance 5 : Utilisation des templates Thèmes abordés : Template Python Model View Controller Séance 6 : Cookies Thèmes abordés : Cookies Sessions Mémoire cache Page 7 de 15

8 Séance 7 : Google Datastore Thèmes abordés : Définir un modèle Chercher dans le Datastore Séance 8 : JavaScript, jquery and Ajax Thèmes abordés : JavaScript jquery Ajax Exécution de l'application Séance 9-12 : Django Évaluations et résultats Liste des évaluations Sommatives Titre Date de remise ou de l événement Mode de remise Travail pratique 1 03 mars 2011 [Boîte de dépôt] Travail pratique 2 31 mars 2011 [Boîte de dépôt] Travail pratique 3 21 avril 2011 [Boîte de dépôt] Mode de travail [En équipe de 2] [En équipe de 2] [En équipe de 2] Pondérati on 25 % 35 % 40 % Les travaux pratiques (100 %) Ces travaux visent à vérifier l'acquisition de vos connaissances ainsi que votre compétence à appliquer et à transférer les notions étudiées à des situations concrètes. Le français utilisé dans vos travaux d'évaluation doit être correct. Un travail incompréhensible, jugé irrecevable par votre professeur, vous sera retourné pour être recommencé. Vous devez obligatoirement réaliser et retourner aux dates prévues (voir la section Évaluations du site du cours) les travaux notés. Les détails sur les travaux pratiques seront disponibles sur le site du cours. Page 8 de 15

9 Barème de conversion Intervalle Cote Intervalle Cote [ ] A + ] 77,5 74 ] C+ ] 95 91,5 ] A ] 74 70,5 ] C ] 91,5 88 ] A- ] 70,5 67 ] C- ] 88 84,5 ] B + ] 67 63,5 ] D+ ]84,5-81] B ] 63,5 60 ] D ] 81 77,5 ] B - ] 60 0 ] E (Échec) Résultats Vos résultats seront disponibles [dans le site Web de cours]. Plagiat La FSA ne tolère pas les comportements non conformes à l éthique. Le Règlement disciplinaire à l intention des étudiants de l Université Laval fait état de près d une vingtaine d infractions relatives aux études passibles de sanctions. Vous connaissez sûrement les fautes les plus courantes, mais saviez-vous que copier des phrases d un ouvrage papier ou d un site web sans mettre les guillemets ou sans mentionner la source constituent deux de ces infractions passibles de sanctions? Ou encore qu il est interdit de résumer l idée originale d un auteur en l exprimant dans ses propres mots sans en mentionner la source ou traduire partiellement ou totalement un texte sans en mentionner la provenance. Afin d éviter de vous exposer à des conséquences allant de l attribution d un échec dans un cours au congédiement de l Université, consultez le site Web suivant : Vous y trouverez toute l information utile pour prévenir le plagiat. Règles disciplinaires Tout étudiant qui commet une infraction au Règlement disciplinaire à l intention des étudiants de l Université Laval dans le cadre du présent cours, notamment en matière de plagiat, est passible des sanctions qui sont prévues dans ce règlement. Il est très important pour tout étudiant de prendre connaissance des articles 28 à 32 du Règlement disciplinaire. Celui-ci peut être consulté à l adresse suivante : Page 9 de 15

10 Gestion des échéances et des retards Le cheminement d apprentissage proposé au calendrier doit être respecté dans la mesure du possible. Tout retard de remise d'un travail sera pénalisé de 30 % par jour de retard jusqu à un maximum de 3 jours. Après ce délai, le travail sera refusé et la note 0 sera accordée à cette évaluation. Cependant, il est entendu que certaines circonstances exceptionnelles peuvent empêcher l'étudiant de remettre une évaluation dans les délais prescrits. Dans ce cas, il est de la responsabilité de l étudiant d en avertir l enseignant le plus tôt possible afin de négocier une extension ou d envisager des alternatives. Si une demande de délai est acceptée à la fin de la session, l'étudiant se verra accorder une cote «Z» (note retardée à la demande de l'étudiant) qui sera convertie en cote définitive (voir le barème plus haut) à l'expiration du délai prescrit. Évaluation du cours À la 4 e semaine, une évaluation formative du cours sera effectuée. Cette évaluation confidentielle sera uniquement consultée par votre enseignant afin de valider si la formule pédagogique est correcte et si certains ajustements s imposent avant la fin de la session. À la fin de ce cours, la Faculté procédera à l évaluation sommative du cours afin de vérifier si la formule pédagogique a atteint ses buts et si vous êtes satisfait en recueillant vos commentaires et vos suggestions. Durant la session, un lien hypertexte sera ajouté sur la page d accueil du site Web de cours. Ce lien vous mènera vers un questionnaire d'évaluation qui permettra d'améliorer ce cours. Cette dernière étape est très importante et les responsables du cours vous remercient à l'avance pour votre collaboration. Veuillez noter que cette évaluation est confidentielle. Matériel didactique Site du cours Le site du cours est situé sur la plateforme de cours WebCT de l Université Laval ( Si vous n avez jamais accédé à WebCT, veuillez consulter le Guide étudiant WebCT à l annexe 1 du plan de cours. Si vous êtes inscrit au cours mais que vous n avez pas accès au site, veuillez premièrement vérifier votre inscription sur CAPSULE ( Page 10 de 15

11 Matériel informatique et logiciel Pour pouvoir suivre ce cours, il est essentiel d avoir accès à un ordinateur de technologie récente doté idéalement d une connexion Internet à haut débit. Une grille des spécifications matérielles et logicielles est disponible à l annexe 2 du plan de cours. L'outil de développement Eclipse est indispensable pour le déroulement du cours. Plus d'information sur cet outil vous sera fournie sur le site du cours. Autres sources d'information : Assembla Cloud Computing CSS Django Page 11 de 15

12 Eclipse Cours Forms g_study.htm Google App Engine (GAE) Page 12 de 15

13 GAE Apps Google Datastore GAE Frameworks HTML Page 13 de 15

14 JavaScript jquery Mercurial Page Layout Templates Python Sur le site web officiel de Python vous trouverez dans la section «Download» des logiciels d'installation automatique pour les différentes versions de Python. Vous pouvez en confiance choisir la dernière version «de production». Subclipse Testing Page 14 de 15

15 XHTML Web Design londonhttp://speckyboy.com/2010/11/14/18-super-quick-web-typography-tips-fornewbies/ World Wide Web Annexes Annexe 1 : Utilisation de WebCT à la Faculté des sciences de : Annexe 2 : Considérations techniques des cours à la Faculté des sciences de : Page 15 de 15