APS Turismo

UNIVERSIDADE PAULISTA
EDSON RAMIRO BERTOLANI

ERICK ESTEVAN
GUILHERME PEREIRA JUSTO
LUANA APARECIDA CAPELLINI

APS: Turismo no Vale do Paraba

SO JOS DOS CAMPOS
2012

ERICK ESTEVAN


APS referente ao 1 Semestre
do curso de Cincia da
Computao apresentado
Universidade Paulista UNIP

SO JOS DOS CAMPOS
2012

ERICK ESTEVAN


APS referente ao 1 Semestre
do curso de Cincia da
Computao apresentado

BANCA EXAMINADORA
______________________/___/____
Prof.: Andr Kusumoto

RESUMO

Desde o incio do uso habitual dos recursos da internet, existe uma grande
necessidade de centralizao de informaes, em prol da facilidade e objetividade na
relao, solicitao e destino das mesmas.
H a necessidade em centralizar o contedo turstico do Vale do Paraba, sendo
assim, o seguinte trabalho teve por objetivo o desenvolvimento de um site para a
divulgao dos diversos turismos existentes nas principais cidades da regio.

Palavras-chave: Turismo, Vale do Paraba, Site.

ABSTRACT

Since the beginning of the habitual use of Internet resources, there is great need
for centralization of information, for the sake of ease and objectivity in the relationship,
and destination of the request.
There is a need to centralize content tourist Paraiba Valley, so the following work
aimed at developing a site for the dissemination of existing touring several major cities in
the region.

Keywords: Tourism, Paraiba Valley, Site.

LISTA DE FIGURAS

Figura 1 - Rio Paraba do Sul (So Jos dos Campos) ................................................... 8
Figura 2 - Rodovia Presidente Dutra ................................................................................ 9
Figura 3 - So Jos dos Campos ................................................................................... 10
Figura 4 - Portal de Campos do Jordo ......................................................................... 11
Figura 5 - Igreja de Taubat ........................................................................................... 12
Figura 6 - Coreto da praa de Guararema ..................................................................... 12
Figura 7 - Pindamonhangaba ......................................................................................... 13
Figura 8 - Vista de Paraibuna ......................................................................................... 14
Figura 9 - Baslica Nacional de Aparecida ..................................................................... 14
Figura 10 - Guaratinguet .............................................................................................. 15
Figura 11 - Primeiro Layout ............................................................................................ 24
Figura 12 - Site Protege ................................................................................................. 24
Figura 13 - Layout Final ................................................................................................. 24

INDICE

1. TEMA ESCOLHIDO ................................................................................................... 8
1.1. Turismo no Vale do Paraba ............................................................................... 8
1.1.1. So Jos dos Campos ...................................................................................... 10
1.1.2. Campos do Jordo ............................................................................................ 11
1.1.3. Taubat ............................................................................................................. 12
1.1.4. Guararema ........................................................................................................ 12
1.1.5. Pindamonhangaba ............................................................................................ 13
1.1.6. Paraibuna .......................................................................................................... 14
1.1.7. Aparecida .......................................................................................................... 14
1.1.8. Guaratinguet ................................................................................................... 15
2. DISSERTAO ....................................................................................................... 16
3. PROJETO DO SITE ................................................................................................ 21
3.1. Site de Turismo do Vale do Paraba ................................................................. 21
3.1.1. Tema ................................................................................................................. 21
3.1.3. Planejamento e Diviso de trabalho .................................................................. 22
3.1.4. Fase Desenvolvimento ...................................................................................... 22
3.1.5. Fases de Operao ........................................................................................... 23
4. RELATRIO COM AS LINHAS DE CDIGO ......................................................... 25
4.1. CSS ................................................................................................................... 25
4.2. XHTML .............................................................................................................. 34
5. REFERENCIAS BIBLIOGRFICAS ........................................................................ 36
8

1. TEMA ESCOLHIDO

1.1. Turismo no Vale do Paraba
O Vale do Paraba uma regio scio-econmica que abrange parte do lestedo
estado de So Paulo e sul do estado do Rio de Janeiro, e que se destaca por
concentrar uma parcela considervel do PIB do Brasil. O nome deve-se ao fato de que
a regio a parte inicial da bacia hidrogrfica do rio Paraba do Sul. Deve-se ressaltar
que o nome, em sentido estrito, comumente utilizado apenas para se referir a uma
regio com certas caractersticas scio-econmicas, correspondendo aproximadamente
ao curso superior do rio Paraba do Sul, j que esse rio se estende ainda ao longo de
quase todo o comprimento do estado do Rio de Janeiro e separa parte deste do estado
de Minas Gerais. Geralmente, a denominao costuma incluir tambm o litoral norte do
estado de So Paulo, que lhe vizinho e estreitamente ligado.
A regio de Campos do Jordo a Mantiqueira apresenta traos peculiares, tanto
com relao ao relevo, como em relao paisagem botnica.
O Paraba desenvolve seu curso entre a Mantiqueira e a Serra do Mar. O mdio
vale superior, entre Guararema e Cachoeira Paulista, atravessa terrenos sedimentares
de origem terciria, a bacia de Taubat. O mdio vale inferior, de Cachoeira a So
Fidlis, constitudo pela bacia sedimentar de Resende, de origem arqueana, situada a
nveis bem inferiores aos da bacia de Taubat.

Figura 1 - Rio Paraba do Sul (So Jos dos Campos)
s margens da Rodovia Presidente Dutra, as cidades de Jacare, So Jos dos
Campos, Caapava e Taubat concentram uma grande nmero de indstrias,
9

sobressaindo as indstrias tecnolgicas. Esse fato se deve a sua localizao (no meio
do eixo Rio-So Paulo, por onde passa grande parte da riqueza nacional) e s
instituies de ensino e pesquisa presentes na regio, como o ITA - Instituto
Tecnolgico de Aeronutica.
Entretanto, essas cidades oferecem mais do que isso.

Figura 2 - Rodovia Presidente Dutra

O Vale do Paraiba conta com 36 cidades, todas de fcil acesso as margens de
rodovias influentes no Brasil. So elas:
Aparecida Guararema Paraibuna Santa Isabel
Arape Igarat Pindamonhangaba
Santo Antonio do
Pinhal
Areias Jacare Piquete So Bento do Sapuca
Bananal Jambeiro Potim So Jos do Barreiro
Caapava Lagoinha Queluz So Jos dos Campos
Cachoeira Paulista Lavrinha
Redeno da
Serra So Luiz do Paraitinga
Canas Lorena Roseira Silveira
Cruzeiro Monteiro Lobato Salespolis Taubat
Cunha Natividade da Serra Santa Branca Trememb

Todas so belssimas cidades e cheias de pontos tursticos, este trabalho cita
oito delas cada uma com seu particular.
O site que acompanha este trabalho mostra de maneira ilustrativa e informativa o
turismo dessas oito cidades: So Jos dos Campos, Campos do Jordo, Taubat,
Pindamonhangaba, Guararema, Paraibuna, Aparecida, Guaratinguet.
10

Uma breve descrio das principais Cidades e seu turismo:
1.1.1. So Jos dos Campos

Figura 3 - So Jos dos Campos
As origens de So Jos dos Campos remontam ao final do sculo XVI, quando
se formou a "Aldeia do Rio Comprido", uma fazenda jesutica que usava a atividade
pecuarista para evitar incurses de bandeirantes.
Atualmente, a cidade com mais de 500 mil habitantes tem boas opes de lazer
ao turista.
So Jos dos Campos o maior centro de pesquisa e produo de cincia e alta
tecnologia do Brasil. Alm de avies exportados para os cinco continentes e satlites
que ajudam a monitorar os vastos recursos naturais de pas, o municpio sede de um
moderno complexo industrial com destaque para empresas do setor automobilstico,
aeroespacial, eletroeletrnico e de telecomunicaes.
Todos os fatores econmicos e culturais colocam So Jos como importante
centro comercial de uma regio com cerca de dois milhes de habitantes.
Essa cidade conta com um grande ndice de turismo Noturno agitando as noites
de seus habitantes. (Biblioteca Virtual,...2012)

11

1.1.2. Campos do Jordo

Figura 4 - Portal de Campos do Jordo
Campos do Jordo a principal estncia de inverno do estado de So Paulo,
devido ao grande nmero de pessoas que ela atrai durante a alta temporada, que vai
de maio a meados de agosto, totalizando 1,5 milho de visitantes que desejam curtir o
friozinho da Serra da Mantiqueira. Afinal, a cidade fica a mais de 1.600 metros acima do
nvel do mar.
A cidade apresenta uma grande variedade de atraes: Pedra do Ba, Palcio
Boa Vista, a Estrada de Ferro, malharias e chocolaterias, Horto Florestal, Gruta dos
Crioulos, Ducha de Prata (quedas d'gua para apreciar e venda de artesanato), antigas
igrejas e mosteiros e Pico do Itapeva. Esse ltimo, apesar de estar localizado
no municpio de Pindamonhangaba, praticamente uma atrao de Campos do Jordo,
j que para chegar ao alto dos seus 1.950 metros de altura necessrio utilizar a
estradinha que comea na Vila de Capivari. L de cima, podem-se ver, em dias claros e
sem neblina, quase todas as cidades do Vale do Paraba.
tambm conhecida pelo Festival Internacional de Inverno, evento que traz para
a cidade, sempre durante o ms de julho, uma excelente programao de msica
clssica. Devido ao charme da cidade, ao clima e a essa arquitetura bastante peculiar,
Campos do Jordo conhecida carinhosamente como a "Suia Brasileira". Noite na
Vila de Capivari, centro comercial e local da badalao da cidade. (Biblioteca
Virtual,...2012)

12

1.1.3. Taubat

Figura 5 - Igreja de Taubat
Espetacular panorama da cidade, situado em uma das colinas urbanizadas que
ficam ao Sul, aps a Rod. Pres. Dutra.
Ai encontra-se desde 1956 a bela e importante estatua do Cristo Redentor com 23 m.
de altura incluindo o pedestal, onde a capela dedicada N. Senhora de Paz.
Alm da vista geral da cidade, descortina-se parte do Vale do Paraba, tendo o fundo a
Serra da Mantiqueira. (Prefeitura de Taubat...,2012)

1.1.4. Guararema

Figura 6 - Coreto da praa de Guararema

Guararema uma cidade que se situa entre a agitao dos grandes centros
como So Paulo e o jeito interiorano de viver, das pequenas cidades.
A formao da cidade comeou com terras doadas a uma ex-escrava, e desse
acontecimento, surgiu um lugar de gente devota e amistosa.
13

O crescimento da cidade ocorreu aps a queda da produo cafeeira, onde
houve a procura por outros meios de sobrevivncia, como a pecuria, agricultura e o
turismo.
A cidade de Guararema mesmo com a proximidade de So Paulo, continua
sendo uma cidade pequena e calma, garantindo paz e sossego aos seus visitantes.
(Guararema...,2012)

1.1.5. Pindamonhangaba

Figura 7 - Pindamonhangaba

O turismo cultural tem como fundamento o contato e a convivncia com o
legado cultural, com tradies que foram influenciadas pela dinmica do tempo, mas
que permaneceram. Abre perspectivas para a valorizao e revitalizao do patrimnio,
do revigoramento das tradies, da redescoberta de bens culturais materiais e
imateriais, muitas vezes abafadas pela concepo moderna. (Prefeitura de
Pindamonhangaba...,2012)

14

1.1.6. Paraibuna

Figura 8 - Vista de Paraibuna

Paraibuna mantm as festas folclricas na praa da Igreja Matriz, com diversas
manifestaes culturais que perpetuam as tradies locais como as danas -. Forr,
Arrasta-P, Quadrilhas, Moambique entre outras; a Msica Sertaneja que sempre se
fez presente no cotidiano paraibunense, e as rodas de moda de viola freqentes na
zona rural. A tradio do "bolo casamenteiro", distribudo populao todos os anos no
dia de Santo Antnio que tambm o dia do aniversrio da cidade, tambm se mantm
firme. Possui uma boa estrutura de hospedagem, oferecendo pousadas no centro da
cidade e em reas rurais para receber os turistas. (Prefeitura de Paraibuna...,2012)

1.1.7. Aparecida

Figura 9 - Baslica Nacional de Aparecida
Cidade conhecida como Capital do Turismo Religioso. A cidade de Aparecida
conta com construes em formas e estilos arquitetnicos diferenciados, dimenses e
capacidades distintas, singelas ou sofisticadas, mas todas guardam verdadeiras
relquias artsticas e culturais que merecem ser conhecidas, estudadas, analisadas e
guardadas na lembrana de cada visitante.
15

s margens do Rio Paraba do sul, com sua belezas naturais, Aparecida oferece
excelentes opes tursticas. Seu clima quente, se co e estvel faz com que a cidade
seja muito procurada por quem quer estar em contato com a natureza, explorando os
espaos de lazer que oferecem belas paisagens. (Eco Viagem...,2012)

1.1.8. Guaratinguet

Figura 10 - Guaratinguet

Guaratinguet: uma cidade abenoada
A secretaria Municipal do Turismo e Lazer o rgo incumbido de promover o
desenvolvimento das atividades, do turismo interno e do lazer comunitrio, em seus
mltiplos e variados aspectos, cabendo-lhe, portanto, centralizar os sistemas
administrativos dos plos de atrao turstica e dos recursos para o lazer comunitrio,
nas reas de atribuio da Municipalidade. (Prefeitura de Guaratinguet...,2012)

16

2. DISSERTAO

O turismo no Vale do Paraba, a cada dia mais vem se tornando maior e
diversificado, por falta de responsveis da rea, esse possui um dficit de informaes
bsicas e detalhadas sobre qualquer aspecto relacionado ao mesmo, quanto parte
comercial e turstica envolvida. Desde o incio do uso habitual dos recursos da internet,
existe uma grande necessidade de uma centralizao de informaes, em prol da
facilidade e objetividade na relao solicitao e destino das mesmas, a grande
diferena hodiernamente em relao ao passado que a informao tem um preo s
vezes alto, gerando assim benefcios para quem s detm.
A globalizao mudou e influenciou a vida do cidado de hoje, existe uma rede
de informaes que alcana, atravs do uso de equipamentos especficos, qualquer
parte habitada da Terra, a internet facilitou muito a troca de informaes por causa da
praticidade, velocidade e viabilidade econmica, ao mesmo tempo criaram-se
mecanismos que se tornaram indispensveis no dia a dia de cada pessoa, seja um site
de notcias, culinria ou tambm correio eletrnico, as opes existentes hoje so
quase que incontveis.
possvel obter uma renda atravs da simples catalogao de informaes,
como um site de turismo, que possui cadastrado hotis, restaurantes, lojas e outros,
podem lucrar em cima das prprias empresas cadastradas, pois se o site
conceituado, conhecido e usado por uma grande quantidade de pessoas, diversas
empresas tero interesse de se promover nesse site. Esse mecanismo de cobrana,
por parte dos sites, das empresas no novo e muito utilizado e til para ambos, pois
os dois se beneficiam com o acordo, com a divulgao e propaganda deste detentor
de informaes o benefcio vai ainda mais alm, atingindo pessoas comuns que
procuram algum lugar para se hospedarem, comprar ou se alimentar, por exemplo.
A divulgao um ponto indispensvel quando se trata de sites com objetivos
em comunicao e comrcios eletrnicos, com as chamadas redes sociais foi possvel
expandir ainda mais o campo de propaganda, antes era somente se o usurio
acessasse a pgina onde continha a propaganda, esse conceito era de certa forma
invivel pois era necessrio colocar diversas propagandas em diversos sites, ou em um
17

site que obtivesse milhares de acessos dirios, porm o nus seria alto. As redes
sociais permitem uma divulgao no to dito boca a boca, atravs de
compartilhamentos, dependendo da quantidade de pessoas associadas pgina do
divulgador, a propaganda, ou mensagem pode chegar at pessoas de pases
extremamente distantes, um dos recursos utilizados para uma boa divulgao do site
sobre o turismo no Vale do Paraba, foi a criao de uma pgina no Facebook.
O diferencial em uma pgina na web, principalmente uma pgina de divulgao
de informaes, de extrema importncia universalizao lingustica, tornar o site
legvel em diversos idiomas, com o avano da globalizao, os idiomas Ingls e
Espanhol so imprescindveis para um bom aproveitamento do contedo e
reconhecimento global. A traduo do Portugus para o Ingls ser feita junto
complementao de informaes no site, como a adio de mais hotis, restaurantes e
outros atrativos ligados ao turismo, por se tratar desse tema, uma prioridade a
traduo, inclusive antes do evento da Copa, evento esse global, que trar milhares de
estrangeiros ao pas, com essas informaes traduzidas poder melhorar e incentivar o
comrcio regional, alm de compartilhar a cultura local, um site organizado e de fcil
acesso trar aproveitamento mximo aos turistas.
A montagem de um site com um contedo sobre o Vale do Paraba e o turismo
existente, gera benefcios no somente acadmicos, mas tambm culturais. A pesquisa
sobre o tema tratado foi de suma importncia cultural, pois ensinou claramente a
existncia das grandes diversidades existentes na regio, como a quantidade de
ramificaes que existem no turismo, essas como o noturno, diurno, ecolgico, histrico
e religioso. Cada cidade, que na maioria dos casos tem relao direta com o histrico e
tamanho da mesma, possui uma inclinao pras quais quer categorias anteriormente
citadas, como exemplo a cidade de Aparecida que possui um forte turismo religioso,
porm um fraco turismo ecolgico e um pssimo turismo noturno, escasso de opes.
A regio composta por trinta e seis cidades e muitas dessas somente com uma
nica atrao turstica, geralmente cidades essas de porte muito pequeno, as
diferenas tambm se encaixam no desenvolvimento urbano e tecnolgico, que por
sinal so muito grandes entre uma cidade e outra. O turismo histrico bem distribudo
em todo Vale, como diferenas somente em expressividade entre as cidades, onde
18

umas possuem traos histricos mais notveis, uma cidade com um forte turismo
histrico a cidade de Guararema. O turismo diurno bem comum, exceto em
cidades pequenas onde prevalece o turismo ecolgico, em grande parte das cidades da
regio, composto de atrativos tursticos mais familiares como shoppings, parques,
praas, lojas e certas recreaes ambulantes, a cidade de So Jos dos Campos
detm um turismo diurno bem atrativo. O turismo noturno est presente somente nas
cidades desenvolvidas e de porte considervel em diversos aspectos, como urbano e
tecnolgico, este composto por casas noturnas, bares, os famosos espetinhos,
adegas e outros, tem como alvo o pblico jovem e adulto, Taubat uma cidade que
tem uma grande variedade de opes para o turismo noturno. A existncia de uma
restrio, fez com que houvesse uma reduo da quantidade de cidades informadas no
site, passando de trinta e seis para somente oito, alm do que foram citados somente
os principais hotis e restaurantes de cada cidade, pois se fossem informados todos
levaria muito mais tempo e espao.
A pesquisa utilizou diversas informaes, buscadas em sites regionais,
comerciais e governamentais, um grande problema encontrado durante o levantamento
dos dados foi sobre a confiabilidade das informaes, como telefones e endereos de
restaurantes e hotis, no qual muitos possuam informaes incompletas e erradas. Os
sites governamentais foram utilizados para complementao de informaes sobre a
parte tcnica da cidade, como acesso rodovirio, areo e fluvial, a parte histrica
tambm foi retirada dessa fonte.
O estudo tambm favorece a diviso acadmica no seguinte quesito, busca de
informaes extracurriculares para a complementao do conhecimento j possudo, foi
necessrio o aperfeioamento das tcnicas tericas intelectuais para buscar,
implementar e sintetizar esse estudo, tornando-o assim til e disponvel para qualquer
pessoa. O objetivo inicial era a criao de um site com informaes sobre turismo
regional diurno, religioso e como foco no noturno, tambm seriam cadastradas as
necessidades mais bsicas de um turista, como comrcio, alimentao e hotelaria. O
contato por parte da empresa tambm muito til para o cadastramento da mesma no
site e pela confiabilidade das informaes, com esse contato, possvel atingir o que
19

ela quer e como quer que seus dados sejam expostos no site, direcionando assim os
principais pontos positivos e consequentemente atraindo assim mais ateno.
A criao do site necessitou de um estudo e uso de livros com contedo
XHTML e CSS aprofundado, para o melhor desenvolvimento e aproveitamento. O
site foi disponibilizado para o acesso mundial, se encontrando no seguinte domnio,
HTTP://www.edsonmx.com.br. Alm do objetivo acadmico, o contedo se tornou
virtual para a colaborao cultural e regional.
A criao desse projeto foi necessria utilizao de recursos interdisciplinares,
atravs de Tpicos em Ambiente Web a formulao do layout da pgina foi feita
desde uma folha de papel at chegar ao plano virtual, como tambm a organizao e
diviso de tarefas entre o grupo, com o intuito de manter um cronograma de reunies e
juno de partes do trabalho. J Desenvolvimento em Ambiente Web permitiu que
fosse criado o prprio web site atravs de linguagens e codificaes adquiridas durante
as aulas. A Interpretao e Produo de Textos possibilitou a formatao e a
formulao da parte escrita deste trabalho.
Um dos recursos utilizados para o desenvolvimento do site foi a observao da
pgina da empresa Protege, no qual foi observado um layout simples, fcil e intuitivo
para qualquer usurio leigo e que precise buscar informaes, houve uma mudana da
primeira pgina criada do site de turismo no Vale pois a anterior no atendia a
necessidade de pessoas com conhecimentos bsicos em internet, tornando assim mais
difcil e complicado o acesso. O espao dedicado histria do vale est presente no
site para a informao geogrfica, informando o relevo, serras e hidrografia, existe
tambm a parte socioeconmica, que indica desenvolvimento urbano de cada cidade,
por fim a informao climtica, tornando assim extremamente til para qualquer um que
acesse a pgina, ajudando na preparao do vesturio antes da visita ao Vale do
Paraba.
A finalizao desse projeto proporcionou experincia em campo tanto na parte
de web design quanto na publicao de documentos, e incentivou inclusive o
desenvolvimento contnuo do mesmo. O desenvolvimento do site gerou para todos os
integrantes do grupo uma experincia de formulao de contedo na web, como a
implementao de imagens, textos e a pesquisa contendo toda a informao
20

relacionada ao objetivo do mesmo. A continuao do desenvolvimento do site se tornou
uma opo atrativa, pois alm de poder gerar lucro aos desenvolvedores criou tambm
um contedo informativo regional, beneficiando no somente quem desenvolveu, mas a
prpria populao e inclusive o comrcio, ajudando assim o possvel crescimento da
economia local. A publicao de documentos favoreceu no modo de pesquisa,
ajudando assim a melhorar a forma que se obtm o contedo, se tratando tanto da
parte da confiabilidade quanto da instruo, essa que define a forma como o usurio
final recebe a informao, pois importante que o contedo seja intuitivo, informando
de forma clara e objetiva e sem que se torne cansativo a leitura.

21

3. PROJETO DO SITE
3.1. Site de Turismo do Vale do Paraba

3.1.1. Tema

Baseia-se na necessidade do Vale do Paraba ter um site que expresse o
contedo de turismo das principais cidades, pois cada cidade possui seu site e nele o
link de Turismo, isso inviabiliza os usurios, uma vez que eles devem buscar
determinado contedo nos sites especficos de cada cidade, ento houve a criao de
um site com nfase no turismo no Vale destacando as principais cidades da regio,
assim facilitando de forma clara, os tpicos tanto de Turismo Diurno quanto Noturno e
Religioso.

3.1.2. Restries

Obtiveram-se algumas restries para o desenvolvimento do site, foi pensado
inicialmente em criar algo em flash, porm, s seria possvel usar XHTML e CSS, logo o
melhor seria criar um layout simples.
Tambm houve problemas com a quantidade de cidades que compem o Vale
do Paraba, so ao todo 36 cidades e falar de cada uma delas demandaria mais tempo,
quantidade de pginas para a documentao e fugiramos demais do objetivo de criar
um site, ele se tornaria um portal, sendo assim, abordamos trs cidades de cada tipo de
turismo: trs de Turismo Diurno Guararema, Paraibuna e Pindamonhangaba; trs de
Turismo Noturno Campos do Jordo, So Jos dos Campos e Taubat; e por fim
duas de Turismo Religioso Aparecida e Guaratinguet.
Inicialmente haveria a traduo de todo o site para o ingls, porm no fora
possvel com tantas pginas e o prazo de entrega curtos.
O site seria dividido em turismo diurno e turismo noturno, porm como houve
problemas com a quantidade de cidades e abrangncia que isso demandava, foi criado
22

mais generalizado, sem focar tanto em um s tipo de Turismo como pensado
previamente.

3.1.3. Planejamento e Diviso de trabalho

Inicialmente o foco foi em reunir o grupo para criar o layout, em papel mesmo,
com a idia de cada um e a partir da chegar em um consenso comum. Tambm houve
a preocupao de criar em nuvem um compartilhamento de tudo que era atualizado,
seja em pesquisa, na documentao e no site, para que ningum ficasse parado sem
ter o que fazer quando um integrante faltasse.
Combinamos em nos reunir no campos da UNIP mesmo para a discusso do
andamento do trabalho geral.
O desenvolvimento do site no que se trata de codificao ficou sob a
responsabilidade do Edson, as pesquisas e dissertao com o Guilherme, o Erick ficou
encarregado de dar suporte ao Guilherme na pesquisa, e por fim a Luana ficou
responsvel por montar a parte da documentao e auxiliar o Edson na codificao do
Site, bem como em formatar o contedo do site.

3.1.4. Fase Desenvolvimento

Procurou-se deixar o site o mais funcional possvel para que o usurio no
deixasse a pgina por falta de contedo e atualizao.

Foi desenvolvida uma logomarca para o site, pensamos em um layout limpo e
claro sem muitas cores pra no cansar a vista dos usurios.
Na home, foi criado uma breve descrio do que os usurios encontraro no site,
e em todas as pginas vimos a necessidade de manter o banner com a logomarca junto
com a barra de navegao, para no caso o usurio se sentir a vontade para navegar
sem ter que voltar tudo para a Home e dela ir para as demais pginas.
23

Outra ideia obtida e implantada no site foi de criar um grupo a parte em uma rede
social (Facebook), com link direto do site para as pessoas colocarem opinies sobre os
locais visitados, os quais indicamos no site para assim tornar o site mais divulgado
possvel.
Tambm foi criado um fale conosco, para envio de sugestes e criticas, atravs
de e-mail criado somente para o site e um mapa do site para facilitar ainda mais a
navegao.
H tambm no site um breve Resumo sobre o Vale do Paraba como um todo,
para especificar outras pessoas, de outras cidades, onde fica, o clima para incentiva-
las de certa forma conheceram nossa regio. E at mesmo para a populao daqui,
pois talvez haja pessoas que no saibam de detalhes como os que citamos neste link.
Foi tomado o cuidado de todo o cdigo XHTML e CSS serem comentados para
facilitar edies e atualizaes posteriores.
Tambm foi colocado online para testes de usabilidade, num domnio real de um
integrante do grupo.

3.1.5. Fases de Operao

Dentre as muitas Operaes descritas acima tambm foi pensado em uma
poltica de atualizao do site, a cada nova sugesto e/ou critica recebida no email e
na rede social um dos desenvolvedores atualizar o contedo quinzenalmente.
Como a codificao fora toda comentada, fica de fcil as supostas correes.
Quanto a evoluo do trabalho, a principio, foi pensado em um layout horizontal
e fluido, ajustvel a qualquer resoluo, mas no ia atender a funcionalidade do site,
por esse motivo, foi desenvolvido o outro layout.
24

Figura 11 - Primeiro Layout

Foi ajustado o layout, baseado no site da Protege.

Figura 12 - Site Protege

Ento a Home Page do site final ficou assim:

Figura 13 - Layout Final

Mesmo tendo sido usado o ultimo layout par o site final, fora usado a maioria da
codificao contida no primeiro layout.

25

4. RELATRIO COM AS LINHAS DE CDIGO
4.1. CSS

/* AQUI COMEAM AS CONFIGURAES DAS DIV'S RELACIONADAS HOME DO
SITE - INDEX.HTML */
body {
background-color: #FFFFFF; /* Define a cor de fundo do layout */
margin: 0; /* Deifne o
valor das margens */
padding: 0;
font: 12px/1.4 Verdana, Arial, Helvetica, Tahoma, sans-serif; /*
Define as fontes usadas no corpo da pgina */
text-align: center; /* Define o alinhamento dos
textos inseridos no corpo da pgina */
}

#tudo { /* Configuraes da div#tudo */
width: 980px; /* Largura da div#tudo em pixels */
margin: 0 auto; /* Define o valor da margem da div */
text-align: left; /* Alinhamento do texto contido na div */
}

