Categorias
Geral

Utilizando Dark Mode em sua aplicações web

Nesse post vamos ver como implementar Dark mode em nossas aplicações web, lançado em sistemas operacionais tanto Mobile quanto para Desktop agora podemos controlar a estilização do nosso conteúdo de acordo com a preferência do usuário. Falando um pouco dessa trajetória no inicio da computação por questões de limitação utilizávamos “dark mode” com os famosos monitores de tela preta como o texto verde.

Com a evolução das telas tivemos uma mudança dos sistemas operacionais para representar elementos reais como documentos e images. Com o passar dos anos a comunidade de desenvolvimento passou a utilizar IDEs para codificação em dark, e agora nos últimos anos Dark Mode passou a ser uma opção para sistema operacionais mobile.

Preferências e vantagens

Particularmente por uma longa exposição durante o dia a diversas telas, no trabalho, celular e em casa. Eu utilizo modo como uma forma de descanso mas estudos realizados pelo time do android mostram que dark mode permite uma economia de até 60% em algumas aplicações, por exemplo, o Youtube app em dark mode.

Mas a web não fica para trás, nas últimas versões dos browsers passaram a reconhecer quando o usuário utiliza o modo, Conseguimos através de media queries monitorar a preferência do usuário.

Media Query CSS

@media (prefers-color-scheme: dark) { ... }

@media (prefers-color-scheme: light) { ... }

@media (prefers-color-scheme: no-preference) { ... }

Com essas três media queries conseguimos captar 3 estados: dark, light, no-preference. Assim conseguimos alterar propriedades quando o usuário utiliza um modo especifico, por exemplo:

body {
  color: #000;
  background-color: #fff;
}

@media (prefers-color-scheme: dark) { 
  body {
     color: #fff;
     background-color: #000;
  }
}

Habilitando Dark mode

No MacOS definimos através de configurações > preferencias gerais:

Alterando para Dark Mode Mac OS

Para iOS vamos em Configurações > Tela e Brilho

Como definir dark mode no iOS

Essa é uma maneira que podemos modificar toda a configuração do sistema operacional. Mas quando estamos desenvolvendo ficar trocando todas as configurações do sistema operacional pode se tornar inconveniente. Nas novas versões do Chrome 79 podemos simular essa mudança como o Chrome DevTools. Para isso vamos no seguinte painel.

Com o DeTools aberto clicamos no menu mais opções(três pontos) e habilitamos a opção renderização(rendering), Lá na propriedade “Emulate CSS media feature prefers-color-scheme” conseguimos simular light mode e dark mode.

Tela do devtools do Chrome

Agora que sabemos como simular e qual media query utilizamos, vamos aplicar o código ao projeto utilizado no curso de PWA. Atualmente o tema principal utilizar um background preto com fontes branca, agora vamos criar uma tema light com as cores invertidas:

Resultado final Light vs Dark mode

Controlando as cores com variáveis CSS

Para isso vamos fazer algumas modificações. Atualmente o projeto utiliza SASS, vou levar em consideração o modo light como o modo padrão e para esse exercício vou utilizar as variáveis para CSS para modifica-las quando usuário muda o modo:

//cores com variáveis CSS
:root {
  --primary-color: #fff;
  --secondary-color: #000;
  --ternary-color: #bae2fd;
  --gray-color: #333;
}

@media (prefers-color-scheme: dark) {
  :root {
    --primary-color: #000;
    --secondary-color: #fff;
  }
}

No código acima á parte de nossa solução, temos as variáveis sendo modificadas quando o usuário muda entre modos, assim não precisamos modificar todos os seletores do nosso CSS apenas as variáveis.

Quando testamos nossa aplicação em Dark Mode deparamos com a seguinte situação:

SVGs e images precisa de ajustes

Para esse caso temos duas correções os icones das redes sociais estão como “embedados” em nosso HTML conseguimos controlar a propriedade fill do nosso SVGs para isso adicionamos o seguinte código:

.social__icon {
    width: 25px;
    height: 25px;
    fill: var(--secondary-color);
}

a:hover .social__icon {
    fill: var(--primary-color);
}

Para a logo principal, por conta de ser uma image preto e branco conseguimos inverter sua cor através de filtros CSS:

@media (prefers-color-scheme: dark) {
  .header__picture {
    filter: invert(1);
  }
}

