[Dúvida] Estilizações

Oi Uiratan, tudo bem?

Desculpe a demora em retornar.

Obrigada por compartilhar suas dúvidas sobre estilização e Front-end. Vamos lá!

1) Existem várias bibliotecas de estilização disponíveis atualmente, além dos styled components e do Bootstrap. Algumas opções populares são:

• Material UI: é uma biblioteca de componentes de UI que implementa o Material Design, criado pelo Google. Ela oferece um conjunto completo de componentes para React, incluindo botões, formulários, tabelas, menus, ícones, entre outros.

• Tailwind CSS: é uma biblioteca de classes CSS utilitárias que podem ser combinadas para criar estilos personalizados. Ela oferece uma abordagem mais pragmática e flexível para estilização, permitindo criar layouts complexos de forma mais rápida e intuitiva.

• Semantic UI: é outra biblioteca de componentes de UI que oferece um conjunto abrangente de elementos para React. Ela se destaca pela sua semântica clara e pela facilidade de uso.

• Ant Design: é uma biblioteca de componentes de UI com foco em design e usabilidade. Ela oferece uma grande variedade de elementos, incluindo botões, formulários, tabelas, gráficos, entre outros.

A escolha de uma biblioteca de estilização depende muito do contexto do projeto e das preferências pessoais. O importante é escolher uma biblioteca que facilite a criação de estilos consistentes e escaláveis.

2) Quando se trata de CRUDs, existem várias abordagens possíveis para a apresentação de formulários e listagens. Algumas boas práticas incluem:

• Dividir a tela em seções claras para cada funcionalidade, por exemplo, uma seção para listagem e outra para formulários.

• Usar abas ou menus para alternar entre diferentes funcionalidades, como listar, adicionar e editar registros.

• Utilizar modais ou pop-ups para apresentar formulários de edição e criação, ao invés de abrir uma nova página.

• Permitir a edição direta dos dados na listagem, sem precisar abrir um formulário separado.

• Utilizar filtros e ordenação para facilitar a navegação e a busca de registros.

3) Para sistemas comerciais que trabalham com CRUDs e regras de negócio, é importante ter uma abordagem cuidadosa na organização das apresentações no Front-end. Algumas boas práticas incluem:

• Utilizar um design sistemático para garantir consistência visual em todas as páginas e elementos.

• Priorizar a clareza e a usabilidade, evitando elementos desnecessários e complexidade excessiva.

• Garantir que os elementos de interação (botões, links, etc) sejam facilmente acessíveis e intuitivos.

• Separar as funcionalidades em módulos ou páginas separadas para facilitar a manutenção e a escalabilidade.

• Garantir que as validações e as regras de negócio sejam implementadas corretamente no Front-end, para evitar problemas de integridade de dados.

• Utilizar testes automatizados para garantir a qualidade e a estabilidade do sistema.

Espero que tenha te ajudado.

Um abraço e bons estudos.

Oi Lorena, tudo tranquilo?

Muito obrigado, clareou bastante sobre o assunto.

Do item 1 já encontrei de Tailwind CSS (https://cursos.alura.com.br/course/tailwind-css-estilizando-pagina-classes-utilitarias), poderia informar mais cursos/formações sobre as outras opções que voce indicou?

Agora sobre os itens 2 e 3, ainda não sei exatamente sobre quais assuntos/cursos/formações pesquisar para cobrir estas questões de boas práticas, etc.

Novamente, agradeço a atenção.

Oi Uiratan, tudo certo por aqui :D

Estamos no processo de criação e atualização dos curso, então não vamos ter todos os cursos sobre os assuntos que cê deseja, por enquanto!

Mas temos esse curso de Tailwind que você encontrou e mais esse de React com TailwindCSS: estilizando componentes, que acredito que vai ser muito bom de fazer depois que você fizer esse de CSS pois já vai estar familiarizado.

Não sei qual o seu nível de conhecimento em React então eu indico que você faça as formações, pois elas são pensadas para que a dificuldade vá subindo gradativamente.

• Explore React com JavaScript - Nessa formação tem a introdução ao React e vai conhecer sobre suas boas práticas, hooks, lidar com arquivos estáticos, gerenciamento de estados etc.

• Gerencie aplicações React com Typescript - Nessa formação você verá sobre testes, react router, integrar o React com APIS.

• Caso você não conheça sobre TypeScript, indico que faça a formação , assim você consegue entender o motivo de usarmos o TypeScript.

• E depois que você aprende um pouco sobre integrar o React com APIs, temos essa formação focada nisso.

• E para se aprofundar mais em testes, temos a formação Melhore sua aplicação React com testes automatizados, que está em pré-lançamento mas já tem dois cursos nela.

Bom, é muita coisa para estudar e ver. Sugiro que faça por etapas e não pule, porque mais pra frente o assunto pode voltar e você não vai entender. Muitos pulam a etapa de estudar o TypeScript e ficam perdidos quando ele aparece.

Um abraço e bons estudos.

Oi Lorena,

Então, to juntando as peças hehe. Muito obrigado pela indicação das trilhas das tecnologias. Especificamente sobre este item eu já tenho algumas trilhas montadas para seguir, o foco principal vai ser Angular, mas pretendo dar umas olhada em React e outros tb. Inclusive oq me fez voltar a estudar isso foi o TypeScript, como sou Javeiro ele me ganhou.

Sobre estes assuntos que você listou dos itens 2 (boas práticas sobre Dividir a tela em seções claras para cada funcionalidade, Usar abas ou menus para alternar entre diferentes funcionalidades, etc) e 3 (design sistemático para garantir consistência visual, clareza e a usabilidade, validações e as regras de negócio sejam implementadas corretamente no Front-end, etc), queria entender como encontrar estes materiais por aí: quais são estes assuntos que tratam destas boas práticas? Por ex, sobre design de codigo eu tenho o clean code, solid.. para resolver alguns problemas rotineiros com OO eu tenho design patterns, etc..

Novamente mto obg, abraço!

Ah se o foco vai ser Angular, indico essa formação, onde você vai:

• Compreender os conceitos de arquitetura do framework
• Desenvolver o seu primeiro CRUD (Criar, Ler, Atualizar e Deletar) usando o Angular
• Evoluir a aplicação com novas funcionalidades e refatoração de código
• Trabalhar com formulários orientados a templates, uso de diretivas e comunicação entre componentes
• Programar de forma reativa utilizando a biblioteca RxJS

Acredito que tem bastante do que você procura nessa formação. Fora da plataforma, acredito que você possa buscar por livros e artigos especializados em design de interfaces de usuário, como "Design de Interfaces com o Usuário" de Ben Shneiderman ou "Design de Interação" de Dan Saffer.

Aprenda sobre padrões de design de interfaces, como Material Design do Google e Bootstrap, que podem ser aplicados na construção de CRUDs.

Para aprender mais sobre a organização de apresentações de sistemas comerciais que trabalham com CRUDs e regras de negócio, e sobre a importância de um design sistemático e consistente no front-end, você pode seguir os seguintes passos:

Aprenda sobre o design sistemático e a criação de padrões visuais, utilizando ferramentas como Figma.

Estude sobre o processo de design thinking e a importância de compreender as necessidades dos usuários para criar interfaces intuitivas e eficientes.

Aprenda sobre o conceito de design responsivo e a importância de criar interfaces que funcionem bem em diferentes tamanhos de tela, o curso de HTML e CSS: responsividade com mobile-first pode ajudar com isso.

Bom é isso. Espero que te ajude.

Lorena, excelente.

Peguei a palavras-chave: Design, de interfaces, thinking e interação. UX e UI.

Muito obrigado, transforma suas dicas ai num artigo e já deixa salvo pra quem ta vindo do back querendo juntar tudo com front, creio que ajudará muita gente.

Sucesso!