Parlons de HTML5, de quoi s’agit-il exactement ?

Dans cet article, Mike Smith, membre actif des normes de base de la technologie des navigateurs du W3C, parle de ce qu'est exactement le HTML5 et donne quelques idées. Ressources utiles que les développeurs peuvent conserver à l’évolution des normes.

Nous sommes en train de mettre à jour la plateforme Web . HTML5 est souvent utilisé pour décrire ce processus, bien que la technologie utilisée dans l'itération ne se limite pas aux fonctionnalités définies par la norme HTML5.

J'utilise le terme « plateforme Web » (plateforme Webpourm) pour désigner une série de protocoles, de formats et d'API qui peuvent être pris en charge par les navigateurs Web. Les développeurs utilisent ces fonctionnalités pour créer de nouvelles applications prenant en charge les interactions sociales et tirant parti des fonctionnalités de l'appareil, telles que les capacités de la caméra, du microphone et du GPS. HTTP, TLS et WebSockets sont quelques-uns des protocoles de la plate-forme Web ; HTML, CSS et Javascript sont quelques exemples de formats de plate-forme Web. Les API de la plateforme Web incluent l'API de géolocalisation et les API pour

À terme, si une fonctionnalité est largement implémentée et que les développeurs l'utilisent fréquemment pour créer une expérience utilisateur stable, alors cette fonctionnalité devient une partie de la plateforme Web. Le World Wide Web Consortium (W3C) est indispensable, car il rassemble les parties prenantes pour développer des normes gratuites et créer des ressources de support, telles que des ensembles de tests et des procédures de vérification.

Les standards sont très utiles comme protocole partagé, mais la plateforme Web comprend un grand nombre de technologies avec différents niveaux de maturité, et ces technologies ne sont pas toutes standardisées. Lorsque les développeurs utilisent ces technologies, ils rencontreront des problèmes pratiques, notamment :

• Comment puis-je réduire le code des cas particuliers ?

• Quel code est suffisamment stable pour que je puisse l'utiliser maintenant ?

• Que dois-je faire pour les utilisateurs qui ne disposent pas du dernier navigateur ?

Les réponses à ces questions ont changé au fil du temps, les développeurs ont donc développé des solutions pratiques telles que des solutions de secours et des « polyfills » (qui seront expliquées plus en détail plus tard). les anciens navigateurs ainsi que les derniers navigateurs. Dans cet article, je ne me concentre pas sur l'état de la norme HTML5, mais explore plutôt quelques ressources utiles disponibles pour aider les développeurs à démarrer avec la technologie Open Web Platform actuelle. Ces ressources clarifient les « principes et procédures » d'utilisation de HTML5, complètent la norme et, en fin de compte, accélèrent le déploiement.

platform.html5.org

Pour un développeur occupé, comment doit-il se tenir au courant des dernières fonctionnalités, comprendre quelles solutions de secours et quels polyfills (le cas échéant) peuvent être utilisés ? J'édite un site internet, platform.html5.org, qui permet de découvrir les dernières technologies qui composent la plateforme web. (Il est alimenté par le référentiel github et je vous encourage fortement à contribuer à la maintenance du site en créant le dépôt et en envoyant des demandes de mise à jour).

Ce site catégorise les technologies telles que le Dessin et la composition, le Multimédia et le stockage. Les icônes présentes sur le site représentent la maturité de chaque technologie. Un petit drapeau vert indique qu'une fonctionnalité est disponible. Un éclair jaune signifie « à utiliser avec prudence ». Cependant, ce ne sont que des indications approximatives ; pour vraiment comprendre ces fonctionnalités, vous devrez cliquer sur quelques liens utiles ci-dessous, comme celui-ci :

• HTML5 Please

• Quand puis-je utiliser…

• MDN (Mozilla Developer Network)

En particulier, le site HTML5 Please mérite d'être commenté davantage. Il a été créé par le collectif de développeurs H5BP (le groupe de développeurs derrière HTML5 Boilerplate). Il répertorie les fonctionnalités par nom et fournit une description détaillée de la maturité de chaque fonctionnalité. Il affiche également un panneau d'état qui affiche des informations d'état pour chaque fonctionnalité (utilisation/attention/éviter). Dans certains cas, les mots-clés « prudence » et « utilisation » sont complétés par « avec repli » ou « avec polyfill ». Dans le cas de « avec repli », vous pouvez développer le panneau pour voir exactement comment le repli est fourni pour la fonctionnalité.

Un polyfill fait référence à un morceau de code Javascript qui sert de cale à une fonctionnalité ; c'est-à-dire qu'il simule une future API qui fournit une fonctionnalité de secours pour les anciens navigateurs.

