AMP

Adicionar outras páginas

Você já sabe como adicionar páginas a uma história AMP. Para incluir as próximas páginas da nossa história "A alegria de ter animais de estimação", o processo é bem parecido. Com base nas informações abaixo, crie as páginas restantes usando o que você aprendeu até agora. Se você tiver dúvidas, veja o código completo (pets-completed.html) (em inglês).

Cada página precisa de um atributo "id" exclusivo (por exemplo, id="page1").

Página 1: gatos

Demonstra como exibir imagem e texto em uma única camada.

  • Contém uma camada:
    • Implementa o modelo vertical.
    • Contém três elementos:
      • um elemento <h1> com o título: Cats
      • um componente amp-img responsivo (cat.jpg, 720 x 1280 px)
      • um elemento <q> com a seguinte mensagem: "Dogs come when they're called. Cats take a message and get back to you." — Mary Bly

Página 2: cachorros

Demonstra como definir a disposição do texto e exibir uma imagem com duas camadas que preenche a tela inteira.

  • Contém duas camadas:
    • Camada 1: implementa o modelo fill e contém um componente amp-img responsivo (dog.jpg, 720 x 1280 px).
    • Camada 2: implementa o modelo thirds e contém dois elementos:
      • um elemento <h1> com o título: Dogs
      • um elemento <p> que especifica uma grid-area ocupando a parte inferior da tela, o lower-third, e inclui o seguinte 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ássaros

Demonstra como definir a disposição do texto, exibir uma imagem que preenche a tela inteira e reproduzir áudio em segundo plano na página.

  • Contém três camadas:
    • Camada 1: implementa o modelo fill e contém um componente amp-img responsivo (bird.jpg, 720 x 1280 px).
    • Camada 2: implementa o modelo vertical e contém:
      • um elemento <h1> com o título: Birds
    • Camada 3: implementa o modelo vertical e contém:
      • um elemento <q> com o seguinte texto: "A bird is three things: Feathers, flight and song, And feathers are the least of these." — Marjorie Allen Seiffert
      • Essa terceira camada especifica class="bottom" para alinhar os elementos filhos à parte inferior da tela.
  • Um arquivo de áudio tocará em segundo plano quando a página for exibida. Ele pode continuar por toda a história ou acompanhar uma única página. Para usar áudio em uma página, adicione o atributo background-audio="assets/bird-singing.mp3" ao elemento <amp-story-page>.

Página 4: coelhos

Demonstra como definir a disposição do texto e exibir um vídeo que preenche a tela inteira na página.

  • Contém três camadas:
    • Camada 1: implementa o modelo fill e contém um componente amp-video responsivo (rabbit.mp4).
      • Para exibir o vídeo, inclua o script necessário do componente amp-video na seção <head>.
      • Especifique uma imagem de poster (rabbit.jpg). Esse atributo é obrigatório para histórias AMP.
      • Defina a exibição automática do vídeo com o atributo autoplay. Esse atributo é obrigatório para histórias AMP.
      • Configure o vídeo para voltar ao início automaticamente com o atributo loop.
      • Defina as dimensões como width="720" height="1280" e layout="responsive".
    • Camada 2: implementa o modelo vertical e contém um item:
      • um elemento <h1> com o título: Rabbits
    • Camada 3: implementa o modelo vertical e contém um item:
      • um elemento <p> com o seguinte texto: Rabbits can learn to follow simple voice commands and come when called by name, and are curious and playful.
      • Aplique a classe CSS bottom à camada para alinhar os elementos filhos à parte inferior da tela.

Nossa história "A alegria de ter animais de estimação" está quase pronta. Usaremos animações na última página para mostrar todos os animais de estimação.