Codedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript

1. HTML5 – CSS3 - Javascript Le Web nouvelle définition

2. Historique du HTML

3. HTML : Langage à balise• <balise>Contenu</balise>• Balise = mise en forme• Format de données • CSS : format de présentation • JS : langage de développement• Permet d’écrire de l’hypertexte • = système contenant des nœuds liés entre eux par des liens • Un nœud = une unité minimale d’information

4. HTML : les noeuds<body><div style="background:#fff">Voici mon contenu</div></body>

5. HTML : les noeuds<body><div style="background:#fff">Voici mon contenu</div></body>Markup

6. HTML : les noeuds<body><div style="background:#fff">Voici mon contenu</div></body>Markup - Informations de style

7. HTML : les noeuds<body><div style="background:#fff">Voici mon contenu</div></body>Markup - Informations de style – Contenu (= nœud)

8. Evolution du HTML1989 :Création : 1995 :- Du http 1994 : HTML 4.0 1995 : 1996 :- Des URL Netscape 0.9 Styles W3C HTML 3.2- Du HTML Spécifications … table ! Scripts HTML 2.0 Object Frame 2006 : Mort de xHTML 2007 : 2000 : Nouveau groupe de travail xHTML HTML5

9. Un langage pour les gouverner tous 16 employés de Microsoft dont 1 Chairman (Paul Cotton) 17 membres de la Fondation Mozilla 11 employés dApple dont 1 Chairman (Maciej Stachoviak) 19 employés dOpéra 14 employés de Google

10. Un mot sur le WHATWH Spécification « concurrente » au HTML5 Non officiel Principaux soutiens : Mozilla, Opera et Apple Libre, ouverte S’oppose à la lenteur et au fonctionnement du groupe de travail HTML5 Mais lui fait des propositions (souvent acceptées)

11. HTML5, les nouvellesbalises

12. HTML5 : les nouvelles balises Structure de page web : <header> <nav>  <header> <section>  <nav> <article>  <section> <aside> <section>  <article>  <aside> <article>  <footer> <footer> 12

13. HTML5 : les nouvelles balises Balises pour webapplication :  <list>  <datalist>  <detail> } Listes déroulantes  <summary>  <meter>  <progress> } Barre de progression 13

14. HTML5 : les nouvelles balises Les attributs nouveaux du champ texte <input> :  type=’’color’’  required  placeholder  type=’’email’’  type=’’date’’  type=’’range’’  type=’’search’’  type=’’tel’’  type=’’number’’ 14

15. Les Framework JS

16. La philosophie Raccourcir la syntaxe Cross-browser Améliorer, POO-iser PluginsMais S’éloignent parfois de l’esprit JS Peuvent devenir usine à gaz  exemple

17. Les plus connus

18. Les plus connus

19. Les mobiles XUI

20. Ceux qui vont encore plus loin • Philosophie M-V-VM • Data binding • Utilisation complète des attributs HTML5

21. Démo jQuery Les sélecteurs simples Les sélecteurs complexes Les animations La manipulation de CSS

22. CSS3, ce qui est possible

23. CSS3, ce qui est possible Sélecteurs :  :ntn-child(odd/even)  :not(.class or #id or elem)  :first-child  :last-child  input[type=’’text’’]  div > div 23

24. CSS3, ce qui est possible Polices hébergées sur le serveur  plus besoin d’utiliser une police présente sur tous les ordinateurs  toutes les polices sont acceptées @font-face{ font-family: Gotham; src: url(Gotham-Black.otf); } h1 { font: bold 90px Gotham; } 24

25. CSS3, ce qui est possible Apparence des éléments  border-radius : Wpx XpxYpx Zpx  transparence : rgba(x,y,z,∝)  background-size  background multiple :  background: url(image1), url(image2)  text-shadow  box-shadow  transitions 25

26. Mobilité et webapp

27. Mobilité et webapp <script Géolocalisation src="http://maps.googleapis.com/maps/api/js?sensor=  possibilité d’utiliser le GPS de false"></script> <script type=’’text/javascript’’> l’appareil function initialize() {  demande de confirmation if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(  utilisation de l’API Google onSuccess, Maps JS onError, { enableHighAccuracy: true,  affichage de la position de timeout: 20000, l’utilisateur maximumAge: 120000 }); } } </script> 27

28. Mobilité et webapp Création d’une webapp  intégration sur l’écran d’accueil de l’appareil  utilisation d’une image pour l’icône  utilisation d’une image pour le splashscreen  possibilité de cacher l’interface du navigateur web  rendu de l’application quasi natif <link rel="apple-touch-icon" href="icon.png"/> <link rel="apple-touch-startup-image" href="default.png" /> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-status-bar-style" content="black" /> 28

29. Mobilité et webapp Champs textes spéciaux : 29

30. HTML5 et multimedia

31. HTML5 et multimedia Images  utilisation de nouvelles balises en plus de l’images :<figure> <img src=’’mon_image.jpg’’> <figcaption> Texte de légende de l’images </figcaption></figure> 31

32. HTML5 et multimedia Audio  player html5 dans chaque  balise <audio> prévue à navigateur web cet effet compatible  prévoir les fichiers :  possibilité d’options :  .ogg (Opera, Firefox) <audio controls="controls" preload="auto"  .mp3 (Chrome, Safari) autobuffer="autobuffer" loop="loop">  ajouter les types : <source src="audio.m4a” type=’’audio/mpeg’’> <source src="audio.mp3” type=’’audio/mpeg’’>  type=’’audio/ogg’’ </audio>  type=’’audio/mpeg’’ 32

33. HTML5 et multimedia Vidéo  player html5 dans chaque  balise <video> prévue à navigateur web cet effet compatible  prévoir les fichiers :  .ogg (Opera, Firefox)  possibilité d’options :  .mp4 (Chrome, Safari) <video width="980px" height="551.25px"  ajouter les types : controls="controls" autobuffer="autobuffer" loop="loop" class="shown"  type=’’video/ogg’’ poster="poster.png">  type=’’video/mp4’’ <source src="video.m4v” type=’’video/mp4’’> </video> 33

34. Canvas, dessin etanimation

35. Définition Element du DOM Effectue des rendus DYNAMIQUES d’images Ne produit donc RIEN seul Nécessite d’accéder à l’élément et de le modifier à la volée Utilisable en dernier ressort Introduit par Apple Standardisé par WHATWG

36. Procédure Créer le CANVAS en HTML Définir ses dimensions en HTML Définir son style en CSS (Créer un raccourcis vers l’élément) (Créer un raccourcis vers son contexte) Dessiner ou Placer une ressources et l’animer

37. Démo http://jsfiddle.net/eWcdS/

38. Le temps réel • Ecrire côté serveur en Javascript • Le GWT du non-barbu • Performances • DOM parsingRequête basique HTTP Hello en TCP

39. Framework jeux Centré sur l’animation Léger Rapide à mettre en place Laisse le contrôle sur le code

40. Framework jeux Fonctionne avec un éditeur Permet l’export pour iOS sans passer par Safari Structure du code semi-OO très bien faite Animations et effets basiques pré-développés

41. Framework jeux Complexe mais extrêmement performant Capable de faire du temps réel 100% intégré à Facebook

Codedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript

codedarmor

Codedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript