Raport final - Blogs du Cégep de Sainte-Foy

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 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 2 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 3 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. 4 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. 5 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. 6 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. 7 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é. 8 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 : 9 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 10 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 11 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 12 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 13 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 14