Páginas AMP bonitas, interativas e canônicas

A tecnologia AMP facilita a criação de páginas da Web confiáveis, responsivas e de melhor desempenho. Com a tecnologia AMP, você pode criar interações comuns no site sem programar JavaScript. O site amp.dev inclui modelos predefinidos de início rápido.

O que você vai criar

Neste codelab, você criará uma página AMP totalmente responsiva, interativa e bonita que incorpora muitos dos recursos e componentes estendidos da AMP:

  • Navegação responsiva
  • Imagem de capa principal da página inteira
  • Imagens responsivas
  • Vídeo com reprodução automática
  • Incorporações como o Instagram
  • Ações e seletores
  • Vinculação de dados com amp-bind.
  • Efeitos visuais com amp-fx-collection e amp-animation

O que é necessário

  • Um navegador da Web moderno
  • Node.js e um editor de texto ou acesso ao CodePen ou a um playground on-line semelhante
  • Conhecimento básico de HTML, CSS, JavaScript e das Ferramentas para desenvolvedores do Google Chrome

Ferramentas para exibir conteúdo

Usaremos o Node.js para executar um servidor HTTP local a fim de veicular nossa página AMP. Confira o site do Node.js para saber como instalá-lo.

Nossa ferramenta escolhida para veicular conteúdo localmente será o serve, um servidor de conteúdo estático baseado em Node.js. Para instalá-lo, execute este comando:

npm install -g serve

Fazer o download de um modelo do amp.dev

Os modelos de AMP são um repositório de modelos e componentes AMP de início rápido para ajudar você a criar páginas AMP modernas e responsivas rapidamente.

Acesse Modelos AMP e faça o download do código do modelo "quot;Simple Article" "The Best'’s Best Animal Photos"

Como executar o código do modelo

Extraia o conteúdo do arquivo ZIP.

Execute o comando serve dentro da pasta article para exibir os arquivos localmente.

Acesse http://localhost:5000/templates/article.amp.html no navegador. A porta pode ser 3000 ou um número diferente, dependendo da versão do serve. Verifique o endereço exato no console.

Durante esse processo, vamos abrir o Chrome DevTools e alternar o modo Dispositivo também.

Cortar o código do modelo

Neste ponto, estruturamos uma página AMP que funciona principalmente, mas o objetivo deste codelab é aprender e praticar.

Exclua tudo de <body></body>.

Agora ficou a página vazia, contendo apenas alguns códigos boilerplate:

Durante este codelab, você adicionará muitos componentes a esta página vazia, recriando parcialmente o modelo com outras funcionalidades.

As páginas AMP são HTML, com tags extras e algumas restrições para um desempenho confiável.

As tags HTML são substituídas por tags HTML comuns, mas algumas são substituídas por tags específicas a AMPs. Esses elementos personalizados, chamados de componentes HTML para AMP, facilitam a implementação de padrões comuns de maneira eficiente.

O arquivo HTML para AMP mais simples tem a seguinte aparência, às vezes chamado de AMP padrão:

<!doctype html>
<html ⚡>
 <head>
   <meta charset="utf-8">
   <link rel="canonical" href="hello-world.html">
   <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
   <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
   <script async src="https://cdn.ampproject.org/v0.js"></script>
 </head>
 <body>Hello World!</body>
</html>

Veja o código da página vazia que você criou durante a configuração, que inclui esse código clichê e inclui algumas informações adicionais. Uma tag <style amp-custom> que inclui muitos CSS reduzidos é importante.

A tecnologia AMP não opina sobre o design e não aplica um conjunto específico de estilos. A maioria dos componentes AMP tem um estilo muito básico. Os autores das páginas devem deixar um CSS personalizado. É aí que a <style amp-custom> entra em jogo.

Os modelos de AMP, no entanto, oferecem estilos estilosos de CSS que são bonitos, em vários navegadores e responsivos para ajudar você a criar páginas AMP elegantes rapidamente. O código do modelo transferido por download inclui estes estilos CSS rigorosos em <style amp-custom>.

