HTML5 – CSS3 - Javascript                Le Web nouvelle définition
Historique du HTML
HTML : Langage à balise•   <balise>Contenu</balise>•   Balise = mise en forme•   Format de données    •   CSS : format de ...
HTML : les noeuds<body><div style="background:#fff">Voici mon contenu</div></body>
HTML : les noeuds<body><div style="background:#fff">Voici mon contenu</div></body>Markup
HTML : les noeuds<body><div style="background:#fff">Voici mon contenu</div></body>Markup - Informations de style
HTML : les noeuds<body><div style="background:#fff">Voici mon contenu</div></body>Markup - Informations de style – Contenu...
Evolution du HTML1989 :Création :                                      1995 :- Du http  1994 :                            ...
Un langage pour les gouverner tous 16 employés de Microsoft dont 1 Chairman (Paul Cotton) 17 membres de la Fondation Moz...
Un mot sur le WHATWH Spécification « concurrente » au HTML5 Non officiel Principaux soutiens : Mozilla, Opera et Apple...
HTML5, les nouvellesbalises
HTML5 : les nouvelles balises Structure de page web :        <header>                                                    ...
HTML5 : les nouvelles balises Balises pour webapplication :   <list>   <datalist>   <detail>                  }    Lis...
HTML5 : les nouvelles balises Les attributs nouveaux du  champ texte <input> :             type=’’color’’   required   ...
Les Framework JS
La philosophie Raccourcir la syntaxe Cross-browser Améliorer, POO-iser PluginsMais S’éloignent parfois de l’esprit JS...
Les plus connus
Les plus connus
Les mobiles XUI
Ceux qui vont encore plus loin     • Philosophie M-V-VM     • Data binding     • Utilisation complète des attributs HTML5
Démo jQuery Les sélecteurs simples Les sélecteurs complexes Les animations La manipulation de CSS
CSS3, ce qui est possible
CSS3, ce qui est possible Sélecteurs :   :ntn-child(odd/even)   :not(.class or #id or elem)   :first-child   :last-ch...
CSS3, ce qui est possible Polices hébergées sur le serveur      plus besoin d’utiliser une police présente sur tous les ...
CSS3, ce qui est possible Apparence des éléments      border-radius : Wpx XpxYpx Zpx      transparence : rgba(x,y,z,∝) ...
Mobilité et webapp
Mobilité et webapp                                            <script Géolocalisation                           src="http...
Mobilité et webapp Création d’une webapp   intégration sur l’écran d’accueil de l’appareil   utilisation d’une image po...
Mobilité et webapp Champs textes spéciaux :                             29
HTML5 et multimedia
HTML5 et multimedia Images     utilisation de nouvelles balises en plus de l’images :<figure>      <img src=’’mon_image....
HTML5 et multimedia Audio                                   player html5 dans chaque   balise <audio> prévue à         ...
HTML5 et multimedia Vidéo                                  player html5 dans chaque   balise <video> prévue à          ...
Canvas, dessin etanimation
Définition Element du DOM Effectue des rendus DYNAMIQUES d’images Ne produit donc RIEN seul Nécessite d’accéder à l’él...
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’...
Démo http://jsfiddle.net/eWcdS/
Le temps réel                        • Ecrire côté serveur en                          Javascript                        •...
Framework jeux Centré sur l’animation Léger Rapide à mettre en place Laisse le contrôle sur le code
Framework jeux Fonctionne avec un éditeur Permet l’export pour iOS sans passer par Safari Structure du code semi-OO trè...
Framework jeux Complexe mais extrêmement performant Capable de faire du temps réel 100% intégré à Facebook
Prochain SlideShare
Chargement dans…5
×

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

2 160 vues

Publié le

Le web, nouvelle définition : les possibilités étendues de HTML5 marquent un tournant dans le développement de sites et d'applications web riches. Lors de cette soirée, nous ferons une revue des possibilités offertes par HTML5, CSS3 et Javascript, des applications mobiles aux jeux vidéo en passant par la diffusion de médias audio et vidéo.

Présenté par Benjamin Anseaume de Sushee.fr et Erwan Hesry

Publié dans : Technologie
0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
2 160
Sur SlideShare
0
Issues des intégrations
0
Intégrations
228
Actions
Partages
0
Téléchargements
72
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

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

  1. 1. HTML5 – CSS3 - Javascript Le Web nouvelle définition
  2. 2. Historique du HTML
  3. 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. 4. HTML : les noeuds<body><div style="background:#fff">Voici mon contenu</div></body>
  5. 5. HTML : les noeuds<body><div style="background:#fff">Voici mon contenu</div></body>Markup
  6. 6. HTML : les noeuds<body><div style="background:#fff">Voici mon contenu</div></body>Markup - Informations de style
  7. 7. HTML : les noeuds<body><div style="background:#fff">Voici mon contenu</div></body>Markup - Informations de style – Contenu (= nœud)
  8. 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. 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. 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. 11. HTML5, les nouvellesbalises
  12. 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. 13. HTML5 : les nouvelles balises Balises pour webapplication :  <list>  <datalist>  <detail> } Listes déroulantes  <summary>  <meter>  <progress> } Barre de progression 13
  14. 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. 15. Les Framework JS
  16. 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. 17. Les plus connus
  18. 18. Les plus connus
  19. 19. Les mobiles XUI
  20. 20. Ceux qui vont encore plus loin • Philosophie M-V-VM • Data binding • Utilisation complète des attributs HTML5
  21. 21. Démo jQuery Les sélecteurs simples Les sélecteurs complexes Les animations La manipulation de CSS
  22. 22. CSS3, ce qui est possible
  23. 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. 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. 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. 26. Mobilité et webapp
  27. 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. 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. 29. Mobilité et webapp Champs textes spéciaux : 29
  30. 30. HTML5 et multimedia
  31. 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. 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. 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. 34. Canvas, dessin etanimation
  35. 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. 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. 37. Démo http://jsfiddle.net/eWcdS/
  38. 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. 39. Framework jeux Centré sur l’animation Léger Rapide à mettre en place Laisse le contrôle sur le code
  40. 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. 41. Framework jeux Complexe mais extrêmement performant Capable de faire du temps réel 100% intégré à Facebook

×