ANÁLISE E DESENVOLVIMENTO DE SISTEMAS
PORTFÓLIO – RELATÓRIO DE AULA PRÁTICA
PROGRAMAÇÃO WEB
ANNA JÚLIA SANTOS REZENDE
RA 3591117507
LAGOA DA PRTA / MG
2026
ANNA JÚLIA SANTOS REZENDE
PORTFÓLIO – RELATÓRIO DE AULA PRÁTICA
PROGRAMAÇÃO WEB
Trabalho textual apresentado como requisito parcial para
a obtenção de média semestral.
Orientador: Renan Cleverson Laureano Flor da Rosa
LAGOA DA PRATA MG
2026
SUMÁRIO
1 INTRODUÇÃO......................................................................................................3
2 DESENVOLVIMENTO..........................................................................................4
3 MÉTODOS........................................................................................................... 7
4 RESULTADOS......................................................................................................9
5 CONCLUÇÃO......................................................................................................11
3
1 INTRODUÇÃO
A astrologia é uma tradição antiga que desperta interesse em muitas pessoas
ao redor do globo. Cada signo do zodíaco possui traços próprios e pode fornecer
informações sobre a personalidade, os relacionamentos e até possíveis
acontecimentos futuros. Nesta atividade, você vai criar uma página web interativa
que permite ao usuário descobrir seu signo zodiacal a partir da sua data de
nascimento.
A página inicial terá um formulário simples, onde o usuário poderá inserir sua
data de nascimento e, ao clicar em um botão, será levado a uma nova página
contendo detalhes completos sobre o seu signo.
Para garantir que a apresentação seja atraente e adaptável a diferentes
dispositivos, utilizaremos o framework Bootstrap, além de desenvolver folhas de
estilo personalizadas que darão um estilo único ao layout.
Para começar, será necessário utilizar o Visual Studio Code (VSCode) como
editor de código e o XAMPP como servidor local para hospedar a aplicação. Esta
tarefa não apenas oferece uma prática valiosa em desenvolvimento web, mas
também possibilita explorar o fascinante mundo da astrologia de maneira interativa e
acessível. Vamos embarcar nessa jornada de aprendizado e autodescoberta!
4
2 DESENVOLVIMENTO
Na aula prática de hoje, meu objetivo é desenvolver uma aplicação web que
permita aos usuários descobrir qual é o seu signo do zodíaco com base na data de
nascimento. Vou seguir uma sequência de etapas para assegurar que tudo funcione
corretamente e que a experiência do usuário seja agradável.
Desenvolver a Página Front-end com Formulário
Primeiramente, decido criar a página inicial, que contará com um formulário.
Esse formulário terá um campo onde o usuário poderá informar sua data de
nascimento e um botão para consultar o signo correspondente. Para simplificar o
desenvolvimento, utilizo o Bootstrap, que auxilia na criação de um layout responsivo
e visualmente agradável. A estrutura básica do meu arquivo [Link] fica da
seguinte maneira:
Figura 1: [Link]
Construção da Página de Resultado
Depois de finalizar a página inicial, o próximo passo é desenvolver a página
responsável por exibir o retorno da pesquisa. O arquivo show_zodiac_signo.php
5
será o local onde o usuário visualizará qual é o seu signo após informar a data de
nascimento. A organização dessa página é direta e objetiva, com uma estrutura
básica de fácil entendimento.
Figura 2: show_zodiac_sign.php.
Implementação da Lógica para Leitura do Arquivo XML
O próximo passo é criar a lógica que fará a consulta a um arquivo XML, no
qual estarão armazenadas as informações referentes a cada signo. Para isso, será
desenvolvido o arquivo [Link] e, em seguida, no código JavaScript ([Link]),
será construída a função responsável por carregar esse XML e identificar o signo
correspondente, de acordo com a data de nascimento informada pelo usuário.
Abaixo segue um exemplo de como essa lógica pode ser implementada:
6
Figura 3: [Link].
7
3 MÉTODOS
Realizar os Testes da Aplicação
Finalmente, após concluir o desenvolvimento, chega o momento de validar o
funcionamento do sistema. Para isso, utilizo o XAMPP como servidor local. O projeto
deve ser colocado dentro da pasta htdocs, e em seguida é acessado pelo navegador
através do endereço [Link]
Figura 4: Xampp.
8
Figura 5. Teste port 80.
9
4 RESULTADO
Nesse estágio, faço testes com várias datas de nascimento para confirmar se
a aplicação identifica corretamente os signos e apresenta suas informações de
forma adequada.
Figura 6.
Figura 7: Digitar o Nascimento.
10
Figura 8: Resultado da pesquisa.
11
5 CONCLUÇÃO
Encerrando a atividade, sinto uma enorme satisfação por ter desenvolvido
uma aplicação web funcional, capaz de mostrar ao usuário o seu signo zodiacal.
Desde a criação do formulário inicial até a implementação da lógica de consulta ao
arquivo XML, cada passo representou uma oportunidade valiosa de aprendizado. O
contato direto com HTML, CSS e JavaScript, aliado ao uso do Bootstrap para
estilização, contribuiu significativamente para o aprimoramento das minhas
habilidades.
Além disso, o processo de testar a aplicação em ambiente local foi essencial
para compreender como todos os elementos se conectam. Foi muito gratificante ver
o sistema funcionando corretamente e oferecendo uma experiência dinâmica e
intuitiva. Essa prática aumentou ainda mais minha motivação para aplicar esse
conhecimento em novos projetos e aprofundar meus estudos em desenvolvimento
web.