SlideShare une entreprise Scribd logo

HTML5, le web de demain - BNSA

Présentation sur les possibilités du HTML5 et CSS3 De quoi parle-t-on ? / Ce qui va changer / Les enjeux / Play HTML : Exemples / Orienter les projets web vers... / Ressources.

1  sur  53
HTML5 // CSS3



                                    &

< Bertrand Hubert /> // 2012
Au sommaire


    Présentation sur les possibilités du HTML5 et CSS3

                  De quoi parle-t-on ?
                   Ce qui va changer
                        Les enjeux
                 Play HTML : Exemples
             Orienter les projets web vers …
                       Ressources
I - De quoi parle-t-on ?




          < GENESE HTML />
I - De quoi parle-t-on ?

HTML : HyperText Markup language / Langage de balisage hypertexte

Langage inventé par Tim Berners-Lee (1989) pour lier ensemble des documents
électroniques avec des options de mise en forme limitées.

HTML est un langage pour décrire l’agencement d’une page et les lier entre
elles.

Gràce à l’HTML on a :
      – Un web puissant et pratique (# ligne de commande)
      – Un système relativement simple de code de texte en clair (affichage
           de la structure)
      – Une explosion du web et des documents mis en ligne par les
           utilisateurs



            < Les pages web deviennent universelles />
I - De quoi parle-t-on ?




        < LES NAVIGATEURS />
I - De quoi parle-t-on ?

La guerre des navigateurs
Apparition d’une multitude de navigateurs avec l’émergence de fonctionnalités propres

•   1993 : Mosaic (possibilité d’insérer des images)
•   1994 : Netscape Navigator  Navigateur web à succès
           Création du W3C (1994) pour travailler sur une norme (Créateur Tim Berners-lee)
•   1995 : Arrivée d’Internet Explorer

Début d’une lutte pour imposer une vision propriétaire du web sans prise en considération (ou très
peu) de la norme W3C

 Mais aussi évolution : HTLM2 (95) // HTML3 (97) // HTML4 (98)

                 En 2002 : Internet Explorer représentait 95% des utilisateurs (IE6)

                             < Microsoft maitrise l’avenir de l’HTML />
Publicité

Recommandé

Formation html5 css3 java script
Formation html5 css3 java scriptFormation html5 css3 java script
Formation html5 css3 java scriptArrow Group
 
HTML5 - Sémantique, structure et nouveaux éléments
HTML5 - Sémantique, structure et nouveaux élémentsHTML5 - Sémantique, structure et nouveaux éléments
HTML5 - Sémantique, structure et nouveaux élémentsRémy Savard
 
Codedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript
Codedarmor 2012 - 06/03 - HTML5, CSS3 et JavascriptCodedarmor 2012 - 06/03 - HTML5, CSS3 et Javascript
Codedarmor 2012 - 06/03 - HTML5, CSS3 et Javascriptcodedarmor
 
Présentation html5
Présentation html5Présentation html5
Présentation html5Kénium
 
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
 
Présentation complète de l'HTML5
Présentation complète de l'HTML5Présentation complète de l'HTML5
Présentation complète de l'HTML5jverrecchia
 

Contenu connexe

Tendances

HTML5, How to rethink your web strategy - Version FR
HTML5, How to rethink your web strategy - Version FRHTML5, How to rethink your web strategy - Version FR
HTML5, How to rethink your web strategy - Version FRFabernovel
 
Premiers pas en css3 et html5
Premiers pas en css3 et html5Premiers pas en css3 et html5
Premiers pas en css3 et html5Aymen Hamdouni
 
Prsentationhtml5 html5 ii twebteck
Prsentationhtml5 html5 ii twebteckPrsentationhtml5 html5 ii twebteck
Prsentationhtml5 html5 ii twebteckTECOS
 
Html de base
Html de baseHtml de base
Html de basekrymo
 
Langage HTML - Fondamentaux et ateliers
Langage HTML - Fondamentaux et ateliersLangage HTML - Fondamentaux et ateliers
Langage HTML - Fondamentaux et ateliersFrédéric Simonet
 
Kits formation html-les_bases
Kits formation html-les_basesKits formation html-les_bases
Kits formation html-les_baseskitsformation
 
HTML5 / CSS3 : Mythes et realite
HTML5 / CSS3 : Mythes et realiteHTML5 / CSS3 : Mythes et realite
HTML5 / CSS3 : Mythes et realiteRaphaël Goetter
 
Etendre le Web avec les Web Components
Etendre le Web avec les Web ComponentsEtendre le Web avec les Web Components
Etendre le Web avec les Web Componentscjolif
 
Formation HTML5/CSS3
Formation HTML5/CSS3Formation HTML5/CSS3
Formation HTML5/CSS3G²FOSS ENIT
 
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 3Stephane PERES
 
Plus belle la vie avec HTML5 et CSS3 - Paris Web 2010
Plus belle la vie avec HTML5 et CSS3 - Paris Web 2010Plus belle la vie avec HTML5 et CSS3 - Paris Web 2010
Plus belle la vie avec HTML5 et CSS3 - Paris Web 2010Raphaël Goetter
 

Tendances (20)

Les base du Html5
Les base du Html5Les base du Html5
Les base du Html5
 
Html5 bonnes-pratiques
Html5 bonnes-pratiquesHtml5 bonnes-pratiques
Html5 bonnes-pratiques
 
HTML5, How to rethink your web strategy - Version FR
HTML5, How to rethink your web strategy - Version FRHTML5, How to rethink your web strategy - Version FR
HTML5, How to rethink your web strategy - Version FR
 
Premiers pas en css3 et html5
Premiers pas en css3 et html5Premiers pas en css3 et html5
Premiers pas en css3 et html5
 
Cours html
Cours htmlCours html
Cours html
 
Prsentationhtml5 html5 ii twebteck
Prsentationhtml5 html5 ii twebteckPrsentationhtml5 html5 ii twebteck
Prsentationhtml5 html5 ii twebteck
 
Formation web
Formation webFormation web
Formation web
 
Html de base
Html de baseHtml de base
Html de base
 
Langage HTML - Fondamentaux et ateliers
Langage HTML - Fondamentaux et ateliersLangage HTML - Fondamentaux et ateliers
Langage HTML - Fondamentaux et ateliers
 
Kits formation html-les_bases
Kits formation html-les_basesKits formation html-les_bases
Kits formation html-les_bases
 
HTML5 / CSS3 : Mythes et realite
HTML5 / CSS3 : Mythes et realiteHTML5 / CSS3 : Mythes et realite
HTML5 / CSS3 : Mythes et realite
 
Etendre le Web avec les Web Components
Etendre le Web avec les Web ComponentsEtendre le Web avec les Web Components
Etendre le Web avec les Web Components
 
Les bases du CSS3
Les bases du CSS3Les bases du CSS3
Les bases du CSS3
 
Html et xhtml
Html et xhtmlHtml et xhtml
Html et xhtml
 
Atelier initiation au html5
Atelier initiation au html5Atelier initiation au html5
Atelier initiation au html5
 
Formation HTML5/CSS3
Formation HTML5/CSS3Formation HTML5/CSS3
Formation HTML5/CSS3
 
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
 
CSS3 - nouveautes
CSS3 - nouveautesCSS3 - nouveautes
CSS3 - nouveautes
 
WordPress
WordPressWordPress
WordPress
 
Plus belle la vie avec HTML5 et CSS3 - Paris Web 2010
Plus belle la vie avec HTML5 et CSS3 - Paris Web 2010Plus belle la vie avec HTML5 et CSS3 - Paris Web 2010
Plus belle la vie avec HTML5 et CSS3 - Paris Web 2010
 

En vedette

Intégration graphique en XHTML / CSS
Intégration graphique en XHTML / CSSIntégration graphique en XHTML / CSS
Intégration graphique en XHTML / CSSMahmoud Nbet
 
Ecommerce tracking
Ecommerce trackingEcommerce tracking
Ecommerce trackingMahmoud Nbet
 
Préprocesseurs css
Préprocesseurs cssPréprocesseurs css
Préprocesseurs cssMahmoud Nbet
 
Boostez vos layout avec CSS3
Boostez vos layout avec CSS3Boostez vos layout avec CSS3
Boostez vos layout avec CSS3matparisot
 
Le module Flex Layout du CSS3
Le module Flex Layout du CSS3Le module Flex Layout du CSS3
Le module Flex Layout du CSS3Mahmoud Nbet
 
Taux de conversion
Taux de conversionTaux de conversion
Taux de conversionMahmoud Nbet
 
LESS, Le CSS avancé
LESS, Le CSS avancéLESS, Le CSS avancé
LESS, Le CSS avancéMahmoud Nbet
 
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)guicara
 
Concept de l’Intégration Continue
Concept de l’Intégration ContinueConcept de l’Intégration Continue
Concept de l’Intégration ContinueFrédéric Sagez
 
Intégration continue
Intégration continueIntégration continue
Intégration continueKlee Group
 
PAUG - Intégration Continue - Décembre 2013
PAUG - Intégration Continue - Décembre 2013PAUG - Intégration Continue - Décembre 2013
PAUG - Intégration Continue - Décembre 2013Aurélien Guillard
 
CocoaHeads Rennes #7 : Intégration continue pour les nuls
CocoaHeads Rennes #7 : Intégration continue pour les nulsCocoaHeads Rennes #7 : Intégration continue pour les nuls
CocoaHeads Rennes #7 : Intégration continue pour les nulsCocoaHeadsRNS
 
Communique de presse Nomade
Communique de presse NomadeCommunique de presse Nomade
Communique de presse NomadeRomu
 
Busquedas egovermente sesion3
Busquedas egovermente sesion3Busquedas egovermente sesion3
Busquedas egovermente sesion3Alejandro Caro
 
Conteneurs Enterres
Conteneurs EnterresConteneurs Enterres
Conteneurs EnterresContenur
 
Baurechtsverträge und ihre Tücken
Baurechtsverträge und ihre TückenBaurechtsverträge und ihre Tücken
Baurechtsverträge und ihre Tückenlawmedia
 
Spruchverfahren aktuell (SpruchZ) Nr. 9/2013
Spruchverfahren aktuell (SpruchZ) Nr. 9/2013Spruchverfahren aktuell (SpruchZ) Nr. 9/2013
Spruchverfahren aktuell (SpruchZ) Nr. 9/2013Martin Arendts
 
Communication par l'objet : place à la convergence
Communication par l'objet : place à la convergenceCommunication par l'objet : place à la convergence
Communication par l'objet : place à la convergencecmboyer
 
Teletrabajo
TeletrabajoTeletrabajo
Teletrabajodeivi-sk
 

En vedette (20)

Intégration graphique en XHTML / CSS
Intégration graphique en XHTML / CSSIntégration graphique en XHTML / CSS
Intégration graphique en XHTML / CSS
 
HTML 5
HTML 5HTML 5
HTML 5
 
Ecommerce tracking
Ecommerce trackingEcommerce tracking
Ecommerce tracking
 
Préprocesseurs css
Préprocesseurs cssPréprocesseurs css
Préprocesseurs css
 
Boostez vos layout avec CSS3
Boostez vos layout avec CSS3Boostez vos layout avec CSS3
Boostez vos layout avec CSS3
 
Le module Flex Layout du CSS3
Le module Flex Layout du CSS3Le module Flex Layout du CSS3
Le module Flex Layout du CSS3
 
Taux de conversion
Taux de conversionTaux de conversion
Taux de conversion
 
LESS, Le CSS avancé
LESS, Le CSS avancéLESS, Le CSS avancé
LESS, Le CSS avancé
 
Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)Formation JavaScript full-stack (JS, jQuery, Node.js...)
Formation JavaScript full-stack (JS, jQuery, Node.js...)
 
Concept de l’Intégration Continue
Concept de l’Intégration ContinueConcept de l’Intégration Continue
Concept de l’Intégration Continue
 
Intégration continue
Intégration continueIntégration continue
Intégration continue
 
PAUG - Intégration Continue - Décembre 2013
PAUG - Intégration Continue - Décembre 2013PAUG - Intégration Continue - Décembre 2013
PAUG - Intégration Continue - Décembre 2013
 
CocoaHeads Rennes #7 : Intégration continue pour les nuls
CocoaHeads Rennes #7 : Intégration continue pour les nulsCocoaHeads Rennes #7 : Intégration continue pour les nuls
CocoaHeads Rennes #7 : Intégration continue pour les nuls
 
Communique de presse Nomade
Communique de presse NomadeCommunique de presse Nomade
Communique de presse Nomade
 
Busquedas egovermente sesion3
Busquedas egovermente sesion3Busquedas egovermente sesion3
Busquedas egovermente sesion3
 
Conteneurs Enterres
Conteneurs EnterresConteneurs Enterres
Conteneurs Enterres
 
Baurechtsverträge und ihre Tücken
Baurechtsverträge und ihre TückenBaurechtsverträge und ihre Tücken
Baurechtsverträge und ihre Tücken
 
Spruchverfahren aktuell (SpruchZ) Nr. 9/2013
Spruchverfahren aktuell (SpruchZ) Nr. 9/2013Spruchverfahren aktuell (SpruchZ) Nr. 9/2013
Spruchverfahren aktuell (SpruchZ) Nr. 9/2013
 
Communication par l'objet : place à la convergence
Communication par l'objet : place à la convergenceCommunication par l'objet : place à la convergence
Communication par l'objet : place à la convergence
 
Teletrabajo
TeletrabajoTeletrabajo
Teletrabajo
 

Similaire à HTML5, le web de demain - BNSA

