SlideShare une entreprise Scribd logo
1  sur  27
Télécharger pour lire hors ligne
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
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
L'évolution du HTML ,[object Object],whatwg.org Web Hypertext Appplication Technology Working Group problème de  "rétrocompatibilité" XHTML 1 puis 1.1 HTML 5 / XHTML 5 XHTML 2
Retour au HTML ? ,[object Object],[object Object]
Des balises qui donnent  du sens au texte
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>
HTML 5 ou XHTML 5 ? ,[object Object]
Les balises sont identiques ,[object Object]
XHTML 5 : pour liens avec XML ,[object Object]
Orientations du HTML 5 ,[object Object]
Délimitation des parties de la page par des  sections   (remplaçant certains <div>)
Simplification des contenus  multimédias (audio, vidéo, animations)
Sections HTML 5 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Sous-sections HTML 5 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
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>
Contenus multimédias, audios et vidéos ,[object Object],- plus besoin d'application complémentaire - balises simplifiées  <audio>  et  <video> ,[object Object]
<video src=&quot;monclip.webm&quot;> texte alternatif </video> ,[object Object],[object Object]
Formats vidéos ,[object Object]
H264  : format  propriétaire  et soumis à une licence très coûteuse
WebM  : format  libre  et ouvert  (codec  VP8 ) ,[object Object]
projet soutenu par Mozilla, Google, Opera, ...
www.webmproject.org
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
Utilisation du HTML 5 ,[object Object]
Dès à présent, si les destinataires sont équipés de navigateurs modernes    pour les tablettes et terminaux mobiles    dans le cadre d'un intranet ...
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
Nouveaux sélecteurs CSS3 ,[object Object],[object Object]

Contenu connexe

Tendances

Html de base
Html de baseHtml de base
Html de basekrymo
 
Présentation html5
Présentation html5Présentation html5
Présentation html5Kénium
 
Outils de publication pour le CMS d'e-sidoc
Outils de publication pour le CMS d'e-sidocOutils de publication pour le CMS d'e-sidoc
Outils de publication pour le CMS d'e-sidocpriscilla_mommessin
 
Normes de base du Web GTI780 & MTI780 ETS A09
Normes de base du Web  GTI780 & MTI780  ETS   A09Normes de base du Web  GTI780 & MTI780  ETS   A09
Normes de base du Web GTI780 & MTI780 ETS A09Claude Coulombe
 

Tendances (6)

Cours html5
Cours html5Cours html5
Cours html5
 
Html de base
Html de baseHtml de base
Html de base
 
Présentation html5
Présentation html5Présentation html5
Présentation html5
 
Outils de publication pour le CMS d'e-sidoc
Outils de publication pour le CMS d'e-sidocOutils de publication pour le CMS d'e-sidoc
Outils de publication pour le CMS d'e-sidoc
 
Normes de base du Web GTI780 & MTI780 ETS A09
Normes de base du Web  GTI780 & MTI780  ETS   A09Normes de base du Web  GTI780 & MTI780  ETS   A09
Normes de base du Web GTI780 & MTI780 ETS A09
 
Formation html5
Formation html5Formation html5
Formation html5
 

En vedette

HTML 5 et CSS3, créez, animez et enrichissez vos sites Web
HTML 5 et CSS3, créez, animez et enrichissez vos sites WebHTML 5 et CSS3, créez, animez et enrichissez vos sites Web
HTML 5 et CSS3, créez, animez et enrichissez vos sites WebMicrosoft
 
HTML 5, CSS 3 au service du web | Semaine du web Alger (Algérie)
HTML 5, CSS 3 au service du web | Semaine du web Alger (Algérie)HTML 5, CSS 3 au service du web | Semaine du web Alger (Algérie)
HTML 5, CSS 3 au service du web | Semaine du web Alger (Algérie)Khaled Djebloun
 
HTML 5 - intro - en francais
HTML 5 - intro - en francaisHTML 5 - intro - en francais
HTML 5 - intro - en francaisVlad Posea
 
Intro to HTML5
Intro to HTML5Intro to HTML5
Intro to HTML5Vlad Posea
 
Formation HTML5/CSS3
Formation HTML5/CSS3Formation HTML5/CSS3
Formation HTML5/CSS3G²FOSS ENIT
 

En vedette (9)

HTML 5 et CSS3, créez, animez et enrichissez vos sites Web
HTML 5 et CSS3, créez, animez et enrichissez vos sites WebHTML 5 et CSS3, créez, animez et enrichissez vos sites Web
HTML 5 et CSS3, créez, animez et enrichissez vos sites Web
 
HTML5
HTML5HTML5
HTML5
 
HTML 5, CSS 3 au service du web | Semaine du web Alger (Algérie)
HTML 5, CSS 3 au service du web | Semaine du web Alger (Algérie)HTML 5, CSS 3 au service du web | Semaine du web Alger (Algérie)
HTML 5, CSS 3 au service du web | Semaine du web Alger (Algérie)
 
HTML 5 - intro - en francais
HTML 5 - intro - en francaisHTML 5 - intro - en francais
HTML 5 - intro - en francais
 
Intro to HTML5
Intro to HTML5Intro to HTML5
Intro to HTML5
 
Introduction to Html5
Introduction to Html5Introduction to Html5
Introduction to Html5
 
html5.ppt
html5.ppthtml5.ppt
html5.ppt
 
Html Ppt
Html PptHtml Ppt
Html Ppt
 
Formation HTML5/CSS3
Formation HTML5/CSS3Formation HTML5/CSS3
Formation HTML5/CSS3
 

Similaire à Rmll2010 Html5 Css3

Cours_1 - HTML5 et JS.ppt
Cours_1 - HTML5 et JS.pptCours_1 - HTML5 et JS.ppt
Cours_1 - HTML5 et JS.pptRihabBENLAMINE
 
Conception Web Avec Dreamweaver
Conception Web Avec DreamweaverConception Web Avec Dreamweaver
Conception Web Avec Dreamweaverdavidbx
 
Prsentationhtml5 html5 ii twebteck
Prsentationhtml5 html5 ii twebteckPrsentationhtml5 html5 ii twebteck
Prsentationhtml5 html5 ii twebteckTECOS
 
Cours Html.pdf
Cours Html.pdfCours Html.pdf
Cours Html.pdf4gnzggpfdw
 
Développement Web
Développement WebDéveloppement Web
Développement Webmastertic
 
Développement Web
Développement WebDéveloppement Web
Développement Webmastertic
 
Prsentationhtml5 html5 ii twebteck
Prsentationhtml5 html5 ii twebteckPrsentationhtml5 html5 ii twebteck
Prsentationhtml5 html5 ii twebteckTECOS
 
Chapitre 1_HTML_complet_version1.pdf
Chapitre 1_HTML_complet_version1.pdfChapitre 1_HTML_complet_version1.pdf
Chapitre 1_HTML_complet_version1.pdfYassineZARIOUH
 
Formation html5 css3 java script
Formation html5 css3 java scriptFormation html5 css3 java script
Formation html5 css3 java scriptArrow Group
 
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 8davrous
 
Rapport de mini projet de programation web
Rapport de mini projet de programation webRapport de mini projet de programation web
Rapport de mini projet de programation webMOHAMMED MOURADI
 
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 !Microsoft Technet France
 
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 !davrous
 
Les apports d'HTML5 pour l'interopérabilité des applications géospatiales
Les apports d'HTML5 pour l'interopérabilité des applications géospatialesLes apports d'HTML5 pour l'interopérabilité des applications géospatiales
Les apports d'HTML5 pour l'interopérabilité des applications géospatialesGaëtan LAVENU
 

Similaire à Rmll2010 Html5 Css3 (20)

Cours_1 - HTML5 et JS.ppt
Cours_1 - HTML5 et JS.pptCours_1 - HTML5 et JS.ppt
Cours_1 - HTML5 et JS.ppt
 
Conception Web Avec Dreamweaver
Conception Web Avec DreamweaverConception Web Avec Dreamweaver
Conception Web Avec Dreamweaver
 
hassclic284.ppt
hassclic284.ppthassclic284.ppt
hassclic284.ppt
 
Prsentationhtml5 html5 ii twebteck
Prsentationhtml5 html5 ii twebteckPrsentationhtml5 html5 ii twebteck
Prsentationhtml5 html5 ii twebteck
 
Cours Html.pdf
Cours Html.pdfCours Html.pdf
Cours Html.pdf
 
Développement Web
Développement WebDéveloppement Web
Développement Web
 
Développement Web
Développement WebDéveloppement Web
Développement Web
 
Association 2 0
Association 2 0Association 2 0
Association 2 0
 
Prsentationhtml5 html5 ii twebteck
Prsentationhtml5 html5 ii twebteckPrsentationhtml5 html5 ii twebteck
Prsentationhtml5 html5 ii twebteck
 
Chapitre 1_HTML_complet_version1.pdf
Chapitre 1_HTML_complet_version1.pdfChapitre 1_HTML_complet_version1.pdf
Chapitre 1_HTML_complet_version1.pdf
 
Formation html5 css3 java script
Formation html5 css3 java scriptFormation html5 css3 java script
Formation html5 css3 java script
 
Association 2 0
Association 2 0Association 2 0
Association 2 0
 
Association 2 0
Association 2 0Association 2 0
Association 2 0
 
Présentation WPF
Présentation  WPFPrésentation  WPF
Présentation WPF
 
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
 
Rapport de mini projet de programation web
Rapport de mini projet de programation webRapport de mini projet de programation web
Rapport de mini projet de programation web
 
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 en Entreprise
HTML5 en EntrepriseHTML5 en Entreprise
HTML5 en Entreprise
 
Les apports d'HTML5 pour l'interopérabilité des applications géospatiales
Les apports d'HTML5 pour l'interopérabilité des applications géospatialesLes apports d'HTML5 pour l'interopérabilité des applications géospatiales
Les apports d'HTML5 pour l'interopérabilité des applications géospatiales
 

Dernier

The Importance of Indoor Air Quality (French)
The Importance of Indoor Air Quality (French)The Importance of Indoor Air Quality (French)
The Importance of Indoor Air Quality (French)IES VE
 
Mes succès sur Microsoft LEARN et examens
Mes succès sur Microsoft LEARN et examensMes succès sur Microsoft LEARN et examens
Mes succès sur Microsoft LEARN et examensErol GIRAUDY
 
Workshop l'IA au service de l'industrie - Présentation générale - Extra 14...
Workshop l'IA au service de l'industrie - Présentation générale - Extra 14...Workshop l'IA au service de l'industrie - Présentation générale - Extra 14...
Workshop l'IA au service de l'industrie - Présentation générale - Extra 14...Infopole1
 
Les Metiers de l'Intelligence Artificielle
Les Metiers de l'Intelligence ArtificielleLes Metiers de l'Intelligence Artificielle
Les Metiers de l'Intelligence ArtificielleErol GIRAUDY
 
Installation de Sylius 2.0 et découverte du nouveau backoffice en Bootstrap
Installation de Sylius 2.0 et découverte du nouveau backoffice en BootstrapInstallation de Sylius 2.0 et découverte du nouveau backoffice en Bootstrap
Installation de Sylius 2.0 et découverte du nouveau backoffice en BootstrapMaxime Huran 🌈
 
KIT-COPILOT and more Article du 20240311
KIT-COPILOT and more Article du 20240311KIT-COPILOT and more Article du 20240311
KIT-COPILOT and more Article du 20240311Erol GIRAUDY
 

Dernier (6)

The Importance of Indoor Air Quality (French)
The Importance of Indoor Air Quality (French)The Importance of Indoor Air Quality (French)
The Importance of Indoor Air Quality (French)
 
Mes succès sur Microsoft LEARN et examens
Mes succès sur Microsoft LEARN et examensMes succès sur Microsoft LEARN et examens
Mes succès sur Microsoft LEARN et examens
 
Workshop l'IA au service de l'industrie - Présentation générale - Extra 14...
Workshop l'IA au service de l'industrie - Présentation générale - Extra 14...Workshop l'IA au service de l'industrie - Présentation générale - Extra 14...
Workshop l'IA au service de l'industrie - Présentation générale - Extra 14...
 
Les Metiers de l'Intelligence Artificielle
Les Metiers de l'Intelligence ArtificielleLes Metiers de l'Intelligence Artificielle
Les Metiers de l'Intelligence Artificielle
 
Installation de Sylius 2.0 et découverte du nouveau backoffice en Bootstrap
Installation de Sylius 2.0 et découverte du nouveau backoffice en BootstrapInstallation de Sylius 2.0 et découverte du nouveau backoffice en Bootstrap
Installation de Sylius 2.0 et découverte du nouveau backoffice en Bootstrap
 
KIT-COPILOT and more Article du 20240311
KIT-COPILOT and more Article du 20240311KIT-COPILOT and more Article du 20240311
KIT-COPILOT and more Article du 20240311
 

Rmll2010 Html5 Css3

  • 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. 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.
  • 4.
  • 5. Des balises qui donnent du sens au texte
  • 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.
  • 8.
  • 9.
  • 10.
  • 11. Délimitation des parties de la page par des sections (remplaçant certains <div>)
  • 12. Simplification des contenus multimédias (audio, vidéo, animations)
  • 13.
  • 14.
  • 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.
  • 17.
  • 18.
  • 19. H264 : format propriétaire et soumis à une licence très coûteuse
  • 20.
  • 21. projet soutenu par Mozilla, Google, Opera, ...
  • 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.
  • 25. Dès à présent, si les destinataires sont équipés de navigateurs modernes  pour les tablettes et terminaux mobiles  dans le cadre d'un intranet ...
  • 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.
  • 28. n ième enfant d'un bloc
  • 30.
  • 31.
  • 32. codage rgba(..., ..., ..., ...)
  • 33.
  • 34. Transparence en CSS 3 opacité du fond : 40 % background-color: rgba(...); opacité du bloc : 40 % background-color: rgb(...); opacity: 0.4;
  • 35.
  • 36.
  • 37.
  • 38.
  • 40. Réglage de la courbure des arrondis  propriété border-radius , déclinée également pour chaque coin (top, right, left, bottom)
  • 41.
  • 42.
  • 44. Application de multicolonnage Extrait du site http://2010.rmll.info, modifié pour une répartition sur trois colonnes
  • 45.
  • 49.
  • 50.
  • 51. mode portrait ou paysage
  • 52. ... Image : Wikipedia
  • 53.
  • 54.
  • 55. préfixe -moz- , -webkit- ou -o- suivant le navigateur
  • 56.
  • 57.