Desenvolvimento de Website somente Front End

Contexto Geral do Projeto

1. Estrutura Geral do Projeto • Tecnologias principais: o HTML5 (estrutura de marcação), o Bootstrap 5 (layout e responsividade), o JavaScript (funcionalidades dinâmicas), o CSS3 (estilização). • Metodologia: Desenvolvimento mobile-first e 100% responsivo. • Acessibilidade: Seguir as recomendações de acessibilidade do Governo Federal. 2. Acessibilidade • Fontes: o Funções de ajuste de tamanho de fonte: Aumentar, Diminuir e Restaurar tamanho padrão. O Implementar controle por JavaScript com classes CSS para aumentar/diminuir o tamanho. O Plugins podem ser usados, mas implementar fallback caso algum plugin falhe. • Contraste: o Implementar alternância entre modo de alto contraste (inverter cores) e modo padrão, seguindo boas práticas para usuários com baixa visão. O Usar CSS para alterar cores e elementos visuais. • Libras: o Plugin VLibras para adicionar suporte de tradução em Libras. O O plugin será integrado via script no cabeçalho das páginas, disponível para todos os usuários. • Validação de Acessibilidade: o Realizar testes usando Ases Web e AccessMonitor para garantir que o site atende aos requisitos de acessibilidade. 3. Padrões e Validações • Padrão W3C: o O código html e css será validado usando a ferramenta do w3c (https://validator.w3.org/) para garantir conformidade com os padrões. • Semântica: o Utilizar tags HTML5 semânticas (<header>, <nav>, <main>, <article>, <footer>, etc.) Para estruturar o site de forma compreensível para leitores de tela e motores de busca. 4. Funcionalidades de Acessibilidade com Plugins • VLibras: Plugin oficial para interpretação em Libras. • Ajustes de Fontes e Contraste: o Buscar por plugins prontos como o utilizado no site de Camboriú ou, caso não disponível, implementar as funcionalidades manualmente com JavaScript/CSS. 5. Estilo e Temas • Mobile First: o Design focado inicialmente em dispositivos móveis, com media queries para telas maiores. • Cores Customizáveis: o Criar múltiplos arquivos de estilos para permitir a fácil troca de paleta de cores (ex: blue.css, green.css). O Por padrão, criar duas paletas: uma com predominância de azul e outra verde, conforme solicitado. O As cores devem ser definidas no CSS como variáveis, o que permite uma fácil customização. 6. Estrutura de Arquivos • Views (Blade Templates): o layouts/app.blade.php: Layout principal. O partials/navbar.blade.php: Barra de navegação. O partials/footer.blade.php: Rodapé. O partials/accessibility.blade.php: Controles de acessibilidade (ajuste de fonte, contraste, VLibras). • CSS: o css/blue.css: Tema azul. O css/green.css: Tema verde. O css/accessibility.css: Estilos específicos de acessibilidade. • JS: o js/accessibility.js: Lógica para ajuste de fonte, contraste e outros controles. 7. Design Inspiracional • Usar os sites indicados como inspiração para o design: o https://www.pmf.sc.gov.br/: Layout limpo e organizado. O https://www.bc.sc.gov.br/: Uso adequado de cores e contraste. O https://prefeitura.poa.br/: Foco na navegação fácil e responsiva. O https://www.altotaquari.mt.gov.br/ https://www.pantanogrande.rs.gov.br/ 8. Testes e Validação • Cross-Browser Testing: Testar o site em navegadores como Chrome, Firefox, Safari, e Edge. • Validação W3C: Validar html e css usando https://validator.w3.org/. • Validação de Acessibilidade: o Testar em https://asesweb.governoeletronico.gov.br/. O Testar em https://accessmonitor.acessibilidade.gov.pt/. 9. Deploy e Manutenção • Manutenção de acessibilidade: Manter os testes de acessibilidade sempre atualizados para garantir conformidade com novas diretrizes

Categoria TI e Programação
Subcategoria Web Design
Qual é o alcance do projeto? Alteração média
Isso é um projeto ou uma posição de trabalho? Um projeto
Tenho, atualmente Eu tenho especificações
Disponibilidade requerida Conforme necessário
Integrações de API Mídias sociais (Facebook, Twitter, etc)
Necesidad específica Desenvolver um mockup

Prazo de Entrega: 18 de Dezembro de 2024

Habilidades necessárias