Objectif: Une application similaire à l'application Draw Something, compatible avec le web mobile.
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

Préparation

Vérifiez que vous avez bien installé et configuré PHPStorm avec la dernière version de PHP et de MySQL.

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

Discussion/survol des nouveautés de HTML5.

Qu'est-ce que le HTML 5 ?

On va aborder un ensemble de concepts nouveau dans le HTML5. Vous pouvez accéder à une liste exhaustive sur http://html5test.com/.

Les sections suivantes de ce document se concentrent 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/survol des nouveautés de HTML5.

Parsing Rules

Comparez les deux débuts de document HTML suivant.
Validez chacun de ces documents html dans le validateur du w3c: http://validator.w3.org/#validate_by_input
Prenez l'habitude de valider vos documents HTML.

(X)HTML 4.01

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

Elements

Téléchargez et étudiez le projet demoHTML5 ci-joint.

Formulaires

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

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

On va créer un petit projet PHP avec base de données MySQL pour faire une page de connexion avec des formulaires intéressants

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

Préparation

Discussion/survol des nouveautés de HTML5.

Parsing Rules

Elements

Formulaires

Web Mobile

Canvas

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.

Table des matières

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,

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.