HTML5, CSS3 et JavaScript

Transcription

1 Marion LIVET Groupe A HTML5, CSS3 et JavaScript Travail présenté à madame Audrey Morneau Apprentissage autonome 582-FXA-06 Département des Techniques de communication Programme des Techniques d'intégration multimédia Cégep de Sainte-Foy 25 mars 2013

2 TABLE DES MATIERES Introduction Synthèse des travaux Synthèse des éléments de recherche Synthèse des expérimentations Bilan des problèmes rencontrés et solutions apportées Synthèse des travaux Semaine Semaine Semaine Semaine Semaine Semaine Semaine Semaine Technologies employées Perspectives Conclusion Médiagraphie /15

3 INTRODUCTION Au lancement du cours d apprentissage autonome, je me suis demandé ce qui pourrait m être très utile dans la suite de mes études et dans la profession que je vise : intégratrice front-end. Du côté des langages d intégration front-end j avais déjà de bonnes connaissances en HTML et CSS et je m étais déjà un peu penchée sur le HTML5 et CSS3 sans pour autant m y être attardée. Néanmoins, le peu de HTML5 et CSS3 que j avais rencontré avait réussi à attiser ma curiosité. D un autre côté, je ne savais pas me servir du Javascript ni même du jquery, des langages pourtant indispensables au web et surtout à un développeur front-end. J avais donc d une part des techniques que je connaissais un peu et qui me semblaient intéressantes et d une autre une grosse lacune à combler. Je me suis ainsi lancée dans l apprentissage de ces trois technologies à la fois dans le but de les découvrir, apprendre et tester dans le cadre de la réalisation d un site interactif/animé en les combinant. Les axes de recherche que j avais alors définis pour les quatre premières semaines de cours étaient les suivants : La découverte de toutes les fonctionnalités offertes par HTML5 et CSS3 L apprentissage de JavaScript depuis le début L intégration de contenus médias Les animations avec CSS3 Puis, les animations avec la combinaison HTML5/CSS3/JavaScript Réflexion sur la question «Le HTML5/CSS3 peut-il remplacer Flash?» Le risque face à mon sujet d apprentissage autonome résidait dans le fait que le contenu était chargé puisque apprendre trois langages différents à la fois pouvait me mener à survoler les sujets plutôt qu à en faire ma spécialité. 3/15

4 1. Synthèse des travaux 1.1 Synthèse des éléments de recherche Mes recherches ont été très vastes étant donné mon axe d apprentissage choisi. J ai en effet commencé la première semaine par poser les bases des différents langages étudiés soient le HTML, CSS3 et JavaScript en faisant des recherches sur leurs origines et historique. Pour cela, je me suis basée sur les introductions des cours du Site du Zéro, sur Wikipédia et différents articles dans lesquels j ai pu trouver des informations intéressantes. Par exemple, l article JavaScript: How Did We Get Here? par Steve Champeon (bien que commençant à se faire vieux puisque datant de 2001) m a appris beaucoup sur les origines de JavaScript. J ai également commencé durant cette semaine à apprendre les bases du JavaScript et notamment le DOM grâce à la lecture du cours sur ce langage sur le Site du Zéro que j ai trouvé clair et plutôt bien construit. J ai continué à apprendre les bases du JavaScript en deuxième semaine, toujours en poursuivant ma lecture du cours du Site du Zéro. J ai ainsi fait l apprentissage des évènements, de la manipulation du CSS et eu un aperçu des propriétés propres aux formulaires. Dans un deuxième temps j ai aussi concentré mon apprentissage sur le HTML5 et ses lecteurs audio et vidéo. Pour se faire, j ai pu m aider du livre Développez votre site web, le guide complet Titan qui expliquait relativement bien l utilisation de ces balises. Dans ce même sujet, j ai voulu me faire une opinion sur les différences entre les lecteurs HTML5 et les lecteurs Flash. Parallèlement, j ai donc réalisé des recherches à ce propos. Pour cela, j ai plus particulièrement sélectionné deux articles parmi ceux que j avais trouvés sur le net : une étude de Jan Ozer intitulée Flash Player: CPU Hog or Hot Tamale? It Depends. parue en février 2010 (qui est donc sur certains points déjà obsolète) et l article du Journal du Net HTML5 vs. Flash, quel choix de technologie effectuer pour ses applications web et mobiles? rédigé par Pierre Priot en septembre Il en est ressorti que les deux technologies ont chacune leurs avantages et inconvénients et qu il faut donc se baser sur le but recherché par le projet avant de faire son choix. Je n ai ainsi pas eu de réponse précise à la question que je m étais posée mais je suis sortie de cette phase de recherche avec des idées plus claires pour savoir dans quel cas utiliser les lecteurs HTML5 et dans quel cas utiliser Flash. En semaine 3, j ai pu découvrir les grands principes d AJAX sans toutefois avoir le temps de l approfondir. Cela a vraiment été pour moi une découverte, car je n en avais quasiment jamais entendu parlé auparavant. J ai ainsi pris note qu il serait bon pour moi de revenir dessus plus tard afin d approfondir mes lectures et d expérimenter un peu cette technique. La suite de mon programme consistait à la création d objets graphiques en HTML5 c est-à-dire avec les canvas et le SVG. Pour l apprentissage de ces techniques, je me suis surtout appuyée sur la lecture du livre Développez votre site 4/15

5 web, le guide complet Titan que j ai ensuite approfondie avec le site W3Schools entre autre. J ai très vite compris le principe du codage d un graphique en SVG car j ai trouvé le code très intuitif et j avais déjà travaillé sur le codage des images vectorielles en cours mais il n en a pas été de même pour la balise canvas. J ai en effet eu beaucoup plus de mal à saisir son utilité et son fonctionnement. Dans un dernier temps durant cette semaine, j ai abordé la question des animations fournies par CSS3. J ai beaucoup aimé cette partie, d autant plus que j ai trouvé un ebook très intéressant à ce sujet : CSS3 pro animation par Dudley Storey. Je l ai trouvé plutôt complet et facile à lire. Cela a été selon moi très intéressant d en apprendre plus sur les animations en CSS3 puisqu elles visent à se développer et qu elles ont un potentiel d application énorme. J ai poursuivi mon apprentissage en semaine quatre dans la lignée puisque je me suis remis à la lecture de la suite du cours du Site du Zéro sur le JavaScript, notamment des parties concernant les chaines de caractères et les données numériques qui ne m ont pas semblées si fondamentales que ça mais qui m ont apportées de nouveaux éléments sur le JavaScript. Enfin, le reste des recherches d apprentissage de la semaine a été dédié à ma culture web personnelle. En effet, après avoir étudié pendant quatre semaines le HTML5, le CSS3 et le JavaScript, la problématique que je me suis posée était de savoir si face à ces langages Flash avait encore une chance de survie sur le web. Il en est ressorti que Flash va surement persister sur les appareils mobiles mais pas sur les ordinateurs où avec le temps, les navigateurs supporteront tous le HTML5 et CSS3 et le Flash ne sera alors surement plus la meilleure alternative. Après avoir réorienté mon apprentissage en fin de semaine quatre vers le JavaScript en tant qu aide à l ergonomie des sites, j ai planifié en semaine cinq d approfondir les bases que j avais déjà acquises en AJAX quelques semaines auparavant. Je me suis donc appuyée une nouvelle fois sur le cours sur le JavaScript du Site du Zéro pour réaliser les lectures sur l AJAX servant à mon apprentissage. Ensuite je me suis penchée sur ce que le JavaScript peut apporter comme fonctionnalités aux formulaires et comment il peut améliorer leur ergonomie. Pour cela, la lecture des ebooks "Javascript & jquery : the missing manual" par David Sawyer McFarland et JS for dummies (4e édition) par Emily A. Vander Veer m a beaucoup aidée. Dans la lignée de cette nouvelle orientation de mon apprentissage, j ai poursuivi mes lectures et mes recherches en me focalisant sur le jquery pour la semaine 6. J ai ainsi pu explorer les fonctionnalités de cette bibliothèque JavaScript grâce notamment à sa documentation qui est complète et claire grâce aux exemples qu elle présente. Pour approfondir mes connaissances de jquery et rester dans le cadre redéfini de mon apprentissage, je me suis également plongée dans la bibliothèque jquery UI (pour User Interface ). Je me suis encore une fois servie de la documentation en ligne officielle de jquery UI mais j ai également lu pour ce sujet d apprentissage le ebook «jquery UI» d Eric Sarrion. 5/15

