de.hideout-lastation.com
Paradies Für Designer Und Entwickler


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:

8 Windows-Gruppenrichtlinien-Tweaks, die jeder Admin kennen sollte

8 Windows-Gruppenrichtlinien-Tweaks, die jeder Admin kennen sollte

Windows-Gruppenrichtlinien sind ein leistungsstarkes Tool zum Konfigurieren vieler Windows-Aspekte. Die meisten Optimierungen zielen auf PC-Administratoren ab, die Standardkonten überwachen und steuern. Wenn Sie PCs in einer Unternehmensumgebung verwalten oder mehrere Konten zu Hause verwalten, sollten Sie unbedingt die Windows-Gruppenrichtlinie nutzen, um die PC-Nutzung von Mitarbeitern und Familien zu steuern.

(Tech- und Design-Tipps)

LinealsGuides.js - Photoshop Style Lineale und Guides im Web

LinealsGuides.js - Photoshop Style Lineale und Guides im Web

Eine der besten Eigenschaften von Photoshop sind die einfach zu verwendenden Hilfslinien, die aus den Linealen gezogen werden können. Diese Anleitungen können den Entwurfsprozess erheblich erleichtern, wenn es darum geht, einen Gegenstand richtig zu positionieren und die Balance zu finden.Zu unserer großen Freude hat Mark Rolich diese spezielle Funktion für die Verwendung im Web implementiert. Er

(Tech- und Design-Tipps)