Téléchargé parBNSA - Aquitaine
HTML5, le web de demain - BNSA
Le document présente une synthèse des évolutions apportées par HTML5 et CSS3 par rapport aux versions précédentes, notamment en matière d'accessibilité, de sémantique et d'interaction. Il aborde également la compétition entre navigateurs et l'abandon progressif d'éléments propriétaires comme Flash au profit de technologies standardisées. Enfin, il souligne l'importance d'adapter les projets web aux nouvelles normes pour améliorer l'expérience utilisateur sur divers dispositifs.
Contenu connexe
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 - Dequoi parle-t-on ? < GENESE HTML />
- 4. I - Dequoi 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 - Dequoi parle-t-on ? < LES NAVIGATEURS />
- 6. I - Dequoi 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 - Dequoi 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 - Dequoi 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 - Dequoi parle-t-on ? Information : Répartition des navigateurs sur les équipements (Fixe & Mobile)
- 10. I - Dequoi parle-t-on ? < HTML4 /> < HTML5 />
- 11. I - Dequoi 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 - Dequoi parle-t-on ? < HTML /> + <CSS />
- 13. I - Dequoi 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.
- 14.
- 15. II – Cequi va changer < HTML /> Web de demain
- 16. II – Cequi 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 – Cequi 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 – Cequi 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 – Cequi va changer CODE
- 20. II – Cequi 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 – Cequi 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 – Cequi 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 – Cequi 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 – Cequi 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 – Cequi 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 – Cequi 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 – Lesenjeux < FOCUS ON/>
- 28. III – Lesenjeux 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 – Lesenjeux 2 // UN RÉFÉRENCEMENT AMÉLIORÉ Un code pour une meilleure lisibilité des référenceurs (Robot crawling compatibility)
- 30. III – Lesenjeux 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 – Lesenjeux 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 – Lesenjeux 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 – PLAYHTML < EXEMPLES />
- 34. IV – PLAYHTML À 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 – PLAYHTML 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 – PLAYHTML http://www.ultranoir.com/fr/
- 37. IV – PLAYHTML http://naturevalleytrailview.com
- 38. IV – PLAYHTML http://www.marcusthomasllc.com
- 39. IV – PLAYHTML http://www.loisjeans.com/web2012/es
- 40. IV – PLAYHTML DES RESSOURCES EN LIGNE http://beta.rdsign.net/exemple/CSS3FullscreenSlideshow/
- 41. V – Orienterles projets web vers… < Y ALLER ? />
- 42. V – Orienterles projets web vers… PASSER A HTML5 ? http://ishtml5readyyet.com/
- 43. V – Orienterles 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 – Orienterles 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 – Orienterles 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 – Orienterles 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 – Orienterles projets web vers… Mais surtout … Rester en amont de la vague Être dans le coup
- 48. V – Orienterles 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 – Orienterles projets web vers… > RAPPEL SUR LES NAVIGATEURS ESTIMATION 34% des sites utilisent des éléments HTML5
- 50. V – Orienterles 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 /> [email protected] facebook.com/BnsAquitaine @bnsaquitaine < Bertrand Hubert /> // 2012