6 La semaine suivante fut l avant dernière semaine d apprentissage autonome. Ainsi, pour aller plus loin, j avais décidé d apprendre ce que sont les expressions régulières et comment s en servir en JavaScript. En effet, je n aurais pas pu passé à côté de cette notion de programmation que je n avais jamais apprise auparavant et qui est pourtant indispensable, notamment en JavaScript dans le cadre de la validation d un formulaire côté client par exemple. Comme source d information à ce sujet, j ai surtout utilisé les chapitres 3 et 4 concernant les expressions régulières de la partie 3 du cours sur le JavaScript du Site du Zéro. J ai également dans un deuxième temps fais quelques recherches sur la manipulation d images en JavaScript entre autre dans "Javascript & jquery : the missing manual" par David Sawyer McFarland et encore une fois sur le Site du Zéro qui dédie un chapitre aux images en JavaScript. J ai ainsi commencé par l objet Image de JavaScript mais son utilité restant assez limitée, j ai cherché des extensions jquery ou JavaScript pur développées afin d améliorer la manipulation des images par des utilisateurs. Ma dernière semaine a été plus consacrée à des expérimentations qu à des recherches et lectures mais néanmoins je me suis penchée sur le téléversement en JavaScript notamment grâce à AJAX et pour cela, je me suis une fois de plus basée sur le cours du Site du Zéro. 1.2 Synthèse des expérimentations Pour la première semaine, mon apprentissage était naturellement plus orienté vers la recherche d information et la lecture de cours sur le JavaScript puisque je ne connaissais absolument rien à ce langage. Pour cette semaine, ma seule expérience d expérimentation s est limitée à des travaux pratiques proposés par le Site du Zéro dans le cadre de son cours sur le JavaScript. Les exercices bien que pas très utiles sur un plan concret et pratique m ont permise de me plonger dans le DOM avec JavaScript et d apprivoiser la syntaxe de ce langage. Au cours de la deuxième semaine d apprentissage, la difficulté de mes expérimentations a augmenté. Tant bien que j ai eu du mal à réaliser ce que j avais prévu et que j y ai passé beaucoup de temps. J avais en effet prévu de réaliser un effet de drag & drop en JavaScript en m aidant d un chapitre de travaux pratiques présenté par le Site du Zéro. Le principe était donc de pouvoir déplacer trois simples éléments div carrés. J ai également dans le deuxième temps de mon apprentissage de cette semaine réalisé des expérimentations autour des balises audio et vidéo de HTML5. Ainsi, j ai pu tester l intégration des lecteurs et leur personnalisation grâce au JavaScript. Le résultat final n était pas complètement abouti mais j ai au l occasion par la suite de me resservir de ce que j avais alors appris durant ces expérimentations dans le cadre de la refonte du site de la Techniques d Intégration Multimédia et dans un même temps d aller plus loin dans la personnalisation du lecteur vidéo. 6/15

