Un aperçu des nouvelles normes HTML 5  et  CSS 3 Rencontres Mondiales des Logiciels Libres Bordeaux - mercredi 7 juillet 2...
Du XHTML au HTML 5 Rencontres Mondiales des Logiciels Libres Bordeaux - mercredi 7 juillet 2010 Francis Draillard auteur d...
L'évolution du HTML <ul><li>HTML 4 </li></ul>whatwg.org Web Hypertext Appplication Technology Working Group problème de  &...
Retour au HTML ? <ul><li>Sous cette appellation  HTML 5 , les principes essentiels du XHTML sont conservés </li></ul><ul><...
Des balises qui donnent  du sens au texte </li></ul></ul>
Séparation du contenu et de la mise en forme <h1> Titre </h1> <h2> Premier sous-titre </h2> <p> Du texte... du texte... du...
HTML 5 ou XHTML 5 ? <ul><li>Ces deux langages sont très proches
Les balises sont identiques </li></ul><ul><ul><ul><li>Sites web courants : HTML 5
XHTML 5 : pour liens avec XML </li></ul></ul></ul><ul><li>Le plus important : Utiliser les balises de façon rationnelle </...
Orientations du HTML 5 <ul><li>Davantage de  sens  pour les balises
Délimitation des parties de la page par des  sections   (remplaçant certains <div>)
Simplification des contenus  multimédias (audio, vidéo, animations) </li></ul>
Sections HTML 5 <ul><li><section> </li></ul><ul><ul><ul><li>délimite un bloc de la page (   <div>) </li></ul></ul></ul><u...
Sous-sections HTML 5 <ul><li>Délimitent les parties d'une page  ou d'une section de la page </li></ul><ul><li><header> </l...
Exemple de sections interprétation en HTML 5 d'un extrait du site www.framasoft.net <header> <footer> <header> <header> <f...
Contenus multimédias, audios et vidéos <ul><li>Logiciel de lecture intégré au navigateur </li></ul>- plus besoin d'applica...
<video src=&quot;monclip.webm&quot;> texte alternatif </video> </li></ul></ul><ul><li>Insertion simplifiée des contenus Fl...
Formats vidéos <ul><li>Theora  : format  libre  et ouvert
H264  : format  propriétaire  et soumis à une licence très coûteuse
WebM  : format  libre  et ouvert  (codec  VP8 ) </li></ul><ul><ul><ul><li>format récent et performant, très prometteur
projet soutenu par Mozilla, Google, Opera, ...
www.webmproject.org </li></ul></ul></ul>
Application Balises audio et video N'abusez pas du vin, même s'il est tiré à la clef USB ! Ce ne serait pas bon pour votre...
Utilisation du HTML 5 <ul><li>En complément du XHTML, en attendant la généralisation des nouvelles versions de navigateurs
Dès à présent, si les destinataires sont équipés de navigateurs modernes </li></ul>   pour les tablettes et terminaux mob...
Principales nouveautés des CSS 3 Rencontres Mondiales des Logiciels Libres Bordeaux - mercredi 7 juillet 2010 Francis Drai...
Nouveaux sélecteurs CSS3 <ul><li>Plus de possibilités dans les sélecteurs </li></ul><ul><ul><li>balises ayant le  même par...
Prochain SlideShare
Chargement dans…5
×

Rmll2010 Html5 Css3

3 115 vues

Publié le

Un aperçu des nouvelles normes HTML 5 et CSS 3

0 commentaire
1 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
3 115
Sur SlideShare
0
Issues des intégrations
0
Intégrations
71
Actions
Partages
0
Téléchargements
80
Commentaires
0
J’aime
1
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Rmll2010 Html5 Css3

  1. 1. Un aperçu des nouvelles normes HTML 5 et CSS 3 Rencontres Mondiales des Logiciels Libres Bordeaux - mercredi 7 juillet 2010 Francis Draillard, auteur de &quot;Premiers pas en CSS et XHTML&quot; - éditions Eyrolles
  2. 2. Du XHTML au HTML 5 Rencontres Mondiales des Logiciels Libres Bordeaux - mercredi 7 juillet 2010 Francis Draillard auteur de &quot;Premiers pas en CSS et XHTML&quot; - éditions Eyrolles
  3. 3. L'évolution du HTML <ul><li>HTML 4 </li></ul>whatwg.org Web Hypertext Appplication Technology Working Group problème de &quot;rétrocompatibilité&quot; XHTML 1 puis 1.1 HTML 5 / XHTML 5 XHTML 2
  4. 4. Retour au HTML ? <ul><li>Sous cette appellation HTML 5 , les principes essentiels du XHTML sont conservés </li></ul><ul><ul><li>Séparation du contenu (code HTML 5) et de la mise en forme (feuille de style CSS)
  5. 5. Des balises qui donnent du sens au texte </li></ul></ul>
  6. 6. Séparation du contenu et de la mise en forme <h1> Titre </h1> <h2> Premier sous-titre </h2> <p> Du texte... du texte... du texte... du texte... </p> <h2> Deuxième sous-titre </h2> <p> Du texte... du texte... du texte... du texte... </p> <style type=&quot;text/css&quot;> h1 { mise en forme des titres ... } h2 { mise en forme des sous-titres ... } p { mise en forme des paragraphes ... } </style>
  7. 7. HTML 5 ou XHTML 5 ? <ul><li>Ces deux langages sont très proches
  8. 8. Les balises sont identiques </li></ul><ul><ul><ul><li>Sites web courants : HTML 5
  9. 9. XHTML 5 : pour liens avec XML </li></ul></ul></ul><ul><li>Le plus important : Utiliser les balises de façon rationnelle </li></ul>
  10. 10. Orientations du HTML 5 <ul><li>Davantage de sens pour les balises
  11. 11. Délimitation des parties de la page par des sections (remplaçant certains <div>)
  12. 12. Simplification des contenus multimédias (audio, vidéo, animations) </li></ul>
  13. 13. Sections HTML 5 <ul><li><section> </li></ul><ul><ul><ul><li>délimite un bloc de la page (  <div>) </li></ul></ul></ul><ul><li><article> </li></ul><ul><ul><ul><li>texte indépendant dans la page ou une section </li></ul></ul></ul><ul><li><aside> </li></ul><ul><ul><ul><li>contenu différent (publicité, slogan, brèves, ...) </li></ul></ul></ul><ul><li><nav> </li></ul><ul><ul><ul><li>menu de navigation </li></ul></ul></ul>
  14. 14. Sous-sections HTML 5 <ul><li>Délimitent les parties d'une page ou d'une section de la page </li></ul><ul><li><header> </li></ul><ul><ul><ul><li>en-tête </li></ul></ul></ul><ul><li><hgroup> </li></ul><ul><ul><ul><li>ensemble de titres et sous-titres <h1>, <h2>, ... </li></ul></ul></ul><ul><li><footer> </li></ul><ul><ul><ul><li>pied de page ou de section </li></ul></ul></ul>
  15. 15. Exemple de sections interprétation en HTML 5 d'un extrait du site www.framasoft.net <header> <footer> <header> <header> <footer> <footer> <article> <article> <article>
  16. 16. Contenus multimédias, audios et vidéos <ul><li>Logiciel de lecture intégré au navigateur </li></ul>- plus besoin d'application complémentaire - balises simplifiées <audio> et <video> <ul><ul><li><audio src=&quot;piano-bar.mp3&quot;> texte alternatif </audio>
  17. 17. <video src=&quot;monclip.webm&quot;> texte alternatif </video> </li></ul></ul><ul><li>Insertion simplifiée des contenus Flash </li></ul><ul><ul><li><embed src=&quot;pub.swf&quot; /> </li></ul></ul>
  18. 18. Formats vidéos <ul><li>Theora : format libre et ouvert
  19. 19. H264 : format propriétaire et soumis à une licence très coûteuse
  20. 20. WebM : format libre et ouvert (codec VP8 ) </li></ul><ul><ul><ul><li>format récent et performant, très prometteur
  21. 21. projet soutenu par Mozilla, Google, Opera, ...
  22. 22. www.webmproject.org </li></ul></ul></ul>
  23. 23. Application Balises audio et video N'abusez pas du vin, même s'il est tiré à la clef USB ! Ce ne serait pas bon pour votre santé et pour la compréhension du HTML5 ! Affichage fourni par Chrome 5
  24. 24. Utilisation du HTML 5 <ul><li>En complément du XHTML, en attendant la généralisation des nouvelles versions de navigateurs
  25. 25. Dès à présent, si les destinataires sont équipés de navigateurs modernes </li></ul> pour les tablettes et terminaux mobiles  dans le cadre d'un intranet ...
  26. 26. Principales nouveautés des CSS 3 Rencontres Mondiales des Logiciels Libres Bordeaux - mercredi 7 juillet 2010 Francis Draillard auteur de &quot;Premiers pas en CSS et XHTML&quot; - éditions Eyrolles
  27. 27. Nouveaux sélecteurs CSS3 <ul><li>Plus de possibilités dans les sélecteurs </li></ul><ul><ul><li>balises ayant le même parent
  28. 28. n ième enfant d'un bloc
  29. 29. balises vides
  30. 30. sélection en fonction du contenu d'un attribut : </li><ul><li>commençant par ..., finissant par ..., contenant ..., différent de ... </li></ul></ul></ul>
  31. 31. Transparence <ul><li>Réglage du niveau de transparence d'une couleur </li></ul><ul><ul><ul><li>couleur du texte ou couleur de fond
  32. 32. codage rgba(..., ..., ..., ...)
  33. 33. le &quot;a&quot; représente la couche alpha (transparence) </li></ul></ul></ul><ul><li>Transparence d'un bloc et de son contenu </li></ul><ul><ul><ul><li>propriété opacity </li></ul></ul></ul>
  34. 34. Transparence en CSS 3 opacité du fond : 40 % background-color: rgba(...); opacité du bloc : 40 % background-color: rgb(...); opacity: 0.4;
  35. 35. Transfert d'une police <ul><li>Plus de limitation aux quelques polices de caractères les plus courantes
  36. 36. Transfert du fichier avec @font-face </li></ul><ul><li>Utilisation possible dans toute la page </li></ul>
  37. 37. Effets d'ombres <ul><li>Ombrage du texte </li></ul><ul><ul><ul><li>propriété text-shadow </li></ul></ul></ul><ul><li>Ombrage des blocs </li></ul><ul><ul><ul><li>propriété box-shadow </li></ul></ul></ul><ul><li>Réglage des décalages, de la couleur et de la largeur de flou </li></ul>
  38. 38. Cadres à coins arrondis <ul><li>Arrondis pour l'ensemble des coins
  39. 39. Arrondi spécifique pour chaque coin
  40. 40. Réglage de la courbure des arrondis </li></ul> propriété border-radius , déclinée également pour chaque coin (top, right, left, bottom)
  41. 41. Multicolonnage automatique <ul><li>Nombre et largeur des colonnes
  42. 42. Trait de séparation des colonnes </li></ul><ul><ul><ul><li>type de trait, épaisseur, couleur </li></ul></ul></ul><ul><li>Espacement entre les colonnes
  43. 43. Equilibrage des colonnes </li></ul>
  44. 44. Application de multicolonnage Extrait du site http://2010.rmll.info, modifié pour une répartition sur trois colonnes
  45. 45. Transformations géométriques 2D et 3D <ul><li>Propriété transform appliquée à des fonctions géométriques </li></ul><ul><ul><ul><li>translation
  46. 46. changement d'échelle
  47. 47. rotation
  48. 48. déformation </li></ul></ul></ul>Images : Wikipedia
  49. 49. Spécifications pour terminaux mobiles <ul><li>Adaptation du site aux appareils du type smartphone, tablette, PDA, ...
  50. 50. Application d'une feuille de style spécifique en fonction de critères donnés </li></ul><ul><ul><ul><li>taille de l'écran
  51. 51. mode portrait ou paysage
  52. 52. ... </li></ul></ul></ul>Image : Wikipedia
  53. 53. Utilisation des CSS 3 <ul><li>Dès à présent </li></ul><ul><ul><ul><li>pour des effets accessoires  ombrages, coins arrondis, ...
  54. 54. pour des terminaux récents :  feuille de style adaptée aux appareils mobiles </li></ul></ul></ul><ul><li>Avec des préfixes pour certaines propriétés </li></ul><ul><ul><ul><li>pour les navigateurs récents, mais pas &quot;dernier cri&quot;
  55. 55. préfixe -moz- , -webkit- ou -o- suivant le navigateur </li></ul></ul></ul>
  56. 56. Pour aller plus loin... <ul><li>Spécifications officielles du W3C sur www.w3.org </li></ul><ul><li>Premiers pas en CSS et XHTML - 3 ème édition </li></ul><ul><ul><li>auteur Francis Draillard, éditions Eyrolles
  57. 57. présente les normes HTML 5 et CSS 3 et tient compte du comportement des nouveaux navigateurs </li></ul></ul><ul><li>Ce diaporama : sur www.antevox.fr/livre </li></ul>

×