Você está na página 1de 44

MINISTÉRIO DA EDUCAÇÃO

SECRETARIA DE EDUCAÇÃO PROFISSIONAL E TECNOLÓGICA


INSTITUTO FEDERAL DE EDUCAÇÃO, CIÊNCIA E TECNOLOGIA
FARROUPILHA - CAMPUS SÃO VICENTE DO SUL
CURSO TÉCNICO EM INFORMÁTICA

DESENVOLVIMENTO WEB

RELATÓRIO DE ESTÁGIO CURRICULAR SUPERVISIONADO

Alcione Rosa de Morais

São Vicente do Sul, RS, Brasil


2010
MINISTÉRIO DA EDUCAÇÃO
SECRETARIA DE EDUCAÇÃO PROFISSIONAL E TECNOLÓGICA
INSTITUTO FEDERAL DE EDUCAÇÃO, CIÊNCIA E TECNOLOGIA
FARROUPILHA - CAMPUS SÃO VICENTE DO SUL
CURSO TÉCNICO EM INFORMÁTICA

DESENVOLVIMENTO WEB

por

Alcione Rosa de Morais

Relatório de Estágio de Habilitação Profissional apresentado como


requisito para obtenção do título de Técnico em Informática do Instituto
Federal Farroupilha - Campus São Vicente do Sul - RS

Orientador: Prof. Alecson Milton Almeida dos Santos

São Vicente do Sul, RS, Brasil


2010
DADOS DE IDENTIFICAÇÃO

1 Estagiário:
1.1 Nome: Alcione Rosa de Morais
1.2 Curso: Técnico em informática
1.3Turma: 25
1.4 Endereço: Paina
1.5 Município e estado: QUEVEDOS-RS
1.6 CEP: 98140-000
1.7 Telefone: (55) 91617407
1.8 E-mail: alcione-morais@hotmail.com

2 Empresa:
2.1 Nome: Núcleo de Educação a Distância
2.2 Endereço: Rua 20 setembro s/n - Centro
2.3 Município e estado: São Vicente do Sul – RS
2.4 CEP: 97420-000
2.5 Caixa Postal: 23
2.6 Telefone: (55) 3257-1114
2.7 Fax: 0xx (55) 222457502
2.8 E-mail: nead@iffarroupilha.edu.br

3 Estágio
3.1 Área de realização do estágio: Desenvolvimento Web
3.2 Coordenador do Curso: Rogério Cassanta Rosado
3.3 Professor Orientador no Instituto Federal Farroupilha – Campus São Vicente do Sul:
Alecson Milton Almeida dos Santos
3.4 Supervisor de Estagio na empresa: Jusseila Stangherlin
3.5 Carga horária total do estágio: 256 horas
3.6 Data do início e término: 07/04/2009 e 29/07/2009
MINISTÉRIO DA EDUCAÇÃO
SECRETARIA DE EDUCAÇÃO PROFISSIONAL E TECNOLÓGICA
INSTITUTO FEDERAL FARROUPILHA - CAMPUS SÃO VICENTE DO SUL
CURSO TÉCNICO EM INFORMÁTICA

O Supervisor da Empresa, Jusseila Stangherlin, o Orientador, Alecson Milton Almeida dos


Santos
,e o Estagiário, Alcione Rosa de Morais, abaixo assinados, cientificam-se do teor do Relatório
de Estágio Curricular Supervisionado do Curso Técnico em Informática.

DESENVOLVIMENTO WEB

Elaborado por
Alcione Rosa de Morais

Como requisito parcial para obtenção do título de


Técnico em Informática

Jusseila Stangherlin
(Supervisor de Estágio)

Alecson Milton Almeida dos Santos


(Orientador)

Alcione Rosa de Morais


(Estagiário)

São Vicente do Sul, 30 de julho de 2010


AGRADECIMENTOS

A Deus

Agradeço primeiramente a Deus por todas as bênçãos que me concedeu, que muitas pessoas
chamam de sorte ou de coincidência. Agradeço pela minha vida, por iluminar meu caminho e
pelas boas oportunidades que me surgiram, avaliadas por mim fornecidas por alguém que
cuida de nós como filhos.

Aos Pais

Aos meus pais, por tudo o que fazem por mim, pela disponibilidade e por todo o apoio
a mim depositado.

A Empresa

Agradeço à Empresa pela oportunidade dada para eu fazer meu estágio e por todo o
auxílio e incentivo por ela propiciado, ajudando na minha formação profissional.

Aos Professores

Agradeço aos professores por todo conhecimento por eles transmitido, e pelo apoio nas
dúvidas e erros.

Aos Colegas

Aos colegas do Curso de Técnico em informática, pelo compartilhamento de conhecimentos


e pelo apoio durante todo o curso.
SUMÁRIO:

LISTA DE FIGURAS.......................................................................................................7
LISTA DE SIGLAS...........................................................................................................8
LISTA DE ANEXOS.........................................................................................................9
1 INTRODUÇÃO..............................................................................................................10
2 ANALISE DO PROJETO..............................................................................................11
2.1 Objetivo da Página......................................................................................................11
2.2 Estrutura da Página....................................................................................................11
2.2.1 Definição conteúdo.....................................................................................................11
2.2.2 Criação do modelo......................................................................................................12
3 DESENVOLVIMENTO DA PÁGINA.........................................................................13
3.1 Definição das Tecnologias...........................................................................................13
3.2 Ferramentas adicionais...............................................................................................13
3.2.1 JAVASCRIPT............................................................................................................13
3.2.2 CSS.............................................................................................................................14
3.2.3 PHP.............................................................................................................................14
3.3 Ferramenta Microsoft Expression Studio 3 Build....................................................15
3.4 Criando a Página Inicial.............................................................................................18
3.5 Construção do Site.......................................................................................................22
3.6 VertrigoServ.................................................................................................................30
3.7 Construção do logotipo do NEAD..............................................................................32
4 CONCLUSÃO.................................................................................................................34
REFERÊNCIAS BIBLIOGRÁFICAS............................................................................35
LISTA DE FIGURAS:

Figura 1- Área de trabalho Microsoft Expression Studio 3 Build............................16


Figura 2- Detalhes da ferramenta Microsoft Expression Studio 3 Build..................17
Figura 3- Criando um Documento............................................................................19
Figura 4- Construção da página inicial do NEAD....................................................20
Figura 5- Tabelas......................................................................................................20
Figura 6- Criando uma tabela....................................................................................21
Figura 7- Página inicial do NEAD............................................................................22
Figura 8- function arredondaCantos dentro de index.php.........................................23
Figura 9- function lista_noticia dentro de data.php..................................................24
Figura 10- function exibe_foother dentro do layout.php..........................................25
Figura 11- data.php...................................................................................................26
Figura 12- noticia.php...............................................................................................27
Figura 13- adm_index.php........................................................................................28
Figura 14- cadnoticias.php........................................................................................29
Figura 15- VertrigoServ............................................................................................31
Figura 16- Construção Logotipo do NEAD..............................................................33
LISTA DE SIGLAS:

NEAD – Núcleo de Educação a Distancia


HTML – HyperText Markup Language
PHP – Hypertext Preprocessor
CSS – Cascading Style Sheets
SGBD – Sistema Gerenciador de Banco de Dados
SQL – Structured Query Language
WEB – World Wide Web
LISTA DE ANEXOS:

ANEXO 1-Código fonte index.php...........................................................................36


ANEXO 2-Código fonte nead_css.CSS....................................................................42
1 INTRODUÇÃO

O Estágio Curricular Supervisionado é a ultima fase do Curso Técnico em


Informática, o qual propicia e adicionam conhecimentos nessa área, principalmente
conhecimentos práticos. Foi realizado no Núcleo de Educação a Distancia do Instituto Federal
Farroupilha – Campus São Vicente do Sul, situado em São Vicente do Sul, no período de 07
de abril de 2009 a 29 julho de 2009. Tendo por objetivo a implementação e criação de uma
página web para o NEAD devido a necessidade de se adequar as novas tecnologias do
mercado e divulgar o Núcleo de Educação a Distância.
2 ANALISE DO PROJETO

2.1 Objetivo da Página

O NEAD que é um setor de apoio ao Instituto Federal de Educação, Ciência e


Tecnologia Farroupilha-Campus São Vicente do Sul, por desenvolver atividades juntos aos
alunos da instituição, observou a necessidade de uma maior divulgação; e mostrar seu
trabalho de maneira mais acessível e eficaz.
Sendo o processo de informatização uma das melhores formas de divulgar e
organizar suas atividades, foi decidido que a criação de um Site (conjunto de páginas e
arquivos interligados) seria a melhor maneira de mostrar toda sua estrutura e divulgar seu
trabalho.

2.2 Estrutura da Página

Para definir a melhor forma de apresentação da página, foram realizadas reuniões e


encontros para discutir o assunto, e foi decidido que a melhor forma seria pesquisar em sites
de outros núcleos de educação a distancia para ter uma idéia do conteúdo a ser mostrado.
Com pesquisa, foi definida a melhor forma de layout (forma de apresentação) para
a página e seus principais links (ligação, conexão com outras páginas)e serem expostos de
maneira organizadas e fácil acesso ao mesmos.

2.2.1 Definição conteúdo


Com o Layout e os links da página definidos, reuniu-se todo o conteúdo a ser
exposto, desde a organização estrutural do NEAD até todos os projetos e atividades realizados
por ele. Esse material teve que ser digitado e organizado de forma que pudesse ser posto no
site.
12

2.2.2 Criação do modelo

Com todo conteúdo definido e organizado, deu-se inicio á construção de um


modelo. Foi organizada uma apresentação para os componentes do NEAD para que o
avaliassem.
Visto o modelo e feitas algumas modificações, partiu-se para desenvolvimento do
Site. Todo esse processo sempre sendo supervisionado pelos componentes do NEAD,que
sempre proporcionaram um grande incentivo, apoio e ajuda ao projeto.
3 DESENVOLVIMENTO DA PÁGINA

3.1 Definição das Tecnologias


Neste trabalho são abordadas as características básicas das tecnologias voltadas
para o desenvolvimento web que foram empregadas nos componentes desenvolvidos ao longo
do estágio. Dentre as tecnologias abordadas estão PHP (Hypertext Preprocessor), HTML
(HyperText Markup Language), CSS(Cascading Style Sheets), JavaScript e SQL. Todas
tecnologias bastante populares na comunidade de desenvolvedores. A escolha por essas
tecnologias baseou-se no fato de serem tecnologias consolidadas, padronizadas e gratuitas.
Para o desenvolvimento do site foi utilizado o Microsoft Expression Studio 3 Build que é um
software (programas, parte lógica de um computador) para edição de HTML, PHP,CSS e
JavaScript; Também foi utilizado o Adobe Photoshop para construção do logotipo.
SGBD (Sistema Gerenciador de Banco de Dado) foi Vertrigo para criação dos banco de
dados onde São armazenados as noticias do site e sistema de login para cadastro das mesmas.

3.2 Ferramentas adicional

Para melhorar a aparência do Site, tornando-o mais interativo e interessante, foram


utilizados alguns script que são a descrição de uma tarefa complexa ou de uma série de tarefas
usando uma determinada linguagem.
Os scripts foram criados pela linguagem de programação JavaScript, que
possibilita inúmeros recursos para melhoria do site.

3.2.1 JAVASCRIPT

É uma linguagem que permite injetar lógica em páginas escritas em HTML,


desenvolvia pela Netscape, complementando a linguagem HTML e precisa de um Browser
(paginador, ou navegador da internet). È ma linguagem baseada em objetos, ou seja, ela trata
todos os elementos de uma página com um objeto. No arquivo HTML em que estão os
comandos básicos da linguagem HTML, o código JavaScript é inserido de maneira a ser
interpretado quando necessário.
14

Os recursos de JavaScript que foram inseridos no site partiram de modelos


encontrados em sites especializados no assunto como ScriptFacil e ScriptBrasil, entre outros
Sites. Estes sites disponibilizam vários tipos de modelos, que podem ser alterados conforme a
necessidade. Depois de modificados, se introduz os scripts junto ao código HTML
(destacados no anexo1 ) da página, que serão executados quando necessários.

3.2.2 CSS

É um conjunto de regras que informa a um programa, responsável pela formatação


de um documento, como organizar a página, como posicionar e expor o texto e, dependendo
de onde é aplicado, como organizar uma coleção de documentos.
A maior parte dos programas de editoração eletrônica e processadores de texto
modernos trabalham com folhas de estilos. O processo consiste em definir um rótulo (nome
do estilo) para um determinado parágrafo e em seguida alterar os seus atributos. Todo
parágrafo que for rotulado com aquele estilo passará a exibir as características definidas
anteriormente. Qualquer alteração nos atributos de um estilo afetará todos os parágrafos que
estiverem rotulados com ele.
O CSS (Cascading Style Sheets) é utilizado para embelezar as páginas e elas
também ficam mais leves e de fácil manutenção porque alterando num arquivo
automaticamente todos os arquivos serão alterados como você poderá observar (destacados no
anexo2 ).

