You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
144 lines
7.4 KiB
144 lines
7.4 KiB
<!--
|
|
CO_OP_TRANSLATOR_METADATA:
|
|
{
|
|
"original_hash": "b6897c02603d0045dd6d8256e8714baa",
|
|
"translation_date": "2025-10-22T23:18:09+00:00",
|
|
"source_file": "5-browser-extension/1-about-browsers/assignment.md",
|
|
"language_code": "br"
|
|
}
|
|
-->
|
|
# Tarefa: Redefina o Estilo da Sua Extensão de Navegador
|
|
|
|
## Visão Geral
|
|
|
|
Agora que você construiu a estrutura HTML para sua extensão de navegador sobre pegada de carbono, é hora de torná-la visualmente atraente e fácil de usar. Um bom design melhora a experiência do usuário e torna sua extensão mais profissional e envolvente.
|
|
|
|
Sua extensão já possui um estilo básico em CSS, mas esta tarefa desafia você a criar uma identidade visual única que reflita seu estilo pessoal, mantendo uma excelente usabilidade.
|
|
|
|
## Instruções
|
|
|
|
### Parte 1: Analise o Design Atual
|
|
|
|
Antes de fazer alterações, examine a estrutura atual do CSS:
|
|
|
|
1. **Localize** os arquivos CSS no projeto da sua extensão
|
|
2. **Revise** a abordagem de estilo e esquema de cores atual
|
|
3. **Identifique** áreas que podem ser melhoradas em layout, tipografia e hierarquia visual
|
|
4. **Considere** como o design apoia os objetivos do usuário (preenchimento fácil de formulários e exibição clara de dados)
|
|
|
|
### Parte 2: Crie Seu Estilo Personalizado
|
|
|
|
Desenvolva um design visual coeso que inclua:
|
|
|
|
**Esquema de Cores:**
|
|
- Escolha uma paleta de cores primária que reflita temas ambientais
|
|
- Garanta contraste suficiente para acessibilidade (use ferramentas como o verificador de contraste do WebAIM)
|
|
- Considere como as cores aparecerão em diferentes temas de navegador
|
|
|
|
**Tipografia:**
|
|
- Selecione fontes legíveis que funcionem bem em tamanhos pequenos de extensão
|
|
- Estabeleça uma hierarquia clara com tamanhos e pesos de fonte apropriados
|
|
- Certifique-se de que o texto permaneça legível em temas claros e escuros de navegador
|
|
|
|
**Layout e Espaçamento:**
|
|
- Melhore a organização visual dos elementos do formulário e exibição de dados
|
|
- Adicione espaçamento e margens adequados para melhor legibilidade
|
|
- Considere princípios de design responsivo para diferentes tamanhos de tela
|
|
|
|
### Parte 3: Implemente Seu Design
|
|
|
|
Modifique os arquivos CSS para implementar seu design:
|
|
|
|
```css
|
|
/* Example starting points for customization */
|
|
|
|
.form-data {
|
|
/* Style the configuration form */
|
|
background: /* your choice */;
|
|
padding: /* your spacing */;
|
|
border-radius: /* your preference */;
|
|
}
|
|
|
|
.result-container {
|
|
/* Style the data display area */
|
|
background: /* complementary color */;
|
|
border: /* your border style */;
|
|
margin: /* your spacing */;
|
|
}
|
|
|
|
/* Add your custom styles here */
|
|
```
|
|
|
|
**Áreas principais para estilizar:**
|
|
- **Elementos do formulário**: Campos de entrada, rótulos e botão de envio
|
|
- **Exibição de resultados**: Contêiner de dados, estilo de texto e estados de carregamento
|
|
- **Elementos interativos**: Efeitos de hover, estados de botão e transições
|
|
- **Layout geral**: Espaçamento dos contêineres, cores de fundo e hierarquia visual
|
|
|
|
### Parte 4: Teste e Aperfeiçoe
|
|
|
|
1. **Compile** sua extensão com `npm run build`
|
|
2. **Carregue** a extensão atualizada no seu navegador
|
|
3. **Teste** todos os estados visuais (entrada no formulário, carregamento, exibição de resultados, erros)
|
|
4. **Verifique** a acessibilidade com as ferramentas de desenvolvedor do navegador
|
|
5. **Aperfeiçoe** seus estilos com base no uso real
|
|
|
|
## Desafios Criativos
|
|
|
|
### Nível Básico
|
|
- Atualize cores e fontes para criar um tema coeso
|
|
- Melhore o espaçamento e alinhamento em toda a interface
|
|
- Adicione efeitos sutis de hover aos elementos interativos
|
|
|
|
### Nível Intermediário
|
|
- Crie ícones ou gráficos personalizados para sua extensão
|
|
- Implemente transições suaves entre diferentes estados
|
|
- Desenvolva uma animação única de carregamento para chamadas de API
|
|
|
|
### Nível Avançado
|
|
- Projete opções de múltiplos temas (claro/escuro/alto contraste)
|
|
- Implemente design responsivo para diferentes tamanhos de janela do navegador
|
|
- Adicione microinterações que melhorem a experiência do usuário
|
|
|
|
## Diretrizes de Envio
|
|
|
|
Sua tarefa concluída deve incluir:
|
|
|
|
- **Arquivos CSS modificados** com seu estilo personalizado
|
|
- **Capturas de tela** mostrando sua extensão em diferentes estados (formulário, carregamento, resultados)
|
|
- **Descrição breve** (2-3 frases) explicando suas escolhas de design e como elas melhoram a experiência do usuário
|
|
|
|
## Rubrica de Avaliação
|
|
|
|
| Critério | Exemplar (4) | Proficiente (3) | Em Desenvolvimento (2) | Inicial (1) |
|
|
|----------|---------------|-----------------|--------------------------|-------------|
|
|
| **Design Visual** | Design criativo e coeso que melhora a usabilidade e reflete fortes princípios de design | Boas escolhas de design com estilo consistente e hierarquia visual clara | Melhorias básicas no design com alguns problemas de consistência | Alterações mínimas de estilo ou design inconsistente |
|
|
| **Funcionalidade** | Todos os estilos funcionam perfeitamente em diferentes estados e ambientes de navegador | Estilos funcionam bem com pequenos problemas em casos extremos | A maioria dos estilos funciona com alguns problemas de exibição | Problemas significativos de estilo que impactam a usabilidade |
|
|
| **Qualidade do Código** | CSS limpo e bem organizado com nomes de classes significativos e seletores eficientes | Boa estrutura de CSS com uso apropriado de seletores e propriedades | CSS aceitável com alguns problemas de organização | Estrutura de CSS ruim ou estilo excessivamente complexo |
|
|
| **Acessibilidade** | Excelente contraste de cores, fontes legíveis e consideração para usuários com deficiência | Boas práticas de acessibilidade com pequenas áreas para melhoria | Considerações básicas de acessibilidade com alguns problemas | Atenção limitada aos requisitos de acessibilidade |
|
|
|
|
## Dicas para Sucesso
|
|
|
|
> 💡 **Dica de Design**: Comece com mudanças sutis e evolua para estilos mais dramáticos. Pequenas melhorias em tipografia e espaçamento frequentemente têm grandes impactos na percepção de qualidade.
|
|
|
|
**Melhores práticas a seguir:**
|
|
- **Teste** sua extensão em temas claros e escuros de navegador
|
|
- **Use** unidades relativas (em, rem) para melhor escalabilidade
|
|
- **Mantenha** espaçamento consistente usando propriedades personalizadas de CSS
|
|
- **Considere** como seu design será visto por usuários com diferentes necessidades visuais
|
|
- **Valide** seu CSS para garantir que segue a sintaxe correta
|
|
|
|
> ⚠️ **Erro Comum**: Não sacrifique a usabilidade pela aparência visual. Sua extensão deve ser bonita e funcional.
|
|
|
|
**Lembre-se de:**
|
|
- **Manter** informações importantes facilmente legíveis
|
|
- **Garantir** que botões e elementos interativos sejam fáceis de clicar
|
|
- **Preservar** feedback visual claro para ações do usuário
|
|
- **Testar** seu design com dados reais, não apenas texto de espaço reservado
|
|
|
|
Boa sorte na criação de uma extensão de navegador que seja funcional e visualmente impressionante!
|
|
|
|
---
|
|
|
|
**Aviso Legal**:
|
|
Este documento foi traduzido utilizando o serviço de tradução por IA [Co-op Translator](https://github.com/Azure/co-op-translator). Embora nos esforcemos para garantir a precisão, esteja ciente de que traduções automáticas podem conter erros ou imprecisões. O documento original em seu idioma nativo deve ser considerado a fonte autoritativa. 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. |