Como Criar uma Página AMP Básica do Zero

Portuguese (Português) translation by Erick Patrick (you can also view the original English article)

O Projeto AMP é uma iniciativa de código aberta recém lançada, apoiada pelo Google, com o intuito de tornar os sites mais rápidos, particularmente aqueles que usam muita mídia e/ou precisam de monetização. Essencialmente, é uma forma "sem enrolação" de usar certa otimizações complexas, com a maior parte do processo feita por trás dos panos.

No artigo Projeto AMP: Seus Sites Ficarão Mais Rápidos? falamos do que o AMP significa para nós, no ponto de vista dos desenvolvedores, e mostramos números para o tipo de ganho de velocidade que podemos ter.

Nesse tutoral, seremos mais práticos, com um guia passo-a-passo para criar, de verdade, uma página AMP do zero, explicando como realizar a maioria das tarefas comuns do jeito AMP e compartilhando algumas dicas.

Comecemos!

E o Código Base

Todo modelo AMP começa usando o código base. Há certos códigos que devem estar presentes em cada modelo AMP ou falhará a validação.

Criemos um arquivo HTML chamado index.html e adicionemos o seguinte:

<!doctype html>
<html amp lang="en">
  <head>
    <meta charset="utf-8">
    <title>Make an AMP Page</title>
    <link rel="canonical" href="/index.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>
    <h1>Make an AMP Page</h1>
  </body>
</html>

Pode-se ler a explicação de cada elemento logo abaixo:

Documentação do AMP: Marcação Obrigatória

Configurando uma Pré-Visualização via localhost

Podemos (se escolheremos) pré-visualizar nosso modelo AMP abrindo-o diretamente no navegador. Contudo, é sempre bom pré-visualizado em um ambiente de teste. Assim, simulamos um servidor web, e o ambiente que pré-visualizamos nosso modelo será mais próximo do ambiente final quando publicado.

Para isso, recomendamos o MAMP para Windows ou Mac. Se não tiver MAMP instalado, vá até o site do MAMP e o baixe.

Uma vez baixado, encontre as pasta htdocs dele. No Mac, geralmente fica em /Applications/MAMP/htdocs e no Windows em C:\MAMP\htdocs\.

Dentro dele, criemos uma pasta para nosso projeto, por exemplo, myproject. Então, movamos o index.html para dentro desse diretório.

Após executar o MAMP, poderemos pré-visualizar o modelo AMP visitando a URL http://localhost:8888/myproject/ no Chrome. Mesmo preferindo outro, usemos o Chrome já que usaremos as Ferramentas para Desenvoledores no próximo passo.

A nossa página AMP deveria parecer com isso:

Se formos a essa URL e não funcionar é possível que o MAMP esteja rodando em uma porta diferente da 8888 que vemos na URL. Para descobrir se esse é o caso, basta ir à interface do MAMP e clicar no botão que diz Abrir Página Inicial. Isso nos levará para a página de informações do MAMP e poderemos ver na URL a porta correta a se usar:

Ativando a Depuração

Antes de continuarmos, é bom ativar o modo de depuração do AMP, para sabermos na hora no caso de fazermos algo que não passe a validação.

Para tanto, adicionemos #development=1 ao fim da URL de pré-visualização: http://localhost:8888/myproject/#developmen=1.

Então abramos as Ferramentas para Desenvolvedores e selecionemos a aba Console, onde veremos a mensagem Powered by AMP ⚡ HTML... aparecer:

Ao criarmos nossa página, se algo não passar a validação do AMP, veremos uma mensagem de erro no console. Por hora, não temos erros, então vemos "AMP validation successful", permitindo-nos saber que tudo está funcionando corretamente.

Metadados JSON Opcionais

Além do código base que já usamos, temos a opção de adicionar alguns meta dados JSON ao cabeçalho, no formato do Schema.org, assim:

<script type="application/ld+json">
  {
    "@context": "http://schema.org",
    "@type": "NewsArticle",
    "headline": "Open-source framework for publishing content",
    "datePublished": "2015-10-07T12:02:41Z",
    "image": [
      "logo.jpg"
    ]
  }
</script>

Isso não é obrigatório para passar a validação do AMP, mas é essencial para ser bem visto por vários lugares, como Google Search News.

Para ler mais sobre esses meta dados visite:

Lidando com CSS em Linha

Um dos requerimentos do AMP é que todo CSS customizado seja colocado em linha na seção head, entre <style amp-custom>...</style>.

Apesar do requerimento, criar o CSS diretamente na seção head não é o melhor fluxo de trabalho. O que realmente precisamos é escrever nosso CSS em uma folha de estilo externa, como normalmente, e então embutir esse código diretamente na seção head dos vários arquivos do nosso site.

Não cobriremos esse passo-a-passo aqui, mas se quisermos saber usar uma folha de estilo externa e ainda passar a validação AMP, é bom dar uma olhada no artigo Dica Rápida: Facilitando CSS em Linha do AMP com Jade ou PHP, antes de seguir.

Adicionando Imagens

Agora que temos o código essencial, modo desenvolvedor ativado e (opcionalmente) uma folha de estilo externa no ponto, podemos continuar e adicionar mídias à página. Começaremos com o tipo mais comum de mídia: imagens.

No AMP, não usamos a tag <img> para carregar imagens. Ao invés disso, usamos o elemento customizado <amp-img> já que ele otimizará o carregamento de todas as imagens.

Daqui em diante, usaremos um design de modelo existente para facilitar e acelerar as coisas. Vamos em frente e peguemos uma cópia do modelo Ceevee por StyleShout. Esse modelo inclui algumas imagens que podemos usar para praticar a inclusão no documento AMP.

Na pasta images do modelo Ceevee, encontraremos uma imagem grande de dunas à noite. Começaremos usando essa imagem no modelo. Copiemos a pasta images e colemos na pasta do projeto.

Então, adicionemos o código abaixo para embutir a imagem, acima das tags h1 que já estão no HTML:

<amp-img src="images/header-background.jpg" width="2264" height="1504" layout="responsive" class="doc_header_bg"></amp-img>

Qualquer mídia colocada numa página AMP deve ter width e height iniciais, assim, diferente da tag img, uma amp-img não pode ficar sem esses atributos.

Se não sabemos os valores exatos da imagem, podemos colocar quaisquer valores desde que representem a proporção da imagem. Os valores de width e height são considerados marcadores, já que o AMP pode estruturar a página com os valores providos e, então, ajustá-la após as imagens totalmente carregadas.

O atributo layout é o que permite AMP ajustar o visual da imagem após ser carregada. Seu valor é responsive, assim a imagem manterá sua proporção a partir de width e height, mas dimensionará para preencher o container. É por isso que se não tivermos um valor exato, valores que mantenham a proporção são aceitos.

Salvemos e atualizemos a pré-visualização e devemos ver a imagem preenchendo a área de visualização:

Leia mais sobre amp-img e o atributo layout em:

Aproximando Imagens de Plano de Fundo do Tipo "Cover"

Um elemento comun no design web hoje é o uso de uma imagem de fundo que preenche a altura e largura da área de visualização, criando uma espécie de apresentação da página. Tipicamente, isso é feito usando uma imagem de fundo com o a regra background-size: cover; aplicada. Contudo, em sites AMP não queremos usar imagens grandes de plano de fundo via CSS já que isso ignoraria a otimização de carga do sistema.

Agora, alguém pode dizer que carregar imagens grandes de plano de fundo não é ideal para aumentar a velocidade e, por isso, é melhor não usar de jeito algum.

Contudo, se precisamos de um design com uma imagem desse tipo, ainda podemos lançar mão da priorização de carga do AMP adicionando-a via amp-img e não via plano de fundo. Eis como fazê-lo, semelhante à técnica do background "cover".

Pegaremos a imagem adicionada e tornaremo-na em uma imagem de cobertura. Primeiro, envolveremo-na em uma div usando a classe doc_header:

    <div class="doc_header">
      <amp-img src="images/header-background.jpg" width="2264" height="1504" layout="responsive" class="doc_header_bg"></amp-img>
    </div>

Então, se ainda existem, criaremos <style amp-custom>...</style> à seção head para incluirmos CSS customizado. Entre essas tags, adicionemos:

.doc_header {
    height: 100vh;
  background-color: #000;
	overflow: hidden;
	position: relative;
}

Geralmente, ao invés do que vemos acima, ao criar uma imagem de cobertura, um designer usa height: 100%; em html e body, e ainda usa esse mesma regra para a seção de cobertura, fazendo-a cobrir a área de visão.

Contudo, essa abordagem não funcionar com AMP já que o CSS carregado força height: auto!important; no elemento body, prevenindo height: 100%; de funcionar.

Ao invés disso, se precisarmos mesmo ter a altura da área de visualização, podemos usar height: 100vh; como feito na classe doc_header. A unidade vh representa "viewport height", e um valor de 100vh representa 100% da altura da área de visualização.

Se salvarmos e atualizamos o site, veremos que "doc_header" preencher exatamente a área de visualização.

No momento, porém, a imagem não preenche, necessariamente "doc_header". Se a área de visualização é mais alta que larga, haverá uma área preta vazia abaixo dela.

Para resolver isso, adicionemos a classe doc_header_bg à tag amp-img, assim:

<amp-img src="images/header-background.jpg" width="2264" height="1504" layout="responsive" class="doc_header_bg"></amp-img>

E então o CSS:

.doc_header_bg {
    min-height: 100vh;
}

O código garantirá que a altura da imagem nunca será menor que a da área de visualização.

Infelizmente, ela ficará espremida em larguras mais finas, então, não é tão elegante quanto uma imagem de plano de fundo. Contudo, é a melhor aproximação que teremos ao usar o elemento amp-img.

Usando Fontes Web

Agora adicionaremos algumas fontes web customizadas aos nossos modelos. Ao fazê-lo no AMP, temos três métodos para ainda passar na validação:

Google Fonts pela origem https://fonts.googleapis.com
Fonts.com pela origem https://fast.fonts.net
Para todo o resto: @font-face

Adicionando Google Font

Carregar uma Google Font deve ser feita pelo elemento link no head, usando a URL gerada paras as fontes que queremos em https://www.google.com/fonts.

Para nosso modelo, usaremos Open Sans e Libre Baskerville.

Para carregar as duas ontes, adicionemos isso a head:

<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700,400italic|Libre+Baskerville" rel="stylesheet" type="text/css">

Adicionaremos algum texto à área de cobertura do site, onde aplicaremos as fontes web. Dentro de "doc_header", abaixo da imagem, adicionemos uma div com a classe doc_header_inner:

<div class="doc_header_inner">
</div>

Dentro dessa div adicionemos o código a seguir:

<h1 class="doc_header_title">Simulate Background Image Cover</h1>
<p class="doc_header_text">This is a basic page created to show you how to work with the <a href="https://ampproject.org/">AMP Project</a>. In this cover section the background image uses AMP loading optimization. The social icons below use AMP compliant custom font loading. Read on to see more ways to use AMP.</p>
<hr>

Agora, adicionemos o seguinte ao CSS customizado:

body {
  font-family: 'Open Sans', sans-serif;
  font-size: 1rem;
  line-height: 2;
  color: #838C95;
}
.doc_header_inner {
  position: absolute;
  width: 85vw;
  max-width: 64rem;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding-bottom: 2rem;
  text-align: center;
}
h1.doc_header_title {
  font: bold 5.625rem/1.1em 'Open Sans', sans-serif;
  color: #fff;
  letter-spacing: -0.125rem;
  margin: 0 auto 1rem auto;
  text-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, .8);
}
@media (max-width: 35rem){
  h1.doc_header_title {
    font-size: 12vw;
  }
}
p.doc_header_text {
  font-family: 'Libre Baskerville';
  line-height: 1.9;
  color: #A8A8A8;
  margin: 0 auto;
  width: 70%;
  text-shadow: 0 0.0625rem 0.125rem rgba(0, 0, 0, .5);
}
.doc_header_text span,
.doc_header_text a {
  color: #fff;
}
.doc_header_inner hr {
  width: 60%;
  margin: 1.125rem auto 1.5rem auto;
  border-color: #2F2D2E;
  border-color: rgba(150, 150, 150, .1);
}

