10 Componentes importantes de las páginas móviles aceleradas (AMP) que debes saber

Accelerated Mobile Pages o AMP es la iniciativa de Google para hacer que la web móvil sea más rápida . Para lograr este objetivo, los estándares de AMP restringen la forma en que puede usar HTML, CSS y JavaScript, y administra la carga de recursos externos, como imágenes, videos y anuncios a través de su propio tiempo de ejecución .

Esto implica que no puede usar ningún JavaScript personalizado (escrito por el autor o de terceros) ni ningún elemento HTML relacionado con los recursos, como imágenes y videos en sus documentos AMP.

Para cerrar la brecha entre las necesidades de los usuarios y las mejores prácticas de rendimiento, AMP tiene componentes específicos que puede usar en lugar de estos elementos excluidos .

Los componentes AMP son etiquetas HTML específicas . Se comportan de forma similar a las etiquetas HTML normales: tienen etiquetas de apertura y cierre, atributos, y la mayoría de ellas se pueden diseñar con CSS. Se pueden reconocer fácilmente, ya que siempre comienzan con el prefijo del amp- .

Hay dos tipos de componentes de AMP: componentes integrados y extendidos .

Componentes incorporados de AMP

Los built-in están integrados en el tiempo de ejecución de JavaScript de AMP, por lo que no es necesario que los incluyas por separado.

1. amp-img

reemplaza el etiqueta en los documentos HTML de AMP. Necesita agregar los atributos src y alt como cuando trabaja con el elemento.

también tiene otros dos atributos obligatorios: siempre debe especificar los atributos de width y height en valores de píxel enteros, ya que esto permite que el tiempo de ejecución de AMP calcule el diseño de antemano .

Si desea hacer que la imagen responda, agregue el atributo layout="responsive" . El atributo de layout controla el diseño en los documentos de AMP y se puede agregar a cualquier componente de AMP (obtenga más información al respecto en el Sistema de diseño de AMP).

También puede usar el atributo srcset en etiqueta para especificar diferentes imágenes para diferentes ventanas gráficas y densidades de píxeles. Funciona de la misma manera que con las imágenes que no son AMP.

2. amp-video

se puede usar para incrustar videos HTML directamente en documentos AMP HTML. Sustituye al

La fuente del video debe ser servida a través del protocolo HTTPS . Debe agregar los atributos de width y height, al igual que con el componente.

los la etiqueta tiene muchos atributos opcionales, como autoplay y poster que puede especificar para ajustar cómo se muestra su video HTML5.

admite mp4, webm, ogg y todos los demás formatos compatibles con HTML5

Si lo desea, también puede agregar videos alternativos para usuarios con navegadores que no son compatibles con videos HTML5, utilizando el atributo de fallback y el Etiqueta HTML

Su navegador no es compatible con videos HTML5.

3. amp-ad y amp-embed

le proporciona sandbox iframe en el que puede mostrar sus anuncios . Debe publicar sus anuncios a través del protocolo HTTPS .

No puede ejecutar secuencias de comandos proporcionadas por su red publicitaria por su cuenta. En cambio, el tiempo de ejecución de AMP ejecuta el JavaScript de la red dada dentro de la zona de pruebas. Solo necesita especificar qué red utiliza y agregar sus datos.

los componente requiere que agregue las dimensiones del anuncio utilizando los atributos de width y height .

Puede definir la red publicitaria que usa con el atributo de type . Consulte la lista de redes publicitarias compatibles.

Cada red publicitaria tiene sus propios atributos data-* que también debe agregar. Para ver cuál necesita, haga clic en su red publicitaria en la lista anterior.

es el alias de , la documentación no dice mucho al respecto aparte de que se puede usar en lugar de cuando es semánticamente más preciso . Como Google promete evolucionar los componentes de AMP relacionados con anuncios a lo largo del tiempo, esto puede cambiar en el futuro.

4. amp-pixel

Con , puede agregar un píxel de seguimiento a sus documentos HTML de AMP para contar las visitas a la página . Tiene solo un atributo, el atributo src requerido, en el que debe especificar la URL que pertenece al píxel de seguimiento .

los la etiqueta permite las sustituciones de URL estándar, lo que significa que puede generar un valor de URL aleatorio para rastrear cada impresión.

Consulte la Guía de sustitución de URL de AMP si desea utilizar este componente. Tenga en cuenta que no puede diseñar el componente.

Componentes ampliados de AMP

Como los componentes AMP extendidos no son parte del tiempo de ejecución de JavaScript, siempre debe importarlos en el sección de la página de AMP en la que desea usarlos.

Nota: las versiones de los componentes pueden cambiar en el futuro, por lo que no olvide verificar la versión actual en la documentación.

5. amp-audio

reemplaza el

Para usarlo, debe especificar los atributos src, width y height, y también puede agregar tres atributos opcionales: autoplay, loop y muted .

También puede ser una buena idea agregar archivos de audio alternativos para usuarios con navegadores que no son compatibles con HTML5. Puedes hacer esto usando el atributo de fallback y etiqueta, al igual que con el mencionado componente.

los El componente AMP admite los mismos formatos de audio que el

Su navegador no es compatible con audio HTML5.

Usar , incluya la siguiente secuencia de comandos en sección de su documento de AMP:

6. amp-iframe

muestra un iframe en documentos AMP. ha sido creado para ser más seguro que los marcos iframes HTML normales. Por lo tanto, están aislados por defecto .

Hay algunas reglas relacionadas con debes seguir para pasar la validación.

Debe especificar los atributos width, height y sandbox . El atributo de sandbox está vacío de forma predeterminada, pero puede darle diferentes valores para modificar el comportamiento del iframe, por ejemplo, sandbox="allow-scripts" permite que el iframe ejecute JavaScript. Puede usar atributos de iframes estándar también.

Si bien las dimensiones de están predefinidos por los atributos de width y height, hay una manera de cambiar su tamaño en tiempo de ejecución. Usar el componente, agregue la siguiente secuencia de comandos a su página de AMP:

7. amp-accordion

Los acordeones constituyen un patrón de IU frecuente en el diseño de dispositivos móviles, ya que ahorran espacio, pero aún muestran el contenido de forma accesible. permite agregar rápidamente acordeones a páginas AMP.

Las secciones del acordeón deben usar

Etiqueta HTML5, y deben ser los hijos directos de la etiqueta.

Cada sección debe tener dos hijos directos :

1. uno para el título
2. uno para el contenido (el contenido también puede ser una imagen)

Utilice el atributo expanded en cualquier sección que desee expandir de forma predeterminada.

Sección 1 
 Contenido de la Sección 1 
Sección 2 
Contenido de la Sección 2
Seccion 3 

Usar el componente en su documento AMP, incluya la siguiente secuencia de comandos:

8. amp-lightbox

agrega un lightbox a diferentes elementos (en la mayoría de los casos, imágenes) en Accelerated Mobile Pages.

Cuando el usuario interactúa con el elemento, por ejemplo, toca sobre él, el lightbox se expande y llena toda la ventana gráfica . Debe agregar un botón u otro control que el usuario pueda tocar.

Tenga en cuenta que amp-lightbox solo se puede usar con el diseño no nodisplay .

 Expandir 

Usar el componente, debe importarlo con el siguiente código:

9. amp-carousel

Los carruseles se utilizan con frecuencia en el diseño móvil, ya que permiten mostrar numerosos elementos similares (con mayor frecuencia imágenes) a lo largo del eje horizontal. Los resultados de AMP también se presentan en formato de carrusel en Búsqueda de Google.

los componente le permite agregar carruseles a su sitio. Los hijos directos de la componente será considerado como los elementos del carrusel . Debe definir las dimensiones del carrusel con los atributos de width y height .

Puede usar el atributo de type opcional para determinar cómo mostrar los elementos del carrusel . Si el atributo type toma el valor de "carousel", los elementos se mostrarán como una franja continua (este es el valor predeterminado), mientras que el valor "slides" mostrará los elementos en formato de diapositivas .

los La etiqueta también tiene otros atributos opcionales que pueden ayudarlo a ajustar el resultado.

En el siguiente ejemplo, observe que tanto el carrusel como todos sus elementos usan los mismos valores de width y height .

los componente requiere la adición de la siguiente secuencia de comandos:

10. amp-analytics

se puede utilizar para recopilar datos analíticos en páginas AMP. Actualmente, admite cuatro tipos de eventos de seguimiento ; sin embargo, esto puede cambiar en el futuro:

1. Vista de pagina
2. Clics de anclaje
3. Minutero
4. Desplazamiento

Usar , debe agregar un objeto de configuración JSON dentro de un

Agregue la siguiente secuencia de comandos al sección de su página AMP HTML para importar componente:

Ultimas palabras

En esta publicación, echamos un vistazo a todos los componentes incorporados de AMP, y algunos de los extendidos. Como Accelerated Mobile Pages aún es nuevo, muchas cosas pueden cambiar en el futuro, por lo que vale la pena vigilar la documentación en Github o en el sitio oficial de AMP.

Como estos componentes de AMP son de código abierto, también puede contribuir al desarrollo, incluso creando su propio componente . Si desea ver cómo se ve una página completa de AMP con diferentes componentes, puede ver estos ejemplos en Github.

Cambiando la cara del diseño web: un estudio de caso de 25 años

La World Wide Web celebró su 25 cumpleaños el 11 de marzo de 2014 y, durante su evolución, el diseño web también ha avanzado a pasos agigantados. Ya no tenemos que aguantar interminables textos torpes e imágenes de baja resolución. Los sitios web informativos, innovadores y fáciles de navegar de la actualidad son tan comunes que probablemente haya olvidado cómo eran los sitios web en la década de 1990.Por lo ta

(Consejos de tecnología y diseño)

Freelancers: 3 maneras de motivarse cuando se está ejecutando bajo

Como diseñadores independientes, la autodisciplina es una característica esencial para cultivar. Si se tiene en cuenta que tiene los beneficios de un horario flexible, es muy importante que se mantenga firme en sus relaciones diarias para que su negocio funcione bien. Por lo tanto, mantener una gran motivación para su trabajo es una prioridad máxima.Per

(Consejos de tecnología y diseño)