#topo { /* Configuraes da div#topo */
position: relative; /* Cria um contexto de posicionamento incio das
coordenadas no canto superior esquerdo do topo */
width: 980px; /* Largura do topo em pixels */
height: 125px; /* Altura do Topo / Altura do topo e da imagem so
iguais */
background: url("../Imagens/bannertopo.jpg") no-repeat; /* Imagem de fundo
do Topo / Medidas da div e da imagem so iguais */
margin-bottom: 10px; /* Define o valor da margem inferior da div em pixels */
border-width: 1px 1px 1px; /* Define a os locais e a expessura das bordas da div
*/
border-color: #A4A4A4; /* Define a cor da borda */
border-style: solid; /* Define o estilo da borda */
}

#barra { /* Configuraes da div#barra */
width: 980px; /* Largura da div em pixels */
margin: 0 auto; /* Define o valor da margem da div */
height: 25px; /* Altura da div em pixels */
background: #FFFFFF; /* Define a cor de fundo para a barra de navegao */
*/
26

margin-bottom: 10px; /* Define o valor da margem inferior em pixels */
}

ul#nav { /* Declaraes para padronizar margens e paddings em
diferentes navegadores / Afeta diretamente o texto da barra de navegao */
position: absolute; /* Declara o valor da posio */
left: auto;
right: auto; /* Posiciona a barra de navegao horizontalmente */
top: 75px; /* Posiciona a barra de navegao verticalmente */
margin-top: 67px; /* Declara o valor da margem superior */
margin-left: 120px; /* Declara o valor da margem esquerda */
padding: 0; /* Define o valor do espaamento interno entre o contedo do
box e seus limites */
word-spacing: 5px; /* Declara espaamento entre as palavras da barra de
navegao */
}

