Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Rmll2010 Html5 Css3

3,331 views

Published on

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

Published in: Technology, News & Politics
  • Login to see the comments

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 "Premiers pas en CSS et XHTML" - éditions Eyrolles
  2. 2. Du XHTML au HTML 5 Rencontres Mondiales des Logiciels Libres Bordeaux - mercredi 7 juillet 2010 Francis Draillard auteur de "Premiers pas en CSS et XHTML" - é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>

×