Página principal » Móvil » 10 componentes importantes de las páginas móviles aceleradas (AMP) que debe conocer
10 componentes importantes de las páginas móviles aceleradas (AMP) que debe conocer
Páginas Móviles Aceleradas o AMPERIO es la iniciativa de Google para Haz la web móvil más rápido. Para lograr este objetivo, los estándares de AMP restringen la forma en que puede utilizar HTML, CSS y JavaScript, y Gestiona la carga de recursos externos., como imágenes, videos y anuncios a través de su propio tiempo de ejecución.
Esto implica que usted no se puede utilizar ya sea cualquier JavaScript personalizado (escrito por el autor o tercero) o cualquier 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 ha componentes específicos usted puede utilizar en lugar de estos elementos excluidos.
Los componentes de 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. Pueden ser fácilmente reconocidos, ya que siempre comienza con el amperio- prefijo.
Hay dos tipos de componentes AMP: incorporado y extendido Componentes.
Componentes AMP incorporados
Incorporados están incorporados en el tiempo de ejecución de JavaScript de AMP, por lo que no tiene que incluirlos por separado.
1. amp-img
reemplaza el etiqueta en documentos AMP HTML. Necesitas añadir el src y alt atributos como cuando trabajas con el regular elemento.
También tiene otros dos atributos requeridos: siempre necesitas especifica el anchura y altura atributos en valores de píxeles enteros, ya que esto permite que el tiempo de ejecución de AMP calcular el diseño de antemano.
Si quieres hacer la imagen sensible, añade el layout = "responsive" atributo. los diseño atributo controla el diseño en los documentos de AMP, y puede agregarse a cualquier componente de AMP (obtenga más información sobre esto en el Sistema de diseño de AMP).
También puedes usar el srcset atributo en el etiqueta para especificar diferentes imágenes Para diferentes vistas y densidades de píxeles. Funciona de la misma manera que con las imágenes que no son AMP..
2. amp-video
puede ser usado para incrustar directamente videos HTML en documentos AMP HTML. Reemplaza al en archivos AMP. los etiqueta videos de cargas perezosas con el fin de optimizar el rendimiento.
La fuente del video. debe ser servido a través del protocolo HTTPS. Se requiere que agregues anchura y altura atributos, al igual que con el componente.
los etiqueta tiene muchos atributos opcionales, tales como auto-reproducción y póster que puede especificar para afinar cómo se muestra su video HTML5.
admite mp4, webm, ogg y todos los demás formatos compatibles con HTML5
Si quieres, también puedes agregar videos de reserva para usuarios con navegadores que no admiten videos HTML5, utilizando el retroceder atributo y el Etiqueta HTML.
Tu navegador no soporta videos HTML5.
3. amp-anuncio y amp-embed
te proporciona cajas de arena de iframe en el que puedes muestra tus anuncios. Debes servir tus anuncios a través del protocolo HTTPS.
No puede ejecutar usted mismo los scripts suministrados por su red de anuncios. En su lugar, el tiempo de ejecución de AMP ejecuta el JavaScript de la red dada dentro del recinto de seguridad. Tú Solo necesitas especificar qué red utilizas., y añade tus datos.
los componente requiere que Añade las dimensiones del anuncio. utilizando la anchura y altura atributos.
Puede definir la red de anuncios que utiliza con el tipo atributo. Ver la lista de redes publicitarias soportadas..
Cada red publicitaria tiene su propio datos-* atributos que también necesita agregar. Para ver cuál necesita, haga clic en su red de anuncios en la lista anterior.
es el alias de , La documentación no dice mucho al respecto, aparte de que puede usarse en lugar de cuando es semánticamente más preciso. A medida que Google promete evolucionar los componentes AMP relacionados con los anuncios con el tiempo, esto puede cambiar en el futuro..
4. amp-pixel
Con , usted puede añadir un píxel de seguimiento a sus documentos AMP HTML para contar vistas de la página. Tiene un solo atributo, el requerido src atributo, en el que necesitas Especifique la URL que pertenece al píxel de seguimiento..
los etiqueta permite sustituciones de URL estándar, lo que significa que puedes 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 componente.
Componentes AMP extendidos
Como componentes AMP extendidos no son parte del tiempo de ejecución de JavaScript, tú Siempre hay que importarlos. en el Sección de la página AMP en la que desea utilizarlos..
Nota: las versiones de los componentes pueden cambiar en el futuro, así que no olvide comprueba la versión actual en la documentacion.
5. amplificador de audio
reemplaza el Etiqueta HTML5, y hace posible incrustar directamente archivos de audio HTML5 en páginas AMP.
Para usarlo, es necesario especificar el src, anchura y altura atributos, y también puede agregar tres atributos opcionales: auto-reproducción, lazo y apagado.
También puede ser una buena idea agregar archivos de audio de reserva para usuarios con navegadores que no soportan HTML5. Puedes hacer esto usando el retroceder atributo y el etiqueta, al igual que con el mencionado componente.
los El componente AMP admite los mismos formatos de audio que el Etiqueta HTML5.
Tu navegador no soporta audio HTML5.
Usar , incluir el siguiente script en el sección de su documento AMP:
6. amp-iframe
muestra un iframe en documentos AMP. se ha hecho para ser más seguro que los iframes HTML normales. Por lo tanto son por defecto.
Hay algunas reglas relacionadas con Debes seguir para pasar la validación..
Debe especificar el anchura, altura, y salvadera atributos los salvadera el atributo está vacío de forma predeterminada, pero puede asignarle diferentes valores para Modificar el comportamiento del iframe., por ejemplosandbox = "allow-scripts"permite que el iframe ejecute JavaScript. También puedes usar atributos de iframes estándar.
Mientras que las dimensiones de están predefinidos por el anchura y altura atributos, hay una manera de cambiar el tamaño en tiempo de ejecución. Usar el componente, agregue el siguiente script a su página AMP:
7. acordeón
Acordeones Constituye un patrón de IU frecuente en el diseño móvil, ya que ahorran espacio, pero aún así muestra el contenido de una manera accesible. hace posible añadir rápidamente acordeones a las páginas de AMP.
Secciones del acordeón deben utilizar el Etiqueta HTML5, y tiene que ser el niños directos del etiqueta.
Cada sección debe tener dos hijos directos:
uno para el encabezado
Una para el contenido (el contenido también puede ser una imagen).
Utilizar el expandido atributo en cualquier sección que desee expandir por defecto.
Sección 1
Contenido de la Sección 1
Sección 2
Contenido de la Sección 2
Seccion 3
Imagen para la sección 3
Usar el componente en su documento AMP, incluya el siguiente script:
8. amp-lightbox
agrega una caja de luz a diferentes elementos (en la mayoría de los casos, imágenes) en páginas móviles aceleradas.
Cuando el usuario interactúa con el elemento, por ejemplo, lo pulsa, la caja de luz Se expande y llena toda la ventana.. Necesitas añadir un botón u otro control que el usuario puede tocar.
Tenga en cuenta que amp-lightbox solo se puede utilizar con el sin pantalla diseño.
Usar el componente, necesita importarlo con el siguiente código:
9. amp-carrusel
Los carruseles se utilizan con frecuencia en el diseño móvil, ya que permiten mostrar numerosos elementos similares (con mayor frecuencia las imágenes) a lo largo del eje horizontal. Los resultados de AMP también se presentan en formato de carrusel en la Búsqueda de Google.
los componente le permite agregar carruseles a su sitio. los niños directos del componente será considerado como el artículos del carrusel. Debes definir las dimensiones del carrusel con la anchura y altura atributos.
Puedes usar el opcional tipo atributo para determinar cómo mostrar los elementos del carrusel. Si el tipo atributo toma el "carrusel" Valor, se mostrarán los elementos. como una tira continua (este es el valor predeterminado), mientras que "diapositivas" valor 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 usa el mismo anchura y altura valores.
los componente requiere la adición del siguiente script:
10. analítica de amplificación
puede ser usado para recopilar datos analíticos en las páginas de AMP. Actualmente, soporta cuatro tipos de eventos de seguimiento, Sin embargo, esto puede cambiar en el futuro:
Vista de pagina
Clics de anclaje
Minutero
De desplazamiento
Usar , necesitas agregar un objeto de configuración JSON dentro de una
Agregue el siguiente script a la sección de su página AMP HTML para importar el componente:
Ultimas palabras
En esta publicación, vimos todos los componentes integrados de AMP y algunos de los extendidos. Como las Páginas móviles aceleradas aún son nuevas, 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 tu propio componente. Si desea ver cómo se ve una página AMP completa con diferentes componentes, puede consultar estos ejemplos en Github.
