![]() |
![]() |
Accueil > Intranet Michel Buffa > Cours web 2.0 Miage de Nice 2012-2013 > TP4 HTML5 introduction, M2 Miage 2012-2013
TP4 HTML5 introduction, M2 Miage 2012-2013De $1Table des matières
Introduction
Supports de cours utilisés :
Références / tutoriaux disponibles :
Autres ressources :
Dans ce TP vous allez prendre contact avec HTML5 au travers de nombreux exemples interactifs, ce qui vous occupera une quarantaine de minutes. Prenez le temps de modifier le code source qui vous est proposé, de consulter les cours qui se réfèrent aux différentes parties, sur w3schools.com par exemple, etc. Certains exemples sont à tester sur téléphone ou tablettes. Par la suite, vous allez suivre un tutorial qui va vous emmener à construire petit à petit un logiciel de dessin interactif. Là aussi, l'exercice est sur le mode tutorial, donc il n'y a pas besoin d'être un spécialiste de JavaScript pour y arriver. Vous serez alors amené à tester ce logiciel sur une tablette et à le comparer avec un autre logiciel de ce type, mais qui a été adapté pour fonctionner sur téléphone/tablette. Enfin, vous jouerez avec du code permettant de gérer souris/molette/clavier/gestures de manière multimodale. Premier travail : perdez un peu de temps à découvrir les ressources web proposéesAllez, passez un peu de temps à parcourir les ressources proposées comme références dans l'introduction ci-dessus. Notammenent, la page Ressources HTML5 contient des liens vers de nombreux sites de référence. Prise de contact HTML5 au travers d'exemples interactifsVous allez suivre maintenant le tutorial HTML5 qui a été présenté à la conférence WWW2012 mais vous vous cantonnerez à la partie "discovery path" qui se compose d'exemples interactifs thématiques. lorsqu'un exemple vous parle, n'hésitez pas à passer du temps dessus, à modifier le code, à regarder dans les chapitres des supports de cours proposés pour obtenir plus d'informations, etc. Découverte pas à pas d'un, programme de dessin interactifSuivez les étapes 1 à 6 de la partie "geek path" du tutorial précédent. Voici un lien direct : http://miageprojet2.unice.fr/Intranet_de_Michel_Buffa/HTML5_Tutorial/Tutorial_WWW_2012 Vous vous arrêterez à la partie "intégrer un chat", etc. Vous ne ferez pas l'aspect multi-participants dans ce TP. Il sera abordé lors d'une prochaine séance. Travail à faire:
A l'attention de ceux qui ont suivi le module "option HTML5" de l'an dernier: Certains élèves de la classe ont déjà réalisé l'an dernier dans l'option HTML5 un tel programme. Pour ces élèves, prenez cet exemple comme une correction, vous pourrez bien entendu regarder aussi la correction de la partie multi-participants. Attention cependant: la librairie NowJS que nous avions utilisée l'an dernier n'est plus compatible avec le module "express" des dernières versions de NodeJS. SI vous voulez la faire tourner, utilisez les versions de NodeJS et des modules de l'année dernière. Nous verrons comment mettre à jour tout cela lors de la prochaine séance. Vous êtes invités si vous vous ennuyez à regarder des exercices complémentaires sur comment ajouter le support des évènements "touch" à ce programme, à regarder des logiciels équivalents mais développés pour device mobiles l'année dernière par des étudiants de M2, etc : Exercices complémentaires pour ceux qui ont suivi le module option HTML5. Pour les mini projets à venir: passer du temps encore sur la partie "multimédia" du cours (vidéo, images, drag and drop)Un des sujets de mini projets consistera à rajouter des fonctionnalités de publication de photo dans le blog boosté aux web services du TP précédent. Donc il vous est conseillé, si vous avez encore du temps, d'étudier en détail tous les exemples donnés sur les images, le drag'n'drop, les vidéos. Un autre des sujets du cours JavaEE 6 consiste à faire un site web de streaming de musique boosté aux web services, regardez donc aussi la partie "lecteur audio". Les autres sujets "non communs" au cours JavaEE 6 sont :
En gros, je suis très intéressé si un ou plusieurs groupes s'attaquent au "HTML5 mobile".
Mots clés:
|
Powered by MindTouch Deki Open Source Edition v.8.08 |