Pagina inicial » Móvel » 10 importantes componentes de páginas móveis aceleradas (AMP) que você deve conhecer
10 importantes componentes de páginas móveis aceleradas (AMP) que você deve conhecer
Páginas móveis aceleradas ou AMP é a iniciativa do Google para tornar a web para dispositivos móveis mais rápida. Para atingir esse objetivo, os padrões de AMP restringem a maneira como você pode usar HTML, CSS e JavaScript, e gerencia o carregamento de recursos externos, como imagens, vídeos e anúncios via seu próprio runtime.
Isso implica que você não pode usar qualquer JavaScript personalizado (escrito por autor ou de terceiros) ou qualquer elemento HTML relacionado a recursos, como imagens e vídeos em seus documentos AMP.
Para preencher a lacuna entre as necessidades dos usuários e as melhores práticas de desempenho, o AMP Componentes Específicos você pode usar no lugar desses elementos excluídos.
Componentes AMP são tags HTML específicas. Eles se comportam de maneira semelhante às tags HTML comuns: eles abrem e fecham tags, atributos e a maioria deles pode ser estilizada com CSS. Eles podem ser facilmente reconhecidos, comece sempre com o amp- prefixo.
Existem dois tipos de componentes do AMP: construídas em e estendido Componentes.
Componentes internos de AMP
Built-ins são incorporados ao tempo de execução de JavaScript da AMP, para que você não precise incluí-los separadamente.
1. amp-img
substitui o tag em documentos HTML de AMP. Você precisa adicionar o src e alt atributos como quando você trabalha com o regular elemento.
também tem dois outros atributos obrigatórios: você sempre precisa especifique o largura e altura atributos em valores de pixel inteiro, pois isso permite que o tempo de execução AMP calcular o layout com antecedência.
Se você quiser tornar a imagem responsiva, Adicione o layout = "responsivo" atributo. o layout atributo controla o layout em documentos AMP e pode ser adicionado a qualquer componente AMP (saiba mais sobre isso no AMP Layout System).
Você também pode usar o srcset atributo no tag para especificar imagens diferentes para diferentes viewports e densidades de pixels. Funciona da mesma forma que as imagens não AMP.
2. amp-video
pode ser usado para incorpore diretamente vídeos em HTML em documentos HTML de AMP. Substitui o em arquivos AMP. o tag preguiçoso carrega vídeos a fim de otimizar o desempenho.
A fonte do vídeo deve ser servido pelo protocolo HTTPS. Você é obrigado a adicionar o largura e altura atributos, assim como com o componente.
o A tag tem muitos atributos opcionais, como Reprodução automática e poster que você pode especificar para ajustar como seu vídeo HTML5 é exibido.
suporta mp4, webm, ogg e todos os outros formatos suportados pelo HTML5
Se você quiser, você também pode adicionar vídeos substitutos para usuários com navegadores que não suportam vídeos em HTML5, usando o cair pra trás atributo e o Tag HTML.
Seu navegador não suporta vídeos em HTML5.
3. amp-ad e embebido em amp
fornece-lhe caixas de areia iframe em que você pode exibir seus anúncios. Você deve veicular seus anúncios através do protocolo HTTPS.
Você não pode executar scripts fornecidos por sua rede de anúncios por conta própria. Em vez disso, o tempo de execução do AMP executa o JavaScript da rede fornecida dentro do sandbox. Você só precisa especificar qual rede você usa, e adicione seus dados.
o componente requer que você adicione as dimensões do anúncio usando o largura e altura atributos.
Você pode definir a rede de anúncios que você usa com o tipo atributo. Veja a lista de redes de anúncios compatíveis.
Cada rede de anúncios tem sua própria dados-* atributos que você também precisa adicionar. Para ver qual deles você precisa, clique na sua rede de anunciantes na lista acima.
é o pseudônimo de , a documentação não diz muito sobre isso que não pode ser usado em vez de quando é semanticamente mais preciso. Conforme o Google promete evoluir os componentes de AMP relacionados a anúncios ao longo do tempo, isso pode mudar no futuro.
4. amp-pixel
Com , você pode adicionar um pixel de rastreamento aos seus documentos HTML de AMP para contar exibições de página. Tem apenas um atributo, o requerido src atributo, em que você precisa especifique o URL que pertence ao pixel de rastreamento.
o tag permite substituições de URL padrão, o que significa que você pode gerar um valor de URL aleatório para acompanhar cada impressão.
Consulte o Guia de Substituição de URL da AMP se você quiser usar este componente. Observe que você não pode estilizar componente.
Componentes AMP estendidos
Como componentes estendidos de AMP não fazem parte do tempo de execução JavaScript, você sempre precisa importá-los no seção da página AMP na qual você deseja usá-los.
Nota: versões de componentes podem mudar no futuro, então não esqueça de verifique a versão atual na documentação.
5. amp-audio
substitui o Tag HTML5 e torna possível incorpore diretamente arquivos de áudio HTML5 nas páginas AMP.
Para usá-lo, você é obrigado a especificar o src, largura e altura atributos, e você também pode adicionar três atributos opcionais: Reprodução automática, laço e mudo.
Também pode ser uma boa ideia adicionar arquivos de áudio de fallback para usuários com navegadores que não suportam HTML5. Você pode fazer isso usando o cair pra trás atributo e o tag, assim como com o acima mencionado componente.
o O componente AMP suporta os mesmos formatos de áudio que o Tag HTML5.
Seu navegador não suporta áudio HTML5.
Usar , incluir o seguinte script no seção do seu documento AMP:
6. amp-iframe
exibe um iframe em documentos AMP. foi feito para ser mais seguro do que os iframes HTML regulares. Portanto eles são sandboxed por padrão.
Existem algumas regras relacionadas a você deve seguir para passar na validação.
Você deve especificar o largura, altura, e caixa de areia atributos. o caixa de areia atributo está vazio por padrão, mas você pode dar valores diferentes para modificar o comportamento do iframe, por exemplosandbox = "permitir scripts"permite que o iframe execute JavaScript. Você também pode usar atributos de iframes padrão.
Enquanto as dimensões de são predefinidos pelo largura e altura atributos, há uma maneira de redimensioná-lo em tempo de execução. Para usar o componente, adicione o seguinte script à sua página AMP:
7. amp-acordeão
Acordeões constituem um padrão frequente de interface do usuário no design de dispositivos móveis, pois economizam espaço, mas ainda exibem o conteúdo de maneira acessível. torna possível adicione rapidamente acordeões para páginas AMP.
Seções do acordeão devem usar o Tag HTML5 e precisa ser o crianças diretas do tag.
Cada seção deve ter dois filhos diretos:
um para o título
um para o conteúdo (o conteúdo também pode ser uma imagem)
Use o expandido atributo em qualquer seção que você deseja expandir por padrão.
Seção 1
Conteúdo da Seção 1
Seção 2
Conteúdo da Seção 2
Seção 3
Imagem para a seção 3
Para usar o componente em seu documento AMP, inclua o seguinte script:
8. amp-lightbox
adiciona uma mesa de luz para diferentes elementos (na maioria dos casos, imagens) em páginas móveis aceleradas.
Quando o usuário interage com o elemento, por exemplo, toca nele expande e preenche toda a janela de visualização. Você precisa adicionar um botão ou outro controle em que o usuário pode tocar.
Observe que amp-lightbox só pode ser usado com o nenhuma exibição layout.
Para usar o componente, você precisa importá-lo com o seguinte código:
9. carrossel de amp
Os carrosséis são freqüentemente usados em design de dispositivos móveis, pois permitem exibir numerosos elementos semelhantes (mais frequentemente imagens) ao longo do eixo horizontal. Os resultados de AMP também são apresentados em um formato de carrossel na Pesquisa do Google.
o componente permite que você adicione carrosséis ao seu site. o crianças diretas do componente será considerado como o itens do carrossel. Você deve definir as dimensões do carrossel com o largura e altura atributos.
Você pode usar o opcional tipo atributo para determinar como exibir os itens do carrossel. Se o tipo atributo leva o "carrossel" valor, os itens serão mostrados como uma faixa contínua (este é o padrão), enquanto o "slides" valor irá exibir os itens no formato de slides.
o A tag também possui outros atributos opcionais que podem ajudá-lo a ajustar o resultado.
No exemplo abaixo, observe que tanto o carrossel quanto todos os seus itens use o mesmo largura e altura valores.
o componente requer a adição do seguinte script:
10. amp-analytics
pode ser usado para coletar dados de análise nas páginas AMP. Atualmente, suporta quatro tipos de eventos de rastreamento, no entanto isso pode mudar no futuro:
Visualização de página
Cliques de Âncora
Cronômetro
Rolagem
Usar , você precisa adicionar um objeto de configuração JSON dentro de um
Adicione o seguinte script ao seção da sua página HTML da AMP para importar componente:
Palavras finais
Neste post, examinamos todos os componentes internos de AMP e alguns dos componentes estendidos. Como o Accelerated Mobile Pages ainda é novo, muitas coisas podem mudar no futuro, então vale a pena ficar de olho na documentação no Github ou no site oficial da AMP.
Como esses componentes AMP são de código aberto, você também pode contribuir para o desenvolvimento, mesmo criando seu próprio componente. Se você quiser ver como uma página AMP completa se parece com componentes diferentes, confira esses poucos exemplos no Github.
