Como exibir dados de especificação do W3C usando sua API da Web

O vencedor do prêmio Emmy® W3C é uma organização internacional de padrões para a World Wide Web. Cria novos padrões da Web e os revisa constantemente para mantê-los consistentes e relevantes em todo o mundo.

Navegadores e sites tornaram-se padrão em conformidade com o tempo, o que permite que os sites sejam renderizados e funcionem uniformemente em todos os navegadores. Um dos recursos mais úteis disponíveis publicamente é o W3C Specification documentations in w3c.org.

Recentemente, o W3C disponibilizou seus dados por meio de uma API da Web, cuja página do projeto está no Github. A introdução desta API da página do projeto é a seguinte:

“Em resposta à demanda de desenvolvedores em nossa comunidade que desejam interagir com os dados do W3C, a equipe de sistemas do W3C desenvolveu uma API da Web. Por meio dele, disponibilizamos dados sobre especificações, grupos, organizações e usuários.”

No post de hoje vamos ver como buscar os dados de especificação por meio da API do W3C. Você encontrará as várias solicitações que pode postar para buscar os dados da Especificação e outras em https://api.w3.org/doc, ele também vem com um sandbox para cada solicitação para testar a API, mas você precisará de um Chave API.

Vamos primeiro ver como obter a chave da API.

1. Entre na sua conta W3C ou crie uma.
2. Então vá para Gerenciar chaves de API na sua página de perfil.
3. Clique Nova chave de API e dê um nome para gerar sua chave.
4. Então, se desejar, você pode copiá-lo e colá-lo no Chave API caixa de texto no início da página da Web https://api.w3.org/doc para testar a API na sandbox.

Para este post, vamos dar uma olhada o pedido que usa nomes curtos para exibir o URL de especificação, descrição e status do documento. A solicitação é assim:

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

Por exemplo, uma solicitação de especificação HTML5 será assim;

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

Agora, vamos nos concentrar no HTML que usaremos para exibir os dados buscados pela API. Para isso, decidi usar o modelo HTML. Os modelos HTML são usados ​​para manter o código HTML que é analisado, mas não renderizado, até que eles sejam adicionados à página usando JavaScript.

 
ESPECIFICAÇÕES DO W3C
 
  

O modelo está pronto. Agora, no JavaScript que estará fazendo a solicitação HTTP e exibindo os dados JSON de resposta em HTML. Aqui está o conjunto de variáveis ​​globais com as quais começaremos:

var shortnames = ['html5', 'selectors4', 'status da bateria', 'tela inteira'], xmlhttp = new XMLHttpRequest (), w3cSpecsEle = document.querySelector ('# w3cSpecs'), templateEle = document.querySelector ('Template '); 

nomes curtos é uma matriz de nomes curtos das Especificações que queremos exibir em nossa página da Web; se você quiser encontrar o nome curto de uma especificação olhar para o seu URL W3C e você será capaz de vê-lo no final.

No entanto, não é garantido que você será capaz de obter todos Especificações como esta; não há uma lista definitiva de nomes curtos e Especificações que estão disponíveis através da API ainda.

Loop através do nomes curtos matriz e postar uma solicitação HTTP para cada e buscar a resposta.

para (var i = 0; i 
o responseText é uma string JSON e precisa ser analisada para obter o objeto JSON. displaySpec é a função que usará os dados JSON e os exibirá em HTML.
 
Abaixo está o texto da resposta JSON de amostra para a especificação HTML5 e depois do código para displaySpec. 
 
 
function displaySpec (json) if ('conteúdo' no templateEle) / * obtém o conteúdo do Template * / templateEleContent = templateEle.content; / * adicionar título de especificação ao cabeçalho h2 * / w3cSpecHeader = templateEleContent.querySelector ('. w3cSpecHeader'); w3cSpecHeader.textContent = json.title; / * adicionar URL de especificação ao link * / w3cSpecLink = templateEleContent.querySelector ('. w3cSpecLink'); w3cSpecLink.textContent = json.shortlink; w3cSpecLink.href = json.shortlink; / * add descrição da especificação * / w3cSpecDetail = templateEleContent.querySelector ('. w3cDescription'); w3cSpecDetail.innerHTML = json.description; / * adicionar status de especificação e colori-lo com base em seu valor * / W3cSpecLatestVerStatus = templateEleContent.querySelector ('mark'); var status = json._links ["última versão"]. title; W3cSpecLatestVerStatus.textContent = status; switch (status) case 'Recommendation': W3cSpecLatestVerStatus.className = "recomendação"; pausa; case 'Rascunho de trabalho': W3cSpecLatestVerStatus.className = 'rascunho'; pausa; case 'Retired': W3cSpecLatestVerStatus.className = 'aposentado'; pausa; case 'Candidate Recommendation': W3cSpecLatestVerStatus.className = 'candidateRecommendation'; pausa;  / * adicione uma cópia do conteúdo do Template ao diretório principal * / w3cSpecsEle.appendChild (document.importNode (templateEleContent, true));  else / * adiciona código JS para criar os elementos individualmente * / 
 
if ('conteúdo' no templateEle) é verificar se o modelo HTML é suportado pelo navegador, se não for, crie todos os elementos HTML no próprio JS. E quando houver suporte, preencha os elementos HTML que estão dentro do conteúdo do Modelo com os respectivos dados do JSON e, finalmente, anexe uma cópia do conteúdo do Modelo ao principal # w3cSpecs div.
 
É isso aí. Com um pouco de estilo CSS, a saída é assim: