Projet Miage Casablanca 2013

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 dansla 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é. Ce site peut vous servir plus tard !

Bonus :  

Faire en sorte que la page soit lisible et adaptés aux écrans des Smartphones (avec CSS3 Media Queries)

La page doit être adaptées c’est-à-dire que je ne dois pas devoir défiler de droite à gauche pour accéder aux informations. Le défilement doit être uniquement verticale => exemple http://www.html5rocks.com

Si vous n’avez pas de smartphones vous pouvez tester le rendu ici : Screenfly

 Screenfly permet de tester un site sous une vingtaine de résolutions différentes, de l’écran d’ordinateur de bureau en 24″ au petit téléphone mobile de 176×220 pixels en passant par des formats de télévisions en 1080p, le tout avec rotation de l’affichage

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

Travail à fournir:

• Rendre ce formulaire, avec forms, validation, CSS3, géolocalisation, webcam, drag images avec prévisualisation, canvas pour signature et utilisation d'une police personnalisée (avec l'attribut @font-face)

Bonus :

• Faire en sorte que le drag d’image fonctionne avec des images sur le disque dur mais aussi avec une image d’un autre site web.
• Ecrire une Servlet ou un page php qui permette de récupérer les données soumises et de les afficher. (pas de besoin de style juste les afficher)
• Envoyer la l'image de la signature et la réafficher par la servlet (conseils :  dessin signature => snapshot => dataUrl => submit

Partie III: mini jeu

A venir 

Modalités de rendu

Date limite :  le 21 Mars 2013, je ne corrige pas ensuite, la note sera égale à zéro.

Vous devrez individuellement préparer:

• Une archive portant le nom suivant : html5_casablanca_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. (indiquer si vous avez fait les bonus)
  • 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, 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.