Home Page da Estação Automática do IF-SC

Home Page da Estação Automática do IF-SC

Email: anaa_fraga@hotmail.com Artur da Silva Querino E-mail: arturquerino@gmail.com

Kathilça Lopes de Souza E-mail: kathii16@hotmail.com

Rayana Teixeira de Sá E-mail: rayana_ts@msn.com

Instituto Federal de Educação Ciência e Tecnologia de Santa Catarina Avenida Mauro Ramos, 950, Centro, Florianópolis/SC, CEP: 88020-300.

Resumo: A proposta deste projeto foi desenvolver uma página web para disponibilizar os dados da Estação Automática do Instituto Federal de Educação Ciência e Tecnologia de Santa Catarina. A construção foi feita através das linguagens PHP e (X)HTML. Foi feita a comunicação destas linguagens com o Banco de Dados da Estação Automática do. Assim, ao final do processo, o usuário pode buscar através de uma interface gráfica, com o intuito de disponibilizar na internet, os dados da estação automática do IF-SC.

Palavras-chave: Home Page. Banco de dados. Estação Automática.

Abstract: The purpose of this project was to develop a home page to provide data from automatic monitoring station of the Federal Institute of Education, Science and Technology of Santa Catarina. The construction was done through PHP and (X) HTML. Was made of these languages to communicate with the database of the automatic monitoring station. Thus, the end of the process, the User can search through a graphical interface, in order to provide Internet, data from the station automatic IF-SC.

Keywords: Home Page. Databases. Automatic station 1 Introdução

Este trabalho apresenta o processo de construção de uma página web que viabiliza a consulta de dados meteorológicos (como temperatura, pressão, umidade, vento e etc.) da estação

automática do Instituto Federal de Educação. Ciência e Tecnologia de Santa Catarina.

Os sensores captam sinais elétricos, esses sinais são convertidos em

variáveis meteorológicas, as mesmas variáveis são transportadas via internet para o banco de dados da estação automática. O intuito do projeto, então, foi a identificação da necessidade de a instituição precisar de um site que disponibilize estes dados da estação automática para alunos e visitantes. 2 Banco de Dados

Para realizar o armazenamento de dados de forma organizada utiliza-se o banco de dados.

2.1 Conceito

Um banco de dados é uma coleção de dados estruturados. Ele pode ser qualquer coisa desde uma simples lista de compras a uma galeria de imagens ou a grande quantidade de informação da sua rede coorporativa.

Para adicionar, acessar, e processar dados armazenados em um banco de dados de um computador, utilizam-se um sistema de gerenciamento de bancos de dados como o Servidor MySQL.

2.2 Sistema de Gerenciamento de Banco de Dados (SGBD)

O Sistema de Gerenciamento de Banco de dados é um softwere com recursos específicos para facilitar a manipulação das informações do banco de dados e o desenvolvimento de programas e aplicativos. Um exemplo deste tipo de gerenciador é o

PhpMyAdmin.

3 Linguagens de Programação

Existem diversas linguagens de programação, as mais utilizadas em páginas web são a linguagem (X)HTML e a PHP.

3.1 Linguagem (X)HTML

De acordo Niederauer (2002), o (X)HTML, ou eXtensible Hypertext

Markup Language, é uma reformulação

da linguagem de marcação HTML, baseada em XML. Combina as tags de marcação HTML com regras da XML. Este processo de padronização tem em vista a exibição de páginas Web em diversos dispositivos (televisão, palm, celular, etc). Sua intenção é melhorar a acessibilidade.

O (X)HTML consegue ser interpretado por qualquer dispositivo, independentemente da plataforma utilizada, pois as marcações possuem sentido semântico para as máquinas. O HTML não consegue esta implementação. No entanto, não existem muitas diferenças entre o HTML e o (X)HTML. Para verificar se uma página (X)HTML está bem construída, o melhor método é validar o código através de uma aplicação Web disponibilizado pela organização

World Wide Web Consortium.

3.2 Linguagem PHP

De acordo com Park el all (2003) PHP é o acrônimo de Hipertext

Preprocesor. É uma linguagem de

programação do lado do servidor gratuito e independente de plataforma, rápido,

com uma grande livraria de funções e muita documentação.

Uma linguagem do lado do servidor é aquela que se executa no servidor web, justo antes da página ser enviada através da Internet ao cliente. As páginas que se executam no servidor podem realizar acessos a bases de dados, conexões em rede, e outras tarefas para criar a página final que será vista pelo cliente. O cliente somente recebe uma página com o código HTML resultante da execução da PHP. Como a página resultante contém unicamente código HTML, é compatível com todos os navegadores.

3.1 Linguagem JavaScript

De acordo com Reis (2005) o Javascript foi desenvolvido pela Netscape

Communications, os criadores do navegador Netscape Navigator, e se trata da primeira linguagem de script da web a ser introduzida e, é a mais popular, por ser quase tão fácil como o HTML. Logo abaixo tem algumas coisas que você pode fazer com o JavaScript:

a) Podem-se adicionar mensagens que rolam na tela ou alterar as mensagens na linha de status do navegador;

b) Validar os conteúdos de um formulário e fazer cálculos;

c) Exibir mensagens para o usuário, tanto como parte de um pagina da Web como em caixas de alertas; d) Fazer animações de imagens ou

criar imagens que mudam quando você move o mouse sobre elas;

e) Detectar o navegador em utilização e exibir conteúdo diferente para navegadores diferentes;

f) Detectar plug-ins instalados e notificar o usuário se um plug-in foi exigido.

4 Descrição técnica

Por meio do programa de desenvolvimento de (X)HTML chamado

NotePad++, desenvolveu-se o script da

página utilizando estilização externa. Primeiramente deu-se a permissão para visualização da pagina no navegador Internet Explorer.

Logo após utilizou-se as tags abaixo com as seguintes funções:

a) <html> : Abriu-se o documento; b) <head>: Abriu-se a “cabeça”; Dentro da tag <head> abriu-se:

c) <title>:Título da página ;

d) </title>: Fechou-se a tag do título; e) </head>: Fechou-se a tag;

f) <body>: Abriu-se a tag utilizada para o desenvolvimento do corpo do script;

g) <div> Abriu-se a tag div, que é utilizada para posicionar um elemento, dentro dessa utilizou-se a tag class, que serve para classificar o termo para a estilização;

h) </div>: Fechou-se a tag div; i) <form>: Abriu-se a tag que é

utilizada para desenvolver formulários;

j) <p>: Abriu-se um parágrafo; k) </p>: Fechou-se o parágrafo; l) </form>: Fechou-se a tag form;

m) <table>: Abriu-se a tag que é utilizada para desenvolver tabelas; n) <tr>: Abriu-se a tag, utilizada para

criar linhas na tabela; o) </tr>: Fechou a tag;

p) -<td>: Abriu-se a tag, utilizada para acrescentar célula (dados) na tabela;

q) -</td>: Fechou-se a tag;

r) -</body>: Fechou-se a tag do corpo do script;

s) - </html> : Fechou-se o documento;

Outras tags utilizadas:

t) <link>: indica que o documento é constituído por uma estilização externa;

u) <img />: serve para incluir uma imagem na pagina;

v) <br />: Tag utilizada para „pular‟ uma linha.

Estilizou-se a página da seguinte maneira: primeiramente o corpo (body) com uma imagem de fundo através da função: background-image, a mesma repetiu-se varias vezes verticalmente através da função: background-repeat.

Logo após estilizou-se as tags

div.cabeçalho colocada no centro página e div.rodapé posicionada no centro e na

parte inferior da pagina.

Estilizou-se também a tabela da seguinte maneira:

a) color: cor da letra;

b) text-align: centraliza o texto; c) border: espessura, tamanho e cor

da borda;

d) position: alinha o texto em qualquer lugar da pagina;

e) left: alinha a esquerda da página;

f) top: parte superior da pagina; g) font-size: tamanho da fonte; h) font-family: tipo de letra.

Em seguida estilizaram-se os formulários com as mesmas funções da

tabela. Ver script de estilização externa em anexo (figura 1).

Adiante, foi feito o script em PHP, onde lá possuem a comunicação com o banco de dados e as tabelas disponíveis. Ver script PHP em anexo (figura 2). 5 Resultados

Por meio da interface gráfica construída (figura 3), podem-se fazer pesquisas sobre as variáveis meteorológicas medidas pela Estação Automática do IF-SC. Existem dois campos de pesquisa, um campo é para preencher o dia e outro para preencher a hora.

O campo de hora é preenchido no formato “HH:00:00”, este formato é feito com um horário inteiro (ex.: 13:00:00, 18:00:00, 23:00:00) devido a tabela escolhida do banco de dados da estação automática. Já no campo de dia, o preenchimento é feito no formato “AAAA-MM-DD”, respectivamente Ano, Mês e Dia. (ex.: 2008-07-13).

Ao preencher esses campos, basta clicar em “Enviar Consulta”. Após esse processo a página mostra em uma tabela com as variáveis de temperatura máxima, temperatura mínima, umidade máxima, umidade mínima, pressão, chuva, velocidade do vento e direção do vento. Essas variáveis que são mostradas se

referem a da hora e do dia em que foi pedida a consulta.

Figura 3 – Interface gráfica

6 Conclusão

O objetivo deste artigo foi desenvolver uma página web para a estação meteorológica automática do IF-SC.

Os testes foram feitos para verificar se havia falhas na comunicação entre o banco de dados da Estação automática do IF-SC com a página web desenvolvida. Não houve na erros na comunicação.

A única objeção do trabalho é a não disponibilidade de a página web desenvolvida seja vinculada com a página web do Curso Técnico de Meteorologia do IF-SC devido a burocracia da instituição. Assim, ficaria de fácil acesso para os alunos e de pessoas afins com o interesse de acessar e obter os dados da Estação Automática.

7 Referências

CONVERSE, Tim; PARK, Joice. Php: A Bíblia. Edição: 2. Editora: Campus El Servier, 2003. 868 pág.

NIEDERAUER, Juliano. XHTML - Guia de Consulta Rápida. Edição: 1. Editora: Novatec, 2002. 128 pág.

SILVA, Mauricio Samy. Tutorial XHTML, 2009. Disponível em:

<http://maujor.com/tutorial/xhtml.php> Acesso em: 02/11/2009.

Reis, Kenia de Campos. Programação Web. Javascript-Básico, 2005. Dsponivel em:

<http://www.juliobattisti.com.br/tutoriais/ keniares/jsbasico001.asp> Acesso em: 06 /12/2009.