10 componentes importantes de Accelerated Mobile Pages (AMP) que debe conocer

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 cómo 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 utilizar 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 manera similar a las etiquetas HTML normales: tienen etiquetas de apertura y cierre, atributos, y la mayoría de ellos se pueden diseñar con CSS . Se pueden reconocer fácilmente, ya que siempre comienzan con el amp-prefijo .

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

Componentes AMP integrados

Empotrados están integradas en tiempo de ejecución de JavaScript de AMP, por lo que no tiene que incluirlos por separado.

1. amp-img

<amp-img>reemplaza la <img>etiqueta en documentos HTML de AMP. Debe agregar los atributos srcy altal igual que cuando trabaja con el <img>elemento regular .

<amp-img>también tiene otros dos atributos obligatorios: siempre debe especificar los atributos widthyheight en valores de píxeles enteros, ya que esto permite que el tiempo de ejecución de AMP calcule el diseño por adelantado .

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

123<amp-img src=”img.jpg” width=”350″ height=”200″    layout=”responsive” alt=”My Image”></amp-img>

También puede usar el srcsetatributo en la <amp-img>etiqueta para especificar diferentes imágenes para diferentes ventanas gráficas y densidades de píxeles. Se trabaja de la misma manera que con las imágenes no-AMP.

2. amp-video

<amp-video>se puede utilizar para incrustar videos HTML directamente en documentos HTML de AMP. Reemplaza los <video>archivos AMP. La <amp-video>etiqueta lazy carga videos para optimizar el rendimiento.

La fuente del video debe entregarse a través del protocolo HTTPS . Debe agregar los atributos widthy height, al igual que con el <amp-img>componente.

La <amp-video>etiqueta tiene muchos atributos opcionales , como autoplayy posterque puede especificar para ajustar cómo se muestra su video HTML5.

<amp-video>admite mp4, webm, ogg y todos los demás formatos admitidos por la etiqueta HTML5 <video> .

Si lo desea, también puede agregar videos de respaldo para usuarios con navegadores que no admiten videos HTML5, utilizando el fallbackatributo y la <source>etiqueta HTML.

12345678<amp-video width=”350″ height=”250″  src=”https://example.com/video.mp4″ layout=”responsive” autoplay>  <div fallback>    <p>Your browser doesn’t support HTML5 videos.</p>  </div>  <source type=”video/mp4″ src=”myvideo.mp4″>  <source type=”video/webm” src=”myvideo.webm”></amp-video>

3. amp-adyamp-embed

<amp-ad>le proporciona cajas de arena de iframe en las que puede mostrar sus anuncios . Debe publicar sus anuncios a través del protocolo HTTPS .

No puede ejecutar scripts proporcionados 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. Usted sólo debe especificar la red que utilice , y añadir sus datos.

El <amp-ad>componente requiere que agregue las dimensiones del anuncio mediante los atributos widthy height.

Puede definir la red publicitaria que utiliza con el typeatributo. Consulte la lista de redes publicitarias compatibles .

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

12345<amp-ad width=”300″ height=”250″    layout=”responsive” type=”adsense”    data-ad-client=”ca-pub-2005682797531342″    data-ad-slot=”7046626912″></amp-ad>

<amp-embed>es el alias de <amp-ad>, la documentación no dice mucho al respecto, aparte de que se puede usar en lugar de <amp-ad>cuando sea semánticamente más precisa . Dado que Google promete evolucionar los componentes de AMP relacionados con la publicidad con el tiempo, esto puede cambiar en el futuro.

4. amp-pixel

Con <amp-pixel>, puede agregar un píxel de seguimiento a sus documentos HTML de AMP para contar las visitas a la página . Tiene un solo atributo, el srcatributo obligatorio , en el que debe especificar la URL que pertenece al píxel de seguimiento .

La <amp-pixel>etiqueta permite sustituciones de URL estándar , lo que significa que puede generar un valor de URL aleatorio para realizar un seguimiento de 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 aplicar estilo al <amp-pixel>componente.

1<amp-pixel src=”https://example.com/pixel?RANDOM”></amp-pixel>

Componentes AMP extendidos

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

Nota: las versiones de los componentes pueden cambiar en el futuro, así que no olvide comprobar la versión actual en la documentación.

5. amp-audio

<amp-audio>reemplaza la <audio>etiqueta HTML5 y permite incrustar directamente archivos de audio HTML5 en páginas AMP.

Para usarlo, usted está obligado a especificar el src, widthy heightatributos, y también se puede añadir tres atributos opcionales : autoplay, loopy muted.

También puede ser una buena idea agregar archivos de audio de respaldo para usuarios con navegadores que no admiten HTML5. Puede hacer esto usando el fallbackatributo y la <source>etiqueta, al igual que con el <amp-video>componente mencionado anteriormente .

El <amp-audio>componente AMP admite los mismos formatos de audio que la <audio>etiqueta HTML5.

12345678<amp-audio width=”200″ height=”100″  src=”https://example.com/audio.mp3″>  <div fallback>    <p>Your browser doesn’t support HTML5 audio.</p>  </div>  <source type=”audio/mpeg” src=”mysong.mp3″>  <source type=”audio/ogg” src=”mysong.ogg”></amp-audio>

Para usarlo <amp-audio>, incluya el siguiente script en la <head>sección de su documento AMP:

123<script async custom-element=”amp-audio”    src=”https://cdn.ampproject.org/v0/amp-audio-0.1.js”></script>

6. amp-iframe

<amp-iframe> muestra un iframe en documentos AMP. <amp-iframe>se ha hecho para ser más seguro que los iframes HTML normales. Por lo tanto, están en espacio aislado de forma predeterminada .

Hay algunas reglas relacionadas<amp-iframe> que debe seguir para aprobar la validación.

Debe especificar los width, heighty sandboxatributos. El sandboxatributo está vacío por defecto, pero puede darle diferentes valores para modificar el comportamiento del iframe , por ejemplo, sandbox=”allow-scripts”permite que el iframe ejecute JavaScript. También puede utilizar atributos de iframes estándar .

123456<amp-iframe width=”350″ height=”250″     layout=”responsive”     sandbox=”allow-scripts allow-same-origin”     allowfullscreen     src=”https://example.com/iframe”> </amp-iframe>

Si bien las dimensiones de <amp-iframe>están predefinidas por los atributos widthy height, hay una manera de cambiar su tamaño en tiempo de ejecución . Para usar el <amp-iframe>componente, agregue la siguiente secuencia de comandos a su página AMP:

123<script async custom-element=”amp-iframe”    src=”https://cdn.ampproject.org/v0/amp-iframe-0.1.js”></script>

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 una manera accesible. <amp-accordion>permite agregar rápidamente acordeones a las páginas de AMP.

Las secciones del acordeón deben usar la <section>etiqueta HTML5 y deben ser los hijos directos de la <amp-accordion>etiqueta.

Cada sección debe tener dos hijos directos :

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

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

123456789101112131415dieciséis171819<amp-accordion>  <section expanded>    <h3>Section 1</h3>    <div>Content of Section 1</div>  </section>  <section>    <h3>Section 2</h3>    <p>Content of Section 2</p>  </section>  <section>    <h3>Section 3</h3>    <figure>      <amp-img src=”image.jpg” width=”350″ height=”200″          layout=”responsive” alt=”Image for Section 3″>      </amp-img>      <figcaption>Image for Section 3</figcaption>    </figure>  </section></amp-accordion>

Para utilizar el <amp-accordion>componente en su documento AMP, incluya la siguiente secuencia de comandos:

123<script async custom-element=”amp-accordion”    src=”https://cdn.ampproject.org/v0/amp-accordion-0.1.js”></script>

8. amp-lightbox

<amp-lightbox> agrega una caja de luz 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, lo toca, la caja de luz 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-lightboxsolo se puede utilizar con el nodisplaydiseño.

1234567891011<button on=”tap:mylightbox” role=”button” tabindex=”0″>  Expand</button> <amp-lightbox id=”mylightbox” layout=”nodisplay”>  <div class=”lightbox” on=”tap:mylightbox.close”      role=”button” tabindex=”0″>      <amp-img src=”full-image.jpg” width=”375″ height=”667″      on=”tap:my-lightbox.close”>  </div></amp-lightbox>

Para utilizar el <amp-lightbox>componente, debe importarlo con el siguiente código:

123<script async custom-element=”amp-lightbox”    src=”https://cdn.ampproject.org/v0/amp-lightbox-0.1.js”></script>

9. amp-carousel

Los carruseles se utilizan con frecuencia en el diseño de dispositivos móviles, 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 la Búsqueda de Google.

El <amp-carousel>componente le permite agregar carruseles a su sitio. Los hijos directos del <amp-carousel>componente se considerarán los elementos del carrusel . Debe definir las dimensiones del carrusel con los atributos widthy height.

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

La <amp-carousel>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 widthyheight .

123456<amp-carousel width=”300″ height=”400″ layout=”responsive”  type=”slides”>  <amp-img src=”image1.jpg” width=”300″ height=”400″></amp-img>  <amp-img src=”image2.jpg” width=”300″ height=”400″></amp-img>  <amp-img src=”image3.jpg” width=”300″ height=”400″></amp-img></amp-carousel>

El <amp-carousel>componente requiere la adición del siguiente script:

123<script async custom-element=”amp-carousel”    src=”https://cdn.ampproject.org/v0/amp-carousel-0.1.js”></script>

10. amp-analytics

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

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

Para usarlo <amp-analytics>, debe agregar un objeto de configuración JSON dentro de una <script>etiqueta, en el que puede configurar lo que desea rastrear.

Afortunadamente, Google se asoció con muchos proveedores de análisis que brindan scripts JSON preconfigurados que solo necesita copiar y pegar en su sitio. Consulte la lista de proveedores de análisis disponibles .

Para utilizar los scripts preconfigurados, debe agregar el nombre del proveedor de análisis en el typeatributo.

La <amp-analytics>etiqueta también tiene algunos atributos opcionales que puede utilizar para configurar aún más cómo rastrea su sitio.

1234567<amp-analytics>  <script type=”application/json”>  {    // …  }  </script></amp-analytics>

Agregue la siguiente secuencia de comandos a la <head>sección de su página HTML de AMP para importar el <amp-analytics>componente:

123<script async custom-element=”amp-analytics”    src=”https://cdn.ampproject.org/v0/amp-analytics-0.1.js”></script>

Ultimas palabras

En esta publicación, echamos un vistazo a todos los componentes AMP integrados 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 estar atento a 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 AMP completa con diferentes componentes, puede consultar estos pocos ejemplos en Github.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *