SlideShare une entreprise Scribd logo
1  sur  41
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 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
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 (= nœud)
Evolution du HTML
1989 :
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
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 d'Apple dont 1 Chairman (Maciej Stachoviak)

 19 employés d'Opéra

 14 employés de Google
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)
HTML5, les nouvelles
balises
HTML5 : les nouvelles balises
 Structure de page web :        <header>
                                                        <nav>

   <header>                     <section>
   <nav>                                   <article>
   <section>
                                                        <aside>
                                 <section>
   <article>
   <aside>                                 <article>

   <footer>
                                 <footer>

                            12
HTML5 : les nouvelles balises
 Balises pour webapplication :
   <list>
   <datalist>
   <detail>
                  }    Listes déroulantes



   <summary>
   <meter>
   <progress>    }    Barre de progression




                                13
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
Les Framework JS
La philosophie
 Raccourcir la syntaxe

 Cross-browser

 Améliorer, POO-iser

 Plugins

Mais
 S’éloignent parfois de l’esprit JS

 Peuvent devenir usine à gaz  exemple
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-child
   input[type=’’text’’]
   div > div




                                  23
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
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
Mobilité et webapp
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
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
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.jpg’’>
      <figcaption>
            Texte de légende de l’images
      </figcaption>
</figure>



                                           31
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
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
Canvas, dessin et
animation
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
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
Démo
 http://jsfiddle.net/eWcdS/
Le temps réel
                        • Ecrire côté serveur en
                          Javascript
                        • Le GWT du non-barbu
                        • Performances
                        • DOM parsing
Requête basique HTTP   Hello en TCP
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ès bien faite

 Animations et effets basiques pré-développés
Framework jeux



 Complexe mais extrêmement performant

 Capable de faire du temps réel

 100% intégré à Facebook

Contenu connexe

Tendances

Html de base
Html de baseHtml de base
Html de base
krymo
 
Prsentationhtml5 html5 ii twebteck
Prsentationhtml5 html5 ii twebteckPrsentationhtml5 html5 ii twebteck
Prsentationhtml5 html5 ii twebteck
TECOS
 

Tendances (20)

Formation web
Formation webFormation web
Formation web
 
Cours html
Cours htmlCours html
Cours html
 
HTML5 / CSS3 : Mythes et realite
HTML5 / CSS3 : Mythes et realiteHTML5 / CSS3 : Mythes et realite
HTML5 / CSS3 : Mythes et realite
 
Html de base
Html de baseHtml de base
Html de base
 
Prsentationhtml5 html5 ii twebteck
Prsentationhtml5 html5 ii twebteckPrsentationhtml5 html5 ii twebteck
Prsentationhtml5 html5 ii twebteck
 
CSS3 - nouveautes
CSS3 - nouveautesCSS3 - nouveautes
CSS3 - nouveautes
 
Langage HTML - Fondamentaux et ateliers
Langage HTML - Fondamentaux et ateliersLangage HTML - Fondamentaux et ateliers
Langage HTML - Fondamentaux et ateliers
 
Les bases du CSS3
Les bases du CSS3Les bases du CSS3
Les bases du CSS3
 
Html5 bonnes-pratiques
Html5 bonnes-pratiquesHtml5 bonnes-pratiques
Html5 bonnes-pratiques
 
Premiers pas en css3 et html5
Premiers pas en css3 et html5Premiers pas en css3 et html5
Premiers pas en css3 et html5
 
Advanced html5
Advanced html5Advanced html5
Advanced html5
 
WordPress
WordPressWordPress
WordPress
 
ENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 1/3 - HTTP, HTML, CSS JS
ENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 1/3 - HTTP, HTML, CSS JSENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 1/3 - HTTP, HTML, CSS JS
ENIB 2015 2016 - CAI Web S02E01- Côté Navigateur 1/3 - HTTP, HTML, CSS JS
 
Introduction à HTML 5
Introduction à HTML 5Introduction à HTML 5
Introduction à HTML 5
 
Formation HTML5/CSS3
Formation HTML5/CSS3Formation HTML5/CSS3
Formation HTML5/CSS3
 
Html 5
Html 5Html 5
Html 5
 
Intégration Web HTML 5 & CSS 3
Intégration Web HTML 5 & CSS 3Intégration Web HTML 5 & CSS 3
Intégration Web HTML 5 & CSS 3
 
Atelier initiation au html5
Atelier initiation au html5Atelier initiation au html5
Atelier initiation au html5
 
Pdo
PdoPdo
Pdo
 
Css
CssCss
Css
 

En vedette

En vedette (6)

La vie en flex
La vie en flexLa vie en flex
La vie en flex
 
Vers des applications modernes : retour d'expérience
Vers des applications modernes : retour d'expérienceVers des applications modernes : retour d'expérience
Vers des applications modernes : retour d'expérience
 
Le futur du Responsive Web Design
Le futur du Responsive Web DesignLe futur du Responsive Web Design
Le futur du Responsive Web Design
 
Le module Flex Layout du CSS3
Le module Flex Layout du CSS3Le module Flex Layout du CSS3
Le module Flex Layout du CSS3
 
Mastering CSS3 gradients
Mastering CSS3 gradientsMastering CSS3 gradients
Mastering CSS3 gradients
 
Les balises HTML
Les balises HTMLLes balises HTML
Les balises HTML
 

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

