Ajuda

Páginas do site

Funcionalidades

Arquivos de código

• css/estilo.css – identidade visual e recursos de acessibilidade.
• js/app.js – funções comuns a todas as páginas.
• js/precos.js – tabela de preços compartilhada.
• js/formularios.js – máscaras, validações e mensagens acessíveis.
• js/cadastro.js – formulário de cliente e pet.
• js/agendamento.js – calendário, horários e contagem regressiva.
• js/produtos.js – busca, ordenação e simulador de serviços.
• vendor/bootstrap/ – Bootstrap 5.3.3 hospedado no próprio site.

Ajustes realizados da Fase 1 para a Fase 2

1. Estilização: as páginas, que antes usavam apenas a aparência padrão do navegador, passaram a usar Bootstrap 5.3 e uma folha de estilo própria com a paleta da marca.
2. Estrutura de arquivos: o código foi separado em css/, js/ e vendor/, com comentários explicativos em cada arquivo.
3. Navegação: a lista simples de links virou um menu responsivo com submenu de produtos e botão de destaque para o agendamento.
4. Página inicial: ganhou carrossel de imagens, cartões de destaque e o passo a passo do agendamento.
5. Novas páginas: foram criadas Cadastro e Agendamento.
6. Formulário de contato: o formulário estático da Fase 1 recebeu validação, máscaras e mensagens de confirmação.
7. Imagens: os textos alternativos foram reescritos com audiodescrição detalhada, e não apenas com o nome do produto.
8. Correções: foram padronizados os títulos das páginas, a hierarquia de cabeçalhos (um h1 por página) e os dados de contato fictícios em todas as páginas; também foi criada a página de erro 404 no novo layout.
9. Bootstrap local: os arquivos do Bootstrap foram copiados para o projeto, de modo que o site continua funcionando mesmo sem acesso a servidores externos.

Recursos de acessibilidade

O site foi adaptado para pessoas com deficiência visual e para quem navega apenas pelo teclado:

• Audiodescrição das imagens: todas as imagens têm o atributo alt descrevendo a cena, e não apenas o nome do arquivo.
• Alto contraste: botão na faixa superior que troca o site para fundo preto com texto amarelo; a escolha fica salva no navegador.
• Aumento de fonte: botões A+ e A- que ampliam todo o texto em até 25%.
• Link "pular para o conteúdo": primeiro item alcançado pela tecla Tab, evitando repetir o menu em toda página.
• Regiões aria-live: mensagens de erro, confirmações e resultados de busca são anunciados por leitores de tela.
• Marcações semânticas: header, nav, main, section, aside e footer, com aria-label quando necessário.
• Formulários: todo campo tem label associado, campos obrigatórios sinalizados e mensagens de erro ligadas ao campo.
• Foco visível: contorno azul reforçado em links, botões e campos ao navegar pelo teclado.
• Tabelas: com caption e cabeçalhos marcados por scope.
• Menos animações: quando o sistema operacional pede redução de movimento, o carrossel para de girar sozinho.
• Idioma declarado: lang="pt-BR" em todas as páginas, para a pronúncia correta dos leitores de tela.

Créditos das imagens

As fotografias são de terceiros, obtidas no Wikimedia Commons e no Flickr sob licenças Creative Commons ou em domínio público. O logotipo em SVG foi criado pelo autor do site.

Política de privacidade

Este site é um trabalho acadêmico e não possui servidor: os dados digitados nos formulários de cadastro e de agendamento ficam gravados apenas no armazenamento local do seu próprio navegador (localStorage) e podem ser apagados a qualquer momento limpando os dados do site. Nenhuma informação é enviada para terceiros. Empresa, endereço, CNPJ, telefones e preços são fictícios.