Come visualizzare i dati delle specifiche W3C utilizzando la sua API Web

Il premio Emmy® W3C è un'organizzazione internazionale di standard per il World Wide Web. Crea nuovi standard Web e li rivede costantemente per mantenerli coerenti e pertinenti in tutto il mondo.

I browser e i siti Web sono diventati conformi agli standard in misura maggiore nel tempo, questo consente ai siti Web di eseguire il rendering e di funzionare in modo uniforme su tutti i vari browser. Una delle risorse più utili disponibili al pubblico è la documentazione sulle specifiche del W3C in w3c.org.

Recentemente il W3C ha reso i suoi dati disponibili attraverso un'API Web, la cui pagina del progetto è in Github. L'introduzione di questa API dalla sua pagina del progetto è la seguente:

“In risposta alla richiesta da parte degli sviluppatori della nostra comunità di voler interagire con i dati del W3C, il team dei sistemi W3C ha sviluppato un'API Web. Attraverso di esso stiamo mettendo a disposizione dati su specifiche, gruppi, organizzazioni e utenti.”

Nel post di oggi vedremo come recuperare i dati delle specifiche tramite l'API W3C. Troverai le varie richieste che puoi pubblicare per recuperare i dati delle Specifiche e altri in https://api.w3.org/doc, inoltre viene fornito con una sandbox per ogni richiesta per testare l'API, ma avrai bisogno di un Chiave API.

Vediamo prima come ottenere la chiave API.

1. Accedi al tuo account W3C o creane uno.
2. Quindi vai a Gestisci chiavi API nella tua pagina del profilo.
3. Clic Nuova chiave API e dargli un nome per generare la tua chiave.
4. Quindi, se lo desideri, puoi copiarlo e incollarlo nel tasto api casella di testo all'inizio della pagina web https://api.w3.org/doc per testare l'API nella sandbox.

Per questo post, esamineremo la richiesta che usa shortnames per visualizzare l'URL della specifica, la descrizione e lo stato del documento. La richiesta è simile a questa:

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

Ad esempio, una richiesta di specifiche HTML5 sarà come questa;

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

Ora concentriamoci sull'HTML che useremo per visualizzare i dati recuperati tramite l'API. Per questo ho deciso di usare il template HTML. I modelli HTML vengono utilizzati per contenere codice HTML analizzato ma non renderizzato fino a quando non vengono aggiunti alla pagina utilizzando JavaScript.

 
W3C SPEC
 
  

Il modello è pronto. Ora, sul JavaScript che farà la richiesta HTTP e visualizzerà i dati JSON di risposta in HTML. Ecco l'insieme di variabili globali che inizieremo con:

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

shortnames è una matrice di shortnames delle specifiche che vogliamo mostrare nella nostra pagina web; se vuoi trovare il nome corto di una specifica guarda al suo URL W3C e sarai in grado di vederlo alla fine.

Tuttavia, non è garantito che sarai in grado di ottenere tutti Specifiche come questa; non c'è un elenco definitivo di shortnames e specifiche che sono disponibili tramite l'API ancora.

Passare attraverso il shortnames array e inviare una richiesta HTTP per ciascuno, e recuperare la risposta.

per (var i = 0; i 
Il responseText è una stringa JSON e deve essere analizzata per ottenere l'oggetto JSON. displaySpec è la funzione che utilizzerà i dati JSON e la visualizzerà in HTML.
 
Di seguito è riportato il testo di risposta JSON di esempio per le specifiche HTML5 e dopo il codice per displaySpec. 
 
 
function displaySpec (json) if ('content' in templateEle) / * ottiene il contenuto del Template * / templateEleContent = templateEle.content; / * aggiungi il titolo della specifica all'intestazione h2 * / w3cSpecHeader = templateEleContent.querySelector ('. w3cSpecHeader'); w3cSpecHeader.textContent = json.title; / * aggiungi l'URL specifico al collegamento * / w3cSpecLink = templateEleContent.querySelector ('. w3cSpecLink'); w3cSpecLink.textContent = json.shortlink; w3cSpecLink.href = json.shortlink; / * aggiungi descrizione descrizione * / w3cSpecDetail = templateEleContent.querySelector ('. w3cDescription'); w3cSpecDetail.innerHTML = json.description; / * aggiungi lo stato di una specifica e colora in base al suo valore * / W3cSpecLatestVerStatus = templateEleContent.querySelector ('mark'); var status = json._links ["ultima versione"]. title; W3cSpecLatestVerStatus.textContent = status; switch (status) case 'Recommendation': W3cSpecLatestVerStatus.className = "raccomandazione"; rompere; caso 'Working Draft': W3cSpecLatestVerStatus.className = 'draft'; rompere; caso 'Ritirato': W3cSpecLatestVerStatus.className = 'ritirato'; rompere; caso "Candidate Recommendation": W3cSpecLatestVerStatus.className = 'candidateRecommendation'; rompere;  / * aggiungi una copia del contenuto del Template al div principale * / w3cSpecsEle.appendChild (document.importNode (templateEleContent, true));  else / * aggiungi il codice JS per creare gli elementi individualmente * / 
 
if ('content' in templateEle) è controllare se il modello HTML è supportato dal browser, se non lo è, crea tutti gli elementi HTML nello stesso JS. E quando c'è supporto, riempi gli elementi HTML che si trovano all'interno del contenuto del Template con i rispettivi dati di JSON e infine aggiungi una copia del contenuto di Template al main # w3cSpecs div.
 
Questo è tutto. Con un po 'di stile CSS, l'output si presenta così: