TCC - Técnico em Informática 2009

CEGEP- Centro Guaçuano de Educação Profissional

“Governador Mário Covas”

Curso Técnico em Informática – 3º módulo A

WEBSITE-IGREJA VIDA

Mogi Guaçu –SP

Novembro DE 2009

David Willian da Costa, nº 01

Marcel N. B. Sugimoto, nº 05

WEBSITE-IGREJA VIDA

Trabalho realizado para

conclusão do curso técnico em

Informática, sob orientação do

professor João Paulo Barbosa.

Mogi Guaçu –SP

Novembro DE 2009

FOLHA DE APROVAÇÃO

_______________________

João Paulo Barbosa

_______________________

José Luiz Kemp

_______________________

Iohanny Fernanda Ricardo

_______________________

Valéria Cristina de Morais Gotti

Aos nossos professores Iohanny, Kemp, Márcia e Elias, pela dedicação e

sabedoria que nos foram passadas neste período do 3º Módulo de Informática.

Além é claro, de todos nossos colegas que estiveram conosco durante essa

fase de nossas vidas, e todos os outros professores dos outros módulos, que foram

essenciais para nosso aprendizado.

Em especial, agradecemos ao professor João Paulo Barbosa, que, com

paciência e dedicação nos orientou para o desenvolvimento deste trabalho.

Obrigado!

Dedico primeiramente a Deus que sempre foi meu incentivo e minha razão de

viver, a minha noiva Évelin que sempre esteve ao meu lado “pegando no meu pé”

pra que este trabalho fosse realizado.

Aos meus chefes Valdir e João que me deram férias para realizar este

trabalho.

A todos os amigos que direta ou indiretamente contribuíram para conclusão

deste Trabalho.

Muito Obrigado. David W. da Costa

Dedico este trabalho a todos aqueles que estiveram sempre ao meu lado

durante a realização deste, ao meu parceiro David, que permitiu que eu conhecesse

um pouco mais sobre esta entidade tão querida por ele e a nossos professores, que

mais do que apenas professores, são companheiros.

Com carinho, Marcel N. B. Sugimoto

“Porque melhor é a sabedoria do que as jóias, e de tudo o que se deseja nada se

pode comparar com ela.”

Provérbios 8:11

SUMÁRIO

Introdução ........................................................................................................... 01

1 - Materiais e Métodos ....................................................................................... 02

1.1 - Linguagens Utilizadas ................................................................................. 02

1.1.1 - HTML ....................................................................................................... 02

1.1.1.1 - Características do HTML ....................................................................... 03

1.1.1.2 - Estrutura Básica do HTML .................................................................... 03

2 - Tags e Seus Significados ............................................................................... 05

2.1 - Tags <html> e </html> ................................................................................ 05

2.2 - Tags <head> e </head> .............................................................................. 05

2.3 - Tags <title> e </title> ................................................................................... 06

2.4 - Tags <body> e </body> .............................................................................. 06

2.5 - Tags <table> e </table> .............................................................................. 06

2.6 - Outras tags de formatação .......................................................................... 07

2.7 - Comandos complementares de algumas tags: ........................................... 07

3 - JavaScript ...................................................................................................... 08

4 - CSS ................................................................................................................ 09

5 - Ferramentas utilizadas para criação do WebSite ............................................ 10

5.1 - Bloco de Notas ............................................................................................. 10

5.2 - Macromedia Dreamweaver 8 ....................................................................... 11

5.3 - Xara Webstyle 3.0 ....................................................................................... 13

5.4 - Adobe PhotoShop CS4 ................................................................................ 14

5.5 - Corel Draw X4 .............................................................................................. 15

5.6 - Adobe Flash CS4 ......................................................................................... 16

6 - Documentação ................................................................................................ 17

7 - Codificação do Site ......................................................................................... 18

8 - Mapa do Site ................................................................................................... 26

Conclusão ........................................................................................................... 30

Referências Bibliográficas ................................................................................... 31

LISTA DE FIGURAS

Figura 1 - Bloco de Notas .................................................................................... 09

Figura 2 - DreamWeaver ..................................................................................... 10

Figura 3 - Xara WebsTyle ................................................................................... 11

Figura 4 - PhotoShop ........................................................................................... 12

Figura 5 - Corel Draw ........................................................................................... 13

Figura 6 - Flash .................................................................................................... 14

Figura 7 - Página Inicial ........................................................................................ 16

Figura 8 - Página Home ....................................................................................... 18

Figura 9 - Página Inicial ........................................................................................ 24

Figura 10 – Home ................................................................................................. 24

Figura 11 - Conheça os Pastores ......................................................................... 25

Figura 12 - Bíblia Online ....................................................................................... 25

Figura 13 - Orações ............................................................................................. 26

Figura 14 - Downloads ......................................................................................... 26

Figura 15 - Wallpapers ......................................................................................... 27

Figura 16 - Estudos .............................................................................................. 27

Introdução

O trabalho a ser apresentado é um website que foi desenvolvido com o intuito

de levar o usuário cristão e não cristão a ter um vasto conhecimento sobre a Igreja

Vida, podendo o mesmo estudar e ter acesso a conteúdos diretamente da Internet.

Sabendo que uma entidade, organização e uma empresa necessitam para

sua divulgação de um site, resolvemos criar para a Igreja Vida a sua própria página

de internet, com relatos, idéias, estudos, arquivos e conhecimentos.

Partindo do principio de que a tecnologia avança com grande intensidade em

um espaço de tempo pequeno, não poderíamos deixar de utilizar tal recurso de

divulgação da informação, para melhor amplitude do conhecimento da igreja, ou

seja, independentemente do local onde estiver.

Para que acontecesse tudo isso, procuramos pesquisar na internet e através

de livros, recursos e informações onde pudéssemos divulgar por intermédio do site

da igreja vida, links de outros sites correlatos.

O site da igreja vida foi desenvolvido através das seguintes linguagens de

programação:

HTML;

JavaScript;

CSS.

E as seguintes ferramentas:

Macromedia Dreamweaver 8;

Bloco de notas;

Xara Webstyle 3.0;

Adobe PhotoShop CS4;

Corel Draw X4;

Flash CS4;

1 - Materiais e Métodos

As linguagens base utilizadas neste website foram HTML e Java Script, com

ênfase em HTML sendo que o mesmo foi utilizado para a escrita e formatação da

página em web, e o Java Script utilizado para criar interação com o usuário.

Em seguida analisaremos informações sobre linguagens de programação

utilizadas, e alguns aplicativos para o desenvolvimento do website.

1.1 - Linguagens Utilizadas

1.1.1 - HTML

O HTML (Hyper Text Markup Language) é uma linguagem de elaboração de

documentos com hipertextos, funcionando como se fosse sinais enviados para uma

página da Web, cuja função é enviar para o navegador instalado (Internet Explorer,

Netscape, Firefox, etc.) comandos de formatação que informe ao navegador qual é o

tipo de informação como textos, imagens, tabelas, etc. que deverão ser exibidas na

tela.

Para efetuar uma escrita em HTML você pode utilizar de qualquer editor de

texto, desde que ao salvar um documento, este seja salvo em HTML.

HTML é uma linguagem com a qual se

definem as páginas web. Basicamente

trata-se de um conjunto de etiquetas

(tags) que servem para definir a forma na

qual se apresentará o texto e outros

elementos da página (ALVAREZ, Miguel

Ângelo,2009).

Você pode também utilizar de editores HTML, que facilitam o

desenvolvimento de web site, no caso deste website foram utilizados:

Macromedia Dreamweaver 8;

Bloco de notas;

Notepad ++.

1.1.1.1 - Características do HTML

Documentos HTML são arquivos escritos em ASCII – texto;

Podem ser criados em qualquer editor de texto;

A unidade mínima de informação é a “página”;

É uma linguagem de marcação e não de programação.

Seus comandos recebem o nome de tags (tags são rótulos usados

para informar ao navegados como deve apresentar um website).

A maioria dessas tags aparece em pares, uma iniciando e outra

terminando o mesmo bloco.

