Categorias
AMP Accelerated mobile pages

Compartilhando conteúdo nas redes sociais com AMP

Nesse post iremos ver como compartilhar conteúdo nas redes sociais com AMP. Compartilhamento de conteúdo é um dos pontos chaves para trazer novos usuários para sua aplicação e um pontos chaves na plataforma AMP por questões de perfomance é o bloqueio de scripts de terceiros, ou seja, por vias tradicionais é impossível utilizar o botões de compartilhamento de plataformas como Twitter e Facebook, uma solução rápida é a utilização da share API, mas ela é apenas suportada por browsers mobile.

Mas isso não significa que AMP não suporta compartilhamento de conteúdo. Para isso temos o componente amp-social-share com ele podemos compartilhar conteúdo com diferentes opções:

  • Web share api
  • Email
  • Facebook
  • Linkedin
  • Pinterest
  • Tumblr
  • Twitter
  • Whatsapp
  • LINE
  • SMS

E seu uso é bem simples, primeiramente precisamos carregar os script amp-social-share-0.1.js:

<script async custom-element="amp-social-share" src="https://cdn.ampproject.org/v0/amp-social-share-0.1.js"></script>
Code language: HTML, XML (xml)

Depois em nosso código chamar os botões de compartilhamento que queremos utilizar, a plataforma será definida pelo parâmetro type, como no exemplo a seguir:

<div class="social-bar"> <amp-social-share type="twitter"></amp-social-share> <amp-social-share type="email"></amp-social-share> <amp-social-share type="linkedin"></amp-social-share> <amp-social-share type="facebook"></amp-social-share> <amp-social-share type="whatsapp"></amp-social-share> </div>
Code language: HTML, XML (xml)

E o formato default será o seguinte:

Propriedades

Podemos modificar nossos botões de compartilhamento através de propriedades e o componente amp-social-share trabalha em geral com os seguintes atributos:

  • type – qual a plataforma que iremos compartilhar
  • data-target – se iremos abrir uma uma nova aba
  • data-share-endpoint – caso a plataforma em que requeremos compartilhar não esteja na lista acima podemos definir um endpoint caso a plataforma que queremos utilizar possua.
  • data-param-* – podemos adicionar atributos relacionados a plataforma em que queremos compartilhar o conteúdo.
  • width e height – podemos definir as dimensões de nossos componentes.

Customizando o estilo dos nosso botões

Por padrão sabemos que nosso componente carrega algum estilo como ícones e cores específicas da plataforma, também sabemos podemos modificar algumas funcionalidades e o formato do nosso botão através de propriedades.

Mas caso queiramos modificar a cor do nosso botão, por exemplo, para isso vamos precisar modificar o nosso CSS. Para essa ação podemos utilizar seletores específicos. Como no exemplo abaixo:

amp-social-share[type='twitter'], amp-social-share[type='facebook'], amp-social-share[type='email'], amp-social-share[type='whatsapp'], amp-social-share[type='linkedin'] { background-color: black; color: white; }
Code language: CSS (css)

No código acima temos a seleção dos items por tags e tipo, poderíamos aplicar um seletor genérico por tag, mas nesse exemplo eu adicionei o tipo como uma opção de alterar item a item.

Esse tutorial faz parte de um curso online que estou criando no meu canal do youtube, caso deseja acompanhar, só assinar o canal:

Veja mais posts sobre AMP na página da categoria ou qualquer dúvida deixe um comentário e até o próximo post

Categorias
AMP Accelerated mobile pages WordPress

AMP para WordPress

No post anterior falei sobre plugins de performance para WordPress, agora chegou a hora de falar de outro plugin relacionado a performance o Plugin do AMP para WordPress.

Assistindo conteúdo sobre WP no YouTube, por muitas vezes o plugin é vendido como plugin para deixar o WordPress rápido. Mas como isso é possível?

AMP é uma biblioteca que roda no front-end, ela foca na entrega do conteúdo e na experiência do usuário, ele possui três ferramentas cruciais para melhoria do desempenho:

  • AMP JS – Possui uma série de melhorias relacionadas a performance com tree shaking e lazy loading.
  • AMP HTML – Uma biblioteca de componentes HTML, como, slideshow, light-box, menu slideshow, player de vídeo entre outros.
  • AMP Cache – Esse item é ativado quando sua aplicação possui código AMP válido.

Umas das condições do plugin AMP é liberar a renderização de conteúdo não permitir que scripts terceiros aumentem o tempo de exibição do conteúdo da sua página.

Um bom exemplo de bloqueio da renderização de nossa página é a utilização embed de vídeos do YouTube quando criei o curso de PWA decidi criar uma página com todos os vídeos, inclui 17 embeds em uma mesma página, e o resultado foi o seguinte:

Auditoria de desempenho utilizando chrome devtools

Nos testes realizados na versão semAMP:

  • Primeira impressão de conteúdo é realizada em 3.4 segundos
  • O tempo de interação vai para 29.9 segundos isso significa que um usuário irá levar 30 segundos para interagir com o conteúdo.

O principal problema é causado por conta das várias requisições feita por múltiplos embeds do Youtube, por conta de rodarem um um iframe eles não conversam entre si acabam requisitando os mesmo scripts diversas vezes.

requisições realizadas pela página sem o plugin AMP

Como podemos ver na imagem acima temos varias requisições para o mesmo arquivo JavaScript totalizando 45 requisições, essas requisições aumentam o tamanho total da página, além de todas essas requisições serem disparadas ao mesmo tempo, assim impossibilitando o usuário de interagir com a página.

Quando ativamos o plugin AMP para mesma página temos o seguinte resultado.

Teste performance realizado como o plugin AMP ativo

Como podemos ver temos uma redução no tempo de carregamento e uma melhor na pontuação referente a performance

  • Primeira impressão de conteúdo é realizada em 2,8 segundos
  • O tempo de interação 5 segundo, essa foi a redução mais significativa.

Isso ocorre porque AMP passa a gerenciar esses recursos, como por exemplo conteúdo “embedado”agora o número de requisições JavaScript cai para 15 arquivos:

Requisições JavaScript feitas com o plugin ativo.

Além da redução do tempo de carregamento também temos a redução de transferências de arquivos de 2.2mb para 1.2mb. Essa comparação mostra um dos benefícios de se trabalhar com a biblioteca. Mas antes de sair ativando o plugin precisamos entender como ele funciona.

O plugin

Quando foi lançado em 2016, o AMP teve seu primeiro plugin criado por uma parceria entro Google e Automattic, o plugin era bem experimental. Nessa época outros plugins criados pela comunidade ofereciam muito mais recursos. Por muito tempo utilizei plugins criados pela comunidade.

Em 2019, visitando o stand do Google no WordCamp Europe tive a possibilidade de ver o trabalho feito pelo Google para reativar o plugin do AMP. Era visível nos últimos 2 anos uma movimentação do Google para contribuir com a comunidade WP.

Nessa época decidi baixar o plugin novamente para realizar testes: https://wordpress.org/plugins/amp/

Página principal do plugin do AMP

Depois dos primeiros testes vi que as melhorias eram significativas comparado a última vez que tinha o utilizado o plugin. Os testes foram realizados utilizando o modo Padrão. Para entender mais o Plugin AMP funciona ele possui três modos:

  • Leitor(2016): Onde o usuário tem uma versão mais simples todas as páginas amp serão redirecionadas para uma nova url com /amp no final e o plugin irá gerenciar todos os erros de validação.
  • Transição: O plugin delega ao administrador do conteúdo a escolha de quais as páginas serão exibidas como AMP e não-AMP. O visual segue o mesmo visual do seu tema WordPress.
  • Padrão: Nessa modo sua aplicação irá tornar full AMP. Onde todo o conteúdo da sua aplicação irá utilizar somente em uma versão AMP.

Após ativar o plugin, acessamos no menu lateral do painel de controle da sua aplicação WordPress você irá encontrar a opção AMP.

Acessando o painel do plugin iremos ver as seguinte opções:

tela principal do plugin AMP

Inicialmente temos um banner de boas vindas, em seguida temos duas opções de experiência AMP website e AMP Stories.

  • AMP Website: irá habilitar AMP em sua aplicação, após a seleção dessa opção temos a opção de escolher qual template iremos utilizar
  • AMP Stories: vou dedicar um post para essa sessão mas uma breve introdução stories foi incluído recentemente na plataforma com ele temos a opção de adicionar chamadas aos nossos posts com animações. Caso queira saber mais confira a documentação oficial do AMP Stories.
painel com opções de templates

Como havia mencionado anteriormente, na tela principal do plugin temos a opção de selecionar os templates que iremos utilizar em nossa aplicação. Caso escolha o modo leitor, as páginas e posts que utilizam AMP terão as páginas corrigidas para AMP, automaticamente. É a versão que não requer nenhuma ação por parte do administrador mas sua experiência é bem simple.

Validação de conteúdo AMP

As versões de Transição e Padrão precisam de uma ação do administrador para obter um conteúdo válido AMP. Porque essas versões tentarão ser idêntica a versão não AMP. Para isso o processo de validação precisa ser direcionado pelo administrador da aplicação.

Mas qual a importância de ter um conteúdo válido AMP? Primeiro por uma questão de boas práticas manter a qualidade do código de sua aplicação e Segundo todo conteúdo válido pode fazer uso do AMP Cache.

AMP Cache é recurso disponibilizado por motores de busca como Google e Bing que melhora ainda mais a performance da sua aplicação os resultados vindo dos motores de busca serão servidos pelo AMP cache.

Primeiro item para obter o conteúdo AMP válido é ter um tema compatível, no meu caso que utilizo o Twenty Twenty não precisei realizar nenhuma alteração em meu tema. Segundo passo foi resolver os problemas de compatibilidade com plugins.

Podemos fazer a validação por dois caminhos por índice de erros ou por página. No meu caso não utilizo muitos plugins, apenas um plugin para exibir os códigos dos tutoriais no meu blog, o plugin não era compatível com AMP assim causando problemas de validação, como podemos ver na imagem abaixo:

lista de erros de validação AMP

A solução foi simples navegando na lista de plugins compatíveis achei uma alternativa para esse plugin:

Substitui pelo plugin Syntax-hightlighting Code block e resolvi o problema referentes a plugin. Caso isso não seja possível você pode desabilitar as partes que causam problemas e verificar como o plugin se comporta. Segunda opção é utilizar componentes AMP para substituir plugins posso fazer outro post sobre o assunto, caso tenha interesse.

Analytics

Outro ponto crucial é a para de monitoramento da sua aplicação, caso não utilize nenhum plugin de tracking o plugin disponibiliza uma área para você adicionar o código do analytics com AMP código possui um formato diferente ele trabalha com um formato JSON:

{
    "vars": {
        "account": "UA-doseusite-1"
    },
    "triggers": {
        "trackPageview": {
            "on": "visible",
            "request": "pageview"
        }
    }
}

Na sessão do analytics do plugin do AMP você terá mais informações de como adicionar o código analytics mas o formato acima é o esperado no caso da propriedade account deve ser passado o código UA so seu analytics.

Caso não queira se preocupar como código uma alternativa para conectar seu plugin AMP para WordPress com Google Analytics é a utilização do plugin SiteKit, ele sincroniza todos os serviços de tracking:

Plugin site kit by Google

Essa é uma breve intro sobre o plugin do AMP para WordPress em meu canal do Youtube também gravei sobre o assunto:

intro sobre AMP

Caso queira saber mais sobre AMP tenho um curso de desenvolvimento de aplicações AMP em meu canal. E aqui no blog também tenho uma página dedicada sobre o assunto.

Categorias
AMP Accelerated mobile pages

Convertendo uma aplicação AMP em uma PWA

Agora chegou o momento de conectar os meus dois assuntos favoritos, Progressive Web Apps(PWA) e AMP. Se você ainda não sabe o que é uma PWA podemos definir conjunto de tecnologias que nos permitem criar aplicações web com recursos que antes só possíveis em aplicações nativas se quiser saber mais sobre PWA tenho um curso dedicado em meu canal.

As PWA possui uma série de diferentes API que podem ser aplicadas a diferentes soluções, mas para o caso de nossa aplicação AMP vamos abordar dois items:

  1. Tonar nossa aplicação instalável
  2. Adicionar suporte a versão offline.

Criando um web app manifest para nossa PWA

Primeiro passo vamos criar um web app manifest arquivo json que permite que dispositivos que reconheçam que nossa aplicação pode se instalável. Para isso vamos adicionar em nosso projeto um arquivo chamado manifest.json e nele vamos adicionar o seguinte código:

{ "short_name": "Caipirinha", "name": "How to prepare the best caipirinha", "icons": [ { "src": "./images/capi_icon_192.png", "type": "image/png", "sizes": "192x192" }, { "src": "./images/capi_icon_512.png", "type": "image/png", "sizes": "512x512" } ], "start_url": "/index.html", "background_color": "#00d1c3", "display": "standalone", "scope": "/", "theme_color": "#00d1c3" }
Code language: JSON / JSON with Comments (json)

O código acima descreve as informações que iremos exibir para o usuário quando ele instalar nossa aplicação, que são elas:

  • short_name: o nome que sera exibido na tela inicial do nosso usuário.
  • icons: com uma lista de ícones que iremos exibir em diferentes plataformas.
  • start_url: o endereço nossa aplicação irá carregar quando acessada através do ícone na tela inicial do usuário.
  • background_color: a cor do background da splash screen do nosso app.
  • display: o modo em que nossa PWA será exibida
  • theme_color: as cor do tema da nossa aplicação, por exemplo, barra de controle.

Depois que criarmos nosso arquivo manifest.json temos adicionar uma referência dentro da tag head de nosso index.html ao arquivo de configuração, como podemos ver no código abaixo:

<link rel="manifest" href="/manifest.json">
Code language: HTML, XML (xml)

Adicionando suporte a versão off-line

Agora que já definimos como nosso app será instalado é hora de adicionar a versão off-line de nossa aplicação para isso vamos trabalhar com service workers.

Service Worker um script que é executando por nosso browser em background, separado de nosso DOM onde funciona como proxy acompanhando as requisições no nosso app.

Caso queira saber mais sobre o assunto confira o post sobre service worker.

Mas com esse recurso conseguimos controlar quando nosso app faz requisições a rede e definir estratégias de cache e suporte a versão offline utilizando em conjunto com a cache API.

Atualmente existem bibliotecas que facilitam a implementação desses recursos, por exemplo, Workbox onde também tenho um post mais detalhado sobre o assunto aqui.

Mas AMP vai um passo além do Workbox e abstrai uma série de passos na configuração de um service worker para implantação de estratégias de cache e versão off-line. Isso tudo utilizando AMP Service Worker ele armazena automaticamente os scripts e os documentos de nossa aplicação.

Como criar um service worker com AMP?

Passo 1 – criar o arquivo que irá importar o AMP Service Worker e incializa-lo, para isso vamos criar um arquivo JavaScript chamado sw.js e adicionar os seguinte código:

importScripts('https://cdn.ampproject.org/sw/amp-sw.js'); AMP_SW.init();
Code language: JavaScript (javascript)

Passo 2 – Incluímos o script que irá instalar o AMP Service Worker próximos as scripts que você já carrega em sua aplicação AMP.

<script async custom-element="amp-install-serviceworker" src="https://cdn.ampproject.org/v0/amp-install-serviceworker-0.1.js"></script>
Code language: HTML, XML (xml)

Passo 3 – Adicionamos dentro do corpo da nossa página HTML o componente amp-install-servieworker:

<amp-install-serviceworker src="/sw.js" data-iframe-src="install-sw.html" layout="nodisplay"> </amp-install-serviceworker>
Code language: HTML, XML (xml)

O componente amp-install-serviceworker irá registrar um service worker definido na propriedade src, dois pontos importante sobre o service worker:

  • Precisa estar na pasta raiz da aplicação
  • Precisa ser servido via HTTPS.

A segunda propriedade é o data-iframe-src é um atributo opicional que será responsável por verificar se o browser possui suporte a service worker e instalar-lo em caso possua.

Passo 4 – o último passo vamos criar o arquivo definida pela propriedade data-iframe-src:

<!doctype html> <title>installing service worker</title> <script type='text/javascript'> if('serviceWorker' in navigator) { navigator.serviceWorker.register('./sw.js'); }; </script>
Code language: HTML, XML (xml)

Com esse 4 passos temos nossa primeira versao offline, o AMP Service Worker nos permite definir estratégias de cache para arquivos especificos. Caso queira saber mais sobre estrategias de cache eu escrevi um post aqui.

Vou criar mais um post de como modificar estratégias de cache e exibir uma página específica parar quando os usuários estiverem off-line.

Categorias
AMP Accelerated mobile pages

Trabalhando com AMP image light-box

No post anterior vimos como implementar um light-box com o componente amp-lightbox e nesse post vamos ver como implementar com AMP image light-box para imagens, assim iremos trabalhar com o componente amp-image-lightbox. Ele possui algumas particularidades comparado ao componente amp-lightbox mas o comportamento será bem parecido.

amp-image-lightbox

O componente amp-image-lightbox habilita um lightbox específico para images, quando acionado a image será exibida em destaque. Para trabalhar como o componente precisamos primeiramente carregar o script:

<script async custom-element="amp-image-lightbox" src="https://cdn.ampproject.org/v0/amp-image-lightbox-0.1.js"></script>
Code language: HTML, XML (xml)

Em seguida adicionamos em nossa aplicação seguinte o código:

<amp-image-lightbox id="lightbox-caipirinha" layout="nodisplay"></amp-image-lightbox> <amp-img on="tap:lightbox-caipirinha" role="button" tabindex="0" src="caipirinha.jpg" width="200" height="100" ></amp-img>
Code language: HTML, XML (xml)

O amp-img possui um evento de tap que irá referenciar o light-box que queremos exibir e nesse caso o amp image lightbox (amp-image-lightbox) com id “lightbox-caipirinha” será o nosso alvo, assim como amp-lightbox ele possui o layout “nodisplay” e com o código acima o resultado será o seguinte:

light-box quando acionado

O componente amp-image-lightbox já vem com estilização do background interações, por exemplo, zoom, panorâmica, e ações para fechar o lightbox quando o usuário clicar fora da imagem ou precionar ESC.

Diferente do amp-lightbox o amp-image-light pode ser utilizado por múltiplas images, assim podemos ter duas images fazendo referência ao mesmo light-box. Como no código a seguir:

<amp-image-lightbox id="lightbox-caipirinha" layout="nodisplay"></amp-image-lightbox> <amp-img on="tap:lightbox-caipirinha" role="button" tabindex="0" src="caipirinha1.jpg" width="200" height="100" ></amp-img> <amp-img on="tap:lightbox-caipirinha" role="button" tabindex="0" src="caipirinha2.jpg" width="200" height="100" ></amp-img>
Code language: HTML, XML (xml)

Legendas

Um recurso opcional é a inclusão de legendas no light-box, para isso precisamos incluir uma tag “figure” e como filha uma tag “figcaption” ou adicionar uma descrição com aria através da propriedade “aria-describedby” essas serão as duas opções que veremos no código a seguir:

Com tag figure

<amp-image-lightbox id="lightbox-caipirinha" layout="nodisplay"></amp-image-lightbox> <!-- Captions via figcaption --> <figure> <amp-img on="tap:lightbox-caipirinha" role="button" tabindex="0" src="caipirinha.jpg" layout="responsive" width="300" height="246" ></amp-img> <figcaption>Learn how to prepare the best Caipirinha</figcaption> </figure>
Code language: HTML, XML (xml)
Resultado do light-box com legenda

Com ARIA

<amp-image-lightbox id="lightbox-caipirinha" layout="nodisplay"></amp-image-lightbox> <!-- Captions via figcaption --> <div> <amp-img on="tap:lightbox-caipirinha" role="button" tabindex="0" src="caipirinha.jpg" aria-describedby="image-description" layout="responsive" width="300" height="246" ></amp-img> <div id="image-description">Caipirinha from Brazil</div> </div>
Code language: HTML, XML (xml)

Em ambas situações o resultado visual será o mesmo, com a legenda no canto inferior.

Atributos

Os atributos no componente amp-image-lightbox é um pouco diferente do amp-lightbox não temos opções de animação mas temos a seguintes propriedades:

  • layout(obrigatório): deve ser nodisplay
  • id (obrigatório): necessário para ser referenciado pelo elemento que ira disparar a ação de exibir
  • data-close-button-aria-label(opcional): Uma legenda usada pelo ARIA que podemos incluir em nosso botão fechar.

Se quiser saber mais sobre am-lightbox eu publiquei um post falando sobre o componente. Para acompanhar o curso de AMP assine meu canal no YouTube. Qualquer dúvida deixe um comentário e até o proximo post.

Categorias
AMP Accelerated mobile pages

Criando light-box com AMP: amp-lightbox

Nesse post vamos ver como implementar um light-box em nossa aplicação AMP, light-box é um dos recursos mais usados desde a popularização do JavaScript. Na maioria das vezes usado para focar a exibição de elementos gráficos ou mensagens. A plataforma amp disponibiliza três componentes para exibição de light-box amp-lightbox, amp-image-lightbox e amp-lightbox-gallery.

Cada um desses componentes possui uma aplicação específica, Para esse tutorial iremos abordar o componente amp-lightbox.

amp-lightbox

Esse componente quando utilizado seu elemento filho será exibido em uma modal quando acionado através de um evento de clique. Com isso temos que ter um segundo elemento para ativa-lo, um botão poderá ser uma alternativa. O componente possui alguns comportamentos já pre definidos, por exemplo, quando o usuário pressionar a tecla “esc” o light-box será fechado. Um alternativa é incluir um elemento com a ação close no light-box.

O componente amp-lightbox é um componente extended assim precisamos carregar o script relacionado:

<script async custom-element="amp-lightbox" src="https://cdn.ampproject.org/v0/amp-lightbox-0.1.js"></script>
Code language: HTML, XML (xml)

Com essa introdução vamos criar o nosso primeiro exemplo, baseado no projeto the best caipirinha, vamos utilizar o light-box para trazer mais informações sobre os items da nossa receita, por exemplo, descrição sobre cana de açúcar com isso temos o seguinte código:

<button on="tap:sugarcane-wiki">sugarcane</button> <amp-lightbox id="sugarcane-wiki" layout="nodisplay"> <p> Sugarcane, or sugar cane, or simply cane, are several species of tall perennial true grasses of the genus Saccharum... </p> </amp-lightbox>
Code language: HTML, XML (xml)

Apenas com o botão e o componente amp-lighbox temos nosso light box somente com a funcionalidade como podemos ver na imagem abaixo:

Agora é hora de adicionar a parte visual, para isso precisamos adicionar o estilo para o nosso elementos com isso vamos criar classes para estilizar nossos elementos em nosso CSS e aciona-los em nosso elementos HTML:

CSS

