Projet Miage de Rabat

Introduction

Le mini projet que vous devez me rendre se compose de trois parties distinctes. Les deux premières parties sont individuelles, la troisième pourra être faite en binôme ou trinôme (vous indiquerez les personnes concernées). Les modalités de rendu sont indiqués dans une section de cette page, vous devrez vous y conformer.

Partie 1: Faire un CV dans une page HTML5

Ce premier travail vous demande de réaliser une page pour présenter votre CV en utilisant au maximum les éléments vus pendant le cours ou figurant dans la page des exemples HTML5, ou encore des choses que vous pourrez trouver sur le web, mais attention, on ne veut pas ici utiliser une librairie JavaScript ou des widgets ou autres frameworks. Que du pur HTML5 / JavaScript / CSS.

Contraintes:

• Utiliser les tags section, nav, header, footer, figure, figurecaption, headergroup, aside, summary, details, etc, comme dans un des exemples donnés (attention, adapter, arranger, styler, etc, je ne veux pas juste retrouver mon exemple avec simplement les couleurs modifiées et votre texte)
• Vous êtes fortement incités à mettre du CSS3 (transitions, animations, transformations géométriques 2D et 3D, ombres, arrondis, tableaux stylés en CSS3, etc.)
• Le fait que votre travail ne ressemble pas aux autres et soit "pro" (pas n'importe quoi avec des couleurs criardes et des animations débiles) sera fortement apprécié.

Partie 2: Terminer le formulaire commencé en TP

En TP vous avez fait un formulaire utilisant les nouveaux éléments, attributs, APis de HTML5. Vous avez aussi, normalement, intégré la géolocalisation pour pré-remplir des éléments d'adresse du formulaire, etc. Vous deviez ajouter un Canvas pour y intégrer votre signature.

Vous deviez aussi intégrer la possibilité de prendre une photo avec la WebCam (attention, ça ne marche pas si on ouvre le fichier avec file:, il faut impérativement, avec Chrome que ce soit envoyé par un serveur. Avec Opera ça marche avec file:)

Je vous avais aussi montré la dernière page de mon cours sur les Servlets pour pouvoir uploader des fichiers binaires.

Travail à fournir:

• Rendre ce formulaire, avec forms, validation, CSS3, géolocalisation, wecam, canvas pour signature. Tester avec Opera et Chrome.
   
• Partie bonus très appréciée (le bonus sera conséquent): écrire une Servlet qui permette de récupérer les données soumises (pour les images, vous pouvez soumettre le formulaire via jQuery, ce sera plus simple, et pour transformer les images dans le bon format, voir http://miageprojet2.unice.fr/index.php?title=Intranet_de_Michel_Buffa/Web_2.0_MBDS_2012-2013/Ajout_de_l'envoi_de_photos_en_HTML5_%2b_WebService_REST)

Partie 3: ajouter des nouveaux outils de dessin au Paint multi-participant

Vous devrez rajouter la possibilité de dessiner du texte dans le Paint, et aussi en multi-participant, ce qui va vous obliger à comprendre le code. On veut aussi pouvoir dessiner avec des images (proposez au moins 3 icones supplémentaires dans le menu, si on clique dessus, on dessine avec cette image).

Toute amélioration supplémentaire sera appréciée (choix de la police, etc.)

Modalités de rendu

Date limite : le 15 Février 2012, je ne corrige pas ensuite, la note sera égale à zéro.

Vous devrez individuellement préparer:

• Une archive portant le nom suivant : html5_rabat_2013_nom.zip ou .rar, l'archive comprendra trois sous répertoires "partie 1", "partie 2" et "partie 3".
  • Si je vais dans partie 1 et que je clique sur le fichier HTML tout doit fonctionner.
  • Pour la partie 2, idem (je sais que la webcam ne marche que sur un serveur et que la Servlet doit être déployée dans NetBeans)... Si vous avez écrit la Servlet de soumission du formulaire, indiquez ce que vous avez fait.
  • La partie 3 je sais comment l'exécuter sur mon serveur NodeJS. Je le lancerai exactement comme l'exemple donné dans le tutorial.
  • Chaque partie doit comporter un Readme.txt ou un .doc indiquant tout ce qu'il faut savoir, ce que vous avez fait, les sources web de ce que vous avez réutilisé, intégré, etc. Pour la partie 3, les noms des personnes ayant participé.
     
• Vous remettrez le projet au responsable local de M2 NTDP, qui me transmettra soit une grosse archive avec tous les projets, soit un répertoire dropbox partagé, ou un autre moyen. C'est lui et lui seul mon intermédiaire pour la remise du projet. Je n'accepte pas les projets par mail.
   
• Tout cas de fraude (projets trop similaires, source prise du web et non citée, notamment) = zéro sans discussion.