Nous allons survoler les bases du développement d'une application HTML5, et développer une application similaire à l'application Draw Something, compatible avec le web mobile.

Cette partie va durer 3 séances de 3h. L'application complète sera rendue et vaudra 20% de la note finale du cours.

Concepts abordés:

Formulaire d'inscription/connexion HTML5,
adaptation au web mobile,
élément canvas
exportation d'un canvas en image
fonctionnalité de partage Twitter, Facebook
format d'échange JSON

Technologies utilisées:

PHP, MySQL, HTML5, CSS3, javascript

Prenez l'habitude d'utiliser les outils de développement de votre navigateur pour étudier le DOM, les échanges réseau, le javascript, le CSS, ...

Mise en route

Discussion: Qu'est-ce que le HTML 5 ?

On va aborder un ensemble de concepts nouveau dans le HTML5.

A faire: Survoler la liste sur le site http://html5test.com/.

Dans la partie 1 du cours on va se concentrer sur:

Parsing Rules
Elements
- Embedding custom non-visible data
- Section elements
- Text level elements: download, ping, mark, ruby
- Interactive Elements: Details, Summary
Forms
- nouveaux champs de formulaire, validation, ...
2D graphics
- canvas
- Image export format
Storage
- IndexedDB
Other
- JSON encoding and decoding

Discussion: Quels autres points de la liste connaissez vous ? vous intriguent ?

Soyez curieux, demandez, ou cherchez sur le net.

Parsing Rules, headers, balises meta

A faire: Validez chacun de ces documents html dans le validateur du w3c: http://validator.w3.org/#validate_by_input

Corrigez les erreurs.

Prenez l'habitude de valider vos documents HTML.

HTML 4.01

<!doctype html public "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="fr">
   <head>
      <meta http-equiv="content-type" content="text/html; charset=UTF-8">
      <title>My first HTML document</title>
      <meta name="description" content="Exemple de description">
      <link rel="stylesheet" type="text/css" href="monStyle.css">
      <script type="text/javascript" src="monSript.js"></script>
   </head>
   <body>
      <div>...</div>
   </body>
</html>

HTML5

<!doctype html>
<html lang="fr">
   <head>
      <meta charset="UTF-8">
      <title>My first HTML document</title>
      <meta name="description" content="Exemple de description">
      <link rel="stylesheet" href="monStyle.css"/>
      <script src="monSript.js"></script>
   </head>
   <body>
      <div>...</div>
   </body>
</html>

Discussion: Commentaires ? Des différences importantes ?

Cours: Dans le document à l'url http://www.slow-lab.com/guide-balises-meta.php, lisez les sections suivantes:

Tout jusqu'à: Les balises Meta de partage Facebook
Les balises Meta Language et Content-language
À Quoi Ressemble Un <Head> Propre?

Ne vous attardez pas trop dans les détails, en particulier pour les balises meta de partage Facebook: on y reviendra en détail plus tard...

Discussion: Commentaires ? Une idée de ce que peut bien être le web sémantique ?

Elements

A faire: Téléchargez le projet demoHTML5 ci-joint. Exécutez et étudier les sources de chaque fichier HTML.

1_customNonVisibleData:

Etudiez le document à l'url http://www.alsacreations.com/article/lire/1397-html5-attribut-data-dataset.html

2_SectionElements:

Etudiez le document à l'url http://www.alsacreations.com/article/lire/1376-html5-section-article-nav-header-footer-aside.html

3_textLevelElements:

Comprenez l'utilité:

de l'élément mark
des attributs download et ping
des éléments ruby

4_InteractiveElements:

Etudiez le document à l'url http://www.alsacreations.com/article...s-summary.html

TP Formulaires

On va créer un projet PHP avec base de données MySQL pour faire une page d'inscription, et une de connexion pour notre site.

Cours: Pour les formulaires HTML5, une introduction peut être lue à la page suivante: http://standardista.com/forms/. Vous vous inspirerez ensuite des documents suivants

