Vamos falar sobre geolocation esse post servirá como base para o conteúdo do curso de PWA que estou rodando no meu canal. Na versão 2020 do curso iremos abordar Web APIs disponíveis para iOS e nesse primeiro posts iremos abordar a Geolocation web API.
Umas das primeiras web APIs lançadas junto com o HTML5, para termos noção esse recurso estava disponível na versão 5 do Chrome e Safari em 2010. A Geolocation API possui uma série de funções e eventos que permitem a localização do usuário através doso dados: latitude e longitude.
Relatório do “can I use”
Suporte
Esse recurso é totalmente dependente do device do usuário vimos que o recurso é presente 94% dos browsers que suporte alto. Mas a sua precisão depende que o device que possua GPS, caso contrário essa informação será gerada através de cruzamento de dados, por exemplo, rede e endereço IP. Isso significa se o device não possuir suporte essa informações não serão tão precisas.
GPS
Outro ponto importante é o consumo de bateria, para o os dispositivos móveis o acesso ao GPS causa um custo maior de processamento assim aumenta o consumo de bateria, então é importante fazer o uso consciente desse recurso.
Privacidade
Na maioria dos devices esse recurso é dependente de uma conexão HTTPS, também antes do acesso a esse recurso o browser irá requisitar permissão de acesso a Geolocalização do usuário. Como podemos ver na imagem a seguir:
Exemplo pop up de permissão da apple
Ideal caso armazene ou monitore a movimentação do usuário deixe claro o uso desse recurso. Esse recurso também só será acessado em uma aplicação que estiver rodando em um servidor web.
Código
Depois de uma introdução sobre a API agora vamos ver como utiliza-la em nossa aplicação:
No código acima fazem a chamada da api dentro de navigator, podemos conferir se o browser tem suporte a geolocation verificando se o atribulo é nulo mas em 2020 a api está presente na maioria dos browsers então não vou me preocupar como esse ponto.
Chamamos a função get position responsável por requisitar a latitude e longitude do usuário. Ela recebe como parâmetro duas funções uma parar executar caso sucesso ou falha de acesso ao recurso.
Se a requisição for bem sucedida teremos a chamada da função geoSuccess com o retorno da latitude(position.coords.latitude) e longitude(position.coords.longitude). Em caso de erro teremos a chamada da função geoError com os possíveis códigos:
0: erro desconhecido
1: permissão negada
2: erro na resposta da fonte da informação
3: timed out
Essa é uma introdução ao assunto em breve estarei postando um vídeo sobre o assunto em meu canal. Qualquer dúvida deixe um comentário ou continue lendo mais tutoriais na página da categoria.
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:
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:
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-lightboxid="lightbox-caipirinha"layout="nodisplay"></amp-image-lightbox><!-- Captions via figcaption --><figure><amp-imgon="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-lightboxid="lightbox-caipirinha"layout="nodisplay"></amp-image-lightbox><!-- Captions via figcaption --><div><amp-imgon="tap:lightbox-caipirinha"role="button"tabindex="0"src="caipirinha.jpg"aria-describedby="image-description"layout="responsive"width="300"height="246"
></amp-img><divid="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.
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:
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:
<buttonon="tap:sugarcane-wiki">sugarcane</button><amp-lightboxid="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:
<amp-lightboxid="sugarcane-wiki"layout="nodisplay"><divclass="lightbox"><pclass="lightbox_p">
Sugarcane, or sugar cane, or simply cane, are several species of tall perennial true grasses of the genus Saccharum....
</p><pclass="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-lightboxid="sugarcane-wiki"layout="nodisplay"><divclass="lightbox"><pclass="lightbox_p"> Sugarcane, or sugar cane, or simply cane, are several species of tall perennial true grasses of the genus Saccharum....
</p><pclass="lightbox_p">source: wikipedia</p><buttonclass="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:
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-lightboxid="sugarcane-wiki"layout="nodisplay"><divclass="lightbox"on="tap:sugarcane-wiki.close"role="button"tabindex="0"><pclass="lightbox_p"> Sugarcane, or sugar cane, or simply cane, are several species of tall perennial true grasses of the genus Saccharum...
</p><pclass="lightbox_p">source: wikipedia</p></div><buttonclass="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.
Para esse post iremos implementar um menu slider, com isso precisar aprender dois itens importantes o primeiro é interação com eventos e o segundo é o componente amp-sidebar, para nosso exercício iremos aplicar em nosso projeto the best caipirinha o menu atualmente se encontra sempre visível no modo desktop não temos problemas mas nas versões mobile temos os menu sempre cobrindo o nosso conteúdo, como podemos ver na imagem abaixo:
nosso menu se comporta na versão mobile
Como solução para o nosso problema iremos exibir o menu apenas quando o usuário clicar no botão menu. Para isso precisamos acompanhar o evento de click do usuário. Como fazemos isso com AMP? Com JavaScript ouvimos os eventos através do addEventListener mas com AMP iremos utilizar o atributo on.
atributo “on”
Com AMP para acompanhar eventos com tap, cliques de mouse interações com o teclado. Esses eventos nos componentes AMP são acompanhados pelo atributo on além de acompanhar os eventos podemos definir ações específicas chamadas de actions, por exemplo:
<buttonon="tap:menu.hide">
Code language:HTML, XML(xml)
No código acima temos um botão que está acompanhando a ação de tap e quando realizado o elemento com id “menu” onde será realizada a ação de “hide” para esse código funcionar precisamos de elemento com o id menu exemplo:
<divid="menu">Meu menu</div><buttonon="tap:menu.hide">Fechar o menu</button>
Code language:HTML, XML(xml)
Ações
No exemplo acima utilizamos a ação hide ele faz parte de um grupo de ações genéricas disponíveis para todos componentes AMP e elementos HTML que são elas:
hide
show
toggleVisibility
toggleClass
scrollTo
focus
Alguns componentes possuem ações e eventos específicos, por exemplo, o amp-carousel possui a ação goToSlide onde podemos exibir um slide específico e o evento slideChange que com ele podemos acompanhar esse evento e determinar alguma ação quando necessário.
amp-sidebar
Agora que temos uma introdução a eventos e ações com AMP vamos implementar esses novos recursos a nossa aplicação, primeiramente vamos adicionar o component amp-sidebar em nossa aplicação ele irá necessitar um script extra:
O componente amp-sidebar oculta o conteúdo destinado a uma acesso temporário exemplo, links de navegação, botões, menus. O componente pode ser controlado por botões.
amp-sidebar possui um comportamento bem específico:
O conteúdo irá aparecer sempre da direita ou esquerda da página dependendo de qual valor definido pela propriedade side.
amp-sidebar deve conter um componente HTML válido.
layout nodisplay é obrigatório
É recomendado que o componente amp-sidebar seja um filho direto da tag body para preservar a ordem lógica do DOM especialmente para leitores de tela.
A ação de zoom é desabilitada para preservar o seu funcionamento.
A largura da sidebar pode ser ajustado via CSS mas respeitando uma largura mínima de 45px.
Depois da introdução ao componente vamos a sua utilização:
<buttonclass="recipe__header__menuBtn"on='tap:sidebar-menu.toggle'>Menu</button><amp-sidebarid="sidebar-menu"side="left"layout="nodisplay"><navclass="recipe__navigation nav"><ulclass="recipe__navigation__menu"><liclass="recipe__navigation__item"><ahref="#about">About</a></li><liclass="recipe__navigation__item"><ahref="#ingredients">Ingredients</a></li><liclass="recipe__navigation__item"><ahref="#steps">Steps to Make It</a></li></ul></nav></amp-sidebar>
Code language:HTML, XML(xml)
No código acima temos um botão responsável por invocar a exibição da nossa sidebar, inicialmente ela estará no estado nodisplay, acompanhamos o evento de tap e quando pressionado ele irá realizar ação de toggle em nosso amp-sidebar com id sidebar-menu, todo o efeito de animação já será definido pelo componente e depois que o código é aplicado em nossa aplicação o resultado será o seguinte:
Assim temos a solução para o nosso menu tanto para desktop quanto mobile
No código acima é uma parte da nossa solução para ver a solução completa só acessa o repositório no github vamos fechando esse tutorial por aqui. Mais posts sobre AMP você encontra na página da categoria e caso tenha alguma dúvida só deixar um comentário.
No post anterior como utilizar nosso primeiro componente o amp-img neste post vamos entender um pouco mais sobre componentes AMP e como utiliza-los. Primeiramente existem três tipos de componentes:
Built-in são os componentes base da biblioteca como amp-img e amp-pixel.
Extended componentes que precisa de um script extra para executar geralmente atendem a problemas mais específicos amp-twitter, amp-youtube, amp-analytics.
Experimental Componentes que estão em fase de teste
Assim como web components todos os componentes AMP precisam de javascript para serem executados, com a diferença que alguns estão presente em seu core como amp-img e outros precisam de um script extra. Essa técnica a reduzir o tamanho de sua aplicação porque carregamos somente os componentes que necessitamos.
Navegando pelo repositório de componentes
Para saber qual componentes devemos utilizar a documentação será o nosso melhor aliado acessando o endereço https://amp.dev/documentation/components/ você encontrará a lista de componentes existentes e a descrição de como eles se comportam.
aqui temos um exemplo de uma página da documentação
Na documentação você irá as seguintes respostas :
O que o componente faz: descrição(description)
Como usar o componente: comportamento(behavior)
Como customizar o componente: atributos(attributes)
Como estilizar o componente: estilização(styling)
O componente precisa de uma script tag extra: scripts requeridos(required script)
Qual layout o componente suporta: Layouts
Adicionando um componente extended
Agora que temos uma introdução sobre components, vamos utilizar o nosso código boilerplate vamos adicionar uma componente amp-youtube:
<!DOCTYPE html><htmlamp><head><metacharset="utf-8"><metaname="viewport"content="width=device-width,minimum-scale=1"><metaname="description"content="Este é um Boilerplate AMP."><linkrel="preload"as="script"href="https://cdn.ampproject.org/v0.js"><scriptasyncsrc="https://cdn.ampproject.org/v0.js"></script><title>Components AMP</title><styleamp-boilerplate>body{-webkit-animation:-amp-start 8ssteps(1,end) 0s1 normal both;-moz-animation:-amp-start 8ssteps(1,end) 0s1 normal both;-ms-animation:-amp-start 8ssteps(1,end) 0s1 normal both;animation:-amp-start 8ssteps(1,end) 0s1 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><styleamp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript><linkrel="canonical"href="."><scriptasynccustom-element="amp-youtube"src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script></head><body><h2>Components AMP</h2><amp-youtubedata-videoid="ZqQ5UXjZukY"width="480"height="270"></amp-youtube></body></html>
Code language:HTML, XML(xml)
example amp-youtube
Atenção para dois items o script que importamos para renderizar nosso componente youtube amp-youtube-0.1.js e por fim a tag amp-youtube ela será responsável exibir nosso youtube vídeo.
Componente amp-youtube
É um componente extended responsável por exibir vídeos no youtube por isso além das dimensões um requisito obrigatório é o id do nosso video, podemos achar na url do video que queremos compartilhar, exemplo, ‘https://www.youtube.com/watch?v=ZqQ5UXjZukY‘ a propriedade v é o id do nosso vídeo ou seja precisamos apenas do id ‘ZqQ5UXjZukY‘ para adicionar em nosso componente aceita uma série de parâmetros:
data-videoid: id do video do youtube
layout: tipo do layout que iremos trabalhar, exemplo, no código anterior o video respeita as dimensões definidas no componente mas caso adicionarmos a propriedade layout como responsive nosso componente ira sempre se adaptar ao componente pai e a largura da tela.
width e height: as dimensões do nosso video lembrando sempre respeitando a proporção 16:9.
data-live-channelid: o id da sua transmissão ao vivo, nesse caso precisamos de uma propriedade diferente para nosso componente reconhecer uma transmissão ao vivo
autoplay: se o atributo estiver presente e o browser suportar o vídeo irá tocar automaticamente
loop: se o atributo estiver presente o video irá tocar em loop
dock: adiciona a versão do vídeo minimizada, quando o usuário realiza o scroll do conteúdo e o video sai da área visível do browser. Para habilitar este recurso precisamos de um componente extra o amp-video-docking exemplo a seguir.
Video dock
Video dock foi introduzido pelo youtube recentemente ele permite o usuário acompanhar o vídeo um pequeno popup no canto superior direito enquanto realizar o scroll no conteúdo. Ele pode ser integrado com outros componentes: amp-youtubeamp-video, amp-video-iframe, amp-dailymotion.
Para utilizar o dock precisamos de dois passos básicos carregar o script necessário e o atributo dock em nosso vídeo. Também podemos adicionar docks customizados, mas para esse tutorial vamos utilizar o dock padrão. Como podemos ver no código abaixo:
Podemos adicionar uma imagem de placeholder ela irá aparece no local do vídeo enquanto ele carrega, para isso em nosso componente amp-youtube vamos adicionar um componente amp-img com uma propriedade para placeholder para especificar que a image é um placeholder de um amp-youtube como podemos ver no código abaixo: