UNOPAR – ANHANGUERA – SÃO PAULO
PORTFÓLIO – RELATÓRIO DE AULA PRÁTICA
NOME DA DISCIPLINA – PROGRAMAÇÃO WEB
SÃO PAULO / SP
2025
1
ALUNO:
FERNANDO MARCELINO
PORTFÓLIO – RELATÓRIO DE AULA PRÁTICA
NOME DA DISCIPLINA – PROGRAMAÇÃO WEB
Trabalho apresentado ao Curso (Engenharia de
Software) da UNOPAR – Anhanguera, para a disciplina
Programação Web.
Orientador: Prof. Elisa Antolli Paleari.
SÃO PAULO / SP
2025
2
Sumário
INTRODUÇÃO ............................................................................................................................... 4
DESENVOLVIMENTO. .................................................................................................................. 5
RESULTADOS. ............................................................................................................................ 12
CÓDIGO COMPLETO. ................................................................................................................. 14
CONCLUSÃO. ............................................................................................................................. 21
REFERÊNCIAS BIBLIOGRAFICAS ............................................................................................ 22
3
INTRODUÇÃO
A astrologia é uma prática antiga que fascina muitas pessoas ao redor do mundo.
Cada signo do zodíaco carrega características únicas e oferece insights sobre a
personalidade, relacionamentos e até mesmo o futuro. Nesta tarefa, você irá
desenvolver uma página web interativa que permite ao usuário descobrir seu signo
zodiacal com base na sua data de nascimento.
A página inicial contará com um formulário simples, onde o usuário poderá inserir
sua data de nascimento e, ao clicar em um botão, será redirecionado para uma
nova página repleta de informações sobre seu signo. Para garantir uma
apresentação atraente e responsiva, utilizaremos o framework Bootstrap, além de
criar folhas de estilo personalizadas que darão um toque único ao design.
Para começar, você precisará do Visual Studio Code (VSCode) como editor de
código e do XAMPP, que servirá como servidor local para hospedar sua aplicação.
Esta atividade não só proporcionará uma prática valiosa em desenvolvimento web,
mas também permitirá explorar o universo fascinante da astrologia de uma maneira
interativa e acessível. Vamos iniciar essa jornada de descoberta e aprendizado!
4
DESENVOLVIMENTO.
Na aula prática, meu objetivo é criar uma aplicação web que permita aos usuários
descobrir seu signo zodiacal a partir da data de nascimento.
Vou seguir uma série de passos para garantir que tudo funcione corretamente e
que a experiência do usuário seja agradável.
Definição dos objetivos da aula prática:
1. Criar uma página front-end com um formulário contendo um campo para
inserção da data de nascimento e um botão para realizar consulta de signo;
2. Desenvolver uma página front-end que contenha o resultado da consulta
ao signo zodiacal;
3. Desenvolver a lógica necessária para realizar a consulta a um arquivo
XML que contenha as informações de cada signo;
4. Desenvolver a estilização das páginas: formulário e resultado.
5. Testar a aplicação.
Para iniciarmos o processo de desenvolvimento do projeto, foi necessário fazer a
instalação dos softwares sugeridos pelo professor.
VS-code.
Xampp.
Após a instalação, foi preciso estruturar a pasta de arquivos de forma que o VScode
entenda quando for feita a execução do código. No diretório de instalação do
Xampp foi criado uma pasta chamada \Project\, onde será o caminho dos arquivos
do projeto.
Caminho do arquivo >> C:\xampp\htdocs\Project\
5
Para iniciar a montagem da estrutura de arquivos usaremos o VScode, com ele já
aberto teremos que localizar a pasta onde foi salva a raiz do projeto.
Para criar os arquivos de forma estruturada teremos que respeitar o local de cada
um deles.
6
Ainda com o VScode aberto, vamos criar, nomear e salvar os arquivos em seus
respectivos formatos respeitando a estrutura de pastas.
7
Caminho do arquivo >> C:\xampp\htdocs\Project\[Link]
1. No [Link], foi incluído o cabeçalho com:
<?php
$root = __DIR__;
include $root . '/layouts/[Link]';
?>
2. Em seguida, criei um formulário para entrada da data:
<form id="signo-form" method="POST" action="show_zodiac_sign.php">
<label for="data_nascimento" class="form-label">Data de nascimento</label>
<input type="date"
class="form-control mb-3"
id="data_nascimento"
name="data_nascimento"
required>
<button type="submit" class="btn btn-neon w-100">Descobrir</button>
</form>
Caminho do arquivo >> C:\xampp\htdocs\Project\show_zodiac_sign.php
1. Comecei incluindo o cabeçalho novamente:
<?php include 'layouts/[Link]'; ?>
<?php
2. Recebi a data do formulário com PHP:
$data_nascimento = $_POST['data_nascimento'] ?? '';
3. Carreguei o arquivo XML com os signos:
$signos = simplexml_load_file('[Link]') or die('Erro ao abrir XML.');
4. Converti a data para o formato correto:
$dtUser = DateTime::createFromFormat('Y-m-d', $data_nascimento);
5. Laço de verificação de signo correspondente:
foreach ($signos->signo as $signo) {
// dataInicio e dataFim vêm sem ano => acrescentamos o ano do usuário
$ano = $dtUser->format('Y');
$dtInicio = DateTime::createFromFormat('d/m/Y', $signo->dataInicio . "/$ano");
8
$dtFim = DateTime::createFromFormat('d/m/Y', $signo->dataFim . "/$ano");
// Se o período cruza o ano (ex.: Capricórnio)
if ($dtFim < $dtInicio) {
// caso 1: entre dataInicio e 31/12
$dtFimAno = DateTime::createFromFormat('d/m/Y', '31/12/' . $ano);
// caso 2: entre 01/01 e dataFim
$dtInicioAno = DateTime::createFromFormat('d/m/Y', '01/01/' . $ano);
if (($dtUser >= $dtInicio && $dtUser <= $dtFimAno) ||
($dtUser >= $dtInicioAno && $dtUser <= $dtFim)) {
$signoEncontrado = $signo;
break;
}
} else {
// período normal dentro do mesmo ano
if ($dtUser >= $dtInicio && $dtUser <= $dtFim) {
$signoEncontrado = $signo;
break;
}
}
}
Caminho do arquivo >> C:\xampp\htdocs\Project\[Link]
1. Foi feito a estrutura de arquivos:
<?xml version="1.0" encoding="UTF-8"?>
<signos>
<signo>
<dataInicio>21/03</dataInicio>
<dataFim>20/04</dataFim>
<signoNome>Áries</signoNome>
<descricao>Coragem, iniciativa e energia.</descricao>
</signo>
Obs: Utilizei a Wikipedia como referência para as datas e características:
[Link]
Caminho do arquivo >> C:\xampp\htdocs\Project\[Link]
1. Foi adicionado o Bootstrap no header:
<link href="[Link]
rel="stylesheet">
9
2. No [Link], apliquei um tema escuro com efeitos modernos, Nesse arquivo,
foram utilizadas variáveis CSS com a pseudo-classe :root para facilitar a
manutenção das cores e sombras do projeto, com destaque para tons
escuros e efeitos neon, como demonstrado abaixo:
:root {
--bg-main : #707099;
--panel : rgba(23, 24, 37, .65);
--neon : #3d4eec;
--neon-glow: 0 0 12px rgba(110, 207, 159, 0.6);
--txt-main: #f1f3ff;
--txt-muted: #dcdfec;
}
Essas variáveis foram aplicadas em toda a interface, destacando-se os seguintes
componentes:
🔸 .glass-card – Usada para o contêiner principal do formulário e do resultado.
Aplica um fundo semi-transparente, com bordas arredondadas e efeito de desfoque
no fundo (glassmorphism), além de sombras que simulam um brilho neon.
🔸 .title-neon – Utilizada no título principal da página. Aplica um tamanho de fonte
responsivo, peso elevado e text-shadow para criar um efeito luminoso ao redor do
texto, simulando letreiros em neon.
🔸 .btn-neon – Botão estilizado com fundo azul-neon, efeito de levitação ao passar
o mouse e sombra animada.
🔸 .resultado-signo – Caixa onde aparece o resultado da busca do signo. Utiliza
gradiente linear, bordas e sombra de neon para destacar o conteúdo apresentado
3. Alem disso, os campos do formulário receberam um visual moderno:
form .form-control {
background: rgba(255,255,255,.05);
border: 1px solid rgba(255,255,255,.12);
color: var(--txt-main);
}
A combinação do Bootstrap com o CSS customizado permitiu atingir um resultado
visual mais bonito, destacando-se do estilo tradicional e conferindo identidade
própria à aplicação.
10
Para rodar o projeto devemos iniciar o APACHE pelo painel de controle do
XAMPP.
E para acessar o navegador digitei o caminho: [Link]
Foi testado inserindo diferentes datas e conferindo se os signos retornados
estavam corretos.
Verifiquei o visual e o comportamento em diferentes resoluções de tela.
11
RESULTADOS.
Entrada da data de nascimento.
Saída / Retorno da solicitação.
12
Entrada da data de nascimento.
Saída / Retorno da solicitação.
13
CÓDIGO COMPLETO.
:root {
--bg-main : #707099;
--panel : rgba(23, 24, 37, .65);
--neon : #3d4eec;
--neon-glow: 0 0 12px rgba(110, 207, 159, 0.6);
--txt-main: #f1f3ff;
--txt-muted: #dcdfec;
}
html,body { background: var(--bg-main); color: var(--txt-main); }
body { font-family: 'Inter', 'Segoe UI', sans-serif; }
a { color: var(--neon); text-decoration: none; }
a:hover { text-shadow: var(--neon-glow); }
.glass-card {
background: var(--panel);
border: 1px solid rgba(34, 30, 30, 0.08);
backdrop-filter: blur(12px);
border-radius: 1.5rem;
box-shadow: 0 10px 30px rgba(0,0,0,.45), var(--neon-glow);
}
.title-neon {
font-size: clamp(2rem, 5vw, 3.2rem);
font-weight: 700;
letter-spacing: .06em;
text-align: center;
color: var(--neon);
text-shadow: var(--neon-glow);
}
form label { color: var(--txt-muted); font-size: .9rem; }
form .form-control {
background: rgba(255,255,255,.05);
border: 1px solid rgba(255,255,255,.12);
color: var(--txt-main);
}
form .form-control:focus {
border-color: var(--neon);
14
box-shadow: 0 0 0 .25rem rgba(111,125,255,.25);
}
.btn-neon {
background: var(--neon);
color: #fff;
border: none;
font-weight: 600;
transition: transform .15s ease, box-shadow .15s ease;
}
.btn-neon:hover {
transform: translateY(-2px);
box-shadow: 0 6px 18px rgba(111,125,255,.45), var(--neon-glow);
}
.resultado-signo {
background: linear-gradient(180deg,#646bff 0%,#1d1d58 100%);
border: 1px solid rgba(141, 83, 83, 0.1);
border-radius: 1.5rem;
box-shadow: 0 10px 30px rgba(0,0,0,.45), var(--neon-glow);
}
.resultado-signo h2 {
font-size: clamp(2.4rem, 6vw, 4rem);
letter-spacing: .12em;
text-transform: uppercase;
text-shadow: var(--neon-glow);
}
.resultado-signo p { color: var(--txt-muted); line-height: 1.6; }
footer {
color: var(--txt-muted);
font-size: .8rem;
border-top: 1px solid rgba(230, 28, 28, 0.06);
margin-top: auto;
padding: 1rem 0;
}
15
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="[Link]
rel="stylesheet">
<meta name="color-scheme" content="dark light">
<link rel="stylesheet" href="assets/css/[Link]">
<title>Descubra seu signo</title>
</head>
<body class="bg-body d-flex flex-column min-vh-100">
<?php
$root = __DIR__;
include $root . '/layouts/[Link]';
?>
<main class="container my-5">
<h1 class="title-neon mb-5">Descubra seu signo</h1>
<div class="row justify-content-center">
<div class="col-11 col-sm-8 col-md-6 col-lg-5 col-xl-4">
<div class="glass-card p-4">
<form id="signo-form" method="POST" action="show_zodiac_sign.php">
<label for="data_nascimento" class="form-label">Data de nascimento</label>
<input type="date"
class="form-control mb-3"
id="data_nascimento"
name="data_nascimento"
required>
16
<button type="submit" class="btn btn-neon w-100">Descobrir</button>
</form>
</div>
</div>
</div>
</main>
<footer class="mt-auto text-center py-3 small text-muted">
© <?= date('Y'); ?> – Portfólio Web
</footer>
</body>
</html>
<?php include 'layouts/[Link]'; ?>
<?php
/* ---------- lógica para descobrir o signo ---------- */
// Data vinda do formulário
$data_nascimento = $_POST['data_nascimento'] ?? '';
if (!$data_nascimento) {
echo '<div class="container my-5 text-center"><p class="text-danger">Data
inválida.</p></div>';
echo '<div class="text-center mb-5"><a href="[Link]" class="btn btn-
secondary">Voltar</a></div>';
exit('</body></html>');
}
// Converte para objeto DateTime
$dtUser = DateTime::createFromFormat('Y-m-d', $data_nascimento);
// Carrega XML
$signos = simplexml_load_file('[Link]') or die('Erro ao abrir XML.');
$signoEncontrado = null;
foreach ($signos->signo as $signo) {
// dataInicio e dataFim vêm sem ano => acrescentamos o ano do usuário
$ano = $dtUser->format('Y');
$dtInicio = DateTime::createFromFormat('d/m/Y', $signo->dataInicio . "/$ano");
17
$dtFim = DateTime::createFromFormat('d/m/Y', $signo->dataFim . "/$ano");
// Se o período cruza o ano (ex.: Capricórnio)
if ($dtFim < $dtInicio) {
// caso 1: entre dataInicio e 31/12
$dtFimAno = DateTime::createFromFormat('d/m/Y', '31/12/' . $ano);
// caso 2: entre 01/01 e dataFim
$dtInicioAno = DateTime::createFromFormat('d/m/Y', '01/01/' . $ano);
if (($dtUser >= $dtInicio && $dtUser <= $dtFimAno) ||
($dtUser >= $dtInicioAno && $dtUser <= $dtFim)) {
$signoEncontrado = $signo;
break;
}
} else {
// período normal dentro do mesmo ano
if ($dtUser >= $dtInicio && $dtUser <= $dtFim) {
$signoEncontrado = $signo;
break;
}
}
}
?>
<main class="container my-5">
<?php if ($signoEncontrado): ?>
<div class="resultado-signo text-center text-white rounded-3 mx-auto shadow-lg overflow-
hidden">
<div class="p-5">
<h2 class="display-4 fw-semibold mb-4"><?= $signoEncontrado->signoNome ?></h2>
<p class="lead"><?= $signoEncontrado->descricao ?></p>
<p class="mt-4 small fst-italic">Período: <?= $signoEncontrado->dataInicio ?> – <?=
$signoEncontrado->dataFim ?></p>
</div>
</div>
<?php else: ?>
<p class="text-danger text-center">Não foi possível determinar o signo.</p>
<?php endif; ?>
<div class="text-center mt-4">
<a href="[Link]" class="btn btn-secondary">Voltar</a>
</div>
</main>
<footer class="mt-auto text-center py-3 small text-muted">
© <?php echo date('Y'); ?> – Portfólio Web
</footer>
</body>
</html>
18
<?xml version="1.0" encoding="UTF-8"?>
<signos>
<signo>
<dataInicio>21/03</dataInicio>
<dataFim>20/04</dataFim>
<signoNome>Áries</signoNome>
<descricao>Coragem, iniciativa e energia.</descricao>
</signo>
<signo>
<dataInicio>21/04</dataInicio>
<dataFim>20/05</dataFim>
<signoNome>Touro</signoNome>
<descricao>Persistência, estabilidade e sensualidade.</descricao>
</signo>
<signo>
<dataInicio>21/05</dataInicio>
<dataFim>20/06</dataFim>
<signoNome>Gêmeos</signoNome>
<descricao>Comunicação, curiosidade e versatilidade.</descricao>
</signo>
<signo>
<dataInicio>21/06</dataInicio>
<dataFim>22/07</dataFim>
<signoNome>Câncer</signoNome>
<descricao>Sensibilidade, proteção e empatia.</descricao>
</signo>
<signo>
<dataInicio>23/07</dataInicio>
<dataFim>22/08</dataFim>
<signoNome>Leão</signoNome>
<descricao>Liderança, brilho e criatividade.</descricao>
</signo>
<signo>
<dataInicio>23/08</dataInicio>
<dataFim>22/09</dataFim>
<signoNome>Virgem</signoNome>
<descricao>Detalhismo, organização e serviço.</descricao>
</signo>
<signo>
<dataInicio>23/09</dataInicio>
<dataFim>22/10</dataFim>
<signoNome>Libra</signoNome>
<descricao>Equilíbrio, diplomacia e sociabilidade.</descricao>
</signo>
<signo>
<dataInicio>23/10</dataInicio>
<dataFim>21/11</dataFim>
19
<signoNome>Escorpião</signoNome>
<descricao>Intensidade, transformação e paixão.</descricao>
</signo>
<signo>
<dataInicio>22/11</dataInicio>
<dataFim>21/12</dataFim>
<signoNome>Sagitário</signoNome>
<descricao>Otimismo, liberdade e aventura.</descricao>
</signo>
<signo>
<dataInicio>22/12</dataInicio>
<dataFim>20/01</dataFim>
<signoNome>Capricórnio</signoNome>
<descricao>Disciplina, ambição e responsabilidade.</descricao>
</signo>
<signo>
<dataInicio>21/01</dataInicio>
<dataFim>18/02</dataFim>
<signoNome>Aquário</signoNome>
<descricao>Originalidade, humanitarismo e visão de futuro.</descricao>
</signo>
<signo>
<dataInicio>19/02</dataInicio>
<dataFim>20/03</dataFim>
<signoNome>Peixes</signoNome>
<descricao>Intuição, empatia e imaginação.</descricao>
</signo>
</signos>
20
CONCLUSÃO.
O desenvolvimento dessa aplicação web foi uma experiência enriquecedora, pois
proporcionou a prática integrada de diversas tecnologias fundamentais para quem
está se formando em programação web. Desde a criação de páginas HTML até a
manipulação de arquivos XML com PHP, cada etapa reforçou a importância da
organização de código, da lógica de programação e do cuidado com a experiência
do usuário.
Além dos desafios técnicos, o projeto também trouxe aprendizados sobre estética e
design responsivo, por meio da aplicação do Bootstrap e da personalização com
CSS moderno e temas escuros. Esse cuidado resultou em uma interface mais
agradável, interativa e atual.
Mais do que simplesmente exibir o signo do usuário, o objetivo maior foi entender
como as tecnologias se comunicam e como pequenos detalhes fazem diferença em
um projeto completo. Essa atividade prática reforçou minha confiança e ampliou
meu repertório para futuros projetos na área.
21
REFERÊNCIAS BIBLIOGRAFICAS
W3C Brasil – Padrões Web
Descrição: Página oficial da W3C no Brasil, com orientações sobre
desenvolvimento web acessível e boas práticas em HTML, CSS e outras
linguagens web.
Link: [Link]
DevMedia – Tutoriais de HTML, CSS e PHP
Descrição: Portal brasileiro com conteúdos técnicos sobre programação, incluindo
tutoriais de HTML, CSS, PHP, XML e uso de Bootstrap.
Link: [Link]
Curso em Vídeo – Curso de PHP, HTML5 e CSS3 com Gustavo Guanabara
Descrição: Plataforma de ensino gratuita com vídeo aulas em português,
amplamente utilizada por estudantes brasileiros de programação.
Link: [Link]
22