François-Guillaume Ribreau



twitter.com/fgribreau

   fgribreau.com

  blog.geekfg.net
                                 ...
<intro>
CSS3 ?
HTML5 ?
</intro>
<rappel>
W3C
W3C
                       World Wide Web Consortium



«La W3C est un organisme de standardisation [...] chargé de promou...
W3C
                       World Wide Web Consortium



«La W3C est un organisme de standardisation [...] chargé de promou...
<html>
HTML
«HyperText   Markup Language»
XHTML
«eXtensible   HyperText Markup Language»
HTML vs XHTML
HTML vs XHTML

Sgml (permissif)   Xml (exigeant)
HTML vs XHTML



S a le
Sgml (permissif)   Xml (exigeant)
HTML vs XHTML



S a le
Sgml (permissif)    Xml (exigeant)


                   Propre !
<HtMl>
✔ HTML 4.01
✗ XHTML 1.1
<HtMl>
✔ HTML 4.01
✗ XHTML 1.1
TOUT en minuscule



<HtMl>            <html>
✔ HTML 4.01        ✔ HTML 4.01
✗ XHTML 1.1       ✔ XHTML 1.1
<html id="monId">
<body><p>Mon Texte</body>
     ✔ HTML 4.01
<body><p>Mon Texte</body>
Balise ouverte = Balise fermée

        <body><p>Mon Texte</body>



 <body><p>Texte en gras italique</p></body>
         ...
Eléments vide?

<img src="WEI_2009.jpg" alt="sacré fête !"><br>
              ✔ HTML 4.01
Eléments vide?
<img ="WEI_2009.jpg" alt="sacré fête !"></img>
 <img src="WEI_2009.jpg" alt="sacré fête !"><br>
           ...
Eléments vide?
Eléments vide? Fermé aussi!



<img src="WEI_2009.jpg" alt="sacré fête !" /><br/>
               ✔ XHTML 1.1
Eléments vide? Fermé aussi!



<img src="WEI_2009.jpg" alt="sacré fête !" /><br/>
               ✔ XHTML 1.1


         Ma...
<b><i>Texte en gras italique</b></i>
          ✔ HTML 4.01
<b><i>Texte en gras italique</b></i>
Vérifiez l’imbrication

<b><i>Texte en gras italique</b></i>



<b><i>Texte en gras italique</i></b>
          ✔ XHTML 1.1
Vérifiez l’imbrication

  <b><i>Texte en gras italique</b></i>



  <b><i>Texte en gras italique</i></b>
            ✔ XHTM...
Un dernier point...
Un dernier point...
Le Doctype
Le Doctype
    =
   DTD
Le Doctype
    =
   DTD
    =
Document
Type
Definition
Doctype
Doctype

Définir ce qui est valide
        (et donc ce qui ne l’est pas)




    les éléments...
  ...leurs propriétés
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
	   "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
	   "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
	   "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://...
Et une page sans doctype ?
Quirks                    http://www.quirksmode.org/css/quirksmode.html
http://en.wikipedia.org/wiki/Quirks_mode




 Mode
HTML 2.0
<!DOCTYPE   HTML   PUBLIC   "-//IETF//DTD   HTML 2.0 Level 2//EN">
<!DOCTYPE   HTML   PUBLIC   "-//IETF//DTD   HT...
En résumé... le Doctype




                                                            <!DOCTYPE	
  html	
  PUBLIC	
  "-­...
En résumé... le Doctype

                                                                                                 ...
Doctype HTML5


<!DOCTYPE html>
Doctype HTML5


<!DOCTYPE html>
...dernier point.
...dernier point.
Le (x)HTML permet de structurer le document
</html>
<css>
CSS
«Cascading   Style Sheets»
Le CSS permet de décrire
la présentation d’un document
monCss.css
Propriété



                             Valeur

monCss.css




             Element
CSS
«Cascading Style Sheets»
Formatage de la police



                                                                  Alignement et contrôle de para...
</css>
<check>
HTML       CSS
 Contenu   Présentation
http://bit.ly/5eSFuS




<body style="background-color:#000000;">
http://bit.ly/5eSFuS




<body style="background-color:#000000;">
http://bit.ly/5eSFuS




Plus JAMAIS
<body style="background-color:#000000;">



    ça !
#1
Pas de CSS/JS inline
<a	
  href="portfolio.html">Portfolio</a>
<a	
  href="portfolio.html">Portfolio</a>


    <a	
  href="portfolio.html"	
  
title="Portfolio">Portfolio</a>
<a	
  href="portfolio.html">Portfolio</a>


      <a	
  href="portfolio.html"	
  
  title="Portfolio">Portfolio</a>


 <a	...
IE8


IE6


IE5.5
Pourquoi ?
Chaque navigateur possède son propre CSS par défaut
Solution ?? :’(
html,	
  body,	
  div,	
  span,	
  applet,	
  object,	
  iframe,
h1,	
  h2,	
  h3,	
  h4,	
  h5,	
  h6,	
  p,	
  blockquot...
html,	
  body,	
  div,	
  span,	
  applet,	
  object,	
  iframe,
h1,	
  h2,	
  h3,	
  h4,	
  h5,	
  h6,	
  p,	
  blockquot...
#2
Utilisez un CSS Reset
      «Css Reset» sur Google
(X)HTML     CSS
  Contenu   Présentation
(X)HTML
                   Contenu




Javascript                   CSS
   Interaction               Présentation
</check>
</rappel>
<pourquoi>
CSS 2.1 -> CSS3 ?
HTML4 -> HTML5 ?
Pourquoi créer une nouvelle version du langage
              CSS & (x)HTML ?
Année de la dernière spécification (x)HTML ?
Question du jour !



Année de la dernière spécification (x)HTML ?
31 Mai 2001
  XHTML 1.1
sa   ns
   an s
8 31 Mai 2001
              n  !
           io
      XHTML 1.1

      lu t
 é vo
Le Webdesigner conçoit le site sous Photoshop
Puis intégration du design
«Le client souhaite des bordures arrondies»

            « Il veut cette police là ! »
   « Un texte sur plusieurs colonne...
L’intégrateur
CSS/HTML...
(quasi)Impossible en pur CSS 2.1
CSS3 le permet   ...#FTW
...oui mais pourquoi HTML5 ?
Limites de HTML4 atteintes
Limites de HTML4 atteintes
Flash pour afficher du
contenu multimédia
Limites de HTML4 atteintes
Flash pour afficher du
contenu multimédia
Flash pour utiliser de
nouvelles polices
Limites de HTML4 atteintes
Flash pour afficher du
contenu multimédia
Flash pour utiliser de
nouvelles polices
Flash pour le...
Limites de HTML4 atteintes
Flash pour afficher du       Vérification des formulaires
contenu multimédia          en javascri...
Limites de HTML4 atteintes
Flash pour afficher du       Vérification des formulaires
contenu multimédia          en javascri...
Limites de HTML4 atteintes
Flash pour afficher du      Vérification des formulaires
contenu multimédia         en javascript...
Limites de HTML4 atteintes
Flash pour afficher du      Vérification des formulaires
contenu multimédia         en javascript...
Petit point culture G !
Petit point culture G
Petit point culture Geek !
Petit point culture Geek
Il était une fois en 2004...
Il était une fois en 2004...
Mozilla Foundation   Apple      Opera software




       Firefox        Safari         Opera...
PAS
   Il était une fois en 2004...
Mozilla Foundation   Apple      Opera software



   CONTENT !
       Firefox
      (G...
WHATWG
Web Hypertext Application Technology Working Group
WHATWG
Web Hypertext Application Technology Working Group
WHATWG
    Web Hypertext Application Technology Working Group
W
3C
    #in
       sid
          e
C’était le petit point
     culture G !
C’était le petit point
     culture G
C’était le petit point
     culture G       !
C’était le petit point
     culture GGeek
</pourquoi>
<HTML5>
 <CSS3>
<HTML5>
 <CSS3>
//Disclaimer
Vous
         êtes ici




//Disclaimer
<basefont>                            <strike>


                                        <frameset>
           <acronym>
 ...
<center>
<basefont>                             <strike>

                       <font>            <frameset>
<s>        <...
R
                                      <strike>



                                        E
<basefont>




             ...
Nouvelles balises
Avec HTML4/CSS2.1
Avec HTML4/CSS2.1
           Beaux designs (effets) = énormément* de balise




* dans la majorité des cas
HTML5 = plus de sens
Sémantique
 Méta-données
HTML4

               <div id="header"></div>


              <div id="navigation"></div>




           <div id="article"...
HTML5

                <header></header>


                   <nav></nav>




             <article>

                    ...
Code avec HTML5


             <header></header>


                <nav></nav>




          <article>

                  ...
Code avec HTML5


             <header></header>


                <nav></nav>




          <article>

                  ...
Multimédia
La vidéo avant HTML5
La vidéo avant HTML5




                         Format
                       audio/vidéo
                       proprié...
La vidéo avec HTML5
La vidéo avec HTML5



                         Format
                      audio/vidéo
                         ouvert

...
La vidéo avec HTML5



                                            Format
                                         audio/v...
L’audio avec HTML5




Safari 3.1+   Opera 9+
Stockage Hors-ligne
Objectif ?


Stocker les données directement
       sur le poste client
Objectif ?


Stocker les données directement
       sur le poste client
Objectif ?


Stocker les données directement
       sur le poste client
sessionStorage




                 http://www.w3.org/TR/webstorage/
enregistre (clé/valeur) le temps
sessionStorage
                                   de la session




                 http...
enregistre (clé/valeur) le temps
sessionStorage
                                   de la session




          Safari 4+  ...
localStorage




               http://www.w3.org/TR/webstorage/
localStorage        enregistrement (clé/valeur) permanent




               http://www.w3.org/TR/webstorage/
localStorage         enregistrement (clé/valeur) permanent




         Safari 4+        Firefox 2+               IE 8+


...
Besoin de tables ?
D’une base de données relationnelle ?
Database storage
                      Base de données SQL locale




http://www.whatwg.org/specs/web-apps/current-work/mu...
Database storage
                      Base de données SQL locale




                               Safari 3.1+

http://w...
Canvas/SVG
Canvas/SVG
WebForms 2.0
WebForms 2.0
WebForms 2.0
datetime
 number
 range
  url
 color


           WebForms 2.0
Web Sockets

             Web Workers

            Geolocation API
FF 3.6 ->    Local File API
CSS3 is...
awe... [wait for it...] some !
Awesome   (génial)   !
Les préfixes CSS3

[prefix][propriété CSS]
Les préfixes CSS3

    [prefix][propriété CSS]




-webkit-   -moz-   -o-    -ms-
Les préfixes CSS3

    [prefix][propriété CSS]




-webkit-   -moz-   -o-    -ms-
Bordure arrondie avant CSS3




                   Contenu du block




* d’autres formes sont possibles
Bordure arrondie avant CSS3



                                        Equivalent HTML*:
                                 ...
Bordure arrondie avant CSS3

                           Images
                                        Equivalent HTML*:
 ...
Bordure arrondie avec CSS3



                Contenu du block


            HTML:   <div>Contenu du block</div>

        ...
Bordure arrondie avec CSS3



                Contenu du block


            HTML:   <div>Contenu du block</div>

        ...
Bordure arrondie avec CSS3



                Contenu du block


            HTML:   <div>Contenu du block</div>

        ...
Les ombres avant CSS3



         Contenu du block          Texte avec Ombre




* d’autres formes sont possibles
Les ombres avant CSS3



         Contenu du block              Texte avec Ombre



  Equivalent HTML*:
  <div class="bloc...
Les ombres avant CSS3

                                                      Fla
                                         ...
Les ombres avec CSS3



           Contenu du block       Texte avec Ombre




HTML:   <p>Contenu du block</p>   <p>Texte ...
Les ombres avec CSS3



           Contenu du block         Texte avec Ombre




HTML:   <p>Contenu du block</p>     <p>Te...
Les ombres avec CSS3



           Contenu du block         Texte avec Ombre




HTML:   <p>Contenu du block</p>     <p>Te...
CSS3 Transform
CSS3 Transform

 2D
CSS3 Transform

 2D      3D
CSS3 Transition
Un intégrateur
utilisant CSS3
Un intégrateur
utilisant CSS3
!
                u x       Un intégrateur
          r e             utilisant CSS3
    e u
H
</CSS3>
</HTML5>
</CSS3>
</HTML5>
HTML5, pas officialisé avant 2012

  La majorité des modules CSS3
sont encore à l’état de «brouillons»
Quand commencer à utiliser
CSS3/HTML5 ?
Quand utiliser CSS3/HTML5 ?
Quand utiliser CSS3/HTML5 ?


                                NOW!!

   Je suis...LIBRE !
    (plus de flash...youpi !!)
Progressive Enhancement
    Amélioration progressive
Questions, remarques ?
Ne vous arrêtez pas à cette conférence !   (please!)




http://dev.w3.org/html5/markup/spec.html
           http://www.cs...
Illustrations provenant de :
           Flickr / DeviantArt
Découverte HTML5/CSS3
Découverte HTML5/CSS3
Découverte HTML5/CSS3
Découverte HTML5/CSS3
Découverte HTML5/CSS3
Découverte HTML5/CSS3
Découverte HTML5/CSS3
Découverte HTML5/CSS3
Découverte HTML5/CSS3
Découverte HTML5/CSS3
Découverte HTML5/CSS3
Découverte HTML5/CSS3
Découverte HTML5/CSS3
Découverte HTML5/CSS3
Découverte HTML5/CSS3
Découverte HTML5/CSS3
Découverte HTML5/CSS3
Découverte HTML5/CSS3
Découverte HTML5/CSS3
Découverte HTML5/CSS3
Découverte HTML5/CSS3
Découverte HTML5/CSS3
Découverte HTML5/CSS3
Découverte HTML5/CSS3
Découverte HTML5/CSS3
Découverte HTML5/CSS3
Découverte HTML5/CSS3
Découverte HTML5/CSS3
Upcoming SlideShare
Loading in …5
×

Découverte HTML5/CSS3

7,544 views

Published on

Veille HTML5/CSS3 sur Twitter: @fgribreau

Ceci est le support de ma conférence @EPSI_Nantes sur HTML5/CSS3.

Si vous remarquez une information incorrecte n'hésitez pas à me le faire savoir ;)

Published in: Technology
2 Comments
12 Likes
Statistics
Notes
  • Merci pour ce partage, slidshow bien présenté et trop utile !!
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Merci pour ce slideshow super intéressant !
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
7,544
On SlideShare
0
From Embeds
0
Number of Embeds
638
Actions
Shares
0
Downloads
316
Comments
2
Likes
12
Embeds 0
No embeds

No notes for slide

Découverte HTML5/CSS3

  1. 1. François-Guillaume Ribreau twitter.com/fgribreau fgribreau.com blog.geekfg.net Veille technologique Javascript (jQuery) / HTML5 / CSS3 / R&D Web / Sécurité
  2. 2. <intro>
  3. 3. CSS3 ? HTML5 ?
  4. 4. </intro>
  5. 5. <rappel>
  6. 6. W3C
  7. 7. W3C World Wide Web Consortium «La W3C est un organisme de standardisation [...] chargé de promouvoir la compatibilité des technologies du WEB telles que HTML, XHTML, [...], CSS, [...].»
  8. 8. W3C World Wide Web Consortium «La W3C est un organisme de standardisation [...] chargé de promouvoir la compatibilité des technologies du WEB telles que HTML, XHTML, [...], CSS, [...].» «Le W3C émet [...] des recommandations à valeur de standards industriels.»
  9. 9. <html>
  10. 10. HTML «HyperText Markup Language»
  11. 11. XHTML «eXtensible HyperText Markup Language»
  12. 12. HTML vs XHTML
  13. 13. HTML vs XHTML Sgml (permissif) Xml (exigeant)
  14. 14. HTML vs XHTML S a le Sgml (permissif) Xml (exigeant)
  15. 15. HTML vs XHTML S a le Sgml (permissif) Xml (exigeant) Propre !
  16. 16. <HtMl> ✔ HTML 4.01 ✗ XHTML 1.1
  17. 17. <HtMl> ✔ HTML 4.01 ✗ XHTML 1.1
  18. 18. TOUT en minuscule <HtMl> <html> ✔ HTML 4.01 ✔ HTML 4.01 ✗ XHTML 1.1 ✔ XHTML 1.1
  19. 19. <html id="monId">
  20. 20. <body><p>Mon Texte</body> ✔ HTML 4.01
  21. 21. <body><p>Mon Texte</body>
  22. 22. Balise ouverte = Balise fermée <body><p>Mon Texte</body> <body><p>Texte en gras italique</p></body> ✔ XHTML 1.1
  23. 23. Eléments vide? <img src="WEI_2009.jpg" alt="sacré fête !"><br> ✔ HTML 4.01
  24. 24. Eléments vide? <img ="WEI_2009.jpg" alt="sacré fête !"></img> <img src="WEI_2009.jpg" alt="sacré fête !"><br> ✔ HTML 4.01
  25. 25. Eléments vide?
  26. 26. Eléments vide? Fermé aussi! <img src="WEI_2009.jpg" alt="sacré fête !" /><br/> ✔ XHTML 1.1
  27. 27. Eléments vide? Fermé aussi! <img src="WEI_2009.jpg" alt="sacré fête !" /><br/> ✔ XHTML 1.1 Mais...mais... Il y a une autre erreur...
  28. 28. <b><i>Texte en gras italique</b></i> ✔ HTML 4.01
  29. 29. <b><i>Texte en gras italique</b></i>
  30. 30. Vérifiez l’imbrication <b><i>Texte en gras italique</b></i> <b><i>Texte en gras italique</i></b> ✔ XHTML 1.1
  31. 31. Vérifiez l’imbrication <b><i>Texte en gras italique</b></i> <b><i>Texte en gras italique</i></b> ✔ XHTML 1.1 Mais...mais... Il y a une autre erreur...
  32. 32. Un dernier point...
  33. 33. Un dernier point...
  34. 34. Le Doctype
  35. 35. Le Doctype = DTD
  36. 36. Le Doctype = DTD = Document Type Definition
  37. 37. Doctype
  38. 38. Doctype Définir ce qui est valide (et donc ce qui ne l’est pas) les éléments... ...leurs propriétés
  39. 39. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8"/> <title>Titre de la page</title> </head> <body> </body> </html>
  40. 40. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8"/> <title>Titre de la page</title> </head> <body> </body> </html>
  41. 41. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8"/> <title>Titre de la page</title> </head> Doctype XHTML1.1 <body> </body> </html>
  42. 42. Et une page sans doctype ?
  43. 43. Quirks http://www.quirksmode.org/css/quirksmode.html http://en.wikipedia.org/wiki/Quirks_mode Mode
  44. 44. HTML 2.0 <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0 Level 2//EN"> <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN"> <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN"> <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML Level 2//EN"> HTML 3.0 <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 3.0//EN"> HTML 3.2 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN"> HTML 4.01 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> XHTML 1.0 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- strict.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- frameset.dtd"> XHTML 1.1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN">
  45. 45. En résumé... le Doctype <!DOCTYPE  html  PUBLIC  "-­‐//W3C//DTD  XHTML  1.0  Frameset//EN"   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-­‐frameset.dtd"> <!DOCTYPE  html  PUBLIC  "-­‐//W3C//DTD  XHTML  1.0  Transitional//EN"   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-­‐transitional.dtd">
  46. 46. En résumé... le Doctype long complexe difficile à reteni r <!DOCTYPE  html  PUBLIC  "-­‐//W3C//DTD  XHTML  1.0  Frameset//EN"   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-­‐frameset.dtd"> <!DOCTYPE  html  PUBLIC  "-­‐//W3C//DTD  XHTML  1.0  Transitional//EN"   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-­‐transitional.dtd">
  47. 47. Doctype HTML5 <!DOCTYPE html>
  48. 48. Doctype HTML5 <!DOCTYPE html>
  49. 49. ...dernier point.
  50. 50. ...dernier point.
  51. 51. Le (x)HTML permet de structurer le document
  52. 52. </html>
  53. 53. <css>
  54. 54. CSS «Cascading Style Sheets»
  55. 55. Le CSS permet de décrire la présentation d’un document
  56. 56. monCss.css
  57. 57. Propriété Valeur monCss.css Element
  58. 58. CSS «Cascading Style Sheets»
  59. 59. Formatage de la police Alignement et contrôle de paragraph Positionnement et affichage d'éléments Marges et espace Pseudo-formats CSS Espaces intérieurs Formatage de tableaux «Cascading Style Sheets» Bordures Formatage de listes Couleurs et images d'arrière plan
  60. 60. </css>
  61. 61. <check>
  62. 62. HTML CSS Contenu Présentation
  63. 63. http://bit.ly/5eSFuS <body style="background-color:#000000;">
  64. 64. http://bit.ly/5eSFuS <body style="background-color:#000000;">
  65. 65. http://bit.ly/5eSFuS Plus JAMAIS <body style="background-color:#000000;"> ça !
  66. 66. #1 Pas de CSS/JS inline
  67. 67. <a  href="portfolio.html">Portfolio</a>
  68. 68. <a  href="portfolio.html">Portfolio</a> <a  href="portfolio.html"   title="Portfolio">Portfolio</a>
  69. 69. <a  href="portfolio.html">Portfolio</a> <a  href="portfolio.html"   title="Portfolio">Portfolio</a> <a  href="portfolio.html"   title="Quelques  dessins  de   l'artiste">Portfolio</a>
  70. 70. IE8 IE6 IE5.5
  71. 71. Pourquoi ?
  72. 72. Chaque navigateur possède son propre CSS par défaut
  73. 73. Solution ?? :’(
  74. 74. html,  body,  div,  span,  applet,  object,  iframe, h1,  h2,  h3,  h4,  h5,  h6,  p,  blockquote,  pre, a,  abbr,  acronym,  address,  big,  cite,  code, del,  dfn,  em,  font,  img,  ins,  kbd,  q,  s,  samp, small,  strike,  strong,  sub,  sup,  tt,  var, b,  u,  i,  center, dl,  dt,  dd,  ol,  ul,  li, fieldset,  form,  label,  legend, table,  caption,  tbody,  tfoot,  thead,  tr,  th,  td  {   margin:  0;   padding:  0;   border:  0;   outline:  0;   font-­‐size:  100%;   vertical-­‐align:  baseline;   background:  transparent; } body  {   line-­‐height:  1; } ol,  ul  {   list-­‐style:  none; } blockquote,  q  {   quotes:  none; }
  75. 75. html,  body,  div,  span,  applet,  object,  iframe, h1,  h2,  h3,  h4,  h5,  h6,  p,  blockquote,  pre, Go a,  abbr,  acronym,  address,  big,  cite,  code, og del,  dfn,  em,  font,  img,  ins,  kbd,  q,  s,  samp, it ! le small,  strike,  strong,  sub,  sup,  tt,  var, b,  u,  i,  center, dl,  dt,  dd,  ol,  ul,  li, fieldset,  form,  label,  legend, table,  caption,  tbody,  tfoot,  thead,  tr,  th,  td  {   margin:  0;   padding:  0;   border:  0;   outline:  0;   font-­‐size:  100%;   vertical-­‐align:  baseline;   background:  transparent; } body  {   line-­‐height:  1; } ol,  ul  {   list-­‐style:  none; } blockquote,  q  {   quotes:  none; }
  76. 76. #2 Utilisez un CSS Reset «Css Reset» sur Google
  77. 77. (X)HTML CSS Contenu Présentation
  78. 78. (X)HTML Contenu Javascript CSS Interaction Présentation
  79. 79. </check>
  80. 80. </rappel>
  81. 81. <pourquoi> CSS 2.1 -> CSS3 ? HTML4 -> HTML5 ?
  82. 82. Pourquoi créer une nouvelle version du langage CSS & (x)HTML ?
  83. 83. Année de la dernière spécification (x)HTML ?
  84. 84. Question du jour ! Année de la dernière spécification (x)HTML ?
  85. 85. 31 Mai 2001 XHTML 1.1
  86. 86. sa ns an s 8 31 Mai 2001 n ! io XHTML 1.1 lu t é vo
  87. 87. Le Webdesigner conçoit le site sous Photoshop
  88. 88. Puis intégration du design
  89. 89. «Le client souhaite des bordures arrondies» « Il veut cette police là ! » « Un texte sur plusieurs colonnes ! » « Cette photo doit subir une rotation de 50° » « Ce titre doit être ombré ! » « ... »
  90. 90. L’intégrateur CSS/HTML...
  91. 91. (quasi)Impossible en pur CSS 2.1
  92. 92. CSS3 le permet ...#FTW
  93. 93. ...oui mais pourquoi HTML5 ?
  94. 94. Limites de HTML4 atteintes
  95. 95. Limites de HTML4 atteintes Flash pour afficher du contenu multimédia
  96. 96. Limites de HTML4 atteintes Flash pour afficher du contenu multimédia Flash pour utiliser de nouvelles polices
  97. 97. Limites de HTML4 atteintes Flash pour afficher du contenu multimédia Flash pour utiliser de nouvelles polices Flash pour les animations 3D/complexes
  98. 98. Limites de HTML4 atteintes Flash pour afficher du Vérification des formulaires contenu multimédia en javascript Flash pour utiliser de nouvelles polices Flash pour les animations 3D/complexes
  99. 99. Limites de HTML4 atteintes Flash pour afficher du Vérification des formulaires contenu multimédia en javascript Flash pour utiliser de Librairies javascript lourdes nouvelles polices pour gérer le drag&drop Flash pour les animations 3D/complexes
  100. 100. Limites de HTML4 atteintes Flash pour afficher du Vérification des formulaires contenu multimédia en javascript Flash pour utiliser de Librairies javascript lourdes nouvelles polices pour gérer le drag&drop Flash pour les animations Librairies javascript lourdes 3D/complexes pour animer le contenu
  101. 101. Limites de HTML4 atteintes Flash pour afficher du Vérification des formulaires contenu multimédia en javascript Flash pour utiliser de Librairies javascript lourdes nouvelles polices pour gérer le drag&drop Flash pour les animations Librairies javascript lourdes 3D/complexes pour animer le contenu
  102. 102. Petit point culture G !
  103. 103. Petit point culture G
  104. 104. Petit point culture Geek !
  105. 105. Petit point culture Geek
  106. 106. Il était une fois en 2004...
  107. 107. Il était une fois en 2004... Mozilla Foundation Apple Opera software Firefox Safari Opera (Gecko) (Webkit) (Presto)
  108. 108. PAS Il était une fois en 2004... Mozilla Foundation Apple Opera software CONTENT ! Firefox (Gecko) Safari (Webkit) Opera (Presto)
  109. 109. WHATWG Web Hypertext Application Technology Working Group
  110. 110. WHATWG Web Hypertext Application Technology Working Group
  111. 111. WHATWG Web Hypertext Application Technology Working Group W 3C #in sid e
  112. 112. C’était le petit point culture G !
  113. 113. C’était le petit point culture G
  114. 114. C’était le petit point culture G !
  115. 115. C’était le petit point culture GGeek
  116. 116. </pourquoi>
  117. 117. <HTML5> <CSS3>
  118. 118. <HTML5> <CSS3>
  119. 119. //Disclaimer
  120. 120. Vous êtes ici //Disclaimer
  121. 121. <basefont> <strike> <frameset> <acronym> <noscript> <big> <isindex> <tt> <applet> <noframes> <dir>
  122. 122. <center> <basefont> <strike> <font> <frameset> <s> <acronym> <noscript> <big> <isindex> <tt> <u> <applet> <noframes> <frame> <dir>
  123. 123. R <strike> E <basefont> EC <acronym> I <frameset> R <noscript> P <big> <isindex> E <tt> D <applet> <dir> <noframes>
  124. 124. Nouvelles balises
  125. 125. Avec HTML4/CSS2.1
  126. 126. Avec HTML4/CSS2.1 Beaux designs (effets) = énormément* de balise * dans la majorité des cas
  127. 127. HTML5 = plus de sens
  128. 128. Sémantique Méta-données
  129. 129. HTML4 <div id="header"></div> <div id="navigation"></div> <div id="article"> <div id="sidebar"> </div> <div id="section"></div> <div id="footer"></div>
  130. 130. HTML5 <header></header> <nav></nav> <article> <aside></aside> <section></section> <footer></footer>
  131. 131. Code avec HTML5 <header></header> <nav></nav> <article> <aside></aside> <section></section> <footer></footer>
  132. 132. Code avec HTML5 <header></header> <nav></nav> <article> <aside></aside> <section></section> <footer></footer> #FAIL
  133. 133. Multimédia
  134. 134. La vidéo avant HTML5
  135. 135. La vidéo avant HTML5 Format audio/vidéo propriétaire Flash (H.264)
  136. 136. La vidéo avec HTML5
  137. 137. La vidéo avec HTML5 Format audio/vidéo ouvert <video> (Theora & Ogg Vorbis)
  138. 138. La vidéo avec HTML5 Format audio/vidéo ouvert <video> (Theora & Ogg Vorbis) Safari 3.1+ FF 3.1+ Opera 10+
  139. 139. L’audio avec HTML5 Safari 3.1+ Opera 9+
  140. 140. Stockage Hors-ligne
  141. 141. Objectif ? Stocker les données directement sur le poste client
  142. 142. Objectif ? Stocker les données directement sur le poste client
  143. 143. Objectif ? Stocker les données directement sur le poste client
  144. 144. sessionStorage http://www.w3.org/TR/webstorage/
  145. 145. enregistre (clé/valeur) le temps sessionStorage de la session http://www.w3.org/TR/webstorage/
  146. 146. enregistre (clé/valeur) le temps sessionStorage de la session Safari 4+ Firefox 2+ IE 8+ http://www.w3.org/TR/webstorage/
  147. 147. localStorage http://www.w3.org/TR/webstorage/
  148. 148. localStorage enregistrement (clé/valeur) permanent http://www.w3.org/TR/webstorage/
  149. 149. localStorage enregistrement (clé/valeur) permanent Safari 4+ Firefox 2+ IE 8+ http://www.w3.org/TR/webstorage/
  150. 150. Besoin de tables ? D’une base de données relationnelle ?
  151. 151. Database storage Base de données SQL locale http://www.whatwg.org/specs/web-apps/current-work/multipage/section-sql.html#sql
  152. 152. Database storage Base de données SQL locale Safari 3.1+ http://www.whatwg.org/specs/web-apps/current-work/multipage/section-sql.html#sql
  153. 153. Canvas/SVG
  154. 154. Canvas/SVG
  155. 155. WebForms 2.0
  156. 156. WebForms 2.0
  157. 157. WebForms 2.0
  158. 158. datetime number range url color WebForms 2.0
  159. 159. Web Sockets Web Workers Geolocation API FF 3.6 -> Local File API
  160. 160. CSS3 is... awe... [wait for it...] some !
  161. 161. Awesome (génial) !
  162. 162. Les préfixes CSS3 [prefix][propriété CSS]
  163. 163. Les préfixes CSS3 [prefix][propriété CSS] -webkit- -moz- -o- -ms-
  164. 164. Les préfixes CSS3 [prefix][propriété CSS] -webkit- -moz- -o- -ms-
  165. 165. Bordure arrondie avant CSS3 Contenu du block * d’autres formes sont possibles
  166. 166. Bordure arrondie avant CSS3 Equivalent HTML*: <div class="block"> <div> <div></div> Contenu du block </div> <div></div> <div></div> <p>Contenu du block</p> <div></div> <div> De 4 à 8 éléments <div></div> <div></div> </div> pour réaliser la bordure </div> * d’autres formes sont possibles
  167. 167. Bordure arrondie avant CSS3 Images Equivalent HTML*: <div class="block"> <div> <div></div> Contenu du block </div> <div></div> <div></div> <p>Contenu du block</p> <div></div> <div> De 4 à 8 éléments <div></div> <div></div> </div> pour réaliser la bordure </div> Trop de CSS [...] * d’autres formes sont possibles
  168. 168. Bordure arrondie avec CSS3 Contenu du block HTML: <div>Contenu du block</div> CSS3:
  169. 169. Bordure arrondie avec CSS3 Contenu du block HTML: <div>Contenu du block</div> CSS3: div {border-radius:20px;}
  170. 170. Bordure arrondie avec CSS3 Contenu du block HTML: <div>Contenu du block</div> CSS3: div {border-radius:20px;}
  171. 171. Les ombres avant CSS3 Contenu du block Texte avec Ombre * d’autres formes sont possibles
  172. 172. Les ombres avant CSS3 Contenu du block Texte avec Ombre Equivalent HTML*: <div class="block"> <div> <p>Contenu du block</p> </div> <div> <div></div> <div></div> </div> </div> * d’autres formes sont possibles
  173. 173. Les ombres avant CSS3 Fla sh Contenu du block Texte avec Ombre Equivalent HTML*: <div class="block"> <div> <p>Contenu du block</p> </div> <div> <div></div> <div></div> </div> </div> * d’autres formes sont possibles
  174. 174. Les ombres avec CSS3 Contenu du block Texte avec Ombre HTML: <p>Contenu du block</p> <p>Texte avec Ombre</p> CSS3:
  175. 175. Les ombres avec CSS3 Contenu du block Texte avec Ombre HTML: <p>Contenu du block</p> <p>Texte avec Ombre</p> CSS3: p {box-shadow:3px 3px 8px #000000;}
  176. 176. Les ombres avec CSS3 Contenu du block Texte avec Ombre HTML: <p>Contenu du block</p> <p>Texte avec Ombre</p> p {text-shadow:3px 3px CSS3: p {box-shadow:3px 3px 8px 3px #000000;} #000000;} ✔ W3C
  177. 177. CSS3 Transform
  178. 178. CSS3 Transform 2D
  179. 179. CSS3 Transform 2D 3D
  180. 180. CSS3 Transition
  181. 181. Un intégrateur utilisant CSS3
  182. 182. Un intégrateur utilisant CSS3
  183. 183. ! u x Un intégrateur r e utilisant CSS3 e u H
  184. 184. </CSS3> </HTML5>
  185. 185. </CSS3> </HTML5>
  186. 186. HTML5, pas officialisé avant 2012 La majorité des modules CSS3 sont encore à l’état de «brouillons»
  187. 187. Quand commencer à utiliser CSS3/HTML5 ?
  188. 188. Quand utiliser CSS3/HTML5 ?
  189. 189. Quand utiliser CSS3/HTML5 ? NOW!! Je suis...LIBRE ! (plus de flash...youpi !!)
  190. 190. Progressive Enhancement Amélioration progressive
  191. 191. Questions, remarques ?
  192. 192. Ne vous arrêtez pas à cette conférence ! (please!) http://dev.w3.org/html5/markup/spec.html http://www.css3.info http://fgribreau.com
  193. 193. Illustrations provenant de : Flickr / DeviantArt

×