Forem: Fernanda Gonçalves

Acessibilidade e UX no Alinhamento de textos em sites

Fernanda Gonçalves — Mon, 07 Apr 2025 20:38:42 +0000

Acessibilidade e experiência do usuário (UX) são temas amplos e fundamentais no mundo digital, e existem diversos fatores que impactam a qualidade da navegação em um site. Neste artigo, quero destacar um deles, que à primeira vista pode até parecer bobo, mas fica comigo até o final desta leitura, e você vai entender como uma simples escolha pode comprometer toda a experiência do visitante.

Entendendo o cenário

Bem sabemos que o texto justificado é apropriado na formatação de documentos formais e diversos como: contratos, livros, dissertações e outros. No entanto, quando se trata de alinhamento justificado na web, a história é bem diferente.

Pode até parecer uma excelente escolha desenvolver um site elegante e visualmente organizado fazendo o uso desta propriedade CSS, no entanto, essa decisão estética pode comprometer seriamente a usabilidade e a acessibilidade do site.

O CSS oferece quatro principais opções de alinhamento de texto. Vejamos abaixo:

text-align: start; 
text-align: end;
text-align: center;
text-align: justify;

Embora o align-text: justify não seja amplamente utilizada na web moderna, ainda existem casos em que ela pode ser aplicada por razões estéticas ou por desconhecimento de seus impactos.

Veja um exemplo de uso da propriedade text-align: justify:

Créditos: MDN Mozilla

Os problemas do texto justificado

A acessibilidade na web é fundamental para garantir que todos os usuários, independentemente de suas condições, possam acessar e compreender o conteúdo. O W3C, em suas diretrizes de acessibilidade (WCAG), enfatiza a importância de criar textos legíveis e compreensíveis.

Como destacado na documentação da MDN Web Docs, o text-align: justify pode criar espaçamentos inconsistentes entre palavras, e isso dificulta a leitura de pessoas com dislexia e outras condições cognitivas.

Essas variações geram espaços em branco que podem distrair o leitor, fazer com que ele perca o foco tornando a leitura mais lenta e cansativa. Em dispositivos móveis, onde há uma limitação de espaços, esse problema acaba sendo ainda mais grave.

O impacto negativo na experiência do usuário (UX)

Redução no tempo de permanência onde os usuários abandonam quase que imediatamente páginas com baixa legibilidade;
Impacto direto nas conversões;
Uma vez identificado a dificuldade de navegação, muitos usuários não retornam novamente ao site em questão.

Uma solução simples

Felizmente, a solução é simples: que seja feito o uso do text-align: left (ou text-align: start).

Veja alguns benefícios:

Melhor legibilidade para todos os usuários, promovendo um fluxo de leitura mais natural e consistente.
Redução da carga cognitiva aos visitantes;
Alinhamento com as melhores práticas de design moderno.

Conclusão

Embora o text-align: justify seja uma propriedade CSS válida, seu uso vai muito além da estética. Cada decisão no design e no desenvolvimento deve ser muito bem pensada, não apenas em como o texto será apresentado, mas como ele será experimentado por diferentes pessoas.

Obrigada por ler até o final! Agora me conta: Você já teve alguma experiência marcante (positiva ou negativa) com essa propriedade? Que dicas você daria para melhorar a forma como entregamos conteúdo textual na web?
Deixe aqui o seu comentário 💬☺️!

Fernanda Gonçalves
Front-end Developer | Python + IA Student | Criadora de Conteúdo | PCD

Como usar CSS interno, inline e externo no HTML

Fernanda Gonçalves — Wed, 21 Feb 2024 20:00:02 +0000

Oi gente, tudo bem com vocês?

Hoje quero apresentar 3 formas distintas de utilizarmos o CSS no nosso site através do HTML.

Vejamos a seguir em detalhes cada um deles:

1. ESTILOS DE CSS INTERNO

Trabalhando com o CSS interno, podemos adicionar nossos estilos ao elemento <style> que fica localizado dentro do <head>, mas vamos por parte! Repare abaixo na estutura básica do HTML e a forma como ele é exibido no navegador:

<!DOCTYPE html>
<html lang="pt-br">

<head>
  <meta charset="UTF-8">
  <title>Usando CSS interno no meu site</title>
</head>

<body>
  <h1>Trabalhando com CSS interno</h1>
  <p>Exemplo parágrafo no site.</p>

  <body>

  </body>

</html>

Por enquanto tudo normal pois ainda não foram aplicados os estilos ao documento, mas vamos adicionar agora o elemento <style> - logo abaixo do <title> - incluir alguns estilos e ver como ele vai ser exibido no navegador:

<!DOCTYPE html>
<html lang="pt-br">

<head>
  <meta charset="UTF-8">
  <title>Usando CSS interno no meu site</title>
  <style>
    h1 {
      font-size: 25px;
      color: green;
    }

    p {
      color: blue;
    }
  </style>
</head>

<body>
  <h1>Trabalhando com CSS interno</h1>
  <p>Exemplo parágrafo no site.</p>

  <body>

  </body>

</html>

E olha aí nossa primeira implementação de estilos internos no site 😁.
Basicamente colocamos no título <h1> uma fonte de 25px e cor verde. Ao parágrafo <p> colocamos uma cor de fonte azul.
Vamos para o próximo estilo?

2. ESTILOS DE CSS INLINE

Bom ... no inline, os nossos estilos são aplicados diretamente em um determinado elemento, fazendo novamente uso do atributo <style>, mas repare a seguir que a forma de utilização é um pouco diferente da anterior.
Veja o exemplo:

<!DOCTYPE html>
<html lang="pt-br">

<head>
  <meta charset="UTF-8">
  <title>Usando CSS inline no meu site</title>
</head>

<body>
  <h1 style="color: green; background-color: yellow;">Trabalhando com CSS inline</h1>
  <p style="color: red;">Exemplo parágrafo no site.</p>

  <body>

  </body>

</html>

Vejamos como fica a visualização pelo navegador:

Notou a diferença? Agora nós utilizamos o elemento <style> - sem o sinal < > - incorporado dentro do nosso título <h1>(cor de fonte verde com cor de fundo amarelo) e <p>(cor de fonte vermelha).

O que achou desse segundo estilo? 👀

3. ESTILOS DE CSS EXTERNO

Esta é a 3ª forma de trabalharmos com CSS no nosso site, mas não menos importante que as demais já apresentadas...muuuito pelo contrário já que esta é a forma recomendadíssima de se fazer o seu uso, pois todo nosso código CSS fica armazenado em um arquivo externo.

A partir daí, criamos um novo arquivo (por ex: styles.css) e conseguimos chamar esse arquivo de dentro do HTML através do elemento <link> - que também fica localizado dentro do <head> - da seguinte forma:
<link rel="stylesheet" href="styles.css" />

Nota: Esteja atento a pasta em que o seu arquivo .css estiver armazenado. No meu exemplo, ele está localizado na raíz do meu site ao invés de dentro de alguma pasta.

Veja agora como fica a estrutura do nosso HTML - separado do nosso CSS. Logo depois veja o arquivo CSS:

<!DOCTYPE html>
<html lang="pt-br">

<head>
  <meta charset="UTF-8">
  <title>Usando CSS externo no meu site</title>
  <link rel="stylesheet" href="styles.css" />
</head>

<body>
  <h1>Trabalhando com CSS externo</h1>
  <p>Exemplo parágrafo no site.</p>

  <body>

  </body>

</html>

styles.css

h1 {
  color: blue;
  background-color: gray;
}

p {
  color: red;
}

Podemos ver pelo navegador que nosso <h1> está com a cor azul e fundo cinza, enquanto nosso <p> está com a cor vermelha.

Muito legal né?
Como dito anteriormente, a forma de uso recomendada é o CSS externo, mas também é muito importante conhecer as demais formas de uso e opções que vão de acordo com a necessidade de cada dev.
Quero encerrar este artigo com algumas pequenas notas:

Vantagens de usar CSS Externo

O seu projeto fica bem organizado e limpo devido ao CSS não se misturar com o HTML;
Encontramos mais facilidade para realizar ajustes ou prestar manutenções, tanto para quem trabalha individualmente quanto para equipes.
Ganho na praticidade para trabalhar no dia a dia;

Desvantagens de usar CSS interno e inline

É bem trabalhoso fazer alguma atualização, por exemplo: imagine que você tem um site com 15 páginas, e em um determinado momento precisa modificar algo. Você vai precisar fazer isso manualmente e em cada página;
O seu HTML acaba ficando poluído, uma vez que o CSS fica junto com o HTML (embora seja comum ver o uso destes na criação de mailings);
Em se tratando do inline, se precisar repetir o mesmo estilo a algum elemento, infelizmente não há possibilidade de reutilizá-lo. Vai ser necessário adicionar o novo estilo sempre que precisar.
Lentidão no carregamento das suas páginas.

O CSS é muito poderoso e com ele é possível criar estilos incríveis, animações e muitas outras implementações que vão deixar o seu projeto bem interessante. Com a utilização dessas tecnologias alinhadas a paixão pela área, a criatividade vai longe 🚀.

Então é isso gente ... espero que tenham gostado e espero que esse material tenha ajudado vocês.
Bons estudos, um abração e até+ 😊.

You are running `create-react-app` 4.0.3, which is behind the latest release (5.0.0)

Fernanda Gonçalves — Fri, 18 Mar 2022 01:36:25 +0000

Oii gente, tudo bem com vocês?

Então ... recentemente dei início a um projeto em ReactJS, mas logo fiquei estacionada assim que comecei a criar meu app devido ao surgimento do seguinte erro: You are running create-react-app 4.0.3, which is behind the latest release (5.0.0) 😱😱.

Bom, ao pesquisar esse erro, vi que outras pessoas passaram pela mesma situação, mas consegui solucionar esse probleminha através dessas pesquisas e vim aqui compartilhar a solução com vocês.

PASSO 1

Primeira coisa que fiz foi iniciar a criação do meu app com:

npx create-react-app fegoncalves

Logo, surgiu essa mensagem abaixo informando que eu precisaria intalar o pacote citado. Para prosseguir confirmei com "y":

PASSO 2

Em seguida, ele apresenta o erro em questão, onde informa que estou executando o comando em uma versão anterior ao 5.0.0 e que não oferecem mais suporte a instalação global. A orientação seguinte é desinstalar qualquer versão global utilizando um dos comandos citados (com npm ou yarn) segundo instruções da documentação em seu site.

PASSO 3

Segundo os passos contidos no site acima, o procedimento seria - nessa ordem:

Faço a desinstalação global usando um dos comandos abaixo:

npm uninstall -g create-react-app

yarn global remove create-react-app

Agora sim criar o app:

npx create-react-app fegoncalves

Porém, fazendo dessa forma não estava dando certo, e particularmente estava acontecendo um loop pois a mensagem de desinstalação do pacote insistia em aparecer. Pesquisando então alguma solução, vi uma - embora a documentação no site do React não informe - que recomendava a limpeza do cache. Então fiz a tentativa, deu certo e consegui criar meu app.

A solução completa passo a passo ficou assim:

1º. Criando meu app

2º. Faço a desinstalação do pacote após essa mensagem (utilizei o npm uninstall -g create-react-app)

3º. Limpei o cache

4º. Criando aqui meu app (agora vai 😁)

5º. Em seguida é dado início a instalação do meu app

Em resumo, a questão da desinstalação global é necessária, para garantir que o npx sempre use a versão mais recente e as soluções que vi foram diversas: desinstalar e instalar novamente o npm, forçar para a versão mais recente, entre outros. Pra mim, limpar o cache foi minha primeira tentativa e deu tudo certo \0/\0/\0/

Mas e você, chegou passar por esse probleminha e precisou proceder de alguma forma? Deixa nos comentários qual solução funcionou pra você!

E é isso gente. Espero que tenha sido de grande ajuda pra vocês 😊❤️! Vou deixar alguns links de referência que consultei aqui embaixo.
Até a próxima!

https://create-react-app.dev/docs/getting-started/

https://github.com/facebook/create-react-app/issues/11816

https://exerror.com/you-are-running-create-react-app-4-0-3-which-is-behind-the-latest-release-5-0-0/

Entendendo melhor algumas funcionalidades antes de criar seu primeiro projeto em Angular

Fernanda Gonçalves — Fri, 16 Apr 2021 19:36:13 +0000

#angular #typescript

Oi gente, tudo bem com vocês?

Sou estudante de programação, atualmente fazendo o Bootcamp Avanade Angular Developer na Digital Innovation One e vim compartilhar algumas informações que foram na verdade dúvidas que surgiram ao criar meu primeiro projeto em angular (que está em andamento). Sou uma pessoa bastante curiosa, detalhista mas ao compreender melhor essas funcionalidades, vim compartilhar com vocês pois talvez, essas minhas dúvidas em algum momento já foi ou pode vir a ser a sua ❓ 💬 😃.

1. PRIMEIROS PASSOS:

Instalar o Node

nodejs.org

Instalar o gerenciador de pacotes npm

npm install -g npm

Instalar o Angular CLI

npm install -g @angular/cli

Aqui não vou entrar muito em detalhes sobre essas informações, mas essas instalações ficam armazenadas no sistema e não no projeto, por isso serão feitas apenas uma vez. Caso já os tenha instalado, basta verificar se as versões estão atualizadas:

Versão do Node

node -v

Gerenciador de Pacotes

npm -v

Angular CLI

ng version

2. CRIANDO UM NOVO PROJETO

Para criar um novo projeto utilizamos a linha de comando:

ng new nomedoprojeto

E a partir daqui foi onde comecei a buscar informações para entender um pouco melhor sobre essas opções a serem escolhidas:

STRICT MODE

Assim que digitei a linha de comando acima, recebi a seguinte mensagem:

C:\Fer\Projetos\Angular> ng new nomedoprojeto
? Do you want to enforce stricter type checking and stricter bundle budgets in the workspace?
  This setting helps improve maintainability and catch bugs ahead of time.
  For more information, see https://angular.io/strict (y/N)

A pergunta que ele faz é: Se eu desejo impor uma verificação de tipo mais rígida e orçamentos de pacotes mais restritos, e que essa é uma configuração que auxilia em uma melhor manutenção e detecção de bugs com antecedência.

Mas na íntegra o que exatamente significa isso?
Essa questão tem haver com a utilização do TypeScript no Angular. Pesquisando um pouco sobre o strict mode aprendi que essa é uma das ferramentas adicionais que o Angular possui. Em se tratando desse modo uma vez habilitado, será inicializado um novo workspace com uma configuração que terá o propósito de analisar seu código.

Essa sinalização vai ativar algumas opções para o compilador TypeScript. Veja algumas delas: strictTemplates, strictInjectionParameters, noImplicitAny, noImplicitThis, entre outras.
Quando uma verificação for feita no seu código, você vai receber mensagens de erros, de uma inicialização que deve ser feita diferente ou uma adição, coisas desse tipo, mas todas essas referidas mensagens são de ajustes recomendadas pela própria equipe do TypeScript. Achei isso fantástico e no final de tudo, esse modo trata da segurança do seu projeto a fim de tornar o seu código mais simples de ler e com um risco menor de apresentar falhas.

Esse modo não vem habilitado por padrão, então se a pergunta abordada nesse tópico não aparecer pra você, ela pode ser habilitada manualmente utilizando o sinalizador --strict.

Bom, isso tudo é muuuuito novo pra mim e faltam ainda muitos passos pra chegar lá mas quando eu chegar, já estarei ciente do que se trata o strict mode. Conforme eu for ganhando um pouco mais de conhecimento, eu quero fazer uso dele pois a princípio eu gostei 😁, e se bem entendi a sua proposta, esse modo traz segurança não apenas para o projeto em si, mas também para o próprio profissional.

ROTAS E ESTILOS

Depois da sua escolha sobre o modo estrito ele pergunta se você deseja adicionar as rotas.

C:\Fer\Projetos\Angular\nomedoprojeto>
? Would you like to add Angular routing? (y/N)

Rotas são simplesmente as demais páginas que vão existir no seu projeto. Vou dar um exemplo bem básico: se a sua aplicação é sobre produtos eletrônicos, então será preciso criar rotas que irão direcionar os usuários para essas demais páginas (que serão os componentes criados) de produtos, orçamento, contato, entre outros.

Para a utilização do mesmo, basta digitar y e um arquivo (módulo) de rotas será adicionado a sua aplicação.

Logo em seguida você precisará escolher qual formato de estilo deseja usar, então basta navegar com a seta para cima ou para baixo, e uma vez selecionado a sua preferência basta pressionar enter para confirmar.

C:\Fer\Projetos\Angular\nomedoprojeto>
? Which stylesheet format would you like to use? (Use arrow keys)
> CSS
  SCSS   [ https://sass-lang.com/documentation/syntax#scss                ]
  Sass   [ https://sass-lang.com/documentation/syntax#the-indented-syntax ]
  Less   [ http://lesscss.org                                             ]
  Stylus [ https://stylus-lang.com                                        ]

3. INSTALAÇÃO DO ANGULAR MATERIAL

O Angular Material é uma biblioteca de componentes baseadas no material design do Google (ex.: botões, menus, etc...) e dessa forma você não precisa criar seus conteúdos do zero, basta fazer uso desses componentes.

Para fazer a instalação você digita a linha de código

ng add @angular/material

TEMA

Primeiro ele pede para que escolha a cor do tema que deseja utilizar. Basta descer ou subir com a seta do teclado para fazer a escolha e depois pressionar enter - pode ser personalizado através do arquivo angular.json/styles.

C:\Fer\Projetos\Angular\nomedoprojeto> ng add @angular/material
Installing packages for tooling via npm.
Installed packages for tooling via npm.
? Choose a prebuilt theme name, or "custom" for a custom theme: (Use arrow keys)
> Indigo/Pink        [ Preview: https://material.angular.io?theme=indigo-pink ] 
  Deep Purple/Amber  [ Preview: https://material.angular.io?theme=deeppurple-amber ] 
  Pink/Blue Grey     [ Preview: https://material.angular.io?theme=pink-bluegrey ] 
  Purple/Green       [ Preview: https://material.angular.io?theme=purple-green ] 
  Custom

TYPOGRAPHY

Logo em seguida precisa escolher se a tipografia será global, ou seja, uma vez confirmando a fonte Roboto fica sendo a fonte padrão da aplicação.
Se ativar essa opção você pode ver no arquivo index.html que será adicionado o link no cabeçalho e uma classe no body - conforme a própria documentação relata - e as mudanças do style, porém, nada impede que você faça a mudança posteriormente para outro tipo de fonte.

? Set up global Angular Material typography styles? (y/N)

ANIMATIONS

São as animações do Angular Material. Na utilização dos componentes do Angular Material, é importante aceitar o uso das animações para que tudo funcione na normalidade.

? Set up browser animations for Angular Material? (Y/n)

Respondendo a todas essas opções, a instalação se dará início e você já pode começar a visualizar a sua aplicação no navegador através da linha de comando:

ng serve

Bom é isso pessoal ... eu espero que esses esclarecimentos possam te auxiliar de alguma forma e qualquer coisa deixa um comentário.
Eu também adoraria ler comentários, orientações dos mais experientes pois já que estou iniciando em programação assim como em Angular, todo feedback e ajuda serão bem vindos 😊❤️

Algumas referências utilizadas:

Forem: Fernanda Gonçalves

Acessibilidade e UX no Alinhamento de textos em sites

Entendendo o cenário

Os problemas do texto justificado

O impacto negativo na experiência do usuário (UX)

Uma solução simples

Conclusão

Como usar CSS interno, inline e externo no HTML

1. ESTILOS DE CSS INTERNO

2. ESTILOS DE CSS INLINE

3. ESTILOS DE CSS EXTERNO

You are running `create-react-app` 4.0.3, which is behind the latest release (5.0.0)

PASSO 1

PASSO 2

PASSO 3

A solução completa passo a passo ficou assim:

Entendendo melhor algumas funcionalidades antes de criar seu primeiro projeto em Angular

1. PRIMEIROS PASSOS:

Instalar o Node

Instalar o gerenciador de pacotes npm

Instalar o Angular CLI

Versão do Node

Gerenciador de Pacotes

Angular CLI

2. CRIANDO UM NOVO PROJETO

STRICT MODE

ROTAS E ESTILOS

3. INSTALAÇÃO DO ANGULAR MATERIAL

TEMA

TYPOGRAPHY

ANIMATIONS

Algumas referências utilizadas:

Node

Angular CLI

Strict Mode

Rotas

Angular Material

Angular Material - Componentes e CDK

Angular Material - Tipografia