Exemplo:

<HEAD>e</HEAD>, <BODY>e</BODY>

As tags estão sempre contidas entre sinais de menor que e maior que

“<” ”>”.

As tags podem ser escritas com letras maiúsculas e minúsculas.

Exemplo:

<BODY>, <body>, <Body>, <BoDy>.

1.1.1.2 - Estrutura básica do HTML

Todo documento HTML inicia-se por uma tag <HTML> e se encerra por uma

tag </HTML>.

O documento HTML consiste em duas partes (cabeçalho e corpo). O

cabeçalho contém informações a respeito do documento como, o título. O corpo

contém o documento propriamente dito. Assim sendo, um documento escrito em

HTML deverá ter, no mínimo, a seguinte estrutura:

<html>

<head>

<title>Igreja Vida </title>

</head>

<body>

...conteúdo da página.

</body>

</html>

2 - Tags e seus significados

São estruturas de linguagem de marcação que consistem em breves

instruções, tendo uma marca de início e outra de fim. Há uma tendência nos dias

atuais para se usar as tags apenas como delimitadores de estilo e/ou conteúdo,

tanto em HTML quanto em XML.

2.1 - Tags <html> e </html>

Esta tag tem por função indicar ao navegador que o documento que está

sendo lido é na linguagem HTML, o que as tornam as mais importantes tags de uma

página.

Elas têm por obrigação iniciar e encerrar uma página, e todo conteúdo da

página deve estar dentro destas tags.

Exemplo:

<html>

...página a ser exibida

</html>

2.2 - Tags <head> e </head>

Indicam quais os comandos que deverão ser lidos pelo browser antes que a

página seja carregada, servindo de cabeçalho para a página, como títulos a ser

inseridos na janela do navegador. Na ordem da linguagem HTML, a tag <head>

vem logo abaixo da tag <html>.

Exemplo:

<head>

...cabeçalho

</head>

2.3 - Tags <title> e </title>

A tag title indica que o assunto abordado aparecerá na barra de título do

browser. Estas tags sempre estarão contidas na tag <head>.

Exemplo:

<title>...texto do título... </title>

2.4 - Tags <body> e </body>

Contém todo o restante de uma página escrita em HTML, contendo todo o

corpo do documento. Hierarquicamente ela vem logo após a tag <head> e de

finalização vem anteriormente a tag </html>.

Exemplo:

<body>

...conteúdo da página

</body>

2.5 - Tags <table> e </table>

As tabelas são ferramentas poderosas para a apresentação de dados

tabulares e para a definição do layout de textos e gráficos em uma página HTML.

Uma tabela consiste em uma ou mais linhas, sendo que cada linha é formada

por uma ou mais células. Embora normalmente as colunas não sejam especificadas

de forma explícita no código HTML, permite-se a manipulação delas, bem como

linhas e células.

Além disso, as tabelas são muito importantes para o design de uma home-

page, pois por elas podem ser feitos alinhamentos que dificilmente seriam possíveis

com simples comandos.

As tabelas são descritas por linhas da esquerda para a direita. Cada uma

dessas linhas será definida por outro par de tags: <tr> e </tr>.

Ainda dentro de cada linha, haverá diferentes colunas que serão definida por

outro par de tags: <td> e </td>. Dentro desta tag será onde colocaremos nosso

conteúdo.

Exemplo:

<table>

<tr>

<td>Célula 1-1 </td>


</tr>

<tr>



</tr>

</table>

2.6 - Outras tags de formatação

<A href= “...” > </a> - link.

<br> - quebra de linha.

<p> - parágrafo.

<i> </i> - itálico.

<b> </b> - negrito.

2.7 - Comandos complementares de algumas tags:

Border: Borda do objeto.

Height: Altura do objeto.

Width: Comprimento do objeto.

Backgroud: Controla o fundo do documento.

Bgcolor: Altera a cor do plano de fundo.

Scrolling: Controla o aparecimento da barra de rolagem.

3 - JavaScript

O JavaScript é uma linguagem de programação baseada na linguagem JAVA.

É destinada para o uso em páginas Web(client-side) ou em servidores web (server-

side),a Netscape foi a primeira a introduzir o JavaScript em seu browser na versão

2.0. Já a Microsoft passou a incorporar alguns recursos apenas no Internet Explorer

3.0.

Esta linguagem de programação permite ao programador ter acesso a

elementos de uma página web, como imagens, elementos de um formulário links

etc.

Estes objetos podem ser manipulados ou mudados via programação, pois o

JavaScript permite também ao programador capturar eventos, como um click do

mouse ou uma tecla pressionada de seu teclado, isto lhe dá a capacidade de poder

criar ações baseadas nas ações do usuário.

O JavaScript é em si, uma grande linguagem de programação, que oferece ao

programador web muitas recursos, os quais podem ser executados facilmente.

Ao decorrer do tempo outros browsers também incorporaram o JavaScript, e

esta linguagem foi crescendo cada vez mais e estendendo seu suporte. Logo os

fabricantes de browsers também deveriam ir se atualizando, mas a Microsoft para

não ficar para trás inventou o JScript, que na verdade é a mesma linguagem que o

JavaScript, porém com alguns recursos adicionais, o que gerou incompatibilidade da

linguagem entre os browsers, como por exemplo a propriedade document.all, que

traz grandes problemas para programadores em JavaScript, porque ela não existe

no Netscape, somente no Internet Explorer.

4 - CSS

CSS (Cascading Style Sheets / Folha de Estilos em Cascata) é uma

linguagem para estilos que define o layout de documentos HTML. Por exemplo, CSS

controla fontes, cores, margens, linhas, alturas, larguras, imagens de fundo,

posicionamentos e muito mais.

A Cascading Style Sheet (CSS) é uma ferramenta utilizada para a construção da aparência de páginas para Web. Permite o uso de uma técnica diferente da convencional (HTML puro), possibilitando uma considerável redução no tempo de trabalho.(PAULO, Vandré, 2009).

O HTML pode ser usado para definir o layout de websites. Contudo CSS

proporciona mais opções e é mais preciso e sofisticado. O CSS é suportado por

todos os navegadores atuais.

Os benefícios da utilização do CSS são:

Controle do layout de vários documentos a partir de uma simples folha de

estilos;

Maior precisão no controle do layout;

Aplicação de diferentes layouts para servir diferentes mídias (tela, impressora,

etc.);

Emprego de variadas, sofisticadas e avançadas técnicas de desenvolvimento.

5 - Ferramentas utilizadas para criação do WebSite

Foram utilizadas as seguintes ferramentas para a criação do webSite:

Bloco de Notas: Foi utilizado para realizar algumas alterações de códigos na

ausência de outras ferramentas que pudessem ser utilizadas.

Macromedia Dreamweaver 8: Este foi o principal aplicativo para a criação do

WebSite, desde a formatação de um simples texto até a utilização de arquivos

mais complexos como incorporação de tabelas em JavaScript e CSS.

Xara Webstyle 3.0: A finalidade desta ferramenta no projeto foi de criar

botões e banners com animações em gifs.

Adobe PhotoShop CS4: Esta ferramenta foi de grande importância para

alterações de logotipos, melhorar a qualidade da imagem, tirar o fundo da

imagem, enfim, manipulação de imagens em geral.

Corel Draw X4: Quase toda parte de logotipos, banners e alguns botões

foram criados com esta ferramenta.

Adobe Flash CS4: Foi utilizado na criação da animação inicial “cruz”.

5.1 - Bloco de Notas

Figura 1. Bloco de Notas

O Bloco de Notas é um editor de textos simples que foi incluído em todas as

versões Microsoft Windows desde a versão 1.0 em 1985, ele é utilizado para criar

documentos simples, seu uso mais comum é para edição de arquivos de texto (.txt).

Como o Bloco de Notas oferece suporte apenas para formatações básicas,

não é possível salvar acidentalmente uma formatação especial em documentos que

devem permanecer como texto puro. Isso é especialmente útil ao criar documentos

HTML para uma página da Web, uma vez que caracteres especiais ou outra

