Escolar Documentos
Profissional Documentos
Cultura Documentos
DESENVOLVIMENTO WEB
DESENVOLVIMENTO WEB
por
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
DESENVOLVIMENTO WEB
Elaborado por
Alcione Rosa de Morais
Jusseila Stangherlin
(Supervisor de Estágio)
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
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:
3.2.1 JAVASCRIPT
3.2.2 CSS
3.2.3 PHP
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.
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
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 5 : Tabelas
21
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
Data.php
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
Controla.php e controla2.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
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
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
`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 ;
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
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/
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í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());
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 {