portfolio-programacao-web-faculdade-anhanguera

Prévia do material em texto

Portfolio Programação WEB Faculdade Anhanguera
Análise e desenvolvimento de sistemas (Faculdade Anhanguera)
Digitalizar para abrir em Studocu
A Studocu não é patrocinada ou endossada por nenhuma faculdade ou universidade
Portfolio Programação WEB Faculdade Anhanguera
Análise e desenvolvimento de sistemas (Faculdade Anhanguera)
Digitalizar para abrir em Studocu
A Studocu não é patrocinada ou endossada por nenhuma faculdade ou universidade
Baixado por Rodrigo SG (cklrsg@gmail.com)
lOMoARcPSD|34395217
https://www.studocu.com/pt-br?utm_campaign=shared-document&utm_source=studocu-document&utm_medium=social_sharing&utm_content=portfolio-programacao-web-faculdade-anhanguera
https://www.studocu.com/pt-br/document/faculdade-anhanguera/analise-e-desenvolvimento-de-sistemas/portfolio-programacao-web-faculdade-anhanguera/108148852?utm_campaign=shared-document&utm_source=studocu-document&utm_medium=social_sharing&utm_content=portfolio-programacao-web-faculdade-anhanguera
https://www.studocu.com/pt-br/course/faculdade-anhanguera/analise-e-desenvolvimento-de-sistemas/6789669?utm_campaign=shared-document&utm_source=studocu-document&utm_medium=social_sharing&utm_content=portfolio-programacao-web-faculdade-anhanguera
https://www.studocu.com/pt-br?utm_campaign=shared-document&utm_source=studocu-document&utm_medium=social_sharing&utm_content=portfolio-programacao-web-faculdade-anhanguera
https://www.studocu.com/pt-br/document/faculdade-anhanguera/analise-e-desenvolvimento-de-sistemas/portfolio-programacao-web-faculdade-anhanguera/108148852?utm_campaign=shared-document&utm_source=studocu-document&utm_medium=social_sharing&utm_content=portfolio-programacao-web-faculdade-anhanguera
https://www.studocu.com/pt-br/course/faculdade-anhanguera/analise-e-desenvolvimento-de-sistemas/6789669?utm_campaign=shared-document&utm_source=studocu-document&utm_medium=social_sharing&utm_content=portfolio-programacao-web-faculdade-anhanguera
 
 
Portfolio 
Programação WEB 
 
 
 
 
 
 
 
 
Nome: Deivid Willians Mota 
Curso: Análise e Desenvolvimento de Sistemas 
 
 
 
 
 
Guarulhos -SP 
Brasil 2024 
 
Baixado por Rodrigo SG (cklrsg@gmail.com)
lOMoARcPSD|34395217
https://www.studocu.com/pt-br?utm_campaign=shared-document&utm_source=studocu-document&utm_medium=social_sharing&utm_content=portfolio-programacao-web-faculdade-anhanguera
SUMÁRIO 
 
1 INTRODUÇÃO 
2 DESENVOLVIMENTO 
3 RESULTADOS 
4 CONCLUSÃO 
5 REFERÊNCIAS 
 
Baixado por Rodrigo SG (cklrsg@gmail.com)
lOMoARcPSD|34395217
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! 
 
Baixado por Rodrigo SG (cklrsg@gmail.com)
lOMoARcPSD|34395217
https://www.studocu.com/pt-br?utm_campaign=shared-document&utm_source=studocu-document&utm_medium=social_sharing&utm_content=portfolio-programacao-web-faculdade-anhanguera
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 
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: 
 
 
 
 
Baixado por Rodrigo SG (cklrsg@gmail.com)
lOMoARcPSD|34395217
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: 
 
 
 
 
 
 
 
 
Baixado por Rodrigo SG (cklrsg@gmail.com)
lOMoARcPSD|34395217
https://www.studocu.com/pt-br?utm_campaign=shared-document&utm_source=studocu-document&utm_medium=social_sharing&utm_content=portfolio-programacao-web-faculdade-anhanguera
 
Desenvolver a Lógica para Consulta ao Arquivo XML 
Agora, preciso implementar a lógica para consultar um arquivo 
XML 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: 
 
 
 
 
 
 
 
 
 
Baixado por Rodrigo SG (cklrsg@gmail.com)
lOMoARcPSD|34395217
 
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: 
 
 
 
 
 
 
 
Baixado por Rodrigo SG (cklrsg@gmail.com)
lOMoARcPSD|34395217
https://www.studocu.com/pt-br?utm_campaign=shared-document&utm_source=studocu-document&utm_medium=social_sharing&utm_content=portfolio-programacao-web-faculdade-anhanguera
 
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. 
 
 
 
 
 
Baixado por Rodrigo SG (cklrsg@gmail.com)
lOMoARcPSD|34395217
 
 
 
 
Baixado por Rodrigo SG (cklrsg@gmail.com)
lOMoARcPSD|34395217
https://www.studocu.com/pt-br?utm_campaign=shared-document&utm_source=studocu-document&utm_medium=social_sharing&utm_content=portfolio-programacao-web-faculdade-anhanguera
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. 
 
Baixado por Rodrigo SG (cklrsg@gmail.com)
lOMoARcPSD|34395217
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 proporcionavauma 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! 
Baixado por Rodrigo SG (cklrsg@gmail.com)
lOMoARcPSD|34395217
https://www.studocu.com/pt-br?utm_campaign=shared-document&utm_source=studocu-document&utm_medium=social_sharing&utm_content=portfolio-programacao-web-faculdade-anhanguera
– 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. 
 
 
Baixado por Rodrigo SG (cklrsg@gmail.com)
lOMoARcPSD|34395217
https://www.ignicaodigital.com.br/passo-passo-como-fazer-uma-pagina-na-internet/
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
https://www.hostinger.com.br/tutoriais/como-criar-um-site-passo-a-passo