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ì:

Versione Freebie: Set di icone Educons (PSD incluso)

Per ringraziare i nostri lettori e la community in generale, siamo lieti di rilasciare un altro omaggio: Educons, un'icona con 15 icone correlate all'istruzione di qualità . Queste icone sono disponibili in formato PNG in 2 diverse dimensioni, 128 × 128 e 64 × 64 pixel, oltre a file PSD di Photoshop sovrapposti per ciascuna icona.Qu

(Consigli tecnici e di design)

11 Innovazioni mobili di cui abbiamo bisogno più di telefoni flessibili

Con oltre 1 miliardo di utenti di smartphone in tutto il mondo, non sorprende vedere che i produttori stanno facendo del loro meglio per produrre ancora più innovazioni tecnologiche per il mercato della telefonia mobile. Una di queste innovazioni introdotte di recente è il telefono flessibile. LG G Flex e Samsung Galaxy Round sono stati i primi telefoni a portare questa innovazione alle masse.

(Consigli tecnici e di design)