Categorias
Tutoriais

Introdução ao npm

Estou começando uma série sobre desenvolvimento do blocos Gutenberg é um dos pré-requisitos para se trabalhar com Gutenberg e JavaScript moderno é a utilização de nodeJS e npm. Nesse post iremos realizar uma introdução ao npm e ver qual o seu papel no fluxo de desenvolvimento de blocos Gutenberg.

Se voce já desenvolveu aplicações em react, Vue e express. certamente voce fez o uso de npm para instalar as dependências de sua aplicação. O npm foi adquirido recentemente pela Microsoft/Github, mas como ele funciona funciona? Isso iremos ver a seguir:

npm

É um acrônimo da palavra node package manager em outras palavras gerenciador de pacotes node. Ele vem pre-instalado com NodeJS, quando instalado temos a capacidade de baixar dependências de nossa aplicação. Quando iniciamos um projeto node temos a criação de uma arquivo chamado package.json.

Nele irá conter a descrição e configuração onde iremos falar mais pra frente.

Onde essas dependências estão?

O diretórios de pacotes nodes ficam disponíveis na nuvem, eles podem ser públicos ou privados. Podemos encontrar os pacotes em diretório online no endereço npmjs.com

npm homepage

Temos uma caixa de busca onde podemos pesquisar por pacotes específicos. Por exemplo, se pesquisarmos por “@wordpress/blocks”, nesse caso o @wordpress é o escopo dos pacotes e o pacote em si é block, quando acionarmos a busca iremos achar a página do pacote @wordpress/blocks:

Pagina do pacote @wordpress/blocks

Geralmente na página do pacote vamos ter informações como:

  • Descrição
  • Código para instalação
  • Primeiros passos
  • Dependencias
  • Dependentes
  • Downloads semanais
  • Versões
  • tamanho
  • github page
  • colaboradores

npm CLI

Podemos dizer para desenvolvedores a interface de linha de comando é a parte mais importante do npm através de linha de comando conseguimos baixar instalar pacotes em nossa aplicação. A estrutura básica de um comando com npm e:

npm <comando> [argumentos]

Por exemplo pra instalar um pacote especifico executamos o seguinte código:

npm install webpack

No comando acima instalamos o pacote do webpack, se tudo ocorrer bem o npm irá criar uma pasta node modules com os módulos do webpack e suas dependências. Além disso podemos passar adicionar mais parâmetros para escolher uma versão especifica ou como iremos gravar a dependência.

Package.json

Funciona como uma mapa para sua aplicação nele iremos ter as configurações de dependências de nossas aplicação, organizadas por destino(dev ou produção) e versão. Com npm CLI temos um comando para iniciar um projeto node e criar um package.json.

npm init

Quando executado o comando teremos uma série de perguntas para criar o nosso arquivo package.json:

  • package name: preste atenção nesse valor caso queira publicar o seu projeto ele precisa conter um nome único
  • version: versão do seu projeto junto com o name ele é utilizado para identificar a aplicação.
  • description: descrição do projeto que será exibida quando os usuários buscarem por sua aplicação.
  • entry point: arquivo que será inicializado quando sua aplicação for executada.
  • test command: comando para executar testes
  • git repository
  • keywords: palavras chaves para a busca no repositório
  • author: o autor do pacote
  • license: tipo de licença do pacote

package-lock.json

package-lock.json é automaticamente gerado contendo informações de quando npm modifica o package.json e a árvore de dependências do projeto. É recomendado ter este arquivo listado no seu repositório pelas seguintes razões:

  • Permite aos usuários realizar uma viagem no tempo sobre o projeto.
  • Facilitar uma visibilidade maior sobre as mudanças do projeto
  • Otimiza o processo de instalação do npm evitando a duplicação de conteúdo.

Dependências

Essas são as informações que vem por padrão além disso quando instalamos dependências podemos definir se elas serão de produção ou não. Isso acontece que muitos casos temos dependências de desenvolvimento elas são utilizadas para criar testes ou “compilar” o nosso código como por exemplo babel.

As dependências são organizadas por nome e versão em um objeto:

{ "dependencies" : { "foo" : "1.0.0 - 2.9999.9999" , "bar" : ">=1.0.2 <2.1.2" , "baz" : ">1.0.2 <=2.3.4" , "boo" : "2.0.1" , "qux" : "<1.0.0 || >=2.3.1 <2.4.5 || >=2.5.2 <3.0.0" , "asd" : "http://asdf.com/asdf.tar.gz" , "til" : "~1.2" , "elf" : "~1.2.3" , "two" : "2.x" , "thr" : "3.3.x" , "lat" : "latest" , "dyl" : "file:../dyl" } }

Maioria dos casos trabalhamos com a versão exata, mas podemos ter uma série de regras para versões:

  • versão exata: “1.0.0”
  • versão maior que: “>1.0.0”
  • versão maior que ou igual: “>=1.0.0”
  • versão aproximadamente: “~1.1.0”
  • versão compatível: “1.2.x” pode ser 1.2.1… 1.2.3… 1.2.4…
  • url da versão
  • versão definidas por um range: “1.0.0 – 3.0.0” nesse caso maior

devDependencies

Se você tem planos para utilizar a dependência apenas para de desenvolvimento, nesse caso não queremos que o conteúdo dessa dependência vá para produção. para esse caso utilizamos o seguinte comando:

npm install [nome-do-pacote] --save-dev

Temos uma série de comandos para npm no meu canal do Youtube gravei dois vídeos falando mais sobre o assunto:

Parte 1

Parte 2

Vamos fechando essa introdução por aqui para mais tutoriais, acesse a página da categoria. Ou deixo uma sugestão sobre um assunto que você gostaria de ver no blog.

Categorias
JavaScript WordPress

Como JavaScript está influenciando o desenvolvimento com WordPress

Final de 2018 tivemos o lançamento do Gutenberg a nova experiência de edição do WordPress, uma das ações mais impopulares da história da plataforma dava um passo muito relevante referente ao core da plataforma. Ação invisível para a maioria dos usuário Gutenberg iria influenciar o desenvolvimento JavaScript e WordPress como conhecemos.

Desde o lançamento do WordPressa mais de 15 anos atrás muita coisa mudou na web e especialmente referente a desenvolvimento JavaScript. Gutenberg trouxe para o core do WordPress JavaScript moderno algo necessário para evolução da plataforma. Tecnologias como React, fazem parte do core do WordPress isso mesmo: React.

Esse movimento está transformando o desenvolvimento WordPress para muito mais modular, onde tivemos a introdução de blocos componentes visuais independentes que reduzem a responsabilidade dos temas referentes a funcionalidades.

Essa transição nós trouxe uma pergunta qual será a responsabilidade de um tema em uma aplicação WordPress?

Para isso precisamos entender alguns itens dentro do Gutenberg:

Blocos

Blocos trazem uma estrutura que permite nosso editor de conteúdo sair de um grande bloco de texto para items modulares que permitem sua composição de Layout, os Blocos são divididos em categorias como:

  • Layout
  • Formatação
  • Widgets
  • Códigos incorporados

Por de trás das cortinas no banco de dados os blocos continuam sendo gravados na mesma tabela wp_content com uma diferença os blocos são marcados com comentários e renderizados pela API do Gutenberg.

Componentes e estado

Com a introdução de Blocos e React conceitos como Componentes e estado foram introduzidos com React elementos visual armazenam estado que armazena informações relacionadas a um dado especifico compartilhado por diferente elementos visuais. Mas isso trouxe uma série de desafios para a plataforma como controlar esse fluxo com PHP e React. Algumas modificações foram feitas e o React foi encapsulado para se adaptar com a plataforma. Funções para fazer a ponte entre PHP e React.

Modularização

Dentro da biblioteca do Gutenberg existe um módulo com uma série de componentes base que podem ser reutilizados tanto no editor quando o front-end da aplicação se abrimos o console de nossa aplicação e digitarmos “wp.” conseguimos visualizar todos os módulos disponíveis dentro do WordPress e se digitarmos “wp.components”conseguimos ver todos os components disponíveis no WordPress.

Todos os módulos do JavaScript para WordPress estão disponíveis como pacotes do nodeJS onde podemos ver no link: https://www.npmjs.com/search?q=%40wordpress

pacotes node WordPress

Além disso o uso de pacotes permite o uso do Gutenberg fora do WordPress como foi utilizado pelo Drupal recentemente.

JavaScript moderno

Com Gutenberg temos a possibilidade de desenvolver com EcmaScript 5 ou EcmaScript 2015+ ou superior. Se ainda não domina a nova sintaxe do JavaScript você pode continuar desenvolvendo com EcmaScript 5 mas o recomendado é o uso de JavaScript moderno seu código ficará mais enxuto e você terá a possibilidade de trabalhar com JSX.

Nem todos os browsers suportam JavaScript moderno, por exemplo, Internet Explorer 11. Para isso precisamos fazer o uso de transpilers para fazer a conversão de JavaScript moderno para EcmaScript 5.

Plugins e Temas

Mas todos esses benefícios estão restritos para o Gutenberg? Não, os recursos do Gutenberg podem ser utilizados por plugins e temas. With the package @wordpress/scripts podemos incorporar scripts do core em nossos plugins e temas. Para isso importamos em nosso projeto com o seguinte código:

npm install @wordpress/scripts --save-dev

Com esse pacote nodeJS conseguimos realizar formatação, validação de código e tests:

  • wp-scripts build
  • wp-scripts format-js
  • wp-scripts lint-style
  • wp-scripts lint-js
  • wp-scripts start
  • wp-scripts test-e2e
  • wp-scripts test-unit-js

Para saber mais sobre os pacotes acesse: www.npmjs.com/package/@wordpress/scripts

Block Scaffolding

Lançado no final de fevereiro de 2020 um pacote node que cria um template básico de um bloco Gutenberg. Como o conhecido create-react-app do React.

Para instalar rode o seguinte comando:

npm install @wordpress/blocks --save

O pacote cria um template de uma bloco com elementos básicos customização de CSS, JavaScript e PHP sem se preocupar com configuração de elementos como webpack, babel e ESLint.

Por padrão ele irá utilizar EcmaScript 2015+ mas podemos através de configurações definir o uso de EcmaScript 5. Depois de instalado o pacote @wordpress/blocks para criar um bloco básico em seu terminal de linha de comando digite:

npm init @wordpress/block [nome-do-seu-bloco]

Ele irá criar um bloco com os comandos para:

  • Inicia o desenvolvimento: npm start
  • Compilar o código para produção: npm run build
  • Formatar o código JavaScript de sua aplicação: npm run format:js
  • validação de código css e js: npm run lint:css ou npm run lint:js

Os requisitos básicos para utilizar o pacote são node 10.0.0 e npm 6.9.0.

Conclusão

Ainda estamos no inicio de uma revolução os desenvolvedores que acompanham o Gutenberg desde o inicio já estão tirando proveito desses benefícios, mudando sua rotina referente ao desenvolvimento. Muitas empresas ainda estão adiando essa mudança de paradigma pode enxergar o WordPress apenas como um editor visual e outras por conta de Código legado.

Essa mudança irá mudar o jeito em que desenvolvemos nossa aplicação WordPress de forma mais modular iremos sair da estrutura padrão de templates estáticos e entraremos numa estrutura que blocos serão utilizados em qualquer parte de nossa aplicação. Assim reduzindo ainda mais a dependência de funcionalidades de uma aplicação WordPress com o tema.

Nos próximos posts estarei abordando o @wordpress/block com mais detalhes vamos ver na prática como utilizar essa poderosa ferramenta. Para acompanhar ver mais posts sobre Gutenberg e WordPress acesse a página da categoria.

Categorias
AMP Accelerated mobile pages Geral WordPress

Plugins WordPress não são tecnologias ou processos

Navegando pelo YouTube encontro muitos vídeos, plugin de performance WordPress, plugin de SEO WordPress e outros casos como AMP pode matar o seu projeto. Muitas vezes criam uma visão com dois cliques eu irei resolver todos os meus problemas, plugins WordPress ajudam na automatização de tarefas mas muitas vezes criamos essa visão que eles resolvem todos os nossos problemas ou representam uma tecnologia ou um processo.

Por exemplo SEO é um assunto muito complexo, temos ótimos plugins disponíveis, mas o fato de instalar um plugin de SEO não vai resolver todos os seus problemas referentes ao tema. Eles ajudam e otimizar a realização de tarefas, mas temos que implementar o SEO de nossa aplicação como, inclusão de meta informações, inclusão e otimização de palavra chave e manutenção.

Somente a inclusão do plugin sem o cadastro de nenhuma informação pode prejudicar o SEO de sua aplicação, mas nessa situação é um problema do plugin ou do seu mal uso?

Dai caímos num segundo problema, culpar toda uma tecnologia ou processo por conta plugin, isso é muito comum de achar, por exemplo, no canal do mestre SEO do Fabio Ricotta que eu admiro bastante eu vi o seguinte relato:

Fabio sempre aponta informações baseado em experiências próprias, falando que sua experiência não foi válida mas analisando o vídeo vou comentar certos pontos:

  • Começando pelo título “Como AMP pode matar o seu projeto” já temos o direcionamento de para a tecnologia.
  • Nenhum momento ele especifica qual plugin utilizou generaliza o problema para tecnologia
  • Falhas como esquecer de adicionar código de tracking não é um problema da tecnologia
  • Depois atribuiu o fato plugin remover o código de tracking, novamente não é uma falha da tecnologia. Quando esse tipo de problema acontecer recomendado é notificar o desenvolvedor do plugin para que o problema não se repita
  • Por fim atribui limitações de não ter caixa de comentários, eu utilizo o plugin oficial do AMP tenho todas as funcionalidades do core do WordPress rodando normalmente, mas isso pode ser a limitação do plugin a qual ele utilizou
  • “por padrão o plugin cria uma versão tosca” – Importante especificar qual plugin foi utilizado, por exemplo, novamente a tecnologia sendo resumida a um plugin do AMP oficial a versão reader não é recomendada pelo próprio Google, mas existem opções de customização. Mas temos opções de disponibilizar uma versão idêntica a versão não-AMP.

Opiniões de influenciadores como o Fabio tem um peso muito grande e quem não conhece a tecnologia cria resistência sem mesmo nunca ter utilizado. Por isso é importante antes de compartilhar experiências ser mais específico sobre plugins WordPress e cenários de sua experiência.

Perfomance, SEO ou AMP, por exemplo, não se resumem apenas a instalar um plugin. O plugin de AMP facilitam o seu uso, mas a instalação sem o mínimo de configuração prejudicam a experiência do usuário. Além disso podemos criar um tema totalmente com AMP.

Performance não se resume a adicionar cache tem outra série de recursos que ações que melhoram o desempenho de sua aplicação. Além disso, SEO e Performance são tarefas continuas que nunca acabam precisam de manutenção constante.

Qualquer pessoa tem o total direito de não gostar de uma tecnologia específica mas é importante validar certos pontos antes de compartilhar qualquer opinião. Sou totalmente aberto a tecnologias e contra a clubismo com tecnologia. AMP possui pontos a melhorar assim com WordPress, JavaScript, PHP e outras linguagens, frameworks e CMSs.

Que você acha sobre o assunto? deixe um comentário com sua opnião.

Categorias
HTML5 Tutoriais

Introdução a imagens responsivas com srcset

Imagens são responsáveis pela maior parte do carregamento de bytes de uma aplicação web em geral. Não podemos evitar-las pois imagens são um ponto crucial de nossa aplicação. Mas temos alternativas para reduzir esse impacto, por exemplo, geralmente nossa aplicação web possui diferentes usuários com diferentes tamanhos de tela.

Imagine o seguinte cenário, em seu website você possui uma imagem de apresentação do seu produto com 1600 pixels, na versão desktop não temos nenhum problema mas o usuário em um dispositivo móvel carrega essa mesma imagem numa tela de 340px. Porque então não servimos diferentes tamanhos de imagens para diferentes tamanhos de tela?

Imagens responsivas é uma parte do design responsivo que pode resolver essa questão. com elas podemos prover diferentes tamanhos de imagens para tamanhos de telas específicos também conseguimos fazer direção de arte disponibilizando recortes específicos da mesma imagem.

Criando imagens responsivas

Com HTML temos algumas alternativas para servir diferentes tamanhos de imagens de acordo com sua resolução de tela.

  • Media queries
  • srcset
  • Tag picture

Srcset

Para esse post iremos trabalhar com a propriedade srcset. Ela permite mais de uma resolução possível das mesma image separadas por vírgula, cada valor dessa lista representa um caso possível ela pode ser atrelada a uma condicional definida pela propriedade sizes.

Vamos usar como exemplo uma tag img tradicional para os nossos testes:

<img src="/imgs/amp-workshop-dublin-1024w.jpg" alt="AMP Workshop Dublin">
Imagem utilizada no exemplo

Agora vamos adicionar os diferentes tamanhos para a imagem:

  • amp-workshop-dublin-640w.jpg
  • amp-workshop-dublin-960w.jpg
  • amp-workshop-dublin-1024w.jpg

Agora que temos os tamanhos definidos vamos alterar nossa img tag:

<img srcset="./imgs/amp-workshop-dublin-640w.jpg 640w, ./imgs/amp-workshop-dublin-960w.jpg 960w, ./imgs/amp-workshop-dublin-1024w.jpg 1024w" src="/imgs/amp-workshop-dublin-1024w.jpg" alt="AMP Workshop">

Com o código acima especificamos o tamanho das imagens nesse caso o browser decidirá que imagem ira carregar de acordo com a densidade de pixels e tamanho de tela(janela). No caso das imagens por densidade de pixel definimos o valor que representa a densidade ao no lugar da largura:

<img srcset="./imgs/amp-workshop-dublin-640w.jpg 1x, ./imgs/amp-workshop-dublin-1600w.jpg 2x" src="./imgs/amp-workshop-dublin-640w.jpg" alt="AMP Workshop">

Muitas vezes queremos fazer direção de arte, por exemplo, queremos exibir em mobile e table uma imagem com largura cheia e para desktop layout duas colunas, nesse caso a imagem não sera proporcional a largura da tela precisamos especificar para o browser qual tamanho de imagem queremos nesse caso iremos fazer a utilização da propriedade size.

Size

Com a propriedade size tomamos o controle e definimos que imagens iremos carregar, passando uma media query e o tamanho que identifica a imagem. Vamos colocar tudo junto para isso vamos criar uma página para o exercício:

Versão Desktop
versão tablet e mobile

A imagem do header contém o código que virmos anteriormente agora vamos adicionar o código para os thumbnails, quando o usuário estiver no desktop iremos exibir o layout em duas colunas e quando ele estiver no tablet e desktop iremos exibir em uma coluna. O controle sobre a quantidade de colunas vem do css, mas com a tag image vamos garantir o carregamento da imagem correta.

Para o thumb vamos adicionar o seguinte código:

<img srcset="./imgs/thumb-480w.jpg 480w, ./imgs/thumb-960w.jpg 960w" sizes="(max-width: 480px) 480px, (max-width: 960px) 960px, (min-width: 961px) 480px" src="./imgs/thumb-960w.jpg" class="thumb-post" alt="post thumb">

No código acima temos dois tamanhos 480px e 960px, na propriedade sizes definimos as medias queries que iremos trabalhar nesse caso mobile(480px max), tablet(960px max), desktop(961px em diante).

O código completa fica da seguinte forma:

HTML

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Responsive images</title> <link rel="stylesheet" href="style.css"> </head> <body> <section> <header> <img srcset="./imgs/amp-workshop-dublin-640w.jpg 640w, ./imgs/amp-workshop-dublin-960w.jpg 960w, ./imgs/amp-workshop-dublin-1024w.jpg 1024w, ./imgs/amp-workshop-dublin-1600w.jpg 1600w" src="/imgs/amp-workshop-dublin-1024w.jpg" alt="AMP Workshop"> <h1 class="page-title">Fellyph Cintra</h1> </header> <div class="posts"> <article class="post"> <img srcset="./imgs/thumb-480w.jpg 480w, ./imgs/thumb-640w.jpg 640w, ./imgs/thumb-960w.jpg 960w" sizes="(max-width: 480px) 480px, (max-width: 640px) 640px, (max-width: 960px) 960px, (min-width: 961px) 480px" src="./imgs/thumb-960w.jpg" class="thumb-post" alt="post thumb"> <div class="content"> <h2 class="title">Post title</h2> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus nostrum, soluta earum dolorem magnam eos porro, aliquam ex temporibus tempore dolor suscipit quibusdam sint impedit eveniet non placeat dicta nesciunt.</p> </div> </article> <article class="post"> <img srcset="./imgs/thumb-480w.jpg 480w, ./imgs/thumb-640w.jpg 640w, ./imgs/thumb-960w.jpg 960w" sizes="(max-width: 480px) 480px, (max-width: 640px) 640px, (max-width: 960px) 960px, (min-width: 961px) 480px" src="./imgs/thumb-960w.jpg" class="thumb-post" alt="post thumb"> <div class="content"> <h2 class="title">Post title</h2> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus nostrum, soluta earum dolorem magnam eos porro, aliquam ex temporibus tempore dolor suscipit quibusdam sint impedit eveniet non placeat dicta nesciunt.</p> </div> </article> <article class="post"> <img srcset="./imgs/thumb-480w.jpg 480w, ./imgs/thumb-640w.jpg 640w, ./imgs/thumb-960w.jpg 960w" sizes="(max-width: 480px) 480px, (max-width: 640px) 640px, (max-width: 960px) 960px, (min-width: 961px) 480px" src="./imgs/thumb-960w.jpg" class="thumb-post" alt="post thumb"> <div class="content"> <h2 class="title">Post title</h2> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus nostrum, soluta earum dolorem magnam eos porro, aliquam ex temporibus tempore dolor suscipit quibusdam sint impedit eveniet non placeat dicta nesciunt.</p> </div> </article> <article class="post"> <img srcset="./imgs/thumb-480w.jpg 480w, ./imgs/thumb-640w.jpg 640w, ./imgs/thumb-960w.jpg 960w" sizes="(max-width: 480px) 480px, (max-width: 640px) 640px, (max-width: 960px) 960px, (min-width: 961px) 480px" src="./imgs/thumb-960w.jpg" class="thumb-post" alt="post thumb"> <div class="content"> <h2 class="title">Post title</h2> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus nostrum, soluta earum dolorem magnam eos porro, aliquam ex temporibus tempore dolor suscipit quibusdam sint impedit eveniet non placeat dicta nesciunt.</p> </div> </article> <article class="post"> <img srcset="./imgs/thumb-480w.jpg 480w, ./imgs/thumb-640w.jpg 640w, ./imgs/thumb-960w.jpg 960w" sizes="(max-width: 480px) 480px, (max-width: 640px) 640px, (max-width: 960px) 960px, (min-width: 961px) 480px" src="./imgs/thumb-960w.jpg" class="thumb-post" alt="post thumb"> <div class="content"> <h2 class="title">Post title</h2> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus nostrum, soluta earum dolorem magnam eos porro, aliquam ex temporibus tempore dolor suscipit quibusdam sint impedit eveniet non placeat dicta nesciunt.</p> </div> </article> <article class="post"> <img srcset="./imgs/thumb-480w.jpg 480w, ./imgs/thumb-640w.jpg 640w, ./imgs/thumb-960w.jpg 960w" sizes="(max-width: 480px) 480px, (max-width: 640px) 640px, (max-width: 960px) 960px, (min-width: 961px) 480px" src="./imgs/thumb-960w.jpg" class="thumb-post" alt="post thumb"> <div class="content"> <h2 class="title">Post title</h2> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus nostrum, soluta earum dolorem magnam eos porro, aliquam ex temporibus tempore dolor suscipit quibusdam sint impedit eveniet non placeat dicta nesciunt.</p> </div> </article> </div> <footer class="footer"> Tutorial by Fellyph </footer> </section> </body> </html>

