Cómo mostrar datos de especificación W3C utilizando su API web

El galardonado W3C de Emmy® es una organización de estándares internacionales 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 los sitios web se han convertido en estándar conforme en mayor medida con el tiempo, esto permite que los sitios web rindan y funcionen de manera uniforme en todos los navegadores. Uno de los recursos más útiles a disposición del público es la documentación del W3C Specification en w3c.org.

Recientemente, W3C hizo que sus datos estuvieran disponibles a través de una API web, cuya página de proyecto está 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 del W3C, el equipo de sistemas del W3C ha desarrollado una API web. A través de él, estamos poniendo a disposición datos sobre Especificaciones, Grupos, Organizaciones y Usuarios ".

En la publicación de hoy, veremos cómo obtener los datos de la 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 entorno limitado para cada solicitud para probar la API, pero necesitará una Clave API.

Veamos primero cómo obtener la clave API .

1. Inicie sesión en su cuenta de W3C o cree una.
2. Luego vaya a Administrar claves de API en su página de perfil.
3. Haga clic en Nueva clave de API y asígnele un nombre para generar su clave.
4. Luego, si lo desea, puede copiarlo y pegarlo en el cuadro de texto de la clave de la API al comienzo de la página web https://api.w3.org/doc para probar la API en la caja de arena.

Para esta publicación, veremos la solicitud que utiliza nombres cortos para mostrar la URL de 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 HTML5 será así;

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

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

 W3C SPECS 

La plantilla está lista. Ahora, en el JavaScript que hará la solicitud HTTP y mostrando 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 '); 

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

Sin embargo, no se garantiza que pueda obtener todas las especificaciones de esta manera; no hay una lista definitiva de nombres cortos y especificaciones que están disponibles a través de la API todavía.

shortnames por la matriz de shortnames y publica una solicitud HTTP para cada uno, y busca la respuesta.

 para (var i = 0; i 
El responseText es una cadena JSON y debe analizarse para obtener el objeto JSON. displaySpec es la función que usará los datos JSON y los mostrará en HTML.
A continuación se muestra el texto de respuesta JSON de muestra para la Especificación HTML5 y después del código para displaySpec .
 function displaySpec (json) {if ('content' in templateEle) {/ * get Contenido de la plantilla * / templateEleContent = templateEle.content; / * agregar título de especificación a h2 header * / w3cSpecHeader = templateEleContent.querySelector ('. w3cSpecHeader'); w3cSpecHeader.textContent = json.title; / * agregar URL de especificación al enlace * / w3cSpecLink = templateEleContent.querySelector ('. w3cSpecLink'); w3cSpecLink.textContent = json.shortlink; w3cSpecLink.href = json.shortlink; / * añadir la descripción de la especificación * / w3cSpecDetail = templateEleContent.querySelector ('. w3cDescription'); w3cSpecDetail.innerHTML = json.description; / * agrega el estado de la especificación y el color en función de su valor * / W3cSpecLatestVerStatus = templateEleContent.querySelector ('mark'); var status = json._links ["latest-version"]. title; W3cSpecLatestVerStatus.textContent = estado; switch (estado) {case 'Recommendation': W3cSpecLatestVerStatus.className = "recomendación"; descanso; caso 'Working Draft': W3cSpecLatestVerStatus.className = 'borrador'; descanso; caso 'Jubilado': W3cSpecLatestVerStatus.className = 'retirado'; descanso; case 'Candidate Recommendation': W3cSpecLatestVerStatus.className = 'candidateRecommendation'; descanso; } / * agregue una copia del contenido de la plantilla al div * / w3cSpecsEle.appendChild principal (document.importNode (templateEleContent, true)); } else {/ * agregar código JS para crear los elementos individualmente * /}} 

if ('content' in templateEle) es para comprobar si HTML Template es compatible con el navegador, si no lo es, crea todos los elementos HTML en el JS. Y cuando hay soporte, complete los elementos HTML que se encuentran dentro del contenido de la Plantilla con los datos respectivos de JSON y, finalmente, adjunte una copia del contenido de la #w3cSpecs div #w3cSpecs principal.

Eso es. Con un poco de estilos de CSS, la salida se ve así:

10 plugins de WordPress para crear sitios web con capacidad de respuesta móvil

Hoy en día puede usar un plugin de WordPress para crear páginas de aterrizaje, personalizar su página de inicio de sesión, adoptar autenticación de dos factores o incluso descubrir cómo optimizar su sitio para usted con inteligencia artificial. En esta publicación, vamos a agregar otro elemento a esa lista, que le ofrece 10 complementos para crear blogs que respondan a los dispositivos móviles por usted.No es n

(Consejos de tecnología y diseño)

15 Regalos de San Valentín que puede obtener por menos de $ 25

Atascado pensando en el mejor regalo para dar para el Día de San Valentín ? Las opciones habituales incluyen ramos de flores, chocolate o joyas, a veces una cena cara en un restaurante de alta gama o una cena casera de "trabajo de amor". Todos y cada uno de ellos pueden fácilmente devolverle un par de cientos de dólares .No

(Consejos de tecnología y diseño)