Webmaster

HTML5 – la tousse à outils

Publié le par stephanie
26
Avr

Rich Clark, l’un des médecins de l’HTML5. Il  conçoit des API formées pour  la plus part de spécification HTML5 et Il nous parle de son but et ses progrès

Alors que nous voyons, lisons et entendons beaucoup de choses sur les nouveaux éléments sémantiques dans HTML5, nous entendons sans doute beaucoup moins sur les interfaces de programmation d’applications (API) qui composent une grande partie de la spécification elle-même.

API dans la spécification HTML5

Nous allons commencer par regarder l’API dans les spécifications du W3C HTML5.

Médias API

L’API médias fait partie de l’élément multimédia qui comprend deux des enfants de poster HTML5, la vidéo et audio des éléments. Les éléments eux-mêmes sont simples à mettre en œuvre mais ce qui est moins bien connus sont les méthodes JavaScript disponibles dans l’API associée. Il ya un certain nombre de méthodes, y compris play () et pause () ainsi que load () et canPlayType () . Beaucoup de méthodes sont partagés entre deux types de supports avec un sous-ensemble des propriétés supplémentaires (par exemple, affiche ) spécifiquement liés à la vidéo élément. Combiné avec d’autres événements et les attributs de l’API nous permet, entre autres choses, de créer des contrôles personnalisés.

Pour en savoir plus, jetez un oeil à des articles suivants.

Piste de texte API

L’API piste texte débouche sur bien de l’API médias. Il est conçu pour nous permettre d’interagir avec des pistes de texte (sous-titres ou des légendes, par exemple) pour l’ audioet la vidéo éléments.

Vous pouvez retourner le nombre de pistes de texte et leur longueur associée à un élément média, le type de piste texte (sous-titres, des légendes, des descriptions, des chapitres et des métadonnées), la langue , readyState , le mode et les étiquettes .

Cette API aura bien plus de soutien lorsque les navigateurs commencent à mettre en oeuvre le sous-titrage indigènes, en utilisant WebVTT par exemple. En attendant, pour se lever à la vitesse, regardez ces ressources:

Drag and Drop

L’API glisser-déposer a été le sujet de beaucoup de débats . Initialement créé par Microsoft dans la version 5 d’Internet Explorer, il est maintenant supporté par Firefox, Safari et Chrome.Alors, que faut-il faire?

Eh bien, comme son nom l’indique, il apporte un soutien natif et glisser déposer pour le navigateur. En ajoutant un déplaçable attribut défini au vrai , l’utilisateur a la possibilité de déplacer n’importe quel élément. Vous pouvez ensuite ajouter des gestionnaires d’événements sur une zone de largage cibles de dire au navigateur où l’élément peut être supprimé.

Muscles réelle de l’API sont fléchies quand vous commencez à penser en dehors du navigateur. En utilisant le glisser-déposer, un utilisateur pourrait faire glisser une image depuis le bureau dans le navigateur ou vous pouvez créer une icône qui est chargé avec le contenu lorsqu’il est déplacé hors du navigateur par l’utilisateur à une cible nouvelle application.

Drag and Drop est abordé en profondeur dans les articles ci-dessous.

Applications Web hors ligne / cache de l’application

Avec le brouillage des applications natives (portables et de bureau) et Web Apps vient la tâche inévitable de vouloir prendre nos applications hors ligne. Les détails de spécification Web Applications Hors comment faire exactement cela en utilisant la mise en cache d’application.

La mise en cache d’application est effectuée par la création d’un fichier manifeste simple qui répertorie les fichiers qui sont requis pour l’application de travailler hors ligne. Les auteurs peuvent alors assurer leur fonction les sites hors ligne. Le manifeste des causes navigateur de l’utilisateur de conserver une copie des fichiers pour une utilisation hors ligne plus tard.Lorsqu’un utilisateur affiche le document / application sans accès au réseau, le navigateur passe à utiliser les copies locales à la place. Donc, en théorie, vous devriez être en mesure de terminer l’écriture que l’e-mail important ou de jouer la version web de Angry Birds pendant que vous êtes dans le métro / métro.

Avec le soutien navigateur relativement forte, en particulier dans l’arène mobile (Firefox, Safari, Chrome, Opera, iPhone et Android), c’est quelque chose que vous pouvez commencer à utiliser dès maintenant. Pour en savoir plus, je vous suggère:

Interaction utilisateur

Comme déconnecté, interaction avec l’utilisateur fait partie de la spécification HTML5 primaire. Il convient de mentionner ici parce que certaines de ses caractéristiques, telles que la contenteditable attribut, sont extrêmement utiles lorsque vous créez des applications web. contenteditable a été autour d’Internet Explorer depuis la version 5.5 et fonctionne dans les cinq principaux navigateurs. Réglage de l’attribut à vrai indique que l’élément est modifiable. Les auteurs pourraient alors, par exemple, combiner cela avec stockage local pour suivre les modifications apportées aux documents.

Pour plus d’informations, jetez un oeil à la spécification actuelle mais il faut noter que certaines sections ont été déplacés à l’ édition HTML API travaux en cours.

Histoire

Un bouton retour du navigateur est la pièce la plus utilisée de son chrome. Ajax-y les applications web, il pause à leurs risques et périls. Utilisation de l’API Histoire HTML5, les développeurs ont beaucoup plus de contrôle sur l’état historique de la session du navigateur d’un utilisateur.

L’API histoire pré-HTML5 nous a permis d’envoyer les utilisateurs vers l’avant ou en arrière, et vérifier la longueur de l’histoire. Quel HTML5 apporte à la partie des moyens pour ajouter et supprimer des entrées dans l’histoire de l’utilisateur, contenir des données pour restaurer un état de la page et mettre à jour l’URL sans rafraîchir la page. Le script est assez simple et nous aidera à construire des applications complexes qui ne sont pas rafraîchir la page à partir de laquelle nous pouvons continuer à partager les URL que nous avons toujours fait.

Pour plus de détails sur l’API Histoire:

Type MIME et l’enregistrement gestionnaire de protocole

Cette API permet aux sites de se faire enregistrer en tant que gestionnaires pour certains régimes. En utilisant le registerProtocolHandler méthode, un cas d’utilisation par exemple pourrait être:

un service téléphonique messagerie en ligne pourrait se faire enregistrer en tant que gestionnaire du sms: régime, de sorte que si l’utilisateur clique sur un tel lien, il est donné la possibilité d’utiliser ce site Web ( W3C HTML Spec )

Certains régimes sont sur ​​liste blanche comme les sms , tél et irc . En outre, il est unregisterContentHandler méthode qui permet aux sites de s’inscrire en tant que gestionnaires de contenu avec un certain type mime.

La spécification est le meilleur endroit pour commencer lors de l’apprentissage au sujet type MIME et l’enregistrement gestionnaire de protocole.

API dans la spécification WHATWG

Jusqu’ici, nous avons regardé specs qui existent dans les deux versions du W3C et du WHATWG de HTML5. Nous allons maintenant très brièvement introduire un peu plus les API qui sont documentées au sein du WHATWG niveau de vie spécification HTML, mais ont été éclaté en plusieurs petits, plus maniables spécifications par le W3C. Le but et la majorité du contenu est le même dans les deux versions.

  • Canvas 2D Context – nous permet de tirer en natif dans le navigateur. Utiliser la toile sans l’API 2D Context nous ne serions pas en mesure de tirer. C’est notre pinceaux, palette et de peinture tout en un. L’API est vaste et assez bien tous les articles en toile d’introduire quelques-unes des différentes méthodes et les événements dont il existe un trop grand nombre de détailler ici. WHATWG élément canvas, Contexte 2D et HTML du W3C en toile Spec contexte 2D
  • Document de la Croix et de canal de messagerie – document de la Croix de messagerie définit une façon pour les documents à communiquer avec un autre, indépendamment de leur domaine source sans permettre des attaques cross-site. Dans une veine similaire, le canal de messagerie utilise des morceaux de code indépendantes de communiquer directement. WHATWG HTML, document de messagerie de la Croix , Croix WHATWG HTML canal de messagerie et de messagerie Web du W3C HTML5 spec
  • Microdonnées – ajoute une couche supplémentaire de la sémantique à vos documents à partir de laquelle les moteurs de recherche, navigateurs et plus peuvent utiliser pour extraire des informations et fournir une expérience de navigation améliorée. WHATWG HTML, microdonnées et les microdonnées du W3C spec
  • Travailleurs Web – une API pour l’exécution de JavaScript dans le contexte indépendant de tous les scripts utilisateur. Permet longtemps l’exécution de tâches à remplir sans empêcher la page de devenir insensible. WHATWG HTML, Travailleurs Web et le W3C Web Workers Spec
  • Stockage Web – une spécification pour le stockage de données côté client (paires valeur-clé) similaires aux cookies. WHATWG HTML, de stockage Web et Web du W3C stockage spec
  • Sockets Web – permet aux pages d’utiliser le protocole WebSocket d’envoyer des messages bidirectionnels entre un navigateur et le serveur. WHATWG Web Sockets et de l’API Socket Web du W3C
  • Serveur envoyé des événements – permet de notifications push pour être envoyé à partir d’un serveur à un navigateur sous la forme d’événements DOM. WHATWG HTML, envoyés par le serveur d’événements et de W3C envoyés par le serveur Événements
  •  

L’API « HTML5 » Buzzword

Si je devais lister toutes les autres API qui sont étroitement liées à HTML5, je serais ici pendant un moment. Une autre fois peut-être. Quelques-uns de ceux qui souvent incorrectement décrit comme HTML5 sont Géolocalisation, DB indexées, sélecteurs, et l’API de système de fichiers.

Mike Smith du W3C a compilé une liste exhaustive de tous les aspects de la plate-forme Web et technologies de navigateur qui est bookmarking vaut.

Démos et Support navigateur

Nous avons fait allusion à l’appui navigateur long de cet article, mais que le soutien est en constante évolution le meilleur endroit pour tenir à jour (en plus des tests, bien sûr!)

Si vous trouvez que quelque chose n’est pas encore supporté par les navigateurs, ne désespérez pas. Il est probable qu’il y ait un polyfill pour vous aider à imiter le comportement d’origine. Commencez votre recherche à cette liste de Polyfills HTML5 navigateur Croix .

Pour des démos à partir de laquelle vous pouvez afficher source pour la plupart des API que nous avons discuté, ne cherchez pas plus loin que Remy Sharp Démos HTML5 .

Résumé

Nous avons simplement effleuré la surface de chacune de ces détaillée, utile, API puissante.Pour en savoir plus et rentrer dans la peau de chacun, d’aller vous jeter genoux dans le code. Vous serez surpris de ce que vous trouverez en faisant des recherches et d’expérimentation. Quant à ceux API qui ne sont pas assez complètement cuits encore, j’espère que l’article a aiguisé votre appétit pour ce qui sera à venir à un navigateur près de chez vous bientôt.

Sources

– Pour tester la compatibilité des navigateur : http://devfiles.myopera.com/articles/1041/image-gallery.html

– Word press :  http://www.lafermeduweb.net/billet/jigoshop-un-plugin-d-e-commerce-gratuit-pour-wordpress-1133.html
– Kit de démarage de HTML 2 API : http://telecharger-gratuit.com/windows/internet/editeur_de_site/html-kickstart-0.html

stephanie