es.hideout-lastation.com
Paraíso Para Los Diseñadores Y Desarrolladores


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

9 complementos útiles para su sitio de WordPress

9 complementos útiles para su sitio de WordPress

En sí mismo, WordPress puede no ser la plataforma más eficiente y emocionante para trabajar. Sin embargo, dada la posibilidad de personalizarlo con complementos y temas, es posible crear cualquier sitio web. Y hazlo con relativa facilidad.Los complementos de WordPress ofrecen excelentes maneras de integrar funciones útiles e importantes en un sitio web. M

(Consejos de tecnología y diseño)

50 Cheatsheets e infografías para vendedores de redes sociales

50 Cheatsheets e infografías para vendedores de redes sociales

Al ser un comercializador de redes sociales, necesita estar constantemente actualizado con las nuevas tendencias y tecnología. Aunque hay muchas maneras de actualizarse en esta área, como talleres, cursos en línea y libros electrónicos para vendedores de redes sociales, etc. Sin embargo, la herramienta más rápida e interesante de estas herramientas es la infografía .Si des

(Consejos de tecnología y diseño)