Les gestionnaires de site de HTML5 Please permettent à quiconque de contribuer facilement au site en fournissant un lien « Modifier ces informations » sur chaque panneau. Vous permet de créer une copie du contenu d'une page et de la soumettre au site. (Ce mécanisme est pris en charge par un référentiel github, et toutes les modifications apportées au contenu seront soumises sous forme de demandes d'extraction). Les responsables de ce site examineront et consolideront le contenu.

Parfois, vous souhaitez voir des informations d'état plus détaillées que celles fournies par HTML5 Please. Par exemple, vous souhaiterez peut-être savoir exactement quels navigateurs prennent en charge un navigateur particulier et quelles versions de chaque navigateur le prennent en charge, ou dans quelle mesure les fonctionnalités sont prises en charge dans les navigateurs mobiles et les versions du système d'exploitation de ces navigateurs. À ce stade, vous devez consulter le site Quand puis-je utiliser….

Quand puis-je utiliser est maintenu par Alexis Deveria. Il suit l'état de nombreuses fonctionnalités et met à jour le site lorsque de nouvelles versions du navigateur sont publiées. S'il existe une fonctionnalité que vous aimeriez connaître mais qui ne figure pas déjà sur le site Quand puis-je l'utiliser, vous pouvez suggérer son ajout.

Désormais, chaque fonctionnalité enregistrée sur Quand puis-je utiliser dispose d'un tableau. Une colonne du tableau est destinée aux navigateurs de bureau grand public (IE, Firefox, Chrome, Safari et Opera) et une colonne est destinée aux navigateurs mobiles grand public. Navigateurs (iOS Safari, Opera Mini, Opera Mobile et Android Browser), chaque ligne correspond au numéro de version de chaque navigateur. Comme pour d'autres sites, la prise en charge d'une fonctionnalité est codée par couleur pour chaque version spécifique du navigateur (support/partiel (support partiel), support/non (non pris en charge), support/inconnu (je ne sais pas si elle est prise en charge)).

Par exemple, jetez un œil à la manière dont les compteurs CSS sont pris en charge. Un tableau rempli d'entrées vertes indique que la fonctionnalité est bien prise en charge. Les autres fonctionnalités qui ne sont pas bien prises en charge sont surlignées en rouge.

Chaque tableau de fonctionnalités du site Quand puis-je utiliser fournit un lien « voir aussi » vers le tableau des fonctionnalités associées, ainsi que des liens vers des sites tiers qui fournissent des informations sur l'utilisation de ces fonctionnalités pour vous enseigner. comment utiliser ces fonctionnalités pour le développement.

MDN (Mozilla Developer Network) est un site avec des liens vers platform.html5.org et When Can I Use. Considérez MDN comme un guide sur les fonctionnalités « comment puis-je utiliser ». Par exemple, si vous souhaitez implémenter des Web Workers et avez besoin d'exemples de code et de liens vers des ressources contenant des informations détaillées, MDN propose une page sur l'utilisation des Web Workers qui peut être très utile pour démarrer.

Comme HTML5 Please, When Can I Use et platform.html5.org, MDN accueille également les contributions et rend le processus plus rapide et plus facile que d'autres sites : l'intégralité du site est un wiki, donc une fois que vous créez un compte , vous pouvez modifier n'importe quelle page.

Suites de tests

Il n'y a pas de meilleur moyen d'évaluer la maturité d'une fonctionnalité que de disposer d'une suite de tests complète. Vous pouvez exécuter l’ensemble de tests vous-même et analyser les résultats. Il n'existe pas de bibliothèque centralisée pour la plate-forme Web, ni d'endroit unique où vous pouvez voir tous les résultats, mais le W3C a commencé à travailler sur un site de test partagé framework, tout comme le groupe de travail CSS du W3C. Création d'un site de framework de test pour CSS.

Ces sites vous permettent de parcourir les résultats de différents ensembles de tests pour différents navigateurs et versions de navigateur. Vous pouvez également exécuter la suite de tests dans votre propre navigateur et soumettre les résultats à intégrer dans la base de données des résultats du cadre. Par exemple, le module de mise en page multicolonne de CSS teste les données de résultat ou une page de lancement qui vous permet d'exécuter votre propre suite de tests dans le navigateur.

Conclusion

Le site mentionné précédemment peut vous aider à suivre la nouvelle plateforme Web. J'espère qu'à mesure que la plate-forme mûrira et que davantage de personnes partageront leur code et leurs expériences, des sites plus utiles apparaîtront. J'aimerais que vous utilisiez les sites que j'ai mentionnés et que vous leur soumettiez vos propres découvertes afin que des informations de haute qualité et à jour sur la plate-forme Web puissent être partagées avec tout le monde.

[Recommandations associées]

1.

Tutoriel vidéo en ligne h5 gratuit

2.

Manuel de la version complète HTML5.

3.

Tutoriel vidéo html5 original php.cn

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!