Vamos começar adicionando alguns dos componentes que removemos do modelo para criar um shell para nossa página, incluindo um menu de navegação, uma imagem de cabeçalho e um título.

Receberemos ajuda da página Componentes da IU de início da AMP, mas não nos aprofundaremos nos detalhes de implementação dessas páginas. Nas próximas etapas do codelab, você terá muitas oportunidades.

Adicionar navegação responsiva

Acesse https://ampstart.com/components#navigation e copie e cole o código HTML fornecido para o MENUBAR RESPONSIVO na body da página.

O código fornecido pelo AMP Start inclui a estrutura de classe HTML e CSS necessária para implementar uma barra de navegação responsiva na sua página.

Faça um teste: redimensione sua janela para ver como ela responde a diferentes tamanhos de tela.

Esse código usa consultas de mídia CSS e os componentes AMP amp-sidebar e amp-accordion.

Adicionar imagem principal e título

O AMP Start também oferece snippets prontos para uso para imagens e títulos principais e responsivos.

Acesse https://ampstart.com/components#media e copie e cole o código HTML fornecido para o Hero de página inteira no seu código, logo depois do <!-- End Navbar --> comment em body..

Vamos atualizar a imagem e o título agora.

Talvez você tenha percebido que há duas tags amp-img diferentes no snippet de código. Um é usado para larguras menores e deve apontar para uma imagem de resolução mais baixa, e o outro para telas maiores. Elas são alternadas automaticamente com base no atributo media, que é compatível com todas as AMP.

Atualize src, width e height para imagens diferentes e o título como "Most Beautiful Hikes in the Pacific Northwest" substituindo a <figure>...</figure> existente por:

<figure class="ampstart-image-fullpage-hero m0 relative mb4">
    <amp-img width="600" height="900" layout="responsive" src="https://unsplash.it/600/900?image=1003" media="(max-width: 415px)"></amp-img>
    <amp-img height="1800" layout="fixed-height" src="https://unsplash.it/1200/1800?image=1003" media="(min-width: 416px)"></amp-img>
    <figcaption class="absolute top-0 right-0 bottom-0 left-0">
      <header class="p3">
        <h1 class="ampstart-fullpage-hero-heading mb3">
        <span class="ampstart-fullpage-hero-heading-text">
          Most Beautiful Hikes in the Pacific Northwest
        </span>
      </h1>
        <span class="ampstart-image-credit h4">
        By <a href="#" role="author" class="text-decoration-none">D.F. Roy</a>,<br> January 14, 2017
      </span>
      </header>
      <footer class="absolute left-0 right-0 bottom-0">
        <a class="ampstart-readmore py3 caps line-height-2 text-decoration-none center block h5" href="#content">Read more</a>
      </footer>
    </figcaption>
</figure>

Vamos dar uma olhada na página agora:

Resumo

  • Você criou um shell para sua página, incluindo uma navegação responsiva, uma imagem principal e um título.
  • Você aprendeu mais sobre modelos de AMP e usou os componentes da IU de início do AMP para criar um shell de página rapidamente.

O código completo desta seção pode ser encontrado aqui: http://codepen.io/aghassemi/pen/RpRdzV

Nesta seção, adicionaremos imagens responsivas, vídeos, incorporações e textos à nossa página.

Vamos adicionar um elemento main que hospedará o conteúdo da página. Vamos adicionar ao fim de body:

<main id="content">

</main>

Adicionar cabeçalhos e parágrafos

Adicione o código a seguir ao main:

<h2 class="px3 pt2 mb2">Photo Gallery</h2>
<p class="ampstart-dropcap mb4 px3">Vivamus viverra augue libero, vitae dapibus lectus accumsan eget. Pellentesque eget ipsum purus. Maecenas leo odio, ornare nec ex id, suscipit porta ipsum. Ut fringilla semper cursus.</p>

Como as páginas AMP são apenas HTML, não há nada de especial nesse código, exceto os nomes de classes CSS. O que são px3, mb2 e ampstart-dropcap? De onde eles vêm?

Essas classes não fazem parte do HTML para AMP. Os modelos de início de AMP usam o Basscss para fornecer um kit de ferramentas CSS de baixo nível e adicionar classes específicas ao AMP Start.

Neste snippet, px3 e mb2 são definidos pelo Basscss e são convertidos em padding-left-right e margin-bottom, respectivamente. ampstart-dropcap é fornecido pelo AMP Start e aumenta a primeira letra de um parágrafo.

Você pode encontrar a documentação dessas classes CSS predefinidas em http://basscss.com/ e https://ampstart.com/components.

Vejamos como a página está agora:

Adicionar uma imagem

Criar páginas responsivas é fácil na AMP. Em muitos casos, tornar um componente AMP responsivo é tão simples quanto adicionar um atributo layout="responsive". Assim como a tag HTML img, o amp-img também oferece suporte a srcset para especificar imagens diferentes para diferentes larguras de janela de visualização e densidades de pixel.

Adicione um amp-img ao main:

<amp-img 
  layout="responsive" width="1080" height="720"
  srcset="https://unsplash.it/1080/720?image=1043 1080w, https://unsplash.it/720/480?image=1043 720w" 
  alt="Photo of mountains and trees landscape">
</amp-img>

Com esse código, criamos uma imagem responsiva especificando layout="responsive" e fornecendo width e height..

Por que preciso especificar largura e altura ao usar o layout responsivo?

Por dois motivos:

  1. As páginas AMP usam a largura e a altura para calcular a proporção e manter a altura correta conforme a largura muda para se ajustar ao contêiner pai.
  2. As AMP impõem um dimensionamento estático para todos os elementos para garantir uma boa experiência do usuário (sem saltos na página) e determinar o tamanho e a posição de cada elemento para exibir a página antes do download dos recursos.

Vamos dar uma olhada na página agora:

Adicionar um vídeo de reprodução automática

As páginas AMP são compatíveis com muitos players de vídeo, como o YouTube e o Vimeo. A AMP tem a própria versão do elemento HTML5 video no componente estendido amp-video. Alguns desses players de vídeo, incluindo amp-video e amp-youtube, também são compatíveis com a reprodução automática sem som em dispositivos móveis.

Semelhante a amp-img, amp-video pode se tornar responsivo com a adição de layout="responsive".

Vamos adicionar um vídeo de reprodução automática à nossa página.

Adicione outro parágrafo e o seguinte elemento amp-video a main:

<p class="my2 px3">Vivamus viverra augue libero, vitae dapibus lectus accumsan eget. Pellentesque eget ipsum purus. Maecenas leo odio, ornare nec ex id, suscipit porta ipsum. Ut fringilla semper cursus.</p>

<amp-video 
  layout="responsive" width="1280" height="720"
  autoplay controls loop
  src="https://storage.googleapis.com/ampconf-76504.appspot.com/Bullfinch%20-%202797.mp4">
</amp-video>

Vamos analisar:

Adicionar uma incorporação

As páginas AMP têm componentes estendidos para muitas incorporações de terceiros, como Twitter e Instagram. Para as incorporações que não têm um componente AMP, sempre há amp-iframe.

Vamos adicionar uma incorporação do Instagram à nossa página.

Diferente de amp-img e amp-video, amp-instagram não é um componente integrado. A tag de script de importação precisa ser incluída explicitamente no head da página AMP para que o componente possa ser usado.

O código boilerplate das AMP Start que usamos inclui várias tags de script de importação. Procure-as no início da tag head e inclua a seguinte linha de script de importação:

<script custom-element="amp-instagram" src="https://cdn.ampproject.org/v0/amp-instagram-0.1.js" async></script>

Adicione outro parágrafo e o seguinte elemento amp-instagram a main:

<p class="my2 px3">Vivamus viverra augue libero, vitae dapibus lectus accumsan eget. Pellentesque eget ipsum purus. Maecenas leo odio, ornare nec ex id, suscipit porta ipsum. Ut fringilla semper cursus.</p>
    
<amp-instagram
   layout="responsive" width="566" height="708"
   data-shortcode="BJ_sPxzAGyg">
</amp-instagram>

Vamos analisar:

Provavelmente, isso é conteúdo suficiente por enquanto.

Resumo

  • Você aprendeu sobre os componentes responsivos nas AMP.
  • Você adicionou tipos diferentes de conteúdo de mídia e de texto.

O código completo desta seção pode ser encontrado aqui: http://codepen.io/aghassemi/pen/OpXGoa

Até o momento, criamos somente conteúdo estático para nossa página. Nesta seção, criaremos uma galeria de fotos interativa usando componentes como um carrossel, um lightbox e ações de AMP.

Embora as páginas AMP não sejam compatíveis com JavaScript personalizado, elas ainda expõem vários elementos básicos para receber e processar as ações do usuário.

Manter todas as imagens da nossa página AMP focada em fotos visíveis na página não cria uma ótima experiência para o usuário. Felizmente, podemos usar o amp-carousel para criar slides deslizantes horizontalmente com fotos.

Primeiro, vamos garantir que a tag de script para amp-carousel esteja incluída em head:

<script custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js" async></script>

Agora, vamos adicionar um amp-carousel responsivo do tipo slides com várias imagens ao main:.

<p class="my2 px3">Vivamus viverra augue libero, vitae dapibus lectus accumsan eget. Pellentesque eget ipsum purus. Maecenas leo odio, ornare nec ex id, suscipit porta ipsum. Ut fringilla semper cursus.</p>

<amp-carousel 
  layout="responsive" width="1080" height="720"
  type="slides">

    <amp-img src="https://unsplash.it/1080/720?image=1037" layout="fill"></amp-img>
    <amp-img src="https://unsplash.it/1080/720?image=1038" layout="fill"></amp-img>
    <amp-img src="https://unsplash.it/1080/720?image=1039" layout="fill"></amp-img>
    <amp-img src="https://unsplash.it/1080/720?image=1040" layout="fill"></amp-img>
    <amp-img src="https://unsplash.it/1080/720?image=1041" layout="fill"></amp-img>
    <amp-img src="https://unsplash.it/1080/720?image=1042" layout="fill"></amp-img>
    <amp-img src="https://unsplash.it/1080/720?image=1043" layout="fill"></amp-img>
    <amp-img src="https://unsplash.it/1080/720?image=1044" layout="fill"></amp-img>
</amp-carousel>

O type="slides" garante que apenas uma imagem fique visível por vez e permite que os usuários deslizem por elas.

Para as imagens do carrossel, usamos layout="fill", já que um carrossel de slides sempre preenche o próprio tamanho com o elemento filho. Portanto, não é necessário especificar um layout diferente que exija largura e altura.

Vamos testar e ver o resultado:

1, GIF

Agora, vamos adicionar um contêiner de rolagem horizontal para as miniaturas das imagens. Usaremos <amp-carousel> novamente, mas sem type="slides" e com um layout de altura fixa.

Adicione o código a seguir após o elemento amp-carousel anterior.

<amp-carousel layout="fixed-height" height="78" class="mt1">

    <amp-img src="https://unsplash.it/108/72?image=1037" layout="fixed" width="108" height="72"></amp-img>
    <amp-img src="https://unsplash.it/108/72?image=1038" layout="fixed" width="108" height="72"></amp-img>
    <amp-img src="https://unsplash.it/108/72?image=1039" layout="fixed" width="108" height="72"></amp-img>
    <amp-img src="https://unsplash.it/108/72?image=1040" layout="fixed" width="108" height="72"></amp-img>
    <amp-img src="https://unsplash.it/108/72?image=1041" layout="fixed" width="108" height="72"></amp-img>
    <amp-img src="https://unsplash.it/108/72?image=1042" layout="fixed" width="108" height="72"></amp-img>
    <amp-img src="https://unsplash.it/108/72?image=1043" layout="fixed" width="108" height="72"></amp-img>
    <amp-img src="https://unsplash.it/108/72?image=1044" layout="fixed" width="108" height="72"></amp-img>

</amp-carousel>

Para as imagens em miniatura, usamos layout="fixed" e versões de baixa resolução das mesmas fotos.

Vamos analisar:

Mudar a imagem quando o usuário toca em uma miniatura

Para fazer isso, precisamos vincular eventos, como tap, a ações, como mudar o slide.

evento: podemos usar o atributo on para instalar manipuladores de eventos em um elemento, e o evento tap é compatível com todos os elementos.

ação: amp-carousel expõe uma ação goToSlide(index=INTEGER) que podemos chamar do manipulador de eventos de toque de cada imagem em miniatura.

Agora que sabemos do evento e da ação, vamos juntá-los.

Primeiro, precisamos dar ao carrossel de slides um id para podermos referenciá-lo usando o manipulador de eventos de toque nas miniaturas.

Modifique seu código para adicionar um atributo id ao carrossel de slides (o primeiro):

<amp-carousel 
  id="imageSlides"
  type="slides"

  ....

Agora, vamos instalar o manipulador de eventos (on="tap:imageSlides.goToSlide(index=<slideNumber>)")" em cada imagem de miniatura):

<amp-img on="tap:imageSlides.goToSlide(index=0)" role="button" tabindex="1" layout="fixed" ...
<amp-img on="tap:imageSlides.goToSlide(index=1)" role="button" tabindex="1" layout="fixed" ...
<amp-img on="tap:imageSlides.goToSlide(index=2)" role="button" tabindex="1" layout="fixed" ...
...

Também precisamos definir um tabindex e definir o ARIA role para acessibilidade.

Pronto. Tocar em cada imagem em miniatura mostra a imagem correspondente no carrossel de slides.

2, GIF

Destacar a miniatura quando o usuário tocar nela

Podemos fazer isso? Parece que não há ações para alterar classes CSS de um elemento para chamar dos manipuladores de eventos de toque. Então, como podemos destacar a miniatura selecionada?

<amp-selector> ao resgate!

O amp-selector é diferente dos componentes que usamos até agora. Ele não é um componente de apresentação, porque não afeta o layout da página. Ele é um componente fundamental que permite que a página AMP saiba qual opção o usuário selecionou.

O que amp-selector faz é bem simples, mas poderoso:

  • amp-selector pode conter qualquer elemento HTML arbitrário ou componentes AMP.
  • Qualquer elemento descendente de amp-selector pode se tornar uma opção se tiver um atributo option=<value>.
  • Quando um usuário toca em um elemento que é uma opção, o amp-selector apenas adiciona um atributo selected a esse elemento e o remove de outros elementos de opção no modo de seleção única.
  • É possível definir o estilo do elemento selecionado no CSS personalizado segmentando o atributo selected com um seletor de atributo do CSS.

Vamos ver como isso nos ajuda a realizar a tarefa em questão.

Adicione a tag de script para amp-selector a head:

<script custom-element="amp-selector" src="https://cdn.ampproject.org/v0/amp-selector-0.1.js" async></script>
  1. Unir o carrossel de miniaturas em uma amp-selector
  2. Faça com que cada miniatura seja uma opção adicionando um atributo option=<value>.
  3. Faça com que a primeira miniatura seja selecionada por padrão adicionando o atributo selected.
<amp-selector>

  <amp-carousel layout="fixed-height" height="78" class="mt1">

    <amp-img option=0 selected on="tap:imageSlides.goToSlide(index=0)" ...
      
    <amp-img option=1 on="tap:imageSlides.goToSlide(index=1)" ...

    ...

  </amp-carousel>

</amp-selector>

Agora, é necessário adicionar um estilo para destacar a miniatura selecionada.

Adicione o seguinte CSS personalizado em <style amp-custom> após o código boilerplate de CSS minificado após a inicialização da AMP:

<style amp-custom>
...

/* low opacity for non-selected thumbnails */
amp-selector amp-img[option] {
  opacity: 0.4;
}

/* normal opacity for the selected thumbnail */
amp-selector amp-img[option][selected] {
  opacity: 1;
}

</style>

Vamos analisar:

3.gif

Parece bom, mas você notou um bug?

Se o usuário deslizar o carrossel, a miniatura selecionada não será atualizada para refletir isso. Como podemos vincular o slide atual no carrossel à miniatura selecionada?

Na próxima seção, veremos como fazer isso.

