Categorias
WordPress

Introdução ao Frontity para WordPress

Recentemente conheci o framework front-end Frontity assistindo o Meetup to WordPress São Paulo sobre a ferramenta, foi uma introdução sobre o conceito por trás do framework sem tocar muito da parte do código.

Para você que não conhece o Frontity é um framework escrito em react para realizar integração com uma instalação headless do WordPress. O conceito do WordPress headless utiliza a aplicação somente para servir dados via REST API. A vantagem desse conceito é que conseguimos criar diferentes aplicações utilizando a mesma base de dados.

Depois do meetup decidi fazer minhas pesquisas e acabei achando esse workshop realizado no JSNation em junho desse ano é um workshop(inglês) de 3 horas que aborda bastante coisa do framework:

O workshop esclareceu diversos pontos é um pouco longo mas o ritmo ajuda bastante quem está começando. Resumindo a arquitetura da aplicação com frontity:

Distribuição de uma aplicação utilizando frontity

Esse tipo de integração é possível com outros frameworks como Next.js e Gatsby.js mas com uma diferença Frontity é totalmente focado em WordPress. Podemos descrever o framework como uma alternativa para renderização de uma aplicação WP.

Criando o Primeiro projeto com Frontity

Segundo a documentação do frontity o processo de criação é dividido em 4 etapas:

1 – Criando um projeto

Os pré-requisitos para criação de um projeto frontity são: node instalado em nossa máquina e um terminal de linha de comando. Com esses requisitos o próximo passo é criar uma aplicação utilizando npx.

npx frontity create my-app

O processo de instalação irá criar um passo-a-passo onde você irá definir alguns items do projeto como um tema inicial.

2- Conectando frontity com seu projeto WordPress

Depois que criamos nosso projeto é chegada a hora de conectar nossa aplicação frontity com WordPress. Para isso vamos em um arquivo chamado frontity.settings.js e passamos o endereço da REST API da nossa aplicação WordPress:

//frontity.settings.js export const settings = { packages: [ { name: "@frontity/wp-source", state: { source: { api: "https://blog.fellyph.com.br/wp-json" }, }, } ], };

No meu caso eu utilizei o endereço da rest api do meu blog blog.fellyph.com.br/wp-json

3 – Estilização

Frontity e WordPress conectados é a hora de estilizar o nosso tema para isso precisamos ter conhecimento em dois items chaves React e CSS-in-JS. Mas frontity fornece uma serie de ferramentas que abstraem alguns items com por exemplo na estilização:

import { styled } from "frontity"; const StyledDiv = styled.div` width: 100%; text-align: center; color: white; `;

4 – Publicando seu projeto

Frontity possui ferramentas para ajudar na publicação do seu projeto ou em uma plataforma node.js ou plataforma serverless. Para isso temos dois comandos:

npx frontity build

Esse comando irá gerar uma pasta com os arquivos compilados contendo seu projeto em react e servidor. A pasta gerada pelo build pode ser hospedada em qualquer serviço de hospedagem para aplicações node.

npx frontity serve

Esse comando irá utilizar a pasta criada pelo comando build para lançar sua aplicação em produção.

Mas claro se você já está ambientado com o ecossistema react alguns items que eu comentei parece básico. Caso contrario sera uma nova stack para aprender. Items como React e CSS-in-JS pode ser bastante fora do padrão caso esteja acostumado com php+html+css tradicional.

Mesmo sendo uma Grande mudança todo esse novo ecossistema vem com uma série de benefícios e ferramentas que ajudam a sua produtividade.

Benefícios

E quais são os benefícios de construir uma aplicação utilizando frontity? Para isso vou listar alguns items e entrar em mais detalhes:

React: Podemos dizer que o uso de react é um benefício uma plataforma estável com uma vasta comunidade. Adicionando React você trás uma série de benefícios da plataforma para o seu projeto. A capacidade de componentização da sua interface, melhor controle de estado da sua aplicação e performance.

Atualização de conteúdo em tempo real: Caso desenvolva com React você já está acostumado em ver em tempo real as modificações que você realiza nos arquivos do seu template sendo replicados no ambiente de teste sem a necessidade de recarregar a página no browser.

Pre-configuração de projeto e CLI: Desde o inicio do projeto frontity possui uma série de comandos de terminal que ajuda na criação de projetos, temas, teste, desenvolvimento e publicação.

Pacotes de bibliotecas focadas no WordPress: É possível conectar qualquer aplicação React com um WordPress headless mas o Frontity possui uma série de pacotes que irão ajudar no desenvolvimento de sua aplicação:

  • frontity: possui o core da sua aplicação com styled components, emotion, controle de estato, açõe e as integrações com o core do react
  • @frontity/tiny-router: pacote que faz o gerenciamento de rotas de sua aplicação.
  • @frontity/wp-source: pacote responsável por consultar os dados em sua aplicação WordPress
  • @frontity/components: possui uma coleção de componentes que irão auxiliar na construção de interfaces.
  • @frontity/hooks: possui o comportamento similar ao dos hooks do WordPress
  • @frontity/html2react: auxilia a renderizar conteúdo do post especialmente conteúdo formatado por page builders.
  • @frontity/head-tags: ajuda a dicionar informações em nossa tag head.

Melhorias de performance: Com framework conseguimos realizar code-splitting e trabalhamos com CSS-in-JS isso possibilita atrelar o estilo ao componente assim só carregamos o estilo dos elementos que estão sendo exibidos na tela. Além disso temos a possibilidade de utilizar recursos com lazy loading e prefetch.

Conclusão

Particularmente fiquei muito animado com o framework abre uma nova possibilidade para desenvolvimento de temas WordPress e os primeiros testes foram animadores. Estou preparando vídeos para o meu canal para mostrar passo-a-passo como criar uma tema com Frontity.

Para agilizar o processo de criação dos vídeos pedi autorização da Alessandra Spalato para utilizar o tema que ela desenvolveu como demo:

Esse será o tema que iremos construir nos próximos tutoriais sobre Frotity. Então vamos fechando esse post por aqui para mais posts sobre WordPress acesse a página da categoria WordPress.

Categorias
PWA - Progressive web apps WordPress

Editando o web app manifest com o plugin de PWA para WordPress

Nesse post vamos ver como editar as propriedades do web app manifest json com o plugin de PWA oficial do google. No meu canal do YouTube recentemente fiz um vídeo falando sobre o plugin, e como transformar seu site WordPress em uma PWA. Nesse vídeo vamos ver como podemos alterar algumas propriedades via código.

Se você ainda não conhece o plugin, tem um post no blog sobre o o plugin.

Página do plugin PWA para WordPress

Utilizando o plugin temos dois caminhos criar um mini plugin ou adicionar uma função no functions.php do nosso tema. Para esse tutorial vamos utilizar o arquivo functions.php.

Um exemplo básico podemos alterar o short_name do nosso manifest.json essa propriedade pode ter no máximo 12 caracteres por padrão ela ler o título do site, caso tenha um título maior que 12 caracteres não teremos um manifest json válido para resolver esse problema adicionamos o seguinte código em nosso arquivo functions.php de nosso tema:

add_filter( 'web_app_manifest', function( $manifest ) { $manifest['short_name'] = 'Shortness'; return $manifest; } );

No código acima adicionamos um filtro na chamada da função web_app_manifest e interceptamos o array com as propriedades do manifest.json e alteramos o elemento responsável pela propriedade short_name.

O segundo exemplo é um pouco mais complexo pois vamos acessar a lista de ícones de nossa aplicação. Recentemente o lighthouse adicionou em sua auditoria a validação para maskable icons e ainda não saiu uma nova versão com essa propriedade, pode ser que no futuro temos essa propriedade disponível mas por enquanto que a atualização não sai podemos ver como editar o nosso manifest.json e corrigir esse problema, para isso vamos adicionar o seguinte código em nosso functions.php:

add_filter( 'web_app_manifest', function( $manifest ) { $manifest['icons'] = array_map( function ( $icon ) { if ( ! isset( $icon['purpose'] ) ) { $icon['purpose'] = 'any maskable'; } return $icon; }, $manifest['icons'] ); return $manifest; } );

Novamente adicionamos um filtro na função “web_app_manifest” ela recebe um parâmetro $manifest um array que contém as configurações do web app manifest. Assim conseguimos acessar o item do array com índice ‘icons’ e adicionamos uma nova propriedade ‘purpose’ atrelada ao ícone e por fim retornamos o manifest com os novos valores.

Propriedades

O manifest json é formado com os seguintes valores por padrão:

  • name: o título do site vindo da função get_option('blogname')
  • short_name: copia do título do site não maior que 12 caracteres
  • description: tag line do site vindo da função get_option('blogdescription')
  • lang: o idioma do site por get_bloginfo( 'language' )
  • dir: a direção de leitura do site is_rtl()
  • start_url: a home da aplicação get_home_url()
  • theme_color: vindo do background customizado via get_background_color()
  • background_color: também vindo do background customizado
  • displayminimal-ui é o valor padrão.
  • icons: os ícones do site via get_site_icon_url()

Todos os valores mencionados anteriormente podem ser alterados com a inclusão de filtros que vimos anteriormente. Então ficamos por aqui com esse post outro tipo de customização que conseguimos fazer com o plugin é a parte de estratégias de cache para isso vou dedicar um segundo post para entrar em mais detalhes. Mais posts sobre WordPress confiram a página da categoria.

Categorias
PWA - Progressive web apps

Novidades no Web app manifest: app shortcuts

Já anunciado nos eventos MSbuild e Web.dev live web app manifest tem algumas novas funcionalidades. Já nas versões 84 do Chrome Mobile e 85 para desktop agora temos a possibilidade de adicionar atalhos dentro de nossa aplicações com manifest.json.

Esse recursos para você usuário Apple, já era comum em apps nativos quando o usuário pressionava e segurava o ícone do aplicativo opções dentro do app eram exibidas. Como na imagem a seguir:

Exemplo de app shortcuts nativos no iOS

O recursos é ideal quando você deseja redirecionar usuários para funcionalidades chave de sua aplicação, navegação principal, buscas ou atividade de entrada de dados. Atualmente esse recurso pode ser implementado em Progressive Web apps em dispositivos Android e Windows desktop com Chrome e Edge o esse recurso em inglês é chamado de “app shortcuts” e conseguimos adicionar essa funcionalidade através da propriedade shortcuts.

Implementação

Para adicionar app shortcuts em nossa PWA precisamos adicionar a seguinte propriedade “shortcuts” em nosso manifest.json:

"shortcuts": [ { "name": "Abrir Contatos", "short_name": "Contatos", "description": "Visualize a lista de contatos cadastrados", "url": "/contatos", "icons": [ { "src": "//contatos.png", "sizes": "192x192" } ] }, ]

Shortcuts espera um array de atalhos com as seguintes propriedades:

  • name: nome mais descritivo
  • short_name(opcional): nome alternativo para ser usado em áreas de espaço limitado.
  • description(opcional): descrição do app pode ser utilizado pelo OS e tecnologias assistivas no futuro.
  • url: a url a qual o App irá abrir. Essa URL precisa estar no escopo do manifest.json para isso precisa ser uma URL relativa.
  • icons: um array de ícones para o atalho com as propriedades: src, sizes e type(opcional).

SVG não são suportados para ícones utilize para esse caso PNG. Os tamanhos esperados são 36×36 48×48, 72×72, 96×96, 144×144 e 192×192 pixels.

Caso queira testa os seus apps shortcuts eles estarão visíveis no devtools do chrome ou edge na aba de aplicação dentro da seção do manifest, como podemos ver na imagem a seguir:

Boas práticas

Agora que sabemos como implementar atalhos em nossa pwa vamos falar sobre algumas boas práticas:

  • Ordene os app shortcuts por prioridades
  • Utiliza nomes distintos para seus atalhos
  • Mesure o uso dos atalhos via google analytics exemplo “/contatos?utm_source=homescreen”

Para finalizar vamos dar uma olhada em nosso código do manifest.json completo:

{ "name": "Tutoriais Fellyph Web APIs", "display": "standalone", "start_url": "/", "short_name": "Web APIs", "theme_color": "#DA2461", "description": "Essa é uma aplicação de teste", "orientation": "any", "background_color": "#DA2461", "icons": [ { "src": "assets/icons/icon_512.png", "sizes": "512x512" }, { "src": "assets/icons/icon_192.png", "sizes": "192x192" } ], "shortcuts": [ { "name": "Geo Location API", "short_name": "Geo API", "description": "Acesse exemplos de geo localiização", "url": "/01_geolocation/01-example-geolocation-final.html", "icons": [ { "src": "//icons/gelocalizacao.png", "sizes": "192x192" } ] }, { "name": "Fetch API", "short_name": "Fecth API", "description": "Acesse exemplos utilizando a fetch api", "url": "/02_fetch_api/01-example-xmlhttp-request-final.html", "icons": [ { "src": "//icons/fetch.png", "sizes": "192x192" } ] }, { "name": "IndexedDB API", "short_name": "IndexedDB", "description": "Acesse exemplos utilizando IndexedDB", "url": "/03_indexedDB/01-indexedDB-events.html", "icons": [ { "src": "//icons/indexed.png", "sizes": "192x192" } ] } ] }

Fiz um pequeno texto com a aplicação que estamos desenvolvendo no curso de PWA e no windows o resultado será o seguinte:

Como podemos ver no screenshot no menu de opções temos os atalhos que definimos em nosso web app manifest.

Publiquei um post recentemente sobre o recurso em meu canal do youtube:

Então é isso pessoal o recurso novo nem todos os sistemas operacionais, windows e android já adicionaram o suporte agora só falta o suporte no iOS e MacOS. Para ler mais posts sobre PWA acesse a página da categoria PWA e até o próximo post.

Categorias
PWA - Progressive web apps

Adicionando os ícones para PWAs no iOS

Para adicionar ícones para PWA no iOS precisamos adicionar tags com diferentes tamanhos de imagens para serem usadas na tela principal dos usuário Apple, esses tamanhos mudaram com o passar dos anos em diferentes versões do Sistema operacional.

Nesse post vamos ver como Implementar esse recurso, Agosto de 2020 Safari ainda não segue as recomendações da W3C e utiliza um modo alternativo para definir os ícones de uma PWA, existe uma sinalização de parte do time do WebKit engine responsável pelo safari, mas isso já vem se arrastando a anos.

Enquanto o recurso na é padronizado precisamos, adicionar os ícones através da tag link passando um a propriedade rel=”apple-touch-icon”

<link rel="apple-touch-icon" href="/endereço-do-meu_icone.png">

Como mencionei anteriormente o tamanho muda entre versões do iOS atualmente os tamanhos esperados são 192×192 ou 180×180. A imagem precisa ser um PNG sem transparência.

Em versões mais antigas do iOS antes da versão 7 a propriedade era rel=”apple-touch-icon-precomposed” nesse caso podemos adicionar mais de uma tag caso queira adicionar fallback em sua aplicação web para versões antigas do iOS. E caso queira implementar os fallbacks os tamanhos serão:

  • 57×57px – iPhone iPod Touch sem display retina
  • 72×72px – iPad and iPad mini rodando iOS ≤ 6
  • 76×76px – iPad and iPad mini rodando iOS ≥ 7
  • 114×114px – iPhone com display retina iOS ≤ 6
  • 120×120px – iPhone com display retina rodando iOS ≥ 7
  • 144×144px – iPad and iPad mini com display retina rodando iOS ≤ 6
  • 152×152px – iPad and iPad mini com display retina rodando iOS 7
  • 180×180px – iPad and iPad mini com display retina rodando iOS 8+

Para adicionar uma aplicação em um dispositivo iOS o processo é um pouco escondido, primeiramente precisamos ir no botão de compartilhar:

Botão de compartilhar do safari

Em seguida precisamos adicionar nossa aplicação na tela principal:

Tela com a opção adicionando a tela principal

Por exemplo, uma aplicação sem a propriedade o ícone será um screenshot da sua aplicação como na imagem a seguir:

Exemplo de ícone sem a propriedade

Depois da adição do ícone apple-touch-icon o resultado será o o seguinte:

Resultado final com a adição da propriedade.

Esse é um conteúdo base do curso de PWA, para acompanhar as aulas acesso a playlist do curso: https://www.youtube.com/playlist?list=PLmIA3VZysEqQCi5xOJJDb5QIYgHwPhf_D

Para mais posts sobre Progressive web apps acesse a página da categoria: https://blog.fellyph.com.br/category/pwa/

Categorias
WordPress

Web Stories para WordPress

Stories nos últimos anos se tornou um dos conteúdos mais consumidos no mundo dos dispositivos móveis, formato introduzido pelo Snapchat se popularizou no Instagram e em seguida se espalhou pelo facebook, whatsApp e recentemente foi adicionado no LinkedIn.

Um ponto que todas essas plataformas tem em comum? Elas são plataformas privadas o conteúdo gerado nessas plataformas estão a controle de terceiros. Em fevereiro de 2018 com uma iniciativa de adicionar o recurso a web aberta, AMP lançou stories para web. O recurso está disponível no framework onde você pode criar seus próprios stories para qualquer dispositivo mobile independente do sistema operacional e sem a necessidades da instalação de um App.

Já se passaram dois anos e porque estamos falando de stories só agora? No Google I/O do ano passado tivemos o anúncio da inclusão de web stories nos resultados da busca do Google, esse resultados vão estar disponíveis no Google Images e Discovery(2019 o recurso teve 800 milhões de usuários ativos mensalmente).

Esse anúncio trás um novo significado para o recurso, agora temos uma nova oportunidade de capitalizar usuários de forma orgânica, atualmente o recurso está em formato de teste nos Estados Unidos e será lançado em outras regiões ainda esse ano.

Video de apresentação do web stories no Google I/O 2019

Web Stories é uma incógnita inicialmente alguns portais como Washington Post e CNN estão fazendo uso do recurso. Mas a pergunta é: stories é utilizado em sua maioria em redes sociais, será que o formato irá vingar em caracter informativo?

O plano inicial do Google é utilizar o recursos nas seguintes categorias:

  • Viagens
  • Filmes
  • Receitas
  • Fashion
  • Games
  • Shows de TV

Como criar Web Stories

A implementação dos Stories é em AMP teremos dois caminhos programando ou utilizar um editor visual. Depois de implementado os web stories seu conteúdo precise seguir alguns critérios para isso podemos testar nosso Web Stories com Search Console onde entraremos em mais detalhes a seguir.

Para a criação de web stories com programação vou dedica um post exclusivo para esse post vamos ter uma introdução e ver alguns conceitos relacionados utilizando editores visuais. Os editores visuais temos algumas opções plataformas gratuitas com recursos premium como:

makestories amp stories visual editor

Anteriormente tínhamos o plugin de AMP que tinha como recurso a possibilidade de criar AMP Stories esse recurso foi descontinuado no plugin de AMP oficial e o Google começou a focar em um plugin exclusivo para AMP Stories agora chamadoWeb Stories para WordPress. O plugin está na sua versão beta assim como o Site Kit o Google utilizou a mesma estratégia está utilizando sua base de seguidores para testar o plugin antes do seu lançamento no repositório oficial.

Como mencionei anteriormente o plugin está na versão beta então muita coisa ainda vai mudar e se caso queira testar o plugin saiba que ele ainda não está 100%. O plugin tem previsão para ficar disponível non final do verão nos EUA isso pode ser por meados de Setembro.

Plugin Web Stories for WordPress

Agora vamos falar sobre o plugin, vou realizar um teste aqui no meu blog e monitorar como se comporta a audiência referente aos stories. Para isso vamos instalar o plugin caso estiver lendo esse post após o lançamento do plugin no repositório oficial do WordPress o processo de instalação será diferente.

Mas caso queira instalar a versão beta os passos serão

1. Baixar o zip do plugin no endereço https://google.github.io/web-stories-wp/beta/

Página do plugin versão beta do WebStories

2. Logar no painel do WordPress em que você deseja instalar o plugin

3. Ir na seção plugin no menu lateral esquerdo e selecionar “adicionar novo”

Tela da administração de plugins

4. Na tela de adicionar novo escolher a opção no topo “Enviar plugin” e enviar o zip que acabamos de baixar no site do plugin.

Tela adição de plugins

5.Após o envio clique em “ativar plugin

último passo ativando plugin

6. Quando instalado o menu de stories ficará disponível na sessão Stories no seu menu lateral e ele terá o seguinte visual:

Criando Web Stories com o plugin

Instalei o plugin no meu blog pessoal, para esse post eu criei dois Stories como teste. Quando você clica em adicionar Web Stories a primeira impressão é que você está trabalhando eu outro software, o editor visual com um tema dark como podemos ver na imagem a seguir:

Editor de Web Stories

Primeiro passo foi criar minha primeira história, alguns momentos é difícil de identifica se o elemento na tela é editável ou é apenas uma informação, por exemplo, Rascunho automático é o título do meu stories completo e também vai definir o slug do meu story.

Mas o editor gráfico é completo com várias opções de edição alguns momentos a resposta não é precisa mas normal para um plugin que está na sua versão beta.

Criei dois stories sobre posts antigos em meu blog referente a lista de coisas que aprendi depois que me mudei para Dublin então já tinha o conteúdo a maior parte do trabalho foi achar as imagens. Cada Story contém 6 páginas. Com titulo e descrição a inclusão de texto é livre mas temos alguns items que são relevantes a validação de nosso stories.

Nesse post vamos focar no processo completo de criação de stories. Para o processo de edição de stories melhor material é seria gravar um vídeo com um passo-a-passo. Mas depois que concluímos o nosso Story temos que ficar atento a alguns pontos:

  • Primeiro no menu lateral direito temos os controles sobre o documento, como configurações gerais. Para ter um story válido precisamos de um ícone e uma imagem de cobertura esses itens serão essenciais para busca.
  • Quando completo o processo teremos um permalink para o nosso story em um endereço começando com /stories/, por exemplo : https://blog.fellyph.com.br/stories/5-coisas-que-aprendi-no-meu-primeiro-ano-de-trabalho-na-irlanda/
  • Possivelmente esse processo irá mudar mas na versão beta precisa desse link pra adicionar em nosso bloco Gutenberg como na imagem a seguir:
Exemplo de bloco web stories

Validando suas web stories

Depois de tudo pronto o último passo para verificar se nossos stories são válidos para os cards especiais na busca é validar nossos stories com Search Console https://search.google.com/test/amp, para testar sua web story você precisa somente passar o endereço de sua web story e assim você terá o feedback:

Conclusão

Quando comecei a escrever esse post tinha minhas dúvidas sobre web story após começar a criar stories comecei ver alguns benefícios. Por exemplo no meu blog sempre faço essas listas: “5 coisas que aprendi como…” ou “5 erros comuns na hora de…” e o esforço pra criar esse conteúdo foi mínimo, primeira web story passei 30 min para criar mas desse tempo maior parte foi escolhendo fotos e entendendo a interface do editor visual as seguintes foram mais rápidas em torno de 20 a 15 minutos.

Primeiro conteúdo que veio em mente para os stories foi reciclar meu conteúdo já existente isso pode ser uma boa forma de renovar seu conteúdo dando mais alternativas para os leitores. Por fim vou criar mais alguns stories e esperar um impacto na audiência do meu blog.

Sobre a experiência de edição o plugin está na versão Beta muita coisa ainda não funciona 100%. Mas se o Google colocar o mesmo investimento que fizeram no Site Kit em 3 meses teremos uma versão 100% estável.

Vale a pena investir em Web Stories? Como toda nova tecnologia essa é uma aposta você pode sair na frente da concorrência e assumir os riscos ou esperar ver como o mercado irá reagir e investir com mais segurança mais ai sua concorrência será ainda maior. Particularmente você não tem nada a perder pegue seus posts que não tem aquele desempenho e adicione stories e veja se você tem alguma melhoria no tráfego.

Mais posts sobre acesse a página da categoria WordPress.