Este guia explica todos os detalhes técnicos e práticas recomendadas que você deve conhecer para ter sucesso ao criar Histórias na Web com o AMP.
AMP válido
Uma História Web é tecnicamente uma única página Web criada com o AMP e que segue as especificações do AMP:
Comece com o doctype <!doctype html>.
Inclua uma tag top-level <html ⚡> ou <html amp>.
Inclua as tags <head> e <body>.
Inclua uma tag <meta charset="utf-8"> como primeiro elemento-filho da tag <head>.
Inclua uma <script async src="https://cdn.ampproject.org/v0.js"></script> dentro da tag <head>. Como boa prática, você deve incluir o script o mais próximo do início do bloco <head>.
Inclua uma tag <link rel="canonical" href="page/url"> dentro de <head> com o href apontando para a URL da História Web.
Inclua uma tag <meta name="viewport" content="width=device-width"> dentro de <head>. Também é recomendada a inclusão de initial-scale=1.
A diferença entre uma página Web do AMP e uma História Web criada com o AMP é o componente amp-story. É o único elemento-filho direto do documento <body> e deve conter o atributo standalone. Todas as páginas, camadas e elementos da História Web são definidos nas tags <amp-story>.
<!doctype html><html⚡><head><metacharset="utf-8"><title>Joy of Pets</title><linkrel="canonical"href="pets.html"><metaname="viewport"content="width=device-width"><styleamp-boilerplate>body{-webkit-animation:-amp-start8ssteps(1,end)0s1normalboth;-moz-animation:-amp-start8ssteps(1,end)0s1normalboth;-ms-animation:-amp-start8ssteps(1,end)0s1normalboth;animation:-amp-start8ssteps(1,end)0s1normalboth}@-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><styleamp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript><scriptasyncsrc="https://cdn.ampproject.org/v0.js"></script><scriptasynccustom-element="amp-video"src="https://cdn.ampproject.org/v0/amp-video-0.1.js"></script><scriptasynccustom-element="amp-story"src="https://cdn.ampproject.org/v0/amp-story-1.0.js"></script><styleamp-custom>...</style></head><body><!-- Cover page --><amp-storystandalonetitle="Joy of Pets"publisher="AMP tutorials"publisher-logo-src="assets/AMP-Brand-White-Icon.svg"poster-portrait-src="assets/cover.jpg"><amp-story-pageid="cover"><amp-story-grid-layertemplate="fill"><amp-imgsrc="assets/cover.jpg"width="720"height="1280"layout="responsive"></amp-img></amp-story-grid-layer><amp-story-grid-layertemplate="vertical"><h1>The Joy of Pets</h1><p>By AMP Tutorials</p></amp-story-grid-layer></amp-story-page><!-- Page 1 --><amp-story-pageid="page1"><amp-story-grid-layertemplate="vertical"><h1>Cats</h1><amp-imgsrc="assets/cat.jpg"width="720"height="1280"layout="responsive"></amp-img><q>Dogs come when they're called. Cats take a message and get back to you. --Mary Bly</q></amp-story-grid-layer></amp-story-page>
...
</amp-story></body></html>
Os usuários podem estar visualizando Histórias Web em regiões com conexões de rede de baixa qualidade ou dispositivos mais antigos. Garanta que eles curtam sua experiência seguindo as práticas recomendadas a seguir.
Cor de fundo
Especifique uma cor de fundo para cada página da História Web. Ter uma cor de fundo garante uma boa alternativa se as condições do usuário impedirem o download de imagens ou recursos de vídeo. Escolha uma cor que represente a cor dominante do recurso que seria plano de fundo pretendido da página ou utilize um tema de cores consistente para todas as páginas da história. Certifique-se que a cor do plano de fundo seja contrastante em relação ao texto, para garantir a legibilidade.
Defina a cor de plano de fundo para as páginas usando as tags<style amp-custom> no head do documento da História Web ou inline no componente <amp-story-page> .
Elementos de camadas
O cabeçalho do sistema contém controles tais como os ícones silenciar e compartilhar. Ele é exibido com um z-index maior que a imagem de fundo e vídeo. Certifique-se que nenhuma informação essencial seja coberta por esses ícones.
Proporção
Projete os recursos da História Web na proporção de 9:16. Como altura e largura da página variam entre navegadores e dispositivos, não deixe conteúdo essencial próximo às bordas da página.
Imagens de pôster
Uma imagem de pôster é exibida para o usuário enquanto um vídeo é baixado. A imagem do pôster deve ser representativa do vídeo para permitir uma transição suave. Especifique uma imagem de pôster adicionando o atributo poster ao seu elemento amp-video e faça com que aponte para o endereço da imagem.
Todos os vídeos devem ser adicionados através do componente amp-video.
<amp-videocontrolswidth="640"height="360"layout="responsive"poster="/static/inline-examples/images/kitten-playing.png"><sourcesrc="/static/inline-examples/videos/kitten-playing.webm"type="video/webm"/><sourcesrc="/static/inline-examples/videos/kitten-playing.mp4"type="video/mp4"/><divfallback><p>This browser does not support the video element.</p></div></amp-video>
Resolução e qualidade
Codifique os vídeos para ajustar a qualidade das seguintes otimizações recomendadas:
MP4
-crf 23
WEBM
-b:v 1M
Tente manter os segmentos HLS com duração inferior a 10 segundos.
Formato e tamanho
Mantenha vídeos menores que 4MB para o melhor desempenho. Considere dividir vídeos grandes em múltiplas páginas.
Se você só puder fornecer um único formato de vídeo, forneça MP4. Quando possível, use o formato HLS e especifique MP4 como reserva para garantir a compatibilidade com o navegador. Use o seguinte codec de vídeo:
MP4, HLS e DASH
H.264
WEBM
VP9
Especifique em vez de src
Use os elementos-filho <source> dentro do componente <amp-video> para especificar a fonte de vídeo sobre o atributo src. O uso do elemento <source> permite que você indique o tipo de vídeo e adicione fontes de vídeo como backup. Você precisa usar o atributo type para especificar o componente MIME. Use application/x-mpegurl ou application/vnd.apple.mpegurl para vídeos HLS. Para todos os outros tipos de vídeo, use o prefixo MIME video/ e acrescente o formato de vídeo, como por exemplo ”video/mp4”.
O atributo auto-advance-after exposto por amp-story-page especifica se e quando uma página da história deve avançar sem a intervenção do usuário. Para avançar após um vídeo, indique o ID do vídeo no atributo.
<amp-story-pageauto-advance-after="myvideo">
Experiência desktop
O formato de Histórias Web suporta uma experiência desktop opcional. Isto altera a experiência desktop para um modo imersivo de tela cheia, substituindo a experiência default de três painéis em orientação vertical e permite que os usuários móveis vejam a história quando seus dispositivos são mantidos na posição horizontal.
Ative o suporte a desktop adicionando o atributo supports-landscape ao componente <amp-story>.
<amp-storystandalonesupports-landscapetitle="Joy of Pets"publisher="AMP tutorials"publisher-logo-src="assets/icon.svg"poster-portrait-src="assets/cover.jpg"></amp-story>
We use cookies to understand how you use our site and to improve your experience. By continuing to use our site, you accept our use of cookies and privacy policy.