AMP

Configuração

Pré-requisitos

Para usar este tutorial, você precisará do seguinte:

  • conhecimento básico de HTML, CSS e JavaScript
  • entendimento básico dos principais conceitos da tecnologia AMP (consulte o tutorial "Converter HTML para AMP")
  • um navegador de sua preferência
  • um editor de texto de sua preferência

Como configurar seu ambiente de desenvolvimento

Etapa 1. Fazer o download do código

  1. Acesse o seguinte URL e faça o download do código para o tutorial, que é compactado como um arquivo ZIP: https://github.com/ampproject/docs/raw/master/tutorial_source/amp-pets-story.zip

  2. Extraia o conteúdo do arquivo ZIP. No diretório amp-pets-story estão os arquivos de imagem, vídeo, áudio e dados que usaremos para criar nossa história. O arquivo pets.html é nosso ponto de partida. Veja a versão completa da história no arquivo pets-completed.html.

Etapa 2. Gerar a página de exemplo

Para testar nossa história de exemplo, é preciso acessar os arquivos por meio de um servidor da Web. Existem várias maneiras de criar um servidor da Web temporário e local para fins de teste. Estas são algumas opções, escolha a que funciona melhor para você:

Após configurar seu servidor da Web local, acesse este URL para ver como será a história completa ao final deste tutorial:

http://localhost:8000/pets-completed.html

O URL precisa ser disponibilizado por localhost. Caso contrário, a história AMP não será carregada corretamente, e talvez você veja erros como "source" "must start with "https://" or "//" or be relative and served from either https or from localhost.

Clique para ver a história concluída e ter uma ideia do resultado.