resume-theorique-m104-0401-61d5b38b21f67 (1).pptx
resume-theorique-m104-0401-61d5b38b21f67 (1).pptxresume-theorique-m104-0401-61d5b38b21f67 (1).pptx
resume-theorique-m104-0401-61d5b38b21f67 (1).pptxFootballLovers9
 
HTML5 W3C Conference Euratechnologie
HTML5 W3C Conference EuratechnologieHTML5 W3C Conference Euratechnologie
HTML5 W3C Conference Euratechnologiewyggio
 
Html5-Devfest Yaoundé 2013
Html5-Devfest Yaoundé 2013Html5-Devfest Yaoundé 2013
Html5-Devfest Yaoundé 2013gdgyaounde
 
Front end, une île qui mérite d'être visitée
Front end, une île qui mérite d'être visitéeFront end, une île qui mérite d'être visitée
Front end, une île qui mérite d'être visitéeOuadie LAHDIOUI
 
Chap1-Introduction au HTML 5.pdf
Chap1-Introduction au HTML 5.pdfChap1-Introduction au HTML 5.pdf
Chap1-Introduction au HTML 5.pdfENS
 
HTML5... La révolution maintenant!
HTML5... La révolution maintenant!HTML5... La révolution maintenant!
HTML5... La révolution maintenant!CARA_Lyon
 
HTML5... La révolution maintenant!
HTML5... La révolution maintenant!HTML5... La révolution maintenant!
HTML5... La révolution maintenant!CARA_Lyon
 
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
 
Introduction aux Technologies Web élaborée par Marouan OMEZZINE
Introduction aux Technologies Web élaborée par Marouan OMEZZINEIntroduction aux Technologies Web élaborée par Marouan OMEZZINE
Introduction aux Technologies Web élaborée par Marouan OMEZZINEMarouan OMEZZINE
 
Wygday 2011 - Introduction à HTML5
Wygday 2011 - Introduction à HTML5Wygday 2011 - Introduction à HTML5
Wygday 2011 - Introduction à HTML5wyggio
 
Cours_1 - HTML5 et JS.ppt
Cours_1 - HTML5 et JS.pptCours_1 - HTML5 et JS.ppt
Cours_1 - HTML5 et JS.pptRihabBENLAMINE
 
Environnement et technologies web
Environnement et technologies webEnvironnement et technologies web
Environnement et technologies webIrinaTsimpilova1
 
Prsentationhtml5 html5 ii twebteck
Prsentationhtml5 html5 ii twebteckPrsentationhtml5 html5 ii twebteck
Prsentationhtml5 html5 ii twebteckTECOS
 
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
 
Nouveautés html5 et css3 dans internet explorer 10
Nouveautés html5 et css3 dans internet explorer 10Nouveautés html5 et css3 dans internet explorer 10
Nouveautés html5 et css3 dans internet explorer 10davrous
 
Création des sites web pour débutant
Création des sites web pour débutantCréation des sites web pour débutant
Création des sites web pour débutantKorteby Farouk
 
Présentation RIA avec Adobe Flex / RIA with Adobe Flex
Présentation RIA avec Adobe Flex / RIA with Adobe FlexPrésentation RIA avec Adobe Flex / RIA with Adobe Flex
Présentation RIA avec Adobe Flex / RIA with Adobe FlexCynapsys It Hotspot
 

Similaire à HTML5, le web de demain - BNSA (20)

resume-theorique-m104-0401-61d5b38b21f67 (1).pptx
resume-theorique-m104-0401-61d5b38b21f67 (1).pptxresume-theorique-m104-0401-61d5b38b21f67 (1).pptx
resume-theorique-m104-0401-61d5b38b21f67 (1).pptx
 
HTML5 W3C Conference Euratechnologie
HTML5 W3C Conference EuratechnologieHTML5 W3C Conference Euratechnologie
HTML5 W3C Conference Euratechnologie
 
Html5-Devfest Yaoundé 2013
Html5-Devfest Yaoundé 2013Html5-Devfest Yaoundé 2013
Html5-Devfest Yaoundé 2013
 
Front end, une île qui mérite d'être visitée
Front end, une île qui mérite d'être visitéeFront end, une île qui mérite d'être visitée
Front end, une île qui mérite d'être visitée
 
Chap1-Introduction au HTML 5.pdf
Chap1-Introduction au HTML 5.pdfChap1-Introduction au HTML 5.pdf
Chap1-Introduction au HTML 5.pdf
 
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!
 
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
 
Introduction aux Technologies Web élaborée par Marouan OMEZZINE
Introduction aux Technologies Web élaborée par Marouan OMEZZINEIntroduction aux Technologies Web élaborée par Marouan OMEZZINE
Introduction aux Technologies Web élaborée par Marouan OMEZZINE
 
Wygday 2011 - Introduction à HTML5
Wygday 2011 - Introduction à HTML5Wygday 2011 - Introduction à HTML5
Wygday 2011 - Introduction à HTML5
 
Cours_1 - HTML5 et JS.ppt
Cours_1 - HTML5 et JS.pptCours_1 - HTML5 et JS.ppt
Cours_1 - HTML5 et JS.ppt
 
Environnement et technologies web
Environnement et technologies webEnvironnement et technologies web
Environnement et technologies web
 
Prsentationhtml5 html5 ii twebteck
Prsentationhtml5 html5 ii twebteckPrsentationhtml5 html5 ii twebteck
Prsentationhtml5 html5 ii twebteck
 
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
 
HTML5 & SilverLight 5
HTML5 & SilverLight 5HTML5 & SilverLight 5
HTML5 & SilverLight 5
 
Nouveautés html5 et css3 dans internet explorer 10
Nouveautés html5 et css3 dans internet explorer 10Nouveautés html5 et css3 dans internet explorer 10
Nouveautés html5 et css3 dans internet explorer 10
 
Création des sites web pour débutant
Création des sites web pour débutantCréation des sites web pour débutant
Création des sites web pour débutant
 
Présentation RIA avec Adobe Flex / RIA with Adobe Flex
Présentation RIA avec Adobe Flex / RIA with Adobe FlexPrésentation RIA avec Adobe Flex / RIA with Adobe Flex
Présentation RIA avec Adobe Flex / RIA with Adobe Flex
 
Langage HTML
Langage HTMLLangage HTML
Langage HTML
 
Nouveaux apis
Nouveaux apisNouveaux apis
Nouveaux apis
 