O código acima é um CSS padrão para posicionar o texto adicionado, porém notemos que o processo de aplicar a Google Fonte a um modelo AMP é diferente do normal. Usemos a propriedade font-family com o valor da fonte escolhida, assim font-family: 'Livre Baskerville';

Ao salvar e atualizar o site, devemos ver ambas Google Fontes aplicadas ao texto na seção de cobertura:

Adicionando uma Fonte Customizada

Depois, adicionaremos um fonte customizada que não está disponível nem na Google Fonte ou Fonts.com, a Font Awesome. Geralmente, se a usamos, carregamo-na via MaxCDN, contudo, AMP não permite essa CDN pois não é uma das duas origens permitidas. Assim, lidaremos com el via @font-face.

Baixando os Arquivos da Fonte

Para carregar a fonte manualmente, primeiro precisamos baixar os arquivos, e o fazemos em https://fortawesome.github.io/Font-Awesome/. Notemos que apenas precisamos da "Font Awesome" não as ferramentas extras oferecidas durante o download.

Quando tivermos baixado o arquivo zip, extraimos e copiemos a pasta fonts para a pasta do projeto.

Em nosso CSS, adicionemos o seguinte:

/* Font Awesome */
@font-face {
    font-family: 'FontAwesome';
	src: url('fonts/fontawesome-webfont.eot?v=4.0.3');
	src: url('fonts/fontawesome-webfont.eot?#iefix&v=4.0.3') format('embedded-opentype'), url('fonts/fontawesome-webfont.woff?v=4.0.3') format('woff'), url('fonts/fontawesome-webfont.ttf?v=4.0.3') format('truetype'), url('fonts/fontawesome-webfont.svg?v=4.0.3#fontawesomeregular') format('svg');
	font-weight: normal;
	font-style: normal;
}
.fa {
	display: inline-block;
	font-family: FontAwesome;
	font-style: normal;
	font-weight: normal;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
.fa-facebook:before {
	content: "\f09a";
}
.fa-twitter:before {
	content: "\f099";
}
.fa-google-plus:before {
	content: "\f0d5";
}
.fa-linkedin:before {
	content: "\f0e1";
}
.fa-instagram:before {
	content: "\f16d";
}
.fa-dribbble:before {
	content: "\f17d";
}
.fa-skype:before {
	content: "\f17e";
}
/* /Font Awesome */

Recomendamos inserir o código acima no topo do CSS customiado para manter a organização. O código carrega os arquivos de fonte customizados e cra classes que podem ser usadas para adicionar ícones a um design–o jeito padrão provido pelo Font Awesome.

E também adicione isso:

.doc_header_social {
    margin: 1.5rem 0;
	padding: 0;
	font-size: 1.875rem;
	text-shadow: 0 0.0625rem 0.125rem rgba(0, 0, 0, .8);
}
.doc_header_social li {
	display: inline-block;
	margin: 0 1rem;
	padding: 0;
}
.doc_header_social li a {
	color: #fff;
}
.doc_header_social li a:hover {
	color: #11ABB0;
}

Esse CSS extra adiciona estios específicos ao modelo que usaremos para configurar os ícones de social mídia.

Coloque esse HTML antes do <hr> em "doc_header_inner":

        <ul class="doc_header_social">
          <li><a href="#"><i class="fa fa-facebook"></i></a></li>
          <li><a href="#"><i class="fa fa-twitter"></i></a></li>
          <li><a href="#"><i class="fa fa-google-plus"></i></a></li>
          <li><a href="#"><i class="fa fa-linkedin"></i></a></li>
          <li><a href="#"><i class="fa fa-instagram"></i></a></li>
          <li><a href="#"><i class="fa fa-dribbble"></i></a></li>
          <li><a href="#"><i class="fa fa-skype"></i></a></li>
        </ul>

Se atualizarmos a página, veremos uma linha com ícones de mídias sociais usando @font-face ao final da página, junto do texto que adicionamos antes:

Integrando o Elemento `amp-font`

Para garantir que os visitantes não vejam um site quebrado se as fontes customizadas não carregarem, AMP provê o elemento amp-font que permite prover alternativas.

Para fazer esse elemento funcionar, primeiro precisamos carregar o script AMP que o habilita. Na seção head, adicione esse código:

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

Agora com o elemento amp-font pronto para uso, temos de adicionar uma classe ao html ou body se a fonte falhar. Adicionemos esse código ao final do modelo, antes de </body>:

<amp-font layout="nodisplay" font-family="FontAwesome" timeout="3000" on-error-add-class="font-awesome-missing"></amp-font>

Vejamos rapidamente os atributos adicionados no elemento. Primeiro temos layout="nodisplay" que garante que o elemento é invisível.

Depois, font-family="FontAwesome" que diz ao AMP que queremos rastrear o carregamento da fonte "FontAwesome". Garantmos que o valor casa com a font-family adicionada no código CSS de @font-face.

Depois timeout="3000", que permite até 3 segundos para a fonte carregar antes de usar a alternativa. Podemos mudar isso para qualquer valor que quisermos.

Por fim, usamos on-error-add-class a font-awesome-missing. Se a fonte não carregar após os três segundos essa classe será adicionada ao elemento html ou body. Podemos mirar essa classe para criar nosso comportamento alternativo adicionando esse código ao CSS customizado:

.font-awesome-missing .doc_header_social {
    display:none;
}

Se a fonte falhar após 3 segundos o CSS acima será tivado e esconderá a barra de ícones sociais para não termos algo quebrado na página.

Agora, renomeemos temporariamente a pasta das fontes para elas não carregarem, atualizemos a página e veremos que a barra de ícones está escondida. Também devemos ver a classe font-awesome-missing adicionada a html ou body. Restoremos o nome da pasta de volta e os ícones aparecerão novamente após atualização.

Leia mais sobre o elemento amp-font em:

Documentação do AMP: amp-font

Adicionando um Vídeo do YouTube

Agora, aprenderemos como adicionar vídeos do YouTube no modo AMP, mas primeiro precisamos limpar o código para criar a seção de vídeo no lugar certo.

Após "doc_header", substituamos as tags h1 com esse HTML:

    <div class="video_wrap">
      <div class="standard_width standard_padding">
        <h2>Embed a YouTube Video</h2>
      </div>
    </div>

E adicionemos isso ao CSS customizado:

.standard_width {
  width: 100%;
  max-width: 75rem;
  margin-left: auto;
  margin-right: auto;
}
.standard_padding {
  box-sizing: border-box;
  padding: 6rem 3rem;
}
.video_wrap {
  background-color: #2B2B2B;
}

Dica: Lidando com o Modelo da Caixa em Páginas AMP

Talvez tenham notado no CSS acima que usamos box-sizing: border-box; na classe standard_padding.

A razão para isso no AMP é que não podemos usar técnicas comuns, como * {box-sizing: border-box} porque * é um seletor muito guloso. Assim, precisaremos usar box-sizing: border-box; para elementos específicos que precisarmos, ou lidar com espaçamento e bordas do jeito antigo–com calculadora ou contando nos dedos.

Integrando o Elemento `amp-youtube`

Agora que a seção está pronta para conteúdo, adicionaremos um vídeo do YouTube usando o elemento customizado do AMP, amp-youtube. Ao usar esse elemento ao invés do código de embutir padrão, usamos técnicas de otimização de carregamento similares ao de amp-img.

Para começar, precisaremos do JavaScript do AMP que habilita o novo elemento. Na seção head, colemos:

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

Agora, adicionemos o HTML a seguir dentro das divs recém adicionadas, abaixo dos h2:

<amp-youtube data-videoid="mGENRKrdoGY" layout="responsive" width="600" height="270"></amp-youtube>

Para especificar o vídeo que queremos carregar, adicionemos o ID do YouTube no attributo data-video-id. Além desse atributo, o elemento amp-youtube é que nem o amp-img.

Temos width e height com valores 600 e 270 respectivamente. Assim como as imagens, vídeos também devem ter largura e altura iniciais.

Então usamos layout="responsive" para o vídeo preencher o tamanho do seu container mas mantendo a proporção com base nas altura e largura.

Salvemos e atualizemos o site e tentemos dimensionar o navegador. Devemos ver que o vídeo expande ou diminui, mantendo a proporção correta.

Leia mais sobre o elemento amp-youtube em:

Documentação AMP: amp-youtube

Adicionando Conteudo Através de iframe

AMP tem elementos customizados adicionais para carregar conteúdo de sites específicos como amp-twitter, amp-instagram e outros. Para conteúdo de sites de terceiros que não possuem seu elemento AMP dedicado, há o elemento amp-iframe. Agora, usaremos esse elemento para carregar um Mapa do Google em nossa página.

Criemos um container para o mapa adicionando o código abaixo da div "video_wrap":

    <div class="standard_width standard_padding">
      <h2>Use iframe Embedding, e.g. Maps</h2>
    </div>

Agora, assim como amp-font e amp-youtube, temos de carregar o script que faz amp-iframe funcionar. Adicionemos isso a seção head:

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

Agora, dentro da nova div e abaixo das tags h2, adicionemos:

<amp-iframe width="1100" height="600" sandbox="allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox" layout="responsive" frameborder="0" src="https://www.google.com/maps/embed/v1/place?key=AIzaSyDG9YXIhKBhqclZizcSzJ0ROiE0qgVfwzI&amp;q=Alameda,%20CA"></amp-iframe>

Recarreguemos o site e devemos ver o Mapa no lugar.

Além do carregamento otimizado, usar amp-iframe ajuda a garantir que o conteúdo visto pelo iframe não se comporta de formas indesejadas, como executando JavaScript que cause lerdesa no carregamento ou popups de propaganda. O atributo sandbox permite determinarmos o nível de controle a aplicar sobre o conteúdo do iframe.

Para mais sobre amp-iframe e os controles "sandbox", visite:

Documentação do AMP: amp-iframe

Criando uma Galeria de Imagens com Janela Suspensa

Uma das coisas que podem parecer o limite ao trabalhar com AMP é a regra de JavaScript customizado proibido. Por outro lado, há elementos customizados inclusos no AMP que tentam provem algumas das funcionalidades que queremos implementar via JavaScript customizado.

Por exemplo, ao invés de carregar um script de janela suspensa customizado, podemos usar amp-image-lightbox. Criaremos uma galeria de imagem que usar esse elemento, agora.

Comecemos criando um container para a galeria adicionando esse conteúdo logo acima de amp-font:

    <div class="portfolio_wrap">
      <div class="standard_width">
        <div class="portfolio_inner clearfix">
          <h2>Create a Gallery with Lightboxes</h2>
        </div>
      </div>
    </div>

Também adicionemos o CSS customizado:

.portfolio_wrap {
    background-color: #ebeeee;
}
.portfolio_inner {
	padding: 4rem 6rem;
}
.portfolio_item {
	box-sizing: border-box;
	float: left;
	width: 25%;
	text-align: center;
	padding: 0.8rem;
}
.clearfix:before,
.clearfix:after {
	content: " ";
	display: table;
}
.clearfix:after {
	clear: both;
}

Como os outros elementos customizados, adicionaremos o script AMP que habilita amp-image-lightbox. Adicionemos isso à seção head:

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

Agora estamos pronto para criar a galeria. Comecemos adicionando nosso código dentro das novas divs, abaixo das tags h2:

<amp-image-lightbox id="lightbox1" layout="nodisplay"></amp-image-lightbox>

O elemento amp-imge-lightbox criará uma janela suspensa com as imagens maiores dentro dela. Queremos escondê-la até que um usuário clique numa imagem que queiram ver maior, assim temos layout="nodisplay".

Nota: adicionamos o ID lightbox1 a esse elemento.

Para adicionar um item à galeria, adicionemos essa div abaixo de amp-image-lightbox:

          <div class="portfolio_item">
          </div>

Então, dentro dele, adicionemos essa amp-img:

<amp-img on="tap:lightbox1" role="button" tabindex="0" src="images/portfolio/coffee.jpg" width="215" height="215" layout="responsive"></amp-img>

Pela maior parte do tempo, amp-image aqui é o mesmo usado anteriormente, porém, percebamos a adição de on="tap:lightbox1". Isso diz ao AMP que quando a imagem for clicada/tocada, a versão maior deverá abrir na janela suspensa lightbox1 (o elemento recém criado).

Adicionemos outras sete imagens à galeria com isso:

          <div class="portfolio_item">
            <amp-img on="tap:lightbox1" role="button" tabindex="1" src="images/portfolio/console.jpg" width="215" height="215" layout="responsive"></amp-img>
          </div>
          <div class="portfolio_item">
            <amp-img on="tap:lightbox1" role="button" tabindex="2" src="images/portfolio/farmerboy.jpg" width="215" height="215" layout="responsive"></amp-img>
          </div>
          <div class="portfolio_item">
            <amp-img on="tap:lightbox1" role="button" tabindex="3" src="images/portfolio/girl.jpg" width="215" height="215" layout="responsive"></amp-img>
          </div>
          <div class="portfolio_item">
            <amp-img on="tap:lightbox1" role="button" tabindex="4" src="images/portfolio/into-the-light.jpg" width="215" height="215" layout="responsive"></amp-img>
          </div>
          <div class="portfolio_item">
            <amp-img on="tap:lightbox1" role="button" tabindex="5" src="images/portfolio/judah.jpg" width="215" height="215" layout="responsive"></amp-img>
          </div>
          <div class="portfolio_item">
            <amp-img on="tap:lightbox1" role="button" tabindex="6" src="images/portfolio/origami.jpg" width="215" height="215" layout="responsive"></amp-img>
          </div>
          <div class="portfolio_item">
            <amp-img on="tap:lightbox1" role="button" tabindex="7" src="images/portfolio/retrocam.jpg" width="215" height="215" layout="responsive"></amp-img>
          </div>

Ao salvar e atualizar a página, devemos ver a galeria na página, parecendo com isso:

E ao clicar em qualquer uma das imagens, devemos vê-la abrindo na janela suspensa, dessa forma:

Para mais sobre amp-image-lightbox visite:

Documentação do AMP: amp-image-lightbox

Resumindo

Agora temos uma página AMP básica com alguns dos tipos de conteúdo mais comuns e algumas dicas para ajudar a trabalhar de forma eficiente, mantendo a validação do AMP.

Recapitulemos os pontos chaves do que falamos hoje:

Sempre comecemos com o código base
Pré-visualização via localhost (por exemplo, MAMP)
Ativar depuração com #development=1 na URL de pré-visualização e verificar via Console da Ferramentas de Desenvolvedores do Chrome
Incluir os metadados JSON do Schema.org se quisermos
Lidar com CSS Inline facilmente usando essa Dica Rápida
Usar elementos customizáveis do AMP ao invés do elementos padrões do HTML quando disponíveis
Onde obrigatório, carregar o JavaScript extra do AMP para os elementos customizados
Carregar fontes do Google Fonts, Fonts.com ou via @font-face, usando o elemento amp-font para criar alternativas.
USar os elementos customizados do AMP ao invés de JavaScript customizado, como o amp-image-lightbox

Esperamos que tenha ajudado a clarificar o processo de lidar com páginas AMP e sintam-sie confortéveis construindo sites do zero. Agora, vá lá e divirta-se criando sites AMP!

Modelos HTML para Praticar

Dê uma olhada nessas páginas de destino se quiser práticar em algo que não seja esse tutorial: