Páginas de AMP canónicas, interactivas y hermosas

AMP facilita la creación de páginas web confiables y responsivas. AMP le permite crear interacciones comunes del sitio sin escribir JavaScript. El sitio web amp.dev incluye plantillas de inicio rápido prediseñadas.

Qué compilarás

En este codelab, compilarás una página de AMP interactiva, atractiva y completamente responsiva que incorpora muchas funciones y componentes extendidos de AMP:

  • Navegación responsiva
  • Hero image de portada de página completa
  • Imágenes responsivas
  • Video con reproducción automática
  • Incorporaciones como Instagram
  • Acciones y selectores
  • Vinculación de datos con amp-bind
  • Efectos visuales con amp-fx-collection y amp-animation

Requisitos

  • Un navegador web moderno
  • Node.js y un editor de texto, o acceso a CodePen o a una zona de pruebas en línea similar
  • Conocimientos básicos de HTML, CSS, JavaScript y las Herramientas para desarrolladores de Google Chrome

Herramientas para entregar contenido

Utilizaremos Node.js para ejecutar un servidor HTTP local para entregar contenido a nuestra página de AMP. Consulta el sitio web de Node.js para aprender a instalarlo.

Nuestra herramienta preferida para entregar contenido de forma local será serve, un servidor de contenido estático basado en Node.js. Para instalarlo, ejecute el siguiente comando:

npm install -g serve

Descargar una plantilla de amp.dev

Las plantillas de AMP son un repositorio de componentes y plantillas de AMP de inicio rápido que le permiten crear páginas de AMP modernas y responsivas rápidamente.

Visita las plantillas de AMP y descarga el código del artículo más sencillo para esta plantilla.

Cómo ejecutar el código de la plantilla

Extrae el contenido del archivo ZIP.

Ejecuta el comando serve dentro de la carpeta article para entregar los archivos de forma local.

Visita http://localhost:5000/templates/article.amp.html en tu navegador. (El puerto puede ser 3,000 o un número diferente según la versión de serve. Consulta la consola para conocer la dirección exacta”.

En este momento, también abriremos las Herramientas para desarrolladores de Chrome y activaremos el modo de dispositivo.

Cortar el código de la plantilla

En este punto, estructuramos una página de AMP que funciona principalmente, pero el propósito de este codelab es que aprendas y practiques...

Borra todo dentro de <body></body>.

Ahora, tenemos una página vacía que contiene solo código estándar:

En este codelab, agregarás muchos componentes a esta página vacía, lo que recreará parcialmente la plantilla con aún más funcionalidad.

Una página de AMP es una página HTML con etiquetas adicionales y algunas restricciones para un rendimiento confiable.

Si bien la mayoría de las etiquetas en una página de AMP son etiquetas HTML normales, algunas etiquetas HTML se reemplazan por etiquetas específicas de AMP. Estos elementos personalizados, llamados componentes HTML de AMP, facilitan la implementación de patrones comunes de buen rendimiento.

El archivo HTML de AMP más simple tiene el siguiente aspecto (a veces denominado texto estándar de AMP):

<!doctype html>
<html ⚡>
 <head>
   <meta charset="utf-8">
   <link rel="canonical" href="hello-world.html">
   <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
   <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
   <script async src="https://cdn.ampproject.org/v0.js"></script>
 </head>
 <body>Hello World!</body>
</html>

Observa el código de la página vacía que creaste durante la configuración, que incluye este código estándar y tiene algunas adiciones, sobre todo, una etiqueta <style amp-custom> que incluye mucho CSS reducido.

AMP no es una opinión sobre el diseño ni impone un conjunto particular de estilos. La mayoría de los componentes de AMP tienen un estilo muy básico. Los autores de las páginas son los encargados de proporcionar sus CSS personalizados. Aquí es donde entra en juego <style amp-custom>.

Sin embargo, las plantillas de AMP ofrecen sus propios estilos de CSS, que están perfectamente diseñados, son compatibles con varios navegadores y se adaptan para ayudarlo a compilar páginas de AMP elegantes rápidamente. El código de plantilla que descargaste incluye estos estilos de CSS bien definidos en <style amp-custom>.

Para comenzar, volveremos a agregar algunos de los componentes que quitamos de la plantilla, a fin de crear un shell para nuestra página, incluidos un menú de navegación, una imagen del encabezado de la página y un título.

Obtendrás ayuda de la página de componentes de la IU de inicio de AMP, pero no analizaremos sus detalles de implementación. Los próximos pasos del codelab te brindarán muchas oportunidades para hacerlo.

Cómo agregar navegación responsivo

Diríjase a https://ampstart.com/components#navigation y copie y pegue el código HTML que se proporciona para el MENÚBAR RESPONSTIVO en el body de su página.

El código que proporciona AMP Start incluye la estructura de clase HTML y CSS necesaria para implementar una barra de navegación responsiva en tu página.

Pruébalo: Cambia el tamaño de tu ventana para ver cómo responde a diferentes tamaños de pantalla.

Este código usa consultas de medios CSS y los componentes amp-sidebar y amp-accordion de AMP.

Agrega una hero image y un título

AMP Start también proporciona fragmentos listos para usar con hermosas imágenes y títulos hero responsivos.

Ve a https://ampstart.com/components#media y copia y pega en tu código el código HTML proporcionado para Hero de página completa, justo después de <!-- End Navbar --> comment en body.

Actualicemos la imagen y el título.

Como posiblemente hayas notado, hay dos etiquetas amp-img diferentes en el fragmento de código. Uno se usa para anchos más pequeños y debería apuntar a una imagen de menor resolución, y el otro es para pantallas más grandes. Se activan o desactivan automáticamente en función del atributo media, que AMP admite en todos los elementos de AMP.

Actualiza las src, las width y las height por imágenes diferentes y el título a "Caminata más hermosa en el noroeste del Pacífico" reemplazando la <figure>...</figure> existente por lo siguiente:

<figure class="ampstart-image-fullpage-hero m0 relative mb4">
    <amp-img width="600" height="900" layout="responsive" src="https://unsplash.it/600/900?image=1003" media="(max-width: 415px)"></amp-img>
    <amp-img height="1800" layout="fixed-height" src="https://unsplash.it/1200/1800?image=1003" media="(min-width: 416px)"></amp-img>
    <figcaption class="absolute top-0 right-0 bottom-0 left-0">
      <header class="p3">
        <h1 class="ampstart-fullpage-hero-heading mb3">
        <span class="ampstart-fullpage-hero-heading-text">
          Most Beautiful Hikes in the Pacific Northwest
        </span>
      </h1>
        <span class="ampstart-image-credit h4">
        By <a href="#" role="author" class="text-decoration-none">D.F. Roy</a>,<br> January 14, 2017
      </span>
      </header>
      <footer class="absolute left-0 right-0 bottom-0">
        <a class="ampstart-readmore py3 caps line-height-2 text-decoration-none center block h5" href="#content">Read more</a>
      </footer>
    </figcaption>
</figure>

Ahora veamos la página:

Resumen

  • Creaste un shell para tu página, lo que incluye la navegación responsiva y un hero image y un título.
  • Aprendió más sobre las plantillas de AMP y utilizó los componentes de la IU de AMP para crear rápidamente un shell de página.

El código completo para esta sección se encuentra aquí: http://codepen.io/aghassemi/pen/RpRdzV

En esta sección, agregaremos imágenes responsivas, videos, incorporaciones y texto a nuestra página.

Agreguemos un elemento main que alojará el contenido de la página. La agregaremos al final de body:

<main id="content">

</main>

Cómo agregar encabezados y párrafos

Agrega lo siguiente dentro de main:

<h2 class="px3 pt2 mb2">Photo Gallery</h2>
<p class="ampstart-dropcap mb4 px3">Vivamus viverra augue libero, vitae dapibus lectus accumsan eget. Pellentesque eget ipsum purus. Maecenas leo odio, ornare nec ex id, suscipit porta ipsum. Ut fringilla semper cursus.</p>

Dado que AMP es solo HTML, no hay nada especial en este código, excepto por los nombres de clase CSS. ¿Qué son px3, mb2 y ampstart-dropcap? ¿De dónde provienen?

