Nesse post você irá criar a sua primeira página com o framework AMP, uma biblioteca de componentes web focado em performance e experiência do usuário. Vamos cobrir os principais conceitos para construir uma página com o framework.
No meu canal gravei um curso focado na tecnologia onde você pode conferir aqui:
Nos primeiros vídeos e posts fiz a apresentação do nosso projeto. Agora aprenderemos a criar a nossa primeira página e ver quais os requisitos básicos para publicar a nossa primeira página válida.
O que é AMP Framework?
É um framework que surgiu com o foco no desempenho e entrega de conteúdo. A sua biblioteca de componentes é ideal para a criação de sites, matérias, e-mails e anúncios. Com AMP, você tem a certeza de que está trabalhando com uma plataforma focada no usuário.
Os seus componentes foram desenvolvidos pensando na rapidez de carregamento e na melhor experiência possível para o internauta. O Framework é uma ótima escolha para quem quer ter resultados positivos como audiência e conversões. Além disso, os seus componentes são responsivos e funcionam perfeitamente em dispositivos móveis.
Requisitos básicos
- Primeiro precisamos sinalizar que temos conteúdo AMP através de um emoji de raio ou adicionando a palavra
AMPna nossa tag HTML. - Carregar o script da biblioteca.
- Utilizar ferramentas como validador para deixar a nossa página 100% compatível.
AMP validator
O validator tem uma importância especial pela seguintes razões:
- Manter a qualidade do seu código como acessibilidade e performance
- Somente conteúdo válido será entregue pelo AMP cache
- Não fique desmotivado caso tenho uma série de erros de validação isso é um sinal que você terá uma série de melhorias no seu código.
Para utilizar o Validator você pode utilizar 4 versões:
Vamos utilizar um simples código HTML para fazer a nossa primeira conversão, para ativar o validator precisamos adicionar o atributo amp na tag Para validator reconhecer o conteúdo adicionamos na nossa tag HTML o parâmetro amp:
<!DOCTYPE html>
<html amp>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,minimum-scale=1">
<meta name="description" content="nossa primeira página amp">
<head>
<title>Como validar uma página AMP</title>
</head>
<body>
Olá AMP
</body>
</html>Code language: HTML, XML (xml)Quando testamos o código acima no validator web temos o seguinte retorno:
No caso esteja a utilizar a extensão Chrome o retorno será através de um ícone no topo superior direito.
AMP Cache
Cache utilizado por mecanismos de busca como Bing e Google eles realizam o preload da primeira página da sua aplicação assim realizando o carregamento quase que instantâneo da sua aplicação.
O cache realiza otimização automática da sua aplicação com:
- Cache imagens e fontes
- Comprime imagens
- Converte imagens em formatos como Webp caso o navegador suporte.
- Limpeza do HTML para prevenir ataques XSS
Anatomia de uma página AMP HTML
O framework é dividido em três itens, AMPJavaScript, AMP HTML e AMP cache assim com esses itens você irá criar a suas amp pages. Todas as páginas iniciam com o mesmo código base com requisitos obrigatórios:
- Atributo AMP na tag HTML
- viewport tag
- Chamada para o JavaScript da biblioteca.
- Boilerplate CSS
Esse código é chamado de AMP boilerplate, podemos gerar o nosso código boilerplate através da página amp.dev/boilerplate lá podemos realizar uma série de configurações no nosso código base, chamada de fontes, suporte a service worker, SEO e Google Analytics:
Como observamos na validação anterior apenas um markup básico não é suficiente para criar uma página válida. Aplicando as regras que vimos anteriormente a nossa estrutura básica ficará da seguinte forma:
<!DOCTYPE html>
<html amp>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,minimum-scale=1">
<meta name="description" content="Este é um Boilerplate AMP.">
<link rel="preload" as="script" href="https://cdn.ampproject.org/v0.js">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<title>Como validar uma página AMP</title>
<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>
<link rel="canonical" href=".">
</head>
<body>
Olá AMP
</body>
</html>
Agora temos uma versão válida, como qualquer arquivo HTML uma página precisa de uma tag head e tag body. Mas com uma atenção a três items. A tag script que carrega o script da biblioteca, canonical tag que entraremos em detalhes posteriormente e uma tag stile com o CSS boilerplate. Com isso temos o seguinte resultado:
Canonical tag
Um dos pré-requisitos para ter uma página válida é a tag canonical ela é responsável por informar se conteúdo carregado possui uma versão não AMP, para o mecanismo de busca não identificar a sua página AMP como conteúdo duplicado. Caso possua apenas a versão AMP aponte para própria página. No nosso caso na linha 11 definimos a nossa propriedade com “.”
Viewport meta responsável por definir como a sua aplicação vai responder visualmente a múltiplos devices. Na linha 10 temos o CSS responsável por esconder o conteúdo da página enquanto a aplicação é processada pelo JavaScript. Você não precisa editar esse arquivo mantenha do jeito que copiar.
Por fim temos o carregamento da biblioteca JavaScript, a primeira tag link na linha 7 é responsável por realizar o preload do script e na linha seguinte tag script realiza o carregamento detalhe para async na tag ele determina que o nosso script será carregado de forma assíncrona.
CSS
Ok, temos o nosso markup básico, mas caso queiramos carregar um arquivo CSS teremos um seguinte erro no validator:
Mensagem não ajuda muito, mas isso significa que a tag link com AMP só é válida para fontes e, além disso, para um set específico de fontes:
- Fonts.com
- Google Fonts
- Font Awesome
- Typekit
No caso do style customizado teremos que adicionar de forma Inline, isso é um requisito para reduzir o número de requisições e também ajudar no cache da sua aplicação. Além disso, ele precisa ser adicionado numa tag <style amp-custom> e os requisitos são os seguintes:
- 75 KB por tag
- Somente uma tag por página
- O uso de
!importanté totalmente proibido. - Seletores CSS não podem começar com ‘-amp-‘
O projeto usado no curso está no repositório: https://github.com/fellyph/the-best-caipirinha/ as aulas serão separadas por branches, no próximo post veremos como trabalhar com imagens.
Deixe um comentário