Portifolio - Programação Web

Prévia do material em texto

UNOPAR – ANHANGUERA – IPATINGA/MG 
PORTFÓLIO – RELATÓRIO DE AULA PRÁTICA 
NOME DA DISCIPLINA – PROGRAMAÇÃO WEB 
IPATINGA/MG 
2025 
 
 
ALUNO: 
PEDRIVAN MENDES DE SOUSA 
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. 
IPATINGA/MG 
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\index.ph 
1. No index.php, foi incluído o cabeçalho com: 
 
 
 2. Em seguida, criei um formulário para entrada da data: 
 
 Data de nascimento 
 
 Descobrir 
 
 
 
� Caminho do arquivo >> 
C:\xampp\htdocs\Project\show_zodiac_si
gn.php 
1. Comecei incluindo o cabeçalho novamente: 
 
 
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 && $dtUser = $dtInicioAno && $dtUser = $dtInicio && $dtUser > 
C:\xampp\htdocs\Project\signos.xml 
1. Foi feito a estrutura de arquivos: 
 
 
 
 21/03 
 20/04 
 Áries 
 Coragem, iniciativa e energia. 
 
 
Obs: Utilizei a Wikipedia como referência para as datas e características: 
https://pt.wikipedia.org/wiki/Signo_astrológico 
 
 
 � Caminho do arquivo >> C:\xampp\htdocs\Project\style.css 
1. Foi adicionado o Bootstrap no header: 
 
 
 
 
 
 
 
 
9 
2. No style.css, 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 principalda 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: http://localhost/project/ 
 
 ✔ 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 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 Descubra seu signo 
 
 
 
 
 
 
 
 
 
 
 
 Descubra seu signo 
 
 
 
 
 
 Data de nascimento 
 
16 
 Descobrir 
 
 
 
 
 
 
 
 © – Portfólio Web 
 
 
 
 
 
 
 
 
 
 
 
 
Data 
inválida.'; 
 echo 'Voltar'; 
 exit(''); 
} 
 
// Converte para objeto DateTime 
$dtUser = DateTime::createFromFormat('Y-m-d', $data_nascimento); 
 
// Carrega XML 
$signos = simplexml_load_file('signos.xml') 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 && $dtUser = $dtInicioAno && $dtUser = $dtInicio && $dtUser 
 
 
 
 
 
 signoNome ?> 
 descricao ?> 
 Período: dataInicio ?> – dataFim ?> 
 
 
 
 Não foi possível determinar o signo. 
 
 
 
 Voltar 
 
 
 
 
 © – Portfólio Web 
 
 
 
 
 
18 
 
 
 
 
 
 21/03 
 20/04 
 Áries 
 Coragem, iniciativa e energia. 
 
 
 21/04 
 20/05Touro 
 Persistência, estabilidade e sensualidade. 
 
 
 21/05 
 20/06 
 Gêmeos 
 Comunicação, curiosidade e versatilidade. 
 
 
 21/06 
 22/07 
 Câncer 
 Sensibilidade, proteção e empatia. 
 
 
 23/07 
 22/08 
 Leão 
 Liderança, brilho e criatividade. 
 
 
 23/08 
 22/09 
 Virgem 
 Detalhismo, organização e serviço. 
 
 
 23/09 
 22/10 
 Libra 
 Equilíbrio, diplomacia e sociabilidade. 
 
 
 23/10 
 21/11 
19 
 Escorpião 
 Intensidade, transformação e paixão. 
 
 
 22/11 
 21/12 
 Sagitário 
 Otimismo, liberdade e aventura. 
 
 
 22/12 
 20/01 
 Capricórnio 
 Disciplina, ambição e responsabilidade. 
 
 
 21/01 
 18/02 
 Aquário 
 Originalidade, humanitarismo e visão de futuro. 
 
 
 19/02 
 20/03 
 Peixes 
 Intuição, empatia e imaginação. 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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: 
 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: 
 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: 
22