portifolio-programacao-web

Prévia do material em texto

PortifóLIO ProgramaçÃO WEB
Programação Web (Anhanguera Educational)
Digitalizar para abrir em Studocu
A Studocu não é patrocinada ou endossada por nenhuma faculdade ou universidade
PortifóLIO ProgramaçÃO WEB
Programação Web (Anhanguera Educational)
Digitalizar para abrir em Studocu
A Studocu não é patrocinada ou endossada por nenhuma faculdade ou universidade
Baixado por Adir Borba (evandroadir@gmail.com)
lOMoARcPSD|32853266
https://www.studocu.com/pt-br?utm_campaign=shared-document&utm_source=studocu-document&utm_medium=social_sharing&utm_content=portifolio-programacao-web
https://www.studocu.com/pt-br/document/anhanguera-educational/programacao-web/portifolio-programacao-web/110071404?utm_campaign=shared-document&utm_source=studocu-document&utm_medium=social_sharing&utm_content=portifolio-programacao-web
https://www.studocu.com/pt-br/course/anhanguera-educational/programacao-web/7206515?utm_campaign=shared-document&utm_source=studocu-document&utm_medium=social_sharing&utm_content=portifolio-programacao-web
https://www.studocu.com/pt-br?utm_campaign=shared-document&utm_source=studocu-document&utm_medium=social_sharing&utm_content=portifolio-programacao-web
https://www.studocu.com/pt-br/document/anhanguera-educational/programacao-web/portifolio-programacao-web/110071404?utm_campaign=shared-document&utm_source=studocu-document&utm_medium=social_sharing&utm_content=portifolio-programacao-web
https://www.studocu.com/pt-br/course/anhanguera-educational/programacao-web/7206515?utm_campaign=shared-document&utm_source=studocu-document&utm_medium=social_sharing&utm_content=portifolio-programacao-web
NOME
SUPERIOR DE TECNOLOGIA EM ANÁLISE E
DESENVOLVIMENTO DE SISTEMAS
PORTIFÓLIO AULA PRÁTICA:
PROGRAMAÇÃO WEB
RJ-RIO DE JANEIRO
2024
Baixado por Adir Borba (evandroadir@gmail.com)
lOMoARcPSD|32853266
https://www.studocu.com/pt-br?utm_campaign=shared-document&utm_source=studocu-document&utm_medium=social_sharing&utm_content=portifolio-programacao-web
RJ-RIO DE JANEIRO
2024
PORTIFÓLIO AULA PRÁTICA:
PROGRAMAÇÃO WEB
AULA PRÁTICA DE PROGRAMAÇÃO WEB APRESENTADO COMO REQUISITO PARCIAL PARA A
OBTENÇÃO DE MÉDIA SEMESTRAL NO CURSO SUPERIOR DE TECNOLOGIA EM
ANÁLISE E DESENVOLVIMENTO DE SISTEMAS
.
Orientador(a):
Tutor:
NOME
Baixado por Adir Borba (evandroadir@gmail.com)
lOMoARcPSD|32853266
SUMÁRIO
NOME DO CURSO....................................................................................................0
1 INTRODUÇÃO............................................................................................3
2 DESENVOLVIMENTO................................................................................4
3 RESULTADOS............................................................................................6
4 CONCLUSÃO..............................................................................................9
5 REFERÊNCIAS.........................................................................................10
Baixado por Adir Borba (evandroadir@gmail.com)
lOMoARcPSD|32853266
../C:/Users/Eduardo/Documents/EngSoft_Aula%20Pratica.doc#_Toc88506917
https://www.studocu.com/pt-br?utm_campaign=shared-document&utm_source=studocu-document&utm_medium=social_sharing&utm_content=portifolio-programacao-web
1 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!
3
Baixado por Adir Borba (evandroadir@gmail.com)
lOMoARcPSD|32853266
2 DESENVOLVIMENTO
Na aula prática de hoje, 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.
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:
4
Baixado por Adir Borba (evandroadir@gmail.com)
lOMoARcPSD|32853266
https://www.studocu.com/pt-br?utm_campaign=shared-document&utm_source=studocu-document&utm_medium=social_sharing&utm_content=portifolio-programacao-web
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:
5
Baixado por Adir Borba (evandroadir@gmail.com)
lOMoARcPSD|32853266
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:
6
Baixado por Adir Borba (evandroadir@gmail.com)
lOMoARcPSD|32853266
https://www.studocu.com/pt-br?utm_campaign=shared-document&utm_source=studocu-document&utm_medium=social_sharing&utm_content=portifolio-programacao-web
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:
7
Baixado por Adir Borba (evandroadir@gmail.com)
lOMoARcPSD|32853266
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.
8
Baixado por Adir Borba (evandroadir@gmail.com)
lOMoARcPSD|32853266
https://www.studocu.com/pt-br?utm_campaign=shared-document&utm_source=studocu-document&utm_medium=social_sharing&utm_content=portifolio-programacao-web
9
Baixado por Adir Borba (evandroadir@gmail.com)
lOMoARcPSD|32853266
3 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.
10
Baixado por Adir Borba (evandroadir@gmail.com)
lOMoARcPSD|32853266
https://www.studocu.com/pt-br?utm_campaign=shared-document&utm_source=studocu-document&utm_medium=social_sharing&utm_content=portifolio-programacao-web
4 CONCLUSÃO
Aofinal da aula prática, sinto uma grande satisfação por ter
conseguido desenvolver uma aplicação web completa que permite aos usuários
descobrir 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!
11
Baixado por Adir Borba (evandroadir@gmail.com)
lOMoARcPSD|32853266
5 – 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.
12
Baixado por Adir Borba (evandroadir@gmail.com)
lOMoARcPSD|32853266
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
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.studocu.com/pt-br?utm_campaign=shared-document&utm_source=studocu-document&utm_medium=social_sharing&utm_content=portifolio-programacao-web
	SUMÁRIO
	1 INTRODUÇÃO
	2 DESENVOLVIMENTO
	3 RESULTADOS
	4 CONCLUSÃO
	5 – REFERÊNCIAS Bibliograficas