Portifólio - PROGRAMAÇÃO WEB

Prévia do material em texto

FACULDADE ANHANGUERA 
SISTEMAS DE INFORMAÇÃO - BACHARELADO 
 
 
 
 
 
 
 
 
 
 
RELATÓRIO DE AULA PRÁTICA 
PORTIFÓLIO 
PROGR4AMAÇÃO WEB 
 
 
 
 
 
 
 
 
 
 
Hanerson Gustavo Alves Veloso 
2026 
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! 
 
 
 
 
 
 
 
 
 
 
 
 
DESENVOLVIMENTO 
 
Na aula prática de hoje, meu objetivo é criar uma aplicação web que permita aos usuários 
descobrirem 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. 
 
CRIAR UMA PÁGINA FRONT-END COM FORMULÁRIO 
 
Criar uma Página Front-end com Formulário Primeiro, decido criar a página inicial, que 
conterá um formulário. Esse formulário terá um campo para o usuário inserir sua data de 
nascimento e um botão para realizar a consulta do signo. Para facilitar a construção, 
utilizo o Bootstrap, que me ajuda a criar um layout responsivo e atraente. A estrutura 
básica do meu arquivo index.html fica assim: 
 
 
DESENVOLVER A PÁGINA DE RESULTADO 
Após criar a página inicial, parto para a página que exibirá o resultado da consulta. O 
arquivo resultado.html será onde o usuário verá o seu signo após submeter a data de 
nascimento. A estrutura básica desta página é simples: 
 
 
 
 
 
 
DESENVOLVER A LÓGICA PARA CONSULTA AO ARQUIVO XML 
Agora, preciso implementar a lógica para consultar um arquivo ML que contém as 
informações sobre cada signo. Vou criar um arquivo signos.xml e, em seguida, no 
meu script JavaScript (script.js), vou escrever a lógica para ler esse XML e determinar o 
signo com base na data de nascimento fornecida. Aqui está um exemplo de como fazer 
isso: 
 
 
DESENVOLVER A ESTILIZAÇÃO DAS PÁGINAS 
 
Para deixar a aplicação mais atraente, vou criar uma folha de estilos style.css. Com 
isso, posso aplicar algumas personalizações para melhorar a aparência das páginas. 
Utilizando classes do Bootstrap e algumas customizações, o arquivo style.css fica assim: 
 
 
TESTAR A APLICAÇÃO 
Por fim, após completar o desenvolvimento, é hora de testar a aplicação. Para isso, 
utilizo o XAMPP para iniciar o servidor local. Coloco o projeto na pasta htdocs e 
acesso http://localhost/nome_da_pasta no meu navegador. Testo inserindo diferentes 
datas para garantir que a aplicação retorne corretamente os signos e suas respectivas 
informações. 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
RESULTADOS 
 
Com esses passos, consegui criar uma aplicação funcional que 
oferece aos usuários a oportunidade de descobrir seu signo de maneira interativa 
e visualmente agradável! Estou animado para ver como tudo se comporta em 
funcionamento. 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
CONCLUSÃO 
 
Ao final da aula prática, sinto uma grande satisfação por ter conseguido 
desenvolver uma aplicação web completa que permite aos usuários descobrirem seu 
signo zodiacal. Desde a criação do formulário até a implementação da lógica que 
consulta um arquivo XML, cada etapa foi uma oportunidade de aprendizado. A prática 
com HTML, CSS e JavaScript, juntamente com o uso do Bootstrap para 
estilização, realmente aprimorou minhas habilidades. 
 
Além disso, a experiência de testar a aplicação localmente me ajudou a entender melhor 
como tudo se integra. Fiquei animado ao ver que tudo funcionava como esperado e que a 
aplicação proporcionava uma experiência interativa e agradável. Estou ansioso para 
aplicar esses conhecimentos em projetos futuros e explorar mais sobre o 
desenvolvimento web. Essa aula definitivamente me motivou a continuar 
aprendendo e aprimorando minhas habilidades! 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
REFERÊNCIAS BIBLIOGRAFICAS 
 
https://www.ignicaodigital.com.br/passo-passo-como-fazer-uma-pagina-na-internet/ ; 
 
https://www.hostinger.com.br/tutoriais/como-criar-um-site-passo-a-passo,set 13,2024.