ul#nav li {
display: inline; /* Coloca os itens da lista na horizontal */
margin-right: 50px; /* Insere um espao entre cada item da lista */
list-style: none; /* Retira o marcador padro das listas */
}

ul#nav li a {
position: center; /* Corrige bug da expanso do fundo no estado over no IE7 */
color: #000000; /* Cor do texto contido na barra de navegao */
font-size: 12px; /* Tamanho da fonte utilizada na barra de navegao
em pixels */
font-weight: bold; /* Declara o estilo da fonte na barra de navegao */
text-decoration: none; /* Retira o sublinhado dos links */
text-transform: uppercase; /* Texto dos links em maisculas independentemente
da marcao */
padding: 9px 15px 9px 15px; /* Ajusta o tamanho do fundo para o estado
over */
}

#imagemhome { /* Declaraes da div#imagemhome */
position: relative; /* Declara o estilo de alinhamento da div em relao tela */
width: 980px; /* Declara o a largura da div em pixels / O valor da largura
o mesmo da imagem */
height: 360px; /* Declara a altura da div em pixels / O valor da altura
o mesmo da imagem */
border-width: 0 1px 0 1px; /* Define o valor de todas as bordas da div em pixels */
border-color: #002b67; /* Define a cor da borda da div */
27

z-index: 2; /* Posiciona o contedo da div acima ou abaixo de outra div,
dependendo do valor z-index */
margin-bottom: 10px;
}

#inferior { /* Declaraes da div#inferior */
position: absolute; /* Declara o estilo de alinhamento da div */
top: 175px; /* Declara o valor em pixels da posio do objeto na tela */
left: 0; /* Define o valor da orientao esquerda */
width: 100%; /* Declara que o contedo ocupar 100% da largura de tela
sem causar barra de rolagem horizontal */
height: 360px; /* Declara a altura da div em pixels */
background: #E2E2E2 url("../Imagens/fundo_centerhome.png");

/* Declara a cor de fundo para a div */
z-index: 1; /* Posiciona o contedo da div acima ou abaixo de outra div,
}

#rodape01 { /* Configuraes relacionadas div#rodape01 */
position: relative; /* Declara a posio da div na tela */
float: left; /* Declara uma flutuao da div no lado esquerdo */
width: 480px; /* Declara a largura da div em pixels */
border-width: 1px; /* Declara a borda da div com o valor em pixels */
border-color: #A4A4A4; /* Declara a cor da borda da div */
border-style: solid; /* Declara o estilo da borda declarada */
}

#rodape01 p { /* Configuraes da propriedade <p> da div#rodape01
*/
position: absolute; /* Declara a posio da div na tela */
margin: 10px; /* Zera as margens do pargrafo dentro do rodap
evitando que o contedo saia do rodap no firefox e no Google Chrome */
font-size: 12px; /* Declara o tamanho da fonte na propriedade <p> em
pixels */
top: 4px; /* Declara a posio da div na tela */
float: center; /* Declara uma flutuao da div no lado direito */
color: #000000; /* Declara a cor do texto da propriedade <p> */
text-align: justify; /* Define a justificao do contedo na propriedade <p> */
}

margin-left: 500px; /* Declara o valor da margem esquerda em pixels */
28

border-color: #A4A4A4; /* Declara a cor da borda da div */
}

ul#nav2 { /* Declaraes para padronizar margens e paddings em
diferentes navegadores */
position: absolute;
left: 0;
top: 11px;
margin-right: 5px;
margin: 0;
padding: 0;
}
ul#nav2 li {
left: auto;
display: inline; /* Coloca os itens da lista na horizontal */
margin-right: 0; /* Insere um espao entre cada item da lista */
list-style: none; /* Retira o marcador padro das listas */
text-align: center;
margin-top: 10px;
margin-bottom: 5px;
}
ul#nav2 li a {
float: center; /* Corrige bug da expanso do fundo no estado over no IE7 */
color: #FFF;
font-size: 11px;
font-weight: bold;
text-decoration: none; /* Retira o sublinhado dos links */
text-transform: uppercase; /* Texto dos links em maisculas
independentemente da marcao */
padding: 3px 7px 3px 7px; /* Ajusta o tamanho do fundo para o estado over */
}

top: 645px; /* Declara o valor em pixels da posio do objeto na
tela */
background: #002b67; /* Declara a cor de backgound da div */
border-color: #002b67; /* Declara a cor da borda da div */
}
#rodape03 p { /* Configuraes da propriedade <p> na
div#rodape03 */
29

margin: 0; /* Zera as margens do pargrafo dentro do rodap
evitando que o contedo saia do rodap no firefox e no Google Chrome */
pixels */
float: right; /* Declara uma flutuao da div no lado direito */
right: 10px; /* Declara a margem direita da propriedade <p> */
color: #E7E7E7; /* Declara a cor do texto da propriedade <p> */
margin-bottom: 5px; /* Declara o valor da margem inferior em pixels
*/
}

/* AQUI ACABAM AS CONFIGURAES DAS DIV'S RELACIONADAS HOME DO
SITE - INDEX.HTML */
/* AQUI COMEAM AS CONFIGURAES DAS DIV'S RELACIONADAS AO LINK "O
VALE" DO SITE - VALE.HTML */

#nav3 {
margin: 0;
padding: 0;
background: #002b67;
width: 180px;
float: left; /* Contm itens da lista deslocados */
}

#nav3 li {
list-style: none;
margin: 0;
padding: 0;
float: left; /* Isso corrige o erro do */
width: 100%; /* Isso corrige o erro do */
}

#nav3 a {
display: block; /* Para aumentar a rea clicvel j que o padro de a
inline */
color: #FFF;
text-decoration: none;
padding: 0 15px;
line-height: 2.6;
border-bottom: 0 solid #FFF;
}

#nav3 #nav3_con a {
border: none;
}
30

#nav3 a:hover {
background: #4392ff;
}

#descricao {
position: absolute; /* Cria um contexto de posicionamento incio das
iguais */
margin-top: 60px;
*/
margin-left: 40px;
text-align: justify;
}

#auxiliar {
width: 350px;
float: right;
margin-top: 80px;
margin-bottom: 50px;
margin-right: 40px;
}

div#auxiliar ul {
margin: 0;
padding: 0;
list-style: none;
}

div#auxiliar li img {
display: block;
}
div#auxiliar li {
color: #0056a6;
font-weight: bold;
text-align: center;
}

div#auxiliar li img {
margin-top: 0;
margin-bottom: 0px;
}
31

}

#rodape04 p { /* Configuraes da propriedade <p> na div#rodape03
*/
margin: 0; /* Zera as margens do pargrafo dentro do rodap evitando
que o contedo saia do rodap no firefox e no Google Chrome */
pixels */
margin-bottom: 5px; /* Declara o valor da margem inferior em pixels */
}

#central {
position: absolute;
float: left;
width: 792px;
height: 253px;
margin-left: 189px;
}

#texto {
iguais */
margin-top: 290px;
*/
margin-left: 40px;
32

}

top: 790px; /*Declara o valor em pixels da posio do objeto na tela */
}

*/
margin: 0; /* Zera as margens do pargrafo dentro do rodap evitando
pixels */
}

#inferior01 { /* Declaraes da div#inferior */
background: #f2f2f2; /* Declara a cor de fundo para a div */
z-index: -1; /* Posiciona o contedo da div acima ou abaixo de outra div,
}

/* Cidades */

#texto02 {
iguais */
33

margin-top: 290px;
*/
margin-left: 40px;
}

}

*/
margin: 0; /*Zera as margens do pargrafo dentro do rodap evitando
pixels */
}

#inferior02 { /* Declaraes da div#inferior */
background: #f2f2f2; /* Declara a cor de fundo para a div */
z-index: -2; /* Posiciona o contedo da div acima ou abaixo de outra div,
}
34

4.2. XHTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml= lang="pt-br" lang="pt-br">

<head>
<link rel="stylesheet" type="text/css" href="Estilos/estilo_principal.css" media="all" />
<title> Movimento.com - O local de todos os locais! </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-language" content="pt-br" />
<meta name="description" content="Movimento.com - Turismo diurno e noturno
em So Jos dos Campos e no Vale do Paraba" />
<meta name="author" content="Luana Aparecida Capellini - Erik Stevan - Edson
Ramiro Bertolani - Guilherme Justo" />
</head>
<body>

<div id="tudo"> 

<div id="topo">

</div> 

<div id="barra"> 
<ul id="nav">

<li><a href="index.html">Incio</a></li>
<li><a href="vale.html">O Vale</a></li>
<li><a href="cidades.html">Cidades</a></li>
<li><a href="contato.html">Contato</a></li>
<li><a href="mapa.html">Mapa do Site</a></li>
</ul>
</div> 
<div id="imagemhome"> 
<img src="Imagens/img_centrohome.jpg" />
</div> 

<div id="inferior"> 
</div> 

35

<div id="rodape01"> <div id="rodape02"> <ul id="nav2">
<li><a href="sjcampos.html"> <img src="Imagens/portfolio01.jpg" title="So Jos
dos Campos" /> </a> </li>
<li><a href="guararema.html"> <img src="Imagens/portfolio02.jpg"
title="Guararema" /> </a> </li>
<li><a href="guaratingueta.html"> <img src="Imagens/portfolio03.jpg"
title="Guaratinguet" /> </a> </li>
<li><a href="pinda.html"> <img src="Imagens/portfolio04.jpg"
title="Pindamonhangaba" /> </a> </li>
<li><a href="taubate.html"> <img src="Imagens/portfolio05.jpg" title="Taubat" />
</a> </li>
<li><a href="aparecida.html"> <img src="Imagens/portfolio06.jpg"
title="Aparecida" /> </a> </li>
<li><a href="jordao.html"> <img src="Imagens/portfolio07.jpg" title="Campos do
Jordo" /> </a> </li>
<img src="Imagens/barra_rodape02.jpg">
</ul>
</div> 

<div id="rodape03"> 
<p> Movimento.com - Todos os direitos reservados <p>
</div> 

</body>
</html>
36

5. REFERENCIAS BIBLIOGRFICAS
ADAMS, Cameron. ET AL. A Arte e a Cincia da CSS. 1 Edio -
Reimpresso. Local: So Paulo. Bookman, 2010.
Biblioteca Virtual. disponvel em<http://www.bibliotecavirtual.sp.gov.br/turismo-
interior-valetecnologico.php>. Acesso em 04 jun. 2012.
Eco Viagem. Disponvel em: <http://ecoviagem.uol.com.br/brasil/sao-
paulo/aparecida/>. Acesso em 04 jun. 2012.
Baixaki. disponvel em:
<http://www.baixaki.com.br/imagens/wpapers/BXK18321_dsc05446-aparecida-catedral-
sp800.jpg>. Acesso em: 02 jun. 2012.
Caminho de Santiago. Disponvel em:
<http://www.caminhodesantiago.com/walter_jorge/img/pindamonhangaba.jpg>. Acesso
em: 02 jun. 2012.
Guararema. Disponvel em:
<http://2.bp.blogspot.com/_esD6aRur2q0/S87xgWacBvI/AAAAAAAASh0/gB8gbJeCAV0
/s1600/guararema+-+pra%C3%A7a+com+coreto.jpg>. Acesso em 02 jun. 2012.
Paraibuna. Disponvel em: <http://3.bp.blogspot.com/--
b3GwFUymrY/Tp7Ksn7B9RI/AAAAAAAAYQI/FqucbNXm5D8/s1600/paraibuna.jpg>.
Acesso em: 02 jun 2012.
Disponvel em:
<http://3.bp.blogspot.com/_6NkubiuHjI0/S8hPCyCBDKI/AAAAAAAADAg/YYZkNPfJUt8/
s1600/93982.jpg>. Acesso em: 02 jun. 2012.
Mundi. Disponvel em: <http://img.mundi.com.br/images/Guaratingueta-
photo457845-5.jpg>. Acesso em 02 jun. 2012.
37

Paginas VIP. Disponvel em:
<http://www.pagvip.com.br/pagvip_934_5793.jpeg>. Acesso em 02 jun. 2012.
Prefeitura de Guararema. Disponvel em: <http://www.guararema.sp.gov.br/>.
Acesso em 04 jun. 2012.
Prefeitura de Guaratinguet. disponvel em:
<http://www.guaratingueta.sp.gov.br/novo/index.php?sitesig=PMGUARA&page=PMGU
ARA_0300_Turismo>. Acesso em 04 jun. 2012.
Prefeitura de Pindamonhangaba. Disponvel em:
<http://www.pindamonhangaba.sp.gov.br/materia.asp?cat=6>. Acesso em 04 jun. 2012.
Prefeitura de Paraibuna. Disponvel em: <http://paraibuna.sp.gov.br/info.php>.
Acesso em 04 jun. 2012.
Prefeitura de So Jos dos Campos. Disponvel em:
< http://www.turismo.sjc.sp.gov.br>. Acesso em 04 jun. 2012.
Prefeitura de Taubat. Disponvel em: <http://www.taubate-
sp.com.br/turismo.htm>. Acesso em 04 jun. 2012.
SILVA, Mauricio Samy. Criando sites com HTML. 1 Edio. Local: Brasil.
Novatec, 2008.
Vale do Paraba. Disponvel em:
<http://www.valedoparaiba.com/cidadesdaregiao>. Acesso em: 01 jun. 2012.

APS Turismo

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

APS Turismo

Transféré par

Droits d'auteur :

Formats disponibles

UNIVERSIDADE PAULISTA

EDSON RAMIRO BERTOLANI

Vous aimerez peut-être aussi