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:

Erstellen eines lokalen Servers, auf den von einer öffentlichen Adresse aus zugegriffen werden kann

Ich entwickle seit fast 10 Jahren Websites und eines meiner größten Probleme war immer die lokale Entwicklung und die Synchronisierung lokaler Websites mit Live-Tests. Die Verwendung einer lokalen Umgebung ist großartig, weil sie schnell ist, aber aus der Ferne nicht sichtbar ist und die Übertragung irgendwo einen Datenbankbetrieb, das Umbenennen von Tabellen, Werten usw. be

(Tech- und Design-Tipps)

Testen Sie Ihr Kommandozeilenwissen mit der CMD Challenge

Wir haben darüber gesprochen, wie wichtig es ist , die Befehlszeile zu lernen, und sie ist jetzt wichtiger als je zuvor. Aber es ist auch ein schwieriges Thema, um zu brechen, mit einer steilen Lernkurve . Wenn du dir nicht sicher bist, wo du anfangen sollst oder wie viel du lernen musst, probiere die Command Line Challenge .

(Tech- und Design-Tipps)