Cours Web 2.0 Casablanca 2013

CSS 2 + quelques bouts de 3

• Cours de Philippe Renevier donné en Licence 3 :
  • 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, CSS3 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/

Dernier exemple étudié avec zoom, rotation, etc..

Installation des logiciels

 Dans ce TP vous commencerez par vérifier que vous disposez d'un editeur de texte ou un IDE Html5 / javascript. Je vous conseille fortement l'éditeur de texte :  sublime text 2 (simple et léger). Vous pouvez aussi utiliser WebStorm ou encore Netbeans (un peu lourd). 

Vous vous assurez que vous disposez de navigateurs webs récents :

• Chrome
• Firefox
• Safari
• Opéra
• Internet explorer

Et que ce dernier est à jours ! 

Vous pouvez tester si vous navigateur supporte bien les fonctionnalités HTML5 : http://html5test.com/. Une score aux alentours de 400 est souhaitable! 

Etude des exemples vus en cours

Prenez le temps de parcourir les exemples vus en cours, passez un peu de temps à regarder les sources, n'hésitez pas à les modifier pour voir... Passez au moins 30 minutes à explorer...

Ecriture d'un formulaire HTML5

Dans cet exercice, vous allez créer une page index.html qui contiendra un formulaire HTML5 que vous soumettrez à une Servlet par la suite, pour tester. On fera la partie Servlet plus tard... Pour le moment utilisez l'outil que vous voulez pour créer le formulaire HTML (sublime text 2, webstorm, netbeans, etc).

Je vous conseille d'utiliser aussi jsbin.com pour valider de petits exemples. Avec le menu jsbin/create milestone vous pouvez sauvegarder plusieurs versions de vos travaux. Copiez collez les URLs sinon ils seront perdus.

Le formulaire devra permettre de saisir votre nom, prénom, age (avec type = number), date d'inscription, adresse (plusieurs champs: rue, code postal sur 6 chiffres avec attribut regexp et placeholder, ville, pays avec auto-complétion par champs <datalist>), email, home page, et un mot de passe dans deux champs séparés (pour valider).

Vous utiliserez au maximum les possibilité des formulaires HTML5, c'est-à-dire: les types spécialisés email, tel, url, date, etc. Vous utiliserez aussi des règles CSS pour mettre en rouge les champs non valides, les attributs pour indiquer des valeurs exemples et des regexps pour valider le code postal. 

Vous utilisez comme dans l'exemple présent sur la page des Exemples HTML5 vus en cours l'API de validation des formulaires pour vérifier que les passwords sont bien identiques.

Une fois que la page fonctionne, vous écrirez une Servlet ou un bout de code PHP qui récupère les éléments du formulaire et les affiche dans une page de réponse.

Le but de cet exercice est de vous faire jouer au maximum avec les formulaires HTML5.

Intégration de la géolocalisation

Vous rajoutere dans le formulaire un bouton permettant de récupérer la longitude et la latitude de la positon courante. Vous afficherez ces valeurs dans un champs du formulaire de l'exercice précédent qui se remplira automatiquement. Vous afficherez dans un second temps la position sur une carte google map.

Soumettez le formulaire et affichez la longitude et la latitude reçue par le serveur.

Maintenant, inspirez-vous de l'exemple proposé sur la page des exemples et qui utilise le reverse geocoder de google map pour transformer la longitude et la latitude en adresse. Utilisez cet exemple pour pré-remplir le formulaire avec une option "trouver l'adresse à partir de ma position".

Exercices avec la vidéo

 On veut maintenant pouvoir ajouter une image à son formulaire, sa photo... Soit en la choisissant via un bouton, soit en faisant un drag'n'drop. On veut voir une preview de  la photo dans la page. On verra plus tard comment l'envoyer au serveur.

On veut aussi pouvoir la capturer à partir de la vidéo.

Vous vous inspirerez des exemples pour intégrer une image dans votre formulaire.

Exercices avec le dessin dans un canvas

On veut pouvoir enregistrer une signature avec la souris en dessinant dans un canvas. Vous ajouterez à votre formulaire un canvas et du code javascript pour pouvoir dessiner une signature à l'intérieur. Regardez les exemples pour vous en inspirer.

Regardez les différents tutoriaux pour voir comment récupérer le contenu du canvas sous la forme d'une image.

Rajouter des styles via CSS pour bien présenter la page de formulaire

Aidez-vous des exemples CSS donnés au début de ce TP pour styler votre formulaire et lui donner une apparence un peu plus sympathique. Notamment, j'aimerais bien que vous utilisiez des bordures pour séparer les différentes parties du formulaire: la partie adresse/géolocalisation, la partie nom, prénom, password, email, la partie image/signature, etc.

Par la suite, dans le TP2 nous reprendrons la page de ce formulaire pour utiliser les nouveaux tags de structure de HTML5 (<footer><header><article><section> etc.)