Estas clases no forman parte de HTML de AMP. Las plantillas de inicio de AMP usan Basscss para proporcionar un kit de herramientas de CSS de bajo nivel y agregar clases específicas de inicio de AMP.

En este fragmento, px3 y mb2 se definen mediante Basscss y se traducen a padding-left-right y Margin-bottom, respectivamente. AMP proporciona ampstart-dropcap y hace que la primera letra de un párrafo sea más grande.

Puedes encontrar documentación sobre estas clases predefinidas de CSS en http://basscss.com/ y https://ampstart.com/components.

Veamos cómo se ve la página ahora:

Cómo agregar una imagen

Crear páginas responsivas es muy sencillo en AMP. En muchos casos, hacer que un componente de AMP sea responsivo es tan simple como agregar un atributo layout="responsive". Al igual que la etiqueta HTML img, amp-img también admite srcset a fin de especificar imágenes diferentes para diferentes anchos y densidades de píxeles de viewport.

Agrega un elemento amp-img a main:

<amp-img 
  layout="responsive" width="1080" height="720"
  srcset="https://unsplash.it/1080/720?image=1043 1080w, https://unsplash.it/720/480?image=1043 720w" 
  alt="Photo of mountains and trees landscape">
</amp-img>

Con este código, especificaremos layout="responsive" y proporcionamos width y height. a fin de crear una imagen responsiva.

¿Por qué debo especificar el ancho y el alto cuando uso el diseño responsivo?

Existen dos motivos:

  1. AMP usa el ancho y el alto para calcular la relación de aspecto y mantener la altura correcta a medida que el ancho cambia para adaptarse al contenedor superior.
  2. AMP aplica el tamaño estático de todos los elementos para garantizar una buena experiencia del usuario (sin saltos en la página) y para determinar el tamaño y la posición de cada elemento para distribuir la página antes de que se descarguen los recursos.

Ahora veamos la página:

Cómo agregar un video de reproducción automática

AMP admite muchos reproductores de video, como YouTube y Vimeo. AMP tiene su propia versión del elemento video de HTML5 en el componente extendido de amp-video. Algunos de estos reproductores de video, incluidos amp-video y amp-youtube, también admiten la reproducción automática silenciada en dispositivos móviles.

Del mismo modo que amp-img, amp-video puede responder con la adición de layout="responsive".

Agreguemos un video de reproducción automática a nuestra página.

Agrega otro párrafo y el siguiente elemento amp-video a main:

<p class="my2 px3">Vivamus viverra augue libero, vitae dapibus lectus accumsan eget. Pellentesque eget ipsum purus. Maecenas leo odio, ornare nec ex id, suscipit porta ipsum. Ut fringilla semper cursus.</p>

<amp-video 
  layout="responsive" width="1280" height="720"
  autoplay controls loop
  src="https://storage.googleapis.com/ampconf-76504.appspot.com/Bullfinch%20-%202797.mp4">
</amp-video>

Veamos esto:

Cómo agregar una incorporación

AMP tiene componentes extendidos para muchos videos incorporados de terceros, como Instagram Instagram. En el caso de las incorporaciones que no tienen un componente de AMP, siempre hay amp-iframe.

Agreguemos una incorporación de Instagram a nuestra página.

A diferencia de amp-img y amp-video, amp-instagram no es un componente integrado. La etiqueta de la secuencia de comandos de importación para ella debe incluirse explícitamente en el head de la página de AMP antes de que se pueda usar el componente.

El código estándar de inicio de AMP que estamos usando incluye varias etiquetas de importación de secuencias de comandos. Búscalos al comienzo de la etiqueta head y asegúrate de que se incluya la siguiente línea de secuencia de comandos de importación:

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

Agrega otro párrafo y el siguiente elemento amp-instagram a main:

<p class="my2 px3">Vivamus viverra augue libero, vitae dapibus lectus accumsan eget. Pellentesque eget ipsum purus. Maecenas leo odio, ornare nec ex id, suscipit porta ipsum. Ut fringilla semper cursus.</p>
    
<amp-instagram
   layout="responsive" width="566" height="708"
   data-shortcode="BJ_sPxzAGyg">
</amp-instagram>

Veamos esto:

Es probable que ese contenido sea suficiente por ahora.

Resumen

  • Aprendiste sobre componentes responsivos en AMP.
  • Agregó diferentes tipos de contenido multimedia y de texto.

El código completo para esta sección se encuentra aquí: http://codepen.io/aghassemi/pen/OpXGoa

Hasta ahora, solo creamos contenido estático para nuestra página. En esta sección, crearemos una galería de fotos interactiva con componentes como un carrusel, un Lightbox y las acciones de AMP.

Aunque AMP no admite JavaScript personalizado, aún expone varios componentes básicos para recibir y manejar acciones de usuario.

Tener todas las imágenes visibles en la página de AMP enfocadas en fotos no creará una excelente experiencia del usuario. Afortunadamente, podemos usar amp-carousel para crear diapositivas de fotos que se puedan deslizar horizontalmente.

Primero, asegurémonos de que la etiqueta de secuencia de comandos de amp-carousel se incluya en head:

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

Ahora, agreguemos una amp-carousel responsiva del tipo slides con varias imágenes a main:.

<p class="my2 px3">Vivamus viverra augue libero, vitae dapibus lectus accumsan eget. Pellentesque eget ipsum purus. Maecenas leo odio, ornare nec ex id, suscipit porta ipsum. Ut fringilla semper cursus.</p>

<amp-carousel 
  layout="responsive" width="1080" height="720"
  type="slides">

    <amp-img src="https://unsplash.it/1080/720?image=1037" layout="fill"></amp-img>
    <amp-img src="https://unsplash.it/1080/720?image=1038" layout="fill"></amp-img>
    <amp-img src="https://unsplash.it/1080/720?image=1039" layout="fill"></amp-img>
    <amp-img src="https://unsplash.it/1080/720?image=1040" layout="fill"></amp-img>
    <amp-img src="https://unsplash.it/1080/720?image=1041" layout="fill"></amp-img>
    <amp-img src="https://unsplash.it/1080/720?image=1042" layout="fill"></amp-img>
    <amp-img src="https://unsplash.it/1080/720?image=1043" layout="fill"></amp-img>
    <amp-img src="https://unsplash.it/1080/720?image=1044" layout="fill"></amp-img>
</amp-carousel>

type="slides" garantiza que solo se muestre una imagen a la vez, y los usuarios pueden deslizar el dedo para navegar por ellas.

Para las imágenes dentro del carrusel, usamos layout="fill", ya que un carrusel de diapositivas siempre ocupa su tamaño con el elemento secundario, de manera que no es necesario especificar un diseño diferente que requiera ancho y alto.

Probemos cómo se ve:

1.gif

Ahora, agreguemos un contenedor que se desplace horizontalmente para las miniaturas de estas imágenes. Volveremos a utilizar <amp-carousel>, pero sin type="slides" y con un diseño de altura fija.

Agrega lo siguiente después del elemento amp-carousel anterior.

<amp-carousel layout="fixed-height" height="78" class="mt1">

    <amp-img src="https://unsplash.it/108/72?image=1037" layout="fixed" width="108" height="72"></amp-img>
    <amp-img src="https://unsplash.it/108/72?image=1038" layout="fixed" width="108" height="72"></amp-img>
    <amp-img src="https://unsplash.it/108/72?image=1039" layout="fixed" width="108" height="72"></amp-img>
    <amp-img src="https://unsplash.it/108/72?image=1040" layout="fixed" width="108" height="72"></amp-img>
    <amp-img src="https://unsplash.it/108/72?image=1041" layout="fixed" width="108" height="72"></amp-img>
    <amp-img src="https://unsplash.it/108/72?image=1042" layout="fixed" width="108" height="72"></amp-img>
    <amp-img src="https://unsplash.it/108/72?image=1043" layout="fixed" width="108" height="72"></amp-img>
    <amp-img src="https://unsplash.it/108/72?image=1044" layout="fixed" width="108" height="72"></amp-img>

</amp-carousel>

Ten en cuenta que, para las imágenes en miniatura, simplemente usamos layout="fixed" y versiones de baja resolución de las mismas fotos.

Veamos esto:

Cómo cambiar la imagen cuando el usuario presiona una miniatura

Para ello, debemos vincular eventos como tap a acciones como cambiar la diapositiva.

event: Podemos usar el atributo on para instalar controladores de eventos en un elemento, y el evento tap es compatible con todos los elementos.

action: amp-carousel expone una acción goToSlide(index=INTEGER) a la que podemos llamar desde el controlador de eventos de presión de cada imagen en miniatura.

Ahora que conocemos el evento y la acción, los unimos.

Primero, debemos darle un carrusel de diapositivas a id para poder hacer referencia a este desde el controlador de eventos de presión en las miniaturas.

Modifica tu código existente para agregar un atributo id al carrusel de diapositivas (el primero):

<amp-carousel 
  id="imageSlides"
  type="slides"

  ....

Ahora, instalemos el controlador de eventos (on="tap:imageSlides.goToSlide(index=<slideNumber>)")) en cada imagen de miniatura:

<amp-img on="tap:imageSlides.goToSlide(index=0)" role="button" tabindex="1" layout="fixed" ...
<amp-img on="tap:imageSlides.goToSlide(index=1)" role="button" tabindex="1" layout="fixed" ...
<amp-img on="tap:imageSlides.goToSlide(index=2)" role="button" tabindex="1" layout="fixed" ...
...

Ten en cuenta que también debemos asignarle un tabindex y establecer los ARIA role para la accesibilidad.

Eso es todo. Ahora, si presiona cada imagen en miniatura, se muestra la imagen correspondiente dentro del carrusel de diapositivas.

2.gif

Destacar la miniatura cuando el usuario la presiona

¿Podemos hacer esto? No parece haber ninguna acción para cambiar las clases de CSS a la que un elemento debe llamar desde los controladores de eventos de toque. ¿Cómo podemos destacar la miniatura seleccionada?

<amp-selector> al rescate

amp-selector es diferente de los componentes que hemos usado hasta el momento. No es un componente de presentación, ya que no afecta el diseño de la página; es un componente fundamental que permite que la página de AMP conozca la opción que seleccionó el usuario.

Lo que amp-selector hace es bastante simple, pero potente:

  • amp-selector puede contener cualquier elemento HTML arbitrario o componentes de AMP.
  • Cualquier elemento descendiente de amp-selector puede convertirse en una opción si tiene un atributo option=<value>.
  • Cuando un usuario presiona un elemento que es una opción, amp-selector simplemente agrega un atributo selected a ese elemento (y lo quita de otros elementos de opción en el modo de selección individual).
  • Puede cambiar el estilo del elemento seleccionado en su CSS personalizado segmentando el atributo selected con un selector de atributos de CSS.

Veamos cómo esto nos permite realizar la tarea en cuestión.

Agrega la etiqueta de secuencia de comandos para amp-selector a head:

<script custom-element="amp-selector" src="https://cdn.ampproject.org/v0/amp-selector-0.1.js" async></script>
  1. Une el carrusel de miniaturas en un amp-selector
  2. Para convertir cada miniatura en una opción, agrega un atributo option=<value>.
  3. Agrega la atributo selected para crear la primera miniatura de forma predeterminada.
<amp-selector>

  <amp-carousel layout="fixed-height" height="78" class="mt1">

    <amp-img option=0 selected on="tap:imageSlides.goToSlide(index=0)" ...
      
    <amp-img option=1 on="tap:imageSlides.goToSlide(index=1)" ...

    ...

  </amp-carousel>

</amp-selector>

Ahora debemos agregar un estilo para destacar la miniatura seleccionada.

Agrega el siguiente CSS personalizado a <style amp-custom> después del código estándar de CSS reducido de AMP Start:

<style amp-custom>
...

/* low opacity for non-selected thumbnails */
amp-selector amp-img[option] {
  opacity: 0.4;
}

/* normal opacity for the selected thumbnail */
amp-selector amp-img[option][selected] {
  opacity: 1;
}

</style>

Veamos esto:

3.gif

Se ve bien, pero ¿notaste un error?

Si el usuario desliza el carrusel de diapositivas, la miniatura seleccionada no se actualizará para reflejarlo. ¿Cómo podemos vincular la diapositiva actual del carrusel con la miniatura seleccionada?

En la próxima sección, aprenderemos cómo.

Resumen

  • Aprendiste sobre diferentes tipos de carruseles y cómo usarlos.
  • Usaste acciones y eventos de AMP para cambiar la diapositiva visible en el carrusel de imágenes cuando el usuario presionaba una imagen en miniatura.
  • Aprendiste sobre amp-selector y cómo se puede usar como componente fundamental para implementar casos de uso interesantes.

El código completo para esta sección se encuentra aquí: http://codepen.io/aghassemi/pen/gmMJMy

En esta sección, usaremos amp-bind para mejorar la interactividad de la galería de imágenes de la sección anterior.

¿Qué es amp-bind?

El componente principal amp-bind de AMP te permite crear interactividad personalizada con expresiones y vinculación de datos.

amp-bind tiene tres partes clave:

  1. State
  2. Vinculación
  3. Mutación

State es una variable de estado de la aplicación que contiene lo que sea, desde un solo valor hasta una estructura de datos compleja. Todos los componentes pueden leer y escribir en esta variable compartida.

La vinculación es una expresión que vincula el estado con un atributo HTML o el contenido de un elemento.

La mutación es la acción de cambiar el valor del estado como resultado de alguna acción o evento del usuario.

La potencia de amp-bind comienza cuando ocurre una mutación: todos los componentes que tienen una vinculación con ese estado recibirán una notificación y se actualizarán automáticamente para reflejar el estado nuevo.

Veamos cómo funciona.

Anteriormente, usamos acciones de AMP (por ejemplo, goToSlide()) para vincular el carrusel de diapositivas de imagen completa con un evento tap en las imágenes de las miniaturas y amp-selector para destacar la miniatura seleccionada.

Veamos cómo podemos volver a implementar este código completamente con el enfoque de amp-bind para la vinculación de datos.

Pero antes de comenzar a programar, diseñemos nuestro enfoque:

1. ¿Cuál es nuestro estado?

En nuestro caso, bastante simple, el único valor que nos importa es el número de diapositiva actual. Por lo tanto, selectedSlide es nuestro estado.

2. ¿Cuáles son nuestras vinculaciones?

¿Qué debe cambiar cuando cambia selectedSlide?

  • Es el slide visible del carrusel de imágenes completas.
<amp-carousel [slide]="selectedSlide" ...
  • El elemento selected de amp-selector también debe cambiar. Esto solucionará el error que experimentamos en la sección anterior.
<amp-selector [selected]="selectedSlide" ...

3. ¿Cuáles son nuestras mutaciones?

¿Cuándo debe cambiar selectedSlide?

  • Cuando el usuario pasa a una nueva diapositiva del carrusel de imagen completa deslizando el dedo, ocurre lo siguiente:
<amp-carousel on="slideChange:AMP.setState({selectedSlide:event.index})" ...
  • Cuando el usuario selecciona una miniatura:
<amp-selector on="select:AMP.setState({selectedSlide:event.targetOption})" ...

Usemos AMP.setState para activar una mutación, lo que significa que ya no necesitamos todo el código on="tap:imageSlides.goToSlide(index=n)" que teníamos en la miniatura.

Resumimos todo lo siguiente:

Agrega la etiqueta de secuencia de comandos para amp-bind a head:

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

Reemplaza el código de la galería existente por el nuevo enfoque:

<amp-carousel [slide]="selectedSlide" on="slideChange:AMP.setState({selectedSlide:event.index})" type="slides" id="imageSlides" layout="responsive" width="1080" height="720">

  <amp-img src="https://unsplash.it/1080/720?image=1037" layout="fill"></amp-img>
  <amp-img src="https://unsplash.it/1080/720?image=1038" layout="fill"></amp-img>
  <amp-img src="https://unsplash.it/1080/720?image=1039" layout="fill"></amp-img>
  <amp-img src="https://unsplash.it/1080/720?image=1040" layout="fill"></amp-img>
  <amp-img src="https://unsplash.it/1080/720?image=1041" layout="fill"></amp-img>
  <amp-img src="https://unsplash.it/1080/720?image=1042" layout="fill"></amp-img>
  <amp-img src="https://unsplash.it/1080/720?image=1043" layout="fill"></amp-img>
  <amp-img src="https://unsplash.it/1080/720?image=1044" layout="fill"></amp-img>

