campus avanÇado sombrio bruna inÁcio … · suas realidades. em comparação com outros meios de...

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

CAMPUS AVANÇADO SOMBRIO

BRUNA INÁCIO TRAJANO

LETÍCIA RECCO TRAMONTIN

WEBSITE PODER:

Projeto de Orientação e Desenvolvimento de Ensino e Raciocínio

Sombrio (SC)

2014



WEBSITE PODER:


Trabalho de Conclusão de Curso apresentado comorequisito para a obtenção do título de Técnico emInformática Integrado ao Ensino Médio, no Curso deTécnico em Informática Integrado ao Ensino Médio, doInstituto Federal de Educação, Ciência e TecnologiaCatarinense – Campus Avançado Sombrio.

Orientador: Prof. Me. Iuri Sônego Cardoso

Sombrio (SC)

2014



WEBSITE PODER:


Esta Produção Técnico-Científica foi julgada adequada

para obtenção do título de Técnico em Informática

Integrado ao Ensino Médio e aprovada pelo Curso de

Técnico em Informática Integrado ao Ensino Médio do

Instituto Federal Catarinense – Campus Avançado

Sombrio.

Área de Concentração: Desenvolvimento para a Web.

Sombrio, 2 de dezembro de 2014.

Prof. Me. Iuri Sônego Cardoso

IFC - Campus Avançado Sombrio

Orientador

Prof. Me. Lucas Spillere Barchinski

IFC – Campus Avançado Sombrio

Membro

Prof. Joedio Borges Junior

IFC – Campus Avançado Sombrio

Membro

DEDICATÓRIA

Dedicamos este trabalho a nossos pais, nossas famílias e

amigos, por acreditarem no nosso potencial, nos darem

esperança, incentivo e compreensão; e também por

fazerem a vida valer cada vez mais a pena.

AGRADECIMENTOS

Agradecemos a nosso professor orientador, Me. Iuri Sônego Cardoso; a Natan

Gonçalves de Lima João por ter feito o design das imagens das páginas do website e a

todos os demais que nos ajudaram no decorrer do trabalho, seja esclarecendo dúvidas ou

nos incentivando a sempre seguir em frente.

EPÍGRAFE

“Não são nossos talentos que mostram aquilo que

realmente somos, mas sim nossas escolhas.”

J.K. Rowling

RESUMO

O presente projeto foi desenvolvido primeiramente para suprir a necessidade de

informatizar o processo de inscrição de alunos no PODER, projeto de extensão

desenvolvido por alunos do IFC – Campus Avançado Sombrio. Mais tarde, o projeto aqui

apresentado foi aprimorado e mais funções foram agregadas, o qual resultou na criação

de um website dinâmico. O desenvolvimento empregou métodos e técnicas aprendidas no

decorrer do curso Técnico em Informática Integrado ao Ensino Médio, particularmente os

de programação web e banco de dados. O website entrará em funcionamento apenas a

partir de 2015, com a segunda edição do PODER, ano no qual poderá ser analisado o

impacto trazido pela informatização para os alunos, educadores e equipe coordenadora

do projeto.

Palavras-chave: PODER. Website. Programação Web. Desenvolvimento Web. Banco de

dados.

ABSTRACT

This project was developed to supplement the need to computerize the process of

enrollment of students in PODER, extension project developed by students from the IFC -

Campus Avançado Sombrio. Later, the project presented here was enhanced and more

features were added, resulting in the creation of a dynamic website. The development

involved methods and techniques learned during the course “Técnico em Informática

Integrado ao Ensino Médio”, particularly related to web programming and database. The

website will start to operate only in 2015, with the second edition of PODER, and then the

impact brought by computerization for students, educators, and staff coordinator of the

project will can be analyzed.

Keywords: PODER. Website. Web programming. Web development. Database.

LISTA DE SIGLAS

IFC Instituto Federal Catarinense.

WWW World Wide Web – Rede Mundial de Computadores, ou Teia de Amplitude

Mundial.

URL Uniform Resource Locator – Localizador Padrão de Recursos.

HTTP HyperText Transfer Protocol – Protocolo de Transferência de Hipertexto.

HTML HyperText Markup Language – Linguagem de Marcação de Hipertexto.

CSS Cascading Style Sheets – Folhas de Estilo em Cascata.

SQL Structured Query Language – Linguagem de Consulta Estruturada.

IDE Integrated Development Environment – Ambiente de Desenvolvimento

Integrado.

PHP HyperText Preprocessor – Processador de Hipertexto.

PODER Projeto de Orientação e Desenvolvimento de Ensino e Raciocínio.

BD Banco de Dados.

E-R Entidade-Relacionamento.

WAMP Windows, Apache, MySQL e PHP.

SGBD Sistema Gerenciador de Banco de Dados.

PK Primary Key – Chave primária.

FK Foreign Jey – Chave estrangeira.

IBM International Business Machines - Máquinas de Negócio Internacionais.

IP Internet Protocol – Protocolo de Internet.

DNS Domain Name System - Sistema de Nomes de Domínios.

LISTA DE ILUSTRAÇÕES

Ilustração 1: Interface do site de busca Google..................................................................18Ilustração 2: Links sugeridos para pesquisa........................................................................18Ilustração 3: Exemplo de código HTML...............................................................................20Ilustração 4: Exemplo de algoritmo.....................................................................................22Ilustração 5: Resultado do algoritmo...................................................................................23Ilustração 6: Algoritmo anterior em Java.............................................................................23Ilustração 7: Funcionamento de uma requisição web.........................................................25Ilustração 8: Exemplo – Entidade Aluno..............................................................................27Ilustração 9: Relacionamento entre as entidades Aluno e Escola......................................28Ilustração 10: Exemplo – Tabela Aluno................................................................................29Ilustração 11: Exemplo - Tabela Aluno.................................................................................29Ilustração 12: Dicionário de dados entidade Aluno.............................................................30Ilustração 13: Cronograma final de atividades....................................................................38Ilustração 14: Modelo E-R do Website ...............................................................................39Ilustração 15: Modelo relacional do banco de dados..........................................................40Ilustração 16: Dicionário de dados - Tabela AlunoInscrito...................................................42Ilustração 17: Dicionário de dados - Tabela Escola.............................................................43Ilustração 18: Dicionário de dados - Tabela Usuario...........................................................44Ilustração 19: Dicionário de dados - Tabela Postagem.......................................................45Ilustração 20: Dicionário de dados - Tabela Olimpiada.......................................................46Ilustração 21: Código SQL para a criação do banco de dados sitepoder...........................47Ilustração 22: Página inicial.................................................................................................50Ilustração 23: Página O projeto...........................................................................................51Ilustração 24: Página Calendários.......................................................................................52Ilustração 25: Página Inscrições..........................................................................................53Ilustração 26: Página Fotos.................................................................................................54Ilustração 27: Galeria de imagens.......................................................................................55Ilustração 28: Página Atividades..........................................................................................56Ilustração 29: Página Olimpíadas........................................................................................57Ilustração 30: Página Como estudar?.................................................................................58Ilustração 31: Página Por que participar?............................................................................59Ilustração 32: Página Contato..............................................................................................60Ilustração 33: Aba de login...................................................................................................61Ilustração 34: Página Esqueci a Senha...............................................................................61Ilustração 35: Página Novo Post..........................................................................................63Ilustração 36: Página Gerenciar Postagens........................................................................64Ilustração 37: Página Edição de Postagens........................................................................65Ilustração 38: Página Gerenciar Usuários...........................................................................66Ilustração 39: Página Visualizar Inativos.............................................................................67Ilustração 40: Página Editar E-mail.....................................................................................68Ilustração 41: Página Gerenciar Inscrições.........................................................................69Ilustração 42: Página Edição de Inscrições.........................................................................70Ilustração 43: Página Cadastro de escolas.........................................................................71Ilustração 44: Página Arquivos............................................................................................72Ilustração 45: Página Edição de Olimpíadas (Parte 1)........................................................73Ilustração 46: Página Edição de Olimpíadas (Parte 2)........................................................74Ilustração 47: Botão Sair e voltar à página inicial................................................................74

SUMÁRIO1 INTRODUÇÃO..................................................................................................................13

2 OBJETIVOS......................................................................................................................15

2.1 Objetivo Geral...............................................................................................................15

2.2 Objetivos Específicos..................................................................................................15

3 REFERENCIAL TEÓRICO...............................................................................................16

3.1 Levantamento de Requisitos......................................................................................16

3.1.1 Requisitos Funcionais.................................................................................................16

3.1.2 Requisitos Não-funcionais..........................................................................................17

3.2 Navegação Web............................................................................................................17

3.2.1 World Wide Web.........................................................................................................19

3.2.2 Website.......................................................................................................................19

3.2.3 Navegador...................................................................................................................19

3.2.4 HTML..........................................................................................................................20

3.2.5 CSS.............................................................................................................................21

3.2.6 Protocolo HTTP...........................................................................................................21

3.2.7 Sistema Web - Google Agenda...................................................................................21

3.2.8 Domínio.......................................................................................................................22

3.2.9 Hospedagem...............................................................................................................22

3.3 Programação de computadores.................................................................................22

3.3.1 Algoritmos...................................................................................................................23

3.3.2 Linguagens de Programação......................................................................................24

3.3.3 Programação para Web..............................................................................................25

3.3.4 PHP.............................................................................................................................26

3.3.5 JavaScript...................................................................................................................27

3.4 Banco de Dados...........................................................................................................27

3.4.1 Modelo Entidade-Relacionamento..............................................................................28

3.4.2 Modelo Relacional......................................................................................................30

3.4.3 SQL.............................................................................................................................32

3.4.4 Sistema Gerenciador de Banco de Dados.................................................................33

4 MATERIAL E MÉTODOS.................................................................................................34

4.1 Materiais........................................................................................................................34

4.1.1 brModelo.....................................................................................................................34

4.1.2 MySQL Workbench.....................................................................................................34

4.1.3 Aptana Studio 3...........................................................................................................35

4.1.4 Servidor WAMP...........................................................................................................35

4.1.5 Sendmail.....................................................................................................................35

4.1.6 Google Agenda...........................................................................................................36

4.2 Métodos........................................................................................................................36

4.2.1 Definição de Requisitos..............................................................................................36

4.2.2 Cronograma do desenvolvimento...............................................................................37

4.2.3 Modelagem e Implementação do Banco de Dados....................................................40

4.2.4 Implementação do Sistema........................................................................................49

4.2.5 Testes..........................................................................................................................49

5 RESULTADOS E DISCUSSÃO........................................................................................50

5.1 Espaço Público............................................................................................................50

5.1.1 Página Inicial...............................................................................................................51

5.1.2 Página O projeto.........................................................................................................52

5.1.3 Página Calendários.....................................................................................................52

5.1.4 Página Inscrições........................................................................................................54

5.1.5 Página Fotos...............................................................................................................55

5.1.6 Página Atividades.......................................................................................................56

5.1.7 Página Olimpíadas......................................................................................................57

5.1.8 Página Como estudar?...............................................................................................58

5.1.9 Página Por que participar?.........................................................................................59

5.1.10 Página Contato.........................................................................................................60

5.1.11 Aba Login..................................................................................................................61

5.1.12 Página Esqueci a Senha...........................................................................................62

5.2 Espaço Restrito............................................................................................................63

5.2.1 Página Novo Post.......................................................................................................63

5.2.2 Página Gerenciar Postagens......................................................................................64

5.2.3 Página Edição de Postagens......................................................................................65

5.2.4 Página Gerenciar Usuários.........................................................................................66

5.2.5 Página Visualizar Inativos...........................................................................................68

5.2.6 Página Editar E-mail...................................................................................................68

5.2.7 Página Gerenciar Inscrições.......................................................................................69

5.2.8 Página Edição de Inscrições.......................................................................................70

5.2.9 Página Cadastro de Escolas.......................................................................................71

5.2.10 Página Arquivos........................................................................................................72

5.2.11 Página Edição de Olimpíadas..................................................................................73

