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

Más de 10 servicios y herramientas para convertir diseños en códigos

Después de una lluvia de ideas sobre sus diseños, poder ver finalmente un producto final funcional es uno de los aspectos más satisfactorios del proceso de desarrollo de software. En el otro extremo del espectro, cerrar la brecha entre el diseño final y el código de trabajo puede ser agotador, no muy satisfactorio y, para algunos, un obstáculo casi insuperable. La c

(Consejos de tecnología y diseño)

Interfaz de usuario con cable: el mejor kit gratuito de interfaz de usuario Bootstrap 4

Con la creciente popularidad de Bootstrap 4, no sorprende que los desarrolladores se salten unos sobre otros para publicar sus propios complementos y complementos .La versión actual de Bootstrap tiene toneladas de recursos, incluidos muchos temas gratuitos y complementos gratuitos . ¿Verá BS4 la misma oleada de recursos de terceros?Ha

(Consejos de tecnología y diseño)