#BlackLivesMatter
AMP
ES
English Deutsch Français العربية Italiano Indonesia 日本語 한국어 Português Русский Türkçe 中文 Polski Tiếng việt

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 1: Gatos

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