Share
Crédit: Sujet simple - Qu'est-ce que HTML5? Ils font des vidéos animées cool.
Bienvenue chez Envato Tuts +! Ce tutoriel fournit une présentation introductive de HTML5. Si vous n'en avez pas beaucoup entendu parler ou si vous voulez simplement comprendre sa pertinence, vous êtes au bon endroit..
HTML5 est la dernière norme en matière d'affichage et d'interaction avec les pages Web pour les navigateurs. Approuvé en 2014, il s'agit de la première mise à jour de HTML en 14 ans. De nos jours, c'est toute une vie entre les mises à jour.
Le but de HTML5 est principalement de permettre aux développeurs Web et aux créateurs de navigateur de se conformer à des normes consensuelles qui rendent la conformité plus efficace et responsabilisante. Il est également conçu pour offrir aux utilisateurs de bureau et mobiles des expériences de meilleure qualité, plus rapides et plus cohérentes..
Voici quelques améliorations clés en HTML5:
Par exemple, ci-dessous, un exemple de géolocalisation HTML5 tiré de la rubrique Construction de votre démarrage avec PHP: Géolocalisation et Google Adresses (Tuts +):
HTML5 améliorera la vitesse, la facilité d'utilisation et la cohérence sur le Web. Oui, votre expérience sur YouTube deviendra progressivement merveilleuse. Il y aura moins de mises à jour de navigateur et de plug-in, moins de menaces pour la sécurité et des sites Web plus élégants, plus lisibles et plus rapides.
HTML5 rend votre vie incroyablement facile et élargit considérablement les possibilités. Cela signifie également que vous serez capable de construire des choses et de vous fier davantage aux constructeurs de navigateurs pour assurer la cohérence. Cela signifie beaucoup moins de code de mise en page conditionnel.
D'une part, vous aurez une excellente feuille de route dans la spécification HTML5 détaillant comment et ce que vous devez construire. D'autre part, il y a encore beaucoup à faire et à faire. Il ne sera pas aussi facile de différencier votre navigateur des grands fabricants de navigateurs.
Juste un petit rappel avant de plonger! J'essaie de participer aux discussions ci-dessous. Si vous avez une question ou une suggestion de sujet pour un prochain tutoriel, veuillez poster un commentaire ci-dessous ou contactez-moi sur Twitter @reifman.
HTML5 est la dernière norme en matière de programmation de navigateur depuis plus de 20 ans depuis le lancement du Web en 1991..
HTML est devenu une norme en 1993, et voici la chronologie des versions HTML acceptées par les comités de normalisation:
Selon Wikipedia, HTML5 est destiné à consolider des versions antérieures et des types de document différenciés tels que XHTML 1 et DOM niveau 2 HTML:
[HTML5] étend, améliore et rationalise le balisage disponible pour les documents et introduit le balisage et… (API) pour les applications Web complexes… Le HTML5 est également un candidat potentiel pour les applications mobiles multiplates-formes. De nombreuses fonctionnalités ont été conçues avec des appareils de faible puissance tels que les smartphones et les tablettes.
Voici un résumé de la façon dont MakeUseOf a expliqué les objectifs de HTML5:
Image crédit: Topic Simple
Beaucoup, il s'avère! HTML5 fournit une liste de nouvelles fonctionnalités si impressionnante que les principaux navigateurs ne sont toujours pas totalement compatibles, même 18 mois après son acceptation:
Crédit image: PHPFlow
Il y a aussi cet arc-en-ciel visuel interactif chez HTML5Readiness. Survolez différents arcs pour voir quelles fonctionnalités sont supportées par quels navigateurs:
C'est amusant, mais l'utilisation d'autres graphiques sur d'autres sites peut être plus intuitive d'un point de vue fonctionnel..
En 2011, Wikipédia a signalé qu'environ un tiers des 100 meilleurs sites Web prenaient en charge un certain format HTML5. En août 2013, environ 153 des sites Web du Fortune 500 avaient.
Voici une visualisation de l'immensité des capacités de HTML5:
Crédit d'image: Wikipédia
Les nouveaux éléments les plus fondamentaux de HTML5 facilitent la mise en page des pages Web et le débogage de votre code ou d’autres. Il est également plus facile pour les services automatisés d’analyser le Web et de comprendre l’importance des différents composants de page..
Pour la mise en page et les fonctionnalités clés, il existe désormais des éléments spécifiques tels que:
Voici un aperçu visuel de ceux-ci par Smashing Magazine:
Voici quelques-unes des fonctionnalités les plus avancées de HTML5, y compris l'intégration d'API, rendant le codage en JavaScript plus simple et plus cohérent pour les actions sophistiquées:
HTML5 et L’avenir du Web offre un autre guide sur ces fonctionnalités. Voici un de leurs plats à emporter - ils apprécient beaucoup le cache de l'application:
Google Gears nous a fourni un stockage de données hors connexion et Flash nous a présenté la puissance du cache d’applications (Pandora l’utilise pour enregistrer vos informations de connexion). Avec HTML5, ces fonctionnalités peuvent désormais être utilisées directement dans le langage et peuvent facilement être étendues avec JavaScript..
Besoin de voir quelles fonctionnalités sont supportées dans quels navigateurs? HTML5Test offre une évaluation interactive utile des fonctionnalités et de la prise en charge du navigateur:
Il y a tellement de nouvelles fonctionnalités qu'il est impossible de toutes les cataloguer ici. Consultez les liens vers les ressources au bas de ce didacticiel pour connaître les ressources plus approfondies que je vous recommande..
Jetons un coup d'oeil à quelques exemples intéressants de HTML5 en action.
La simplicité de HTML5 est claire dans ses nouvelles mises en page. Les éléments plus orientés contenu facilitent la compréhension et le débogage du code de page. Voici un exemple simple que j'ai construit avec le projet HTML5-Reset:
Titre de la page
Article en-tête
Etiam pretium odio eu mi convallis vitae varius neque pharetra. Null vestibulum nisi ut sem cursus sed mattis nisi egestas.
Article sous-tête
Vestibulum lacus erat, volutpat vel dignissim chez, fringilla ut felis.
Notez qu'il existe une balise doctype, balises de lien et balises de script plus simples. Le script HTML5Shiv prend en charge les versions antérieures d'Internet Explorer antérieures à la version 9.x..
Si vous souhaitez voir d'autres approches, consultez le HTML5 Boilerplate, une page HTML5 plus large par défaut, à code source ouvert,.
Voici un exemple vidéo de W3Schools montrant le code source à gauche et le lecteur résultant à droite:
Il n'y a pas de plugin requis et pas de mises à jour.
HTML5 apporte une grande variété d’améliorations aux formulaires et aux éléments d’entrée pour faciliter la programmation Web et améliorer considérablement l’expérience utilisateur. Par exemple, les éléments d'entrée prennent désormais en charge une variété de validations intégrées. Voici une validation pour les nombres dans une plage spécifique:
Voici quelques excellents tutoriels pour approfondir les formulaires avec HTML5 Doctor:
Par exemple, voici une démonstration de la intervalle élément affiché dans un navigateur Chrome:
En HTML5, vous pouvez plus facilement animer des éléments avec JavaScript et HTML5. Voici une horloge animée simple qui est évolutive (changez le zoom):
Voici un exemple de code pour la démo ci-dessus intégrant JavaScript:
Démo HTML5: animation d'horloge SVG Animation d'horloge SVG
Animation d'horloge SVG par David Basoko.
J'espère que vous avez apprécié cet aperçu de l'émergence et des avantages de HTML5. Si vous souhaitez explorer davantage le HTML5, voici deux autres ressources que je voudrais suggérer:
Voici un exemple des démos consultables sur HTML5 Demos (ils n'ont pas tous travaillé pour moi):
Si vous êtes un gestionnaire de site WordPress comme de nombreux lecteurs Envato Tuts +, vous souhaiterez peut-être évaluer la compatibilité des thèmes futurs avec HTML5. Le développement basé sur des normes avec un support de navigateur cohérent facilite grandement le développement Web pour beaucoup d'entre nous et réduira le nombre de bugs rencontrés par nos clients tout en offrant de meilleures expériences d'utilisateurs.
Dans l'ensemble, j'ai été très impressionné par HTML5. Et il semble que cela continuera d'évoluer plus vite que tous les 14 ans.
De plus, si vous recherchez d'autres utilitaires pour vous aider à développer vos compétences en HTML5, n'oubliez pas de voir ce que nous avons à votre disposition dans Envato Market..
J'aimerais entendre davantage vos commentaires sur HTML5 et des suggestions de sujets futurs sur lesquels vous aimeriez en savoir plus. N'hésitez pas à poster vos questions et commentaires ci-dessous. Vous pouvez également me contacter directement sur Twitter @reifman. Pour voir les autres tutoriels que j'ai écrits, consultez ma page d'instructeur Envato Tuts +.
Comme il existe de nombreuses ressources utiles pour HTML5, j'ai inclus une aide supplémentaire parmi celles que je trouve les plus utiles:
Accentsconagua