CSS

.page-title, .posts, .footer { width: 1024px; margin: 1em auto; max-width: 100%; } .page-title { text-align: center; font-size: 3em; border-bottom: 3px solid black; padding-bottom: 1em; } .posts { display: flex; flex-wrap: wrap; } .post { width: 100%; margin: 1em; background: white; display: inline-block; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26); border: 1px solid #eee; box-sizing: border-box; } .thumb-post { max-width:100%; height: auto; } .content { padding: 1em; } .footer { border-top: 3px solid black; padding-top: 1em; text-align: center; } @media (min-width: 960px) { .post { width: calc(50% - 2em); } }

O post serviu como introdução a imagens responsivas temos outros caminhos para trabalhar com imagens responsivas e vamos abordar em mais posts, se quiser conferir mais tutoriais confira a página da categoria tutoriais ou deixe um comentário.

Categorias
AMP Accelerated mobile pages

Adicionando Analytics em páginas AMP

Accelerated Mobile Pages (AMP) é uma plataforma usada para construir conteúdo estático de forma rápida. AMP possui o componente que permite mensurar as interações do usuário com Google Analytics em páginas AMP.

Configuração básica

Para criar uma instalação básica do Google Analytics em uma página AMP, copie e cole o código base a seguir e substitua <GA_MEASUREMENT_ID> pela a propriedade ID do seu Google Analytics.

<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script> <amp-analytics type="gtag" data-credentials="include"> <script type="application/json"> { "vars" : { "gtag_id": "<GA_MEASUREMENT_ID>", "config" : { "<GA_MEASUREMENT_ID>": { "groups": "default" } } } } </script> </amp-analytics>

Como funciona Google Analytics em páginas AMP?

O componente <amp-analytics> é um extended component para habilita-lo precisamos carregar o script responsável para carregar o componente:

<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>

Depois de incluir o script precisamos configurar nosso componente amp-analytics, primeiro atributo é o type, define qual o tipo de tracking iremos trabalhar nesse caso vamos utilizar o “gtag” mas o componente aceita uma lista extensa de ferramentas de tracking:

O segundo atributo é o data-credentials ele ativa a capacidade de leitura de cookies em uma solicitação específica por meio de um atributo config.

AMP não permite JavaScript fora de seu controle ou por bibliotecas não aprovadas; portanto a configuração das ferramentas de monitoramento precisa ser realizadas através de um JSON. No caso do Google Analytics dentro do nosso JSON precisamos de uma propriedade gtag_id(o id do nosso Google Analytics) válida e as configurações para definir como iremos realizar o monitoramento definido pelo atributo config

Tráfego AMP vs. Tráfego não-AMP

O tráfego AMP utiliza IDs de clientes diferentes daquele para o tráfego da Web por padrão. As páginas AMP são carregadas mais rapidamente e mostram padrões de tráfego diferentes dos correspondentes de uma página web padrão, o que geralmente significa que você irá obter métricas diferentes entre páginas AMP e não-AMP.

O uso de uma propriedade separada pode ajudar a medir o tráfego AMP com uma melhor análise das métricas. Se vc precisar usar uma única propriedade para medir o tráfTego AMP e ano AMP, use uma dimensão de fonte de dados ou uma dimensão personalizada para distingui-los.

Por padrão, o Google Analytics envia o valor “AMP” pela dimensão da fonte de dados. Use esse valor para segmentar, filtrar ou analisar o conteúdo AMP versus o conteúdo não-AMP.

Assim conseguimos adicionar Google Analytics em páginas AMP. Para ver mais conteúdo sobre AMP acesse a página da categoria ou deixe um comentário.