DEV Community: Karytonn Oliveira

Angular: font-size e acessibilidade

Karytonn Oliveira — Mon, 03 May 2021 01:52:33 +0000

Diante do requisito para uma feature que possibilite alterar o tamanho da fonte em todo o projeto de forma dinâmica, como conseguir essa façanha em projetos Angular?

Bom, após procurar muito e não encontrar nada a respeito, eis a solução que compilei:

1) Torne explícito um valor font-size default para todo o seu projeto. Faça isso no arquivo style.scss ou .css, ou ainda, de acordo com o pré-processador utilizado no projeto.

2) Para todas as tags que possuem texto, atribua o valor de font-size utilizando a unidade de medida rem (cada 1 rem equivale 16px, valor definido por você no style.scss).

Obs.: Esse tipo de atribuição de estilo inline não é o mais adequado, pois desta forma nosso html fica poluido e também não conseguimos aplicar estilos em cascata, reaproveitando o código. Aqui fiz assim somente para exemplificar a atribuição do font-size com rem.

3) Crie um componente que será responsável por exibir essa e outras features de acessibilidade (normalmente se utiliza uma barra que fica no topo da header, conforme imagem que ilustra esse tutorial).

4) No template html declare 3 botões que invocam uma função e passam como parâmetro uma string.

5) No componente.ts implemente a função que será responsável por aumentar, diminuir ou resetar o tamanho da fonte.

Antes disso, declare a variável font_size que será responsável por armazenar o tamanho da fonte default que é o mesmo valor do estado atual.

Na implementação da função o primeiro passo é verificar qual dos botões foi acionando e com base nisso atribuir um novo valor à variável font_size.

Na sequência criamos uma variável local htmlRoot do tipo HTMLElement que recebe uma instância do DOM referenciando a tag html. No caso do Angular, é necessário informar que queremos referenciar a primeira declaração de html e fazemos isso adicionando [0] ao final da invocação do método getElementsByTagName().

Por fim, verificamos se a variável recebeu a referência do html, se sim, então atribuímos um novo valor ao font-size default do projeto, o mesmo que declaramos lá no style.scss.

Shazam! Nossa feature está pronta! Ao clicar no btn A+ o tamanho da fonte será acrescido de 1px, ao clicar em btn A- decrescido de 1px, e assim por diante.

Vale resaltar que a ação se propaga em todas as páginas, por tanto,não há necessidade de se implementar a função em outros componentes.

Para um Ctrl+c o código está no no meu GitHub.

É possível que esta não seja a solução mais adequada ou performática, mas funciona. ;)

Criação de sites: não é só layout!

Karytonn Oliveira — Tue, 05 Jan 2021 20:55:44 +0000

É preciso levar a sério todo o processo de desenvolvimento.

Vejo muitos "desenvolvedores" dizendo que entregam sites funcionais em menos de 8 horas.

Mas será que realmente esse serviço tem qualidade?

Será que a solução final gera resultados que se convertem?

Ainda que dispondo de ferramentas que nos auxiliam na construção de páginas web de forma super dinâmica e ágil é nítido que o processo como um todo, quando executado de forma responsável e respeitando todas as fases do desenvolvimento, seja impossível que se inicie a criação de um site pela manhã e o entregue no fim do dia.

Nesse sentido lhes apresento alguns dos principais aspectos que envolvem a criação de um site simples (landing page), suas implicações para caso não seja levado a sério todas as etapas, e em alguns dos casos o tempo mínimo para execução, que, inclusive, justificam a necessidade de alguns dias para a entrega de um site básico.

Os principais aspectos são:

Levantamento e análise de requisitos;
Prototipagem em Wireframe;
Aquisição e configuração de domínio;
Contratação e configuração de hospedagem;
Programação;
Configurações de formulários;
Otimização de imagens;
Implementação de técnicas de segurança;
Análise e implementação de SEO;
Implementação de Analytics;
Testes de Usabilidade;
Testes de Performance;
Backup Recovery;

[ Levantamento e análise de requisitos ]

Nessa primeira fase ouvimos o cliente para definir o escopo do projeto com base nas necessidades dos usuários.

É um processo delicado porque muitas das vezes o que o cliente quer nem sempre é o que o usuário necessita e cabe a nós orientá-lo de forma profissional para que se chegue a um consenso quanto aos requisitos e funcionalidades que o site terá.

