Pages récentes

Modifier
la page

Nouvelle
page

Imprimer
la page
Page modifiée à 15:23, 19 Déc 2013 par Max
0

Partie 1: Application Pictionnary

De $1

Version de 11:18, 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, ...

Etape 1: 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 le projet demoHTML5 ci-joint.

Embedding custom non-visible data

Section elements 

Text level elements: download, ping, mark, ruby

Interactive Elements: Details, Summary

 

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
 

 
Powered by MindTouch Deki Open Source Edition v.8.08