formatação não podem aparecer na página da Web publicada, pois podem causar

erros.

5.2 - Macromedia Dreamweaver 8

Figura 2. DreamWeaver

O Macromedia Dreamweaver 8 é um editor de HTML profissional para

desenhar, codificar e desenvolver sites, páginas e aplicativos para a Web. Ele

permite trabalhar com codificação manual HTML, e também com ambiente de edição

visual.

O Dreamweaver fornece ferramentas úteis para aprimorar a sua experiência

de criação para Web. Os recursos de edição visual do Dreamweaver permitem criar

páginas, de modo rápido, sem que seja necessário escrever uma única linha de

código. É possível visualizar todos os elementos ou propriedades do site e arrastá-

los de um painel fácil de usar diretamente para um documento.

O Dreamweaver 8 um poderoso ambiente de desenvolvimento

para a construção de sites dinâmicos que fazem o uso de

bancos de dados, scripts executados no cliente e tecnologia de

servidor, como ASP (Active dinamic Server Pages), Cold

Fusion e JSP (Java Server Pages). eEainda ele suporta os

mais recentes padrões adotados na web, tais como XHTML e

CSS. (LEVY, Roberto, 2009).

Permite também a dinâmica de desenvolvimento de sites criando e editando

as imagens no Fireworks da Macromedia ou em outro aplicativo gráfico e,

posteriormente, importando-as diretamente para o Dreamweaver ou incluindo

objetos do Flash da Macromedia.

O Dreamweaver também fornece um ambiente de codificação completo que

inclui ferramentas de edição de códigos (como codificação por cores e

preenchimento de tags) e material de referência de linguagens sobre CSS,

JavaScript e ColdFusion Markup Language (CFML), entre outros.

A tecnologia HTML do Macromedia Roundtrip permite importar documentos

HTML codificados manualmente sem reformatar o código. Ele também permite criar

aplicativos dinâmicos e com suporte de banco de dados para a Web, utilizando

tecnologia de servidor como CFML, ASP.NET, ASP, JSP e PHP.

5.3 - Xara Webstyle 3.0

Figura 3. Xara WebStyle

É um editor gráfico onde é possível a criação de banners, menus, botões,

imagens, logos, textos, bullets, entre outros. Ele fornece as bases e você modifica a

formatação do conteúdo de modo fácil e rápido, deixando o site com uma melhor

aparência.

5.4 - Adobe PhotoShop CS4

Figura 4. PhotoShop

O PhotoShop CS4 é uma das ferramentas mais utilizadas no tratamento e

criação de imagens, ele permite desde pequenos ajustes nas imagens até desenhos

em 3D.

Neste WebSite ele foi utilizado para ajustar algumas imagens e criação de

alguns logotipos juntamente com o CorelDraw.

5.5 - Corel Draw X4

Figura 5. Corel Draw

O Corel Draw é um dos programas de edição gráfica mais utilizados no

mundo, ele permite a criação de logotipos, ajustes em imagens, vetorização, criação

de banners, impressões de imagens, entre outros.

Esta versão foi criada visando o aperfeiçoamento dos layouts, melhorias para

texto, novos recursos em design, nova interface de usuário e fluxo de trabalho

aperfeiçoado.

Neste projeto a maioria dos banners foram criados através deste programa,

pois além de facilitar a criação dos banners ele tem o recurso de converter em .jpg

todas os banners criados, além disso alguns botões como o de avançar foram

criados no Corel Draw.

5.6 - Adobe Flash CS4

Figura 6. Flash

É uma ferramenta de autoria e edição de imagens vetoriais com animação,

som e interatividade. Baseada em imagens vetoriais, possibilita a criação de efeitos

avançados em arquivos bastante pequenos.

Além de imagens vetoriais, ao conteúdo Flash pode ser acrescentado

arquivos bitmaps, sons, vídeos, etc.

As imagens vetoriais não são geradas por meio da combinação de pontos de

imagem, e sim criadas a partir de cálculos matemáticos executados pelo

computador. Isto significa que os arquivos que contém essas imagens armazenam

somente as fórmulas matemáticas que representam formas, curvas e cores, e,

portanto são muito pequenos.

Assim, um arquivo que contenha o desenho de um círculo com 1 centímetro

de diâmetro terá exatamente o mesmo tamanho se o círculo tiver 20 centímetros.

Outra vantagem é que, ao serem ampliadas, não perdem absolutamente nada

em qualidade. A desvantagem das imagens vetoriais é a impossibilidade de

representar imagens mais complexas e realistas com qualidade fotográfica.

Podemos criar desde simples faixas animadas com anúncios para páginas da

WEB, menus interativos, desenhos animados, arquivos executáveis, gifs animados,

etc.

O Flash foi utilizado neste projeto para a criação da cruz na página inicial.

6 - Documentação

Levantamento de Dados

Foi analisada primeiramente a necessidade por parte da Igreja Vida de

divulgar o trabalho que vem sendo feito, e mais do que isso a necessidade de

propagar a Palavra de Deus.

E não existe meio melhor para isto que utilizar da Internet como meio de

propagação, foi daí que surgiu a idéia de criarmos um site que será colocado logo

em uso.

Este WebSite diferencia dos outro pela grande quantidade de

entretenimentos, desde estudos bíblicos até download de músicas.

Este projeto foi testado em seis navegadores (Mozzila Firefox, Netscape-

Navigator 9.0.0.6 e o Internet Explore 8, Avant Browser, Opera e Safári) onde, de

todos estes o único que obteve diferença foi o Safári.

7 - Codificação do site

O desenvolvimento do site foi inteiramente feito por tabelas e CSS.

A única página que não foi utilizado CSS foi a página inicial, pois foi utilizado

uma apresentação em Flash. Iríamos primeiramente utilizar Frames, mas

verificamos que além de dificultar o trabalho não sanaria o problema.

Daí veio à idéia das tabelas que além de organizar alguns itens iria modificar

na aparência do site. Mas não adiantaria utilizar apenas tabelas quando a nossa

necessidade seria de modificar vários objetos do lugar, para isso utilizamos o CSS.

Nosso site está composto da seguinte forma:

Página Inicial

Figura 7. Página Inicial

APRESENTAÇÃO

EM

FLASH

LOGO

HOME

Inicio do Código

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>TELA INICIAL</title>

<style type="text/css">

Plano de Fundo

<body bgcolor="White" background="Inicio.jpg";white: 800;HEIGHT:600;>

Comando para inserir música no site <embed src = “...”>

<div align="right">

<embed src="03__You_Are_My_World.mp3" width="1" height="1"></embed>

<br>

</div>

</div>

Flash

<CENTER>

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"

codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.c

ab#version=7,0,19,0" width="550" height="400" align="absmiddle"

title="INICIO">

<param name="movie" value="Inicial.swf" />

<param name="quality" value="high" />

<embed src="Inicial.swf" width="550" height="400" align="absmiddle"

quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer"

type="application/x-shockwave-flash"></embed>

</object>

</CENTER>

</head>

Inicio do Corpo da Página <body>

<br>

Comando para inserir uma imagem <IMG SRC= “...>

<div align= "center">

<img src="Logos/Logo Igreja.jpg" alt="Iniciar" width="100" border="0" />

LOGO

MENUS

CORPO

CS

S -

FU

ND

O

CS

S -

FU

ND

O

</div>

<div align="center">

<h3 class="style3">

Comando para abrir um link < a href="…”> ... </a>

<a href="HOME.HTML" class="style2"> Home</a> </h3>

</div>

</body>

</html>

Página Home

Figura 8. Home

Será feita uma divisão do código fonte para melhor visualização:

Início do Código

<!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">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>HOME</title>






</style>

<script type="text/JavaScript">



</script>

</head>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>IGREJA VIDA</title>

</head>




; left: 97px;

height: 153px;

.style5 {

color: #0000FF;

font-weight: bold;

font-size: 13px;

}

.style6 {

color: #be1a19;

font-weight: bold;

font-size: 14px;

}

.style11 {font-family:Verdana; text-decoration:underline; font-size: 11px;}

</style>

Menu

<div id="box_main">

<table width="830" border="0" align="center" cellspacing="0"

bordercolor="#B2B4BF">

<tbody>

<div id="img"><center><img src="Top1.jpg" width="730" height="130"

border="1" /></center></div>

<tr><br>

<td width="900" height="15" bordercolor= "00FFFFF"

bgcolor="#00FFFF" class="style12">

<div style="padding: 1px 0pt 0pt 34px;">

<span class="head4"><a href="HOME.html"

class="style11">HOME</a></span>

<img align="botton.gif" style="margin-left: 16px;

margin-right: 7px;" src="q6.jpg"/>

<span class="head4"><a href="CONHEÇA OS PASTORES.html"

class="style11">CONHEÇA OS PASTORES</a></span>

<img align="botton.gif"

style="margin-left: 16px; margin-right: 11px;" src="q6.jpg"/>

<span class="head4"><a href="Biblia.html"

class="style11">BÍBLIA ON-LINE</a></span>



<span class="head4"><a href="ORAÇÕES.html"

class="style11">ORAÇÕES</a></span>



<span class="head4"><a href="DOWNLOAD.html"

class="style11">DOWNLOAD</a></span>



<span class="head4"><a href="WALLPAPERS.html"

class="style11">WALLPAPERS</a></span> <img

align="botton.gif" style="margin-left: 16px; margin-right: 19px;"

src="q6.jpg"/>

<span class="head4 "><a href="ESTUDOS.html"

class="style11">ESTUDOS</a></span>

</span> </div>

 </td>

</tr>

</tbody>

</table>

Corpo

<div class="dealer">

<div align="justify">

<br>

<br>

<span class="style5"><span class="style6"><marquee>IGREJA-

VIDA</marquee></span><br /><br /></span><br /><br />



A Igreja Vida nasceu no dia 15 de Janeiro de 2001, na garagem de nossa casa

"do missionário R. A. Lima e da missionária Michele ", em Mogi Mirim, lugar

o qual, Deus nos permitiu ver muitos e maravilhosos milagres, abrimos a

porta do nosso lar, para que Jesus fizesse a vontade Dele, e em Mogi Guaçú

ela nasceu no dia 25 de abril de 2001.

<p align="right">

<a href="HISTÓRIA DA IGREJA VIDA.html" class="style11"><br>

<br>

<br>

<br>

<br>

<br>

CONHEÇA MAIS A IGREJA VIDA </a> </div>

</div>

<div align="right"><br>

<br>

<br>

<div class="dealer1"><br>

<br>

Imagem da Igreja Vida

<a href="Vida/A serviço do Rei/7.jpg"><img src="Vida/A serviço

do Rei/7.jpg" alt="Igreja Vida" width="376" align="right" height="287"

border = "2"/></a> </div>

</div>

</div>

Tabela Final

<center><table width="830" border="0" class="dealer2">

<tr>

<td><center>ENDEREÇO:Av. Mogi Mirim, 899 - Itacolomy - Mogi Guaçú - SP /

(pra baixo da Germânica, perto da Cotoca Calçados)</center></td>

</tr>

<tr>

<td><Center>Cultos: Terça-feira – 19:30h. - Culto da Vitória<br>

Quinta-feira - 19:30h. - Culto de Libertação

Domingo - 19:00h. - Culto de Prosperidade e Família<br></Center>

</td>

</tr>

</table>

</center>

Fim do Código

</body>

</html>

8 - Mapa do Site

O site foi organizado da seguinte forma:

A página Inicial que contém uma apresentação em Flash e um link para o

Home.

Figura 9. Página Inicial

A página home contém todos os menus do site, o endereço da igreja, o

banner com o logo e consta também parte da história da igreja sendo ela a página

principal

Figura 10. Home

Esta página contém a história dos pastores R.A. Lima, pastora Michele e

Pastor Marcelo Sanches fazendo citação da introdução do livro “Falsos Profetas:

Conscientes ou Enganados?" escrito pelo pastor Lima.

Figura 11. Conheça os Pastores

No menu Bíblia On-line contém links que facilitam ao usuário a navegação

pelo site www.bibliaonline.com.br fazendo assim a leitura da bíblia diretamente da

internet.

Figura 12. Bíblia Online

http://www.bibliaonline.com.br/

No menu orações, o usuário poderá mandar seu pedido de oração para a

igreja.

Este pedido é enviado diretamente para o e-mail da igreja.

Figura 13. Orações

Na página download, foram colocados arquivos para download,

apresentações em PPT, programas evangélicos, bíblia para download e um link de

músicas onde pode-se baixar arquivos em outros servidores ou diretamente do

WebSite.

Figura 14. Downloads

No menu wallpapers, foram utilizados imagens de diversos temas desde

infantis até mensagens de edificação, são dezenas de imagens que podem ser

salvas diretamente do servidor ou colocadas diretamente como wallpapers.

Figura 15. Wallpapers

No menu estudos, contém vários estudos e livros cristãos onde é possível

baixa-los em PDF ou então em .DOC, alguns estudos como “Games, RPGs, etc” e

“Dez mandamentos do namoro”, abrem uma nova página de estudos e você pode

imprimir diretamente do site.

Estes menus e links serão alterados e atualizados conforme a necessidade do

cliente.

Figura 16. Estudos

Tudo/Public_html/Folder/GAMES%20E%20RPGs.html

Conclusão

Concluímos que com todo o avanço tecnológico e o aumento do conforto e

comodidade foi preciso criar um site destinado à igreja vida, para melhor atender os

fiéis, tendo estes, os recursos e todas as facilidades que a internet proporciona.

O site foi bem aceito por todos os fiéis, que há tempos já estavam

desejando tal ferramenta de comunicação e pesquisa de informações pertinentes à

igreja vida.

Com o desenvolvimento deste projeto aprendemos a criar websites, com

diversas variações de linguagens de programação para tal. Aprendemos ainda a

utilizar alguns programas para manipulação de imagem e a postar/hospedar sites na

internet.

Durante o tempo de desenvolvimento, aprendemos o quanto é importante

valorizar o trabalho em equipe, valorizar os professores e os conhecimentos por eles

passados, desenvolver pesquisas em sites de internet e livros, além de aprender a

trabalhar sobre pressão e com prazo de entrega.

As principais desvantagens foram o curto prazo para desenvolvimento do

projeto e o reduzido número de aulas que foram causados por fatores externos, e

que dificultaram imensamente o trabalho dos professores quanto aos dos alunos.

Este trabalho foi muito prazeroso e proveitoso, onde todo o tempo dedicado

foi de extremo aprendizado e dedicação.

Referências Bibliográficas

Apresenta um artigo sobre o que é HTML, suas funções e como utiliza-lo. Disponível

em: http://www.criarweb.com/artigos/7.php ; acessado em 4 de novembro de

2009;

Revista PHP. Apresenta um artigo sobre CSS e suas funções. Disponível em:

http://www.revistaphp.com.br/artigo.php?id=119; acessado em 4 de novembro

de 2009;

Apresenta um artigo sobre o software Dreamweaver, suas funções e requisitos

mínimos do sistema operacional para utiliza-lo com sucesso. Disponível em:

http://www.htmlstaff.org/ver.php?id=988; acessado em 13 de novembro de 2009;

SILVA, JOEL JOÃO DA; RAMOS, RICARDO. Php para profissionais. São Paulo:

Digerati Books, 2007. 144p

AMARAL, LUIS GUSTAVO. Css - Cascading Style Sheets - Guia de Consulta

Rápida. São Paulo: Novatec.

PEREIRA, DOMÊNICO TURIM; PAULA, EVERALDO ANTÔNIO DE. Dreamweaver

8 - O Melhor e Mais Completo Editor de Html. São Paulo: Viena, 2007. 172p

http://www.criarweb.com/artigos/7.php

http://www.revistaphp.com.br/artigo.php?id=119

http://www.htmlstaff.org/ver.php?id=988

Documents

TCC - Técnico em Informática 2009