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

Crear la portada

El componente <amp-story-page> representa una página de una historia AMP. Dentro de amp-story, puede haber uno o varios componentes <amp-story-page> que contienen cada una de las pantallas individuales de una historia. La primera página que especificas en el orden del documento es la primera página que se muestra en la historia.

Para crear una página, añade el elemento <amp-story-page> como componente secundario de amp-story. Asigna un ID único a la página. En nuestro caso, vamos a asignar el ID único cover a la primera página, que se conoce como portada:

<amp-story standalone
    title="The joy of pets"
    publisher="AMP tutorials"
    publisher-logo-src="assets/AMP-Brand-White-Icon.svg"
    poster-portrait-src="assets/cover.jpg">
   <amp-story-page id="cover">
   </amp-story-page>
</amp-story>

Ya tenemos la base para nuestra portada. Sin embargo, la historia sigue sin ser válida. Debemos especificar una capa como mínimo dentro de la página.

Capas de una página

Al igual que las capas de los gráficos, puedes utilizar capas en las páginas de una historia AMP para crear efectos visuales. Las capas se apilan una encima de otra, por lo que la primera capa es la capa final y, sobre esta, se coloca la siguiente y así sucesivamente.

La portada se compone de dos capas:

  • Capa 1: incluye una imagen que se utiliza como fondo de pantalla.
  • Capa 2: incluye el título y la firma de la historia.

Crear la capa 1

Vamos a añadir la primera capa a la portada. La capa incluye una imagen que llena la pantalla.

Para crear la capa, añade el elemento <amp-story-grid-layer> como componente secundario de <amp-story-page>. Como queremos que la imagen ocupe la pantalla, utiliza el atributo template="fill" para amp-story-grid-layer. Dentro de la capa, añade un elemento amp-img para el archivo cover.jpg y asegúrate de que el diseño se adapte (es decir, layout="responsive") a las dimensiones de imagen 720x1280 píxeles. A continuación, te indicamos el aspecto que debe tener la capa:

<amp-story-page id="cover">
  <amp-story-grid-layer template="fill">
    <amp-img src="assets/cover.jpg"
        width="720" height="1280"
        layout="responsive">
    </amp-img>
  </amp-story-grid-layer>
</amp-story-page>

Veamos cómo se muestra la página. Abre la página en tu navegador: http://localhost:8000/pets.html.

Si todo ha salido bien, debería tener un aspecto similar al de esta imagen:

Crear la capa 2

Ya tenemos un fondo de pantalla, pero necesitamos una segunda capa, que se coloca sobre el fondo y contiene el título y la firma. Para añadir la segunda capa, vamos a seguir los mismos pasos que con la capa 1, pero, en lugar de utilizar la plantilla fill, utilizaremos la plantilla vertical. No obstante, antes de continuar, vamos a explicar las plantillas y cómo se pueden organizar los elementos AMP y HTML en un elemento <amp-story-grid-layer>.

Colocar elementos con una plantilla

El elemento <amp-story-grid-layer> organiza los elementos secundarios en una cuadrícula (que se basa en la cuadrícula de CSS). Para indicar cómo quieres que se coloquen los elementos secundarios, debes utilizar una de las siguientes plantillas de diseño:

Plantilla: fill
La plantilla fill rellena la pantalla con el primer elemento secundario de la capa. El resto de elementos secundarios de esta capa no se muestran.

La plantilla "fill" se utiliza para fondos de pantalla que incluyen imágenes y vídeos.

<amp-story-grid-layer template="fill">
  <amp-img src="dog.png"
      width="720" height="1280"
      layout="responsive">
  </amp-img>
</amp-story-grid-layer>
Plantilla: vertical
La plantilla vertical organiza los elementos secundarios a lo largo del eje "y". Los elementos se alinean con respecto a la parte superior de la pantalla y se distribuyen por todo el espacio a lo largo del eje "x".

Utiliza la plantilla "vertical" cuando quieras apilar elementos verticalmente uno debajo de otro.

<amp-story-grid-layer template="vertical">
  <p>element 1</p>
  <p>element 2</p>
  <p>element 3</p>
</amp-story-grid-layer>
Plantilla: horizontal
La plantilla horizontal organiza los elementos secundarios a lo largo del eje "x". Los elementos se alinean con respecto al inicio de la pantalla y se distribuyen por todo el espacio a lo largo del eje "x".

Utiliza la plantilla "horizontal" cuando quieras apilar elementos horizontalmente uno después del otro.

<amp-story-grid-layer template="horizontal">
  <p>element 1</p>
  <p>element 2</p>
  <p>element 3</p>
</amp-story-grid-layer>
Plantilla: thirds
La plantilla thirds divide la pantalla en tres filas de igual tamaño que puedes rellenar con contenido.

También puedes utilizar un elemento grid-area para indicar en qué tercio quieres incluir el contenido: upper-third, middle-third o lower-third. Las áreas de la cuadrícula son útiles para modificar el lugar predeterminado en el que deben aparecer los elementos. Por ejemplo, si hay dos elementos en la capa, puedes indicar que el primer elemento se incluya en grid-area="upper-third" y el segundo en grid-area="lower-third".

<amp-story-grid-layer template="thirds">
  <h1 grid-area="upper-third">element 1</h1>
  <p grid-area="lower-third">element 2</p>
</amp-story-grid-layer>

Completar la portada

Ahora que conoces las plantillas de capas, vamos a completar la segunda capa de la portada.

Para la capa 2, vamos a colocar el título y la firma en la parte superior de la página y de forma consecutiva. Por lo tanto, utilizaremos la plantilla vertical. La segunda capa amp-story-grid-layer va después de la primera, por lo que el código que utilizaremos será así:

<amp-story-grid-layer>
 <!--our first layer -->
</amp-story-grid-layer>
<amp-story-grid-layer template="vertical">
  <h1>The Joy of Pets</h1>
  <p>By AMP Tutorials</p>
</amp-story-grid-layer>

Actualiza la página del navegador y revisa el trabajo realizado. La portada está terminada.

Capítulo anterior Siguiente capítulo