![](/skins/common/icons/icon-trans.gif)
|
M1 Miage 2015-2016 - technologies Web
De $1
Table des matières- 1. Introduction
- 2. Séance 1 : rappels sur l'histoire du Web et des technologies Web, introduction à la technologie JavaEE
- 2.1. Rappels historiques (les parties non vues en cours sont à voir à la maison) :
- 2.2. Rappels HTML/CSS/JS
- 2.3. Obligatoire: inscription au MOOC HTML5 part 1!
- 3. Séance 2 Introduction à JavaEE, rappels HTML/CSS/JavaScript
- 3.1. TP1 : écriture d'un gestionnaire de livres, avec deux implémentations, CDI, JDBC
- 4. Séance 3: JSPs, EJBs, JPA intro, Ajax et JavaScript dans le TP1
- 4.1. TP 2 : prise en main des EJBs/JPA
- 5. Séance 4: introduction aux EJBs/JPA/JavaEE
- 5.1. TP3 : on termine le TP2 qui est à rendre
- 6. Séance 5: gestion des relations
- 6.1. TP4 : Ajout de relations dans le TP3 / démarrage du mini projet
- 7. Sujet unique du mini projet: faire une sorte de LeBonCoin mais au lieu d'avoir des régions on a des formations d'étudiants
- 8. Ressources diverses (cours, tutoriaux, outils)
- 8.1. Outils (attention, sujet trollesque...!)
- 8.2. Bootstrap, GIT...
- 8.3. Autre cours et galleries d'exemples CSS 2 et 3, JavaScript et HTML5
- 8.3.1. JavaScript
- 8.3.2. CSS
- 8.3.3. HTML5
- 1. Introduction
- 2. Séance 1 : rappels sur l'histoire du Web et des technologies Web, introduction à la technologie JavaEE
- 2.1. Rappels historiques (les parties non vues en cours sont à voir à la maison) :
- 2.2. Rappels HTML/CSS/JS
- 2.3. Obligatoire: inscription au MOOC HTML5 part 1!
- 3. Séance 2 Introduction à JavaEE, rappels HTML/CSS/JavaScript
- 3.1. TP1 : écriture d'un gestionnaire de livres, avec deux implémentations, CDI, JDBC
- 4. Séance 3: JSPs, EJBs, JPA intro, Ajax et JavaScript dans le TP1
- 4.1. TP 2 : prise en main des EJBs/JPA
- 5. Séance 4: introduction aux EJBs/JPA/JavaEE
- 5.1. TP3 : on termine le TP2 qui est à rendre
- 6. Séance 5: gestion des relations
- 6.1. TP4 : Ajout de relations dans le TP3 / démarrage du mini projet
- 7. Sujet unique du mini projet: faire une sorte de LeBonCoin mais au lieu d'avoir des régions on a des formations d'étudiants
- 8. Ressources diverses (cours, tutoriaux, outils)
- 8.1. Outils (attention, sujet trollesque...!)
- 8.2. Bootstrap, GIT...
- 8.3. Autre cours et galleries d'exemples CSS 2 et 3, JavaScript et HTML5
- 8.3.1. JavaScript
- 8.3.2. CSS
- 8.3.3. HTML5
Séance 1 : rappels sur l'histoire du Web et des technologies Web, introduction à la technologie JavaEE
Rappels historiques (les parties non vues en cours sont à voir à la maison) :
Introduction aux technologies du Web - Ici une vidéo (en anglais, activer les sous-titres) qui retrace l'histoire du Web et des technologies, aussi des services marquants que nous connaissons aujourd'hui, avec leur date d'apparition et de nombreuses anecdotes :
- Le Web ce n'est pas l'Internet (c'est entre autre sa couche hypertexte, et bien plus...) : cette vidéo retrace "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 : , penser à activer les sous-titres.
- Du Web aux wikis : une histoire des outils collaboratif (par Michel Buffa) : pour bien comprendre l'évolution du web dans sa phase 1993 jusqu''à 2005, soit l'apparition du Web 2.0 appelé aussi le "web social" dont il reste de grosses traces aujourd'hui (facebook, twitter, wikis, blogs, etc). Cet article retrace en particulier les premiers pas de l'internet en France, la naissance du Web et son évolution vers un Web servant non pas à relier des documents entre eux, mais des personnes, des objets, etc. Pour ceux que l'histoire du Web intéresse.
- Le protocole HTTP au coeurs du Web et des Web Services : ProtocoleHTTP.pdf
Obligatoire: inscription au MOOC HTML5 part 1!
Michel Buffa est l'auteur de deux MOOCs sur HTML5 : HTML5 part 1 et HTML5 part 2 Il s'agit de cours interactifs, couvrant l'intégralité de HTML5 et même beaucoup plus. L'inscription (gratuite) à HTML5 part 1 est obligatoire car on s'y réfèrera plusieurs fois.
Séance 2 Introduction à JavaEE, rappels HTML/CSS/JavaScript
TP1 : écriture d'un gestionnaire de livres, avec deux implémentations, CDI, JDBC
Séance 3: JSPs, EJBs, JPA intro, Ajax et JavaScript dans le TP1
On va commencer par commenter la correction du TP1...
Correction du TP1 + aussi un client Ajax / Xhr2 avec des échanges en JSON
- TP1M1Miage2015.zip, la partie Ajax se trouve pour le client dans
ajaxClient.html , et côté serveur, dans les deux servlets BookListServlet.java et BookEditorServlet.java . Les appels Ajax utilisent les mêmes URLs mais ajoutent à la fin "?format=json ", ce qui permet aux servlets de savoir si elles ont affaire à un appel Ajax ou pas... - Dans le cas d'un appel Ajax, les Servlets renvoient du JSON. Pour transformer des objets Java en JSON, on utilise la bibliothèque Jackson (voir bon tutorial ici).
- Les deux jars ont été placés dans le répertoire
lib du projet. C'est une bonne pratique si on veut distribuer un projet avec des .jars ... - De la même manière dans le cas d'un ajout de livre en JSON, on envoie depuis ajaxClient.html, en JavaScript, un livre en JSON, et on le décode (transforme en objet Java instance de Book) avec Jackson. Vous verrez qu'on peut envoyer d'autres types d'encodage l'an prochain, notamment avec le format multipart, qui est aussi très pratique pour envoyer des formulaires en Ajax.
Passez donc un peu de temps à tester le projet, et à étudier ajaxClient.html et le code des de BookListServlet.java
Supports de cours JSP et JDBC
- Les JSPs 2.0 (Java Server Pages, les composants "Vue" complémentaires des Servlets : JSPs.pptx
- Comment "programmer des vues" dans des pages JSPs: support de cours en anglais sur le langage de templates JSTL (Java Standard Tag Library) et sur le langage EL (ou Expression language, à partir du transparent 31, JSTL à partir du 61), le reste n'est pas pertinent : jsp2.pdf.
- 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. On ne va plus faire de JDBC. Ces deux documents ont là comme référence au cas où.
TP 2 : prise en main des EJBs/JPA
Séance 4: introduction aux EJBs/JPA/JavaEE
Support de cours :
TP3 : on termine le TP2 qui est à rendre
Séance 5: gestion des relations
TP4 : Ajout de relations dans le TP3 / démarrage du mini projet
Le sujet cette fois-ci est assez simple:
1 - Ajoutez à chaque utilisateur une adresse sous la forme d'une relation 1-n (une personne a plusieurs adresses), vous commencerez par créer une entity Adresse.java qui contiendra comme propriétés :
- No et nom de la rue,
- Code postal
- Ville
- Pays
Puis vous rajouterez une collection d'adresse dans la classe Utilisateur.java (sous la forme d'une ArrayList, mais utilisez le wizard avec la petite lampe jaune pour cela).
Vous modifierez ensuite la méthode qui crée des données de test, et afficherez les adresses des personnes dans le tableau, soit directement (une liste dans une colonne du tableau), soit indirectement (affichage d'un lien qui renverra vers une autre page).
2 - Ajoutez aussi des numéros de téléphones
Idem
Sujet unique du mini projet: faire une sorte de LeBonCoin mais au lieu d'avoir des régions on a des formations d'étudiants
On remplace la carte de France et les régions par des écoles locales (Polytech Templiers, Polytech Lucioles, Skema, Eurecom, IUTs etc.). Et on fait un site Web pour lequel chaque étudiant peut poster une petite annonce. Avantage : c'est local, si quelqu'un vend un jeu PS4 vous savez qu'il n'est pas très loin. On ajoutera la possibilité de faire non pas des ventes mais des "je cherche". Exemple, un étudiant cherche un baby foot, il pourra poster une annonce de type "recherche" et non pas une annonce de type "vente". Dans un premier temps le site est gratuit (pas de système de paiement).
Note pour les étudiants très motivés: je serai un étudiant aujourd'hui, je ferais un projet de création d'entreprise avec ça, je suis sur que ça marcherait (avec un système de paiement à la LeBonCoin et en proposant de poster aussi l'annonce sur LeBonCoin via son API).
On aura donc un système d'enregistrement d'utilisateurs, dans lesquels ils préciseront lieu (école), nom, pseudo, adresse mail, tel, photos facultative. Une fois enregistré il a le droit de poster ou supprimer des annonces.
On aura aussi des produits mis à la vente:
- Titre de l'annonce
- Catégories (jeu vidéo, instrument de musique, téléphone, etc -> voir sur le bon coin !) (relation 1-n annonce -> catégories)
- Description
- Photos (ici, dans un premier temps on fera en entrant un URL mais option qui apporte bonus = support du téléchargement des photos, voir cours sur les Servlets, vers la fin. Penser à uploader dans un répertoire visible par le serveur et exposables via des URLs, le docroot du serveur, ou le repertoire où se trouvent les pages web du projet par exemple).
- Date de dépôt
- Date de fin
- Prix
- Lieu et nom de la personne, possibilité de la contacter par mail ou tel (comme dans le bon coin, là on a une relation 1-n entre les personnes et les annonces)
On pourra séparer les modèles annonce et produit ou tout gérer dans une seule classe. A vous de voir.
Optionnel : une interface d'administration pour gérer utilisateurs et produits/annonces et aussi ajouter des catégories et des lieux/écoles.
On pourra faire des recherches multi critères (catégories, lieux (écoles), description ou titre contient un mot clé (avec des Likes).
Contraintes :
- Avoir dans l'annuaire des personnes tous les élèves de L3/M1/M2 Miage et tous les enseignants et secrétaires. Débrouillez-vous !
- Avoir en plus des élèves imaginaires des autres écoles. En tout 500.
- Travail à faire en binôme.
- Mêmes contraintes que dans le TP à rendre (template, pagination, login/password pour se connecter que en mode "post d'annonce", pas besoin d'être loggué pour chercher).
- Utilisation de formulaires HTML5 pour date, nombres, etc. avec feedback CSS3
- Optionnel : upload de photos par drag'n'drop, géolocalisation optionnelle pour "deviner" le site sur lequel on est au moment où on fait une recherche (API de géolocalisation de HTML5) : par ex, on est aux lucioles, on peut faire une recherche "près de moi" et le système remplit le champ automatiquement pour chercher dans les écoles situées aux lucioles.
- Optionnel : utilisation d 'Ajax, autocompletion sur les catégories, etc.
Le projet est à rendre pour le lundi 18 Avril. Une séance sera réservée pour les présentations / démonstration. Tous les membres du projet doivent être capables d'expliquer toutes les parties du code, même celles qu'ils n'ont pas écrites. Si vous vous faites aider : l'indiquer. Si vous piquez des trucs sur le web -> pareil.
Pompe d'un autre projet, d'un projet trouvé sur le Web, d'un projet d'une autre Miage, etc... au moindre soupçon, c'est zéro sans discussion. Demandez à quelques groupes actuellement en SIRIS. Je préfère un truc pas complet, mais fait par vous qu'un truc pompé. Ressources diverses (cours, tutoriaux, outils)
Outils (attention, sujet trollesque...!)
Sublime Text
Dans ce cours nous allons surtout utiliser NetBeans 8.0.2, mais néanmoins je vous recommande aussi d'autres outils pour éditer du HTML/JS/CSS, notamment l'excellent éditeur de code Sublime Text (et voir les packages d'extension les plus importants).
Comment tirer le meilleur de Sublime Text (raccourcis claviers + meilleurs modules) : http://slides.com/grinnyhermant/les-...sublime-text#/
Mini IDEs en ligne
Par ailleurs, sur le web il existe des "mini IDEs" très pratiques pour tester des bouts de JavaScript http://www.sublimetext.com/2 tels que http://jsbin.com/, http://jsfiddle.net/, http://dabblet.com/ ou http://codepen.io/. Ils sont particulièrement adaptés pour faire de petits exemples partageables (vous pouvez modifier les exemples, vous les approprier, mais jamais les casser, car pour chaque modification une version est générée, avec son URL unique).
Tirer le meilleur de NetBeans, Eclipse, WebStorm, Sublime Text
ICI UN DOCUMENT QUI EXPLIQUE COMMENT CONFIGURER EFFICACEMENT les principaux OUTILS/EDITEURS/IDEs pour faire du JavaScript de manière optimale (brancher l'interpréteur JavaScript NodeJS pour valider du JS et rediriger les erreurs dans Sublime Text, WebStorm et NetBeans, les devtools de google chrome pour pouvoir éditer / sauver les fichiers depuis le browser)
Bootstrap, GIT...
- Bootstrap: présentation par Brice Fernandez et Julien Blacas de M2 NTDP
- GIT : Philippe Segatori
Autre cours et galleries d'exemples CSS 2 et 3, JavaScript et HTML5
JavaScript
Ressource Numéro 1 pour débutants, amateurs et confirmés, même pour les Ninjas : http://jstherightway.org
Vous pouvez également regarder ces ressources:
- 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).
- jQuery (complément quasi indispensable de JavaScript):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.
-
- NOUVEAU : jQuery best practices !
- 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
Un bon exemple CSS3 avec zoom, rotation, bords arrondis, ombres, etc...
Flex Layout exemples
Transitions exemples
Animations exemples
Multi-colonnes exemple
WebFont exemple
Dégradés exemples
Ombres exemple
Background exemple
Border-image exemple
HTML5
Vous trouverez de très nombreux exemples interactifs dans les liens jsbin.com des supports de cours PDF en anglais. La plupart de ces exemples sont aussi disponibles sur cette page : HTML5 discovery tutorial
|