Tempo gasto:
Min. 2 reuniões

A não execução:
Normalmente se torna um projeto que gera muito desgaste e desperdício de tempo, já que várias partes teriam que ser refeitas por diversas vezes.

[ Prototipagem em wireframe ]

Já diz o ditado, "não se começa uma casa pelo telhado", nessa linha o wireframe seria o projeto arquitetônico do site, onde definimos onde cada informação e elemento será disposto.

Tempo gasto:
Depende da complexidade e quantidade de páginas.

A não execução:
Dificuldade para seguir um padrão de layout, gerando assim, um projeto sem identidade visual e com baixa harmonia entre os elementos.

[ Aquisição e configuração de domínio ]

É comum que o cliente chegue até o desenvolvedor ou agência com o nome do domínio (endereço do site) "definido", mas para essa definição geralmente não foi levado em consideração algumas características técnicas, como por exemplo, a disponibilidade do endereço para registro.

Mas nem sempre essa disponibilidade é o principal problema, a casos em que o nome de domínio não reflete a identidade/solução do site, e isso acontece porque o melhor momento para se definir esse nome, geralmente é durante ou após uma boa análise de requisitos.

Tempo gasto:
Faz parte do processo de análise de requisitos.

Sem a devida atenção:
Ter um nome de domínio que não reflete a proposta do site, não conseguir nomes adequados para as redes sociais e ou plagiar algum projeto existente.

[ Contratação e configuração de hospedagem ]

Talvez o principal fator. Não adianta ter um projeto "bem elaborado" se você não consegue fornecer um acesso rápido, seguro e consistente ao site. Para que esse fator seja assertivo, a decisão de onde hospedar e quais configurações seriam necessárias, dependem diretamente de uma boa análise de requisitos, pois só assim entenderíamos quais funcionalidades o site deverá suportar.

Tempo gasto:
~24 horas

Não levar em consideração:
Seu site não converte e dificilmente seus clientes/usuários retornam.

[ Programação ]

Fase onde juntamos tudo que foi planejado e partimos para o desenvolvimento do site. Aqui deve ser levado em conta não o presente mas sim o futuro do projeto.

Apesar de seguirmos a risca todos os aspectos que envolvem o levantamento de requisitos, wireframes e testes, é comum nos depararmos com elementos diversos que não estão desempenhando bem sua função ou convertendo como esperado, e isso acontece porque existem N variáveis no mundo da web e dificilmente conseguimos antever 100% delas. O que pode ser feito é a identificação e correção desses elementos "defeituosos" o mais rápido possível, envitando assim a ineficiência dos resultados esperados.

Nesse sentido, é importante optarmos por métodos mais complexos e que naturalmente tomam mais tempo, mas que garantem a possibilidade de refatoração do código ou mudanças no layout caso seja necessário.

Tempo gasto:
Depende da complexidade da página e tipo de solução aplicada. Min. 12 horas.

Se não levado a sério:
O projeto se tornaria inútil caso surgisse uma nova regra de negócio e não fosse viável adaptar o site a ela.

[ Configurações de formulários ]

Como estamos falando de sites do tipo Landing Page (página de conversão) é comum que este possua ao menos um formulário, desta forma conseguimos obter leads ou vender um produto/serviço.

Tempo gasto:
~3 horas.

Se não levado a sério:
O sucesso do site estaria comprometido, já que este é o coração da solução, que traz leads ou fechar alguma venda.

[ Otimização e escolha de imagens ]

Processo que define e otimiza as imagens que serão utilizadas.

Muitas das vezes o que atrai, retém ou estimulam ações dos usuários dentro do site são as imagens, sendo assim, para que isso seja positivo, é fundamental que essas estejam otimizadas e harmonicamente contextualizadas ao projeto.

Tempo gasto:
~1 hora.

Se não levado a sério:
O tempo de carregamento do site pode ser prejudicado ou elas não serão um fator somatório para o engajamento dos usuários.

[ Implementação de técnicas de segurança ]

Processo que visa garantir a segurança dos dados que trafegam ou são coletados dentro do site.

Tempo gasto:
Depende das funcionalidades do site, local de hospedagem, etc.

Se não levado a sério:
O mais simples comprometimento dos dados de seus usuários pode ser suficiente para decretar o fim do seu negócio.

[ Análise e implementação de SEO (Search Engine Optimization) ]

É um conjunto de técnicas que visam posicionar uma página nos primeiros resultados de mecanismos de busca online, como o Google.

Tempo gasto:
Depende do tamanho do site.

Se não levado a sério:
Seu site se torna uma obra de arte pessoal e um negócio invisível que não gera nenhum tipo de conversão.

[ Implementação de Analytics ]

Ferramenta que possibilita o monitoramento de tráfego no site. O objetivo principal do Analytics é saber e entender os comportamentos dos visitantes ao navegarem pelas páginas do site, além disto, fornecer dados para que seja possível a indexação nas buscas por termos específicos no Google.

Tempo gasto:
~2 horas

Se não levado a sério:
Não conseguiríamos compreender o comportamento do usuário dentro site e com isso ficaríamos limitados para implantação e correção de estratégias de marketing ou bom funcionamento do SEO.

[ Testes de Usabilidade ]

Fase onde verificamos a experiência de usabilidade para o usuário. Aqui testamos o layout em diferentes dispositivos, a comunicação dos botões, formulários, performance, etc.

Tempo gasto:
~2 horas

Se não levado a sério:
Comportamentos inesperados podem reduzir a satisfação dos usuários e com isso reduzir a taxa de conversão.

[ Teste de Performance ]

Fase onde sobrecarregamos o servidor onde está hospedado nosso site a fim de averiguar possíveis gargalos e falhas em produção.

Tempo gasto:
Depende do método/ferramenta utilizada. Min. 4 horas.

Se não levado a sério:
O site pode ficar inoperante caso o servidor não suporte os acessos ou ocorra alguma falha grave.

[ Backup Recovery ]

Processo periódico que garante uma cópia fiel do site, possibilitando a restauração caso ocorra uma fatalidade com os arquivos no servidor.

Tempo gasto:
~2 hora

Se não levado a sério:
Fatalidades ocorrem, e não estar preparado para lidar com elas pode acarretar na perda de clientes, dinheiro ou até mesmo de todo um negócio.

...

Ou seja, não é só desenhar o site e entregar para o cliente, é preciso muito mais para que se tenha um produto de qualidade e que de fato traga benefícios.

>> Ao desenvolvedor

Portanto, se você quer ser um profissional de destaque e ser lembrado por criar soluções que engajam, convertem ou resolvam problemas, é fundamental que leve a sério todos os fatores citados acima e execute com responsabilidade todas as etapas.

>> Ao cliente

Portanto, se você quer ter um Site que de fato converta os resultados em algo positivo, contrate um profissional que leve a sério todos estes aspectos e requisitos acima.

Liberte-se do conforto!

Karytonn Oliveira — Sun, 15 Mar 2020 17:06:59 +0000

A algum tempo fui convidado a trabalhar em uma instituição pública como auxiliar de gestão de Mídias Sociais. Como já tinha bastante experiência na área de informática e facilidade em entender os mecanismos da Web, aceitei o desafio.

Não foi difícil de entender como tudo funcionava e em poucos dias estava suprindo a necessidade da equipe, inclusive, me atrevendo a melhorar alguns métodos.

Mas logo em seguida o inesperado aconteceu, o designer gráfico da equipe, que diga-se de passagem é um ótimo profissional, decidiu-se voltar a trabalhar de forma autônoma.

Tendo sua saída ocorrido de forma inesperada e vendo a necessidade de entregar alguns trabalhos, mais uma vez me atrevi a fazer algo que não me fora solicitado.

Fiz algumas pesquisas e coloquei a mão na massa. Sem aplicar nenhuma técnica e me baseando em outros materiais, entreguei minha primeira proposta de arte, está supriria uma demanda de urgência.

Foi um sucesso, todos aprovaram e me senti muito bem por ter conseguido resolver aquele problema pontual.

Mas não parou por aí, tinha mais artes pra fazer e pensei comigo, se fiz uma, consigo fazer outra.

Hoje já somam centenas delas e já cheguei a suprir 100% da demanda.

Comecei sem saber nada de design, mas com determinação, força de vontade e acima de tudo com o apoio dos colegas de trabalho, hoje consigo entregar projetos como este que ilustra o post, a identidade visual de uma Escola Municipal.

