Nome do projeto

AnaFisio

Integrante

• Luiz Eduardo Alves Feitosa

Descrição do caso escolhido

A AnaFisio é uma clínica de fisioterapia inaugurada recentemente e administrada pela fisioterapeuta Ana Luiza. O negócio oferece atendimento voltado à prevenção, tratamento e reabilitação de diferentes condições físicas.

O projeto consiste no desenvolvimento de um site para apresentar a clínica, seus serviços, informações sobre a profissional responsável, localização e formas de contato, facilitando o acesso de novos pacientes às informações essenciais.

Necessidade identificada

A clínica não possuía um site próprio, o que dificultava a divulgação dos serviços oferecidos e o acesso dos pacientes a informações importantes. A ausência de uma página institucional limitava a apresentação da profissional responsável. Dessa forma, surgiu a necessidade de desenvolver um site que reunisse essas informações de maneira organizada, acessível e profissional.

Público-alvo

O público-alvo do site é composto principalmente por pessoas que buscam tratamento para dores e limitações físicas, indivíduos interessados em melhorar sua saúde por meio de exercícios orientados e idosos que necessitam de acompanhamento fisioterapêutico. Esse público precisa encontrar informações claras sobre os serviços oferecidos, a profissional responsável, os benefícios dos tratamentos, a localização da clínica e as formas de contato para esclarecimento de dúvidas e agendamento de consultas.

Objetivo do site

O principal objetivo do site é apresentar a clínica AnaFisio e seus serviços de forma clara e organizada, facilitando o contato entre a fisioterapeuta e os pacientes. A meta é que o visitante consiga conhecer os tratamentos disponíveis, obter informações sobre a profissional responsável e realizar o agendamento de consultas.

Processo de desenvolvimento

O desenvolvimento do projeto começou com conversas com a fisioterapeuta responsável, para saber quais as necessidades. A partir dessas informações, foi definido o conteúdo que deveria estar presente no site, incluindo apresentação da clínica, serviços oferecidos, informações profissionais, localização e formas de contato.

Após o planejamento inicial, utilizando protótipos em WireFrames, foi criada a estrutura das páginas utilizando HTML, em seguida, a identidade visual foi desenvolvida com CSS. Durante o processo, foram realizados diversos ajustes de layout, organização dos conteúdos e adaptação para diferentes tamanhos de tela.

A versão inicial do projeto possuía uma estrutura mais simples e menos detalhada. Ao longo do desenvolvimento, foram adicionadas novas seções, melhorias visuais, recursos de acessibilidade, otimizações de responsividade e elementos de interatividade com JavaScript. O resultado final foi um site mais completo, organizado e adequado às necessidades da clínica e de seus pacientes.

Principais decisões do projeto

Durante o desenvolvimento do site, foram tomadas decisões com foco na organização das informações, experiência do usuário e boas práticas de desenvolvimento web.

Na estrutura HTML, foram utilizadas tags semânticas para organizar o conteúdo de forma mais clara e comentários para a divisão clara de seções, facilitando a manutenção do código.

Em relação ao design visual, foi adotada uma interface limpa, utilizando cores suaves e elementos visuais que transmitissem conforto. Esta decisão foi tomada depois de uma pesquisa comparando sites de diferentes áreas da saúde. Minhas palavras guia foram: praticidade e simplicidade.

A responsividade foi pensada durante todo o desenvolvimento, permitindo que o site se adaptasse adequadamente a diferentes tamanhos de telas. Foram utilizadas unidades flexíveis e media queries para garantir uma boa experiência em diferentes dispositivos.

Quanto à acessibilidade, foram adicionados textos alternativos em imagens e hierarquia adequada de títulos e elementos. Também foi buscado manter contraste adequado entre texto e fundo para facilitar a leitura. Além, é claro, da função de navegação por teclado.

Na parte de interatividade, foi implementado um sistema de perguntas frequentes com expansão e recolhimento de conteúdo por meio de JavaScript, permitindo que os usuários encontrem informações de forma mais organizada sem sobrecarregar visualmente a página.

Funcionalidade em JavaScript

A funcionalidade em JavaScript escolhida foi a de ocultar.

Essa funcionalidade permite que o usuário clique em uma pergunta para exibir ou ocultar sua respectiva resposta. O comportamento é controlado por eventos de clique, que adiciona ou remove a visibilidade do conteúdo.

A escolha dessa funcionalidade teve como objetivo melhorar a organização das informações, evitando que todas as respostas fossem exibidas simultaneamente. Assim, a página permanece mais limpa visualmente, facilitando a navegação e permitindo que os visitantes encontrem rapidamente as informações que desejam.

Uso de Bootstrap

O Bootstrap foi utilizado na barra de navegação do site. Foram aproveitadas classes prontas do framework, como nav, nav-pills, nav-fill, e gap, permitindo a criação de um menu de navegação organizado, responsivo e visualmente consistente.

A escolha desse elemento específico levou em consideração sua estrutura semântica. A navegação utilizada é baseada em elementos semânticos como nav, ul, li e a, diferentemente de outros componentes do Bootstrap, que usam elementos genéricos (divs) para substituir diversas tags sem necessidade.

Testes realizados

Durante o desenvolvimento do projeto, foram realizados testes para verificar o funcionamento correto dos principais recursos do site.

A responsividade foi testada utilizando diferentes larguras de tela por meio da ferramenta de inspeção do navegador, verificando a adaptação dos elementos em dispositivos móveis e computadores.

Os links internos e externos foram verificados individualmente para garantir o direcionamento correto entre as páginas do site e para os serviços externos, como WhatsApp, Instagram e Google Maps.

As imagens foram testadas para confirmar o carregamento adequado dos arquivos e a exibição correta em diferentes tamanhos de tela.

Em relação à acessibilidade básica, foram revisados aspectos como a utilização de títulos hierárquicos, textos alternativos em imagens e contraste entre texto e fundo.

A funcionalidade JavaScript da seção de perguntas frequentes foi testada para garantir a abertura e o fechamento correto das respostas após a interação do usuário.

Por fim, após a publicação do projeto, foram realizados testes de navegação na versão online para verificar o funcionamento geral do site, incluindo páginas, imagens, links e recursos interativos.

Melhorias Futuras

• Sistema de agendamento online;
• Blog com artigos sobre fisioterapia;
• Formulário de contato funcional;
• Integração com sistema de gestão de pacientes;
• Galeria de fotos da clínica;
• Seção com explicação mais aprofundada sobre os serviços;

Links

• Link do repositório: https://github.com/Luiz-dev-z/anafisio-pilates-e-fisioterapia
• Link do site publicado: https://luiz-dev-z.github.io/anafisio-pilates-e-fisioterapia/

Contribuição

• Luiz Eduardo Alves Feitosa Responsável por todas as etapas do projeto. Levantamento de requisitos junto à cliente, planejamento da estrutura do site, desenvolvimento em HTML, CSS e JavaScript, implementação da responsividade, aplicação de recursos de acessibilidade, utilização do Bootstrap, testes de funcionamento, publicação da página e elaboração da documentação do projeto.