So zeigen Sie W3C-Spezifikationsdaten mithilfe der Web-API an

Das mit dem Emmy® Award ausgezeichnete W3C ist eine internationale Standardisierungsorganisation für das World Wide Web. Es erstellt neue Webstandards und überarbeitet sie ständig, um sie weltweit konsistent und relevant zu halten.

Browser und Websites sind im Laufe der Zeit standardgemäß standardkonformer geworden, so dass Websites einheitlich in allen Browsern dargestellt und bearbeitet werden können. Eine der nützlichsten Ressourcen, die öffentlich verfügbar sind, sind die W3C Specification Dokumentationen in w3c.org.

Kürzlich stellte W3C seine Daten über eine Web-API zur Verfügung, deren Projektseite in Github ist. Das Intro dieser API von seiner Projektseite ist wie folgt:

"Als Reaktion auf die Nachfrage von Entwicklern in unserer Community, die mit W3C-Daten interagieren möchten, hat das W3C-Systemteam eine Web-API entwickelt. Dadurch stellen wir Daten zu Spezifikationen, Gruppen, Organisationen und Benutzern zur Verfügung. "

Im heutigen Post werden wir sehen, wie man die Spezifikationsdaten über die W3C API holt . Sie finden die verschiedenen Anforderungen, die Sie veröffentlichen können, um die Specification-Daten und andere in https://api.w3.org/doc abzurufen. Sie enthält außerdem eine Sandbox für jede Anfrage zum Testen der API, aber Sie benötigen eine API-Schlüssel.

Lassen Sie uns zunächst sehen, wie Sie den API-Schlüssel erhalten .

1. Melden Sie sich bei Ihrem W3C-Konto an oder erstellen Sie ein Konto.
2. Gehen Sie dann auf Ihrer Profilseite zu API-Schlüssel verwalten .
3. Klicken Sie auf Neuer API-Schlüssel, und geben Sie ihm einen Namen, um den Schlüssel zu generieren.
4. Wenn Sie möchten, können Sie sie in das api-Schlüssel- Textfeld am Anfang der Webseite https://api.w3.org/doc kopieren und einfügen, um die API in der Sandbox zu testen.

Für diesen Beitrag werden wir uns die Anfrage ansehen , die Kurznamen verwendet, um die Spezifikations-URL, die Beschreibung und den Dokumentstatus anzuzeigen . Die Anfrage sieht folgendermaßen aus:

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

Zum Beispiel wird eine HTML5-Spezifikationsanfrage so aussehen;

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

Konzentrieren wir uns jetzt auf den HTML-Code, den wir verwenden werden, um die über die API abgerufenen Daten anzuzeigen. Dafür habe ich mich entschieden, HTML Template zu verwenden. HTML-Vorlagen werden für HTML-Code verwendet, der geparst, aber nicht gerendert wird, bis sie der Seite mithilfe von JavaScript hinzugefügt werden.

 W3C-Angaben 

