campus avanÇado sombrio bruna inÁcio … · suas realidades. em comparação com outros meios de...
TRANSCRIPT
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
BRUNA INÁCIO TRAJANO
LETÍCIA RECCO TRAMONTIN
WEBSITE PODER:
Projeto de Orientação e Desenvolvimento de Ensino e Raciocínio
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
BRUNA INÁCIO TRAJANO
LETÍCIA RECCO TRAMONTIN
WEBSITE PODER:
Projeto de Orientação e Desenvolvimento de Ensino e Raciocínio
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
Fonte: Os autores, 2014.
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>
Fonte: Os autores, 2014.
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
Fonte: Os autores, 2014.
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
Fonte: Os autores, 2014.
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)); }}
Fonte: Os autores, 2014.
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
Fonte: Os autores, 2014.
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
Fonte: Os autores, 2014.
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
Fonte: Os autores, 2014.
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
Fonte: Os autores, 2014.
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
Fonte: Os autores, 2014.
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.
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
Fonte: Os autores, 2014.
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
Fonte: Os autores, 2014.
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
Fonte: Os autores, 2014.
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
VARCHAR 100 Não - - Não
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
VARCHAR 100 Não - - Não
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
Fonte: Os autores, 2014.
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
Nome Descrição Tipo Tamanho Nulo Regra Chave Unique
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
Fonte: Os autores, 2014.
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
Nome Descrição Tipo Tamanho Nulo Regra Chave Unique
codigo
Armazena o códigodo usuário,atribuído
automaticamente
INT - Não - PK Não
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
VARCHAR 10 Não - - Não
Fonte: Os autores, 2014.
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
Nome Descrição Tipo Tamanho Nulo Regra Chave Unique
codPost
Armazena o códigoda postagem,
geradaautomaticamente
pelo sistema
INT - Não - PK Não
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
Fonte: Os autores, 2014.
Em seguida, a 20 apresenta os dados armazenados na tabela olimpiada.
Ilustração 20: Dicionário de dados - Tabela Olimpiada
Nome Descrição Tipo Tamanho Nulo Regra Chave Unique
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
VARCHAR 30 Não - - Não
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
Fonte: Os autores, 2014.
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) );
Fonte: Os autores, 2014.
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
Fonte: Os autores, 2014.
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
Fonte: Os autores, 2014.
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
Fonte: Os autores, 2014.
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
Fonte: Os autores, 2014.
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
Fonte: Os autores, 2014.
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
Fonte: Os autores, 2014.
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
Fonte: Os autores, 2014.
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
Fonte: Os autores, 2014.
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?
Fonte: Os autores, 2014.
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?
Fonte: Os autores, 2014.
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
Fonte: Os autores, 2014.
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
Fonte: Os autores, 2014.
Ilustração 33: Aba de login
Fonte: Os autores, 2014.
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
Fonte: Os autores, 2014.
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
Fonte: Os autores, 2014.
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
Fonte: Os autores, 2014.
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
Fonte: Os autores, 2014.
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
Fonte: Os autores, 2014.
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
Fonte: Os autores, 2014.
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
Fonte: Os autores, 2014.
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
Fonte: Os autores, 2014.
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
Fonte: Os autores, 2014.
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
Fonte: Os autores, 2014.
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)
Fonte: Os autores, 2014.
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
Fonte: Os autores, 2014.
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.