AMP

Criar a página de abertura

As páginas de histórias AMP são representadas pelo componente <amp-story-page>. Em um amp-story, é possível ter um ou mais componentes <amp-story-page> com cada uma das telas da história. A primeira página que você especificar na ordem do documento será a primeira página exibida na história.

Para criar uma página, adicione o elemento <amp-story-page> como filho de um amp-story. Atribua um código exclusivo à página. Para nossa primeira página, que será a de abertura, atribuiremos um código exclusivo chamado cover:

<amp-story standalone
    title="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>

Agora temos o shell da nossa página de abertura. No entanto, a história ainda não é válida. É preciso especificar pelo menos uma camada na página.

Camadas em uma página

Assim como as camadas em gráficos, você pode usar camadas em páginas de histórias AMP para criar efeitos visuais. As camadas são posicionadas umas em cima das outras. Assim, a primeira será a camada inferior, a próxima camada será posicionada em cima dela e assim por diante.

Nossa página de abertura é composta por duas camadas:

  • Camada 1: uma imagem que serve como pano de fundo
  • Camada 2: o título e a autoria da história

Criar a camada 1

Vamos adicionar a primeira camada à página de abertura. Essa camada contém uma imagem que preenche a tela.

Crie essa camada adicionando o elemento <amp-story-grid-layer> como filho de <amp-story-page>. Como a ideia é que a imagem preencha a tela, especifique o atributo template="fill" para amp-story-grid-layer. Dentro da camada, adicione um elemento amp-img ao arquivo cover.jpg e certifique-se de que ele seja responsivo (ou seja, layout="responsive") com as dimensões de 720 x 1280 px da imagem. A camada terá esta aparência:

<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>

Vejamos como a página é exibida. Abra a página no navegador: http://localhost:8000/pets.html.

Ela terá esta aparência:

Criar a camada 2

Já temos nosso pano de fundo. Agora, precisamos da segunda camada, que fica em cima do pano de fundo e contém o título e a autoria. Para adicionar a segunda camada, realizaremos as mesmas tarefas da criação da camada 1, mas, em vez de usar o modelo fill, usaremos o modelo vertical. No entanto, antes de continuar, vamos conhecer os modelos e aprender como podemos organizar os elementos AMP e HTML em um <amp-story-grid-layer>.

Inserir elementos em um modelo

O elemento <amp-story-grid-layer> insere os respectivos elementos filhos em uma grade com base na grade CSS (em inglês). Para indicar como você quer organizar os filhos, é preciso especificar um dos seguintes modelos de layout:

Modelo: preenchimento
O modelo de preenchimento preenche a tela com o primeiro elemento filho na camada. Nenhum outro filho é mostrado nessa camada.

O modelo de preenchimento é bom para planos de fundo, incluindo imagens e 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>
Modelo: vertical
O modelo vertical posiciona os elementos filhos no eixo y. Os elementos são alinhados no topo da tela e a ocupam completamente ao longo do eixo x.

O modelo vertical é ideal quando o objetivo é empilhar elementos verticalmente, um após o outro.

<amp-story-grid-layer template="vertical">
  <p>element 1</p>
  <p>element 2</p>
  <p>element 3</p>
</amp-story-grid-layer>
Modelo: horizontal
O modelo horizontal posiciona os elementos filhos no eixo x. Eles são alinhados no início da tela e a ocupam completamente ao longo do eixo y.

O modelo horizontal funciona bem quando o objetivo é empilhar elementos horizontalmente, um após o outro.

<amp-story-grid-layer template="horizontal">
  <p>element 1</p>
  <p>element 2</p>
  <p>element 3</p>
</amp-story-grid-layer>
Modelo: terços
O modelo de terços divide a tela em três linhas de mesmo tamanho e permite alocar conteúdo em cada uma das áreas.

Também é possível especificar uma área de grade nomeada para indicar em que terço você quer que o conteúdo esteja: no terço superior, no terço intermediário ou no terço inferior. As áreas de grade nomeadas são úteis para alterar o comportamento padrão de onde os elementos aparecem. Por exemplo, se houver dois elementos em uma camada, você pode especificar que o primeiro elemento esteja no grid-area="upper-third" e que o segundo elemento esteja no 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>

Concluir a página de abertura

Agora que você conhece os modelos de camadas, vamos concluir a segunda camada da página de abertura.

Para a camada 2, vamos posicionar o título e a autoria na parte superior, e queremos que os elementos estejam um após o outro, por isso, especificaremos o modelo vertical. Nosso segundo elemento amp-story-grid-layer seguirá o primeiro, da seguinte forma:

<amp-story-grid-layer>
<!--nossa primeira camada -->
</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>

Atualize o navegador e revise seu trabalho. A página de abertura está pronta.