TCC Tecnologia em Sistemas para Internet

1

SERVIÇO PÚBLICO FEDERAL
MEC – SETEC
INSTITUTO FEDERAL DE MATO GROSSO
UNIVERSIDADE ABERTA DO BRASIL

CLAUDEIR MONTES DE NOVAIS

WEB SITE
MTCONCURSO

Primavera do Leste - MT
Junho de 2013

2

INSTITUTO FEDERAL DE MATO GROSSO – IFMT
UNIVERSIDADE ABERTA DO BRASIL
DESENVOLVIMENTO DE SISTEMAS PARA INTERNET


WEB SITE
MTCONCURSO

Junho de 2013

3

Ficha Catalográfica
Novais, Claudeir Montes de
Trabalho de Conclusão de Curso apresentado ao Instituto Federal de Mato
Grosso como parte dos requisitos para obtenção do Título de Tecnólogo em
Sistema para Internet sob a orientação da professora Estelamaris Pellissari.
Primavera do Leste-MT, 2013.
Total de folhas do TCC: 38
Instituto Federal de Educação, Ciência e Tecnologia de Mato Grosso
Universidade Aberta do Brasil - UAB
Trabalho de Conclusão Curso de Tecnologia em Desenvolvimento de
Sistemas para Internet

4


WEBSITE - MTCONCURSO

Trabalho de Conclusão de Curso
apresentado à Universidade Aberta do
Brasil

no

Curso

Desenvolvimento
Internet,

do

de
de

Instituto

Tecnologia
Sistemas
Federal

em
para
de

Educação, Ciência e Tecnologia de Mato
Grosso, como exigência para a obtenção
do título de Tecnólogo.

Orientadora MSc: Estelamaris Pellissari

Junho de 2013

5


WEBSITE - MTCONCURSO

Trabalho de Conclusão de Curso em Tecnologia em Desenvolvimento de Sistemas
para Internet, submetido à Banca Examinadora composta pelos Professores da
Universidade Aberta do Brasil no Instituto Federal de Educação, Ciência e
Tecnologia de Mato Grosso, como parte dos requisitos necessários à obtenção do
título de Tecnólogo.

Aprovado em: ____________________

_________________________________________________
Prof. MSc. Estelamaris Pellissari (Orientadora)

_________________________________________________
Prof. (Esp., MSc, Dr.)____________________ (Avaliador Técnico)

__________________________________________________
Prof. (Esp., MSc, Dr.)____________________ (Avaliador Metodológico)

Junho de 2013

6

DEDICATÓRIA
Dedico a minha família: minha
esposa Daniela, meus filhos Caio Felipe,
Isabella e Ana Caroline de Paula Novais.

7

AGRADECIMENTOS

Agradeço a minha mãe, por ter me dado a oportunidade de estudar e me
guiar durante minha infância. A minha família, por me apoiarem nos momentos
difíceis e não me deixarem desistir, pela paciência em sustentar todas as minhas
angústias e passar segurança em todos os momentos para que eu pudesse seguir
firme nesta caminhada.
Agradeço a minha irmã Maria Cristina e meu cunhado José Fausto, pelo total
apoio apresentado e pelas palavras sábias nos momentos de dificuldades, que não
me deixaram desanimar ou desistir de alcançar os meus objetivos.
Aos meus colegas de curso pela convivência e paciência. Agradeço ao IFMT
e UAB, em especial os professores e tutores presenciais e a distância que
contribuíram para a minha formação.
Como não poderia faltar, agradeço imensamente a Deus por me guiar e
iluminar os meus caminhos em todos os dias da minha vida e por me abençoar
colocando pessoas tão maravilhosas em minha vida.

8

“Se temos de esperar, que seja para colher a semente boa que
lançamos hoje no solo da vida. Se for para semear, então que seja para
produzir milhões de sorrisos, de solidariedade e amizade.”
Cora Coralina

9

RESUMO

WEBSITE- MTCONCURSOS é um projeto de interface gráfica no ambiente de
aplicações que busca a escolha da arquitetura de software mais adequado para
apoiar o desenvolvimento de sites. Através de pesquisas teórico-práticas, o projeto
possibilita um suporte de navegação mais adequado e eficiente ao usuário e atende
as expectativas dos que buscam encontrar informações importantes relacionadas
aos concursos públicos disponíveis especificamente no Estado do Mato Grosso.

Palavras-chaves: WEBSITE, interface, arquitetura de software.

10

ABSTRACT

.
WEBSITE-MTCONCURSOS project is a GUI-application environment that seeks
to choose the most suitable software architecture to support the development of
websites. Through theoretical research and practical design allows for navigation
support more efficient and appropriate to the user and meets the expectations of
those who seek to find important information related to tenders available
specifically in the state of Mato Grosso.

Keywords: WEBSITE, interface, software architecture

11

LISTA DE FIGURAS

Figura 1 – Código HTML............................................................................................28
Figura 2 – Cabeçalho HTM........................................................................................29
Figura 3 – Utilização do código CSS..........................................................................29
Figura 4 – Resultado da utilização do código CSS....................................................30
Figura 5 – Página inicial.............................................................................................31
Figura 6 - Página concursos em andamento..............................................................33
Figura 7 – Edital.........................................................................................................34
Figura 8 – Fale conosco.............................................................................................35

12

SUMÁRIO

1 INTRODUÇÃO.........................................................................................................13
2 REFERENCIAL TEÓRICO.......................................................................................15
(2010, 01). INTRODUÇÃO A JQUERY – O QUE É JQUERY?.OGENIAL.
RETIRADO 05, 2013, DE HTTP://WWW.OGENIAL.COM.BR/BLOG/INTRODUCAOA-JQUERY/..................................................................................................................26
(2010, 01). INTRODUÇÃO A JQUERY – O QUE É JQUERY?.OGENIAL.
RETIRADO 05, 2013, DE HTTP://WWW.OGENIAL.COM.BR/BLOG/INTRODUCAOA-JQUERY/..................................................................................................................26
3 METODOLOGIA.......................................................................................................27
4 CONSIDERAÇÕES FINAIS.....................................................................................35
REFERÊNCIAS BIBLIOGRÁFICAS...........................................................................37

13

1 INTRODUÇÃO
Informação é o poder que gera transformação, no mundo em geral e
principalmente em nossas vidas. Na vida profissional não poderia ser diferente. O
sucesso ou o fracasso pode ser determinado com as informações que adquirimos. O
fator informação se torna muito imprescindível a partir do momento da vida em que
as pessoas optam por concorrer uma vaga em um concurso público. E hoje a maior
e melhor fonte de informações é acessada através da internet.
Ter a informação necessária é imprescindível para tomada de decisões, pois
assim se pode planejar, organizar, dirigir e controlar. Para termos acesso a
informação, hoje a internet disponibiliza uma gama de informações valiosas e na
Tecnologia da Informação, o mercado percebeu a importância de esmiuçar os dados
para atender as demandas. Assim foram se multiplicando as maneiras de
gerenciamentos para os vários tipos de negócios.
A relevância dos concursos públicos na atualidade fez nascer no mercado
uma modalidade de negócio crescente. São inúmeras as vertentes que encontramos
com informações sobre concursos públicos, materiais de estudos, materiais dos
concursos anteriores, estatísticas. Sendo assim, e, considerando como uma
relevante ferramenta estratégica para garantir aprovação e somente assim conseguir
a tão sonhada estabilidade profissional, propõe-se como tema do Projeto de
Conclusão de Curso, o desenvolvimento de um Website de Concursos direcionado
às pessoas de todo o Brasil que estejam interessadas em prestar concursos no
estado do Mato Grosso.

1.1 OBJETIVOS
1.1.1 Objetivo Geral
Apresentar informações sobre os projetos de interface gráfica no ambiente
de aplicações, assim como a aplicação das arquiteturas de software mais adequado
para apoiar o desenvolvimento do site de concursos públicos MTConcurso.

14

1.1.2 Objetivos Específicos
O presente projeto tem como objetivos específicos:
•

Averigou-se qual o projeto de interface adequado para aplicação no
web-site;

•

Pesquisou-se sobre interação de usuário e estilos de interação;

•

Buscou-se informações necessárias para possibilitar ao usuário do
web-site um serviço de suporte na navegação

•

Investigou-se os procedimentos técnicos necessários à elaboração de
uma arquitetura de software eficiente;

•

Estabeleceu-se por meio de um estudo minucioso, um referencial
teórico-prático sobre os Projetos de Interfaces e Arquitetura de
Software;

•

Utilizou-se a IDE Netbeans juntamente com a linguagem de
programação Java, a linguagem de marcação de hipertexto HTML e a
linguagem de estilo CSS para o desenvolvimento, marcação e
estruturação do protótipo do Web site MT Concurso;

•

Desenvolveu-se, um protótipo do Web site MTConcurso.

1.2 JUSTIFICATIVA
A Internet tem sido frequentemente utilizada como fonte de pesquisa e
informação quando se busca dados para concursos. Ela se transformou em uma
rede pública de dados de amplo alcance, o que tem a tornado o meio de
comunicação muito buscado por grande parte da sociedade, para vários segmentos.
Ter uma carreira estável é o grande sonho das pessoas que estudam e se
preparam, muitas vezes, por anos seguidos, a fim de alcançar o tão sonhado posto
de trabalho, sucesso e a estabilidade profissional. Em paralelo ao grande
crescimento de pessoas com esse sonho, está o comércio de concursos públicos.
Devido a grande demanda de buscas por informação sobre concursos na web, fazse necessário a criação de uma fonte de pesquisas específica da região, simples e

15

rápida para atender os interessados em prestar concursos ofertados no estado do
Mato Grosso.
A simplicidade se deve ao fato de ser uma página de design limpo e claro, e
também, devido a maneira como as informações estarão dispostas nas páginas. A
rapidez se dá por conta do site ser voltado unicamente ao estado de Mato Grosso,
apesar de conter informações dos concursos federais com vagas destinadas ao
nosso Estado.

2 REFERENCIAL TEÓRICO
2.1 INFORMAÇÃO
A informação sempre foi peça importante para a gestão das organizações.
Nos últimos anos, essa importância cresceu tão vertiginosamente a ponto de tornarse algo indispensável. Informação, hoje, é palavra chave nas organizações e ela
deve ser rápida, precisa, formatada e disponível a todos os envolvidos. (MELO,
2008).
Afirmar que a informação é o poder que gera transformação, no mundo em
geral, pode parecer demagogia, mas muitas pessoas deixam de crescer
profissionalmente e perde oportunidades no mundo do trabalho, dos negócios, por
não se manter bem informado e atualizado. No mundo competitivo do trabalho, por
exemplo, não conseguir se manter atualizado é sinônimo de falta de preparo, falta
de profissionalização, desatualizado, inexperiência e até incapacitado para
determinadas

atividades,

principalmente

para

as

que

exigem

constantes

atualizações.
Existem pessoas que por falta de informação acabam por perder
oportunidades na vida. Em tempos em que a tecnologia da informação impera sobre
a maioria das atividades no mundo, se manter informado e atualizado diariamente é
imprescindível para não se tornar alheio a tudo e a todos.
Para se ter acesso às várias informações na atualidade é necessário que elas
estejam visivelmente disponíveis e que sejam de fácil acesso. As pessoas de forma
geral não ficam mais perdendo muito tempo buscando as informações, elas acabam

16

por meio das mídias tecnológicas quase que buscando, ou atraindo as pessoas das
quais a interessam, por isso as pessoas acabaram por se interessar pelas questões
mais práticas e que facilitam as suas vidas.
Buscar informações precisas e concretas em sites simples, e que não fazem
com que o usuário perca tempo, é o que se tem buscado. O navegador sabe que
precisa se manter bem informado e também que os melhores sites são os que foram
projetados para o seu bem estar e não para prendê-lo em frente à tela do
computador, por isso ele busca informações precisas, de fácil acesso, completas e
que facilitem o seu dia a dia.

2.2 CONCURSOS PÚBLICOS
De acordo com CONCURSOS NO BRASIL (2012), hoje em nosso Estado
estão em andamento cerca de onze concursos públicos, totalizando 2.495 vagas,
das quais 195 vagas somente para o estado de Mato Grosso e 2.300 abrangendo
todo país. As 195 vagas se dividem em 03 vagas para o ensino fundamental
incompleto, 40 para o ensino fundamental completo, 35 vagas para o ensino médio e
17 vagas para nível superior. Já as 2.300 vagas estão divididas em 1.350 para o
ensino médio e 950 para nível superior.
Já BANCO DE CONCURSOS (2012), afirma que o cenário de intensa
competição nos concursos públicos favoreceu o mercado de cursos preparatórios,
editoras e bancas organizadoras. A seguir é citado algumas estatísticas sobre
empresas voltadas para esse ramo e o perfil do candidato disposto a entrar na
carreira pública:
Inscritos: Em média de cinco milhões de pessoas em todo Brasil.
Viagens: Existem empresas especializadas somente em organizar viagens
para levar candidatos para as provas em cidades distantes.
Mercado: extremamente promissor, movimenta R$ 1 bilhão por ano, entre
taxas de inscrições (que ficam entre R$ 20 a R$ 150) e bancas examinadoras.
Preparação: Os cursos preparatórios e as editoras que publicam apostila
faturam cerca de R$ 150 milhões por ano. Cerca de mil cursos preparatórios estão
distribuídos pelo país.

17

Perfil do candidato: Grande parte dos candidatos que concorrem a uma
vaga em emprego público é composta por trabalhadores entre 20 e 35 anos.
Expectativas: Jovens a partir dos 18 anos procuram a chance de conseguir
emprego visando estabilidade profissional. Profissionais de 35 a 40 anos já buscam
uma recolocação no mercado de trabalho.
Governo Federal: Entre 2003 e 2004, só o governo federal autorizou a
criação de 40 mil postos.
Gastos: De acordo com especialistas, um candidato chega a gastar em
média R$ 15 mil em preparação para um concurso, durante três anos.
Mestre Dos Concursos: O juiz federal Willian Douglas, que conquistou os
primeiros lugares em diversos concursos, escreveu o best-seller “Como Passar em
Concursos Públicos”, que já vendeu mais de 200 mil exemplares.
Editora Impetus: Um dos destaques do segmento, a Editora Impetus, criada
em 1998, faturou, só em 2003, 148% a mais em relação ao ano anterior.
Magistratura: Em São Paulo, a carreira pública jurídica é a que atrai mais
candidatos. Há pouca preparação para concursos nas áreas técnica e fiscal.
ANPAC: De acordo com uma pesquisa da Associação Nacional de Proteção
e Apoio aos Concursos (Anpac), só em 2008 o número de inscritos aumentou em
160%.
Taxas De Inscrição: Ainda segundo a Anpac, em 2007, mais de cinco
milhões de pessoas tentaram vaga no serviço público brasileiro e movimentaram
cerca de R$ 500 milhões, somente com taxas de inscrição. Outros R$ 150 milhões
foram arrecadados pelos cursos preparatórios e pelas editoras.
Segundo Kotler e Keller (2006, p. 51) “Uma coisa é perceber oportunidades
atraentes, outra é ter capacidade de tirar o melhor proveito delas.” Assim, as
pessoas devem aproveitar não só as oportunidades para as quais dispõem de
recursos, eles existem, e trazem uma enorme gama de possibilidades, quem melhor
utiliza-las sairá à frente do outro em mundo competitivo.

2.3 PROJETO DE INTERFACE
Para projetar a interface de um software é necessário que os programadores
estejam voltados aos interesses do usuário. Projetar uma página em que o usuário

18

interaja com todas as informações presentes na tela de forma fácil e descomplicada
é a melhor forma de se projetar um site.
Muitas vezes os engenheiros de software estão mais preparados para o
projeto de hardware e não se atentam às necessidades dos usuários que acabam
por dificultar o acesso as informações projetando páginas muito bem elaboradas,
mas com informações imprecisas ou até irrelevante para o fim que se busca.
Assim salienta (SOMMERVILLE, p.278):
O bom projeto de interface com o usuário é fundamental para o sucesso de
um sistema. Uma interface que é difícil de ser utilizada, na melhor das
hipóteses, resultará em um alto nível de erros do usuário. Pior ainda, os
usuários simplesmente se recusarão a utilizar o sistema de software,
independentemente de sua funcionalidade. Se as informações forem
apresentadas de maneira confusa ou enganosa, os usuários poderão se
confundir com o significado dessas informações. Eles podem iniciar uma
sequência de ações que venham a corromper os dados ou mesmo causar
falhas catastróficas no sistema.

Fica evidente também para o autor que um site mal projetado também pode
vir a gerar sérios problemas para o sistema. Portanto criar uma página que
contemple todos os objetivos do qual se destina ao usuário é também evitar falhas
na programação e no resultado final da funcionalidade da página. Para tanto é
necessário pensar além da programação do hardware também ou principalmente no
projeto de interface.
Para Pressmam (2011, p. 288), o usuário do site deve ser o foco da
programação. Para o autor um site deve, basicamente, ler a mente do usuário. Ainda
para o autor os programadores às vezes caem na tentação de limitar o site ou não
focar o usuário para facilitar a implementação da interface. Assim ele comenta:
“Como projetista, talvez sejamos tentados a introduzir restrições e limitações para
simplificar a implementação da interface. O resultado poderia ser uma interface fácil
de ser construída, mas frustrante sob o ponto de vista do usuário”.
Como o usuário deve ser o foco da programação, o engenheiro deve então
priorizar a vontade e os anseios de quem utiliza o site. É necessário ainda ressaltar
que todas as informações estejam na tela principal de forma a interagir com o
usuário de forma fácil, rápida e eficiente.

19

2.3.1 Princípios de design de interface de usuário
Os princípios de design de interface de usuário são os princípios que devem
configurar a interface do software. Alguns princípios norteiam a criação dessas
páginas.
Segundo Sommerville (2003, p. 280), os princípios de projeto de interface
com o usuário devem ser consistentes, buscar identificar as pessoas que a utilizarão
focando seus interesses, criar um sistema que não apresente ao usuário surpresas
ou ações e desvios inesperados, a página deve apresentar mecanismos para
solucionar com facilidade algum problema inesperado, orientações quando
necessário e promover a facilidade de interação com o usuário.
Ainda para o autor identificar e ou reconhecer a diversidade de usuários
possíveis que poderão acessar o site é fundamental para o sucesso da sua
elaboração por poder gerar um conflito no sistema projetado. Assim ele comenta:
O principio do reconhecimento da diversidade de usuários pode ser
conflitante com outros princípios do projeto de interface, porque alguns tipos
de usuários podem preferir uma interação muito rápida, por exemplo, dispor
da consistência da interface com o usuário. Da mesma maneira, o nível de
orientação requerida para o usuário pode ser diferente para diferente tipos
de usuários e pode ser impossível desenvolver compatibilidade que seja
adequada a todos eles. O projetista de interface deve, inevitavelmente, fazer
algumas conciliações, dependendo dos usuários reais do sistema.
(SOMMERVILLE, 2003, p. 281)

O projetista deve, portanto vislumbrar todas as possibilidades antes de
programar seu projeto. Por isso, fundamentar sua pesquisa e planejar com cuidado
todos os detalhes do projeto fará com que o produto final seja eficiente e atenda a
todas as expectativas de quem o criou, assim como, de quem o utiliza que deve ser
o foco principal de qualquer programa.
2.3.2 Interação do usuário e estilos de interação
Além do design da interface do usuário, não se pode falar em criação de
websites sem se preocupar com as formas e estilos de interação dos usuários.
Praticamente todo processo de acesso a uma website possui essa interação com

20

usuário. Na interação, o usuário emite a o comando e o website retorna os
resultados prováveis. Conforme classificação de Shneiderman (1998) existe cinco
estilos de interações principais:
•

manipulação direta: acontece quando o usuário interage diretamente
com objetos na tela;

•

seleção de menu: onde o usuário seleciona o comando a partir de uma
lista;

•

preenchimento de formulário: onde se preenche os campos de algum
formulário para posterior envio;

•

linguagem de comando: no qual o usuário emite comando através de
parâmetros associado a alguma instrução prevista no sistema;

•

linguagem natural: acontece quando o usuário emite um comando
linguagem natural.

Sommerville (2003, p. 282) “explica que as interfaces com o usuário na web
se baseiam na compatibilidade fornecida pela HTML e como estas interfaces são
frequentemente projetadas para usuário casuais, elas utilizam, na maioria das
vezes, interfaces baseadas em formulários”.
2.3.3 Apresentação de informações
A forma com que as informações são apresentas no site não é uma tarefa
muito fácil de decidir, para isso precisa-se de muita pesquisa e ou experiência. As
informações podem ser apresentadas em formas de textos, imagens, vídeo,
animação, dentre outras, mas o modo de como será apresentada é um muito
importante e deve ser avaliada atentamente.
“Encontrar a melhor apresentação das informações exige o conhecimento
da experiência dos usuários das informações e da maneira pela qual eles
utilizam o sistema. Ao decidir como apresentar as informações, o projetista
tem de levar em conta uma série de fatores”. (SOMMERVILLE, 2003, p.
284).

21

2.3.4 Suporte ao usuário
Os sistemas de ajuda ao usuário permitem que o software tenha mais
qualidade de informações. Esses suportes ao usuário sempre fornecem algum tipo
de ajuda on-line como algo a mais na programação.
Para Sommerville (2003, p. 288), muitos navegadores sem experiência
acabam por cometer erros logo que iniciam sua navegação, por isso é necessário
que

os

usuários

compreendam

as

informações

para

voltar

a

navegar

adequadamente.
As mensagens de suporte devem ser muito claras e objetivas e não induzam
o usuário a cometer mais erros e sim a consertar os problemas apresentados com
facilidade e rapidez.
Assim afirma SOMMERVILLE (2003, p. 289):
As mensagens de erro devem sempre ser educadas, concisas, consistentes
e construtivas. Elas não podem ser abusivas e não devem estar associadas
a ‘beeps’ ou outros ruídos que possam constranger o usuário. Sempre que
possível, a mensagem deve sugerir como o erro deve ser corrigido. A
mensagem de erro deve estar associada a um sistema de ajuda on-line
sensível ao contexto.

Todo suporte ao usuário tem a função de orientar e por isso não deve
dificultar as informações. Por isso todo o suporte já deve estar vinculado ao site
apresentando uma hierarquia de informações construtivas e progressivas, das quais,
permitam ao usuário facilidade na resolução do problema apresentado.
2.3.5 Navegação e arquitetura de informação
Antes de pensar em colocar um site online deve-se atentar as usabilidades
necessárias para projeta-lo. Por isso a arquitetura se torna um elemento essencial
para o sucesso de um bom site. Quando se cria um site deve-se pensar sempre no
usuário final, pois são eles que o farão um site de sucesso ou fracasso.
Neste sentido Nielsen e Jacob (2006 p.172) alerta que:

22

“Um website com design ruim não apenas diminuem a velocidade de
navegação – na verdade, eles podem desencorajar os usuários a utilizá-los.
Quando os usuários não conseguem encontrar o que precisam, com
frequência supõe que as informações não estão disponíveis lá. Frustrados,
talvez eles visitem outros sites”.

Então, para que se crie um website de sucessos deve-se adequar as
estruturas às expectativas e necessidades dos usuários. Um dos fatores importantes
é a alocação de links em locais estratégicos, disponibilização e opção de
acessibilidade e lembrando sempre de projetar utilizando feedback dos usuários,
afinal o site está sendo elaborado para ele. Nielsen e Jacob (2006 p. 172) afirma
que projetar a estrutura do seu site sem um feedback dos seus clientes é um grande
equivoco que pode lhe custar milhares ou milhões de dólares. Projete para a
conveniência deles, não para a sua.
2.3.6 Cuidados com as cores
As cores são elementos essenciais na interface, pois através delas pode-se
aperfeiçoar a aparência da website. Porém lidar com as cores é uma tarefa muito
complexa, pois quando se usa indevidamente pode ser tornar uma vilã para o
projetista.
Sommerville (2003, p. 288) salienta que:
“As percepções humanas de cores são diferentes e existem diferentes
convenções, em diferentes profissões, sobre o significado de diferente
cores[...] Ex: o vermelho para um motorista pode significar perigo, enquanto
para um químico pode significar quente. Se as cores forem utilizadas em
demasia ou forem muito intensas. A massa de cores pode perturbar o
usuário.

Para Pressmman (2005, p. 340), a estética da interface deve apresentar um
apelo visual. Muitos sites atraem o usuário inicialmente simplesmente pelo apelo
visual.
A beleza (apelo visual) é um conceito que varia segundo a ótica de quem a
vê, porém, muitas características de projeto (por exemplo, a percepção e
aspecto do conteúdo; layout da interface; coordenação das cores; o
equilíbrio entre texto, imagens e outras mídias; mecanismos de navegação)
contribuem efetivamente para apelo visual.

23

Ainda para o autor os espaços em branco da página também devem ser
considerados. Diversidade de cores e muitas informações podem confundir o
usuário e geram a impressão de que a página é confusa. Os espaços em branco
não precisam necessariamente ser todos preenchidos e as cores devem apresentar
tons compatíveis “O design gráfico considera todos os aspectos visuais de uma
Webapp. O processo de design gráfico começa com o layout (Seção 13.5.1) e
prossegue com a consideração de combinações de cores gerais,...” (PRESSMMAN,
2005).
2.3.7 Avaliação da interface
Como já foi mencionado anteriormente o usuário da interface deve ser o foco
principal na execução da programação, portanto é de suma importância a avaliação
da interface, visto que é nesse processo que se analisa a criação e a relaciona ao
usuário, verificando se atende todos seus requisitos.
Normalmente alguns testes ou pesquisas são necessárias para avaliar a
aceitação do site, ou se ele atende as especificidades dos objetivos do projeto. Nem
sempre o programador consegue vislumbrar todos os detalhes necessários para a
elaboração daquele programa. Por isso é necessário que outras pessoas com foco
apenas na utilização do site consigam detectar imperfeições e problemas antes
mesmo do site ser finalizado e a tempo de ser corrigido e aperfeiçoado.

2.4 ARQUITETURA DO SOFTWARE
Pensar na arquitetura de um software pode ser considerada a fase mais
gostosa da programação. Esse é o momento de pensar na disposição das
informações, o que seria necessário conter na página para atender todos os
objetivos do site. Normalmente nessa fase se projeta primeiramente a disposição
das informações e a arte gráfica, como cores e desenhos, informações verbais e
visuais que compõem todo o projeto já o imaginando como produto final, mas para
que se chegue ao resultado esperado é necessário pensar com bastante

24

propriedade em que arquitetura eletrônica deve ser explorada para construir todo o
sistema do site.
Em outras palavras, projetar a estrutura global de um sistema emerge como
um problema novo: o desenvolvimento de software orientado para arquitetura
(MENDES, 2002).
Para desenvolver o software do projeto foi necessário muita preparação e
pesquisa. Embora houvesse a vontade de criar um programa muito eficiente e
completo, percebeu-se que nem sempre a complexidade de um software significa
qualidade de informações e facilidade ao acesso do site, pois, quanto mais
informações, mais dificuldades em projetar podem estar inseridas e com isso induzir
ao erro de programação que poderia gerar como produto final um programa não
muito bonito visualmente e com informações, muitas vezes, irrelevantes para o
objetivo da programação. Por isso optou-se em criar um produto que alcançasse os
objetivos do projeto sem causar nenhuma dificuldade para o fim ao qual o programa
se destina.
Também com a finalidade de evitar dificuldades ao acesso da página e até
para evitar uma grande quantidade de lixo visual na disposição das informações do
site optou-se por uma página mais clara e limpa.

2.5 LINGUAGEM DE PROGRAMAÇÃO JAVA
Java é uma linguagem de programação orientada a objeto desenvolvida na
década de 90 por uma equipe de programadores chefiada por James Gosling, na
empresa Sun Microsystems. Diferentemente das linguagens convencionais, que são
compiladas para código nativo, a linguagem Java é compilada para um bytecode
que é executado por uma máquina virtual. A linguagem de programação Java é a
linguagem convencional da Plataforma Java, mas não sua única linguagem.
(2011,

04).

Tecnologia.

GWSistemas.

http://www.gwsistemas.com.br/tecnologias-java.php
2.5.1 JavaServer Pages - JSP

Retirado

05,

2013,

de

25

JavaServer Pages - JSP é uma tecnologia baseada em Java que simplifica o
processo de desenvolvimento de sites da web dinâmicos.Com JSP, os designers da
web e programadores podem rapidamente incorporar elementos dinâmicos em
páginas da web, utilizando Java embutido e algumas tags de marcação simples.
Estas tag(s) fornecem ao designer de HTML um meio de acessar dados e lógica de
negócio armazenados em objetos Java sem ter que dominar as complexidades do
desenvolvimento de aplicações. (PITTELLA, 2013).
2.5.2 Servlets
As Servlets são a primeira forma de criar páginas dinâmicas com Java. Para
isso é usado a própria linguagem Java para isso, criando uma classe que terá
capacidade de gerar conteúdo HTML. O nome "servlet" vem da ideia de um pequeno
servidor (servidorzinho, em inglês) cujo objetivo é receber chamadas HTTP,
processá-las e devolver uma resposta ao cliente.
Uma primeira ideia da servlet seria que cada uma delas é responsável por
uma página, sendo que ela lê dados da requisição do cliente e responde com outros
dados (uma página HTML, uma imagem GIF etc). Como no Java tenta-se sempre
que possível trabalhar orientado a objetos, nada mais natural que uma servlet seja
representada como um objeto a partir de uma classe Java.
Cada servlet é, portanto, um objeto Java que recebe tais requisições
(request) e produz algo (response), como uma página HTML dinamicamente gerada.
Gonçalves (2007) explica que servlets são classes Java desenvolvidas de
acordo com uma estrutura bem definida e cujo objetivo é receber requisições HTTP,
para depois processá-las e enviar uma resposta ao cliente.
2.5.3 jQuery
jQuery é um framework JavaScript, com o conceito “Escreva mais e faça
menos” ele facilita a vida do programador e designers nas tarefas simples do
desenvolvimento de um frontend de um site, reduzindo o tempo de desenvolvimento
e facilitando a manutenção do site.

26

O jQuery foi desenvolvido e pensado para que os designers consigam
desenvolver códigos com facilidade sem necessidade de entender programação e
apenas entendendo a syntax ele consegue fazer todo o front-end de um site
complexo. Esta facilidade se da pos jQuery foi implementado de forma perfeita para
os designers permitindo que ao desenvolver para a framework o designer utilize
todos os seletores do CSS evitando assim que este tenha de entender todo o
complexo processo de navegação DOM do Javascript, com isso iniciou-se uma
nova forma de programar, permitindo que todo código seja orientado a camadas
CSS e não a complexa hierarquia HTML.
(2010, 01). Introdução a jquery – o que é jquery?.ogenial. Retirado 05, 2013, de
HTTP://WWW.OGENIAL.COM.BR/BLOG/INTRODUCAO-A-JQUERY/
2.5.1 Versões JQuery
Versão Minificada esta é uma versão compacta do jQuery permite utilizar
todas as funcionalidades com menos de 70KB de tamanho, porém, na versão
compacta do jQuery é impossível se efetuar manutenção e entender o código do
mesmo, sendo recomendada apenas para ambiente de produção.
Versão descompactada é a versão original do jQuery, ótima para ambiente
de desenvolvimento e aprendizado pois permite a leitura fluente de seu código,
porém é inviável para ambiente de produção devido aos seus 160KB de tamanho.
(2010, 01). Introdução a jquery – o que é jquery?.ogenial. Retirado 05, 2013, de
HTTP://WWW.OGENIAL.COM.BR/BLOG/INTRODUCAO-A-JQUERY/

27

3 METODOLOGIA
Nesta etapa entraram em cena as tecnologias a serem utilizadas, tais como
ferramenta para o desenvolvimento, linguagem de modelagem, Arquitetura de
Software dentre outros.
Para implementação do site, utilizou-se a Linguagem de programação JAVA
através da ferramenta de desenvolvimento NetBeans. O NetBeans é um ambiente
de desenvolvimento integrado (IDE) Java desenvolvido pela empresa Sun
Microsystems.
Em

NetBeans

(2012),

define-se

a

IDE

como

um

ambiente

de

desenvolvimento integrado gratuito e de código-fonte aberto para desenvolvedores
de software. O NetBeans IDE oferece todo o suporte para criação de interfaces
gráficas de maneira visual, bem como o desenvolvimento de aplicações para a
internet, celulares e colaborações entre usuários.
No que se refere à criação de aplicações para internet, o NetBeans conta
com o desenvolvimento de aplicações corporativas oferecendo suporte total ao Java
EE, facilitando o desenvolvimento de páginas web, Servelets e Web Services, dando
a possibilidade do uso da linguagem de marcação HTML e a linguagem de estilo
CSS.
A linguagem de marcação de hipertexto – HTML é utilizada para escrever
páginas web, através das marcações apresentadas em cada tag que após
compilada é chamada pelo navegador e apresentada ao usuário final.
A Figura 1 apresenta um exemplo simples da utilização desta linguagem, o
código descrito na Figura 1 apresenta a seguir o resultado obtido na Figura 2.
Figura 2 – Código HTML
<html>
<head>
<h1>MT CONCURSOS</h1>
</head>
</html>
Fonte: Arquivo pessoal

28

Figura 2 – Cabeçalho HTML


Enquanto o HTML é usado para estruturar conteúdos, o CSS é usado para
formatar conteúdos estruturados, possibilitando o controle de layout de vários
documentos a partir de uma simples folha de estilo, oferecendo maior precisão nos
layout, apresentando avançadas técnicas de desenvolvimento.
A figura 3 apresenta a utilização desta tecnologia a partir da 3ª linha no
momento da inserção da tag <p style> e finaliza a estruturação com a tag </p>,
fazendo com que o conteúdo inserido dentro deste intervalo utilize a as configuração
estabelecidas. Sendo assim, após a compilação, será mostrado no browser o
resultado mostrado na figura 4.

Figura 3 – Utilização do código CSS

<html>
<head>
<p style="text-indent: 10cm; color: rgb(0,0,255); font-family: Verdana,
Arial;"><b>
MT CONCURSOS
</b></p>
</head>
</html>

29

Figura 4 – Resultado da utilização do código CSS


30

3.1

RESULTADO
A utilização da IDE NetBeans, proporcionou um excelente resultado para o

web site MT Concursos, através de seu dinamismo, usabilidade e versatilidade da
linguagem de programação Java.
A Figura 5 apresenta a pagina inicial do web site, com a exposição dos itens
de forma clara e concisa.
Figura 5 – Página inicial

31


A disposição das informações da página inicial foi distribuída de forma clara
e acessível.
No canto superior esquerdo há um Menu com opções da abertura de janelas
para a pesquisa a qual se pretende. Entre as opções pode se destacar os concursos
que estão em andamento, os concursos encerrados, as provas anteriores para servir
de parâmetro para que os candidatos possam se preparar para as novas provas, as
notícias, um direcionamento para o atendimento on-line a fim de sanar dúvidas e
possíveis questionamentos e um para ajuda.

32

Em

seguida

encontram-se

as

opções

de

direcionamento

para

compartilhamento da página para as principais redes sociais como: Facebook,
Twitter e Google+1.
No canto superior direito há disponível a opção do acesso através do
mecanismo de acessibilidade para os portadores de deficiência visual parcial, do
qual permite ao navegador o contato com textos com a fonte maior ou menor que a
original conforme estabelece os padrões de boas práticas de desenvolvimento Web
(Web Standards, W3C).
Facilitando a leitura
A+ (Aumentar fonte): Aumenta o tamanho dos textos do web site.
A- (Diminuir fonte): Diminui o tamanho dos textos do web site.
Ainda na página inicial é possível visualizar alguns dos principais concursos
em andamento, que atraem muitos interessados e é objeto de pesquisa de grande
parte dos concorrentes.
Acessando o botão Concursos em andamento disposto no menu interativo
dispostos na página inicial o usuário será direcionado a página solicitada, conforme
mostra a figura 6.

Figura 6 - Página concursos em andamento

33


A página concursos em andamento pode ser acessada em qualquer página
em que o usuário esteja, pois foram distribuídos diversos links em todas as páginas
do web site. Uma vez acessada a página concursos em andamento é possível
visualizar e obter as informações mais importantes.
Ao selecionar o concurso desejado também há um direcionamento para
download e abertura completa do edital, do qual se permite ter acesso a todas as
informações possíveis sobre a prova, como data, horário, local e as regras para que
tudo transcorra de forma organizada, conforme mostra figura 7.

Figura 7 - Edital

34


A Figura 8 disposta a seguir, apresenta a interação do usuário com os
responsáveis pelo site, através da opção fale conosco, que pode ser acessada a
qualquer momento em qualquer página que o usuário se encontre.
Nessa página o interessado deve se nomear, colocar seu endereço digital
para contato, e-mail, o objetivo do contato e a mensagem.
Figura 8 – Fale conosco

35


4 CONSIDERAÇÕES FINAIS

36

Desenvolver um protótipo de Web site exigiu-me como programador ter, no
mínimo, um breve conhecimento de como projetar para interface. No entanto foi
necessário estar atento quanto as formas e estilos de interação adequados para
facilitar a navegação do usuário, utilizar procedimentos técnicos adequados para
que se pudesse desenvolver uma arquitetura apropriada, eficiente e que atendesse
os objetivos do site.
Pude ressaltar que o desenvolvimento de um programa está sempre
vinculado a escolha adequada da linguagem a ser utilizada para o desenvolvimento,
marcação e estruturação do protótipo do Web site MT Concurso. Usei IDE Netbeans
que é uma plataforma para utilizar a linguagem Java. Juntamente a IDE Netbeans a
linguagem de programação orientada ao objeto Java, a linguagem de marcação de
hipertexto HTML que é usada para estruturar conteúdos e a linguagem de estilo
CSS para formatar conteúdos estruturados.
Com da utilização dessas ferramentas foi possível desenvolver um protótipo
do Web site MTConcursos, o qual serve como referência para o curso de Sistemas e
para posterior fonte de pesquisa.
O protótipo foi elaborado de forma a atender os requisitos previstos como,
informar especificamente sobre os concursos disponíveis no estado do Mato Grosso,
apresentar um link direto de acesso ao edital completo do concurso e poder, assim,
atender as pessoas que tem como sonho se estabelecer no mercado de trabalho
através da aprovação em um concurso público.
Partindo do pressuposto de que a informação gera uma grande
transformação na vida profissional e que a maior fonte dessas informações
atualmente estão disponíveis na internet, o protótipo o do Web site MTConcurso foi
desenvolvido não somente como conclusão de curso, mas para que possa também
ser, mesmo que ainda aperfeiçoado, uma grande fonte de pesquisa e de apoio para
as pessoas que buscam se estabilizar no mundo do trabalho.
Os sonhos se realizam a medida que as conquistas pessoais se
concretizam. Fazer parte da realização profissional das pessoas é o mesmo que ser
responsável por eles, por isso, é muito gratificante criar um site que ajude as

37

pessoas na conquista dos seus objetivos e a Web site MTConcursos foi criada com
a finalidade de atender essa demanda de profissionais que sonham e buscam
concretizar os seus sonhos.

REFERÊNCIAS BIBLIOGRÁFICAS

38

JAVA
PARA
DESENVOLVIMENTO
WEB.
Disponível
em:
<http://www.caelum.com.br/apostila-java-web/servlets/#5-17-discussao-criandopaginas-dentro-de-uma-servlet>. Acesso em 05/06/2013 às 00:05h
BANCO DE CONCURSOS. Disponível em:
<http://www.bancodeconcursos.com/curiosidades/a-industria-dos-concursospublicos.
CASA DOS CONCURSOS. Disponível em: < http://cdcba.com.br/>. Acesso em 13
jul. 2012.
CONCURSOS NO BRASIL. Disponível em:
<http://concursosnobrasil.com.br/concursos/mt/ >. Acesso em 13 jul. 2012.
Estratégias das organizações contemporâneas: breve revisão de literatura.
Disponível em: < >. Acesso em 13 jul. 2012.
INFOESCOLA. Disponível em: < http://www.infoescola.com/engenharia-desoftware/uml/ >. Acesso em 17 jul. 2012.
Introdução
a
jQuery:
O
que
é
jQuery?
Disponível
em:
<http://www.ogenial.com.br/blog/introducao-a-jquery/, >. Acesso em 04/06/2013 às
14:23h.
MACORATTI, Carlos. Padrões de Projeto: O modelo MVC - Model View
Controller. Disponível em: <http://www.macoratti.net/vbn_mvc.htm>. Acesso em
03/04 2013.
MELO. Daniel Reis Armond de, A importância da tecnologia da informação nas
NIELSEN, Jakob; LORANGER. Usabilidade Na Web. Rio de Janeiro: Campus,
2006.
JSP. Disponível em: <http://javafree.uol.com.br/artigo/1409/O-que-e-JSP.html >.
Acesso em 25/05/2013.

39

PRESSMAM, Roger S. Engenharia de software: Uma abordagem profissional.
Porto Alegre: AMGH, 2011.
SHNEIDERMAN, B. Designing the user interface. Addison Weslwy. 1998.
SOMMERVILLE, Ian. Engenharia de software. São Paulo: Pearson Addisson
Wesley, 2003.

TCC Tecnologia em Sistemas para Internet

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Semelhante a TCC Tecnologia em Sistemas para Internet

Semelhante a TCC Tecnologia em Sistemas para Internet (20)

Último

Último (20)

TCC Tecnologia em Sistemas para Internet