Cómo visualizar datos de especificación W3C usando su API web

El premio Emmy® ganador W3C es una organización internacional de estándares para la World Wide Web. Crea nuevos estándares web y los revisa constantemente para mantenerlos consistentes y relevantes en todo el mundo.

Los navegadores y sitios web se han convertido en compatibles con el estándar en mayor medida con el tiempo, esto permite que los sitios web se representen y funcionen de manera uniforme en todos los distintos navegadores. Uno de los recursos más útiles públicamente disponibles es la documentación de la Especificación W3C en w3c.org.

Recientemente, el W3C hizo que sus datos estuvieran disponibles a través de una API web, cuya página del proyecto se encuentra en Github. La introducción de esta API desde su página de proyecto es la siguiente:

“En respuesta a la demanda de los desarrolladores de nuestra comunidad que desean interactuar con los datos de W3C, el Equipo de Sistemas de W3C ha desarrollado una API web. A través de él ponemos a su disposición datos sobre Especificaciones, Grupos, Organizaciones y Usuarios..”

En el post de hoy ya veremos. cómo obtener los datos de especificación a través de la API W3C. Encontrará las diversas solicitudes que puede publicar para obtener los datos de la Especificación y otros en https://api.w3.org/doc, también viene con un sandbox para cada solicitud para probar la API, pero necesitará un Clave API.

Veamos primero cómo obtener la clave API.

1. Inicie sesión en su cuenta de W3C o cree una.
2. Luego ve a Gestionar claves API en tu página de perfil.
3. Hacer clic Nueva clave API Y dale un nombre para generar tu clave..
4. Luego, si lo desea, puede copiarlo y pegarlo en el Clave API Cuadro de texto al principio de la página web https://api.w3.org/doc para probar la API en el recinto de seguridad.

Para este post, vamos a ver en la solicitud que utiliza nombres cortos para mostrar la URL de la especificación, la descripción y el estado del documento. La solicitud se ve así:

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

Por ejemplo, una solicitud de especificación de HTML5 será así;

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

Ahora, concentrémonos en el HTML que usaremos para mostrar los datos obtenidos a través de la API. Para esto he decidido usar plantilla HTML. Las plantillas HTML se utilizan para contener el código HTML que se analiza pero no se procesa hasta que se agregan a la página con JavaScript.

 
ESPECIFICACIONES W3C
 
  

La plantilla está lista. Ahora, en el JavaScript que realizará la solicitud HTTP y mostrará los datos JSON de respuesta en HTML. Aquí está el conjunto de variables globales con las que comenzaremos:

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

nombres cortos es una matriz de nombres cortos de las especificaciones que queremos mostrar en nuestra página web; si quieres encontrar el nombre corto de una Especificación mire su URL W3C y podrá verla al final.

Sin embargo, no está garantizado que pueda obtener todos Especificaciones como esta; no hay una lista definitiva de nombres cortos y especificaciones que están disponibles a través de la API todavía.

Bucle a través de la nombres cortos Arregle y publique una solicitud HTTP para cada uno, y obtenga la respuesta.

para (var i = 0; i 
los responseText es una cadena JSON y debe analizarse para obtener el objeto JSON. displaySpec es la función que utilizará los datos JSON y los mostrará en HTML.
 
A continuación se muestra el texto de respuesta JSON de ejemplo para la especificación HTML5 y después del código para displaySpec. 
 
 
función displaySpec (json) if ('content' en templateEle) / * obtiene el contenido de Template * / templateEleContent = templateEle.content; / * agrega el título de la especificación al encabezado h2 * / w3cSpecHeader = templateEleContent.querySelector ('. w3cSpecHeader'); w3cSpecHeader.textContent = json.title; / * agrega la URL de la especificación al enlace * / w3cSpecLink = templateEleContent.querySelector ('. w3cSpecLink'); w3cSpecLink.textContent = json.shortlink; w3cSpecLink.href = json.shortlink; / * agregar descripción de la especificación * / w3cSpecDetail = templateEleContent.querySelector ('. w3cDescription'); w3cSpecDetail.innerHTML = json.description; / * agrega el estado de la especificación y coloréalo según su valor * / W3cSpecLatestVerStatus = templateEleContent.querySelector ('mark'); var status = json._links ["latest-version"]. title; W3cSpecLatestVerStatus.textContent = estado; switch (estado) caso 'Recomendación': W3cSpecLatestVerStatus.className = "recomendación"; descanso; caso 'Borrador de trabajo': W3cSpecLatestVerStatus.className = 'draft'; descanso; caso 'Retired': W3cSpecLatestVerStatus.className = 'retired'; descanso; caso 'Recomendación del candidato': W3cSpecLatestVerStatus.className = 'candidatoRecommendation'; descanso;  / * agregar una copia del contenido de la Plantilla a la división principal * / w3cSpecsEle.appendChild (document.importNode (templateEleContent, true));  else / * agregar código JS para crear los elementos individualmente * / 
 
if ('contenido' en templateEle) es para verificar si la plantilla HTML es compatible con el navegador, si no lo es, cree todos los elementos HTML en el propio JS. Y cuando haya soporte, complete los elementos HTML que están dentro del contenido de la Plantilla con los datos respectivos de JSON y, finalmente, agregue una copia del contenido de la Plantilla a la página principal. # w3cEspecificaciones div.
 
Eso es. Con un poco de estilos CSS, la salida se ve así: