Comment afficher les données de spécification W3C en utilisant son API Web

Le W3C primé par Emmy® est une organisation internationale de normalisation pour le World Wide Web. Il crée de nouvelles normes Web et les révise constamment pour les maintenir cohérentes et pertinentes à travers le monde.

Les navigateurs et les sites Web sont devenus de plus en plus conformes aux normes avec le temps, ce qui permet aux sites Web de s'afficher et de fonctionner uniformément dans tous les navigateurs. L'une des ressources les plus utiles disponibles publiquement est la documentation sur les spécifications du W3C dans w3c.org.

Récemment, le W3C a rendu ses données disponibles via une API Web, dont la page de projet se trouve dans Github. L'intro de cette API depuis sa page de projet est la suivante:

"En réponse à la demande des développeurs de notre communauté souhaitant interagir avec les données du W3C, l'équipe des systèmes du W3C a développé une API Web. Grâce à cela, nous mettons à disposition des données sur les spécifications, les groupes, les organisations et les utilisateurs. "

Dans le post d'aujourd'hui, nous verrons comment extraire les données de spécification via l'API W3C . Vous trouverez les différentes demandes que vous pouvez publier pour récupérer les données de spécification et d'autres dans https://api.w3.org/doc, il est également livré avec un bac à sable pour chaque demande de tester l'API, mais vous aurez besoin d'un Clé API.

Voyons d'abord comment obtenir la clé API .

1. Connectez-vous à votre compte W3C ou créez-en un.
2. Ensuite, allez à Gérer les clés de l'API dans votre page de profil.
3. Cliquez sur Nouvelle clé API et attribuez-lui un nom pour générer votre clé.
4. Ensuite, si vous le souhaitez, vous pouvez le copier-coller dans la zone de texte de la clé API au début de la page https://api.w3.org/doc pour tester l'API dans le bac à sable.

Pour cet article, nous examinerons la demande qui utilise des noms abrégés pour afficher l'URL de spécification, la description et l'état du document . La requête ressemble à ceci:

 https://api.w3.org/Specifications/{shortname}?apikey={apikey}&_format=json 

Par exemple, une demande de spécification HTML5 sera comme ceci;

 https://api.w3.org/Specifications/html5?apikey={apikey}&_format=json 

Maintenant, concentrons-nous sur le code HTML que nous utiliserons pour afficher les données récupérées via l'API. Pour cela, j'ai décidé d'utiliser le modèle HTML. Les modèles HTML sont utilisés pour contenir du code HTML qui est analysé mais pas rendu jusqu'à ce qu'ils soient ajoutés à la page en utilisant JavaScript.

 W3C SPECS 

Le modèle est prêt. Maintenant, sur le JavaScript qui va faire la requête HTTP et afficher les données de réponse JSON en HTML. Voici l'ensemble des variables globales que nous allons commencer par:

 var shortnames = ['html5', 'selectors4', 'état de la batterie', 'fullscreen'], xmlhttp = nouveau XMLHttpRequest (), w3cSpecsEle = document.querySelector ('# w3cSpecs'), templateEle = document.querySelector ('Template '); 

shortnames est un tableau de noms abrégés des spécifications que nous voulons afficher sur notre page Web; Si vous voulez trouver le nom abrégé d'une Spécification, regardez son URL W3C et vous pourrez la voir à la fin.

Cependant, il n'est pas garanti que vous serez en mesure d'obtenir toutes les spécifications comme ceci; il n'y a pas encore de liste définitive de noms abrégés et de spécifications disponibles via l'API.

shortnames tableau shortnames et publiez une requête HTTP pour chacun d'entre eux, puis récupérez la réponse.

 pour (var i = 0; i 
Le responseText est une chaîne JSON et doit être analysé pour obtenir l'objet JSON. displaySpec est la fonction qui utilisera les données JSON et l'affichera en HTML.
Voici l'exemple de texte de réponse JSON pour la spécification HTML5 et après le code pour displaySpec .
 function displaySpec (json) {if ('content' dans templateEle) {/ * get Contenu du template * / templateEleContent = templateEle.content; / * ajoute le titre de la spécification à l'en-tête h2 * / w3cSpecHeader = templateEleContent.querySelector ('.w3cSpecHeader'); w3cSpecHeader.textContent = json.title; / * ajouter l'URL de spécification au lien * / w3cSpecLink = templateEleContent.querySelector ('.w3cSpecLink'); w3cSpecLink.textContent = json.shortlink; w3cSpecLink.href = json.shortlink; / * add spec description * / w3cSpecDetail = templateEleContent.querySelector ('.w3cDescription'); w3cSpecDetail.innerHTML = json.description; / * ajoute le statut de la spécification et le colore en fonction de sa valeur * / W3cSpecLatestVerStatus = templateEleContent.querySelector ('mark'); var status = json._links ["dernière version"]. title; W3cSpecLatestVerStatus.textContent = statut; switch (status) {case 'Recommandation': W3cSpecLatestVerStatus.className = "recommandation"; Pause; case 'Working Draft': W3cSpecLatestVerStatus.className = 'brouillon'; Pause; case 'Retired': W3cSpecLatestVerStatus.className = 'retiré'; Pause; case 'Candidate Recommendation': W3cSpecLatestVerStatus.className = 'recommendationRecommendation'; Pause; } / * ajouter une copie du contenu du modèle à la div principale * / w3cSpecsEle.appendChild (document.importNode (templateEleContent, true)); } else {/ * ajoute du code JS pour créer les éléments individuellement * /}} 

if ('content' in templateEle) est de vérifier si le Template HTML est supporté par le navigateur, sinon, créez tous les éléments HTML dans le JS lui-même. Et quand il y a du support, remplissez les éléments HTML qui se trouvent dans le contenu du Template avec les données respectives de JSON et enfin, ajoutez une copie du contenu du Template à la div #w3cSpecs principale.

C'est tout. Avec un peu de styles CSS, la sortie ressemble à ceci:

Créer une table des matières générée automatiquement avec des emplacements HTML

La table des matières peut grandement améliorer l'expérience utilisateur de nombreux sites Web, par exemple des sites de documentation ou des encyclopédies en ligne comme Wikipedia. Une table des matières bien conçue donne un aperçu de la page et aide les utilisateurs à accéder rapidement à la section qui les intéresse.Traditionn

(Conseils techniques et de conception)

Comment animer une bordure en pointillés avec CSS

Les bordures décorées peuvent orner n'importe quel élément de la page, mais les bordures CSS sont limitées quand il s'agit de style. Les développeurs proposent fréquemment des solutions telles que les bordures de dégradés CSS, les bordures SVG, les bordures multiples et bien d'autres pour imiter et améliorer l'apparence des bordures de boîte et de ses animations.Aujourd

(Conseils techniques et de conception)