rapport(desynthèse( javascript( apprentissageautonome( 582 ... · ! 4!...
TRANSCRIPT
Aymeric Fraincart
Groupe B
Rapport de synthèse
JavaScript
Apprentissage Autonome
582-‐FXA-‐06
Technique d’Intégration Multimédia
Cegep de Sainte Foy Lundi 25 mars 2013
2
Introduction : ........................................................................................................................... 3
Développement : ..................................................................................................................... 3
Semaine 1 : .................................................................................................................................................... 4
Semaine 2 : .................................................................................................................................................... 4
Semaine 3 : .................................................................................................................................................... 6
Semaine 4 ...................................................................................................................................................... 7
Semaine 5 ...................................................................................................................................................... 7
Semaine 6 ...................................................................................................................................................... 8
Semaine 7 ...................................................................................................................................................... 9
Bilan : ........................................................................................................................................................... 10
Progression du travail : ................................................................................................................................ 11
Technologies employées : ....................................................................................................................... 11
Perspective : ............................................................................................................................................ 12
Conclusion : ........................................................................................................................... 13
Médiagraphie ........................................................................................................................ 13
3
Lors de la session 6 de la Tim, j’ai choisi de développer mes compétences en JavaScript. Mon
objectif en choisissant ce sujet était de pouvoir coder un site avec différentes animations, propriétés
graphiques et répondre au besoin du projet TIM. À la fin de mon apprentissage, je voulais avoir la
capacité de créer un site internet sans prendre en compte de coté dynamique c’est à dire PHP/Base de
Données. Je voulais aussi avoir la capacité de programmer différentes applications Web telles qu’un
lecteur vidéo, un diaporama ou le traitement d’un formulaire. Mon apprentissage au fur et à mesure des
semaines a évolué vers les technologies tel que jQuery et Ajax. Il m’a permis tout d’abord d’apprendre à
travailler en toute autonomie et m’organiser. Le plus gros problème que j’ai rencontré n’était
certainement pas la difficulté de mon apprentissage mais bien la gestion du temps. Durant cette session,
j’ai pu parcourir le JavaScript appliqué à la balise Canvas de HTML5, les bases du JavaScript, du jQuery et
de l’Ajax par la réalisation de jeu, de galerie d’images et de mise en place d’une base de données, de la
création de commentaires et leur suppression.
Dans cet apprentissage, le risque était que je me disperse un peu trop parmi toutes les
possibilités qu’offre le web. Le fait est que les langages de programmation sont liés, il est donc courant
d’en utiliser plusieurs au sein d’une même page ou d’une application comme la mise en place d’un
système de commentaires Ajax. Même si je ne me suis pas tellement limité dans mon apprentissage au
seul JavaScript, j’ai dû faire en sorte de ne pas perdre trop de temps dans les projets que je me suis
donnés tel notamment les jeux simples que je développais. Mon objectif final étant d’avoir une vision
globale du JavaScript et de ses dérivées. Il a été particulièrement utile de m’y intéresser car n’ayant au
départ aucune notion de dans ce langage, je ne pouvais que tenter de rattraper mon retard dans ce
domaine.
Développement :
Le JavaScript pour la balise «canvas » a été mon premier sujet de recherche. J’ai trouvé
rapidement de grandes sources d’informations illustrées d’exemples d’application. Ensuite je me suis
4
concentré sur le JavaScript en lui-‐même surtout grâce à des livres et notamment sur les traitements de
formulaires avant de me tourner vers JQuery où la aussi, il existe énormément de sources d’information,
de tutoriels et d’exemples d’application. Pour apprendre, je me fixais un objectif, un projet, je cherchais
sur internet le meilleur moyen d’y parvenir avant de lire des cours et tutoriels et tenter de le réaliser.
Grâce à mes différents apprentissages, j’ai pu réaliser différentes applications web telles que notamment
ce qui était demandé dans le projet TIM : le lecteur vidéo, la géolocalisation, différents traitements de
formulaire dont le convertisseur euros/dollars canadien différentes galeries d’image mais aussi deux jeux
très simples (un casse brique et un pong), différentes animations en JQuery utilisées dans le projet de
spécialisation, des mouvements de divisions HTML en 3D (très simple) juste avec jQuery et CSS3.
Semaine 1 :
Cette première semaine, je me suis concentré sur la découverte du JavaScript et la balise
« canvas ». Je recherchais une solution pour réaliser la galerie de la page d’accueil pour le projet
TIM d’où le tableau d’images que je voulais parcourir pour les afficher les une après les autres.
Une solution que j’ai abandonnée par la suite à la découverte de jQuery. Une semaine surtout
basée sur la lecture et l’expérimentation rapide des exemples du livre «JavaScript, Introduction
et notions fondamentales ». J’ai aussi réalisé une petite animation dans laquelle on peut voir
une image se déplacer d’un bord à l’autre de l’écran et y effectuer des allers-‐retours.
Semaine 2 :
Lors de cette semaine, j’ai orienté mes apprentissages vers le projet TIM, je me suis donc
lancé vers la conception d’un lecteur vidéo et la géolocalisation. Des tutoriels m’ont beaucoup
aidé dans ces réalisations. Par l’intermédiaire de ces deux projets, j’ai vraiment maîtrisé les
fonctions JavaScript et le passage d’arguments et j’ai pu avoir une première approche de
JQuery.
5
Ce lecteur vidéo a été par la suite utilisé dans le projet TIM et amélioré. Il m’a servi de base
d’apprentissage dans les autres projets grâce aux manipulations de fonction jQuery qu’il m’a
permis de faire. C’est vraiment à partir de ce moment que j’ai compris le fonctionnement des
fonctions en programmation.
La première ébauche de géolocalisation qui m’a également servi de base dans
Le projet TIM.
6
J’ai également réalisé un convertisseur de monnaie dans une page HTML qui vérifiait si c’était
bien des chiffres qui était rentrés et différents d’autres tests sur les formulaires.
Semaine 3 :
Cette semaine grâce à un tutoriel, je me suis concentré sur la création de mon premier jeu en
canvas, un casse-‐brique où j’ai rencontré plusieurs problématiques notamment dans logique du code
mais aussi la logique mathématique de la détection de collision. Le but de ce projet était de me faire
manipuler les fonctions JavaScript, les boucles, les conditions et les évènements. Enfin que j’utilise les
bases du JavaScript. J’ai commencé durant cette semaine le début du casse-‐briques.
Je me suis lancé après dans la réalisation d’un jeu Pong sans suivre de tutoriel pour me mettre en
pratique ce que j’avais appris dans la conception du premier jeu. Ici, seul l’apsect mathématique m’a
vraiment posé un problème pour la détection de collision. Mon professeur tuteur m’a conseillé de passer
à autres choses que je ne perde pas plus de temps. Je créé donc bien deux barres pour le joueur 1 et le
joueur 2, la balle cependant ne rebondi pas sur les barres des joueurs.
7
Semaine 4
Ici, j’ai pu m’initier à la découverte de JQuery par l’intermédiaire de plusieurs tutoriels
surtout un, celui du site du zéro que je trouve très bien expliqué. J’ai réalisé donc de petits
exercices pour comprendre les différentes fonctions apprises et notamment la manipulation du
CSS : il me posait déjà des problèmes en JavaScript mais cela aggravé avec le JQuery, j’ai
réorienté mon apprentissage vers le CSS3.
Semaine 5
Une semaine bien courte en apprentissage, j’ai bien revu les bases du CSS3 et les
transformations 3D et j’ai voulu tenter de réaliser un diaporama d’images sous forme de cube
en trois dimensions. Mais il me semble que c’est pendant cette semaine qu’il y avait un autre
projet à rendre, c’est là que j’ai vraiment rencontré un gros problème de gestion de temps.
8
Semaine 6
J’ai pu donc mettre en pratique ce que j’ai appris durant les deux dernières semaines
avec la réalisation de plusieurs diaporamas d’images en suivant des tutoriels et la réalisation en
CSS3 d’un cube en 3D animé par jQuery. Je me suis également intéressé à Ajax et j’ai commencé
à effectuer des recherches dessus.
Des fonctions jQuery permettaient de voir les différentes faces du cube.
Cela m’a permis par la suite de créer la présentation de livre dans mon projet
spécialisation ou par le même système, je fais bouger une div html avec une image et sa
description à coté.
9
Semaine 7
Cette semaine a été la plus riche de toutes en apprentissage mais aussi très lourde car
non seulement j’ai continué mon apprentissage sur jQuery en incluant Ajax mais aussi sur le PHP
et MySQL. En suivant un tutoriel, j’ai donc réalisé un système Ajax de suppression de
commentaire dans une base de donnée par l’intermédiaire de jQuery.
Et un système d’ajout de commentaires :
10
J’ai par la suite tenté de réaliser une galerie qui chargeait les images au fur et à mesure que
l’utilisateur cliquait sur la suivante. Cela c’est avéré assez difficile et je n’ai pas réussi à trouver une
solution à ce projet là.
Semaine 8-‐9 :
Je me suis consacré dans cette dernière semaine à revoir tout ce que j’ai appris durant cette
période et tenté de l’apprendre. Une étape plus ou moins réussie. J’ai relu tous les tutoriels de la
bibliographie et j’ai découvert quelques tutoriels vidéo. J’ai refais certains exercices notamment pour
revoir les fonctions jQuery. J’ai également découvert les effets parallaxes avec jQuery.
Bilan :
La majorité des problèmes que j’ai pu rencontré sont liés à la gestion du temps. En France, j’avais
déjà beaucoup de problème en gestion de projet pourtant l’on était accompagné par les cours et c’est
dans l’apprentissage autonome que j’en ai réellement pris conscience. J’ai corrigé le tir en me fixant des
objectifs journaliers et hebdomadaires et en me fixant un temps limites pour ces projets.
De plus j’ai aussi rencontré un ennemi plus redoutable que mon incapacité à bien gérer mon
temps, c’est la gestion du stress. Je me retrouvais parfois découragé en voyant ce que les autres étaient
capables de faire et moi en train de lutter sur un problème qui quand je demandais était très rapidement
résolu. Les mini-‐projets que je me suis fixé m’ont donc permis de faire un travail sur moi même, sur la
11
gestion de mon temps et de mon stress. J’ai appris plus que les simples langages tels que le jQuery ou le
JavaScript.
Progression du travail :
Dans l’ensemble je me suis tenu à ce que j’annonçais dans mes prévisions sauf à la semaine 5 où
j’ai fait beaucoup moins d’heure que prévu, moitié moins en réalité : avec le rendu du projet WordPress,
je n’ai pas trouvé le temps nécessaire durant le semaine.
Mes apprentissages s’orientaient en fonction de mes besoins dans le projet TIM où de ce que je
voulais réaliser. Mon but premier était de pouvoir avoir une vision globale de la conception d’un site
web. Je pense l’avoir atteint cependant en essayant de l’obtenir, je n’ai pas développé d’expertise,
seulement une capacité à comprendre et j’en suis bien conscient. Mon schéma a été au départ
d’apprendre le JavaScript avec la balise CANVAS HTML5 avant de repartir sur le JavaScript pur. J’ai
découvert par la suite que mes capacités en CSS était très faible, j’ai donc travailler dessus avec JQuery et
pour finir je me suis concentré sur l’Ajax de jQuery, PHP et MySQL en surface.
Technologies employées :
Il existe différentes technologies pouvant remplacer le JavaScript ou le jQuery. Google a sorti
DART, un langage de programmation visant à remplacer le JavaScript, cependant il n’a pas remporté de
fort succès car comme toutes grandes multinationales qui se respecte, le langage est sujet aux critiques
de sa conception fermé. Il a été développé en interne à Google.
Utilisé par 5% des sites Internet, MooTools est le principal concurrent de JQuery. Il permet les
mêmes choses et les deux sont sortis dans la même période. La grande force de MooTools ou faiblesse,
cela dépend des personnes réside dans le fait que la syntaxe est très proche du JavaScript, cependant,
son point faible est sa lenteur. Il est très lourd, un défaut qui peut être corriger en ne téléchargeant que
les partie utiles du Framework.
J’ai choisi lors de mon apprentissage les langages les plus couramment utilisés pour en avoir une
vision globale. Si c’était à refaire, je maintiendrais ces choix, je modifierais par contre ma méthode de
travail. C’est à la fin que je me suis rendu compte que j’étais beaucoup plus efficace à rester par exemple
12
tout un week-‐end à faire de l’apprentissage autonome plutôt que diviser les différents projets dans la
journée.
Perspective :
Avant de venir au Cegep de Sainte Foy et d’effectuer des recherches dans l’apprentissage
autonome, je n’envisageais pas de travailler dans la conception de web dans l’avenir. Ce cours m’a
permis de mieux cerner ce domaine et d’y trouver un intérêt. J’ai réussi à réaliser quelques projets et j’ai
apprécié. Je sais que dans le cadre d’une licence, de la TIM à Ste Foy ou dans le pire des cas mon
redoublement, ce que j’ai appris me sera utile. Il en va de même pour mon stage dont j’ai déjà
commencé le projet.
Si je devais poursuivre cet apprentissage, je me concentrerais sur JQuery et ce que ce langage est
capable d’effectuer. Je développerais aussi des compétences en PHP/MySQL pour au moins avoir les
bases de la conception et l’intégration d’un site Web.
Conclusion :
Dans le cadre de ce cours, j’ai donc découvert le JavaScript et jQuery et les différentes fonctions
qu’ils offrent sur le web. Cela aura été une bonne expérience et une avancé majeur dans mon
orientation. Même si à mon sens, j’aurais encore des difficultés à refaire tous les exercices sans supports.
Je suis capable de comprendre rapidement le JavaScript et le JQuery. Il m’a permis aussi de revenir sur
les toutes premières bases d’HTML5 et CSS3.
J’ai surtout appris à l’aide de tutoriel, je faisais une première lecture complète du cours puis une
deuxième en faisant attention aux points difficiles puis je commençais le code au fur de la lecture du
tutoriels. Si c’était des livres, je réalisais les exercices au fur et à mesures de la lecture. J’ai trouvé cette
solution assez efficace, elle me permet de retenir ce que je lis, les fonctions que j’utilise.
Tout ce que j’ai appris pendant cette période me servira, j’en ai la certitude. Cela a mis en avant
mes lacunes dans le domaine du web, des lacunes que j’ai partiellement comblées durant cette session.
Il ne me reste plus qu’à mettre en pratique ce que j’ai appris et surtout à l’approfondir. Même si le web
évolue à très grande vitesse, je suis persuadé que le JavaScript a encore de très longues années devant
13
lui. Il reste encore bien des langages nécessaires pour créer un site web mais je ne peux qu’avancer pas à
pas.
Médiagraphie
JavaScript Gardez le meilleur ! Douglas Crockford, Edition Pearson, 2008, 175 pages
JavaScript, Introduction et notions fondamentales, Luc Van Lancker, édition ENI, 200 pages
Le site du zéro, site d’entraide informatique.
http://www.siteduzero.com/informatique/tutoriels/dynamisez-‐vos-‐sites-‐web-‐avec-‐javascript
Tutoriel pour apprendre le JavaScript pour la géolocalisation
http://blog.teamtreehouse.com/getting-‐started-‐with-‐the-‐geolocation-‐api
Documentations Google sur l’API maps
https://developers.google.com/maps/documentation/javascript/tutorial#MapOptions
Gestion d’évènements en JavaScript
http://drusien.pagesperso-‐orange.fr/docs/javascript/evenements.html
Keycodes pour le JavaScript
http://drusien.pagesperso-‐orange.fr/docs/javascript/evenements.html
Explications sur l’objet Math en Javascript
http://www.commentcamarche.net/contents/javascript/jsmath.php3
Tuto pour réaliser un casse-‐brique grâce au canvas
http://www.lafermeduweb.net/tutorial/initialisation-‐des-‐briques-‐du-‐jeu-‐p24.html
Tutoriel sur le canvas
http://www.html5canvastutorials.com/tutorials/html5-‐canvas-‐paths/
Site du Zéro, tutoriel JQuery
http://www.siteduzero.com/informatique/tutoriels/jquery-‐ecrivez-‐moins-‐pour-‐faire-‐plus
Tutoriel réalisation d’un diaporama d’images
http://www.guillaumevoisin.fr/jquery/diaporama-‐simple-‐avec-‐jquery-‐nouvelle-‐version-‐jdiaporama
14
Documentation sur Ajax
http://api.jquery.com/jQuery.ajax/Liste des fonctions Jquery
Javascript et Jquery the missing manual, David Sawyer McFarland, Edition O’REILLY 2e édition, octobre 2011, 518 pages.
CSS3, liste et explications des fonctions CSS3
http://www.w3schools.com/css3/default.asp
Tuto vidéo sur l’Ajax, conception d’un livre d’or
http://www.youtube.com/watch?v=vmnZpWMyf4o
Tuto vidéo sur la base de donnée
http://www.youtube.com/watch?v=yg3YedO3GT8
Tuto vidéo sur les structures en PHP
http://www.youtube.com/watch?v=znmlrwqJyw4
Tuto vidéo HTML et CSS
http://www.youtube.com/watch?v=SMsvA8LLaPY
Site expliquant les effets Parallax
http://www.alsacreations.com/tuto/lire/1417-‐zoom-‐sur-‐effet-‐parallaxe.html