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

Agregar más páginas

Ahora que ya sabe cómo agregar una página a una historia web, verá que agregar las siguientes páginas a “La alegría de las mascotas” es muy parecido. Basándose en la información que se incluye a continuación, cree el resto de las páginas aplicando lo que aprendió. Si se atasca, consulte el código completo (pets-completed.html).

TIP - Recuerde que cada página necesita un atributo “id” único (por ejemplo, id="page1").

Página 1: Gatos

Explique como mostrar una imagen y texto en una sola capa.

  • Contiene 1 capa:
    • Implementa la plantilla vertical.
    • Contiene 3 elementos:
      • Un elemento

        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

        con el título Dogs.
      • Un elemento

        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 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 <amp-story-page>.

Página 4: Conejos

Explica cómo organizar texto y mostrar un video 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).
      • Recuerde agregar el script necesario del componente amp-videoa la sección de la página para que se muestre el video.
      • Especifique una imagen de un cartel con (rabbit.jpg). Este atributo es necesario para que las historias de AMP sean válidas. .
      • Configure el video para que se reproduzca automáticamente con el atributo autoplay. Este atributo es necesario para que las historias de AMP sean válidas.
      • Configure el video para que se reproduzca en bucle con el atributo loop.
      • Establezca las dimensiones width="720" height="1280" y el diseño layout="responsive".
    • Capa 2: Implementa la plantilla vertical y contiene un elemento:
      • Un elemento

        con el título: Rabbits
    • Capa 3:: Implementa la plantilla vertical y contiene un elemento:
      • Un elemento

        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 alegría de las mascotas”. Usaremos animaciones en la última página para reunir a todas las mascotas.

Capítulo anterior Siguiente capítulo