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í:

Cómo aumentar su productividad con la aplicación de buzón

Mailbox estaba en versión beta a principios de 2013 y alcanzó un gran éxito casi de la noche a la mañana. ¡Su lista de espera tenía cientos de miles de personas, ver el temporizador de cuenta regresiva llegar a usted era divertido! Su estrategia de marketing y producto fue tan exitosa que Dropbox los adquirió solo un mes y medio después de la versión beta inicial.La premi

(Consejos de tecnología y diseño)

Cambiar fuentes en cualquier sitio web con esta extensión de Chrome

¿Alguna vez quisiste ver cómo se vería una fuente diferente en un sitio web? Usando la extensión Font Swap, esta tarea es muy sencilla.Es un complemento gratuito para Chrome que le permite cambiar las fuentes en función de ciertos filtros . Puede encontrar cualquier fuente que esté usando un sitio web, luego apunte a esa fuente y reemplácela con cualquier otra cosa que desee.El com

(Consejos de tecnología y diseño)