HTML5 // CSS3                                    &< Bertrand Hubert /> // 2012
Au sommaire    Présentation sur les possibilités du HTML5 et CSS3                  De quoi parle-t-on ?                   ...
I - De quoi parle-t-on ?          < GENESE HTML />
I - De quoi parle-t-on ?HTML : HyperText Markup language / Langage de balisage hypertexteLangage inventé par Tim Berners-L...
I - De quoi parle-t-on ?        < LES NAVIGATEURS />
I - De quoi parle-t-on ?La guerre des navigateursApparition d’une multitude de navigateurs avec l’émergence de fonctionnal...
I - De quoi parle-t-on ?Le libre contre-attaqueÉmergence de nouveaux navigateurs…•   2004 : Firefox    avec le respect des...
I - De quoi parle-t-on ?Le retour de la normeBilan d’une décennie de concurrence de visions web :       – Vision propriéta...
I - De quoi parle-t-on ?Information : Répartition des navigateurs sur les équipements(Fixe & Mobile)
I - De quoi parle-t-on ?              < HTML4 />              < HTML5 />
I - De quoi parle-t-on ?De l’HTML4…. vers l’HTML51 - Aujourd’hui HTML 4 est inapte à supporter les développements du web m...
I - De quoi parle-t-on ?         < HTML /> + <CSS />
I - De quoi parle-t-on ?Rappel sur HTML // CSS : le fond et la forme     /> HTML               = le contenu     /> CSS    ...
FIN DE L’HISTOIRE
II – Ce qui va changer            < HTML />           Web de demain
II – Ce qui va changerAvant de commencerLe W3C a annoncé que la version finale de HTML5 ne s’appellera pas HTML5 mais simp...
II – Ce qui va changer         DOCUMENTDéclaration de document :                                Avant      <!DOCTYPE HTML ...
II – Ce qui va changer        CODE OPTIMISÉCaractéristiques :•   Éléments sémantiques•   Éléments médias•   Nouveaux formu...
II – Ce qui va changer  CODE
II – Ce qui va changer                <VIDEO>Formats : OGG, MP4, WebMSyntaxe simple :              <video controls src="vi...
II – Ce qui va changer                <AUDIO>Format : OGG, MP3, WAVSyntaxe simple :                   <audio src="elvis.og...
II – Ce qui va changer       <FORMULAIRE>•   Améliorer laide à la saisie et les contrôles disponibles pour    lutilisateur...
II – Ce qui va changer         <APPLICATION>Le canvas : Lélément <canvas> a été introduit afin de pouvoir créer desélément...
II – Ce qui va changer     <GEOLOCALISATION> Nouvelles fonctionnalités introduites par la mobilité Ses usages sont nombreu...
II – Ce qui va changer          <CSS3 STYLE>Améliorer les rendus graphiques qui nécessitaient jusqu’à présent l’utilisatio...
II – Ce qui va changer          <CSS3 STYLE>Automatiser des effets visuels qui nécessitaient jusqu’àprésent l’utilisation ...
III – Les enjeux             < FOCUS ON/>
III – Les enjeux                         1 // DES PROJETS DE PLUS EN PLUS ACCESSIBLES   « Mettre le web et ses services à ...
III – Les enjeux              2 // UN RÉFÉRENCEMENT AMÉLIORÉ        Un code pour une meilleure lisibilité des référenceurs...
III – Les enjeux                3 // DES PROJETS « RESPONSIVE WEB DESIGN »                     Une nouvelle philosophie de...
III – Les enjeux                 4 // DES PROJETS REPONDANT AUX DEMANDES VISUELLES                                   DES C...
III – Les enjeux     5 // MOBILITE : UNE NAVIGATION PLUS RAPIDE (3g & 4g)          Navigation lente          Explosion de ...
IV – PLAY HTML          < EXEMPLES />
IV – PLAY HTMLÀ VOIR SUR LE WEB : LES AWARDS                                       www.awwwards.com HTML5 : http://www.aw...
IV – PLAY HTML                 HTML5. 3D interactive world & WebGL                 // Les objets de la vidéo réagissent à ...
IV – PLAY HTML                 http://www.ultranoir.com/fr/
IV – PLAY HTML                 http://naturevalleytrailview.com
IV – PLAY HTML                 http://www.marcusthomasllc.com
IV – PLAY HTML                 http://www.loisjeans.com/web2012/es
IV – PLAY HTMLDES RESSOURCES EN LIGNE                          http://beta.rdsign.net/exemple/CSS3FullscreenSlideshow/
V – Orienter les projets web    vers…             < Y ALLER ? />
V – Orienter les projets web    vers…PASSER A HTML5 ?                               http://ishtml5readyyet.com/
V – Orienter les projets web    vers…PASSER A HTML5 ?...... NON                             Pourquoi ?- Code non finalisé-...
V – Orienter les projets web    vers…PASSER A HTML5 ?                     OUI                      The future is already h...
V – Orienter les projets web    vers…PASSER A HTML5 ?...... OUI- Un code plus rapide que ses prédécesseurs (moins dimages,...
V – Orienter les projets web    vers…PASSER A HTML5 ?...... À retenirHTML5 propose de nouveaux éléments très pratiques qui...
V – Orienter les projets web    vers…              Mais surtout …             Rester en amont de la vague                 ...
V – Orienter les projets web    vers…> POINT SUR LES NAVIGATEURSParmi les 130 propriétés et 35 sélecteurs nouveaux, unemaj...
V – Orienter les projets web    vers…                               > RAPPEL SUR                               LES NAVIGAT...
V – Orienter les projets web    vers…                               > POINT SUR LES MEDIAS
VI – À voir sur le net           < RESSOURCES />
VI – À voir sur le netValider son code                                 Générateur instantané et multi-navigateurs deffets ...
< MERCI />    bnsa@aquitaine.fr   facebook.com/BnsAquitaine    @bnsaquitaine  < Bertrand Hubert /> // 2012
Prochain SlideShare
Chargement dans…5
×

HTML5, le web de demain - BNSA

3 785 vues

Publié le

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.

Publié dans : Technologie
0 commentaire
13 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

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

Aucune remarque pour cette diapositive

HTML5, le web de demain - BNSA

  1. 1. HTML5 // CSS3 &< Bertrand Hubert /> // 2012
  2. 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. 3. I - De quoi parle-t-on ? < GENESE HTML />
  4. 4. I - De quoi parle-t-on ?HTML : HyperText Markup language / Langage de balisage hypertexteLangage 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 entreelles.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. 5. I - De quoi parle-t-on ? < LES NAVIGATEURS />
  6. 6. I - De quoi parle-t-on ?La guerre des navigateursApparition 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 ExplorerDébut d’une lutte pour imposer une vision propriétaire du web sans prise en considération (ou trèspeu) 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. 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. 8. I - De quoi parle-t-on ?Le retour de la normeBilan 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. 9. I - De quoi parle-t-on ?Information : Répartition des navigateurs sur les équipements(Fixe & Mobile)
  10. 10. I - De quoi parle-t-on ? < HTML4 /> < HTML5 />
  11. 11. I - De quoi parle-t-on ?De l’HTML4…. vers l’HTML51 - 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 desnavigateurs (trop tolérants à la mauvaise syntaxe). Succès des plugins et usage populaire des applets Java et du FlashCré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éploiementdapplications à travers le WebLe 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. 12. I - De quoi parle-t-on ? < HTML /> + <CSS />
  13. 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 normesdu 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.
  14. 14. FIN DE L’HISTOIRE
  15. 15. II – Ce qui va changer < HTML /> Web de demain
  16. 16. II – Ce qui va changerAvant de commencerLe W3C a annoncé que la version finale de HTML5 ne s’appellera pas HTML5 mais simplement HTML. Objectif d’une norme finalisée et universelleHTML5 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. 17. II – Ce qui va changer DOCUMENTDé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. 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 tellesque <header> pour remplacer les <div id= "header"> que lon trouve sur laplupart des sites construits actuellement.Utiliser uniquement HTML en natif, au lieu dy implémenter touteune série de plugins JavaScript voire dextensions propriétaires.
  19. 19. II – Ce qui va changer CODE
  20. 20. II – Ce qui va changer <VIDEO>Formats : OGG, MP4, WebMSyntaxe simple : <video controls src="video.ogv">Ici la description alternative</video>Accès à des sources multiplesOn peut également proposer plusieurs sources dans plusieursformats 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 lalternative à 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. 21. II – Ce qui va changer <AUDIO>Format : OGG, MP3, WAVSyntaxe simple : <audio src="elvis.ogg" controls preload="auto"autobuffer></audio>Accès à des sources multiplesOn peut également proposer plusieurs sources dans plusieurs formatsdiffé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. 22. II – Ce qui va changer <FORMULAIRE>• Améliorer laide à la saisie et les contrôles disponibles pour lutilisateur.• Des attributs simples à mettre en place améliorent la prise en charge des formulaires.• Se passer de JavaScript.
  23. 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 zonepour les dessins ou les applications graphiques ou complexes.Des applications web hors-ligne (Offline & Storage)Une API permet dactiver les applications web hors connexion.Exemple : lecture ou usage d’un blog en cacheDrag ‘n Drop : glisser-déposer des élémentshttp://www.script-tutorials.com/demos/255/index.html
  24. 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. 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 codageGain de maintenance- Changement de styleGain de bande passante- Mobilité (code/images)Quelques exemples :1. Border Radius2. Border Image3. Box Shadow and Text Shadow4. Easy Transparency with RGBA and Opacity5. Custom Web Fonts with @Font-Face
  26. 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. 27. III – Les enjeux < FOCUS ON/>
  28. 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 Leehttp://www.journaldunet.com/developpeur/client-web/accessibilite-web-de-html5/
  29. 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. 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-dagobertPré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. 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. 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. 33. IV – PLAY HTML < EXEMPLES />
  34. 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. 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. 36. IV – PLAY HTML http://www.ultranoir.com/fr/
  37. 37. IV – PLAY HTML http://naturevalleytrailview.com
  38. 38. IV – PLAY HTML http://www.marcusthomasllc.com
  39. 39. IV – PLAY HTML http://www.loisjeans.com/web2012/es
  40. 40. IV – PLAY HTMLDES RESSOURCES EN LIGNE http://beta.rdsign.net/exemple/CSS3FullscreenSlideshow/
  41. 41. V – Orienter les projets web vers… < Y ALLER ? />
  42. 42. V – Orienter les projets web vers…PASSER A HTML5 ? http://ishtml5readyyet.com/
  43. 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. 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 dinformatique et le rocker se rejoignent dans un bouillon de culture.
  45. 45. V – Orienter les projets web vers…PASSER A HTML5 ?...... OUI- Un code plus rapide que ses prédécesseurs (moins dimages, moins de code,moins de fichiers flash)- Des formulaires également plus efficaces et plus faciles à utiliser pour lesinternautes- Une alternative à Adobe Flash, Google Gears ou encore Microsoft silverlightpour mettre des animations sur son site- Un code harmonisé pour l’accès selon les supports (smartphones) et leursapplications- Une syntaxe facile à acquérir pour les développeurs
  46. 46. V – Orienter les projets web vers…PASSER A HTML5 ?...... À retenirHTML5 propose de nouveaux éléments très pratiques qui ont pour objectifdharmoniser les médias et de structurer la mise en page par des éléments plus"sémantiques".Il permettra également de faciliter sensiblement laccessibilité au contenu etlinteropérabilité étant donné que les formats propriétaires tels que Flash ouSilverLight pourraient être concurrencés par des éléments tels que <audio> ou<video>.De plus, lanalyse des pages par des robots ou par des synthétiseurs vocaux serafacilitée par les éléments <header>,<nav>…. DES SITES INTERNET DE QUALITÉ
  47. 47. V – Orienter les projets web vers… Mais surtout … Rester en amont de la vague Être dans le coup 
  48. 48. V – Orienter les projets web vers…> POINT SUR LES NAVIGATEURSParmi les 130 propriétés et 35 sélecteurs nouveaux, unemajorité est déjà reconnue par les navigateurs actuels : – Firefox 4+ – Chrome 10+ – Opéra 11+ – Safari 5+ – Internet Explorer 10Zoom sur IE et CSS3IE6 : 4% des propriétés et 0% des sélecteursIE7 : 5% des propriétés et 5% des sélecteursIE8 : 6% des propriétés et 5% des sélecteursIE9 : 16% des propriétés et 50% des sélecteursIE10 : 50% des propriétés et 80% des sélecteurs
  49. 49. V – Orienter les projets web vers… > RAPPEL SUR LES NAVIGATEURS ESTIMATION 34% des sites utilisent des éléments HTML5
  50. 50. V – Orienter les projets web vers… > POINT SUR LES MEDIAS
  51. 51. VI – À voir sur le net < RESSOURCES />
  52. 52. VI – À voir sur le netValider son code Générateur instantané et multi-navigateurs deffets CSS3http://validator.w3.org www.CSS3please.comAnalyser son site, HTML5 est il risqué Reconnaissance de HTML5 et CSS3 sur les navigateurshttp://html5please.com/ www.findmebyip.com/litmusCompatibilité 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.htmlHTML 5 Doctorhttp://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.htmlWeb Forms 2.0 spechttp://www.whatwg.org/specs/web-forms/current-work/
  53. 53. < MERCI /> bnsa@aquitaine.fr facebook.com/BnsAquitaine @bnsaquitaine < Bertrand Hubert /> // 2012

×