Resumo

  • Você aprendeu sobre os diferentes tipos de carrossel e como usá-los.
  • Você usou eventos e ações AMP para mudar o slide visível no carrossel quando o usuário toca em uma imagem em miniatura.
  • Você aprendeu sobre a amp-selector e como ela pode ser usada como um elemento básico para implementar casos de uso interessantes.

O código completo desta seção pode ser encontrado aqui: http://codepen.io/aghassemi/pen/gmMJMy

Nesta seção, usaremos o amp-bind para melhorar a interatividade da galeria de imagens da seção anterior.

O que é o valor amp-bind?

O principal componente de AMP amp-bind permite que você crie interatividade personalizada com expressões e vinculações de dados.

amp-bind tem três partes principais:

  1. Estado
  2. Vinculação
  3. Mutação

Estado é uma variável de estado de aplicativo que contém qualquer valor de um único valor para uma estrutura de dados complexa. Todos os componentes podem ler e gravar nesta variável compartilhada.

Vinculação é uma expressão que vincula o estado a um atributo HTML ou ao conteúdo de um elemento.

Mutação é a ação de mudar o valor do estado como resultado de uma ação ou evento do usuário.

A potência de amp-bind é iniciada quando ocorre uma mutação: todos os componentes que têm uma vinculação a esse estado serão notificados e atualizados automaticamente para refletir o novo estado.

Vamos ver como ela funciona.

Anteriormente, usamos ações AMP (por exemplo, goToSlide()) para vincular o carrossel de slides em imagem inteira a um evento tap nas imagens em miniatura e usamos amp-selector para destacar a miniatura selecionada.

Vamos ver como reimplementar completamente esse código usando a abordagem amp-bind para vinculação de dados.

Mas antes de começarmos a programar, vamos criar a abordagem:

1. Qual é nosso estado?

No nosso caso, o único valor que importa é o número do slide atual. Portanto, selectedSlide é o nosso estado.

2. Quais são nossas vinculações?

O que precisa mudar quando selectedSlide mudar?

  • A slide visível do carrossel de imagem completa: 
<amp-carousel [slide]="selectedSlide" ...
  • O item selected em amp-selector também precisa ser alterado. Isso vai corrigir o bug que encontramos na seção anterior.
<amp-selector [selected]="selectedSlide" ...

3. Quais são nossas mutações?

Quando o selectedSlide precisa ser alterado?

  • Veja o que acontece quando o usuário muda para um novo slide no carrossel com imagem cheia:
<amp-carousel on="slideChange:AMP.setState({selectedSlide:event.index})" ...
  • Quando o usuário seleciona uma miniatura:
<amp-selector on="select:AMP.setState({selectedSlide:event.targetOption})" ...

Vamos usar AMP.setState para acionar uma mutação, o que significa que não precisamos mais de todo o código do on="tap:imageSlides.goToSlide(index=n)" que tínhamos em miniatura.

Vamos reunir tudo:

Adicione a tag de script para amp-bind a head:

<script custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js" async></script>

Substitua o código da galeria existente pela nova abordagem:

<amp-carousel [slide]="selectedSlide" on="slideChange:AMP.setState({selectedSlide:event.index})" type="slides" id="imageSlides" layout="responsive" width="1080" height="720">

  <amp-img src="https://unsplash.it/1080/720?image=1037" layout="fill"></amp-img>
  <amp-img src="https://unsplash.it/1080/720?image=1038" layout="fill"></amp-img>
  <amp-img src="https://unsplash.it/1080/720?image=1039" layout="fill"></amp-img>
  <amp-img src="https://unsplash.it/1080/720?image=1040" layout="fill"></amp-img>
  <amp-img src="https://unsplash.it/1080/720?image=1041" layout="fill"></amp-img>
  <amp-img src="https://unsplash.it/1080/720?image=1042" layout="fill"></amp-img>
  <amp-img src="https://unsplash.it/1080/720?image=1043" layout="fill"></amp-img>
  <amp-img src="https://unsplash.it/1080/720?image=1044" layout="fill"></amp-img>

</amp-carousel>