Etudiez l'exemple exemple_inscription.html

Formulaire d'inscription

Le formulaire d'inscription comportera les champs suivants:

login	type texte, obligatoire, a le focus par défaut, plus que 3 caractères
adresse email	type email, obligatoire, doit être au bon format
mot de passe	type password, obligatoire, entre 6 et 8 caractères
confirmation du mot de passe	type password, obligatoire, doit être égal au premier champs mot de passe (validation en html5)
nom	type text, optionnel
prénom	type text, obligatoire
téléphone	type tel, optionnel
site web	type url, optionnel
sexe	type radio button, optionnel
date de naissance	type date, optionnel
age	type number, optionnel, si l'age est fourni il doit être en accord avec la date de naissance (validation en html5)
ville	type text, optionnel
taille	type range
couleur d'arrière plan préférée	type color
photo de profil	type file.

donnez leur à chacun un label et un identifiant,

tapez document.getElementById('login').validity dans la console et observez l'objet retourné.

Les champs devront contenir un texte par défaut (attribut placeholder)

Bonus du champs de formulaire inscription:

Pour la photo de profil:

on veut que l'utilisateur puisse glisser-déposer une image à un endroit de la page web (drag and drop API, File API), on redimensionne l'image grâce à l'API

Créez la table

Choisissez les types de champs html5 qui conviennent,

ni le login, ni l'email ne doivent exister dans la base. Proposez deux méthodes de validation en ajax appelées au moment où l'un des champs perd le focus

Formulaire de connexion

Le formulaire de connexion devra comporter les chsuivants:

login ou mot de passe	type texte, obligatoire, a le focus par défaut
mot de passe	type password, obligatoire

http://www.phpeasystep.com/phptu/6.html

http://dmouronval.developpez.com/tut...ulaires-html5/

Si vous n'êtes pas au point sur les cookies / sessions en PHP, étudiez le document à l'URL http://www.julp.fr/articles/17-php-cookies-et-sessions.html#utilisation (sections 1 à 2.2.9)

Web Mobile

On va réfléchir aux différentes solutions possibles pour adapter note site web aux mobiles

c.f., choix du site lemonde.fr, ou feuille de style avec sélecteur user-agent. Avantages/Inconvénients ?

Activité: faire en sorte que notre formulaire s'affiche bien sur mobile. tester.

https://developers.google.com/chrome...mulation?hl=fr

Canvas

quand on est loggué, on redirige vers une page paint.html, on va créer un paint interactif très simple, avec un peu de javascript. Juste des cercles de différentes tailles, et un sélecteur de couleurs avec summary/details.

http://miageprojet2.unice.fr/Intranet_de_Michel_Buffa/Web_2.0%2F%2FHTML5_Rabat_2012-2013

Stockage interne

On veut enregistrer dans le navigateur chaque évènement souris, pour pouvoir l'envoyer au serveur plus tard, et le rejouer ensuite sur un autre appareil.

On étudie les solutions de stockage interne dans le navigateur, leur adaptation par les navigateurs existants,

JSON

On se met d'accord sur un format JSON pour représenter ces dessins.

On ajoute un formulaire avec un bouton de soumission, qui envoie une requète POST à une page soumission.php

On stocke ces informations dans la base de données

Travail à rendre juste avant la séance n°5

Créer une autre page pour rejouer le dessin, avec un formulaire simple pour répondre à la question.

Comment éviter que celui qui doit deviner puisse tricher (avec un md5 ?)

Transformer en jeu, et s'assurer que le site soit adapté pour mobile.

Récupéré depuis "http://miageprojet2.unice.fr/index.php?title=User:Max/LPSIL_IDSE_-_Web_Multim%C3%A9dia_%2F%2F_Web_S%C3%A9mantique/Partie_1:_Application_Pictionnary"

Pages récentes

Partie 1: Application Pictionnary

De $1

Table des matières

Objectifs