</amp-carousel>


<amp-selector [selected]="selectedSlide" on="select:AMP.setState({selectedSlide:event.targetOption})">

  <amp-carousel layout="fixed-height" height="78" class="mt1">

    <amp-img option=0 selected src="https://unsplash.it/108/72?image=1037" layout="fixed" width="108" height="72"></amp-img>
    <amp-img option=1 src="https://unsplash.it/108/72?image=1038" layout="fixed" width="108" height="72"></amp-img>
    <amp-img option=2 src="https://unsplash.it/108/72?image=1039" layout="fixed" width="108" height="72"></amp-img>
    <amp-img option=3 src="https://unsplash.it/108/72?image=1040" layout="fixed" width="108" height="72"></amp-img>
    <amp-img option=4 src="https://unsplash.it/108/72?image=1041" layout="fixed" width="108" height="72"></amp-img>
    <amp-img option=5 src="https://unsplash.it/108/72?image=1042" layout="fixed" width="108" height="72"></amp-img>
    <amp-img option=6 src="https://unsplash.it/108/72?image=1043" layout="fixed" width="108" height="72"></amp-img>
    <amp-img option=7 src="https://unsplash.it/108/72?image=1044" layout="fixed" width="108" height="72"></amp-img>

  </amp-carousel>

</amp-selector>

Probémoslo. Presiona una miniatura, y las diapositivas de imágenes cambiarán. Desliza las diapositivas de la imagen para que cambie la miniatura destacada.

4.gif

Ya hicimos el trabajo pesado a fin de definir y mutar un estado para nuestra diapositiva actual. Ahora podemos proporcionar fácilmente vinculaciones adicionales para actualizar otros datos según la cantidad actual de diapositivas.

Agreguemos la imagen x/of yy a nuestra galería:

Agrega el siguiente código sobre el elemento de carrusel de diapositivas:

<div class="px3">Image <span [text]="1*selectedSlide + 1">1</span> of 8</div>

Esta vez, estamos vinculando el texto interno de un elemento con [text]= en lugar de vincular a un atributo HTML.

Probémoslo:

5.GIF

Resumen

  • Aprendiste sobre amp-bind.
  • Usaste amp-bind para implementar una versión mejorada de la galería de imágenes.

El código completo para esta sección se encuentra aquí: http://codepen.io/aghassemi/pen/MpeMdL

En esta sección, usaremos dos funciones nuevas para agregar animaciones a nuestra página.

Agregue un efecto de paralaje al título

amp-fx-collection es una extensión que proporciona una colección de efectos visuales predeterminados, como paralaje, que se pueden habilitar con facilidad en cualquier elemento con atributos.

Con el efecto de paralaje, a medida que el usuario se desplaza por la página, el elemento se desplaza más rápido o más lento según el valor asignado al atributo.

Para habilitar el efecto de paralaje, agregue el atributo amp-fx="parallax" data-parallax-factor="<a decimal factor>" a cualquier elemento HTML o AMP.

  • Un valor de factor superior a 1 hace que el elemento se desplace más rápido cuando el usuario se desplace hacia abajo en la página.
  • Un valor de factor inferior a 1 hace que el elemento se desplace más lento cuando el usuario se desplace hacia abajo en la página.

Agreguemos paralaje con un factor de 1.5 al título de nuestra página y veamos cómo se ve.

Agrega la etiqueta de secuencia de comandos para amp-fx-collection a head:

<script custom-element="amp-fx-collection" src="https://cdn.ampproject.org/v0/amp-fx-collection-0.1.js" async></script>

Ahora, busca el elemento de título del encabezado existente en el código y agrégale el atributo amp-fx="parallax" and data-parallax-factor="1.5":

<header amp-fx="parallax" data-parallax-factor="1.5" class="p3">
  <h1 class="ampstart-fullpage-hero-heading mb3">
    <span class="ampstart-fullpage-hero-heading-text">
      Most Beautiful Hikes in the Pacific Northwest
    </span>
  </h1>
  <span class="ampstart-image-credit h4">
    By <a href="#" role="author" class="text-decoration-none">D.F. Roy</a>,<br> January 14, 2017
  </span>
</header>

Veamos el resultado:

6.gif

Ahora, el título se desplaza más rápido que el resto de la página. Genial.

Cómo agregar animación a la página

amp-animation es una función que lleva la API de animaciones web a páginas de AMP.

En esta sección, usaremos amp-animation a fin de crear un efecto de acercamiento sutil para la imagen de portada.

Agrega la etiqueta de secuencia de comandos para amp-animation en el head:

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

Ahora, debemos definir nuestra animación y el elemento objetivo al que se aplica.

Las animaciones se definen como JSON dentro de una etiqueta amp-animation de nivel superior.

Inserta el siguiente código directamente debajo de la etiqueta de apertura body en tu página.

<amp-animation trigger="visibility" layout="nodisplay">
    <script type="application/json">
      {
        "target": "heroimage",
        "duration": 30000,
        "delay": 0, 
        "fill": "forwards",
        "easing": "ease-out",
        "keyframes": {"transform":  "scale(1.3)"}
      }
      </script>
</amp-animation>

Este código define una animación que se ejecuta durante 30 segundos sin demora y ajusta la imagen para que sea un 30% más grande.

Definimos un elemento fill hacia adelante para permitir que la imagen se acerque después de que finalice la animación. target es el HTML id del elemento al que se aplica la animación.

Agreguemos un id al elemento de imagen hero en nuestra página para que amp-animation pueda realizar acciones en él.

  1. Ubica la hero image existente (la de alta resolución con layout="fixed-height") en tu código y agrega id="heroimage" a la etiqueta amp-img.
  2. A fin de hacerlo más simple, también borra media="(min-width: 416px)" y quita los otros objetos amp-img de baja resolución para que, por el momento, no tengamos que lidiar con varias animaciones y consultas de medios en amp-animation.
<figure class="ampstart-image-fullpage-hero m0 relative mb4">

    <amp-img id="heroimage" height="1800" layout="fixed-height" src="https://unsplash.it/1200/1800?image=1003"></amp-img>

    <figcaption class="absolute top-0 right-0 bottom-0 left-0">

...

Como habrás notado, escalar la imagen hará que sobrepase su elemento superior, por lo que debemos solucionar este problema ocultando el desbordamiento.

Agrega la siguiente regla de CSS al final del <style amp-custom> existente:

.ampstart-image-fullpage-hero {
  overflow: hidden;
}

Probemos cómo se ve:

7.gif

Sutil

Pero, de todos modos, podría haberlo hecho con el CSS. ¿Para qué sirve amp-animation?

Esto es válido en este caso, pero amp-animation permite funcionalidades adicionales que no se pueden llevar a cabo únicamente con CSS. Por ejemplo, la animación puede activarse en función de la visibilidad (y también en función de la visibilidad) o puede activarse con una acción de AMP. amp-animation también se basa en la API de animaciones web, que tiene más funciones que las animaciones CSS, especialmente en cuanto a la capacidad de composición.

Resumen

  • Aprendiste a crear efectos de paralaje con amp-fx-collection.
  • Aprendiste sobre amp-animation.

El código completo para esta sección se encuentra aquí: http://codepen.io/aghassemi/pen/OpXKzo

Acabas de crear una página de AMP atractiva e interactiva.

Celebremos nuevamente volviendo a analizar lo que lograste hoy.

Este es un vínculo a la página terminada: http://s.codepen.io/aghassemi/debug/OpXKzo

y el código final: http://codepen.io/aghassemi/pen/OpXKzo

Sin título.gif

Puedes encontrar la colección de entradas de CodePen para este codelab aquí: https://codepen.io/collection/XzKmNB/

Antes de salir...

Olvidamos revisar cómo se ve nuestra página en otros factores de forma, como una tablet en modo de paisaje.

Veamos:

Sin título.gif

¡Exacto!

Que tengas un hermoso día.

¿Qué sigue?

Este codelab solo rasca la superficie de lo que es posible en AMP. Hay muchos recursos y codelabs disponibles para ayudarte a crear increíbles páginas de AMP:

Si tienes preguntas o tienes algún problema, búscanos en el canal de Slack de AMP o crea debates, informes de errores o solicitudes de funciones en GitHub.