<amp-selector [selected]="selectedSlide" on="select:AMP.setState({selectedSlide:event.targetOption})">

  <amp-carousel layout="fixed-height" height="78" class="mt1">

    <amp-img option=0 selected src="https://unsplash.it/108/72?image=1037" layout="fixed" width="108" height="72"></amp-img>
    <amp-img option=1 src="https://unsplash.it/108/72?image=1038" layout="fixed" width="108" height="72"></amp-img>
    <amp-img option=2 src="https://unsplash.it/108/72?image=1039" layout="fixed" width="108" height="72"></amp-img>
    <amp-img option=3 src="https://unsplash.it/108/72?image=1040" layout="fixed" width="108" height="72"></amp-img>
    <amp-img option=4 src="https://unsplash.it/108/72?image=1041" layout="fixed" width="108" height="72"></amp-img>
    <amp-img option=5 src="https://unsplash.it/108/72?image=1042" layout="fixed" width="108" height="72"></amp-img>
    <amp-img option=6 src="https://unsplash.it/108/72?image=1043" layout="fixed" width="108" height="72"></amp-img>
    <amp-img option=7 src="https://unsplash.it/108/72?image=1044" layout="fixed" width="108" height="72"></amp-img>

  </amp-carousel>

</amp-selector>

Vamos testá-lo. Toque em uma miniatura para os slides de imagem mudarem. Deslize os slides de imagem para que a miniatura destacada mude.

4.gif

Adicionar texto à galeria

Já fizemos o trabalho pesado para definir e modificar um estado para o slide atual. Agora podemos disponibilizar vinculações adicionais para atualizar outras informações com base no número de slides atual.

Vamos adicionar o texto de &imagem de y/quot; a nossa galeria:

Adicione o seguinte código acima do elemento do carrossel de slides:

<div class="px3">Image <span [text]="1*selectedSlide + 1">1</span> of 8</div>

Desta vez, vamos vincular o texto interno de um elemento usando [text]= em vez de vincular a um atributo HTML.

Faça um teste:

5, GIF.

Resumo

  • Você aprendeu sobre amp-bind.
  • Você usou amp-bind para implementar uma versão melhorada da galeria de imagens.

O código completo desta seção pode ser encontrado aqui: http://codepen.io/aghassemi/pen/MpeMdL

Nesta seção, usaremos dois novos recursos para adicionar animações à nossa página.

Adicionar um efeito de paralaxe ao título

A amp-fx-collection é uma extensão que oferece uma coleção de efeitos visuais predefinidos, como paralaxe, que podem ser facilmente ativados em qualquer elemento com atributos.

Com o efeito paralaxe, conforme o usuário rola a página, a rolagem do elemento é mais rápida ou mais lenta, dependendo do valor atribuído ao atributo.

O efeito paralaxe pode ser ativado adicionando o atributo amp-fx="parallax" data-parallax-factor="<a decimal factor>" a qualquer elemento HTML ou AMP.

  • Um valor de fator maior que 1 agiliza a rolagem do elemento quando o usuário rola a página para baixo.
  • Um valor de fator menor que 1 diminui a rolagem do elemento quando o usuário rola a página para baixo.

Vamos adicionar um efeito paralaxe com um fator de 1,5 ao título da nossa página e ver como ele fica.

Adicione a tag de script para amp-fx-collection a head:

<script custom-element="amp-fx-collection" src="https://cdn.ampproject.org/v0/amp-fx-collection-0.1.js" async></script>

Agora, encontre o elemento de título de cabeçalho existente no código e adicione o atributo amp-fx="parallax" and data-parallax-factor="1.5" a ele:

<header amp-fx="parallax" data-parallax-factor="1.5" class="p3">
  <h1 class="ampstart-fullpage-hero-heading mb3">
    <span class="ampstart-fullpage-hero-heading-text">
      Most Beautiful Hikes in the Pacific Northwest
    </span>
  </h1>
  <span class="ampstart-image-credit h4">
    By <a href="#" role="author" class="text-decoration-none">D.F. Roy</a>,<br> January 14, 2017
  </span>
</header>

Vamos analisar o resultado:

6, GIF.