3.2.3 PHP

A linguagem PHP (Hypertext Preprocessor) foi concebida em 1994 por Rasmus


Lerdorf. As primeiras versões não foram disponibilizadas, tendo sido utilizadas em sua home-
page apenas para que ele pudesse ter informações sobre as visitas que estavam sendo feitas. A
primeira versão utilizada por outras pessoas foi disponibilizada em 1995, e ficou conhecida
como Personal Home Page Tools (ferramentas para página pessoal). Era composta por um
sistema bastante simples que interpretava alguns macros e alguns utilitários que rodavam por
trás das home-pages: um livro de visitas, um contador e algumas outras coisas. Em meados de
1995 o interpretador foi reescrito, e ganhou o nome de PHP/FI, o FI veio de um outro pacote
escrito por Rasmus que interpretava dados de formulários HTML (Form Interpreter). Ele
15

combinou os scripts do pacote Personal Home Page Tools com o FI e adicionou suporte a
mSQL, nascendo assim o PHP/FI, que cresceu bastante, e as pessoas passaram a contribuir
com o projeto. Estima-se que em 1996 PHP/FI estava sendo usado por cerca de 15.000 sites
pelo mundo, e em meados de 1997 esse número subiu para mais de 50.000.

Nessa época houve uma mudança no desenvolvimento do PHP. Ele deixou de ser um
projeto de Rasmus com contribuições de outras pessoas para ter uma equipe de
desenvolvimento mais organizada. O interpretador foi reescrito por Zeev Suraski e Andi
Gutmans, e esse novo interpretador foi a base para a versão 3. Atualmente o uso do PHP4
vem crescendo numa velocidade incrível, e já está sendo desenvolvida a versão 6 do PHP.
Pode ser feito basicamente, qualquer coisa que pode ser feita por algum programa CGI
pode ser feita também com PHP, como coletar dados de um formulário, gerar páginas
dinamicamente ou enviar e receber cookies.
PHP também tem como uma das características mais importantes o suporte a um
grande número de bancos de dados, como dBas e, Interbase, mSQL, mySQL, Oracle, Sybase,
PostgreSQL e vários outros.
Construir uma página baseada em um banco de dados torna-se uma tarefa
extremamente simples com PHP; alem de que o PHP não tem custo nem uma sua licença é
FREE,
Em nosso aplicativo o PHP foi a linguagem principal usada em todo Site tanto para
acesso a dados do banco de dados, e também nas funções e variáveis criadas para puxar os
conteúdos e montar a página principal, ou seja, o index.php.

3.3 Ferramenta Microsoft Expression Studio 3 Build

O Microsoft Expression Studio 3 Build é editor que serve para trabalharmos com
varias linguagem, desenhar, codificar e desenvolver Sites, páginas e aplicativos para WEB.
Possibilita trabalhar coma codificação manual ou em um ambiente de edição visual. O
Microsoft Expression Studio 3 Build fornece ferramentas muito úteis para aprimorar a criação
de Site.
Como podemos observar na figura 1, quando o Microsoft Expression Studio 3
Build é executado, podemos visualizar sua área de trabalho com seus principais componentes:
painel inserir, grupo de painéis e janela do documento
16

Figura 1 - :Área de trabalho Microsoft Expression Studio 3 Build – documento em


branco
Mais detalhes da ferramenta na próxima figura (figura2)
Onde esta sendo explicado com mais detalhes suas funcionalidades.
17

Figura 2: Detalhes da ferramenta Microsoft Expression Studio 3 Build


18

> Menus and Toolbars (painel inserir e barra de ferramentas).


Muito utilizado, pois permitem trabalhar com vários tipos de objetos como tabelas, imagem,
formulários, etc. As suas opções estão organizadas em guias que facilitam o trabalho.
> The Editing window (janelas dos documentos) onde esta sendo exibido o conteúdo que ta
sendo editado para trocarmos de painel podemos utilizar os atalhos CTRL+TAB ou
CTRL+SHIFT+TAB com isso tendo uma melhor facilidade de trabalhar com a ferramenta.
> Painel Buttons (grupos de painéis) podem ser encaixados e combinados conforme a
necessidade do arquivo podem ser inseridos de maneira simples botões, tabelas e regiões
aditáveis tudo de maneira gráfica com isso ganhando tempo e praticidade na consturção dos
aplicativos.

3.4 Criando a Página Inicial

A Página Inicial é a principal do site, pois quando digitamos o endereço do site no


navegador da internet, é ela a primeira a ser carregada. É por ela que acessamos as outras
páginas que compõem o Site ou que se relacionam com ele através dos links a hiperlinks
(ligação entre documentos) nela contidos.
Para se criar a Página Inicial denominada index (padrão utilizado para definir a
página inicial), após executarmos o Microsoft Expression Studio 3 Build abriremos um novo
documento em branco através de file > New ou seja Arquivo > Novo.
Ao executarmos esse comando, surge uma janela como mostra a Figura 3. Esta
janela apresenta inúmeras opções pra criarmos o documento, mas como vamos partir de um
modelo em branco, seguimos na categoria page (página), e na janela ao lado clicamos em
modelo em PHP que será o tipo do documento; E em seguida clicamos no botão OK para
surgir um novo documento: Figura1.
19

Figura 3 – Criando um Documento

A Página Inicial do NEAD foi toda desenvolvida utilizando-se tabelas ,por serem
fáceis de manipular. Como mostrar a Figura 3, podemos inserir tabelas através do menu Table
> Insert Table (tabela > inserir tabela).Toda a estrutura da página é formatada por elas: seus
menus,o cabeçalho, o rodapé e o centro da página onde são expostos os textos ou links
20

Figura 4 – construção da página inicial do NEAD

As tabelas são formatadas por colunas e linhas, como mostra a Figura 4.


Trabalhando com tabelas se torna mais fácil a organização dos componentes da página,
podemos inserir varias tabelas montar a página, inserindo uma dentro da outra, adicionando e
removendo linhas e colunas quando necessário.

Figura 5 : Tabelas
21

Quando solicitamos a inserção de uma tabela, o Microsoft Expression Studio 3


Build nos mostra uma janela como mostra a Figura 6. Nesta janela podemos definir o numero
de linhas e colunas, a largura e se desejar bordas que são definidas por números: zero sem
bordas, e os demais números especificam a largura da borda; quanto maior o numero maior o
valor do numero, mais larga é a borda.

Figura 6: Criando uma tabela

As tabelas inseridas na página na sua maioria receberam bordas que com auxilia de
uma função JavaScript ficaram com os contas arrendados dando um aspecto mais elegante
como pode ser visto na Figura 6.
22

Figura 7: página inicial do NEAD

3.5 Construção do Site


O site foi criado usando funções e variáveis PHP onde foram inseridos os
conteúdos do NEAD de forma organizada para evitar que usuário ficar abrindo varias páginas
foi decidido por esse modelo para que ficasse mais rápida e mais fácil do usuário navegar nos
menus do site, só a parte da página clicada pelo usuário e recarregada e não toda página index
do Site.
Index.php
A index é a página principal do site onde acontece as chamadas das variáveis a
funções do PHP que monta todo site ,também são chamados os CSS e os Java Script que
formatam a página como cores de fundo cores das tabelas, menus e as fontes do site
23

Figura 8: function arredondaCantos dentro de index.php

Data.php

A página Data.php onde estão localizados os conteúdos de todo site e as chamadas


para banco de dados onde são postadas as ultimas noticias site de forma dinâmica onde a
ultima noticia postada será a primeira a aparecer para usuário ou seja estará no primeiro link
na parte das noticias na index.php. A data.php e composta por PHP, HTML e SQL .
24

Figura 9: function lista_noticia dentro de data.php


25

Layout.php

A página Layout.php e basicamente composta por PHP E HTML e serve para definir o
formato do site nele são criadas as funções e variáveis em php chamam banner ou seja o
logotipo do site ,também os menus o conteúdo em si do site e o rodapé; E essas funções são
chamadas no Index.php para a montagem do site

Figura 10: function exibe_foother dentro do layout.php


26

Controla.php e controla2.php

Na controla.php são chamadas funções e variáveis definidas e criadas no data.php e o


no controla.php é feito teste com PHP para saber qual conteúdo vai ser carregado para o
index.php ser montada para usuário da página conforme ele for navegando no site e mesmo
acontece com controla2.php só que ela gerencia as funções(essas funções proporcionam um
grande ganha de segundo professor Alexandre Arroyo autor da apostila Programando para a
WEB com utilizando PHP ,Centro de Computação UNICAMP) . Que carregam as cabeçalho
das noticias do banco de dados para página index.php.
27

Figura 11: data.php

Noticia.php

E página que é mostrada todo texto da noticia que vem do banco de dados através de
um select (consulta a dados), esta página e composta por PHP, SQL que se conecta com
banco dados carregando e conteúdo da noticia para usuário do Site.
Figura 12: noticia.php
28

Cadastro das noticias

Logo abaixo dos menus do Site na página inicial o usuário responsável pelo Site verá
um link que chama de dentro da pasta adm a página index.php onde ele entra com usuário e
senha se os dados estiverem corretos ele tem acesso página opcoes.php onde existe um menu
de acesso para as páginas cadnoticias.php, e gernoticias.php.
O sistema de login e realizado através sessões com isso o aplicativo ficou com mais segurança
segundo citação apostila Desenvolvimento de Aplicativos em PHP edição marco 20006 da
pt.wikibooks.org.

29

Figura 13: adm_index.php

cadnoticias.php
Nesta página o administrador do sistema visualizara um formulário de cadastro de
noticia para fazer a inserção das noticias no banco de dados
Figura 14: cadnoticias.php 30

gernoticias.php
Nesta página o administrador do sistema visualizara um de pesquisa de noticia por
titulo e logo abaixo é mostrado a data de inserção e titulo de todas as noticias cadastradas no
banco de dados e ao lado os link para alterarnoticias.php e excluirnoticias.php onde o usuário
poderá alterar texto da noticia ou excluir.

VertrigoServ

VertrigoServ é um instalador de Apache (servidor web – HTTP), PHP (linguagem


de programação dinâmica), MySQL (multithread, multi-utilizador, SQL Database
Management System), SQLite (sistema de gestão de bases de dados, de acordo com ACID),
SQLiteManager (ferramenta web based para gerir as bases de dados SQLite), PhpMyAdmin
(ferramenta escrita em PHP para administrar as bases de dados MySQL) e Zend Optimizer
(que aumenta a performance em 40%) para a plataforma Windows como você observar na
Figura 8. Com um único instalador, todos os componentes são instalados num único diretório
e podem ser usados imediatamente após a instalação. Um desinstalador permite remover o
VertigoServ do disco rígido. Foi desenhado para ser o menor e flexível, no entanto é
altamente recomendado para distribuição na Internet. VertrigoServ é excelente tanto para
novatos como para utilizadores experientes, e por ser um software com todas essas
funcionalidades citadas anteriormente foi decidido pelo seu uso tanto para hospedagem do site
para como pela criação do SGBD do Site que gerencia acesso para cadastro de noticia e
inserção de noticia no site.
31

Figura 15: VertrigoServ


Com uso dessa ferramenta foi criado o banco de dados e suas tabelas na linguagem
SQL como pode ser observado abaixo seu código fonte.
--
-- Banco de Dados: `nead_bd`
--
CREATE DATABASE `nead_bd` DEFAULT CHARACTER SET latin1 COLLATE
latin1_swedish_ci;
USE `nead_bd`;
--
-- Estrutura da tabela `tb_noticias`
--
CREATE TABLE IF NOT EXISTS `tb_noticias` (
`id_noticia` int(11) NOT NULL auto_increment,
`32nclusão_noticia` datetime default NULL,
`titulo_noticia` text,
32

`texto_noticia` text,
PRIMARY KEY (`id_noticia`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=37 ;
--
-- Estrutura da tabela `tb_user`
--
CREATE TABLE IF NOT EXISTS `tb_user` (
`Id_user` int(11) NOT NULL auto_increment,
`apelido` varchar(60) default NULL,
`senha` varchar(20) default NULL,
PRIMARY KEY (`Id_user`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=6 ;

3.7 Construção do logotipo do NEAD

Foi realizada uma pesquisa na Internet em busca de imagens que tinham algo a ver
com educação a distancia sendo observado que a pouco material nessa área, mas com base do
tinha sido pedido pelos coordenadores do NEAD chegou a algumas conclusões e foi montado
três proposta para serem decidas pela coordenação e com uso da ferramenta Adobe Photoshop
CS4 Portable(que é uma ferramenta da empresa Adobe e para trabalhar com mesma tomou-se
como base a apostila 101 dicas de photoshop baixada do site Oficinadanet.com.br) chegou- se
ao logotipo oficial do NEAD que esta demonstrado na Figura 9 logo abaixo
33

Figura 16: Construção Logotipo do NEAD


4 CONCLUSÃO

O estágio foi de grande importância, pois através deste pude colocar em prática
todos os ensinamentos passados em aula, foram aprendidos outros também, a cada problema
encontrado tíve diversas situações e estas muitas vezes nos eram desafios.
Esse estágio teve por finalidade ajudar-me a conhecer e trabalhar um pouco mais
as técnicas de desenvolvimento Web, incluindo alguns softwares de designer e de
programação, também algumas linguagens voltadas pra web como PHP e JAVASCRIPT.
Se tornou notável que muitas práticas devem começar a fazer parte da nossa rotina,
como por exemplo, o estudo da língua inglesa, pois foi esta uma das grandes dificuldades
encontradas no transcorrer do período de estagio já que grande parte dos materias pesquisados
e as linguagem de programação encontram-se em inglês, para se trabalhar com elas, é
necessário esse conhecimento.
Contudo, foi bastante significativo esse estágio curricular supervisionado, onde
adicionei conhecimentos. Também devem ser levados em consideração os aprendizados como
conviver em um ambiente de trabalho, o que faz o profissional ter uma realização, não
somente pessoal, mas também e principalmente uma realização profissional.
REFERÊNCIAS BIBLIOGRÁFICAS

RAMOS, Cássio. Um sistema de cadastro e login 100% seguro. 2082009, Disponível em:
http://www.scriptfacil.com.br/materia/1056/PHP/
Tutorial em php ,scriptbrasil 2008-2009, Disponível em:
http://www.scriptbrasil.com.br/codigos/javascript/

IMASTERS, Conectando o PHP ao Banco de Dados MySQL:


www.clubedohardware.com.br Acesso em 3 março 2009.
UNICAMP, Apostila Programando para a WEB com utilizando PHP ,Centro de Computação
Unicanp, Consultada 26 junho de 2009.
WIKIBOOKS, Desenvolvimento de Aplicativos em PHP edição marco 20006
http://pt.wikibooks.org/wiki/Aplicativos_em_PHP , Consultada 6 junho de 2009.
OFICINA DA NET, apostila 101 dicas de photoshop baixada do site
http://www.oficinadanet.com.br ,Consultada 9 julho de 2009.

ANEXOS
ANEXO 1: CÒDIGO FONTE INDEX.PHP
<html>
<script type="text/javascript" src="rico/prototype.js"></script>
<script type="text/javascript" src="rico/rico.js"></script>
<head>
<link rel="stylesheet" href="style/mm_health_nutr.css" type="text/css" />
<script type="text/javascript" src="micoxAjax.js" language="javascript"></script>
<script type="text/javascript" src="Abre.js" language="javascript"></script>
<title>NEAD/IFET-SVS..::..Instituto Federal Farroupilha - SVS</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<script>
//*************função arredonda cantos***************//
function arredondarCantos(){
//arredondar cantos
var onloads = new Array();
new Rico.Effect.Round( null, 'roundNormal' );
new Rico.Effect.Round( null, 'roundCompact', {compact:true} );
for ( var i = 0 ; i < onloads.length ; i++ )
onloads[i]();
showMenuContext()
}
</script>
<?php
include("layout.php");
//*******chamada do layout da página*********//
include("data.php");
37
//*******chamada dos conteudos atraves da página data.php ********//
$local = 1;
?>
<center>
<?php
//*********função exibe banner**************//
exibe_banner();
//*************função exibe menu logo abixo do banner *************//
exibe_mbanner();
?>
<table width="1000" bgcolor="#FFFFFF" border="0" cellpadding="0" >
<tr>
<td width="190" valign="top">
<?php
//*************chamadas das funcões monta
menus**************//
exibe_mtablemenu($principal_menu,$principal_cursos);
?>
<?php
//*************chmadas das funcões que chama login***************//
exibe_conteudo3($login);
?>
</td>
<td width="800" valign="top">
<center>
<table width='800' border='0' align='center'>
<td>
<div style='width:100%;background-color:#66CC33;' class='menuBox
roundNormal'>
<table width='782' border='0' align='center' >
<tr>
<td>
<div style='width:100%;background-color:#FFFFFF;' class='menuBox 38
roundNormal'>
<div id='div1'>
</div>
</div>
</td>
</tr>
</table>
</div>
</td>
</table>
<table width='800' border='0' align='center' >
<tr>
<td>
<center>
<div style='width:100%;background-color:#66CC33;' class='menuBox
roundNormal'>
<table width='782' border='0' align='center'>
<tr>
<td height="64">
<div style='width:100%;background-color:#FFFFFF;' class='menuBox
roundNormal'>
<center>
<?php
//******exibe link para acessar teleduc o moodle******//
exibe_conteudo2($link_teleduc);
?>
</center>
</div>
</td>
</tr>
</table>
</div>
</center> 39
</td>
</tr>
</table>
<table width='800' border='0' align='center'>
<tr>
<td>
<center>
<div style='width:100%;background-color:#66CC33;' class='menuBox
roundNormal'>
<table width='782' border='0' align='center'>
<tr>
<td>
<div style='width:100%;background-color:#66CC33;' class='menuBox
roundNormal'>
<div align='left'>
</div>
<strong>
<em>
<font color='#000000' size='2' face="Verdana, Arial, Helvetica, sans-
serif">U</font><font color='#000000' size='2' face="Verdana, Arial, Helvetica, sans-
serif">ltimas Not&iacute;cias
</font>
</em>
</strong>
</div>
</td>
</tr>
<tr>
<td>
<div style='width:100%;background-color:#FFFFFF;' class='menuBox
roundNormal'>
<div id='div2'>
</div>
</div>
40
</td>
</tr>
</table>
</div>
</center>
</td>
</tr>
</table>
</center>
</td>
</tr>
</table>
</center>
<?php
//***********função exibe rodapé **************//
exibe_foother();
?>
<script>
ajaxGet("controla.php?tipo=1",document.getElementById("div1"),true);
ajaxGet("controla2.php?tipo=1",document.getElementById("div2"),true);
arredondarCantos();
</script>
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script>
<script type="text/javascript">
_uacct = "UA-2535685-1";
urchinTracker();
</script>
</body>
</html>
<?php
$data1 = date('Y-m-d');
$hora1 = date('H:i:s'); 41
$server = $_SERVER['SERVER_NAME'];
$endereco = $_SERVER ['REQUEST_URI'];
$sitea = "http://" . $server . $endereco;
$hostname = getenv("REMOTE_ADDR");;
$hostname1 = gethostbyaddr($_SERVER['REMOTE_ADDR']);
$conexao11 = mysql_pconnect('200.132.28.138','logpage','hjwe23') or die('ERRO');
mysql_select_db('sitelog') or die(mysql_error());

$query11 = "INSERT INTO acessos (data_acesso, hora_acesso,


ip_acesso,url_acesso,dns_acesso) VALUES ('$data1', '$hora1', '$hostname',
'$sitea','$hostname1')";
mysql_query($query11,$conexao11);
mysql_close($conexao11);
?>

ANEXO 2: CÒDIGO FONTE NEAD_CSS.CSS


/* Global Styles */
html {
margin: 0;
padding: 0;
background-color: #CCFF99;

body {
margin:0px;
background-color: #CCFF99;

}
td {
font:20px Arial, Helvetica, sans-serif;
color:#000000;
}

p{
margin-top: 0;
text-align: justify;
}
h1 {
font:20px Arial, Helvetica, sans-serif;
letter-spacing: 1px;
margin-bottom: 0;
color: #66cc33;
}

h3 {
font:20px Arial, Helvetica, sans-serif;
letter-spacing: 1px;
margin-bottom: 0;
color: #7D775C;
}

a{ 43
color: #993300;
}
a:hover {
color: #5C743D;
}
ul { list-style: none; }
#menu ul { display: table; }
#menu ul li { float: left; margin: 0 0px; }
#menu ul li.primeira { margin-left: 0; }
#menu ul li a {
display: block;
width: 140px;
margin: 0px;
float: left;

background-color: #66cc33;
color: #ffffff;
font-weight: bold;
font-size: 15px;
text-decoration: none;

}
#menu ul li a.selecionado, #menu ul li a:hover {
background-color: #66cc33; color: #000000;
font-size:15px; text-decoration: none;
}

#teste {

font:15px Arial, Helvetica, sans-serif;


color:#000000;
}

Você também pode gostar