6 CONSIDERAÇÕES FINAIS.............................................................................................76

6.1 Limitações....................................................................................................................76

6.2 Trabalhos futuros.........................................................................................................77

REFERÊNCIAS....................................................................................................................78

APÊNDICES........................................................................................................................80

14

1 INTRODUÇÃO

Este trabalho foi realizado para atender a necessidade da equipe coordenadora

do PODER (Projeto de Orientação e Desenvolvimento de Ensino e Raciocínios) de

disponibilizar informações aos interessados no projeto.

O PODER foi criado para estimular alunos regularmente matriculados a partir o

6º ano do ensino fundamental ao 3º ano do ensino médio das cidades de Sombrio

(SC) e região a participar de competições do conhecimento, em especial Olimpíadas

Científicas, dando ênfase na OBMEP (Olimpíada Brasileira de Matemática das

Escolas Públicas). Além disso, procura-se aumentar o conhecimento de matemática

desses alunos com atividades que os estimulem a buscar cada vez mais sobre o

assunto, através de um ambiente descontraído que lhes permite vivenciar novas

experiências.

O projeto, coordenado pelo professor de matemática do IFC – Campus Avançado

Sombrio, Lucas Spillere Barchinski, surgiu através de uma parceria entre alunos da

Licenciatura em Matemática e do curso Técnico em Informática Integrado ao Ensino

Médio do IFC, sendo que estes últimos alunos possuem experiência na participação

de olimpíadas de diversas disciplinas.

A ideia de utilizar a internet para auxiliar a organização do projeto surgiu quando

a equipe organizadora se deparou com a dificuldade de realizar a inscrição dos

alunos, haja vista que seria necessário visitar algumas escolas duas vezes - uma

para divulgar o projeto e disponibilizar as fichas de inscrição e outra para recolher

tais fichas - e os horários disponíveis dos coordenadores eram distintos, dificultando

este processo.

A princípio, uma página na rede social Facebook foi criada com o intuito de

solucionar o problema citado e realizar a divulgação de listas de exercícios, no

entanto, o Facebook não permite a anexação de arquivos de texto em suas páginas,

impossibilitando tal divulgação. A partir daí, percebeu-se que seria interessante

manter um sistema que permitisse a inscrição de alunos e armazenamento de outras

informações, de forma que futuras consultas pudessem ser realizadas.

Assim, este website foi implementado com a finalidade de aproximar o projeto de

seus interessados, isto é, alunos e educadores, sejam da região em que o projeto é

15

realizado ou de outras regiões, mas que desejem levar a ideia do PODER para as

suas realidades. Em comparação com outros meios de divulgação, um website

permite maior interação entre o usuário e a coordenação do projeto: através dele é

possível encaminhar dúvidas e sugestões para a equipe organizadora, ter acesso a

novidades e avisos pertinentes ao projeto e realizar inscrições, por exemplo. Como

outras vantagens, pode-se ainda citar a facilidade em organizar as informações, o

baixo custo de divulgação para a equipe e a disponibilidade do website, haja vista

que o mesmo pode ser acessado a qualquer momento.

Caso exista necessidade e interesse, as funcionalidades do website poderão ser

ampliadas futuramente, pois os códigos-fonte pertencerão ao PODER. Da mesma

forma, o website será disponibilizado para acesso na internet conforme o desejo da

coordenação, que terá o encargo de hospedá-lo.

16

2 OBJETIVOS

O presente capítulo apresenta os objetivos que direcionaram o trabalho, bem

como suas prioridades.

2.1 Objetivo Geral

Desenvolver um website dinâmico, visando facilitar o acesso a informações

disponibilizadas pela equipe coordenadora do PODER, aplicando determinados

conhecimentos adquiridos durante o curso de Técnico em Informática Integrado ao

Ensino Médio, em especial na área de Programação Web.

2.2 Objetivos Específicos

• Selecionar tecnologias disponíveis para desenvolvimento de websites;

• Implementar um site dinâmico para o PODER;

• Facilitar a comunicação dos interessados (alunos e professores) com a

equipe organizadora do projeto;

• Divulgar projetos de apoio a Olimpíadas Científicas;

• Informar alunos e professores sobre Olimpíadas Científicas;

• Possibilitar inscrição on-line de alunos para o PODER;

• Disponibilizar listas e gabaritos dos encontros realizados.

17

3 REFERENCIAL TEÓRICO

Este capítulo aborda conceitos técnicos e definições relacionados ao

desenvolvimento do sistema, proporcionando assim, uma melhor compreensão do

projeto e do processo realizado.

3.1 Levantamento de Requisitos

Os requisitos de um sistema são as descrições do que osistema deve fazer, os serviços que oferece e as restrições aseu funcionamento. Esses requisitos refletem as necessidadesdos clientes para um sistema que serve a uma finalidadedeterminada, como controlar um dispositivo, colocar um pedidoou encontrar informações. (SOMERVILLE, 2011, p. 57).

Os requisitos podem ser obtidos por métodos variados, como entrevistas comuns

entre um analista e o cliente, questionários (em caso de muitos usuários finais,

objetivando atender da melhor maneira as necessidades de todos), oficinas de

requisitos, brainstorms (reuniões com pessoas de níveis variados de conhecimento

sobre o software desejado), entre outras.

Após a coleta, realiza-se a análise dos requisitos visando refiná-los e, e em

seguida, a organização e classificação, atribuindo-lhes prioridades e definindo-os

como funcionais ou não-funcionais.

3.1.1 Requisitos Funcionais

São declarações de serviços que o sistema deve fornecer, decomo o sistema deve reagir a entradas específicas e de comoo sistema deve se comportar em determinadas situações. Emalguns casos, os requisitos funcionais também podem explicaro que o sistema não deve fazer. (SOMERVILLE, 2011, p. 59).

Para a projeção de um novo jogo de computador, é necessário estabelecer as

características do funcionamento deste. Alguns exemplos são a determinação do

18

objetivo do jogo, a delimitação dos movimentos que o usuário pode realizar através

do personagem - como correr somente para frente, parar e pular – e mesmo os

obstáculos (desafios) do jogo.

3.1.2 Requisitos Não-funcionais

“São restrições aos serviços ou funções oferecidos pelo sistema. Incluem [...]

restrições no processo de desenvolvimento e restrições impostas pelas normas.”

(SOMERVILLE, 2011 p. 59).

Tendo-se os requisitos funcionais já definidos, formulam-se restrições, tais como

o design do jogo explorar ao máximo a paleta de cores disponíveis pelo computador

utilizado, assim como qual sistema operacional que este deve apresentar para a

execução do programa.

3.2 Navegação Web

De acordo com Kalbach (2009, p. 23),

A navegação web é definida de três maneiras:

1. A teoria e a prática de como as pessoas movem-se depágina para página na Web.

2. O processo de busca direcionada a objetivos e localizaçãode informação hiperligada; navegando na Web.

3. Todos os links, rótulos e outros elementos que fornecemacesso a páginas e auxiliam as pessoas a orientar-se enquantointeragem com um dado site web.

Exemplificando, é o processo realizado pelo usuário ao solicitar pesquisas para o

site de busca Google, exibido na 1, que permite digitar um termo a ser procurado

pela internet e exibe diversos links (conceito abordado na seção 3.2.2), como

demonstrado na 2, onde o site direciona o usuário para uma página que apresenta

informações a respeito do termo desejado.

19

Ilustração 1: Interface do site de busca Google

Fonte: Os autores, 2014.

Ilustração 2: Links sugeridos para pesquisa


20

3.2.1 World Wide Web

Segundo Velloso (2011), a WWW ou Web (World Wide Web, ou Teia de

Amplitude Mundial), sendo um instrumento da rede, é uma importante fonte de

divulgação e de consulta sobre as informações por ela disponibilizadas.

Por sua vez, Rodrigues (2010, p. 1) define a web da seguinte maneira:

Um conjunto de documentos que se tornam acessíveis pormeio da Internet. Esses documentos (ou páginas web) contêmuma tecnologia chamada hipertexto, pela qual se podempercorrer partes do documento (e outros documentos) atravésde pontes chamadas de links.

É através desta conexão entre documentos e links que os usuários realizam a

navegação web.

3.2.2 Website

Para Velloso (2011, p.225): “Cada lugar no ambiente Web da internet, versando

sobre pessoas ou empresas é denominado Website, ou, simplesmente, site.”

Um website contém um conjunto de páginas interligadas através de links.

Páginas são arquivos HTML que reúnem informações de forma que apareçam em

uma mesma tela. Um link pode ser uma palavra, assim como uma imagem que

direcionam para outra página e torna possível a navegação. (VELLOSO, 2011).

3.2.3 Navegador

“Um navegador é o software de interface utilizado para explorar a Internet.”

(CAPRON, H. L., 2004, p.227)

Os usuários acessam sites e aplicações web através de navegadores (browsers),

usando o mouse para apontar ou clicar sobre textos e imagens na tela, de forma a

explorar a internet. (CAPRON, H. L., 2004). Alguns exemplos de navegadores são

21

Google Chrome, Mozilla Firefox, Internet Explorer, Opera e Safari.

Em geral, os navegadores possuem algumas diferenças na forma de exibir as

páginas web aos usuários - um navegador pode adotar bordas arredondadas e outro

não -, o que exige um cuidado especial dos programadores, embora estas

diferenças estejam sendo minimizadas a cada nova versão, devido ao interesse em

manter os navegadores atualizados em relação aos concorrentes. (W3C, 2010).

3.2.4 HTML

O HTML, Hypertext Markup Language (Linguagem de Marcação de Hipertexto),

considerado a base da internet nos dias de hoje, é uma linguagem de marcação

criada pelo cientista Tim Berners-Lee, em 1991. Originalmente, o HTML foi criado

para que Berners-Lee e outros cientistas trocassem informações sobre pesquisas;

mais tarde, porém, tal linguagem estaria fundando a internet conhecida hoje.

(RODRIGUES, 2010).

Por meio do HTML e suas marcações chamadas tags, é possível criar uma série

de elementos presentes em um website, tais como textos, imagens, formulários,

tabelas e listas. (EIS, 2011).

Um exemplo de código HTML é apresentado pela 3.

Ilustração 3: Exemplo de código HTML

<html><head>

<title>Título da página</title></head>

<body><p>Olá mundo!</p>

</body></html>


22

3.2.5 CSS

Segundo Rodrigues (2010), a linguagem CSS (Cascading Style Sheets, ou

Folhas de Estilo em Cascata) surgiu em 1994, criada por Håkon Wium Lie. Cada vez

mais surgiam sites com maior conteúdo, o que fazia com que a complexidade do

HTML aumentasse e assim a linguagem se tornava difícil de ser mantida. Além disto,

haviam diferenças de implementações de acordo com o navegador usado para a

interpretação do código.

Surge então o CSS, possibilitando que uma maior variedade de formatações –

tais como bordas, efeitos e cores – sejam adicionadas à página HTML e

proporcionando uma grande redução no tempo de trabalho dos desenvolvedores, já

que no CSS as características de formatação são aplicadas a grupos de elementos,

em vez de serem aplicadas individualmente, como era feito no HTML. Atualmente, o

CSS se encontra na versão 3. (RODRIGUES, 2010).

3.2.6 Protocolo HTTP

De acordo com Sousa (2009), o protocolo HTTP é o responsável por realizar a

comunicação entre o navegador (programa client) e o servidor web, fazendo com

que o servidor retorne ao usuário as páginas requeridas por este.

3.2.7 Sistema Web - Google Agenda

O Google Agenda é uma ferramenta do Google capaz de organizar a disposição

de eventos em calendários. Assim, proporciona ao usuário um local centralizador de

tarefas e lembretes, que pode ser facilmente acessado através de um e-mail do

Google. (GOOGLE, 2014).

23

3.2.8 Domínio

"Um domínio consiste em um nome/endereço que faz referência a um IP

(Internet Protocol), que é uma sequência de números que identifica uma rede de

computadores ou um computador na Internet". (MIYAGUSKU, 2007, p.124).

Ou seja, pode-se afirmar que cada site possui duas formas de ser identificado:

um IP, a sequência de números, e um conjunto de caracteres - o domínio. O objetivo

do domínio é então evitar que os usuários da internet precisem decorar inúmeros

IPs, facilitando sua navegação na web. No entanto, cada domínio pertence a apenas

um site, e para que isto ocorra é necessário o registro de tal domínio. No Brasil, este

registro é feito pelo site www.registro.br. (MIYAGUSKU, 2007).

3.2.9 Hospedagem

Segundo Miyagusku (2007, p. 125),

Para ter sua página publicada na Internet, não bastaestabelecer um vínculo com seu domínio. Esse domínio precisaestar ativo através de um servidor DNS. Em geral, essesservidores DNS são prestadores de serviço que além de proveracesso ao seu website, também hospedam todo o seuconteúdo.

Em suma, tais servidores armazenarão todas as informações e códigos do

website, realizando a etapa server-side da navegação web.

3.3 Programação de computadores

Nesta seção, serão abordados alguns conceitos relativos à programação de

computadores: algoritmos, linguagens de programação, programação para web,

PHP e JavaScript.

24

3.3.1 Algoritmos

Para que um software seja desenvolvido, é necessária a construção de

algoritmos. “Um algoritmo corresponde a uma descrição de um padrão de

comportamento, expresso em termos de um conjunto finito de ações.” (DIJKSTRA,

1971 apud ZIVIANI, 2007, pg. 1). Algoritmos construídos para interpretação por

computadores são escritos em linguagens de programação.

O algoritmo que se encontra representado na 4 foi escrito em portugol1 no

programa Visualg, e tem como finalidade somar dois números: 3 e 12, armazenados

nas variáveis variavel_a e variavel_b.

Quando interpretado pelo ambiente de desenvolvimento, o código da 4 fornece

ao usuário o resultado apresentado na 5.

1 Quando um algoritmo mistura comandos com palavras em português, diz-se que este é escrito emportugol.

Ilustração 5: Resultado do algoritmo

variavel_a+variavel_b=15


Ilustração 4: Exemplo de algoritmo

algoritmo “nome_algoritmo”//função: somar dois números//data: 13/06/2014

varvariavel_a: inteirovariavel_b: inteiro

inicio//Seção de comandosvariavel_a ← 3variavel_b ← 12escreva (“variavel_a + variavel_b = ”, variavel_a+variavel_b)fimalgoritmo


25

3.3.2 Linguagens de Programação

O programador, para fazer com que o computador realize a função desejada, usa

uma ou mais linguagens de programação.

De acordo com Velloso (2011, pg. 58), “linguagem de programação é um

conjunto de termos (vocabulário) e de regras (sintaxe) que permite a formulação de

instruções a um computador.”

São exemplos de linguagens de programação: Java, C, Pascal e Delphi.

A 6 apresenta o algoritmo utilizado na seção anterior traduzido para a linguagem

Java.

Para que o processamento das instruções pelo computador seja possível, os

comandos determinados pelo algoritmo devem ser traduzidos para linguagem de

máquina, isto é, uma linguagem binária, composta de números, no caso, 0 e 1. Essa

tradução pode ser feita através da interpretação ou da compilação, dependendo da

linguagem de programação utilizada. A compilação se diferencia da interpretação por

gerar um arquivo com o código-fonte traduzido para a linguagem de máquina. A

interpretação faz o mesmo, porém, sem a geração de um arquivo, pois “as

instruções são traduzidas para linguagem de máquina em tempo de execução,

instrução a instrução.” (MEDINA e FERTIG, 2006, p. 16). São exemplos de

linguagem compilada e interpretada, respectivamente, o C e o PHP.

Ilustração 6: Algoritmo anterior em Java

public class Algoritmo { public static void main(String[] args) { int variavel_a, variavel_b; variavel_a= 3; variavel_b= 12; System.out.println("variavel_a + variavel_b = "+ (variavel_a+variavel_b)); }}


26

3.3.3 Programação para Web

Para Silberschatz, Korth e Sudarshan (2012), a popularização dos computadores

pessoais proporcionou utilizar uma arquitetura (um modo) diferente para aplicações,

de forma que estas fossem executadas no computador cliente e acessasse um

servidor, como de banco de dados, por exemplo. “Essa arquitetura, normalmente

chamada arquitetura “cliente-servidor”, permitiu a criação de poderosas interfaces

gráficas.” (SILBERSCHATZ, KORTH e SUDARSHAN, 2012, p. 232).

Um servidor Web é um programa executado em uma máquinaservidora que aceita solicitações de um navegador Web e enviade volta os resultados na forma de documentos HMTL. Onavegador e o servidor Web se comunicam por meio de HTTP.(SILBERSCHATZ, KORTH e SUDARSHAN, 2012, p. 234)

A camada client-side é formada por linguagens que serão interpretadas no

navegador do usuário final, tais como HTML, CSS e JavaScript; por sua vez, a

camada server-side é composta por arquivos contendo instruções em linguagens

que serão interpretadas no servidor – MySQL e PHP, por exemplo.

Ao se inserir uma URL no navegador, esta requisição é enviada a um servidor

através do protocolo HTTP. O servidor, por sua vez, executa os comandos

necessários e retorna ao cliente, também através do HTTP, o arquivo HTML

requisitado, como esquematizado na 7.

27

3.3.4 PHP

Conforme Lopes (2007), a linguagem PHP (Hypertext Preprocessor) surgiu por

volta de 1994, criada por Rasmus Lerdorf e posteriormente aprimorada por um

grande número de colaboradores, uma vez que é uma linguagem de código aberto.

Esta linguagem permite a criação de websites dinâmicos e com grande interação

com o usuário, seja através de links ou de trocas de informações com banco de

dados ao se preencher um formulário, por exemplo.

O PHP, ao contrário de linguagens como HTML, CSS e JavaScript, é server-side,

ou seja, é uma linguagem que é executada no lado servidor. Tal característica, aliada

à inserção de códigos dessa linguagem em códigos HTML, permite que o usuário

final da aplicação não precise estar a par dos algoritmos e linguagens de

programação utilizadas, recebendo apenas o HTML puro com o conteúdo solicitado.

(LOPES, 2007).

Ilustração 7: Funcionamento de uma requisição web

Fonte: COELHO, 2014.

28

3.3.5 JavaScript

Segundo Rodrigues (2010), o JavaScript é uma linguagem de script2 orientada a

objetos. É empregada “para produzir uma série de instruções incluídas em uma

página Web que são interpretadas e executadas por seu navegador.” (CAPRON,

2004, p. 248).

O JavaScript, linguagem de programação e script criada por Brendan Eich em

1995, é uma linguagem client-side, pois é interpretada no navegador do usuário.

Além disso, permite criar funcionalidades como botões animados e sons,

aumentando assim as capacidades do HTML. (RODRIGUES, 2010).

A partir desta adição de capacidades, é possível “criar efeitos especiais nas

páginas e definir interatividades com o usuário […] alguns exemplos de scripts são:

aparecimento de data/horário atual, saudações como 'bom dia', 'boa tarde' ou 'boa

noite'.” (RODRIGUES, 2010, p.61).

3.4 Banco de Dados

“Um banco de dados é uma coleção logicamente coerente de dados com algum

significado inerente. Uma variedade aleatória de dados não pode ser corretamente

chamada de banco de dados.” (ELMASRI e NAVATHE, 2011, p. 3).

Os bancos de dados (BD) têm sido muito usados no contexto de

desenvolvimento de software devido a necessidade de armazenar informações, em

resposta aos métodos de gestão antigos, como agendas de contatos e fichas de

cadastro. (SILBERSCHATZ, KORTH e SUDARSHAN, 2012).

Para facilitar o desenvolvimento dos BDs, utilizam-se os modelos entidade-

relacionamento (E-R) e Relacional. O modelo E-R é uma ferramenta que permite

esquematizar a estrutura lógica geral que o BD deve apresentar, sendo útil para

mapear significados e interações através de um modelo conceitual. Em seguida,

este modelo é reestruturado e os dados são organizados em forma de tabela que

2 Linguagem de script “é uma linguagem de programação que executa diversas funções no interior de um programa de computador.” (SIGNIFICADOS, 2014). O programa, neste caso, pode ser considerado o navegador.

29

evidencia as relações e interações entre eles, dando origem ao modelo relacional

para, mais tarde, gerar os comandos SQL que efetivarão a criação do banco de

dados. (SILBERSCHATZ, KORTH e SUDARSHAN, 2012).

3.4.1 Modelo Entidade-Relacionamento

De acordo com Silberschatz, Korth e Sudarshan (2012), “o modelo

entidade/relacionamento (E-R) é baseado na percepção de um mundo real que

consiste em uma coleção de objetos básicos, chamados entidades e as relações

entre estes objetos.”

Esses autores também afirmam que o modelo E-R se utiliza de três noções

básicas: conjuntos de entidades, conjunto de relacionamentos e atributos. “Uma

entidade é uma 'coisa' ou um 'objeto' no mundo real que é distinguível de todos os

outros objetos.” (SILBERSCHATZ, KORTH e SUDARSHAN, 2012, p. 159). A

existência desse objeto pode ser tanto física, como uma pessoa ou um carro, quanto

conceitual, como uma empresa ou um curso universitário. (ELMASRI e NAVATHE,

2011).

Uma entidade é representada por um conjunto de atributos (SILBERSCHATZ,

KORTH e SUDARSHAN, 2012), que são “as propriedades específicas que a

descrevem.” (ELMASRI e NAVATHE, 2011, p.135). A 8 exemplifica os conceitos

mencionados, no qual a entidade Aluno possui os atributos matricula, nome e serie,

características próprias de um aluno real.

Ilustração 8: Exemplo – Entidade Aluno


30

Um relacionamento pode ser entendido como uma associação entre várias

entidades. (SILBERSCHATZ, KORTH e SUDARSHAN, 2012). Dando continuidade

ao exemplo anterior, um aluno está associado a uma escola, enquanto uma escola

está associada a nenhum ou vários alunos. A 9 expõe o relacionamento entre as

entidades Aluno e Escola, a seguir.

Nos exemplos citados, os campos matricula, na entidade Aluno, e codigo na

entidade Escola, são diferenciados, denominados de chave primária ou abreviados

através de sua tradução em inglês PK (Primary Key).

“Uma chave primária é um atributo da entidade que identifica apenas um objeto

dessa entidade. Portanto, o valor dentro de uma chave primária não poderá se

repetir e também não poderá receber um valor nulo.” (ANGELOTTI, 2010, p. 22).

Na 9, no qual cada aluno e escola são, respectivamente, identificados pelo

número da matrícula e por um código, exemplifica-se este conceito, tendo em vista

que dois alunos não terão o mesmo número de matrícula, assim como duas escolas

não terão o mesmo código. Dessa forma, é possível diferenciar dois alunos com o

mesmo nome, por exemplo. A chave primária de uma entidade é determinada pelo

projetista. (SILBERSCHATZ, KORTH e SUDARSHAN, 2012).

Sucintamente, o modelo E-R é muito útil para projetos de BD, pois permite a

elaboração de um esquema que descreve a sua estrutura lógica geral através de

modelos conceituais que permitem posterior diagramação dos dados,

relacionamentos e restrições. O modelo E-R é a base para o desenvolvimento do

Ilustração 9: Relacionamento entre as entidades Aluno e Escola


31

modelo relacional do BD. (SILBERSCHATZ, KORTH e SUDARSHAN, 2012).

3.4.2 Modelo Relacional

Este modelo “utiliza um conjunto de tabelas para representar tanto os dados

como as relações entre esses dados […]. Cada tabela tem várias colunas, e cada

coluna um único nome.” (SILBERSCHATZ, KORTH e SUDARSHAN, 2012, p. 7),

como exemplificado na Ilustração 10 e Ilustração 11.

Ilustração 10: Exemplo – Tabela Aluno

matricula nome3 serie Escola_codigo

20121234 João da Silva 6º 001

20121235 João da Silva 7º 002

20121236 Maria dos Santos 7º 002


Ilustração 11: Exemplo - Tabela Aluno

codigo nome endereco diretor

001 EMEB Antônio Amorim Rua das Flores José Farias

002 EEEFM Carla Cristina Av. 15 de Novembro Kátia Pereira

003 EMEB Álvaro da Cunha Rua Mário de Sousa Ana Beatriz


A Ilustração 10 representa visualmente o modelo relacional da entidade Aluno, a

qual contém três alunos cadastrados, distribuídos em três linhas. Observa-se que há

uma coluna extra, ou seja, além dos atributos matricula, nome e serie, já visto no

modelo E-R, há o atributo Escola_codigo, que armazena o código da escola em que

o aluno estuda, isto é, a chave primária (codigo) da entidade Escola.

O atributo Escola_codigo é denominado chave estrangeira ou representado por

sua sigla em inglês - FK (Foreign Key). “No modelo relacional é a chave estrangeira

3 Todos os nomes usados no presente trabalho para os exemplos são fictícios e escolhidos ao acaso.

32

que especifica o relacionamento entre as tabelas.” (ANGELOTTI, 2010, p. 38). É

através dela que se sabe que o aluno João da Silva, do 7º ano, estuda na escola

EEEFM Carla Cristina. Também é importante salientar que uma “chave estrangeira

nunca fará referência a um atributo que não seja uma chave primária.”

(ANGELOTTI, 2010, p. 38).

De acordo com Angelotti (2010), após a criação, através de descrição ou

diagramação do modelo relacional é necessário criar o dicionário de dados.

O Dicionário de Dados da Base de Dados tem por objetivodescrever as propriedades de uma tabela, sua estrutura física eas restrições que cada atributo possui. Assim, o desenvolvedorque irá implementar o banco de dados saberá exatamentecomo a base deve ser criada. (ANGELOTTI, 2010, p. 53).

O dicionário de dados pode ser representado graficamente através de uma

tabela que contenha os seguintes campos: Nome do Atributo, Descrição do Atributo,

Tamanho, Tipo e Restrições (Valor Nulo, Regra de Domínio, Chaves, Valor Default e

Unique). O dicionário de dados da entidade Aluno, pode ser feito como demonstrado

na 12.

Ilustração 12: Dicionário de dados entidade Aluno

Nome atributo Descrição Tamanho Tipo Nulo ChaveDefault(valor

padrão)

Unique(valorúnico)

matriculaArmazena amatrícula do

aluno8 número Não PK - Não

nomeArmazena o

nome doaluno

50 caractere Não - - Não

serieArmazena a

série do aluno2 caractere Não - - Não

Escola_codigo

Armazena ocódigo daescola em

que o alunoestuda

3 número NãoFK que

referenciaEscola

- Não


33

Na figura, o atributo matricula não é declarado Unique porque a chave primária,

naturalmente, não se repetirá, portanto, seria um caso de redundância.

(ANGELOTTI, 2010).

A partir dos diagramas já feitos e do dicionário de dados, é possível criar

efetivamente o banco de dados utilizando a linguagem SQL, como abordado na

seção 3.4.3.

3.4.3 SQL

Segundo Angelotti (2010), a linguagem SQL (Structured Query Language),

originalmente chamada de SEQUEL (Structured English QUEry Language), é uma

linguagem de consulta para banco de dados relacionais, desenvolvida na década de

70 pela empresa IBM (International Business Machines, ou seja, Máquinas de

Negócio Internacionais).

Embora seja definida como uma linguagem de consulta, a SQL traz outros

recursos, tais como meios de definir a estrutura dos dados, para modificação,

inserção, etc., tornando-a uma linguagem abrangente, que permite instruções para

definição de dados – linguagem DDL (Data Definition Language) – e para

manipulação de dados – linguagem DML (Data Manipulation Language).

(ANGELOTTI, 2010).

Angelotti (2010, p. 74) define a DDL como “uma linguagem que disponibiliza as

funções de criação, exclusão ou alteração do esquema da base de dados, isto é, da

estrutura das tabelas, especificação de direitos de acesso, entre outros”.

A DML, por outro lado,

Disponibiliza comandos de inserção, exclusão e alteração dedados na base de dados. Além disso possui comandos quepermitem que o usuário ou o programa de aplicação recuperemas informações previamente armazenadas na base de dados.(ANGELOTTI, 2010, p. 74).

34

3.4.4 Sistema Gerenciador de Banco de Dados

Um Sistema Gerenciador de Banco de Dados (SGBD –Database Management System) é uma coleção de programasque permite aos usuários criar e manter um banco de dados. OSGBD é um sistema de software de uso geral que facilita oprocesso de definição, construção, manipulação ecompartilhamento de bancos de dados entre diversos usuáriose aplicações. (ELMASRI e NAVATHE, 2011, p. 3).

O uso do SGBD é vantajoso por permitir, principalmente: acesso concorrente às

bases de dados – quando uma informação é manipulada em dois ou mais pontos de

acesso, como computadores; a realização de gerenciamento de transações - uma

transação é um conjunto de comandos entendido como “uma unidade lógica

indivisível” (ANGELOTTI, 2010, p. 11); criar e aplicar regras de segurança às bases

de dados – como criar login de acesso e senha para usuários; e criar regras que

garantam a integridade da base de dados - isso significa que se numa aplicação há

um campo a ser preenchido com números e um usuário preenchê-lo com letras ao

submeter a informação o SGBD não permitirá a execução da ação, por exemplo.

(ANGELOTTI, 2010).

35

4 MATERIAL E MÉTODOS

Neste capítulo, são listados e justificados os materiais e os métodos utilizados no

decorrer do trabalho, abrangendo tecnologias (como programas) e técnicas. O

presente trabalho envolveu pesquisa bibliográfica e pesquisa descritiva. A primeira

foi empregada na elaboração do referencial teórico apresentado no Capítulo 3,

enquanto a segunda foi aplicada na elaboração e desenvolvimento do projeto.

4.1 Materiais

Nesta seção, são especificados os materiais: as tecnologias empregadas no

desenvolvimento do website.

4.1.1 brModelo

O brModelo é uma ferramenta disponibilizada gratuitamente e destinada à

modelagem de banco de dados, possibilitando que o desenvolvedor crie esquemas

conceituais e lógicos. Para isto, é possível criar entidades, relacionamentos e

atributos, por exemplo.

A ferramenta se encontra atualmente na versão 3.0, e por ser gratuita e ter sido

utilizada no decorrer do curso – possibilitando assim um maior domínio de seu

funcionamento – foi escolhida para a modelagem do banco de dados do website.

4.1.2 MySQL Workbench

O MySQL Workbench é um ferramenta que auxilia o desenvolvimento de um

banco de dados, fornecendo modelagem de dados e desenvolvimento de SQL, e

também permite a administração de bases de dados.

A versão utilizada foi a MySQL Workbench 5.2 CE que, assim como o brModelo,

foi uma ferramenta apresentada na disciplina de Banco de Dados do curso e, sendo

assim, houve certa familiaridade na hora de usá-la.

36

4.1.3 Aptana Studio 3

O Aptana Studio 3 é um IDE – Ambiente de Desenvolvimento Integrado, na sigla

em inglês – de código aberto que possibilita a criação de documentos escritos em

HTML, CSS, PHP e Javascript, por exemplo. Além de ser mais uma ferramenta

apresentada no curso, o Aptana conta com outras vantagens, tais como ser gratuito,

ter uma interface simples e apresentar sugestões para o código enquanto se está

digitando, poupando tempo para o desenvolvedor.

4.1.4 Servidor WAMP

Segundo o site do WAMP, para que páginas dinâmicas, isto é, páginas

envolvendo interação com o usuário, sejam interpretadas, é necessário o uso de um

servidor web no processo, como o WAMP.

Além disso, o site do programa também afirma que o WAMP (acrônimo resultante

das palavras Windows, Apache, MySQL e PHP) é um servidor web para Windows

que possui vantagens como ser gratuito, reunir em um só programa a possibilidade

de se trabalhar com PHP e MySQL, suportar a versão mais recente do PHP e

possibilitar testes locais de páginas dinâmicas. Ou seja, não é necessário realizar a

hospedagem do site para testar suas funcionalidades, bastando utilizar tal programa.

4.1.5 Sendmail

O Sendmail é um programa gratuito utilizado para envio de e-mails, e trabalha

juntamente com o servidor WAMP. Assim como este, possibilita testes locais,

característica útil no desenvolvimento do sistema, já que assim permite a checagem

de códigos antes do site ser hospedado.

No website PODER, os envios de e-mail foram utilizados nas páginas Contato e

Esqueci a senha, descritas na Seção 5.1.

37

4.1.6 Google Agenda

Neste trabalho houve a necessidade de integrar calendários ao website, a fim de

informar os visitantes deste sobre as datas dos encontros e outras datas importantes

relativas às olimpíadas científicas (como datas de provas).

O Google Agenda foi escolhido porque, além de ser gratuito e possibilitar a

integração direta com o website, é relativamente fácil para a equipe coordenadora

do PODER atualizar seu conteúdo: basta entrar no e-mail do PODER e acessar a

agenda. Assim, todas as informações alteradas serão também automaticamente

alteradas no website. É possível notar, portanto, que esta é uma opção

extremamente vantajosa em comparação às constantes mudanças no código que

seriam necessárias caso as datas fossem inseridas apenas deste modo.

4.2 Métodos

Nesta seção, estão listados e definidos os métodos e técnicas de

desenvolvimento utilizados, desde a definição de requisitos até os testes realizados.

4.2.1 Definição de Requisitos

A definição de requisitos para o sistema apresentado neste trabalho se mostrou

diferente da habitual, considerando que usualmente são utilizados questionários,

brainstorms, visitas de campo e outras técnicas. Estas técnicas se mostraram

desnecessárias, uma vez que as autoras deste trabalho também fazem parte do

PODER, ou seja, além de desenvolvedoras são também futuras usuárias, com

conhecimento prévio e abrangente sobre as funcionalidades do sistema. Assim, a

coleta e análise de requisitos consistiu em definir e listar as interações entre os

usuários e o sistema e analisá-las profundamente, extraindo dali os requisitos e

refinando-os ao longo do processo, através de questionamentos como:

• Quem é o público-alvo? Alunos (principalmente), professores e gestores de

escolas da região sul do estado de Santa Catarina interessados em conhecer

38

olimpíadas do conhecimento e participar do PODER.

• O que os usuários que acessarão o site desejam saber? Os visitantes

desejam obter informações a respeito do projeto, sua descrição, calendário de

atividades e conhecer as atividades já desenvolvidas, além de conhecer

olimpíadas do conhecimento, realizar a inscrição dos alunos interessados em

participar do projeto e comunicar-se com a equipe organizadora para sanar

dúvidas e enviar sugestões.

• Como as atividades desenvolvidas pelo PODER serão apresentadas no

website? As atividades já realizadas estão documentadas em listas de

exercícios resolvidas e arquivos de fotos, que serão organizadas em páginas

distintas.

Após este processo, as informações obtidas foram organizadas em forma de lista

e relacionadas entre si, possibilitando a determinação de aspectos funcionais e

visuais do sistema, além de permitir a priorização dessas informações,

proporcionando a elaboração de um cronograma de atividades.

4.2.2 Cronograma do desenvolvimento

A criação de cronograma de atividades permitiu organizar o desenvolvimento do

software em etapas, sem ter de fazer uso de nenhum processo de desenvolvimento

de software4 específico. As atividades principais foram elencadas e determinou-se

um tempo para a realização de cada uma. No entanto, é comum em projetos ocorrer

o atraso de algumas atividades, o que exigiu remanejamentos constantes no

cronograma até chegar à fase final, apresentada a seguir. O cronograma inicial está

no Apêndice A.

O cronograma está organizado em quinzenas, com seu respectivo mês acima.

Cada símbolo X representa que uma atividade está sendo executada naquele

período, no qual uma ou mais atividades podem estar sendo efetivadas

simultaneamente. Os símbolos em vermelho R representam o período de revisão de

4 Um processo de desenvolvimento de software é um conjunto de métodos utilizado para projetar econstruir softwares visando tornar o procedimento mais eficiente: em grandes projetos, falhasocorrem com maior frequência e deste modo, busca-se minimizar erros e organizar tarefas, entreoutros motivos.

39

uma ou mais atividades realizadas até aquele momento.

40

Ilustração 13: Cronograma final de atividades

Mar Abr Mai Jun Jul Ago Set Out Nov

Definição de requisitos X

Modelar Banco de Dados X X

Gerar comandos SQL-DDL do BD X X

Escrever objetivos geral e específico X

Implementar telas X X X X

Escrever materiais e métodos X X X X R X X X X

Implementar Banco de Dados X X

Programação dinâmica X X X X X X X X X X X X X

Escrever Resultados e Discussões X X X X X X R X

Escrever Referencial Teórico, Introdução e Considerações Finais

X X X X X X X X X X X

Revisão do trabalho R R R R R


41

4.2.3 Modelagem e Implementação do Banco de Dados

A etapa posterior ao planejamento do cronograma consiste na modelagem do

banco de dados, realizada em três fases. A primeira delas é a elaboração do modelo

E-R do projeto de software, na qual os dados que devem ser necessariamente

armazenados estão representados de um modo simplificado, conforme o diagrama

E-R apresentado na 14.

De forma simplificada, os relacionamentos entre as entidades podem ser

compreendidos da seguinte forma: um aluno pertence a uma escola, mas numa

escola estão contidos nenhum, um ou mais de um aluno; uma escola foi cadastrada

por um usuário, mas um usuário pode ou não cadastrar escolas (uma ou mais de

Ilustração 14: Modelo E-R do Website


42

uma); cada usuário realiza nenhuma, uma ou mais postagens, porém, cada

postagem é publicada por somente um usuário. Há ainda a entidade olimpiada, que

não se relaciona com nenhuma outra entidade.

Finalizado a fase de planejamento do modelo E-R, este serviu de base para a

projeção do modelo relacional, reproduzido na 15, criado através do software

MySQL Workbench. Neste modelo as relações entre entidades foram estabelecidas

de modo mais claro, isto é, estão presentes, além das chaves primárias de cada

tabela, as chaves estrangeiras. Em suma, os dados estão melhor especificados:

nota-se que neste modelo aparece o tipo e o tamanho deste dado, o que facilita a

criação do banco de dados físico, pois basta apenas escrever os respectivos

códigos SQL, também no MySQL Workbench.

Ilustração 15: Modelo relacional do banco de dados


43

É necessário explicitar a função do campo outraEscola, pois, a princípio, todas as

escolas das cidades de Sombrio e São João do Sul estarão previamente

cadastradas no sistema no momento da inscrição do aluno. No entanto, o estudante

pode pertencer a uma escola que não esteja entre as catalogadas, e por isso há a

possibilidade de que ele informe o nome da sua escola, que será armazenada no

campo outraEscola e estará disponível para os usuários administradores do website

na página Gerenciar Inscrições, descrita na Seção 5.2.7.

A função dos demais dados, embora em alguns casos seja intuitiva, é abordada

pelo dicionário de dados apresentado a seguir. As informações deste foram

fragmentadas de modo que cada parte seja referente a uma tabela, facilitando a

visualização.

A 16 é o dicionário de dados referente à tabela alunoinscrito. Nela, há dois

campos que aceitam valor nulo, os únicos no BD, são eles: eMailInsc e outraEscola.

Dentre os participantes do projeto, há alunos que pertencem a faixa etária de 10 e

11 anos, por exemplo, que geralmente não possuem e-mail, logo, nem sempre é

possível preencher este campo. O segundo atributo, já abordado nos parágrafos

anteriores, existe como alternativa, isto é, caso a escola em que o estudante está

matriculado não esteja entre as escolas previamente cadastradas, portanto, não é

necessário que seja preenchido sempre.

44

Ilustração 16: Dicionário de dados - Tabela AlunoInscrito

Nome Descrição Tipo Tamanho Nulo Regra Chave Unique

codInsc

Armazena ocódigo, atribuídoautomaticamente

ao alunocadastrado

INT - Não - PK Não

nomeInscArmazena o nome

do alunocadastrado

VARCHAR 100 Não - - Não

idadeArmazena a idade

do alunocadastrado

INT 2 Não - - Não

serie

Armazena a sérieem que estámatriculado o

aluno cadastrado

INT 1 Não - - Não

enderecoArmazena o

endereço do alunocadastrado


fone

Armazena umcontato (númerode telefone) do

aluno cadastrado

BIGINT 10 Não - - Não

nomeMaeAlunoArmazena o nomeda mãe do aluno

cadastradoVARCHAR 100 Não - - Não

nomePaiAlunoArmazena o nome

do pai do alunocadastrado


eMailInscArmazena outro

contato (email) doaluno cadastrado

VARCHAR 50 Sim - - Não

outraEscola

Armazena a escolaem que o aluno

estuda caso estanão esteja

cadastrada nosistema

VARCHAR 100 Sim - - Não

Escola_nome

Relaciona o alunocadastrado à sua

escola, neste caso,já cadastrada no

sistema

INT - Não -FK que

referenciaEscola

Não


A 17, apresentada a seguir, contém os dados armazenados pela tabela escola,

que consistem nas informações necessárias para sua identificação e a do usuário

45

que a cadastrou.

Ilustração 17: Dicionário de dados - Tabela Escola


nomeArmazena o

nome da escolacadastrada

VARCHAR 100 Não - PK Não

Usuario_codigoArmazena o

código do usuárioque a cadastrou

INT - Não -FK que

referenciaUsuario

Não


A 18 é relativa aos dados da tabela usuario, isto é, armazena os dados dos

usuários cadastrados para que estes acessem a área restrita a eles no website. É

importante destacar que além de código, nome de usuário, e-mail e senha, um

usuário também tem um status, (representado pelo atributo ativo) que pode ser ativo

ou inativo, ao qual atribui-se, respectivamente, os valores 1 e 0. Tal medida é

necessária, pois a equipe organizadora do PODER se renova a cada ano; em outras

palavras, antigos membros se desligam do projeto para dar lugar a novos. Assim,

passado um tempo, haverá uma lista extensa de usuários e boa parte deles não

estarão contribuindo, não havendo sentido em mantê-los ativos. Além disso, é

importante que, após a saída de algum membro do projeto, este não esteja mais

habilitado a realizar publicações e outras ações destinadas apenas a usuários

ativos.

Embora a solução mais simples seja excluir estes usuários, tal escolha implicaria

na perda de informações importantes, haja vista que o código de um usuário é ligado

às suas publicações realizadas e às escolas que cadastrou. Sendo assim, caso um

usuário fosse excluído, estas informações seriam perdidas, o que não deve ocorrer.

Logo, para preservar estas informações, ponderou-se que o melhor seria manter os

usuários no banco de dados, mas omiti-los da lista de usuários exibida no website e

impossibilitar o seu acesso à área restrita, mantendo a integridade do sistema.

46

Ilustração 18: Dicionário de dados - Tabela Usuario


codigo

Armazena o códigodo usuário,atribuído

automaticamente


eMailUser

Armazena o e-maildo usuário,

informado nomomento do

cadastro

VARCHAR 50 Não - - Sim

nomeUser

Armazena o nomede usuário

escolhido nomomento do

cadastro

VARCHAR 20 Não - - Sim

ativo

Armazena oestado atual dousuário, ativo ou

inativo

TINYINT 1 Não

Aceita osvalores 0(inativo)

ou 1(ativo)

- Não

senhaArmazena a senha

de acesso dousuário ao website



A seguir, a 19, relativa a tabela postagem, apresenta as informações por ela

armazenada no BD.

47

Ilustração 19: Dicionário de dados - Tabela Postagem


codPost

Armazena o códigoda postagem,

geradaautomaticamente

pelo sistema


dataArmazena a data

em que a postagemfoi publicada

DATE - Não - - Não

tituloArmazena o título

da postagemVARCHAR 45 Não - - Não

corpoTexto

Armazena oconteúdo de umapostagem, o texto

em si

MEDIUMTEXT - Não - - Não

Usuario_codigoArmazena o código

do usuário querealizou a postagem

INT - Não -FK que

referenciaUsuario

Não


Em seguida, a 20 apresenta os dados armazenados na tabela olimpiada.

Ilustração 20: Dicionário de dados - Tabela Olimpiada


codigoArmazena o código da

olimpíadaINT 11 Não - PK Não

nomeArmazena o nome da

olimpíadaVARCHAR 120 Não - - Não

fasesArmazena a quantidade

(número) de fases daolimpíada


niveisArmazena os níveis das

provas da olimpíadaMEDIUM

TEXT- Não - - Não

premiosArmazena informaçõessobre a premiação da

olimpíada

MEDIUMTEXT

- Não - - Não

datasArmazena datas de

inscrição e aplicação deprovas

MEDIUMTEXT

- Não - - Não

comentariosArmazena comentários

extra sobre determinadaolimpíada

MEDIUMTEXT

- Não - - Não


48

A documentação detalhada dos dados facilita a tarefa da terceira fase desta

etapa: a implementação do BD. Esta consiste em transcrever a estrutura do banco

de dados para o código SQL, subconjunto DDL, como apresentado na 21, a seguir.

49

Ilustração 21: Código SQL para a criação do banco de dados sitepoder

CREATE DATABASE sitepoder;USE sitepoder;

CREATE TABLE Usuario ( codigo INT NOT NULL AUTO_INCREMENT, eMailUser VARCHAR(50) NOT NULL UNIQUE, nomeUser VARCHAR(20) NOT NULL UNIQUE, ativo TINYINT(1) NOT NULL, senha VARCHAR(10) NOT NULL, PRIMARY KEY (codigo) );CREATE TABLE Escola ( nome VARCHAR(100) NOT NULL, Usuario_codigo INT NOT NULL, PRIMARY KEY (nome), FOREIGN KEY (Usuario_codigo) REFERENCES Usuario (codigo) ON DELETE CASCADE ON UPDATE CASCADE );CREATE TABLE AlunoInscrito ( codInsc INT NOT NULL AUTO_INCREMENT, nomeInsc VARCHAR(100) NOT NULL, endereco VARCHAR(100) NOT NULL, idade INT(2) NOT NULL, serie INT(1) NOT NULL, fone BIGINT(10) NOT NULL, nomeMaeAluno VARCHAR(100) NOT NULL, eMailInsc VARCHAR(50), nomePaiAluno VARCHAR(100) NOT NULL, outraEscola VARCHAR(100), Escola_nome VARCHAR(100) NOT NULL, PRIMARY KEY (codInsc), FOREIGN KEY (Escola_nome) REFERENCES Escola (nome) ON DELETE CASCADE ON UPDATE CASCADE );CREATE TABLE Postagem ( codPost INT AUTO_INCREMENT NOT NULL, data DATE NOT NULL, titulo VARCHAR(45) NOT NULL, corpoTexto MEDIUMTEXT NOT NULL, Usuario_codigo INT NOT NULL, PRIMARY KEY (codPost), FOREIGN KEY (Usuario_codigo) REFERENCES Usuario (codigo) ON DELETE CASCADE ON UPDATE CASCADE );CREATE TABLE olimpiada ( codigo INT AUTO_INCREMENT NOT NULL, nome VARCHAR(120) NOT NULL, fases VARCHAR(30) NOT NULL, niveis MEDIUMTEXT NOT NULL, premios MEDIUMTEXT NOT NULL, datas MEDIUMTEXT NOT NULL, comentarios MEDIUMTEXT NOT NULL, PRIMARY KEY (codigo) );


50

4.2.4 Implementação do Sistema

Através dos requisitos levantados, criou-se um esboço, feito de modo manual,

das funcionalidades e do aspecto visual do website, de forma a facilitar a posterior

implementação. A partir do esboço, protótipos do layout foram criados, permitindo

avaliar a facilidade com que um futuro usuário pode encontrar as informações que

deseja, tornando-o eficiente. Visando cumprir estes objetivos, palavras-chave foram

dispostas no menu, que recebeu posição de destaque na parte superior da página,

abaixo da imagem com o logotipo do PODER, e optou-se por um design simples,

mas, ao mesmo tempo, harmonioso, em que os visitantes possam se situar na

página com facilidade.

Após a fase de prototipação, o layout foi implementado através das linguagens

de marcação HTML e CSS, criando a página estática, isto é, sem interação com o

usuário. Para tornar a página dinâmica, ou seja, para que haja interação entre a

página e o usuário utilizou-se a linguagem de programação PHP, que permite

executar ações envolvendo BD.

Algumas ações não foram possíveis através do PHP, tais como abrir uma janela

dentro da página, como uma caixa, e para realizá-las fez-se uso de JavaScript.

4.2.5 Testes

Para Sommerville (2011), o teste é realizado para mostrar as funções de um

sistema ou para detectar defeitos deste antes do uso, sendo realizados durante o

processo de desenvolvimento.

No decorrer do desenvolvimento do website PODER os testes foram realizados

durante a criação do código do sistema, visando detectar erros e solucioná-los, tal

como descreve Sommerville.

51

5 RESULTADOS E DISCUSSÃO

Este capítulo apresenta o resultado obtido ao fim do processo de

desenvolvimento do website e suas respectivas funcionalidades.

É importante ressaltar a existência de dois espaços distintos no website: um

público, em que qualquer pessoa, cadastrada ou não no sistema, tem acesso às

informações disponibilizadas; e uma restrita, disponível apenas para usuários

cadastrados.

5.1 Espaço Público

O espaço público é composto pelas seguintes páginas: Home, O projeto,

Calendários, Inscrições, Fotos, Atividades, Olimpíadas, Como estudar?, Por que

participar?, Contato e Esqueci a senha.

Conforme a 22, tal espaço possui como estrutura o cabeçalho (formado pela

imagem-banner e pelos links no canto superior direito), o menu, o rodapé e uma

região intermediária cujo conteúdo varia de acordo com a página.

No cabeçalho, além da imagem-banner, há dois links: um em formato de

engrenagem, que permite aos usuários cadastrados entrarem na área restrita

mediante login e senha, e o logotipo do IFC, que redireciona o usuário ao rodapé.

Através de seu menu horizontal, é possível acessar todas as páginas do espaço

público com exceção da Esqueci a senha, acessada por meio da engrenagem no

canto superior direito.

Há também um rodapé ao fim da página com as informações do Instituto Federal

Catarinense – Campus Avançado Sombrio, já que o PODER é um projeto da

instituição e para que os visitantes do website saibam onde ele ocorre.

52

5.1.1 Página Inicial

Na 22, está apresentada a página inicial do website, denominada Home. Nesta

página, encontram-se as publicações criadas pelos usuários previamente

cadastrados.

Essas publicações são um modo de aproximar os alunos e educadores,

interessados no projeto e em olimpíadas, à coordenação do PODER, que tem como

tarefa informá-los a respeito destas atividades. Cada publicação possui um título (na

Ilustração 22: Página inicial


53

ilustração, representado por Exemplo de postagem), um usuário que a postou

(representado por bruneca) e a data, além do corpo de texto.

Há outras páginas que exibem informações em forma de texto, tais como O

projeto, apresentada na Seção 5.1.2.

5.1.2 Página O projeto

Como retratado na 23, a página O projeto apresenta, em forma de texto, um

breve resumo sobre como funciona o PODER, seus objetivos e outras informações

relevantes aos interessados em conhecer o projeto.

Na última frase do texto, a palavra destacada aqui é um link que redireciona o

usuário para a página Calendários, apresentada na Seção 5.1.3.

5.1.3 Página Calendários

Na página Calendários se encontram dois calendários: o Calendário do PODER,

Ilustração 23: Página O projeto


54

onde se encontram os dias dos encontros do projeto, e o Calendário Olímpico, no

qual estão marcadas as datas relativas às olimpíadas, tais como dias de prova e

prazos para inscrição.

A 24, a seguir, mostra um dos calendários, referente às datas dos encontros do

PODER. Este é apresentado parcialmente para possibilitar a melhor visualização do

resultado do método utilizado, pois a imagem na sua totalidade ficaria extensa e os

detalhes se tornariam borrões indistinguíveis. O segundo calendário é análogo ao

primeiro e se encontra logo abaixo no website.

Ao lado da página Calendários no menu, encontra-se a página Inscrições,

apresentada na Seção 5.1.4.

Ilustração 24: Página Calendários


55

5.1.4 Página Inscrições

Através da página Inscrições, os alunos podem se inscrever no PODER,

preenchendo o formulário apresentado na 25. Ao clicar no botão Concluir, a

validação do formulário é feita, ou seja, o site verifica se os campos obrigatórios

(nome completo, nome da mãe, nome do pai, endereço, telefone, idade, série e

escola) foram preenchidos e se atendem aos formatos exigidos, como, por exemplo,

se há apenas números no campo telefone.

Ilustração 25: Página Inscrições


56

Em relação aos campos série e escola, estes serão preenchidos através de

caixas de seleção, no qual as séries e escolas já estão cadastradas, basta o aluno

eleja a sua. Ao selecionar a escola, é possível que o aluno não encontre a opção

desejada, neste caso, deve preencher o campo outra escola.

Após realizar a verificação, os dados são salvos no banco de dados e a inscrição

é exibida na área restrita para os administradores do site.

5.1.5 Página Fotos

Durante os encontros, diversas atividades são desenvolvidas e documentadas

através de fotografias, que se localizam na página Fotos, representada na 26. Na

ilustração, há uma seleção de fotos do projeto que, quando pressionadas com o

mouse, aumentam de tamanho e adquirem um efeito de galeria, que permite

visualizar todas as fotos sem que seja necessário clicar em cada uma

separadamente.

O efeito de galeria de imagens, apresentado na 27, consiste na exibição linear

das imagens de modo que, individualmente, sejam destacadas sob um fundo

Ilustração 26: Página Fotos


57

escuro, com transparência parcial. Quando uma imagem está sendo exibida, um

clique permite ver a imagem seguinte, até que o álbum de fotos chegue ao final,

momento em que as fotos são reexibidas.

O roteiro das atividades desenvolvidas, em geral, listas de exercícios, também

possuem um espaço destinado a elas na página Atividades, apresentada na Seção

5.1.6.

5.1.6 Página Atividades

A página Atividades apresenta arquivos de texto no formato PDF, disponíveis

para download, como apresentado na 28.

Ilustração 27: Galeria de imagens


58

Um dos objetivos da página é permitir que um professor possa adaptar as

atividades desenvolvidas de acordo com sua necessidade, para realizá-las com seus

alunos. Também é esperado que alunos consultem os exercícios para estudar e se

aprofundar em matemática e outras disciplinas, visto que as resoluções dos

exercícios também são divulgadas.

Sabe-se que existem olimpíadas de outras áreas do conhecimento que podem

ser de interesse de alunos/educadores, e informações sobre elas estão disponíveis

na página Olimpíadas.

5.1.7 Página Olimpíadas

Na página Olimpíadas, há uma lista de olimpíadas científicas representadas por

suas respectivas siglas e classificadas por assunto. Quando uma destas siglas é

selecionada, uma área rosa é exibida ao lado da lista, expondo informações sobre a

olimpíada escolhida.

Ilustração 28: Página Atividades


59

A 29 apresenta um trecho da página, e o que ocorre quando a sigla OBMEP é

clicada: seu nome oficial, número de fases, período de inscrição e outras

informações são exibidas. Abaixo do nome da olimpíada, há a opção Fechar, que

oculta a caixa de informações e permite que o usuário leia outro tópico.

Outras informações relacionadas a olimpíadas são dispostas em outras

páginas, tal como a página Como estudar?, apresentada na Seção 5.1.8, a seguir.

5.1.8 Página Como estudar?

Na página Como Estudar?, são apresentadas, em forma de texto, sugestões

para os alunos se prepararem para as olimpíadas, no entanto, tais sugestões podem

Ilustração 29: Página Olimpíadas


60

ser incorporadas ao cotidiano, no momento de estudar para uma prova da escola,

por exemplo. A 30 apresenta um trecho desta página, pois o texto completo é

extenso e encontra-se no Apêndice B.

Para estudar, é também preciso motivação, e a página Por que participar?,

apresentada na Seção 5.1.9, é destinada a esse fim.

5.1.9 Página Por que participar?

Na página Por que participar?, representada na 31, há um pequeno texto

ressaltando os benefícios da participação em olimpíadas científicas, tanto para

alunos quanto para professores. Por fim, o aluno é convidado, através do texto e da

palavra grifada aqui (um link que o direciona para a página Atividades, abordada na

Seção 5.1.6), a treinar para as olimpíadas com as atividades trabalhadas no projeto.

Ilustração 30: Página Como estudar?


61

Em caso de dúvidas, críticas e/ou sugestões para o projeto é possível que o

usuário se comunique com a organização do projeto, como abordado na seção

5.1.10.

5.1.10 Página Contato

A 32 apresenta a página Contato, através da qual os visitantes do site podem

deixar uma mensagem para a equipe coordenadora do projeto, visando sanar

dúvidas ou apresentar críticas e sugestões.

O envio da mensagem consiste no preenchimento do formulário exibido na

página, composto por três campos de texto, todos obrigatórios: Nome, E-mail e

Mensagem. Quando o botão Enviar é pressionado, o sistema realiza a validação dos

campos, verificando se estão todos preenchidos de forma correta. O campo E-mail,

por exemplo, é considerado válido se possui o caractere @.

Caso os conteúdos de todos os campos sejam válidos, um e-mail, no qual o

corpo de texto traz as informações fornecidas pelo usuário, é enviado para o

Ilustração 31: Página Por que participar?


62

endereço eletrônico da coordenação do PODER, para que a resposta possa também

ser encaminhada através deste meio. Quando algum dos campos não é válido, a

ação do botão não é realizada, isto é, o e-mail não é enviado e o usuário deve

corrigir a informação após ler o aviso de erro emitido pelo sistema.

5.1.11 Aba Login

A aba login, apresentada na 33, permite aos usuários cadastrados acessarem a

área restrita do website, na qual são feitas as postagens, o gerenciamento de

inscritos, entre outras ações.

A aba é exibida ao clicar sobre a figura com formato de engrenagem, localizada

no canto superior direito do cabeçalho, como já apresentado na 22. Nesta aba, o

usuário digita seu login e sua senha, nos campos destinados a estas informações, e

clica no botão Entrar, para que o sistema verifique se os dados digitados

correspondem aos cadastrados no banco de dados. Em caso afirmativo, o usuário é

redirecionado para o espaço restrito, apresentado na Seção 5.2. Caso contrário, um

Ilustração 32: Página Contato


63

erro avisa ao usuário que os dados digitados estão incorretos, sendo possível

realizar uma nova tentativa.

Caso não lembre sua senha, o usuário pode clicar sobre o link Esqueci a senha,

o qual irá redirecioná-lo à página de mesmo nome.

5.1.12 Página Esqueci a Senha

A página Esqueci a Senha, conforme a 34, permite ao usuário a recuperação de

sua senha através de seu e-mail.

Ilustração 34: Página Esqueci a Senha


Ilustração 33: Aba de login


64

Ao clicar no botão Enviar, o sistema verifica se o e-mail digitado está cadastrado.

Se o e-mail estiver cadastrado no banco de dados, um e-mail é enviado ao usuário

informando sua senha; caso contrário, uma mensagem de erro é exibida e o usuário

pode tentar um novo e-mail.

Finalmente, ao realizar o login o usuário é redirecionado para as páginas restritas

do website, apresentadas na seção 5.2.

5.2 Espaço Restrito

Nesta seção, serão abordadas as páginas e funcionalidades referentes ao

espaço restrito do website.

Assim como o espaço público, o restrito possui uma estrutura padrão, que pode

ser observada na 35: uma imagem-banner, o menu, uma área branca (cujo conteúdo

muda de acordo com a página) e o rodapé. Quando o usuário realiza seu login

corretamente, é direcionado para a página Novo Post.

5.2.1 Página Novo Post

Na página Novo Post, reproduzida na 35, as publicações exibidas na página

Home, apresentada na seção 5.1.1, são criadas.

Para criar uma nova publicação, é necessário o preenchimento dos campos

Título e Texto, sendo o último passível de formatação, através de tags HTML. Ao

clicar em Publicar, o sistema faz a validação dos campos, de modo semelhante ao

executado nas páginas Inscrições e Contato, detalhadas nas seções 5.1.4 e 5.1.10,

respectivamente. Caso um ou os dois campos não forem preenchidos, a postagem

não é efetuada enquanto o(s) preenchimento(s) não for(em) realizado(s). Caso todos

os campos sejam válidos, a postagem é salva no BD e publicada, assim como passa

a ser exibida na página Gerenciar postagens.

65

5.2.2 Página Gerenciar Postagens

É na página Gerenciar Postagens, representada na 36, que as postagens já

publicadas são exibidas, para o controle dos usuários. Além das postagens

propriamente ditas, são exibidos também seu título, o usuário que a postou e a data

em que foi postada. Em cada área rosa, que reúne as informações relativas a cada

postagem, há também dois botões: Excluir e Editar.

Ilustração 35: Página Novo Post


66

Ao pressionar com o mouse em Excluir, o sistema abre uma janela para

confirmação da ação de exclusão da publicação selecionada, de forma que se o

usuário informar uma resposta afirmativa, a postagem é excluída. Se for negativa, a

exclusão não ocorre e a página Gerenciar Postagens é exibida normalmente.

Já o botão Editar, quando clicado, direciona o usuário para a página Edição de

Postagens, apresentada na Seção 5.2.3.

5.2.3 Página Edição de Postagens

A página Edição de Postagens permite ao usuário realizar alterações em uma

publicação, o que pode ser interessante para corrigir informações ou acrescentá-las.

Ao acessar a página, apresentada na 37, as informações título e corpo de texto,

relativas à postagem selecionada, são exibidas para o usuário dentro de um

formulário, o que possibilita a edição do conteúdo dos campos.

Após concluir as alterações, para que a edição seja efetivada é necessário que o

botão Salvar Alterações seja pressionado com o mouse. Além de registrar no banco

de dados as alterações realizadas, o botão redireciona o usuário para a página

Gerenciar Postagens, descrita na Seção 5.2.2.

Ilustração 36: Página Gerenciar Postagens


67

Outra página que possui a função de gerenciamento é a página Gerenciar

Usuários, apresentada na Seção 5.2.4, a seguir.

5.2.4 Página Gerenciar Usuários

Na página Gerenciar Usuários, exibida na 38, é possível cadastrar novos

usuários, desativar os já existentes e alterar a própria senha, além de ter acesso às

páginas Visualizar Inativos e Editar E-mail, sendo que o acesso a estas páginas é

feito exclusivamente através da página Gerenciar Usuários.

Primeiramente, para cadastrar um novo usuário é obrigatório o preenchimento de

todos os campos: Nome de usuário, E-mail e Senha. Ao clicar em Cadastrar, o

sistema verifica se todos os campos estão preenchidos e de acordo com as

restrições (como acontece com o e-mail, detalhado anteriormente na seção 5.1.12):

caso não estejam, o cadastro não é realizado e os campos vazios ou com erro na

validação ficam destacados para que o usuário os preencha corretamente. Caso

contrário, isto é, todos os campos estejam preenchidos de acordo com as restrições

requeridas, o cadastro é realizado e o novo usuário é automaticamente considerado

ativo.

Ilustração 37: Página Edição de Postagens


68

Ao lado do formulário de cadastro, há uma área rosa na qual o usuário pode

alterar a sua senha, basta que digite a sua senha atual e a senha que deseja colocar

como nova nos respectivos campos e clique no botão Ok. É importante ressaltar que

o ato de o usuário ter que digitar a sua senha atual para alterá-la evita enganos: se

não existisse tal campo, um usuário descuidado poderia, sem querer, trocar a senha

de outro usuário que esqueceu de realizar logout, imaginando estar alterando a sua

própria, entre outras situações.

Após o clique, o sistema faz duas verificações: na primeira, verifica se todos os

campos estão preenchidos. Se não, o processo de alteração de senha é

interrompido, e os campos em branco ficam destacados para o preenchimento. Caso

não haja nenhum campo vazio, a segunda verificação é realizada: nesta, verifica-se

se a senha indicada como antiga é de fato a senha atual do usuário. Se sim, a

alteração da senha é efetuada; se não, um aviso alerta ao usuário que sua senha

atual não é a digitada neste campo, e então é possível repetir a operação.

Também através da página, é possível desativar usuários, que são visualizados

na página Visualizar Inativos, apresentada na seção 5.2.5.

Ilustração 38: Página Gerenciar Usuários


69

5.2.5 Página Visualizar Inativos

Quando um usuário é desativado, passa a ser exibido na página Visualizar

Inativos, representada na 39.

Nesta página, estão listados os usuários inativos, isto é, impossibilitados de

realizar login para entrar na área restrita. Juntamente aos nomes de usuário, estão

listados os respectivos e-mails e a afirmação de que estão inativos. Além disso, há

dois botões: Editar e-mail e Ativar. Ao clicar no primeiro, surge a página Editar e-

mail, apresentada na seção 5.2.5, e ao clicar no segundo, o usuário é ativado,

passando então a ser visível na página Gerenciar Usuários.

5.2.6 Página Editar E-mail

A página de edição de e-mail, apresentada na 40, tem como finalidade editar os

e-mails dos usuários. É importante notar que um usuário pode realizar esta alteração

em qualquer outro usuário, tornando possível atualizar esta informação de um

usuário que parou de usar determinada conta de e-mail, por exemplo.

Ilustração 39: Página Visualizar Inativos


70

Para realizar tal edição, o usuário deve digitar o novo e-mail e clicar em Ok, a fim

de que o website verifique se o campo está vazio. Se estiver, um aviso alerta ao

usuário que o campo deve ser preenchido; senão, uma segunda verificação é

realizada, isto é, se o e-mail digitado já está relacionado a outro usuário: se estiver, o

sistema avisa o usuário que tal e-mail já está cadastrado, e então outra tentativa de

edição é permitida. Por outro lado, se o e-mail for único, a alteração é realizada.

A necessidade de o e-mail ser único se deve ao fato de que, se houvessem e-

mails iguais, ao requisitar a senha por meio da página Esqueci a senha, o usuário

poderia receber uma senha que não fosse sua. Reciprocamente, sua senha poderia

ser enviada a outro usuário, eliminando o sigilo.

5.2.7 Página Gerenciar Inscrições

As inscrições dos alunos, realizadas por meio da página Inscrições (descrita na

Seção 5.1.4), ficam visíveis para a equipe coordenadora na página Gerenciamento

de Inscrições, exibida na 41.

Nesta página são apresentados, na forma de tabela, dados relativos a cada

inscrição: o nome do aluno, seu endereço, idade, série, telefone, nome da mãe,

nome do pai, e-mail e escola. Cada linha da tabela possui, ao lado de tais dados, o

link Editar e uma caixa de seleção. Enquanto o link leva à página Edição de

inscrições, as caixas de seleção possibilitam, através do botão Excluir selecionados,

a exclusão de tais informações.

Ilustração 40: Página Editar E-mail


71

Como os inscritos no projeto mudam de um ano para outro e outros desistem no

decorrer do projeto, é interessante manter a funcionalidade de exclusão de inscrição.

Além disso, a exclusão não é realizada caso nenhuma caixa de seleção seja

selecionada.

A página para edição de inscrições é apresentada na seção 5.2.8.

5.2.8 Página Edição de Inscrições

A página Edição de Inscrições, apresentada na 42, funciona de modo similar à

página Edição de Postagens, isto é, apresentando ao usuário as informações da

inscrição escolhida e permitindo, através dos campos e do botão Concluir edição, a

alteração de tais informações. Há também o botão Cancelar, que redireciona ao

usuário a página Gerenciar Inscrições novamente.

Ilustração 41: Página Gerenciar Inscrições


72

Também de modo semelhante à Edição de Postagens, o sistema realiza a

verificação dos campos, não permitindo a alteração caso os campos obrigatórios

estejam vazios ou com valores inadequados.

5.2.9 Página Cadastro de Escolas

A página Cadastro de Escolas, exibida na 43, tem como função o cadastro de

escolas para que estas fiquem visíveis na página Inscrições, ou seja, para que o

aluno escolha a sua escola no ato da inscrição. Esta função é necessária uma vez

que a participação no projeto não é restrita a alunos de algumas escolas, portanto

estudantes de novas escolas podem participar do PODER, então a equipe

organizadora pode se atentar a estas escolas e cadastrá-las.

Além de permitir o cadastro de novas escolas através do campo, que

logicamente não deve ficar vazio, e do botão, a página também exibe as escolas já

cadastradas.

Ilustração 42: Página Edição de Inscrições


73

5.2.10 Página Arquivos

A disponibilização de arquivos, através da página Arquivos apresentada na

Seção5.2.10, é realizada de modo diferente das publicações de texto. No caso da

presente página, é necessário apenas anexar o arquivo através do botão Escolher

arquivo e pressionar com o mouse o botão Postar. O botão Escolher arquivo

sobrepõe uma janela que exibe as pastas e arquivos do computador do usuário, de

forma semelhante à anexação de arquivos dos serviços de e-mail.

Finalizado o procedimento, os arquivos são listados na página Atividades,

apresentada na seção 5.1.6.

Ilustração 43: Página Cadastro de escolas


74

Abaixo dos botões para a publicação de arquivos e do aviso, há uma lista com os

arquivos já postados, ou seja, que já podem ser visualizados na página Atividades. É

pertinente alertar que não há como excluir um documento postado sem entrar na

pasta do servidor no qual o website está hospedado e fazê-lo manualmente,

portanto, é preciso atenção do usuário para evitar publicar um arquivo indesejado e,

com este fim, criou-se o aviso abaixo dos botões.

5.2.11 Página Edição de Olimpíadas

A página Edição de Olimpíadas, apresentada nas ilustrações 45 e 46, tem como

finalidade propiciar a modificação de informações a respeito de várias olimpíadas já

inseridas, haja vista que ano após ano, as olimpíadas podem sofrer modificações em

seu formato e o período de inscrição de cada uma também pode sofrer alterações.

Não é possível modificar as informações desta página através da edição de

publicações de texto devido ao conteúdo da página Olimpíadas – apresentada na

seção 5.1.7 - ser exibido através de JavaScript, diferente das publicações da página

Home, o que demanda um espaço diferenciado para edição e dificulta o acréscimo

Ilustração 44: Página Arquivos


75

de conteúdo, no caso, de novas olimpíadas.

A edição do conteúdo é feito em duas etapas: a primeira delas consiste em

selecionar a olimpíada que se deseja modificar, como mostra a 45.

A segunda etapa é a modificação propriamente dita, na qual o usuário digita nos

campos disponíveis as alterações necessárias, como reproduzido na 46. Após

finalizar as alterações, o usuário deve pressionar com o mouse no botão Concluir

Edição para que as novas informações sejam salvas.

Ilustração 45: Página Edição de Olimpíadas (Parte 1)


76

Por fim, o usuário pode deslogar, isto é, sair da área restrita, e continuar a

navegar no espaço público, pressionando o último botão do menu, apresentado na

47.

Ilustração 46: Página Edição de Olimpíadas (Parte 2)

Fonte: os autores, 2014.

Ilustração 47: Botão Sair e voltar à página inicial


77

6 CONSIDERAÇÕES FINAIS

O presente trabalho cumpriu os objetivos propostos: foi desenvolvida uma

ferramenta dinâmica e virtual que permite a comunicação de estudantes e

educadores com a organização do PODER através de um formulário de contato, a

divulgação de projetos de apoio a olimpíadas através de publicações informativas, a

difusão de olimpíadas através de uma página específica para tal, a inscrição de

aluno para participação do projeto mediante o preenchimento de um formulário com

este fim e a disponibilidade dos arquivos com os exercícios e resolução destes

também em uma página específica.

O trabalho foi muito produtivo e construtivo, permitiu conhecer mais sobre o

desenvolvimento de softwares, perceber a importância da organização e outros

fatores, com ênfase no desenvolvimento para web, expandindo o conhecimento dos

desenvolvedores do presente projeto.

6.1 Limitações

Apesar de cumpridos os objetivos, o projeto apresenta algumas limitações em

relação às seguintes funcionalidades: anexação de imagens e fotos, exclusão de

arquivos dinamicamente, adição de novas olimpíadas e criptografia de senha. Tais

funções não foram implementadas, ou por não constarem na lista de prioridades

durante o desenvolvimento do sistema, ou por apresentarem complexidade e

demandarem conhecimentos além dos obtidos, que não puderam ser alcançados

devido ao tempo disponível.

A anexação de imagens só pode ser realizada através do código-fonte, logo,

apenas usuários com conhecimento adequado – em HTML - podem fazê-lo. Em

relação aos demais arquivos PDF postados, a deleção só pode ser feita acessando

a pasta do servidor no qual o site está alocado e removendo manualmente o arquivo

desejado. Durante o desenvolvimento do website, não foi possível encontrar uma

maneira de adicionar novas olimpíadas além das já elencadas, exceto pela alteração

do código-fonte, entretanto, é possível informar a esse respeito através de novas

78

publicações de texto. Outra limitação do sistema é a senha do usuário não ser

criptografada para o armazenamento no banco de dados, diminuindo a segurança

do usuário.

6.2 Trabalhos futuros

Tais limitações podem ser aprimoradas em futuras versões do website, que terá o

código-fonte entregue à coordenação do PODER para sua utilização, assim como

novas funções podem ser incrementadas.

Como recomendações para futuros trabalhos, dentre algumas funcionalidades

podem ser acrescentadas visando melhorar o website, estão a disponibilidade de um

sistema de busca dos artigos já publicados, para o visitante da página encontrar

alguma publicação específica, assim como permitir que os leitores das publicações

as comentem, aumentando a interação entre a equipe organizadora do PODER e o

usuário. Também é interessante possibilitar a exibição de vídeos além de fotos,

transformar a lista de inscritos em lista de presença que possam ser utilizadas nos

encontros e ainda desenvolver a versão mobile, que pode ser acessada através de

tablets e smartphones sem distorção visual do conteúdo. Por fim, o site seria ainda

mais completo se houvesse um enfoque maior aos professores, como por exemplo

cores diferentes nas datas do Google Agenda da página Calendários: deste modo, o

professor pode saber a quais datas deve ficar atento, assim como o aluno. Para isto,

bastaria olhar uma legenda que informaria qual é a sua cor correspondente.

79

REFERÊNCIAS

ANGELOTTI, Elaini Simoni. Banco de Dados. Curitiba: Editora do Livro Técnico, 2010.

CAPRON, H. L. Introdução à Informática. São Paulo: Pearson Prentice Hall, 2004.

COELHO, Eduardo S. Construção de páginas Web: conceitos e topologias. Disponível em: <http://profeduardoscoelho.appspot.com/arquivos/aula02construcaodepaginaswebconceitosetecnologias.pdf>. Acesso em: 28 abr. 2014.

EIS, Diego. O básico: O que é HTML?. Disponível em: <http://www.tableless.com.br/o-que-html-basico/>. Acesso em: 9 abr. 2014.

ELMASRI, Rames; NAVATHE, Shamkant B.. Sistemas de banco de dados. 6 ed. São Paulo: Pearson Adison Wesley, 2011.

GOOGLE. Google Agenda: agenda e programação on-line para empresas. Disponível em: <http://www.google.com/intx/pt-BR/enterprise/apps/business/products/calendar/>. Acesso em: 23 set. 2014.

KALBACH, James. Design de navegação web: otimizando a experiência do usuário. Porto Alegre: Bookman, 2009.

LOPES, S. O que é PHP. Disponível em: <http://www.oficinadanet.com.br/artigo/659/o_que_e_php>. Acesso em: 21 abr. 2014.

MEDINA, Marco; FERTIG, Cristina. Algoritmos e programação: teoria e prática. 2. ed. São Paulo: Novatec Editora, 2006.

MIYAGUSKU, Renata Hiromi Minami. Crie sites arrasadores: Flash, DHTML, CSS, HTML, Dreamweaver, JavaScript. São Paulo: Universo dos Livros, 2007.

RODRIGUES, Andréa. Desenvolvimento para Internet. Curitiba: Editora LT, 2010.

SIGNIFICADOS. Significado de Script – O que é, Conceito e Definição. Disponível em: <http://www.significados.com.br/script/>. Aceso em: 28 ago. 2014.

80

SILBERSCHATZ, Abraham; KORTH, Henry F.; SUDARSHAN, S. Sistema de banco de dados. 6. ed. São Paulo, SP: Pearson Makron Books, 2012.

SOMERVILLE, Ian. Engenharia de Software. 9. ed. São Paulo, SP: PearsonPrentice Hall, 2011.

SOUSA, Lindeberg Barros de. Projetos e implementação de redes: fundamentos, arquiteturas, soluções e planejamento. 2.ed. São Paulo, SP: Erica, 2009.

VELLOSO, Fernando de Castro. Informática: conceitos básicos. 8. ed. rev. e atual. São Paulo: Campus; Rio de Janeiro, RJ: Elsevier, 2011.

W3C. Análise do suporte atual pelos navegadores e estratégias de uso.Disponível em: <http://www.w3c.br/cursos/html5/conteudo/capitulo2.html> Acessoem: 24 out. 2014.

WAMP. WampServer, a web development platform on Windows – Apache, MySQL, PHP. Disponível em: <www.wampserver.com/en/>. Acesso em: 25 set. 2014.

ZIVIANI, Nivio; BOTELHO, Fabiano Cupertino. Projeto de algoritmos: com implementações em Java e C++. São Paulo: Cengage Learning, 2007.

81

APÊNDICES

APÊNDICE A – Cronograma inicial de atividades

Mar Abr Mai Jun Jul Ago Set Out

Definição de requisitos X

Modelar Banco de Dados X

Gerar comandos SQL-DDL do BD X

Escrever objetivos geral e específico X

Implementar telas X X X X

Escrever materiais e métodos X X X X R

Implementar Banco de Dados X

Programação dinâmica X X X

Escrever Resultados e Discussões X X X

Validar Sistema e consertar possíveis falhas X

Escrever Referencial Teórico X X X R

Escrever Introdução e Considerações Finais X X

Revisão do trabalho R R

Pré-defesa X X

82

APÊNDICE B – Texto completo da página Como Estudar?

Olimpíadas Científicas são competições do conhecimento, constantes desafios, e

você tem que estar sempre preparado para eles. Mas como fazer isso? Aqui temos

algumas dicas para ajudar vocês, mas é bom lembrar que cada um tem seu ritmo de

aprendizagem e os métodos mais eficazes não são os mesmos para todas as

pessoas, é algo bastante pessoal, a ideia é orientá-los para encontrar os próprios

métodos de estudo. Então, vamos começar:

1. Quando você define o que precisa ser estudado (muitas vezes você estuda

para mais de uma olimpíada ao mesmo tempo) é importante estabelecer um

cronograma, mas ele tem que fazer sentido, veja bem, se você vai estudar

matemática, em especial geometria, não é possível fazer isso em um dia, porque

além de procurar um bom material, em livros, vídeo aulas ou outros meios, é preciso

ler e PRATICAR muito. Por isso, é importante ter noção do tempo que você demora

para aprender, para poder definir de maneira consciente o seu cronograma.

2. Muitas vezes, o cronograma só vai te guiar, é bem possível que você não

consiga cumpri-lo no prazo desejado, mas a ideia é que você tire o tempo que você

estabeleceu para estudar para fazer algo produtivo. Talvez quando você fizer isso,

não esteja disposto a estudar determinado conteúdo, mas você pode escolher outro.

O cronograma é apenas para organização do tempo.

3. Evite rotinas exaustivas de estudos. A princípio, estudar em torno de duas

horas diárias, ou pelo menos 3 vezes por semana, é o suficiente para aprender um

número razoável de coisas. É provável que você descubra um assunto que você

goste e fique por horas estudando, costuma acontecer com problemas de

matemática. Mas sabe o melhor? Provavelmente você nem vai notar.

4. Se você pesquisar, há alguns sites que falam sobre olimpíadas e separam os

conteúdos que geralmente são cobrados nelas e às vezes dão até dicas de livros e

apostilas. É uma mão na roda na hora de descobrir o que deve ser estudado. Vamos

indicar o Olimpíadas Científicas, um site bem completo:

www.olimpiadascientificas.com.

5. Além de ler os conteúdos separados, é legal resolver as provas anteriores de

cada olimpíada, para você conhecer a prova e o seu nível de complexidade. Nas

83

olimpíadas de matemática, por exemplo, você pode notar que a OBMEP exige muito

raciocínio, enquanto a OBM cobra criatividade e conhecimento avançado e a

Canguru de matemática apresenta exercícios um pouco mais simples, no entanto,

mais conteudistas. Além disso, alguns assuntos são mais frequentes que outros,

então você pode focar neles para se garantir na hora da prova.

6. Descanse. É importante estabelecer uma rotina de sono, dormir menos de 6

horas por noite não é indicado, principalmente em véspera de prova. É bom que

você esteja bem descansado, há vários relatos de pessoas que acabaram dormindo

durante a prova, então fique atento!

7. Você deve ter notado que olimpíadas te transformam em autodidata

(autodidata é a pessoa que consegue estudar por conta própria, sem o

acompanhamento de um professor. Leonardo da Vinci era autodidata.), então é

possível que você tenha dúvidas e dificuldades, neste caso, não hesite, procure o

seu professor! O papel do professor é importantíssimo, é ele quem motiva e ampara

o aluno, por isso, quando encontrar um tempo livre na aula, ou durante o intervalo,

não perca, JAMAIS, a chance de sanar uma dúvida e/ou pedir ajuda.

8. Talvez você se depare com algum assunto que não exija raciocínio, e sim

memorização. E agora? Uma dica é você brincar de jogo da memória. Espera, como

assim? Faça cartões recortando uma folha de papel em branco (já usada ou não,

lembre de evitar o desperdício, pense no meio ambiente) em um dos lados, coloque

o nome do assunto e no verso a explicação, exemplo:

1. (Física) Movimento Retilíneo Uniforme;

2. No verso: É o movimento que acontece em linha reta com velocidade

constante, expresso pela fórmula: S=S0+vt (S é o espaço final; S0 é o espaço inicial;

v é a velocidade; t é o tempo;)

Com a ajuda dos cartões, você começa um exercício de memorização, isto é,

vire-o com o assunto pra cima e “adivinhe” o que está no verso, depois confere a

resposta. Eles podem ser muito úteis para estudar para uma prova na escola

também.

9. Monte um grupo de estudos. Se algum colega seu se interessa pelo assunto,

porque não convidá-lo a aprender mais? Vocês podem crescer muito juntos, então

não deixe a oportunidade passar ;)

84

10. DEDICAÇÃO! Dedicar-se é algo fundamental, procure não deixar de estudar

para jogar videogame, por exemplo. Busque novos materiais de estudo, novos

métodos, faça experiências, tente ver como as coisas acontecem na prática. É útil

também conversar com professores.

11. Você precisa também adquirir o hábito de ler, porque a compreensão de

enunciados é imprescindível para a resolução de exercícios.

12. Essa é a última dica: seja persistente e se supere sempre, estabeleça metas

e busque cumpri-las, desistir nunca é uma opção.

campus avanÇado sombrio bruna inÁcio … · suas realidades. em comparação com outros meios de...

Documents