Agora, o título está rolando mais rápido do que o restante da página. Legal!

Adicionar animação à página

A amp-animation é um recurso que leva a API Web Animations para páginas AMP.

Nesta seção, usaremos o amp-animation para criar um efeito de zoom sutil para a imagem da capa.

Adicione a tag de script para amp-animation ao head:

<script custom-element="amp-animation" src="https://cdn.ampproject.org/v0/amp-animation-0.1.js" async></script>

Agora, precisamos definir a animação e o elemento de destino a que ela se aplica.

As animações são definidas como JSON em uma tag amp-animation de nível superior.

Insira o seguinte código diretamente abaixo da tag body de abertura na sua página.

<amp-animation trigger="visibility" layout="nodisplay">
    <script type="application/json">
      {
        "target": "heroimage",
        "duration": 30000,
        "delay": 0, 
        "fill": "forwards",
        "easing": "ease-out",
        "keyframes": {"transform":  "scale(1.3)"}
      }
      </script>
</amp-animation>

Esse código define uma animação que é executada por 30 segundos sem atraso e dimensiona a imagem para que ela seja 30% maior.

Definimos um fill para frente para permitir que a imagem permaneça ampliada após o término da animação. target é o HTML id do elemento em que a animação será aplicada.

Vamos adicionar um id ao elemento de imagem principal na nossa página para que amp-animation possa agir sobre ele.

  1. Localize a imagem principal existente (a de alta resolução com layout="fixed-height") no código e adicione id="heroimage" à tag amp-img.
  2. Para simplificar, exclua media="(min-width: 416px)" e remova a outra amp-img de baixa resolução para que não seja necessário processar várias animações e consultas de mídia no amp-animation por enquanto.
<figure class="ampstart-image-fullpage-hero m0 relative mb4">

    <amp-img id="heroimage" height="1800" layout="fixed-height" src="https://unsplash.it/1200/1800?image=1003"></amp-img>

    <figcaption class="absolute top-0 right-0 bottom-0 left-0">

...

Como você pode ter observado, dimensionar a imagem fará com que ela ultrapasse o pai. Portanto, precisamos corrigir isso ocultando o estouro.

Adicione a seguinte regra CSS ao final do <style amp-custom> existente:

.ampstart-image-fullpage-hero {
  overflow: hidden;
}

Vamos testar e ver o resultado:

7, GIF.

Sutil,

Mas eu poderia ter feito isso com CSS mesmo assim. Qual é o objetivo de amp-animation?

Nesse caso, isso é verdade, mas amp-animation permite uma funcionalidade extra que não pode ser feita somente com CSS. Por exemplo, a animação pode ser acionada com base na visibilidade (e pausada com base na visibilidade) ou com uma ação das AMP. A amp-animation também é baseada na API Web Animations, que tem mais recursos do que animações CSS, especialmente em relação à função que pode ser composta.

Resumo

  • Você aprendeu a criar efeitos de paralaxe com o amp-fx-collection.
  • Você aprendeu sobre amp-animation.

O código completo desta seção pode ser encontrado aqui: http://codepen.io/aghassemi/pen/OpXKzo

Você terminou de criar uma página AMP bonita e interativa.

Para comemorar, vamos rever tudo que você conquistou hoje.

Este é um link para a página final: http://s.codepen.io/aghassemi/debug/OpXKzo

... e o código final: http://codepen.io/aghassemi/pen/OpXKzo.

Sem título.gif

O conjunto de entradas do CodePen para este codelab pode ser encontrado aqui: https://codepen.io/collection/XzKmNB/

Ah, antes de sair...

Lembre-se de verificar a aparência da nossa página em outros formatos, como um tablet no modo paisagem.

Vamos ver:

Sem título.gif

Excelente!

Tenha um lindo dia.

Qual é a próxima etapa?

Este codelab aborda apenas o que for possível nas AMP. Existem muitos recursos e codelabs disponíveis para ajudar você a criar páginas AMP incríveis:

Se você tiver dúvidas ou problemas, acesse o canal AMP Slack ou crie discussões, relatórios de bugs ou solicitações de recursos no GitHub.