Web avancé Master 2 EPU / ingénieurs 5ème année 2012-2013

Support de cours

Dans cette séance nous présentons les concepts fondamentaux des WebServices RESTful, avec pour ce TP une mise en oeuvre via Java EE 6 / NetBeans (tout simplement car cette plateforme permet de développer des WS REST en quelques clics). Nous verrons s'il est nécessaire de présenter les concepts de base du développement web en Java EE 6 en fonction du background de la classe (EJB/JPA notamment).

Une première partie de HTML5 sera utilisée, celle concernant le drag'n'drop, la File API et la partie video/gestion de la webcam.

Il se peut que le TP dure deux séances, et il sera à rendre, les modalités seront fixées lors du cours.

• Transparents utilisés en cours (code camp REST par Carol Mc Donald) : REST_Carol.odp (c'est de l'open office !) ou en PDF : restfulwebservices.pdf
• Compléments pour ceux qui veulent en savoir plus (comparaison avec SOAP, historique, use cases)
  • Regarder cette présentation qui rentre plus dans les détails : restws.pdf
  • Regarder les supports et vidéo postés sur la page du cours de l'an dernier , il y a notamment un screencast du cours + création de web services REST complets, avec persistence dans base données via JPA, à l'aide de netbeans, comme montré en cours.
     
• Voir aussi si vous êtes justes en JavaScript et en jQuery :
  • Cours JavaScript.zip : cours JavaScript de Michel Buffa (transparents HTML5 à ouvrir une fois l'archive sur votre machine, je ne les ai pas mis en ligne car c'est un cours sur lequel je travaille en ce moment). Ce cours couvre actuellement les bases de JavaScript, une grosse partie sur la programmation orientée objet (sans les Prototypes), JavaScript dans le navigateur web (BOM, DOM, évènements, AJAX). Revenez régulièrement voir si le cours a été complété.
    • Version en ligne : http://mainline.essi.fr/JavaScriptSlides/index.html
  • Transparents powerpoint sur jQuery : jquery.ppt et aussi la présentation interactive de John Resig, auteur de jQuery :  http://ejohn.org/blog/spring-2010-jquery-talks/ , la première "introduction to jQuery" est très bien pour un premier contact avec cette librairie.
  • N'oubliez pas d'aller faire un tour sur la page : Ressources JQuery que j'ai préparée à votre attention et qui contient de nombreuses ressources intéressantes au sujet de cette librairie (tutorials, transparents, livres, etc). Je recommande à 200% d'imprimer ou d'avoir sous la main les "jQuery chart sheets", des images qui résument en un coup d'oeil toute la librairie. 
  • La page officielle avec la doc de jQuery (exemples interactifs) :  http://api.jquery.com/
  • Les APIs JavaScript du DOM et du BOM ont énormément évolué avec HTML5, allez voir le tutorial HTML présenté récemment par un de vos enseignants à la conférence WWW 2012 : HTML5 Tutorial for WWW2012

TP: Création d'un blog en WebServices RESTful

Ce double TP sera à rendre (modalités à venir)

• Partie 1: Création d'un blog avec Web Services + client Ajax
• Partie 2 : Ajout de l'envoi de photos sur le blog en HTML5 + WebService REST permettant de récupérer les photos 

TP : amélioration de votre blog avec structuration à l'aide des nouveaux éléments vus en cours + microdata

Travail à faire: vous modifierez le code de votre blog:

1. Utilisation des tags de structure vus en cours: <header>, <footer>, <section>, <article>, <time>, <nav>, <aside> (dans le aside vous ajouterez une table des matières générée automatiquement à l'aide du script JS disponible sur Google HTML5 outliner: 
2. Insertion de Microdata pour décrire l'auteur du post (une Personne), le document (chercher le bon vocabulaire), autres... vous utiliserez le plugin jQuery microdata.js pour afficher dans un aside une table avec la description de l'auteur récupérée dans les microdatas.
3. Vous rajouterez sur les images des posts en contenant un attribut download permettant de télécharger les images si on clique dessus, au lieu que le navigateur les affiche dans un nouveau tab.
4. Vous ferez en sorte que si on passe la page à travers un outil de traduction, le nom de l'auteur, le nom du blog, etc ne soient pas traduites (attribut translate).

Cette version est à rendre pour la semaine prochaine ! (binôme possible).