Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

TCC Tecnologia em Sistemas para Internet

7,932 views

Published on

TCC WEB SITE MT CONCURSO

Published in: Education
  • Be the first to comment

TCC Tecnologia em Sistemas para Internet

  1. 1. 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. 2. 2 INSTITUTO FEDERAL DE MATO GROSSO – IFMT UNIVERSIDADE ABERTA DO BRASIL DESENVOLVIMENTO DE SISTEMAS PARA INTERNET CLAUDEIR MONTES DE NOVAIS WEB SITE MTCONCURSO Primavera do Leste - MT Junho de 2013
  3. 3. 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. 4. 4 CLAUDEIR MONTES DE NOVAIS 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 Primavera do Leste - MT Junho de 2013
  5. 5. 5 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) Primavera do Leste - MT Junho de 2013
  6. 6. 6 DEDICATÓRIA Dedico a minha família: minha esposa Daniela, meus filhos Caio Felipe, Isabella e Ana Caroline de Paula Novais.
  7. 7. 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. 8. 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. 9. 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. 10. 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. 11. 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. 12. 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. 13. 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. 14. 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. 15. 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. 16. 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. 17. 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. 18. 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. 19. 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. 20. 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. 21. 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. 22. 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. 23. 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. 24. 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. 25. 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. 26. 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. 27. 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. 28. 28 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
  29. 29. 29 Figura 4 – Resultado da utilização do código CSS Fonte: Arquivo pessoal
  30. 30. 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. 31. 31 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.
  32. 32. 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. 33. 33 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
  34. 34. 34 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
  35. 35. 35 Fonte: Arquivo pessoal 4 CONSIDERAÇÕES FINAIS
  36. 36. 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. 37. 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. 38. 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. 39. 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.

×