Technologies Web, Master 1 Miage, 2012-2013

Introduction

Dans ce cours nous allons voir des "bases avancées" de programmation web. Vous devez tous ou presque avoir des "bases" sur la manière de créer des sites/applications webs (en Php, en .Net ou en Java côté serveur, et vous devez avoir entendu parler de HTML/CSS/JavaScript), cette année nous allons partir d'une approche simple du développement d'applications et aller doucement vers des approches plus "méthodologiques". Nous utiliserons les technologies Java EE mais aussi JavaScript, HTML/HTML5 et CSS2/3...

Séance 1 : rappels historiques, protocole HTTP, introduction aux Servlets et JSPs

Pour la culture (à faire à la maison),

Regarder les vidéos suivantes (histoire du net) et lire les articles proposés qui retracent l'histoire du web.

• Vidéo "histoire de l'internet de 1957 à nos jours", n'oubliez pas d'activer les sous-titres (petite flèche vers le haut, en bas à droite du lecteur) :
  
• Vidéo pour fêter l'anniversaire de Tim Berners Lee (anglais), linventeur du web, retrace à travers son parcours, l'histoire du Web : http://www.rocketboom.com/news-tim-berners-lee/
• Le web et son futur par Fabien Gandon.  Cette présentation est détaillée dans l'article suivant :Les débuts du web sous l'oeil du W3C.
  
  • Les présentations des 10 ans du W3C, en anglais.
• Du Web aux wikis : une histoire des outils collaboratif (par Michel Buffa) : pour bien comprendre l'évolution du web vers le web 2.0 ou le "web social" que l'on connait aujourd'hui, cet article retrace les premiers pas de l'internet, la naissance du web et son évolution  vers un web servant non pas à relier des documents entre eux, mais des personnes, des objets, etc.
• Vidéo de Tim Berners Lee (anglais) pour le Ted's talk de février 2009, sur le "next web" : http://www.ted.com/talks/tim_berners..._next_web.html

Supports de cours

• ProtocoleHTTP.pdf (en TP on vous montrera qu'un serveur web complet acceptant de multiples connexions s'écrit en 2 fichiers Java).
• Servlets (2).pptx
• JSPs .pptx
  
  • Support de cours en anglais sur JSTL/EL (EL à partir du transparent 31, JSTL à partir du 61), le reste n'est pas pertinent : jsp2.pdf
    • Autres supports en français : el.pdf et jstl.pdf

Séance 2 : best practices JSPs et Servlets, JDBC

Supports de cours JSP et JDBC

• On a pas eu le temps de faire les JSPs lors de la première séance, on va reprendre donc le support de cours dans une version mise à jour : JSPs (1) (1).pptx 
• JDBC : deux supports de cours très complets, en français, par Richard Grin : jdbc.pdf et jdbcavance.pdf. Le support utilisé en cours est un résumé de ce qui se trouve dans ces deux supports.

Si on a le temps pendant cette séance, on fera une intro à JavaScript/jQuery/Ajax. Voici quelques supports de cours qui pourront servir...

JavaScript/jQuery

• Cours JavaScript de Michel Buffa (transparents faits en HTML5). Archive ici : Cours JavaScript.zip. Ce cours couvre "JavaScript" classique Ecma 5, pas les nouvelles APIs apparues avec HTML5 (voir le cours HTML5).
• 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/

 CSS

• Cours de Philippe Renevier donné en Licence 3 à l'université de Nice :
  • CSS2 : http://deptinfo.unice.fr/~renevier/L1/pdf/CSS-2.pdf et les exemples ici : http://deptinfo.unice.fr/~renevier/L1/css/exemple
  • CSS3 : http://deptinfo.unice.fr/~renevier/L1/pdf/CSS-3.pdf
  • Aussi, les principales nouveautés de CSS3 sont présentées dans le powerpoint HTML5 de Michel Buffa, voir avec lui. Contient de très nombreux exemples.
• Exemples interactifs très utiles pour comprendre : Exemples interactifs CSS
• Cours CSS de w3schools.com : http://www.w3schools.com/css/default.asp
• Présentations des nouveautés de CSS3 : http://slides.html5rocks.com et pour les choses à venir mais encore très émergentes, présentation CSS3 à la conférence WWW2012 : http://www.w3.org/Talks/2012/0416-CSS-WWW2012/

Un bon exemple CSS3 avec zoom, rotation, bords arrondis, ombres, etc...

• Ici l'exemple interactif : http://jsbin.com/ixowoc/5/edit#html,live

Séance 3: introduction aux EJBs et à Java Persistence API