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

Il premiato Emmy® W3C è un'organizzazione internazionale 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 W3C Systems Team 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 attraverso 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 pagina del tuo profilo.
3. Fai clic su Nuova chiave API e assegnale un nome per generare la chiave.
4. Quindi, se lo desideri, puoi copiarlo e incollarlo nella casella di testo della chiave API all'inizio della pagina web https://api.w3.org/doc per testare l'API nella sandbox.

Per questo post, esamineremo la richiesta che utilizza i nomi brevi 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 serie di nomi brevi delle specifiche che vogliamo mostrare nella nostra pagina web; se vuoi trovare il nome breve di un look Specification al suo URL W3C e sarai in grado di vederlo alla fine.

Tuttavia, non è garantito che sarai in grado di ottenere tutte le Specifiche come questa; non esiste ancora un elenco definitivo di nomi brevi e specifiche disponibili tramite l'API.

shortnames attraverso l'array di shortnames e posta una richiesta HTTP per ciascuno, e recupera la risposta.

 per (var i = 0; i 
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 la specifica 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 link * / 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) serve a verificare se HTML Template è supportato dal browser, altrimenti, 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 da JSON e infine aggiungi una copia del contenuto di Template al div principale #w3cSpecs .

Questo è tutto. Con un po 'di stile CSS, l'output si presenta così:

5 migliori strumenti per rinominare i nomi dei file in Windows

Nella vita professionale quotidiana, essere in grado di fare una certa azione su un intero gruppo di file o cartelle aggiunge molto alla tua produttività. L'editing di immagini in serie è un buon esempio in questo senso. Allo stesso modo, ci sono strumenti che possono aiutarti a rinominare in batch anche i nomi dei tuoi file.S

(Consigli tecnici e di design)

Costruisci menu di hamburger scorrevoli accessibili con Offcanvas

Il plugin gratuito di Offcanvas è una delle molte risorse per le navigazioni scorrevoli. Puoi trovare un sacco di plugin simili online ma Offcanvas si distingue per alcuni motivi.È una libreria abbastanza leggera e, anche se funziona su jQuery, non è nemmeno difficile da configurare . Questo vale sia per il codice JavaScripts che per il codice HTML, quindi non sarà necessario modificare la navigazione predefinita in alcun modo. Il

(Consigli tecnici e di design)