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.
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.
We use cookies to understand how you use our site and to improve your experience. By continuing to use our site, you accept our use of cookies and privacy policy.