.lightbox { align-items: center; background: rgba(0, 0, 0, 0.8); box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; height: 100%; width: 100%; position: absolute; padding: 2em; } .lightbox_p { color: #fff; font-size: 1.5em; font-weight: 500; }
Code language: CSS (css)

HMTL

<amp-lightbox id="sugarcane-wiki" layout="nodisplay"> <div class="lightbox"> <p class="lightbox_p"> Sugarcane, or sugar cane, or simply cane, are several species of tall perennial true grasses of the genus Saccharum.... </p> <p class="lightbox_p">source: wikipedia</p> </div> </amp-lightbox>
Code language: HTML, XML (xml)

Adicionando o estilo temos o seguinte resultado:

Apenas adicionando o botão para abrir o light-box, para fechar precisamos pressionar a tecla “esc” mas isso pode não ser intuitivo para os nossos usuários com isso vamos adicionar um botão fechar dentro de nosso light-box.

<amp-lightbox id="sugarcane-wiki" layout="nodisplay"> <div class="lightbox"> <p class="lightbox_p"> Sugarcane, or sugar cane, or simply cane, are several species of tall perennial true grasses of the genus Saccharum.... </p> <p class="lightbox_p">source: wikipedia</p> <button class="lightbox_close" on="tap:sugarcane-wiki.close">close</button> </div> </amp-lightbox>
Code language: HTML, XML (xml)

Adicionamos um botão com a ação de close sobre o light-box, falando em ações o componente amp-lightbox aceita duas ações open e close. Por padrão ele aciona a ação de open por isso que no botão para abrir o light-box não especificamos a ação. Agora para realizar a estilização do nosso botão vamos adicioar o seguinte CSS:

.lightbox_close { position: absolute; right: 32px; top: 32px; width: 32px; height: 32px; opacity: 0.7; text-indent: -999px; overflow: hidden; border: none; background: transparent; } .lightbox_close:hover { opacity: 1; } .lightbox_close::before, .lightbox_close::after { background-color: #fff; content: ''; position: absolute; left: 16px; top: 0; height: 33px; width: 3px; } .lightbox_close::before { transform: rotate(45deg); } .lightbox_close::after { transform: rotate(-45deg); }
Code language: CSS (css)

E o resultado será o seguinte:

com CSS criamos o botão de fechar o texto é escondido para ser ligo apenas por leitores de tela

Outro opção que poderíamos incluir se o usuário fechasse o light-box clicando no background com isso adicionamos o evento de clique no elemento com o class “lighbox”:

<amp-lightbox id="sugarcane-wiki" layout="nodisplay"> <div class="lightbox" on="tap:sugarcane-wiki.close" role="button" tabindex="0"> <p class="lightbox_p"> Sugarcane, or sugar cane, or simply cane, are several species of tall perennial true grasses of the genus Saccharum... </p> <p class="lightbox_p">source: wikipedia</p> </div> <button class="lightbox_close" on="tap:sugarcane-wiki.close">close</button> </amp-lightbox>
Code language: HTML, XML (xml)

No código acima adicionei o evento de tap no elemento lightbox também adicionei duas propriedades por questões de acessibilidade “role” e “tabindex” para tornar a div clicável e não interferir na ordem lógica dos elementos para leitores de tela.

Atributos

Então vimos alguns exemplos práticos com light-box agora vamos ver alguns atributos:

  • animate-in (opcional): define o estilo de animação de abertura do light-box. Por default sua aparição vai ser feita por fade-in. Mas temos disponíveis: fade-in, fly-in-bottom e fly-in-top.
  • close-button (obrigatório para AMP ads): renderiza um botão no to do lightbox. Ele é somente válido e obrigatório para AMP ads.
  • id (obrigatório): valor único para identificar o lightbox.
  • layout (obrigatório): deve ser definido como nodisplay.
  • scrollable (opcional): Quando este atributo é definido o conteúdo do light-box pode ter rolagem horizontal habilitada quando necessário.

O tipos de animações com animate-in eu vou deixar para mostrar em uma vídeo aula no meu canal, mas caso queira saber mais sobre AMP confira a página com outros tutoriais na página da categoria AMP.

Em breve estarei adicionando mais posts sobre os componentes amp, qualquer dúvida deixe um comentário e até o próximo vídeo.