Assim temos o fix para os dois items, lembrando que no caso da imagem funcionou por que eu utilizo uma image monocromática e temos o seguinte resultado:

Observações

Implementações do dark mode pode ser mais complexa que no exemplo acima, por conta da paleta de cores restritas temos uma simples implementação, caso de uma paleta mais complexa preste atenção nos níveis de contraste.

Em caso mais complexos o ideal é dividir o CSS e carregar o estilo para mode preterido pelo usuário, adicionando as seguintes tags em nosso html:

<link rel="stylesheet" href="/dark.css" media="(prefers-color-scheme: dark)">
<link rel="stylesheet" href="/light.css" media="(prefers-color-scheme: no-preference), (prefers-color-scheme: light)">
<!-- Estilo principal -->
<link rel="stylesheet" href="/style.css">

No caso acima temos um estilo geral style.css e dark.css para os usuários que preferem dark mode e light.css para os usuários sem seleção ou light mode. Assim os usuários em dark mode so carregam o css relacionado.

Para browser antigos

Caso o browser não suporte prefers-color-scheme conseguimos adicionar um fallback em nosso código:

<script>
  // Se `prefers-color-scheme` não for suportado pelo browser, o fall back será light mode.
  if (window.matchMedia('(prefers-color-scheme: dark)').media === 'not all') {
    document.documentElement.style.display = 'none';
    document.head.insertAdjacentHTML(
        'beforeend',
        '<link rel="stylesheet" href="/light.css" onload="document.documentElement.style.display = \'\'">'
    );
  }
</script>

Após a inclusão da media query a validação do stylelint acusou a media query como desconhecida, isso por conta da versão do style lint caso passe o mesmo problema atualize o stylelint para versão 10 ou superior e a validação passará a reconhecer a media query

Falso alert de validação das versões antigas do stylelint

Suporte

Atualmente Novembro de 2019 o suporte para a media query prefers-color-scheme é de 74% dos browser do mercado:

Edge, firefox, chrome, safari, opera, iOS safari suas ultimas versões suportam dark mode.

O código completo você encontra em meu github: https://github.com/fellyph/pwa-tutorial/tree/video/dark_mode_20_final

A base desse tutorial vem do projeto utilizado no curso de PWA que estou rodando no Youtube: https://blog.fellyph.com.br/curso-online-progressive-web-apps/

Qualquer dúvida deixe um comentário e até o próximo post.

Esse post foi baseado no artigo “Hello darkness, my old friend” do @tomayac: https://web.dev/prefers-color-scheme/

Categorias
Geral

11 Mitos sobre AMP

AMP se tornou um framework bastante popular nos últimos anos por renderizar e entregar conteúdo em alta perfomance, atualmente 10 milhões de domínios na internet entregam conteúdo utilizando a tecnologia, mas também surgiu alguns mitos sobre a plataforma e nesse post traduzir um post do blog do AMP: “Debuking Common AMP Myths” e vamos conferir abaixo.

MITO #01: AMP é um projeto exclusivo do Google.
FATO #01: AMP é um projeto open source liderado pelo Google em conjunto de outras empresas e membros da comunidade.

Os desenvolvedores AMP, empresas e colaboradores individuais participam no desenvolvimento deste projeto: Nos últimos três anos, o AMP recebeu contribuições de 850 colaboradores, 78% desses colaboradores são funcionários de outras empresas como Twitter, Pinterest, Yahoo, Bing e eBay. O AMP mudou-se para um novo modelo de governança, uma preocupação atual de vários projetos open source.

O modelo adotado dá voz a todos os membros da comunidade decentralizando as tomadas de decisões. Também incluindo usuários finais não ficando restrito apenas nos desenvolvedores.

MITO #02: AMP somente funciona para Google.com
FATO #02: Páginas AMP são acessíveis em toda a web, incluindo qualquer plataforma de distribuição e dispositivo.

Os usuários podem acessar páginas AMP por meio de qualquer plataforma de distribuição, por exemplo, mecanismos de pesquisa ou sites, como Linkedin ou Twitter que sempre distribuem páginas AMP como modelo padrão para celulares.

Plataformas como Google e Bing dão um passo além, elas armazenam o seu conteúdo para proporcionar um carregamento instantâneo.

MITO #03: AMP é apenas para mobile
FATO #03: O AMP é projetado com “responsividade” em mente, para funcionar em todos os tamanhos de tela.

AMP agora é somente AMP, inicialmente era um padrão Accelerated Mobile Pages agora por se uma tecnologia cross device o acrônimo perdeu seu significado agora ele se chama apenas AMP. Inicialmente AMP foi projetado para ser mobile friendly, para devices com hardware lento e conexões com alta taxa de latência. O impacto da tecnologia visto em um smartphone será ainda maior em um desktop. Mas também devemos entender que alguns recursos são projetados para uma experiência mobile, por exemplo , carrossel do Google Stories.

MITO #04: Toda página AMP também precisa ter uma versão não AMP.
FATO #04: Uma página AMP pode ser associada a uma não AMP, mas isso não é um requisito obrigatório.

Em alguns casos, convém ter uma versão não AMP e uma versão AMP da mesma página, especialmente é fases de migração de sua aplicação. Mas não é um requisito mantém ambas versões do mesmo conteúdo, se você achar que AMP atende todos os requisitos de sua aplicação você pode manter apenas a versão AMP.

MITO #05: AMP landing pages usualmente são mais difíceis de construir.
FATO #05: Geralmente isso irá custar menos de uma semana para construir uma landing page na maioria dos casos.

80% dos desenvolvedores contactados em pesquisa, reportaram que precisaram menos de uma semana para construir uma Landing page utilizando AMP. Dito isso, esforço para construir uma página dependerá do tipo de página que será construída, alguns modelos custarão mais tempo que outras, confira o a lista de templates gratuitos eles podem reduzir ainda mais o tempo de desenvolvimento de sua aplicação.

MITO #06: AMP é apenas para editores ou site estáticos
FATO #06: Mais de 60% dos cliques na consultas do Google são páginas sem ser páginas de notícias.

AMP foi construído graças a intensa colaboração com milhares de desenvolvedores, editores e plataformas de distribuição de conteúdo e empresas de tecnologia. Quando AMP foi lançado a primeira vez, ele foi adotado inicialmente por editores e portais de notícias. mas agora os anunciantes e as empresas de comércio eletrônico também estão aproveitando os benefícios da plataforma AMP.

MITO #07: AMP não suporta experiências interativas.
FATO #07: Os componentes AMP agora permitem personalização de design e experiências interativas.

Quando AMP foi lançado a pela primeira vez, ele tinha limitações de design. Á medida que o projeto AMP cresceu graças à colaboração da comunidade open source, foram criados novos componentes que permitem que as empresas façam personalização do design e criem experiências interativas. Empresas como BMW, AliExpress possuem bons exemplos de como utilizar a plataforma. Hoje a maioria das experiências interativas suportam:

Rich Media: O número de componentes AMP é cada vez maior e qualquer contribuidor pode contribuir na inclusão de novos componentes caso necessite.

Integração de terceiros: Existem uma vasta quantidade de integração com outras plataformas e você pode conferir aqui.

MITO #08: AMP não suporta sites de comercio eletrônico.
FATO #08: AMP é uma opção natural de comercio eletrônico, pois AMP torna as páginas Web mais rápidas e performance é um ponto importante para conversão de compras.

Quando AMP foi lançado, inicialmente editores e portais de noticias foram a principal adoção da plataforma. A medida que o projeto AMP cresceu, novos componentes foram criados para permitir que as marcas criassem suas experiências interativas. Agora AMP pode ser utilizado para construir experiência de comércio eletrônico de alta performance e atrativa. Para mais informações veja os posts “Getting started with AMP for e-commerce” e “E-commerce At The Speed of AMP” .

MITO #09: Não é possível atualizar conteúdo de páginas AMP.
FATO #09: Existem muitas opções de manter o conteúdo das páginas AMP atualizado.

Você pode veicular conteúdo novo em AMP usando o mecanismo de cache AMP padrão(stale-while-revalidate), usando a funcionalidade de atualização de cache ou usando componentes dinâmicos (como lista de AMP). Muitas das grandes empresas de e-commerce obtém bons resultados quando a implementação é planejada adequadamente.

MITO #10: AMP não é seguro/privado o suficiente.
FATO #10: O framework AMP foi criado para preservar a privacidade e garantir a segurança dos dados.

Ás páginas AMP são geralmente veiculadas Google AMP Cache, que simplesmente armazena em cache uma versão da sua página para fins de validação de documentos AMP e fornecer a entrega confiável e rápida do conteúdo. Google AMP Cache, assim como JavaScript AMP, são veiculados em domínios sem cookies que não rastreiam os usuários de forma alguma. Além disso, AMP tem um processo de análise de segurança que é usado rotineiramente ao lançar novos componentes AMP. Para ler mais, confira o post “Privacy and user choice in AMP’s software architecture”.

MITO #11: Páginas AMP não convertem tão bem quanto páginas não-AMP.
FATO #11: As páginas AMP otimizadas com frequência costumam ter um desempenho melhor do que as páginas não-AMP.

Muitos anunciantes e editores tiveram sucesso com o AMP, muito dos depoimentos você pode encontrar no portal amp.dev. Um estudo da Forrester descobriu que um site que implementa AMP pode esperar um aumento de 20% na taxa de conversão de vendas nas páginas AMP, um aumento de 10% no tráfego anual do site AMP e um aumento de 60% páginas por visitante.

Existem alguns motivos pelos quais uma página AMP pode apresentar um desempenho inferior a uma página não AMP.

*Caso não tenha um desempenho satisfatório, estas são algumas áreas para explorar:

Problemas de medição e monitoramento: certifique que as configurações do analytics na sua página AMP está seguindo os guias de configurações.

Inconsistências na sua página: se a Página AMP esteja sendo exibida diferente de uma página não-AMP, isto pode estar influenciando suas taxas de conversão. As páginas AMP devem ser identicas a páginas não-AMP em funcionalidades e aparência.

Categorias
Eventos Geral WordPress

Work smart with Gutenberg

Hi folks, last weekend I’ve done my first talk in 2019, at WordCamp Prague it was a pleasure to be again in Prague, one of my favourite city in Europe and my presentation it was about Gutenberg, I have created a small project with a few examples using static blocks, editable and dynamic blocks, follow the slides:

[slideshare id=134127640&doc=worksmartwithgutenberg-190302142811]

The repository with the examples from my presentation you can find here: https://github.com/fellyph/digital-agency-block-kit

Categorias
Geral

Vunerabilidade

Medo a vunerabilidade é algo que convivemos eternamente, somos educados desde cedo a ter uma vida segura sobre controle. Isso é algo que vem de nossos pais o segredo do sucesso é a estabilidade e segurança. Mas o que é seguranca? O que é estabilidade? Temos uma falsa sensação de controle e seguranca sobre nossas vidas, isso muitos chamam zona de conforto mas muitas vezes essa zona de conforto pode nos levar para um caminho bem mais inseguro. Ou muitas vezes nos acostumamos com ambiente perigoso e achamos tudo isso normal. Mas o termo segurança também é muito amplo pode ser um relacionamento, um emprego ou no seu dia-a-dia.

A alguns dias um amigo passou por um grave problema, foi assaltado e sofreu violência fisíca após essa experiência, ele passou a pensar como a vida é frágil, sim ele tem razão a vida é frágil, mas com todos os problemas do nosso país isso não é motivo para nos Brasileiros vivermos numa bolha. Muitas vezes só entendemos o quão somos vuneráveis quando somos impactados por algo ou quando estamos em um ambiente novo e desconhecido. Por exemplo, eu sou natural de uma pequena cidade no interior de Pernambuco com um número de homicídios muito alto para quantidade de habitantes, quando fui morar em São Paulo as pessoas ficavam espantadas, “Como você tem coragem? São Paulo é perigoso”, depois fui para Europa “Cuidado com o terrorismo!”, nesses três diferentes lugares nunca deixei de viver minha rotina. Mas não sabem meus amigos no interior de pernambuco que podem estar numa situação de risco muito maior que a minha. Mas também isso não signfica que eu estou salvo morando aqui na Europa, outras regiões podem ter risco como situações totalmente diferentes, fatores climáticos, naturais ou sociais.

