Pages récentes

Modifier
la page

Nouvelle
page

Imprimer
la page
Page modifiée à 09:06, 7 Avr 2015 par MichelBuffa
0

M1 Miage 2014-2015 Technologies Web

De $1

Version de 17:15, 21 Nov 2024

cette version.

Revenir à liste des archives.

Voir la version actuelle

  1. 1. Introduction
  2. 2. Séance 1 : rappels sur l'histoire du Web et des technologies Web, introduction à la technologie JavaEE
    1. 2.1. Rappels historiques (les parties non vues en cours sont à voir à la maison) :
    2. 2.2. Introduction à JavaEE :
    3. 2.3. TP1 : écriture d'un gestionnaire de livres, avec deux implémentations, CDI, JDBC
  3. 3. Séance 2 : best practices JSPs et Servlets, JDBC
    1. 3.1. TP 2 : prise en main des EJBs/JPA 
  4. 4. Séance 3 : introduction aux EJBs/JPA/JavaEE
    1. 4.1. TP3 : on termine le TP2 qui est à rendre
  5. 5. Séance 4: gestion des relations, exemples de web services REST / Ajax
    1. 5.1. TP4 : Ajout de relations dans le TP3 / démarrage du mini projet
  6. 6. Sujets de Mini projets
      1. 6.1.1. Sujet numéro 1: on va modifier le gestionnaire d'utilisateurs en gestionnaire de contacts
    2. 6.2. Sujet numéro 2 : une base de données de jeux vidéos HTML5 (démos, jeux complets, tutoriaux)
      1. 6.2.1. Sujet numéro 3 : sujet libre (à me proposer pour validation)
  7. 7. Ressources diverses (cours, tutoriaux, outils)
    1. 7.1. Outils (attention, sujet trollesque...!)
    2. 7.2. Bootstrap, GIT...
    3. 7.3. Autre cours et galleries d'exemples CSS 2 et 3, JavaScript et HTML5
      1. 7.3.1. JavaScript
      2. 7.3.2. CSS
      3. 7.3.3. HTML5 

Introduction

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) :

  • Transparents : 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 enre 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

Introduction à JavaEE :

  • Les Servlets 3.0 : la brioque de base HTTP de la technologie JavaEE, utilisées comme "contrôleurs" dans une approche MVC.

TP1 : écriture d'un gestionnaire de livres, avec deux implémentations, CDI, JDBC

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.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.

TP 2 : prise en main des EJBs/JPA 

  • TP2 Technologies Web M1 Miage 2014-2015
     
  • 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.

Séance 3 : introduction aux EJBs/JPA/JavaEE

Support de cours :

Projet rapide fait en cours en "live coding", montre comment remplir la BD au déploiement, et la mise en oeuvre de relation 1-1 ou 1-n simples.

Pour le faire tourner: il faut créer une BD nommée : BDFilms avec comme login/password : app/app

TP3 : on termine le TP2 qui est à rendre

Séance 4: gestion des relations, exemples de web services REST / Ajax

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

Sujets de Mini projets

Sujet numéro 1: on va modifier le gestionnaire d'utilisateurs en gestionnaire de contacts

Ce sujet est la suite logique des TPs, il consiste à imaginer que le gestionnaire d'utilisateurs est en fait un gestionnaire de contacts. Je me loggue, je vois mes contacts, je peux visualiser leurs noms, adresses, téléphones, photos, etc. On aura une liste de contacts par utilisateurs.

En résumé : les utilisateurs des TPs deviennent des "contacts", et on ajoutera dans le TP une table des comptes utilisateurs. A un utilisateur loggué, correspond une liste de contacts, chaque contact ayant des relations vers ses adresses, ses numéros de téléphone, etc. On ajoutera une propriété "photo" (un URL) à la classe Contact.

Optionnel mais bienvenu : ajouter la possibilité d'uploader des photos avec le formulaire de contacts (regarder pour cela la fin du cours sur les Servlets sur l'envoi de formulaires multi parts) + chercher sur Interner comment faire un formulaire qui permette de choisir une photo.

Obligation d'avoir au moins 500 contacts (pas tous avec des photos différentes, pas grave...), avec possibilité de rechercher/modifier/ajouter/supprimer des contacts ou des adresses des contacts ou des téléphones, etc. 

Authentification par login + password et gestion de session obligatoire, templates de présentation comme dans le TP.

Sujet numéro 2 : une base de données de jeux vidéos HTML5 (démos, jeux complets, tutoriaux)

 

 

Il s'agit ici de s'amuser avec un site proposant un best of des jeux existants codés en HTML5, ou des exemples/tutoriaux montrant comment en faire un, ou encore présentant des aspects techniques de la programmation de tels jeux. On veut pouvoir consulter cette base de données pour trouver les meilleures ressource sur le sujet.

Quelques contraintes vous sont imposées néanmoins :

  • Template de présentation du site avec header, footer, menus, et champs de saisie pour la connexion,
  • Gestion de la session de connexion comme dans les TPs, mais en AJAX (à l'aide de jQuery ou en pur JavaScript) : la page ne va pas se réafficher lorsqu'on entre un mauvais login/password mais simplement afficher un message d'erreur.
  • Vous devrez utiliser un modèle de données avec des relations, à vous de voir quel modèle utiliser. On vous recommande de partir des classes entités pour générer les tables, comme dans les derniers TPs, pas de créer les modèles de données en SQL.
  • On distinguera des catégories de supports pour les jeux : jeu complet, démo, tutorial, etc. A vous de voir si il faut une relation ici ou pas... vous justifierez le choix dans le rapport qui sera rendu avec le projet.
  • On peut associer des "tags" (des mots-clé) aux produits (un ou plusieurs), comme sur youtube, flickr, etc. On pourra rechercher des produits par tags (plusieurs tags possibles). Par exemple, un tutoriel d'animation de sprites (images animées) sera taggué "tutoriel" et "sprites", un tutoriel basé sur le framework phaser.js sera taggué "frameworl", "tutoriel" et "phaser.js".
  • Chaque a une description résumée, un screenshot, éventuellement une vidéo, un ou plusieurs liens vers la page web où il se trouve, des indications pour savoir si le jeu est codé dans un IDE en ligne comme jsbin, jsfiddle, codepen, etc.  Ce sont des URLs, pas d'upload à gérer ici.
  • Gestion des comptes des clients + un ou plusieurs admins.
  • On veut un jeu de plusieurs dizaines (voir centaines) de données. A vous de vous débrouiller pour le générer ou le récupérer.
  • Vous devrez utiliser quelques fonctionnalités Ajax + quelques widgets et effets javascript dans votre application,  si possible du pur HTML5/JS/CSS3 au lieu d'embarquer des plugins ou libs js dont vous ne savez rien.
  • Vous documenterez dans le rapport les éléments de ces frameworks que vous aurez utilisé. Obligatoire : valider tout ce que l'on peut dans les formulaires en javascript avant de les envoyer sur le serveur. Lire le support de cours sur les formulaires HTML5 de Michel Buffa par exemple!

Facultatif :

  • Interface d'administration : faites ce que vous pouvez. Par exemple, le degré zéro c'est de ne rien faire ! 
  • Associer des vidéos youtube ou dailymotion aux produits,
  • Noter les produits (avec des étoiles), tri par popularité (stats de consultation), par note (étoiles),
  • Poser des commentaires sur les produits (il faut être loggué),
  • Mettre plein de gadgets supplémentaires dans l'interface (un caroussel pour animer les photos, des dialogues qui se poppent enb javascript, etc)

Sujet numéro 3 : sujet libre (à me proposer pour validation)

Là aussi, je suis ouvert à toutes propositions.

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...

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:

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 

 

 
Powered by MindTouch Deki Open Source Edition v.8.08