HTML5, le web de demain - BNSA

  • 1. HTML5 // CSS3 & < Bertrand Hubert /> // 2012
  • 2. Au sommaire Présentation sur les possibilités du HTML5 et CSS3 De quoi parle-t-on ? Ce qui va changer Les enjeux Play HTML : Exemples Orienter les projets web vers … Ressources
  • 3. I - De quoi parle-t-on ? < GENESE HTML />
  • 4. I - De quoi parle-t-on ? HTML : HyperText Markup language / Langage de balisage hypertexte Langage inventé par Tim Berners-Lee (1989) pour lier ensemble des documents électroniques avec des options de mise en forme limitées. HTML est un langage pour décrire l’agencement d’une page et les lier entre elles. Gràce à l’HTML on a : – Un web puissant et pratique (# ligne de commande) – Un système relativement simple de code de texte en clair (affichage de la structure) – Une explosion du web et des documents mis en ligne par les utilisateurs < Les pages web deviennent universelles />
  • 5. I - De quoi parle-t-on ? < LES NAVIGATEURS />
  • 6. I - De quoi parle-t-on ? La guerre des navigateurs Apparition d’une multitude de navigateurs avec l’émergence de fonctionnalités propres • 1993 : Mosaic (possibilité d’insérer des images) • 1994 : Netscape Navigator  Navigateur web à succès Création du W3C (1994) pour travailler sur une norme (Créateur Tim Berners-lee) • 1995 : Arrivée d’Internet Explorer Début d’une lutte pour imposer une vision propriétaire du web sans prise en considération (ou très peu) de la norme W3C  Mais aussi évolution : HTLM2 (95) // HTML3 (97) // HTML4 (98) En 2002 : Internet Explorer représentait 95% des utilisateurs (IE6) < Microsoft maitrise l’avenir de l’HTML />
  • 7. I - De quoi parle-t-on ? Le libre contre-attaque Émergence de nouveaux navigateurs… • 2004 : Firefox avec le respect des normes W3C & fonctionnalités innovantes • … mais aussi Safari, Opéra • 2007 : Netscape disparait en 2007 • 2008 : … arrivée de Google via son navigateur Chrome
  • 8. I - De quoi parle-t-on ? Le retour de la norme Bilan d’une décennie de concurrence de visions web : – Vision propriétaire (Microsoft) VS Navigateurs « respect W3C » (Firefox…) – Résultat : Microsoft « se doit » d’évoluer vers les normes W3C www.evolutionofweb.appspot.com
  • 9. I - De quoi parle-t-on ? Information : Répartition des navigateurs sur les équipements (Fixe & Mobile)
  • 10. I - De quoi parle-t-on ? < HTML4 /> < HTML5 />
  • 11. I - De quoi parle-t-on ? De l’HTML4…. vers l’HTML5 1 - Aujourd’hui HTML 4 est inapte à supporter les développements du web moderne (sécurités, fonctionnalités, applications…). Il n’est désormais plus satisfaisant pour l’agencement des pages et la gestion des polices. 2 – En 2002, le W3C introduit le XHTML (HTML adhérent aux normes de l’XML) mais sans l’adhésion des navigateurs (trop tolérants à la mauvaise syntaxe).  Succès des plugins et usage populaire des applets Java et du Flash Création d’un nouveau groupe de travail indépendant : WHATWG (Web hypertext Application Technology Working Group) - Mozilla, Opéra, Apple, …. Objectif : développement de nouvelles technologies destinées à faciliter l'écriture et le déploiement d'applications à travers le Web Le W3C abandonne le projet XHTML2 et rejoint le WHATWG pour participer au travail en cours sur HTML5 (07/2009). OBJECTIF HTML5 : création d’un cadre pour développer des applications web.
  • 12. I - De quoi parle-t-on ? < HTML /> + <CSS />
  • 13. I - De quoi parle-t-on ? Rappel sur HTML // CSS : le fond et la forme /> HTML = le contenu /> CSS = la présentation - Les CSS sont apparus lors de la guerre des navigateurs (un CSS utilisant les normes du navigateur). Le W3C associa rapidement le CSS1 à HTML. Évolution en CSS2 (positions, accessibilité …) À l’instar de l’HTML5, le CSS3 fait l’objet d’un travail en ce qui concerne sa norme.
  • 15. II – Ce qui va changer < HTML /> Web de demain
  • 16. II – Ce qui va changer Avant de commencer Le W3C a annoncé que la version finale de HTML5 ne s’appellera pas HTML5 mais simplement HTML.  Objectif d’une norme finalisée et universelle HTML5 est, au final, l’intégration de plusieurs technologies différentes : • HTML, CSS, JAVASCRIPT et des technologies côté serveur Ce qui nous attend avec cette norme • Un langage simple • Un balisage basé sur la sémantique (= se baser sur la signification plutôt que le détail // ex : <h1> ) • Utilisation du CSS pour les détails de style • Les pages sont souvent des « applications » (Ex formulaire  + d’interaction internaute) • Javascript est central SO WHAT’S NEW ?
  • 17. II – Ce qui va changer DOCUMENT Déclaration de document : Avant <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict// EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> ---------------------------- Après <!DOCTYPE html>
  • 18. II – Ce qui va changer CODE OPTIMISÉ Caractéristiques : • Éléments sémantiques • Éléments médias • Nouveaux formulaires • Applications • Éléments redéfinis • Suppression d’éléments + Accessibilité + Référencement + Chargement rapide des pages + Mobilité (3G / 4G) Exemple : les nouveaux sites pourront adopter les balises telles que <header> pour remplacer les <div id= "header"> que l'on trouve sur la plupart des sites construits actuellement. Utiliser uniquement HTML en natif, au lieu d'y implémenter toute une série de plugins JavaScript voire d'extensions propriétaires.
  • 19. II – Ce qui va changer CODE
  • 20. II – Ce qui va changer <VIDEO> Formats : OGG, MP4, WebM Syntaxe simple : <video controls src="video.ogv">Ici la description alternative</video> Accès à des sources multiples On peut également proposer plusieurs sources dans plusieurs formats différents en indiquant les formats : <video width="400" height="222" controls="controls"> <source src="video.mp4" type="video/mp4" /> <source src="video.webm" type="video/webm" /> <source src="video.ogv" type="video/ogg" /> Ici l'alternative à la vidéo : un lien de téléchargement, un message, etc. </video> + Alternative au Flash - Pas de protection du fichier au téléchargement + Plus d’infos : http://www.alsacreations.com/article/lire/1125-introduction-balise-video-html5-mp4-h264-webm-ogg-theora.html
  • 21. II – Ce qui va changer <AUDIO> Format : OGG, MP3, WAV Syntaxe simple : <audio src="elvis.ogg" controls preload="auto"autobuffer></audio> Accès à des sources multiples On peut également proposer plusieurs sources dans plusieurs formats différents en indiquant les formats : <audio controls preload="auto" autobuffer> <source src="elvis.mp3" /> <source src="elvis.ogg" /> </audio> + Alternative au Flash - Pas de protection du fichier au téléchargement + Plus d’infos : http://html5doctor.com/native-audio-in-the-browser/
  • 22. II – Ce qui va changer <FORMULAIRE> • Améliorer l'aide à la saisie et les contrôles disponibles pour l'utilisateur. • Des attributs simples à mettre en place améliorent la prise en charge des formulaires. • Se passer de JavaScript.
  • 23. II – Ce qui va changer <APPLICATION> Le canvas : L'élément <canvas> a été introduit afin de pouvoir créer des éléments graphiques 2D en Javascript. Il permet de mettre en place une zone pour les dessins ou les applications graphiques ou complexes. Des applications web hors-ligne (Offline & Storage) Une API permet d'activer les applications web hors connexion. Exemple : lecture ou usage d’un blog en cache Drag ‘n Drop : glisser-déposer des éléments http://www.script-tutorials.com/demos/255/index.html
  • 24. II – Ce qui va changer <GEOLOCALISATION> Nouvelles fonctionnalités introduites par la mobilité Ses usages sont nombreux et souvent reliés à des bases de données de renseignements géographiques : • Plans interactifs • Renseignements locaux en mobilité • Recherche contextualisée sur les moteurs • Méta-informations jointes aux photos vidéos « DIS MOI OÙ TU ES, JE TE DIRAI CE QUE JE PEUX TE VENDRE » Possibilité d’interfacer cette fonction avec des API (Ex : API Google) Prise en charge de la confidentialité de la géolocalisation (navigateur ou mobile) + Plus d’infos : http://www.alsacreations.com/tuto/lire/926-geolocalisation-geolocation-html5.html
  • 25. II – Ce qui va changer <CSS3 STYLE> Améliorer les rendus graphiques qui nécessitaient jusqu’à présent l’utilisation d’images. Gain de productivité : - Code simple rapide codage Gain de maintenance - Changement de style Gain de bande passante - Mobilité (code/images) Quelques exemples : 1. Border Radius 2. Border Image 3. Box Shadow and Text Shadow 4. Easy Transparency with RGBA and Opacity 5. Custom Web Fonts with @Font-Face
  • 26. II – Ce qui va changer <CSS3 STYLE> Automatiser des effets visuels qui nécessitaient jusqu’à présent l’utilisation : • d’images, • de scripts • ou de modifications du code HTML. Exemple en ligne : http://designlovr.com/examples/dynamic_stack_of_index_cards/ D’autres nouveautés CSS3 en 20 exemples : http://www.jonathan-menet.fr/blog/2010/08/07/les-nouveautes- de-css3-en-20-exemples/
  • 27. III – Les enjeux < FOCUS ON/>
  • 28. III – Les enjeux 1 // DES PROJETS DE PLUS EN PLUS ACCESSIBLES « Mettre le web et ses services à la disposition de tous les individus, quels que soient leur matériel ou logiciel, leur infrastructure réseau, leur langue maternelle, leur culture, leur localisation géographique ou leurs aptitudes physiques ou mentales. » Tim Berners Lee http://www.journaldunet.com/developpeur/client-web/accessibilite-web-de-html5/
  • 29. III – Les enjeux 2 // UN RÉFÉRENCEMENT AMÉLIORÉ Un code pour une meilleure lisibilité des référenceurs (Robot crawling compatibility)
  • 30. III – Les enjeux 3 // DES PROJETS « RESPONSIVE WEB DESIGN » Une nouvelle philosophie de création de site www.slideshare.net/agencedagobert/le-responsive-design-par-dagobert Prévoir des projets, HTML5/CSS3, c’est rendre accessible l’expérience utilisateur sur les moyens d’accès actuels (Ordinateur, Tablette, Smartphone, Liseuse)
  • 31. III – Les enjeux 4 // DES PROJETS REPONDANT AUX DEMANDES VISUELLES DES COMMUNICANTS « Que les apparences soient belles car on ne juge que par elles » Roger de Bussy-Rabutin (17e siècle) http://www.ultranoir.com/fr/
  • 32. III – Les enjeux 5 // MOBILITE : UNE NAVIGATION PLUS RAPIDE (3g & 4g) Navigation lente Explosion de la mobilité Expérience non satisfaisante Nomobophobie (Objectif 4G : Accès Médias) « no mobile phobia »
  • 33. IV – PLAY HTML < EXEMPLES />
  • 34. IV – PLAY HTML À VOIR SUR LE WEB : LES AWARDS www.awwwards.com  HTML5 : http://www.awwwards.com/tag/html5  CSS3 : http://www.awwwards.com/tag/css3 The awards for design, creativity and innovation on the Internet, which recognize and promote the best web designers in the world
  • 35. IV – PLAY HTML HTML5. 3D interactive world & WebGL // Les objets de la vidéo réagissent à la fois à la musique comme aux instructions utilisateurs http://www.ro.me/
  • 36. IV – PLAY HTML http://www.ultranoir.com/fr/
  • 37. IV – PLAY HTML http://naturevalleytrailview.com
  • 38. IV – PLAY HTML http://www.marcusthomasllc.com
  • 39. IV – PLAY HTML http://www.loisjeans.com/web2012/es
  • 40. IV – PLAY HTML DES RESSOURCES EN LIGNE http://beta.rdsign.net/exemple/CSS3FullscreenSlideshow/
  • 41. V – Orienter les projets web vers… < Y ALLER ? />
  • 42. V – Orienter les projets web vers… PASSER A HTML5 ? http://ishtml5readyyet.com/
  • 43. V – Orienter les projets web vers… PASSER A HTML5 ?...... NON Pourquoi ? - Code non finalisé - Peu d’applications (vs flash) - Inadapté selon les demandes (sécurité, téléchargement…) - Problématique des navigateurs - Mise à niveau des développeurs http://ishtml5readyyet.com/
  • 44. V – Orienter les projets web vers… PASSER A HTML5 ? OUI The future is already here. It’s not very evenly distributed. Le futur est déjà là. Tout le monde n’y a pas encore accès. William Gibson – Ecrivain Américain de science fiction des années 70 Fonde le « Le courant Cyberpunk », univers où le dingue d'informatique et le rocker se rejoignent dans un bouillon de culture.
  • 45. V – Orienter les projets web vers… PASSER A HTML5 ?...... OUI - Un code plus rapide que ses prédécesseurs (moins d'images, moins de code, moins de fichiers flash) - Des formulaires également plus efficaces et plus faciles à utiliser pour les internautes - Une alternative à Adobe Flash, Google Gears ou encore Microsoft silverlight pour mettre des animations sur son site - Un code harmonisé pour l’accès selon les supports (smartphones) et leurs applications - Une syntaxe facile à acquérir pour les développeurs
  • 46. V – Orienter les projets web vers… PASSER A HTML5 ?...... À retenir HTML5 propose de nouveaux éléments très pratiques qui ont pour objectif d'harmoniser les médias et de structurer la mise en page par des éléments plus "sémantiques". Il permettra également de faciliter sensiblement l'accessibilité au contenu et l'interopérabilité étant donné que les formats propriétaires tels que Flash ou SilverLight pourraient être concurrencés par des éléments tels que <audio> ou <video>. De plus, l'analyse des pages par des robots ou par des synthétiseurs vocaux sera facilitée par les éléments <header>,<nav>…. DES SITES INTERNET DE QUALITÉ
  • 47. V – Orienter les projets web vers… Mais surtout … Rester en amont de la vague Être dans le coup 
  • 48. V – Orienter les projets web vers… > POINT SUR LES NAVIGATEURS Parmi les 130 propriétés et 35 sélecteurs nouveaux, une majorité est déjà reconnue par les navigateurs actuels : – Firefox 4+ – Chrome 10+ – Opéra 11+ – Safari 5+ – Internet Explorer 10 Zoom sur IE et CSS3 IE6 : 4% des propriétés et 0% des sélecteurs IE7 : 5% des propriétés et 5% des sélecteurs IE8 : 6% des propriétés et 5% des sélecteurs IE9 : 16% des propriétés et 50% des sélecteurs IE10 : 50% des propriétés et 80% des sélecteurs
  • 49. V – Orienter les projets web vers… > RAPPEL SUR LES NAVIGATEURS ESTIMATION 34% des sites utilisent des éléments HTML5
  • 50. V – Orienter les projets web vers… > POINT SUR LES MEDIAS
  • 51. VI – À voir sur le net < RESSOURCES />
  • 52. VI – À voir sur le net Valider son code Générateur instantané et multi-navigateurs d'effets CSS3 http://validator.w3.org www.CSS3please.com Analyser son site, HTML5 est il risqué Reconnaissance de HTML5 et CSS3 sur les navigateurs http://html5please.com/ www.findmebyip.com/litmus Compatibilité des navigateurs mobiles HTML5 – Convertissez vos vidéos et uploadez les. http://mobilehtml5.org/ http://korben.info/easy-html5-video.html http://korben.info/migration-html5-video.html HTML 5 Doctor http://html5doctor.com/ Astuces navigateurs http://docteurhtml5.com/html5/comment-faire- HTML 5 W3C Working Draft fonctionner-le-html5-dans-ie-et-firefox/ http://dev.w3.org/html5/spec/Overview.html Web Forms 2.0 spec http://www.whatwg.org/specs/web-forms/current- work/
  • 53. < MERCI /> bnsa@aquitaine.fr facebook.com/BnsAquitaine @bnsaquitaine < Bertrand Hubert /> // 2012