Profissionalmente esse não é o caminho que quero seguir, tenho como objetivo me tornar um bom Analista de Sistemas, que consiga analisar, desenvolver e implementar qualquer tipo de software.

Moral da história

Quando comecei a me aventurar na criação artes para mídias sociais, confesso que fiquei com bastante medo de perder o foco do meu objetivo profissional, até porque, por algum tempo me dediquei mais em aprender sobre design do que sobre software.

Mas hoje a ficha caiu, me dei conta de que não é suficiente em nem construtivo focar 100% da nossa energia em um objetivo linear, pois o conhecimento é como um formigueiro, onde os caminhos se encontram, e mesmo que não exista um caminho, se você cavar, em algum momento ele vai se conectar.

A mensagem que deixo é a seguinte:

Liberte-se do conforto!

Não se limite a fazer somente o que gosta, seja aberto às oportunidades de áreas correlacionadas pois elas vão te ajudar a compreender o "ecossistema" do seu objetivo profissional.

Além disso, os conhecimentos "secundários" se somam de várias maneiras, e fazem com que sua mente se expanda tornando-o uma pessoa mais criativa e crítica de si mesmo.

🖖🏻 Vida longa e próspera!

Sobre construir conhecimento

Karytonn Oliveira — Tue, 28 Jan 2020 10:39:37 +0000

Uma dica para desenvolvedores

Por muito tempo me deixei levar pela falsa ilusão de que para se aprender uma nova tecnologia seria necessário praticar em algo grande, ou ao menos que cobrisse todos os aspectos daquele conhecimento.

Sim, eu caí nessa armadilha -- estudava, estudava e pouco saia do lugar, pois o conhecimento que tinha "nunca era o suficiente" para se começar algo.

É tipo uma síndrome do impostor, a gente não consegue aceitar que já sabe o suficiente para começar.

Mas como assim, se eu não tenho conhecimento suficiente é porque ainda não aprendi o suficiente, correto?

Até certo ponto sim, dado que, sem uma base é quase que impossível de se começar algo.

Então onde está o problema?

[ Primeiro vamos deixar claro um detalhe, não estou me referindo ao conhecimento de senso comum, mas sim, do técnico/científico. ]

Então, resumidamente, o problema está no método que utilizamos para obter o conhecimento.

É comum ficarmos horas, dias, semanas ou até meses lendo livros, assistindo vídeo-aulas ou até mesmo lendo artigos como este, e isso não é ruim, pelo contrário, esse tipo de material é de suma importância. Eles são nossa base de referência, e cada vez mais tem sido útil, já que, como costumo dizer, não é nada fácil absorver esse emaranhado de informações que as novas tecnologias nos obriga a reter.

Só que estamos esquecendo do fundamental, a prática. É ela que de fato nos permite construir o conhecimento sólido, aquele quê, quando necessário, apresenta-se de forma espontânea.

Ou seja, de forma genérica, o conhecimento não se constrói com o observar, mas sim, com o praticar.

Se pra você isso parece óbvio, parabéns. Mas saiba que a maioria, assim como eu, acaba descobrindo isso um pouco tarde, alguns até mesmo depois de já terem desistido.

A questão é que de certa forma ficamos "enfeitiçados" ao observar o locutor explicar e produzir o conhecimento, ainda mais quando o tema é algo que almejamos muito dominar. O fascínio é tão grande que não nos damos conta de que não estamos aprendendo.

Como diz meu querido professor, Gustavo Guanabara:

"Você pode me assistir fazendo dezenas de vezes, mas se não praticar, só vai conseguir provar uma coisa, eu sei fazer e você não."

Mas então como devo fazer?

É claro que não existe um método mágico, até porque, não somos indivíduos homônimos, e o que funciona pra mim pode não funcionar pra você.

Mas a minha dica é: comece criando suas próprias ferramentas.

É aqui que você desvia da armadilha, não espere achar que já tem o conhecimento necessário, só comece.

Crie seu próprio site/portfólio, sua lista de tarefas, seu player de música, seu blog ou uma simples calculadora.

Pode ter certeza, isso será o suficiente para se sentir confiante em avançar.

Assim como o saber se soma, seu projetos também evoluem de acordo com a solidez do seu conhecimento.

