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:

Waze nå tillater tilpassede stemmeveiledninger - Slik gjør du det

Longtime Waze-brukere er sannsynligvis godt klar over at navigasjonsappen kommer med et stort antall Voice Direction-alternativer, alt fra standard til en og annen berømthetstemme. Fra dette punktet fremover vil du også kunne legge til enda en stemme til Waze-alternativet - ditt eget!I Wazes nyeste oppdatering kommer appen nå med en Voice Recorder-funksjon som lar deg ta opp dine egne stemmeanvisninger. I

(Tekniske og design tips)

50 Best Website Interface Photoshop Tutorials

Photoshop er et flott verktøy for å designe et nettsted, men det er også svært komplisert. Det er alltid nye designtrender og teknikker som kommer frem. Men takk til de sjenerøse designere som deler sin teknikk på nettet, kan du enkelt pusse opp dine Photoshop-ferdigheter med noen nyttige opplæringsprogrammer .Det sp

(Tekniske og design tips)