Die Vorlage ist fertig. Nun zu dem JavaScript, das die HTTP-Anfrage erstellt und die Antwort-JSON-Daten in HTML anzeigt. Hier sind die globalen Variablen, mit denen wir beginnen:

 var Kurznamen = ['html5', 'selectors4', 'Batteriestatus', 'Vollbild'], xmlhttp = new XMLHttpRequest (), w3cSpecsEle = document.querySelector ('# w3cSpecs'), templateEle = document.querySelector ('Vorlage "); 

shortnames ist ein Array von Kurznamen der Spezifikationen, die wir auf unserer Webseite anzeigen möchten; Wenn Sie den Kurznamen einer Spezifikation finden möchten, schauen Sie sich die W3C URL an und Sie werden sie am Ende sehen können.

Es ist jedoch nicht garantiert, dass Sie alle Spezifikationen erhalten können. Es gibt keine endgültige Liste von Kurznamen und Spezifikationen, die über die API noch verfügbar sind.

shortnames eine Schleife durch das Array mit den shortnames durch, und shortnames für jede eine HTTP-Anforderung, und rufen Sie die Antwort ab.

 für (var i = 0; i 
Der responseText ist eine JSON-Zeichenfolge und muss analysiert werden, um das JSON-Objekt abzurufen. displaySpec ist die Funktion, die die JSON-Daten verwendet und sie in HTML anzeigt.
Im Folgenden finden Sie den Beispiel-JSON-Antworttext für die HTML5-Spezifikation und den Code für displaySpec .
 Funktion displaySpec (json) {if ('content' in templateEle) {/ * get Template-Inhalt * / templateEleContent = templateEle.content; / * Titel zu h2-Header hinzufügen * / w3cSpecHeader = templateEleContent.querySelector ('. w3cSpecHeader'); w3cSpecHeader.textContent = json.title; / * Spec-URL zum Link hinzufügen * / w3cSpecLink = templateEleContent.querySelector ('. w3cSpecLink'); w3cSpecLink.textContent = json.shortlink; w3cSpecLink.href = json.shortlink; / * Spezifikationsbeschreibung hinzufügen * / w3cSpecDetail = templateEleContent.querySelector ('. w3cDescription'); w3cSpecDetail.innerHTML = json.description; / * füge den Spezifikationsstatus hinzu und färbe ihn basierend auf seinem Wert * / W3cSpecLatestVerStatus = templateEleContent.querySelector ('mark'); var status = json._links ["letzte Version"]. title; W3cSpecLatestVerStatus.textContent = status; switch (status) {case 'Empfehlung': W3cSpecLatestVerStatus.className = "recommendation"; Unterbrechung; Fall 'Arbeitsentwurf': W3cSpecLatestVerStatus.className = 'Entwurf'; Unterbrechung; Fall 'Retired': W3cSpecLatestVerStatus.className = 'retired'; Unterbrechung; Fall 'Candidate Recommendation': W3cSpecLatestVerStatus.className = 'candidateRecommendation'; Unterbrechung; } / * Kopiere den Inhalt der Vorlage zum Hauptdiv * / w3cSpecsEle.appendChild (document.importNode (templateEleContent, true)); } else {/ * JS-Code hinzufügen, um die Elemente einzeln zu erstellen * /}} 

if ('content' in templateEle) soll prüfen, ob HTML Template vom Browser unterstützt wird. Wenn dies nicht der Fall ist, erstellen Sie alle HTML Elemente im JS selbst. Wenn es Unterstützung gibt, füllen Sie die HTML-Elemente, die sich im Inhalt der Vorlage befinden, mit den entsprechenden Daten aus JSON und #w3cSpecs schließlich eine Kopie des Inhalts der Vorlage an das #w3cSpecs . #w3cSpecs .

Das ist es. Mit ein wenig CSS-Styles sieht die Ausgabe so aus:

Fügen Sie mit Butns.css vordefinierte Schaltflächen zu Ihrer Site hinzu

Front-End-Frameworks wie Bootstrap haben ihre eigenen Button-Stile, aber sie haben normalerweise nicht viel Abwechslung .Die kostenlose Butns-Bibliothek bietet eine Vielzahl von benutzerdefinierten Schaltflächenstilen, ohne dass das gesamte Framework angehängt wird. Dies ist perfekt für Entwickler, die bereits ein benutzerdefiniertes Seitendesign haben, sich aber nicht mit dem Erstellen eigener Schaltflächenstile befassen möchten.Sie

(Tech- und Design-Tipps)

Google Rich Cards - Verbessern Sie Ihre Suchergebnisse für höhere Klickraten und Conversions

Google Rich Cards wurde am 17. Mai 2016 durch ein neues Markup-Format eingeführt, mit dem Inhalte (Filme und Rezepte ab sofort) auf attraktive und visuell ansprechende Weise angezeigt werden können. Das Hauptziel ist es, optisch ansprechendere Suchergebnisse für Nutzer bereitzustellen.Die Ankündigung von Google soll die Web-Community über ein Upgrade für das aktuelle Rich Snippets-Format informieren, das in den meisten organischen "mobilen Suchergebnissen" für Filme und Rezepte in einer überarbeiteten Struktur, offiziell als Rich Cards bezeichnet, weit verbreitet ist .Der ers

(Tech- und Design-Tipps)