Slik viser du W3C-spesifikasjonsdata ved hjelp av web API

Emmy®-prisbelønte W3C er en internasjonal standardorganisasjon for World Wide Web. Det skaper nye webstandarder og reviderer dem hele tiden for å holde dem konsistente og relevante over hele verden.

Nettlesere og nettsteder har blitt standard kompatible i større grad med tiden, slik at nettsteder kan gjengi og jobbe jevnt over alle de forskjellige nettleserne. En av de mest nyttige ressursene som er tilgjengelig for publikum er W3C-spesifikasjonsdokumentasjonen i w3c.org.

Nylig gjorde W3C sine data tilgjengelig via en web-API, hvor prosjektsiden er i Github. Innføringen av denne API-en fra prosjektsiden er som følger:

"Som svar på etterspørsel fra utviklere i vårt fellesskap som ønsker å samhandle med W3Cs data, har W3C Systems Team utviklet en Web API. Gjennom det gjør vi tilgjengelige data om spesifikasjoner, grupper, organisasjoner og brukere. "

I dagens innlegg ser vi hvordan du henter spesifikasjonsdataene via W3C API . Du finner de ulike forespørslene du kan legge inn for å hente spesifikasjonsdataene og andre på https://api.w3.org/doc. Den kommer også med en sandkasse for hver forespørsel for å teste API, men du trenger en API-nøkkel.

La oss først se hvordan du får API-nøkkelen .

1. Logg inn på W3C-kontoen din eller opprett en.
2. Deretter går du til Administrer API-nøkler på profilsiden din.
3. Klikk på Ny API-nøkkel og gi den et navn for å generere nøkkelen.
4. Deretter kan du, hvis du ønsker det, kopiere og lime det inn i api-tastaturboksen på begynnelsen av nettsiden https://api.w3.org/doc for å teste API i sandkassen.

For dette innlegget vil vi se på forespørselen som bruker kortnavn for å vise spesifiseringsadressen, beskrivelse og dokumentstatus . Forespørselen ser slik ut:

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

For eksempel vil en HTML5-spesifikasjonsforespørsel være slik:

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

La oss nå fokusere på HTML-en som vi skal bruke for å vise dataene hentet gjennom API-en. For dette har jeg bestemt meg for å bruke HTML Template. HTML-maler brukes til å holde HTML-kode som blir analysert, men ikke gjengitt før de er lagt til siden ved hjelp av JavaScript.

 W3C SPESIFIKASJONER 

Malen er klar. Nå, på JavaScript som vil gjøre HTTP-forespørselen og vise svaret JSON-data i HTML. Her er settet med globale variabler vi starter med:

 var shortnames = ['html5', 'selectors4', 'batteristatus', 'fullskjerm'], xmlhttp = ny XMLHttpRequest (), w3cSpecsEle = document.querySelector ('# w3cSpecs'), templateEle = document.querySelector '); 

shortnames er en rekke shortnames av spesifikasjonene vi vil vise i vår nettside; Hvis du vil finne kortnavnet til en spesifikasjon, se på W3C-nettadressen, og du vil kunne se den på slutten.

Det er imidlertid ikke garantert at du vil kunne få alle spesifikasjoner som dette; Det er ikke en endelig liste over kortnavn og spesifikasjoner som er tilgjengelige via APIen ennå.

Gå gjennom shortnames og legg inn en HTTP-forespørsel for hver, og hent svaret.

 for (var i = 0; i 
responseText er en JSON-streng og må analyseres for å få JSON-objektet. displaySpec er funksjonen som vil bruke JSON dataene og vise den i HTML.
Nedenfor er eksemplet JSON svartekst for HTML5-spesifikasjon og etter koden for displaySpec .
 funksjonsvisningSpec (json) {if ('innhold' i templateEle) {/ * få malens innhold * / templateEleContent = templateEle.content; / * legg til spesiell tittel til h2 header * / w3cSpecHeader = templateEleContent.querySelector ('.w3cSpecHeader'); w3cSpecHeader.textContent = json.title; / * legg til spesifikke URL til lenken * / w3cSpecLink = templateEleContent.querySelector ('.w3cSpecLink'); w3cSpecLink.textContent = json.shortlink; w3cSpecLink.href = json.shortlink; / * legg til spesifikasjonsbeskrivelse * / w3cSpecDetail = templateEleContent.querySelector ('.w3cDescription'); w3cSpecDetail.innerHTML = json.description; / * legg til spesifikasjonsstatus og farge den basert på dens verdi * / W3cSpecLatestVerStatus = templateEleContent.querySelector ('mark'); var status = json._links ["siste versjon"]. tittel; W3cSpecLatestVerStatus.textContent = status; bytte (status) {case 'Anbefaling': W3cSpecLatestVerStatus.className = "recommendation"; gå i stykker; tilfelle 'Working Draft': W3cSpecLatestVerStatus.className = 'utkast'; gå i stykker; tilfelle 'Pensjonert': W3cSpecLatestVerStatus.className = 'pensjonert'; gå i stykker; case 'Kandidatanbefaling': W3cSpecLatestVerStatus.className = 'candidateRecommendation'; gå i stykker; } / * legg til kopi av malens innhold til hoved div * / w3cSpecsEle.appendChild (document.importNode (templateEleContent, true)); } else {/ * legg til JS kode for å lage elementene individuelt * /}} 

if ('content' in templateEle) er å kontrollere om HTML-mal støttes av nettleseren, hvis ikke, lag alle HTML-elementene i selve JS. Og når det er støtte, fyll ut HTML-elementene som er inne i malens innhold med de respektive dataene fra JSON, og til slutt legg til en kopi av #w3cSpecs innhold til hovedmenyen #w3cSpecs div.

Det er det. Med litt CSS stylings ser utgangen slik ut:

Kode i skyen med koding

Måten vi utvikler og kodes eksternt, har ikke endret seg mye de siste årene . Tross alt er selve kodesegmentet noe som krever oppmerksomhet og en viss følelse av ensomhet for å kunne klare seg godt. Men hva om du sitter fast og vil ha en mer personlig måte å overvinne et bestemt kodende problem på?Koding

(Tekniske og design tips)

10 ting vi vil se i Windows 9

La oss innse virkeligheten, det er bare ingen måte at Microsoft går tilbake til det gamle "klassiske" Windows-utseendet som vi har blitt vant til. Metro-brukergrensesnittet er her for å bli og vil trolig bli forbedret når Windows 9 blir utgitt i 2015.Selvfølgelig ser vi frem til flere nye funksjoner, og i dette innlegget navngir vi 10 ting vi vil se i Windows 9 .I li

(Tekniske og design tips)