Mas por que eu estou assustando vocês com esse assunto? Meu amigo sempre viveu nessa região, nasci no interior de pernambuco sempre convivi com esses problemas, mudei de cidade os riscos mudam. Se paramos para pensar vivemos situações de riscos todos os dias mas passam a ser algo comum. Mas nunca deixamos de viver depois de uma experiência negativa, mas isso serve tanto para experiências negativas e positivas, quando nos mexemos ou colocamos numa situação nova, ficamos assustados com o desconhecido. Por uma auto-defesa começamos a repensar tudo antes de enfrentar uma nova cidade, um novo emprego ou um novo relacionamento. O medo é perigo muito maior que essas situações, pois ele nos tira a chance de viver algo novo. Não podemos parar de viver ou de nos expor a novas possibilidades. Porque uma coisa é irreparável e ela é chamada de tempo. O tempo perdido você nunca vai conseguir reverter.

E a vunerabilidade? Resumindo é aquela decisão que você olha e pensa se der errado vai dar merd*. É um sentimento que tenho vivido constantemente a cada novo passo, a cada nova grande decisão. Sair da sua zona de conforto e enfrentar seus medos, estar vunerável a novas experiências um novo emprego, uma nova aventura como empreendedor ou uma nova vida isso é algo intenso. É deixar de lutar contra desconhecido e simplesmente aceitar é uma experiência única. Depois de quase dois anos morando fora do país. Todos os perrengues que passei, muitas vezes tive a sensação que iria enlouquecer, aquelas manhãs que eu tive vontade de jogar meu armário pela janela do meu quarto, ou daqueles dias que eu me perguntei o que eu estou fazendo aqui? Tudo é tão intenso que muitas vezes a gente não entende o que estamos vivendo ou conquistando. Mas hoje depois de parar e respirar e olhar para trás e ver todas as conquistas que se realizaram nesses dois anos, é algo que não estar no manual padrão “da vida de sucesso” mas tem um valor imensurável para mim. Coisas que nunca vou me arrempender e se der merd* algum dia vou ter orgulho de ter tentado.

Categorias
Geral

Headers com video no WordPress

Sites com videos de apresentação ou como background é um recurso muito utilizado em vários sites atualmente, com a versão 4.7 do WordPress agora e possível adicionar um video no custom header(cabeçalho), essa opção já tinha a possibilidade de adicionar imagens ao header. A seguir vamos ver como habilitar esse recurso no seu tema:

Adicionando o suporte

Primeiramente precisamos fazer os passos normais de adicionar um custom header em nosso tema. precisamos ir no nosso function.php e adicionar a seguinte linda:

add_theme_support('custom-header', array(
'video' => true,
));

Isto irá habilitar o suporte de envio de videos, caso já esteja utilizando o recurso de custom header você precisa achar a linha que adiciona suporte ao custom header e adicionar o atributo ‘video’ => true,  na tela de customização a função irar mudar de “Header Image” para “Header Media como na imagem abaixo”:

Exibindo o header

Nas versões anteriores para exibir o header nos utilizávamos a função the_header_image_tag(), nesta nova versão do WordPress utilizamos the_custom_header_markup() esta função tem suporte para videos e imagens.

Este recurso vai adicionar o markup com o video e também carregar o script wp-custom-header.js, com isso o WordPress irá carregar um markup de um player. Caso queira customizar seu markup o WordPress da uma série de funções para adicionar video ao seu tema.

Customizando

  • has_header_video() – verifica se o site possui um video para ser exibido.
  • is_header_video_active() – verifica se a funcionalidade está disponível no tema.
  • get_header_video_url() – resgata o valor que contem a url do video.
  • the_header_video_url() – imprime o endereco da url do video.
  • get_custom_header_markup() – resgata o markup mas no imprime o conteudo.

Vamos realizar um exemplo utilizando the_header_video_url():

<?php if(has_header_video()): ?>
  <video class="bgvid" playsinline autoplay muted>
    <source src="<?php the_header_video_url() ?>" type="video/mp4">
  </video>
<?php endif; ?>

No exemplo acima verificamos se o tema possui algum video cadastrado com a função has_header_video(), em seguida adicionamos o markup da tag video com o source carregando o endereco do video com a função the_header_video_url().

Nesse exemplo só cadastramos e carregamos o video, desse ponto precisamos de um tratamento com css para exibir o video de forma customizada.

Quer saber mais sobre wp criação de temas tem um curso online no Imediabrasil.com.brhttps://www.imediabrasil.com.br/cursos/curso-wordpress-temas.cfm