Enib cours c.a.i. web - séance #1 - html5 css3-js - 2
Enib   cours c.a.i. web - séance #1 - html5 css3-js - 2Enib   cours c.a.i. web - séance #1 - html5 css3-js - 2
Enib cours c.a.i. web - séance #1 - html5 css3-js - 2
Horacio Gonzalez
 
Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshop
Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshopConfoo - 2012-02-27 au 2012-02-28 - HTML5 workshop
Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshop
Frédéric Harper
 
Prsentationhtml5 html5 ii twebteck
Prsentationhtml5 html5 ii twebteckPrsentationhtml5 html5 ii twebteck
Prsentationhtml5 html5 ii twebteck
TECOS
 

Similaire à Codedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript (20)

Html5 2
Html5 2Html5 2
Html5 2
 
Une visite guidée d’Internet Explorer 9 et HTML5 pour les développeurs Web
Une visite guidée d’Internet Explorer 9 et HTML5 pour les développeurs WebUne visite guidée d’Internet Explorer 9 et HTML5 pour les développeurs Web
Une visite guidée d’Internet Explorer 9 et HTML5 pour les développeurs Web
 
HTML5... La révolution maintenant!
HTML5... La révolution maintenant!HTML5... La révolution maintenant!
HTML5... La révolution maintenant!
 
HTML5... La révolution maintenant!
HTML5... La révolution maintenant!HTML5... La révolution maintenant!
HTML5... La révolution maintenant!
 
HTML5, le nouveau buzzword
HTML5, le nouveau buzzwordHTML5, le nouveau buzzword
HTML5, le nouveau buzzword
 
La mobilité dans Drupal
La mobilité dans DrupalLa mobilité dans Drupal
La mobilité dans Drupal
 
Enib cours c.a.i. web - séance #1 - html5 css3-js - 2
Enib   cours c.a.i. web - séance #1 - html5 css3-js - 2Enib   cours c.a.i. web - séance #1 - html5 css3-js - 2
Enib cours c.a.i. web - séance #1 - html5 css3-js - 2
 
HTML5
HTML5HTML5
HTML5
 
Les dernières avancées HTML5 & CSS3 en action !
Les dernières avancées HTML5 & CSS3 en action !Les dernières avancées HTML5 & CSS3 en action !
Les dernières avancées HTML5 & CSS3 en action !
 
Les dernières avancées html5 & css3 en action !
Les dernières avancées html5 & css3 en action !Les dernières avancées html5 & css3 en action !
Les dernières avancées html5 & css3 en action !
 
HTML5 et Internet Explorer 9, est-ce réellement compatible?
HTML5 et Internet Explorer 9, est-ce réellement compatible?HTML5 et Internet Explorer 9, est-ce réellement compatible?
HTML5 et Internet Explorer 9, est-ce réellement compatible?
 
L'histoire d'html5 pour les développeurs windows phone 8
L'histoire d'html5 pour les développeurs windows phone 8L'histoire d'html5 pour les développeurs windows phone 8
L'histoire d'html5 pour les développeurs windows phone 8
 
Html5 & ie
Html5 & ieHtml5 & ie
Html5 & ie
 
Introduction aux RIA (Rich Internet Applications)
Introduction aux RIA (Rich Internet Applications)Introduction aux RIA (Rich Internet Applications)
Introduction aux RIA (Rich Internet Applications)
 
L'Open Web en tant que pierre angulaire du développement multi-objets
L'Open Web en tant que pierre angulaire du développement multi-objetsL'Open Web en tant que pierre angulaire du développement multi-objets
L'Open Web en tant que pierre angulaire du développement multi-objets
 
ENIB 2015-2016 - CAI Web - S01E01- Côté navigateur 2/3 - HTML5, CSS3, Twitte...
ENIB 2015-2016 - CAI Web -  S01E01- Côté navigateur 2/3 - HTML5, CSS3, Twitte...ENIB 2015-2016 - CAI Web -  S01E01- Côté navigateur 2/3 - HTML5, CSS3, Twitte...
ENIB 2015-2016 - CAI Web - S01E01- Côté navigateur 2/3 - HTML5, CSS3, Twitte...
 
Glossaire web pour les profanes - Webdesign
Glossaire web pour les profanes - WebdesignGlossaire web pour les profanes - Webdesign
Glossaire web pour les profanes - Webdesign
 
Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshop
Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshopConfoo - 2012-02-27 au 2012-02-28 - HTML5 workshop
Confoo - 2012-02-27 au 2012-02-28 - HTML5 workshop
 
Développement Web sur iPhone (iPhone+iPad DevCamp Québec)
Développement Web sur iPhone (iPhone+iPad DevCamp Québec)Développement Web sur iPhone (iPhone+iPad DevCamp Québec)
Développement Web sur iPhone (iPhone+iPad DevCamp Québec)
 
Prsentationhtml5 html5 ii twebteck
Prsentationhtml5 html5 ii twebteckPrsentationhtml5 html5 ii twebteck
Prsentationhtml5 html5 ii twebteck
 

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

  • 1. HTML5 – CSS3 - Javascript Le Web nouvelle définition
  • 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 HTML 1989 : 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 d'Apple dont 1 Chairman (Maciej Stachoviak)  19 employés d'Opé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)
  • 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
  • 16. La philosophie  Raccourcir la syntaxe  Cross-browser  Améliorer, POO-iser  Plugins Mais  S’éloignent parfois de l’esprit JS  Peuvent devenir usine à gaz  exemple
  • 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
  • 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
  • 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
  • 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
  • 38. Le temps réel • Ecrire côté serveur en Javascript • Le GWT du non-barbu • Performances • DOM parsing Requê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