![]() |
![]() |
Accueil > Intranet Michel Buffa > M2 NTDP - Web 2.0
M2 NTDP - Web 2.0De $1Table des matières
IntroductionBonjour, dans ce cours, nous allons découvrir HTML5 et développer quelques applications amusantes. HTML5 vous le verrez c'est HTML + CSS + JavaScript, beaucoup de JavaScript, étant donné que HTML5 vient avec un nombre important de nouvelles APIs et qu'il y a dans les tuyaux encore plus d'APIs à venir (pour les jeux, la musique, les mobiles, etc.). Par la suite, nous mélangerons HTML5 et les web services REST, enseignés dans un autre module. Séance 1 : survol des possibilités de HTML5, TP à rendre sur les nouveaux éléments de structure et les microdataSupports généraux vus en cours pour le survol de HTML5
Support de cours divers disponibles sur le web concernant les nouveaux tags de structure et les microdata
TP rigolo : création d'un monstre animé dans un canvasVous devrez créer un petit monstre original. Vous pourrez vous inspirer de celui-ci vu en cours (Maarif): http://jsbin.com/IjEVUPoX/19/edit Ou celui-ci : (emsi centre) http://jsbin.com/AlasIvA/2/edit, variante avec image en fond (background-image css) http://jsbin.com/AlasIvA/12/edit Ou encore de celui-ci (Rabat) : http://jsbin.com/AseVidu/7/edit TP 1 à rendre la semaine prochaine : réaliser une page dans laquelle vous vous présenter (sorte de mini CV)Dans cette page vous vous présenterez, photo, nom, adresse, tel, résumé de vos projets passés, vos études, vos passions, etc. Bref, vous devrez faire un CV. Contraintes
Modalités de rendu : A rendre avant le prochain TP.
Aucune autre forme ne sera tolérée... TP 2 à commencerCe TP porte sur un des flash killers de HTML5 : l'élément <canvas>, qui vient avec une API JavaScript très complète pour dessiner, animer, interagir avec l'élément <video> que nous verrons la semaine prochaine, etc.
TP2 : créer un monstre à l'aide de l'élément canvas HTML5Support de coursCette semaine nous étudieront un des flash killers de HTML5 : l'élément <canvas>, qui vient avec une API JavaScript très complète pour dessiner, animer, interagir avec l'élément <video> que nous verrons la semaine prochaine, etc.
Travail à faireDans ce TP vous relirez la partie du cours concernant le canvas HTML5. Partez d'un design simple à base de cercles, arcs de cercles, lignes, rectangles, etc... Puis ensuite jouez sur la couleur, les dégradés, les images, etc. Ce serait bien que le monstre réagisse à la souris (mouvements, clics), et soit animé. Inspirez vous des exemples des transparents présentés en cours. Ce TP sera à rendre aussi, de la même manière que le premier avec votre page personnelle. TP 3 : étude et amélioration d'un petit moteur de jeuPour ce TP on va partir d'un mini moteur de jeu, pas forcément très bien écrit (voir commentaires dans le code), qui propose au joueur (symbolisé par un petit carré noir déplaçable à l'aide des flèches du clavier) d'atteindre le plus rapidement possible une cible ronde. On a gagné lorsque la cible est atteinte. Au centre il y a un obstacle (un gros rectangle noir animé, on a mis du random sur sa position), et des collisions sont détectées lorsqu'on touche cet obstacle (les obstacles et le joueur deviennent rouges et la vitesse de déplacement est modifiée). On peut aussi, à des fins de debug, déplacer le joueur à la souris (utile pour tester les collisions), mais dans le véritable jeu, cette option sera désactivée. Exemple en ligne sur http://jsbin.com/acohiv/145 pour voir le source, cliquer en haut à droite sur le lien "edit in jsbin.com": L'animation est réalisée "à la sauce HTML5", c'est à dire à l'aide de la fonction JavaScript // generic way to set animation up window.requestAnimFrame = (function(callback){ return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(callback){ window.setTimeout(callback, 1000 / 60); }; })(); Voici la même version de ce programme sans ce code, avec une utilisation supposant que votre navigateur dispose d'une implémentation non expérimentale (cas de Chrome récent par exemple), regardez les appels très simples de mainLoop() et la manière dont cette fonction demande une nouvelle exécution avec requestAnimationFrame() : http://jsbin.com/acohiv/166/edit Et voici une seconde version dans laquelle on a rajouté un tableau d'obstacles et viré les valeurs codées en dur : http://jsbin.com/acohiv/142 Nous vous proposons un petit scénario:
Travail à faire:
Vous avez bien sur le droit de changer les graphismes, utiliser des images, des sprites, etc. changer le scénario aussi si vous avez de meilleures idées ! A RENDRE POUR LA SEMAINE PROCHAINE : ce que vous aurez fait dans le sens du scénario pour rendre la démo proposée amusante et jouable. M2 NTDP Casablanca Emsi exemples de formulaires avec upload en PHPLes exemples sont ici, à installer dans un WAMP. Lire les readme.md pour être sûr que cela fonctionne. Archive ici : proposition_correction_upload.zip, contenant plusieurs variantes du même formulaire:
Mots clés:
|
Powered by MindTouch Deki Open Source Edition v.8.08 |