Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. AMP

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

by
Difficulty:IntermediateLength:LongLanguages:

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:

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

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:

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:

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:

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

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:

E então o CSS:

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:

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:

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:

Dentro dessa div adicionemos o código a seguir:

Agora, adicionemos o seguinte ao CSS customizado:

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:

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:

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

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:

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

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:

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:

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:

E adicionemos isso ao CSS customizado:

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:

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

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:

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

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

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

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:

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:

Também adicionemos o CSS customizado:

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

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

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:

Então, dentro dele, adicionemos essa 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:

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:

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:

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.