Comment afficher les données d'une spécification W3C à l'aide de son API Web

Le lauréat d'un Emmy® W3C est un organisme international 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 dans le monde entier..

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 de manière uniforme sur tous les navigateurs. Les documentations sur les spécifications du W3C dans w3c.org sont l’une des ressources les plus utiles disponibles au public..

Récemment, le W3C a mis ses données à disposition via une API Web, dont la page de projet se trouve dans Github. L'introduction de cette API à partir de 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 récupérer les données de spécification via l'API W3C. Vous trouverez les différentes demandes que vous pouvez envoyer pour récupérer les données de spécification et d’autres dans https://api.w3.org/doc. Il est également fourni avec un bac à sable pour chaque demande permettant de tester l’API. Clé API.

Voyons d'abord comment obtenir la clé API.

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

Pour ce post, nous allons examiner la demande qui utilise noms abrégés afficher l'URL de la spécification, la description et l'état du document. La demande ressemble à ceci:

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

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

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

Maintenant, concentrons-nous sur le code HTML que nous utiliserons pour afficher les données extraites via l'API. Pour cela, j'ai décidé d'utiliser HTML Template. Les modèles HTML sont utilisés pour contenir du code HTML qui est analysé mais non rendu jusqu'à ce qu'il soit ajouté à la page à l'aide de JavaScript..

 
SPÉCIFICATIONS DU W3C
 
  

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 avec lesquelles nous commencerons:

var shortnames = ['html5', 'selectors4', 'status-battery', 'plein écran'], xmlhttp = new XMLHttpRequest (), w3cSpecsEle = document.querySelector ('# w3cSpecs'), templateEle = document.querySelector ('Template '); 

noms abrégés est un tableau de noms abrégés des spécifications que nous voulons afficher dans notre page Web; si vous voulez trouver le nom court d'une spécification regarder son URL W3C et vous pourrez le voir à la fin.

Cependant, il n'est pas garanti que vous puissiez obtenir tout Des spécifications comme celle-ci; il n'y a pas de liste définitive de noms abrégés et spécifications encore disponibles via l'API.

Boucle à travers le noms abrégés array et publie une requête HTTP pour chacun, et récupère la réponse.

pour (var i = 0; i 
le réponseTexte 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.
 
Vous trouverez ci-dessous un exemple de texte de réponse JSON pour la spécification HTML5 et après le code pour displaySpec. 
 
 
function displaySpec (json) if ('contenu' dans templateEle) / * get Contenu du template * / templateEleContent = templateEle.content; / * ajout du titre de la spécification à l'en-tête h2 * / w3cSpecHeader = templateEleContent.querySelector ('. w3cSpecHeader'); w3cSpecHeader.textContent = json.title; / * ajout d'une URL de spécification au lien * / w3cSpecLink = templateEleContent.querySelector ('. w3cSpecLink'); w3cSpecLink.textContent = json.shortlink; w3cSpecLink.href = json.shortlink; / * ajouter une description de spécification * / w3cSpecDetail = templateEleContent.querySelector ('. w3cDescription'); w3cSpecDetail.innerHTML = json.description; / * ajoute le statut de la spécification et la colorie en fonction de sa valeur * / W3cSpecLatestVerStatus = templateEleContent.querySelector ('mark'); var status = json._links ["latest-version"]. title; W3cSpecLatestVerStatus.textContent = status; switch (status) case 'Recommandation': W3cSpecLatestVerStatus.className = "recommendation"; Pause; case 'Working Draft': W3cSpecLatestVerStatus.className = 'draft'; Pause; case 'Retired': W3cSpecLatestVerStatus.className = 'retiré'; Pause; case 'Recommandation du candidat': W3cSpecLatestVerStatus.className = 'candidateRecommendation'; Pause;  / * ajouter une copie du contenu du modèle au div principal * / w3cSpecsEle.appendChild (document.importNode (templateEleContent, true));  else / * ajoute du code JS pour créer les éléments individuellement * / 
 
if ('contenu' dans templateEle) est de vérifier si le modèle HTML est pris en charge par le navigateur. Dans le cas contraire, créez tous les éléments HTML dans le JS lui-même. Et quand il y a un support, remplissez les éléments HTML qui se trouvent dans le contenu du modèle avec les données respectives de JSON et ajoutez enfin une copie du contenu du modèle au répertoire principal. # w3cSpecs div.
 
C'est tout. Avec un peu de styles CSS, le résultat ressemble à ceci: