8.4 KiB

Raw Blame History

Estilize a Sua Aplicação Bancária com CSS Moderno

Visão Geral do Projeto

Transforme a sua aplicação bancária funcional numa aplicação web visualmente apelativa e com aparência profissional, utilizando técnicas modernas de CSS. Vai criar um sistema de design coeso que melhora a experiência do utilizador, mantendo os princípios de acessibilidade e design responsivo.

Este exercício desafia-o a aplicar padrões contemporâneos de design web, implementar uma identidade visual consistente e criar uma interface que os utilizadores achem tanto atraente como intuitiva para navegar.

Instruções

Passo 1: Configure a Sua Folha de Estilos

Crie a sua base CSS:

Crie um novo ficheiro chamado styles.css na raiz do seu projeto
Ligue a folha de estilos no seu ficheiro index.html:
```
<link rel="stylesheet" href="styles.css">
```

Comece com reset CSS e predefinições modernas:

/* Modern CSS reset and base styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  line-height: 1.6;
  color: #333;
}

Passo 2: Requisitos do Sistema de Design

Implemente estes elementos essenciais de design:

Paleta de Cores

Cor primária: Escolha uma cor profissional para botões e realces
Cor secundária: Cor complementar para acentos e ações secundárias
Cores neutras: Cinzentos para texto, bordas e fundos
Cores de sucesso/erro: Verde para estados de sucesso, vermelho para erros

Tipografia

Hierarquia de títulos: Distinção clara entre elementos H1, H2, e H3
Texto corpo: Tamanho de fonte legível (mínimo 16px) e altura de linha adequada
Etiquetas de formulário: Estilo de texto claro e acessível

Layout e Espaçamento

Espaçamento consistente: Use uma escala de espaçamento (8px, 16px, 24px, 32px)
Sistema de grelha: Layout organizado para formulários e secções de conteúdo
Design responsivo: Abordagem mobile-first com pontos de interrupção

Passo 3: Estilização dos Componentes

Estilize estes componentes específicos:

Formulários

Campos de entrada: Bordas profissionais, estados de foco e estilos de validação
Botões: Efeitos de hover, estados desabilitados e indicadores de carregamento
Etiquetas: Posicionamento claro e indicadores de campos obrigatórios
Mensagens de erro: Estilos visíveis para erros e mensagens úteis

Navegação

Cabeçalho: Área de navegação limpa e com branding
Links: Estados de hover claros e indicadores ativos
Logotipo/Título: Elemento de branding distintivo

Áreas de Conteúdo

Secções: Separação visual clara entre diferentes áreas
Cartões: Se usar layouts baseados em cartões, inclua sombras e bordas
Fundos: Utilização apropriada de espaço branco e fundos subtis

Passo 4: Funcionalidades Avançadas (Opcional)

Considere implementar estas funcionalidades avançadas:

Modo escuro: Alternância entre temas claro e escuro
Animações: Transições subtis e micro-interações
Estados de carregamento: Feedback visual durante submissão de formulários
Imagens responsivas: Imagens otimizadas para diferentes tamanhos de ecrã

Inspiração para o Design

Características de uma aplicação bancária moderna:

Design limpo e minimalista com bastante espaço branco
Esquemas de cores profissionais (azuis, verdes, ou neutros sofisticados)
Hierarquia visual clara com botões de chamada à ação proeminentes
Contrastes acessíveis que cumprem as diretrizes WCAG
Layouts responsivos para dispositivos móveis que funcionam em todos os dispositivos

Requisitos Técnicos

Organização do CSS

/* 1. CSS Custom Properties (Variables) */
:root {
  --primary-color: #007bff;
  --secondary-color: #6c757d;
  /* Add more variables */
}

/* 2. Base Styles */
/* Reset, typography, general elements */

/* 3. Layout */
/* Grid, flexbox, positioning */

/* 4. Components */
/* Forms, buttons, cards */

/* 5. Utilities */
/* Helper classes, responsive utilities */

/* 6. Media Queries */
/* Responsive breakpoints */

Requisitos de Acessibilidade

Contraste de cores: Assegurar pelo menos uma relação de 4.5:1 para texto normal
Indicadores de foco: Estados de foco visíveis para navegação por teclado
Etiquetas de formulário: Associadas corretamente aos campos
Design responsivo: Usável em ecrãs desde 320px até 1920px de largura

Rubrica de Avaliação

Critério	Exemplar (A)	Competente (B)	Em Desenvolvimento (C)	Necessita Melhorias (F)
Sistema de Design	Implementa sistema de design completo com cores, tipografia e espaçamento consistentes	Usa estilo consistente com padrões claros de design e boa hierarquia visual	Estilo básico aplicado com algumas inconsistências ou elementos de design em falta	Estilo mínimo com escolhas inconsistentes ou conflitantes de design
Experiência do Utilizador	Cria interface intuitiva e profissional com excelente usabilidade e apelo visual	Proporciona boa experiência com navegação clara e conteúdo legível	Usabilidade básica com algumas melhorias UX necessárias	Usabilidade deficiente, difícil de navegar ou ler
Implementação Técnica	Usa técnicas modernas de CSS, código organizado e segue as melhores práticas	Implementa CSS eficazmente com boa organização e técnicas apropriadas	CSS funciona corretamente, mas pode faltar organização ou abordagens modernas	Implementação CSS pobre com problemas técnicos ou de compatibilidade entre navegadores
Design Responsivo	Design totalmente responsivo que funciona perfeitamente em todos os tamanhos de dispositivo	Bom comportamento responsivo com pequenas questões em alguns tamanhos de ecrã	Implementação responsiva básica com algumas falhas de layout	Não responsivo ou problemas significativos em dispositivos móveis
Acessibilidade	Cumpre as diretrizes WCAG com excelente navegação por teclado e suporte a leitores de ecrã	Boas práticas de acessibilidade com contraste e indicadores de foco adequados	Considerações básicas de acessibilidade com alguns elementos em falta	Má acessibilidade, difícil para utilizadores com deficiências

Orientações para Entrega

Inclua na sua submissão:

styles.css: A sua folha de estilos completa
HTML atualizado: Quaisquer modificações feitas no HTML
Capturas de ecrã: Imagens que mostram o seu design no desktop e no telemóvel
README: Breve descrição das escolhas de design e paleta de cores

Pontos bónus para:

Propriedades customizadas CSS para tematização sustentável
Funcionalidades CSS avançadas como Grid, Flexbox ou animações CSS
Considerações de desempenho como CSS otimizado e tamanho mínimo de ficheiro
Testes cross-browser garantindo compatibilidade entre diferentes navegadores

💡 Dica Profissional: Comece por desenhar para telemóveis primeiro e depois melhore para ecrãs maiores. Esta abordagem mobile-first assegura que a sua aplicação funciona bem em todos os dispositivos e segue as melhores práticas atuais de desenvolvimento web.

Aviso Legal:
Este documento foi traduzido utilizando o serviço de tradução por IA Co-op Translator. Embora nos esforcemos por garantir a precisão, por favor esteja ciente de que traduções automáticas podem conter erros ou imprecisões. O documento original na sua língua nativa deve ser considerado como a fonte oficial. Para informações críticas, recomenda-se a tradução profissional humana. Não nos responsabilizamos por quaisquer mal-entendidos ou interpretações incorretas decorrentes do uso desta tradução.

8.4 KiB Raw Blame History