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


Cómo validar páginas móviles aceleradas (AMP)

En nuestro último tutorial de AMP, le mostramos cómo adoptar AMP (páginas móviles aceleradas) para obtener un aumento de velocidad significativo y una mejor exposición en el resultado de búsqueda móvil de Google para su sitio web en el entorno móvil.

Habiendo visto el potencial de AMP, supongo que es posible que haya comenzado o tenga planes para comenzar a realizar cambios en sus sitios web para cumplir con AMP . Siga cuidadosamente las pautas de los documentos y redacte su CSS para adaptar las páginas de AMP a su apetito visual.

Ahora, hay una última cosa que hacer: validar esas páginas.

Validadores de AMP

Hay varias formas de validar sus páginas AMP:

  1. Agregue el #development=1 sendero al final de la URL de la página de AMP. El informe se proyectará en la pestaña Consola en DevTools.
  2. Alternativamente, puede usar el validador de AMP en línea.
  3. También puedes usar la extensión AMP de Chrome.

Estas herramientas producirán un informe que enumerará errores o advertencias dentro de las páginas. En función de esto, puede elegir qué arreglar.

La validación de AMP rige principalmente el uso de elementos HTML, la s y las declaraciones de estilo . Asegúrese de que estas cosas en la página cumplan con AMP y que nada que viole las directrices de AMP quede allí. De lo contrario, su página AMP no aparecerá en ningún lado.

Estructura de datos

AMP también requiere la estructura de datos del esquema. Esta información se presenta dentro de la etiqueta principal de la página en formato JSON. Contiene información contextual de la página que incluye el título, el logotipo y el nombre del editor, la fecha de publicación y modificación, etc.

Según el propósito de la página, los datos que se incluirán pueden variar: Artículos, Revisiones, Recetas, Videos, etc. Puede consultar la Documentación de los tipos de datos de Google para obtener detalles sobre el tipo de datos.

Se requieren algunos datos que producirán errores si no se proporcionan; algunos otros tipos de datos son opcionales y solo producirán advertencias. Sin embargo, este tipo de errores no aparecerán en los validadores de AMP antes mencionados.

En su lugar, aparecerán en la Herramienta de prueba de datos estructurados de Google, así como en su cuenta de Google Webmasters.

Los consumidores de AMP o un cliente que admita AMP, como Google Search y Twitter Moments, pueden usar este conjunto de datos para presentar contenido de AMP en su página de resultados.

Por lo tanto, además de seguir las pautas de AMP con sus elementos HTML personalizados patentados, los datos del esquema requeridos deben estar también en su lugar.

Errores pasados ​​por alto

La mayoría de los errores se mencionan explícitamente en los documentos y se pueden recoger fácilmente en un vistazo. Sin embargo, algunos errores se contextualizan con variables que podemos omitir, como el "Valor de atributo no válido", que dice "The attribute '%1' in tag '%2' is set to the invalid value '%3'." .

Este informe de errores no menciona ni enumera con precisión qué valor no es válido. Pero lo que sí sé es que no podemos establecer el width y la height de elemento al 100% o auto . Estos valores de atributo tienen que ser del tamaño exacto de la imagen para conservar la relación de imagen.

Esto es sólo un ejemplo. Hay una serie de elementos personalizados, amp-img, amp-iframe y amp-ads, con sus propios conjuntos de reglas de validación contra el uso de un atributo y su valor.

Esto podría hacer que la validación de AMP Page sea una tarea abrumadora, especialmente si tomamos cientos o (tal vez) miles de contenidos heredados publicados hace años.

Pensamiento final

AMP aún se encuentra en su etapa inicial. Está en un desarrollo muy activo con esfuerzos comunitarios de Google y la comunidad de desarrollo web. Pero AMP ciertamente evolucionará . Similar a HTML5, puede haber elementos, atributos y algunas prácticas que se depreciarán en el futuro. Por lo tanto, asegúrese de que sus páginas AMP se validen constantemente de vez en cuando en función de los últimos cambios en las pautas.

Rough.js realiza gráficos dibujados a mano con Canvas y SVG

Rough.js realiza gráficos dibujados a mano con Canvas y SVG

Es sorprendente ver cuán lejos ha llegado la web con elementos dinámicos como los SVG en el navegador . Puede diseñar todo, desde animaciones personalizadas hasta juegos HTML5 con las bibliotecas adecuadas.Una de las bibliotecas más nuevas que vale la pena probar es Rough.js . Es un script de generación de gráficos gratuito actualmente en beta que funciona en lienzo y elementos SVG .Puede

(Consejos de tecnología y diseño)

5 aplicaciones para comprar desde casa para las vacaciones (revisado)

5 aplicaciones para comprar desde casa para las vacaciones (revisado)

Diciembre está aquí, lo que significa que el maratón obligatorio de búsqueda de almas y de búsqueda de regalos ha comenzado. Para este último, hay muchas ideas de regalos disponibles en este sitio y en muchos otros, pero esa no es una razón para que realmente compre hasta que se caiga. Hay muchas aplicaciones para ayudarlo a comprar más inteligentemente estas fiestas de Navidad.Aquí te

(Consejos de tecnología y diseño)