Hoe W3C-specificatiegegevens worden weergegeven met behulp van de web-API

De met Emmy® bekroonde W3C is een internationale standaardorganisatie voor het World Wide Web. Het creëert nieuwe webstandaarden en herziet ze constant om ze consistent en relevant te houden over de hele wereld.

Browsers en websites zijn in de loop van de tijd standaard compliant geworden, hierdoor kunnen websites uniform worden weergegeven en werken in alle verschillende browsers. Een van de meest bruikbare bronnen die openbaar beschikbaar zijn, zijn de W3C-specificatiedocumentaties in w3c.org.

Onlangs heeft W3C zijn gegevens beschikbaar gesteld via een Web API, waarvan de projectpagina in Github is. De intro van deze API van zijn projectpagina is als volgt:

"In antwoord op de vraag van ontwikkelaars in onze community die willen communiceren met de gegevens van W3C, heeft het W3C Systems Team een ​​web-API ontwikkeld. We maken hierdoor gegevens beschikbaar over specificaties, groepen, organisaties en gebruikers. "

In het bericht van vandaag zien we hoe de specificatiegegevens kunnen worden opgehaald via de W3C API . U kunt de verschillende verzoeken vinden die u kunt posten om de specificatiegegevens en anderen op te halen op https://api.w3.org/doc. Voor elke aanvraag ontvangt u ook een sandbox om de API te testen, maar u hebt een API sleutel.

Laten we eerst eens kijken hoe we de API-sleutel kunnen krijgen .

1. Log in op uw W3C-account of maak er een aan.
2. Ga vervolgens naar API-sleutels beheren op uw profielpagina.
3. Klik op Nieuwe API-sleutel en geef deze een naam om uw sleutel te genereren.
4. Vervolgens kunt u, als u dat wilt, deze kopiëren en plakken in het tekstvak aan de api-toets aan het begin van de webpagina https://api.w3.org/doc om de API in de sandbox te testen.

Voor deze post bekijken we de aanvraag die korte namen gebruikt om de specificatie-URL, beschrijving en documentstatus weer te geven . Het verzoek ziet er als volgt uit:

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

Een HTML5 spec-verzoek is bijvoorbeeld als volgt;

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

Laten we ons nu concentreren op de HTML die we gebruiken om de gegevens weer te geven die via de API zijn opgehaald. Hiervoor heb ik besloten om HTML-sjabloon te gebruiken. HTML-sjablonen worden gebruikt om HTML-code vast te houden die wordt geparseerd maar niet wordt weergegeven totdat ze met JavaScript aan de pagina worden toegevoegd.

 W3C SPEC 

De sjabloon is klaar. Nu naar het JavaScript dat de HTTP-aanvraag doet en de respons JSON-gegevens in HTML weergeeft. Dit is de verzameling algemene variabelen waarmee we beginnen:

 var shortnames = ['html5', 'selectors4', 'battery-status', 'fullscreen'], xmlhttp = new XMLHttpRequest (), w3cSpecsEle = document.querySelector ('# w3cSpecs'), templateEle = document.querySelector ('Template '); 

shortnames is een reeks korte namen van de specificaties die we willen weergeven op onze webpagina; als u de korte naam van een specificatie wilt zoeken naar de W3C-URL ervan, kunt u deze aan het einde bekijken.

Het is echter niet gegarandeerd dat u alle specificaties zoals deze kunt krijgen; er is geen definitieve lijst met shortnames en specificaties die nog beschikbaar zijn via de API.

Loop door de reeks met shortnames en post een HTTP-verzoek voor elk en haal het antwoord op.

 for (var i = 0; i 
De responseText is een JSON-tekenreeks en moet worden geparseerd om het JSON-object te krijgen. displaySpec is de functie die de JSON-gegevens gebruikt en deze in HTML weergeeft.
Hieronder staat de voorbeeld JSON-antwoordtekst voor HTML5-specificatie en na de code voor displaySpec .
 function displaySpec (json) {if ('content' in templateEle) {/ * krijg template-inhoud * / templateEleContent = templateEle.content; / * voeg een spec titel toe aan de h2 header * / w3cSpecHeader = templateEleContent.querySelector ('. w3cSpecHeader'); w3cSpecHeader.textContent = json.title; / * voeg specificatie-URL toe aan de link * / w3cSpecLink = templateEleContent.querySelector ('. w3cSpecLink'); w3cSpecLink.textContent = json.shortlink; w3cSpecLink.href = json.shortlink; / * specificatie toevoegen * / w3cSpecDetail = templateEleContent.querySelector ('. w3cDescription'); w3cSpecDetail.innerHTML = json.description; / * voeg een spec status toe en kleur deze in op basis van zijn waarde * / W3cSpecLatestVerStatus = templateEleContent.querySelector ('mark'); var status = json._links ["latest-version"]. title; W3cSpecLatestVerStatus.textContent = status; switch (status) {case 'Recommendation': W3cSpecLatestVerStatus.className = "aanbeveling"; breken; case 'Working Draft': W3cSpecLatestVerStatus.className = 'concept'; breken; case 'Retired': W3cSpecLatestVerStatus.className = 'gepensioneerd'; breken; case 'Candidate Recommendation': W3cSpecLatestVerStatus.className = 'candidateRecommendation'; breken; } / * voeg een kopie van de inhoud van de sjabloon toe aan de hoofddiv * / w3cSpecsEle.appendChild (document.importNode (templateEleContent, true)); } else {/ * voeg JS-code toe om de elementen individueel te maken * /}} 

if ('content' in templateEle) is om te controleren of HTML-sjabloon wordt ondersteund door de browser, als dat niet het geval is, maakt u alle HTML-elementen in de JS zelf. En wanneer er ondersteuning is, vult u de HTML-elementen in de inhoud van de sjabloon in met de respectieve gegevens van JSON en tenslotte voegt u een kopie van de inhoud van de sjabloon toe aan de #w3cSpecs .

Dat is het. Met een beetje CSS-stijlen ziet de uitvoer er als volgt uit:

6 manieren om Keyword Research als een professional te doen

Keyword-onderzoek is misschien wel de oudste truc van alle SEO-best practices. Welnu, het zou moeten zijn, omdat deze kleine stukjes informatie u het meest degelijke inzicht geven over uw gebruikers, hun trends en eisen.Tegenwoordig zijn veel SEO-marketeers echter begonnen met onderzoek naar zoekwoorden, waarschijnlijk omdat je tegenwoordig geen gebruikers voor je website kunt winnen 'gewoon' door eenvoudig zoekwoordonderzoek

(Technische en ontwerptips)

30 Chrome-uitbreidingen voor betere productiviteit in 2017

Er zijn een aantal productiviteitsapps voor mobiele apparaten en veel productiviteitstools voor pc's. Maar wist u dat er enkele verbluffende Chrome-extensies zijn waarmee u uw productiviteit naar een hoger niveau kunt tillen en waarmee u sneller zaken kunt doen terwijl u gezond blijft?In dit bericht hebben we 30 van de Chrome-extensies met de beste productiviteit geselecteerd om vandaag met u te delen

(Technische en ontwerptips)