Do you build things with AMP? Fill out the new AMP Developer Survey!
AMP
ES
English Deutsch Français العربية Italiano Indonesia 日本語 한국어 Português Русский Türkçe 中文

Añadir más páginas

Ahora que ya sabes cómo añadir una página a una historia de AMP, verás que añadir las páginas siguientes a la historia de las mascotas es muy parecido. Basándote en la información que se incluye a continuación, crea el resto de las páginas aplicando lo que has aprendido. Si te atascas, consulta el (código completo).

Recuerda que cada página necesita un atributo "id" único (por ejemplo, id="page1").

Página 1: Gatos

Explica cómo mostrar una imagen y texto en una sola capa.

  • Contiene 1 capa:
    • Implementa la plantilla vertical.
    • Contiene 3 elementos:
      • Un elemento <h1> con el título Cats.
      • Un componente amp-img adaptable (cat.jpg, 720x1280px).
      • Un elemento para incluir la siguiente cita: Dogs come when they're called. Cats take a message and get back to you. —Mary Bly

Página 2: Perros

Explica cómo organizar el texto y mostrar una imagen que ocupe toda la pantalla con dos capas.

  • Contiene 2 capas:
    • Capa 1: Implementa la plantilla fill y contiene un componente amp-img adaptable (dog.jpg, 720x1280px).
    • Capa 2: Implementa la plantilla thirds y contiene 2 elementos:
      • Un elemento <h1> con el título Dogs.
      • Un elemento <p> que incluye el atributo grid-area con el valor lower-third y contiene el siguiente texto: Dogs were probably the first tame animals. They have accompanied humans for some 10,000 years. Some scientists assert that all dogs, domestic and wild, share a common ancestor in the small South Asian wolf.

Página 3: Pájaros

Explica cómo organizar un texto, mostrar una imagen que ocupe toda la pantalla y añadir un audio de fondo a la página.

  • Contiene 3 capas:
    • Capa 1: Implementa la plantilla fill y contiene un componente amp-img adaptable (bird.jpg, 720x1280px).
    • Capa 2: Implementa la plantilla vertical y contiene un elemento:
      • Un elemento

        con el título Birds.
    • Capa 3: Implementa la plantilla vertical y contiene un elemento:
      • Un elemento <q> que incluya la siguiente cita: A bird is three things: Feathers, flight and song, And feathers are the least of these. —Marjorie Allen Seiffert.
      • Esta tercera capa incluye class="bottom" para alinear los elementos secundarios en la parte inferior de la pantalla.
  • Reproduce un archivo de audio de fondo mientras se muestra la página. Puedes reproducirlo en toda la historia o solo en una página. Para reproducirlo solo en una, añade el atributo background-audio="assets/bird-singing.mp3" al elemento .

Página 4: Conejos

Explica cómo organizar texto y mostrar un vídeo que ocupe toda la pantalla en la página.

  • Contiene 3 capas:
    • Capa 1: Implementa la plantilla fill y contiene un componente amp-video adaptable (rabbit.mp4).
      • Recuerda añadir el script necesario del componente amp-video a la sección <head> de la página para que se muestre el vídeo.
      • Indica una imagen de póster con poster (rabbit.jpg). Este atributo es necesario para que las historias de AMP sean válidas.
      • Configura el vídeo para que se reproduzca automáticamente con el atributo autoplay. Este atributo es necesario para que las historias de AMP sean válidas.
      • Configura el vídeo para que se reproduzca en bucle con el atributo loop.
      • Establece las dimensiones width="720" height="1280" y el diseño layout="responsive".
    • Capa 2: Implementa la plantilla vertical y contiene un elemento:
      • Un elemento <h1> con el título Rabbits.
    • Capa 3: Implementa la plantilla vertical y contiene un elemento:
      • Un elemento <p> que contiene siguiente el texto: Rabbits can learn to follow simple voice commands and come when called by name, and are curious and playful.
      • Aplica la clase CSS bottom a la capa para alinear los elementos secundarios en la parte inferior de la pantalla.

Ya casi hemos acabado la historia de las mascotas. Usaremos animaciones en la última página para reunir a todas las mascotas.

Capítulo anterior Siguiente capítulo