Partie 1: Application Pictionnary

De $1

Version de 06:54, 2 Mai 2024

cette version.

Revenir à liste des archives.

Voir la version actuelle

Cette partie va durer 3 séances de 3h.

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

Préparation 

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

Discussion/découverte des nouveautés de HTML5.

Resources supplémentaires:
 http://html5test.com/
 https://developer.mozilla.org/fr/doc...ide/HTML/HTML5

Parcourez la liste des fonctionnalités HTML5 sur le site http://html5test.com/ 
Dans cette partie du cours, on va se concentrer sur les éléments suivants:

  • Parsing Rules
  • Elements
    • Embedding custom non-visible data
    • Section elements 
    • Text level elements: download, ping, mark, ruby
    • Interactive Elements: Details, Summary
  • Forms
    • cf. slides de Michel Buffa sur les nouveaux champs de formulaire, la validation, ... TP d'aujourd'hui
  • 2D graphics
    • canvas
    • Image export format
  • Storage
    • IndexedDB
  • Other
    • JSON encoding and decoding

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.

(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

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

 

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

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

 

 

 

 

adaptation des sites web pour mobile

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

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