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

2

Junho de 2013

INSTITUTO FEDERAL DE MATO GROSSO – IFMT

UNIVERSIDADE ABERTA DO BRASIL

DESENVOLVIMENTO DE SISTEMAS PARA INTERNET

CLAUDEIR MONTES DE NOVAIS

WEB SITE

MTCONCURSO

3

Primavera do Leste - MT

Junho de 2013

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: 38Instituto Federal de Educação, Ciência e Tecnologia de Mato GrossoUniversidade Aberta do Brasil - UABTrabalho de Conclusão Curso de Tecnologia em Desenvolvimento de Sistemas para Internet

4

CLAUDEIR MONTES DE NOVAIS

WEBSITE - MTCONCURSO

Trabalho de Conclusão de Curso

apresentado à Universidade Aberta do

Brasil no Curso de Tecnologia em

Desenvolvimento de Sistemas para

Internet, do Instituto Federal 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

5

Primavera do Leste - MT

Junho de 2013

CLAUDEIR MONTES DE NOVAIS

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)

6

Primavera do Leste - MT

Junho de 2013

DEDICATÓRIA

7

Dedico a minha família: minha

esposa Daniela, meus filhos Caio Felipe,

Isabella e Ana Caroline de Paula Novais.

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

9

“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

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 LISTA DE FIGURASFigura 1 – Código HTML............................................................................................28Figura 2 –

Cabeçalho HTM........................................................................................29Figura 3 – Utilização do código CSS..........................................................................29Figura 4 – Resultado da utilização do código CSS....................................................30Figura 5 – Página inicial.............................................................................................31Figura 6 -

Página concursos em andamento..............................................................33Figura 7 – Edital.........................................................................................................34Figura 8 –

Fale conosco.............................................................................................35SUMÁRIO

1 INTRODUÇÃO...............................................................................................141.1

OBJETIVOS...............................................................................................141.1.1

OBJETIVO GERAL.....................................................................................141.1.2

OBJETIVOS ESPECÍFICOS.........................................................................151.2

JUSTIFICATIVA...............................................................................................152

REFERENCIAL TEÓRICO............................................................................162.1

INFORMAÇÃO..............................................................................................162.2

CONCURSOS PÚBLICOS............................................................................172.3

PROJETO DE INTERFACE.......................................................................192.3.1

PRINCÍPIOS DE DESIGN DE INTERFACE DE USUÁRIO........................202.3.2

INTERAÇÃO DO USUÁRIO E ESTILOS DE INTERAÇÃO........................212.3.3

APRESENTAÇÃO DE INFORMAÇÕES.....................................................212.3.4

SUPORTE AO USUÁRIO...........................................................................222.3.5

NAVEGAÇÃO E ARQUITETURA DE INFORMAÇÃO................................222.3.6

CUIDADOS COM AS CORES....................................................................232.3.7

AVALIAÇÃO DA INTERFACE.......................................................................242.4

ARQUITETURA DO SOFTWARE.................................................................242.5

LINGUAGEM DE PROGRAMAÇÃO JAVA.................................................252.5.1

JAVASERVER PAGES - JSP.....................................................................262.5.2

SERVLETS.................................................................................................262.5.3

JQUERY.....................................................................................................272.5.4

11

VERSÕES JQUERY.........................................................................................273

METODOLOGIA............................................................................................283.1

RESULTADO...................................................................314 CONSIDERAÇÕES

FINAIS....................................................................................36REFERÊNCIAS

BIBLIOGRÁFICAS.....................................................................................................38

12

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.

13

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, faz-

se necessário a criação de uma fonte de pesquisas específica da região, simples e

14

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 tornar-

se 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

15

geral não ficam mais perdendo muito tempo buscando as informações, elas acabam

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.

16

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.

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.

17

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

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”.

18

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.

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.

19

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

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.

20

“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).

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

21

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:

“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.

22

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.

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

23

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

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.

24

(2011, 04). Tecnologia. GWSistemas. Retirado 05, 2013, de

http://www.gwsistemas.com.br/tecnologias-java.php

2.5.1 JavaServer Pages - JSP

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.

25

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.

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.4 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/

26

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

27

Figura 2 – Cabeçalho HTML

Fonte: Arquivo pessoal

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>

Fonte: Arquivo pessoal

28

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

Fonte: Arquivo pessoal

29

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

30

Fonte: Arquivo pessoal

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.

31

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

32

Fonte: Arquivo pessoal

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

33

Fonte: Arquivo pessoal

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

34

Fonte: Arquivo pessoal

35

4 CONSIDERAÇÕES FINAIS

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

36

responsável por eles, por isso, é muito gratificante criar um site que ajude as

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.

37

REFERÊNCIAS BIBLIOGRÁFICAS

JAVA PARA DESENVOLVIMENTO WEB. Disponível em: <http://www.caelum.com.br/apostila-java-web/servlets/#5-17-discussao-criando-paginas-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-de-software/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.

38

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.