É como uma bola de neve no desfiladeiro (no bom sentido, claro) o conhecimento cresce de acordo com caminho percorrido.

Um exemplo concreto

Estava eu necessitando automatizar a criação de links personalizados para o Whatsapp e após inspecionar o código de ferramentas já disponíveis no mercado (sim não confio em terceiros), acabei descobrindo que não poderia garantir que o número de telefone fornecido não seria armazenado em um banco de dados. Daí então, decidi criar meu próprio gerador de links personalizado.

Mas além dessa necessidade eu também precisava aprimorar meus conhecimentos em CSS e JavaScript e foi então que decide casar a duas coisas.

Busquei algumas referências, as mesmas bases que citei lá em cima: vídeos, livros, documentações, ..., e coloquei a mão na massa (essa é a diferença).

No decorrer do desenvolvimento, por mais que a aplicação fosse simples, acabei aprendendo muitas coisas novas, e com relação ao JavaScript o aprendizado foi tanto que o inesperado aconteceu.

A aplicação estava pronta, eu já tinha feito o deploy e o resultado tinha sido o esperado. Mas me sentia tão confiante com tudo que havia aprendido em JavaScript que acabei me aventurando em outra tecnologia que também tenho muita vontade de dominar, que são as PWAs.

E não é que consegui! No final das contas eu tinha criado uma App PWA multiplataforma e que funcionava offline.

Mais uma vez pude constatar que de fato o segredo está nas coisas simples. É nelas que temos a confiança para iniciar e posteriormente a clareza para aprimorar.

E isso não serve só para projetos.

Serve para aquela vaga de emprego que você acha que não tem conhecimento suficiente para se candidatar.
Pro livro que quer escrever.
Pro curso que quer iniciar.

Você não precisa estar completamente preparado. E a verdade é que ninguém nunca está.

Só comece!

Sobre o App PWA que me referi, segue o link por si acaso quiser testá-lo 😉
https://www.crialink.karytonn.dev/

Segurança na internet: quase sempre a culpa é sua!

Karytonn Oliveira — Wed, 15 Jan 2020 10:10:09 +0000

Basta fazermos uma simples pesquisa no Google sobre segurança para descobrirmos que 2019 foi um ano repleto de “invasões por hackers"

Mas será que a culpa é dos hackers mesmo?

Pois bem, eu acredito que a maioria dos casos tem mais a ver com o descuido dos usuários do quê com os serviços propriamente dito.

Mais de duas décadas de internet e as pessoas ainda insistem em utilizar senhas como: 123456; password; admin; 654321; senha123.

Minha sugestão para 2020 é que além da indispensável autenticação em dois fatores, você utilize senhas diferentes para cada serviço da internet.

Calma, eu sei que isso parece muito difícil e chato de fazer, mas hoje vou te ensinar uma técnica simples que venho utilizando a vários anos e que por “mérito dela” jamais tive um serviço da internet invadido.

A técnica consiste na criação de uma senha mestre e com base nela as demais.

O mais bacana é que você pode ter 30 senhas diferentes e mesmo assim só precisar decorar uma delas, [a senha mestre].

Vamos lá!

CRIE UMA SENHA MESTRE”
Ex.: universo | fiona | california
==> universo
UTILIZE O NOME DO SERVIÇO PARA CRIAR UM INCREMENTO
Ex.: Instagram
==> gram
Aqui você pode fazer como preferir, desde quê, utilize o mesmo padrão para todos os serviços. (Neste caso eu utilizei os 4 últimos caracteres presentes no nome do serviço)
SOME O INCREMENTO A SENHA MESTRE (Esse é o segredo)
==> universo + gram
Você pode incrementar tanto antes quanto depois da senha mestre.
ACRESCENTE UM OU MAIS CARÁCTERES DE SUA PREFERÊNCIA
Ex.: #!%$@
==> universo + gram + #!
*Também precisa ser padrão para todas as suas senhas.
E ENTÃO TEMOS NOSSA SENHA SUPER SEGURA
==> universogram#!

Repita o processo para todos os serviços mantendo sempre a senha mestre e o(s) caracteres especiais.
==> universobook#!
==> universomail#!
==> universoitter#!

Simples, não é mesmo!

Mas claro, essa técnica por si só não garante que seus serviços da internet não sejam invadidos, é preciso bem mais que isso, inclusive, como já mencionado acima, é indispensável que você ative a verificação em duas etapas em todos os serviços que ofereçam essa possibilidade, sendo assim, você adiciona mais uma camada de segurança aos seus twitts, e-mails, mensagens de whatsapp, etc.

Se tiver alguma dúvida quanto a implementação da verificação em duas etapas em seus serviços da internet, me procure que te auxilio.😉

Obrigado por ler este artigo!

Saiba mais sobre autenticação em dois fatores

Avalanche de informações: Um App para organizar essa "bagunça"

Karytonn Oliveira — Wed, 15 Jan 2020 09:32:34 +0000

Diante da avalanche de informações que o século XXI nos obriga a reter, uma solução simples e que nos auxilia na organização dessas informações é o aplicativo Google Keep.

O objetivo do Google Keep é servir como um armazenador e organizador de informações que podem ser acessadas posteriormente e de forma integrada.

Anotar seus compromissos, listar tarefas, registrar pensamentos, armazenar objetivos, transcrever áudio em texto, transcrever o texto de uma foto, guardar links, ou até mesmo rabiscos, são algumas das funcionalidades desta simples e objetiva ferramenta moderna.

Em uma interface simples e direta, o Google Keep exibe as últimas notas salvas e permite a organização delas a partir de marcadores. No topo da interface existe uma barra de buscas onde é possível pesquisar pelos termos desejados.

Mas o quê mais me agrada neste App é a questão da integração com outras plataformas, por exemplo, ao salvar uma nota no mobile a mesma pode ser acessada após alguns segundos em um desktop ou qualquer outro dispositivo que possui um navegador Web.

(Vale resaltar que não existe um botão para salvar as notas, isso ocorre de forma automática e com 100% de precisão)

Achou interessante e gostaria de experimentar este aplicativo que é gratuito e tem versão para Android, IOS e Web? Vou facilitar sua vida e deixar o link abaixo que leva direto a loja de aplicativos.

Google Keep - iOS

Google Keep - Android

Estamos passando por uma das maiores disrupções tecnológicas já vista

Karytonn Oliveira — Sun, 12 Jan 2020 22:25:19 +0000

Os conceitos de SaaS (Software como um Serviço) e HaaS (Hardware como um serviço) estão se difundindo rapidamente com o novo modelo de computação conhecido como cloud computing (Computação em Nuvem).

Nossos softwares (aplicativos) estão deixando de ser produtos “físicos” para se tornarem serviços 100% online.

Em breve não fará sentido ter um smartphone ou desktop potente, pois bastará uma boa conexão com a internet para acessar qualquer tipo de aplicativo (sem a necessidade de tê-lo instalado em seu dispositivo).

Um bom exemplo é o recém lançado Google Stadia, plataforma de jogos online, que requer somente um controle remoto e uma boa conexão com a internet, para jogar os mais variados e sofisticados tipos de games, dispensando assim, os “velhos” consoles.

Outro exemplo, que inclusive sou adepto, é a suíte de programas (Google Documentos). Esta fornece inúmeros aplicativos de escritório que são acessados via internet, ou seja, sem a necessidade de ter instalado qualquer tipo de programa em seu computador, bastando apenas um navegador Web.

Mesmo sabendo que isso é um “efeito colateral” e não um propósito, vejo essa disrupção como um grande passo da humanidade no sentido de preservação do Meio Ambiente, já quê, o consumo de recursos naturais para a produção de Hardwares terá uma redução considerável nós próximos anos.

Mas claro, nem tudo é um mar de rosas, a de se levar em conta que este tipo de tecnologia também nos trás grandes desafios, e um dos principais diz respeito a segurança de dados, já quê, estes são armazenados nas nuvens e estão "fora do nosso controle".

Para concluir, cito abaixo alguns filmes e seriados de ficção que mostram um pouco do que podemos esperar para os próximos anos, e que também retratam alguns desafios dessa nova tecnologia.

-The Feed — Prime Video
-Black Mirror — Netflix (Alguns episódios)
-Privacidade Hackeada — Netflix

Há..! Netflix, YouTube, …, também são exemplos de SaaS e foram responsáveis pela disrupção que levou o "fim" das locadoras.