Relatorio de Tecnico Alcione 30 07

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



INSTITUTO FEDERAL DE EDUCAÇÃO, CIÊNCIA E TECNOLOGIA

FARROUPILHA - CAMPUS SÃO VICENTE DO SUL


DESENVOLVIMENTO WEB

por


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: [email protected]

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: [email protected]

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

mailto:[email protected]

mailto:[email protected]

3.6 Data do início e término: 07/04/2009 e 29/07/2009



INSTITUTO FEDERAL FARROUPILHA - CAMPUS SÃO VICENTE DO SUL


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


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)


(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.

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.

12

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.

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

combinou os scripts do pacote Personal Home Page Tools com o FI e adicionou suporte a

14

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

15

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.

16

Figura 2: Detalhes da ferramenta Microsoft Expression Studio 3 Build

17

> 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.

18

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

19

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

20

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.

21

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

22

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 .

23

Figura 9: function lista_noticia dentro de data.php

24

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

25

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.

26

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.

27

Figura 12: noticia.php

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.

28

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.

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

29

Figura 14: cadnoticias.php

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

30

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.

3.6 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.

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,

31

`texto_noticia` text,

PRIMARY KEY (ìd_noticia`)

) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=37 ;

--

-- Estrutura da tabela `tb_user`

--

CREATE TABLE IF NOT EXISTS `tb_user` (

Ìd_user` int(11) NOT NULL auto_increment,

àpelido` varchar(60) default NULL,

`senha` varchar(20) default NULL,

PRIMARY KEY (Ìd_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

32

Figura 16: Construção Logotipo do NEAD

33

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/codi gos/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

http://www.oficinadanet.com.br/

http://pt.wikibooks.org/wiki/Aplicativos_em_PHP

http://www.clubedohardware.com.br/

http://www.scriptbrasil.com.br/codi%1Fgos/javascript/

http://www.scriptfacil.com.br/materia/1056/PHP/

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");

//*******chamada dos conteudos atraves da página data.php ********//

$local = 1;

?>

<center>

<?php

37

//*********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

roundNormal'>

<div id='div1'>

</div>

</div>

</td>

38

</tr>

</table>

</div>

</td>

</table>

<table width='800' border='0' align='center' >

<tr>

<td>

<center>


roundNormal'>


<tr>

<td height="64">


roundNormal'>

<center>

<?php

//******exibe link para acessar teleduc o moodle******//

exibe_conteudo2($link_teleduc);

?>

</center>

</div>

</td>

</tr>

</table>

</div>

</center>

</td>

</tr>

</table>


<tr>

39

<td>

<center>


roundNormal'>


<tr>

<td>


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ícias

</font>

</em>

</strong>

</div>

</td>

</tr>

<tr>

<td>


roundNormal'>

<div id='div2'>

</div>

</div>

</td>

</tr>

</table>

</div>

</center>

40

</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');

$server = $_SERVER['SERVER_NAME'];

$endereco = $_SERVER ['REQUEST_URI'];

$sitea = "http://" . $server . $endereco;

$hostname = getenv("REMOTE_ADDR");;

$hostname1 = gethostbyaddr($_SERVER['REMOTE_ADDR']);

41

$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 {color: #993300;}

a:hover {color: #5C743D;}

ul { list-style: none; }#menu ul { display: table; }#menu ul li { float: left; margin: 0 0px; }

43

#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; }

Relatorio de Tecnico Alcione 30 07

Documents

Transcript of Relatorio de Tecnico Alcione 30 07