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:

Bygg din egen sidescrolling-effekt med Roll.js

Du kan finne dusinvis av rullende biblioteker over hele nettet. De fleste er skrevet i JavaScript og har egne effekter du kan restylle for enkle sidelayouter, on-scroll animasjoner, og så mye mer.Men hva med å kode dine egne rullende effekter ? Eller hva om du bare vil ha en enkel måte å spore hvor langt nedover siden har en bruker rullet?Rol

(Tekniske og design tips)

10 lette alternativer til Bootstrap & Foundation

Å velge riktig rammeverk som passer perfekt til prosjektene dine, kan være litt overveldende - det er mye å velge mellom. Kanskje vil du gå med populære valg som Bootstrap eller Foundation, men hvis nettstedet ditt skal være ganske enkelt, trenger du ikke de fleste byggeklossene og materialene som er inkludert i standardpakken.Den g

(Tekniske og design tips)