7 Les objets de mon apprentissage en semaine 3 m ayant particulièrement intéressée, j ai effectué différentes expérimentations. Tout d abord, dans le cadre de mon apprentissage des objets graphiques SVG et canvas, j ai pu codé différents dessins et comparer les deux méthodes. La conclusion que j ai pu en tirer est que je suis beaucoup plus à l aise avec les objets SVG que avec le canvas HTML5. En effet, je connaissais déjà le principe de codage d une image vectorielle et je trouve personnellement que la façon dont se compose une telle image est intuitive bien que cela puisse vite devenir lourd et compliqué en fonction de la complexité des formes composant l image. Dans un deuxième temps, j ai appliqué mes toutes nouvelles connaissances en matière d animation CSS3. Comme je n ai pas vraiment rencontré de problème avec ces réalisations, j ai pu en réaliser trois différentes à commencer par une barre de menu horizontale sur laquelle j ai appliqué des effets d animation de CSS3. Le résultat n est pas forcément pratique ou même esthétique mais mon but était de voir plusieurs possibilités d animations sur le même élément. J ai ensuite créé une galerie de photos avec des animations de CSS3. Dans cette lignée, j ai rapidement testé différentes façons d afficher une légende sur une image et j ai encore une fois été surprise parce que permet de faire CSS3 sans avoir recours à JavaScript. Mes expérimentations lors de la semaine 4 ont suivi les traces de la semaine 3 en ce qui concerne les objets graphiques puisque j ai cette fois-ci essayé de les animer. Une fois de plus, j ai été plus à l aise avec les animations sur les objets SVG et j ai été agréablement surprise de leur rendu qui est très bon. Dans un deuxième temps, je m étais fixé comme objectif de coupler les animations CSS3 et le JavaScript espérant pouvoir réaliser des animations poussées, seulement je me suis vite rendu compte que le JavaScript n apportait pas beaucoup plus d éléments d animation que les nouvelles propriétés apportées par CSS3 et je n ai donc pas effectué d expérimentation concrètes dans ce cadre. Après avoir repensé mon axe d apprentissage autonome et l avoir réorienté vers l utilisation du JavaScript en tant qu aide à l ergonomie et à l accompagnement de l utilisateur, j ai en semaine 5 expérimenté principalement autour des formulaires. Avec JavaScript, j ai ainsi pu tester l affichage des erreurs avant la validation du formulaire du côté client. Pour cela, j ai pris le contexte d un formulaire d inscription. Par exemple, lorsque l utilisateur entre un mot de passe trop court, une erreur s affiche dès qu il quitte le champs (sur l'évènement blur de JS) et il n a donc pas alors à perdre du temps à envoyer le formulaire, attendre le chargement et le retour des erreurs envoyées par le serveur, il sait immédiatement ce qu il n a pas bien rempli. J ai effectué cette validation sur tous les champs du formulaire. Certains permettent comme expliqué auparavant de voir instantanément les erreurs faites mais d autres sont vérifiés seulement lors de l envoi du formulaire (c est le cas des boutons radio et des liste de sélection entre autre). Autour du champ de définition du mot de passe, j ai également ajouté un indicateur de niveau de sécurité. Avec jquery j ai également pu en quelque sorte sécuriser le bouton d envoi du formulaire afin d éviter un envoi multiple à force de clics répétés par l utilisateur. Pour cela, J ai utilisé la 7/15

8 méthode.attr() afin de désactiver le bouton pendant l envoi et la méthode.val() pour remplacer la valeur du bouton et qu il n affiche plus envoyer mais envoi en cours. Durant ma sixième semaine d apprentissage, j ai expérimenté sur la librairie jquery UI (User Interface) en créant une sorte de jeu de piste utilisant différents éléments de la librairie afin de connaître leur fonctionnement et de voir comment les intégrer à une page et les manipuler. Une fois que j étais plus à l aise avec ces éléments, j ai voulu m exercer et faire des expérimentations avec AJAX que j avais déjà vu quelques semaines plutôt mais uniquement du côté théorique. Ainsi, j ai testé la fonction load() qui m a permis de changer le contenu d une div affichant les titres et liens d articles sans avoir à recharger toute la page. Par exemple, si le visiteur veut changer et ne pas voir les derniers articles mais plutôt les plus commentés, il n a pas à recharger toute la page qui peut être très lourde notamment si c est dur un gros site d actualité présentant de nombreux encarts et cela peut l empêcher d être perdu car si la page se recharge, elle ne se réaffiche pas exactement au même endroit que là où elle a été quittée. J ai également dans un second temps expérimenté la fonction get(). Je l ai mise en pratique à travers l affichage de commentaires provenant d une base de données en fonction du choix d un article. Concrètement, on sélectionne dans une liste déroulante le titre d un article et cela affiche ses commentaires en dessous sans avoir à recharger sa page. Cela est rendu possible car la fonction get() appelle une page PHP contenant une requête à faire à la base de données et renvoie les informations demandées. En semaine 7 sur la manipulation des images en JavaScript, je me suis vite rendue compte que comme l objet Image est plutôt basique, je n aurais pas grand chose à expérimenter de ce côté là. Je me suis alors penchée sur l utilisation du plugin imgareaselection que j avais trouvé intéressant dans le cadre de l amélioration de l ergonomie d une page. Ce dernier permet de sélectionner une partie d une image, ce qui peut être pratique dans certains cas de manipulation d images par l utilisateur. J ai donc cherché à comprendre comment fonctionne ce plugin en analysant son code. Pour aller plus vers le concret avec ce plugin, j ai trouvé l extension AjaxCrop qui le met en application et que j ai donc testée et dont j ai décortiqué le code et le fonctionnement. Durant la dernière semaine d apprentissage autonome mes objectifs étaient la réalisation d une visionneuse d images (type slider) et d un système d auto complétion pour un champ de recherche. Pour la réalisation de la visionneuse, je me suis appuyée sur divers tutoriels et bouts de code trouvé sur différents blogs, sites et forums. Pour le système d auto complétion j ai suivi le tutoriel proposé par le Site du Zéro car il est très détaillé et clair. 8/15

9 1.3 Bilan des problèmes rencontrés et des solutions apportées Le principal problème que j ai rencontré lors de la première moitié de ce module d apprentissage autonome a été le fait que mon sujet soit beaucoup trop vaste et sans contexte vraiment défini. Je voulais tout apprendre pour rattraper mes lacunes mais je me suis vite rendue compte que c était impossible à la vue du temps que j avais. De plus, bien que j accumulais pleins de nouvelles connaissances et de nos savoirs très intéressants, j avais également l impression de ne pas savoir où j allais et ce que j allais pouvoir présenter à la fin du module. Il a donc fallu que je réfléchisse à une réorientation de mon sujet et j ai choisi de me concentrer sur le langage que je connaissais le moins parmi le HTML5, CSS3 et JavaScript : le JavaScript. Le contexte d application est ensuite venu plus naturellement puisque le JavaScript n est aujourd hui plus tant utilisé pour réaliser des animations que pour améliorer l ergonomie des sites web. Je suis d autre part très intéressée par tout ce qui touche à l ergonomie web et je pense que c est un point fondamental d un site internet que d être clair et utilisable facilement par tous ses visiteurs. Le second problème que j ai rencontré se situe au niveau de la gestion et la planification de mon temps durant les deux dernières semaines d apprentissage. En effet, avec la finalisation du projet de refonte du site de la technique et le début du stage j ai eu du mal à trouver des moments et la concentration nécessaire pour être aussi efficace que durant les premières semaines. 2. BILAN DE LA PROGRESSION DU TRAVAIL 2.1 Semaine 1 Heures prévues : 16 Heures réelles : 14 Pour la première semaine, j avais prévu beaucoup d heures en voyant la quantité de choses que je devais apprendre pour connaître le JavaScript. Je n ai évidemment pas réussi à faire 16 heures comme je le voulais mais j ai tout de même réalisé 14 heures dont la moitié consistait à apprendre et prendre des notes sur les notions de base de JavaScript. La recherche d information a été plus rapide que prévue en raison du fait que je me suis lancée dans la lecture du cours sur JavaScript du Site du Zéro et que, étant satisfaite de cette source qui est très complète, j ai suivi son déroulement et cela m a suffi. Comme ça n était que le commencement de mon apprentissage du JavaScript, cela m a pris plus de temps de lecture que d expérimentation. 2.2 Semaine 2 Heures prévues : 13 Heures réelles : 12 J ai une nouvelle fois en semaine 2 surestimé le temps de recherche de source d information mais cela m a permis de faire plus d expérimentations notamment sur les lecteurs vidéos et audio HTML5. Mes 9/15

10 objectifs vis-à-vis des lecteurs ont ainsi été atteints, cependant l apprentissage des bases de JavaScript n était pas fini à la fin de cette semaine et était donc à poursuivre. 2.3 Semaine 3 Heures prévues : 13 Heures réelles : 12,5 Cette semaine, les heures planifiées ont été respectées cependant l apprentissage du JavaScript que j espérais pouvoir continuer au fil des semaines s est un peu effacé et bien que j ai couvert les sujets que je m étais fixés, je ne les ai pas autant approfondis que ce que j aurais souhaité. 2.4 Semaine 4 Heures prévues : 12 Heures réelles : 12 Les heures que j ai effectuées cette semaine-ci ont parfaitement concordé avec ce que j avais planifié. Cependant, mes objectifs n ont pas tous été remplis puisque je ne suis pas parvenue à réaliser une animation avec JavaScript. Je ne suis cependant pas pour autant déçue car j ai pu me rendre compte que cette technique n était plus trop d actualité. 2.5 Semaine 5 Heures prévues : 12 Heures réelles : 11 Les heures prévues pour cette semaine ont globalement été respectées à l exception d une heure manquante qui se situe dans le cadre des expérimentations. Les objectifs ont été atteints au niveau de l apprentissage de JavaScript dans les formulaires mais l apprentissage de l AJAX quant à lui m a semblé trop superficiel. 2.6 Semaine 6 Heures prévues : 17 Heures réelles : 13,5 Durant cette semaine, j ai passé un peu plus de temps que prévu sur les expérimentations et le nombre d heures réelles de lecture a été bien moindre que celui prévu. Cela est dû au fait que j ai voulu mettre en pratique mes lectures et nouvelles connaissances en AJAX et que j ai donc passé du temps à faire des expérimentations à ce sujet. Le manque d heures de lecture se justifie quant à lui par le fait que l apprentissage de jquery est aisé lorsque l on connait déjà le JavaScript. Je n ai donc pas trop eu à creuser ce sujet. 10/15

11 2.7 Semaine 7 Heures prévues : 16 Heures réelles : 13 En semaine 7 j ai bien pu réaliser mon objectif d apprentissage des expressions régulières et de l objet image de JavaScript mais j ai cependant pas pu beaucoup expérimenter autour du sujet des images en JavaScript puisque l objet ne m a pas paru spécialement intéressant et que la création d une extension me semblait démesurée. J ai donc tranché pour la recherche et l analyse du fonctionnement de certains plugins trouvés sur le web et aidant à faciliter la manipulation d images par les utilisateurs. 2.8 Semaine 8 Heures prévues : 16 Heures réelles : 12 La dernière semaine a été pour moi la plus dure à tenir au niveau des heures à réaliser. Non seulement il y avait le projet TIM à finaliser mais aussi le stage qui commençait. De plus, beaucoup d heures ont été consacrées à la rédaction du rapport final du module. S aménager des heures a donc été plus difficile. Les objectifs que je m étais fixés ont néanmoins été atteints. 3. TECHNOLOGIES EMPLOYEES Je ne pense pas que si je devais refaire ce module d apprentissage je prendrais les mêmes technologies que celles que j avais choisies au départ. En effet, il y en avait trop et sans véritable lien entre elles. J aurais plutôt dû me concentrer dès le départ sur le JavaScript que je ne connaissais alors pas du tout plutôt que de survoler des technologies que je connaissais déjà un peu comme le CSS3 et le HTML5. Cela aurait été plus efficace du côté de l apprentissage du JavaScript qui me semble a été nécessaire pour moi qui suis dans l optique de faire de l intégration front end et plus particulièrement dans le contexte d amélioration de l ergonomie et l aide à l utilisateur puisque c est un aspect de la conception de site web qui m intéresse particulièrement et qui est important. Parmi les technologies que j ai étudiées, le HTML5 apparaît comme un concurrent de Flash. Cependant, après plusieurs recherches, il s avère que bien que le HTML5 permettent de remplacer Flash dans bien des situations, il ne peut pas le remplacer partout, dans toute situation. En effet, il faut prendre le temps de bien étudier le projet afin de savoir laquelle des deux technologies est la plus appropriée. Dans le cadre d une application mobile native telle qu un jeu, Flash sera alors à privilégier. Cependant, pour un site web, Flash n est plus la meilleure option en raison notamment du fait de son poids et temps de chargement. De plus, HTML5 combiné avec CSS3 permet de réaliser bien des animations qui étaient avant difficiles voire impossible à mettre en place sans Flash. En ce qui concerne le JavaScript, il n existe 11/15

12 pas vraiment de technologie concurrente, si ce n est qu avec l apparition de CSS3, JavaScript n est quasiment plus utilisé pour ses animations. Mais en ce qui concerne l accompagnement des utilisateurs et l ergonomie des sites web, JavaScript reste très utile. 4. PERSPECTIVES Cet apprentissage, notamment du JavaScript orienté ergonomie m a permis de m intéresser et de me sensibiliser plus à comment rendre les sites web plus accessible à tout le monde, comment faciliter la navigation des internautes les plus novices tout comme celle des plus expérimentés. Si je devais continuer, je me pencherai donc sur les différentes façons d améliorer la navigation et de simplifier les sites web. 12/15

13 CONCLUSION L évolution de mon sujet d apprentissage est assez particulière. En effet, mon choix de sujet s est fait un peu dans la précipitation, en peu de temps en début de session et en y repensant je n avais pas bien saisi l enjeu de ce choix. Je me suis rendu compte assez vite et j ai heureusement pu recadrer mon sujet vers quelque chose de plus réaliste et correspondant plus à ce qu on me demandait. Cela n empêche cependant pas le fait d avoir tout de même appris beaucoup de choses autant du point de vue des technologies que de celui de la méthodologie que j ai mise en place (il n y a pas eu de perte de temps). En ce qui concerne la méthodologie que j ai adoptée pour mon apprentissage qui consistait à faire des recherches et lire des livres et cours (comme celui du Site du Zéro) tout en prenant des notes, je pense que cela a été efficace (notamment le fait de prendre des notes, cela m a aidée à retenir beaucoup de chose). Pour ce qui est des expérimentations, comme en JavaScript je partais de rien, je n avais aucune connaissance, je pense que suivre des tutoriaux a été judicieux. En effet, je ne me voyais pas du tout tenter de réaliser quelque chose entièrement par moi-même : les tutoriaux m ont ainsi inspirée dans mes expérimentations et m ont servie de base. Cette expérience a donc été très enrichissante autant sur le plan personnel que sur le plan de mes connaissances et cela m a définitivement donné de l intérêt pour tout ce qui peut être utile à l amélioration de l ergonomie des sites internet. 13/15

14 MEDIAGRAPHIE LIVRES Ouvrage général : Développez votre site web, le guide complet Titan par Fabien Basmaison, Antoine Cailliau, Laurence Guitier, Olivier Hondermarck, Jean-Pierre Imbert, MA EDITIONS, mars EBOOKS CSS3 pro animation par Dudley Storey, éditions APress, janvier 2013 Plus particulièrement : chapitre 2 "CSS3 Transforms and transitions", chapitre 3 "CSS3 Transitions for images" et chapitre 4 "CSS3 Transitions for UI Elements" jquery UI par Eric Sarrion, éditions O reilly, 2009 Javascript & jquery : the missing manual par David Sawyer McFarland, O'Reilly Media, 2011 JS for dummies (4e édition) par Emily A. Vander Veer, éditions Wiley Publishing, 2005 SITES WEB Le Site du Zéro : Lecture quasi-complète du cours sur le JavaScript - W3Schools : Pour tout ce qui est du fonctionnement de base des technologies du web. Utilisé plus particulièrement dans le cadre de l apprentissage de l animation SVG ( du JavaScript ( Smashing Magazine : 14/15

15 Exemples de réalisations originales en CSS3 et JavaScript - Alsacréations : SVG, le dessin vectoriel pour le web par Nicolas Gilis, janvier Documentation jquery : et Mozilla Developer Network : Essentiellement utilisé pour sa partie sur le CSS3 ( CSS3.info : Pour certaines informations et certains détails à propos du CSS3 ARTICLES EN LIGNE Flash Player: CPU Hog or Hot Tamale? It Depends. : étude par Jan Ozer, février HTML5 vs. Flash, quel choix de technologie effectuer pour ses applications web et mobiles? : article du Journal du Net rédigé par Pierre Priot en septembre JavaScript: How Did We Get Here? par Steve Champeon, 04/06/ INFOGRAPHIES Infographie par Wix sur le HTML5 : 15/15