REVISTA CIENTIFICA COMPUTAÇÃO EM EVOLUÇÃO ISSN CUIABÁ

Transcrição

1 1 REVISTA CIENTIFICA COMPUTAÇÃO EM EVOLUÇÃO ISSN CUIABÁ 2014

2 2 FACULDADES INTEGRADAS MATO-GROSSENSES DE CIÊNCIAS SOCIAIS E HUMANAS DIREÇÃO ACADÊMICA COORDENAÇÃO DE INICIAÇÃO CIENTÍFICA REVISTA CIENTÍFICA COMPUTAÇÃO EM EVOLUÇÃO Ciência e Tecnologia em Mato Grosso Rua: Av. Europa, nº 63 Bairro: Jd. Tropical CEP: Cidade: Cuiabá-MT Fone: (65) Home page: CUIABÁ 2014

3 3 Apresentação, As iniciativas pela democratização do conhecimento é um benefício ímpar na tarefa de aperfeiçoamento e evolução da humanidade. Atualmente, a Ciência da Computação tem sido um suporte essencial ao desenvolvimento das profissões e do conhecimento em diversas áreas da Tecnologia da Informação. A Revista Científica Computação em Evolução, conta com publicação de artigos produzidos pelos alunos curso de Ciência da Computação do ICE, avaliados e selecionados pelo Comitê Cientifico formados por professores do próprio curso e professores convidados. Assim, a difusão do conhecimento fará com que o nosso corpo acadêmico marche rumo a excelência. É com este espírito que lançamos a Computação em Evolução, a Revista Científica da Computação do ICE. A Computação em Evolução será mais um veículo de disseminação do conhecimento em Ciência da Computação especialmente aquele produzido no seio de nossa Faculdade. Atenciosamente, Prof º Andersown Becher Paes de Barros Coordenador do Curso de Ciência da Computação - ICE

4 Realização 4

5 5 FICHA CATALOGRÁFICA ELABORADA PELA BIBLIOTECA DO ICE Informações para a Biblioteca Digital

6 6 Sumário Comissão Organizadora... 7 Comissão Ciêntifico... 8 Professores Orientadores... 9 Artigos Aceitos... 10

7 7 Comissão Organizadora Prof. Andersown BecHer Coordenador do Curso Faculdades ICE Prof. Leonardo Luiz Braun Professor do Curso Faculdades ICE Prof. MSc. Edie Correia Santana Professor do Curso Faculdades ICE Prof. MSc. Gustavo Zanatta Bruno Professor do Curso Faculdades ICE

8 8 Comissão Ciêntifico - Membros do ICE: Prof. Andersown Becker Prof. Leonardo Luiz Braun Prof. Edie Correia Santana Prof. MSc. Gustavo Zanatta Bruno - Membros convidados: Prof. Mestre Luciano Barco UNEMAT. Prof. Mestre Thiago Toledo UFSCAR.

9 9 Professores Orientadores Prof. Andersown Becher Prof. Leonardo Luiz Braun Prof. Edie Correia Santana Prof. Gustavo Zanatta Bruno Prof. Max José Botelho Ferreira da Silva

10 10 Artigos Aceitos SISTEMA DE INFORMAÇÃO GEOGRÁFICA EM ANDROID PARA CÁLCULO DE ÁREA TERRITORIAL DAMIANI, Fagner Leandro Pereira 1 BRAUN, Leonardo Luiz 2 BOTELHO, Max 3 SANTANA, Edie Correia 4 RESUMO O aumento de aplicativos que trazem informações geográficas tem aumentado no mercado recentemente. O objetivo deste artigo é apresentar um aplicativo na plataforma Android capaz de realizar o cálculo de área em um dispositivo móvel através de um mapa digital. Palavras chaves: Geoprocessamento, Android, Desenvolvimento ABSTRACT The increase in applications that bring geographic information has increased in the market recently. The objective of this paper is to present an application capable of performing in the calculation of area on a mobile device through a digital map Android platform. Key words: GIS, Android, Development 1 Acadêmico do curso de Ciência da Computação do Instituto Cuiabano de Educação 2 Professor do curso de Ciência da Computação do Instituto Cuiabano de Educação 3 Professor do curso de Ciência da Computação do Instituto Cuiabano de Educação 4 Professor do curso de Ciência da Computação do Instituto Cuiabano de Educação

11 11 1. INTRODUÇÃO A necessidade do Homem em registrar lugares e objetos durante suas jornadas vem antes da escrita. Os primeiros mapas apareceram em figuras rupestres nas cavernas, desenhados pelos povos primitivos com o intuito de registrar os lugares por onde passavam, delimitar seus territórios e registrar fenômenos naturais. Com o passar dos anos foram surgindo estudiosos que se interessaram por estas figuras e as aprimoraram, passando a utilizar o papel para armazenar as informações, com intuito de utilizar esse documento em guias de exploração, demarcações territoriais e localizações. As evoluções tecnológicas na segunda metade do século XX possibilitaram a capacidade de armazenar e exibir informações sobre a distribuição geográfica de fenômenos e objetos em ambiente computacional, levando ao surgimento do Geoprocessamento. 2. Android No dia 5 de novembro de 2007, nas cidades Mountain View (Estados Unidos da América), Bona (Alemanha), Taoyuan (China), San Diego (Estados Unidos da América) e em Schaumburg (Estados Unidos da América) foi anunciada a primeira plataforma de código realmente aberto e abrangente para dispositivos móveis, chamada Android. O Android foi desenvolvido por um grupo composto de empresas multinacionais de tecnologia e por grandes indústrias de aparelhos móveis, o grupo recebeu o nome de Open Handset Alliance (OHA). Os principais objetivos do Android são permitir ao desenvolvedor uma flexibilidade para desenvolver seus projetos e integrar aplicações nativas da plataforma a sua aplicação e outros objetivos importantes ao usuário são permitir interatividade agradável do sistema operacional através de toque na tela, fácil usabilidade e fornecer aplicações interativas pré-instaladas. (OPENHANDSETALLIANCE, 2007, s/p). Para desenvolver um aplicativo para Android é indicado pelo site oficial do Google (Google Developer) um pacote de ferramentas de desenvolvimento de aplicativos para Android chamado ADT Bundle criado pelo próprio Google, o pacote contem a Integrated Development Environment (IDE) Eclipse com o plugin Android

12 12 Development Tools (ADT) configurado, Android Software Development Kit (SDK) Tools, Platform-tools, ultima versão da plataforma Android e a ultima versão do emulador do sistema operacional Android. (Android Developers, 2014, s/p). 2.1 Google Maps API V2 O Google Maps API V2 é uma biblioteca desenvolvida pelo Google para integração de informações geográficas em aplicações para Android, esta ferramenta serve para auxiliar o desenvolvedor. A biblioteca permite que o desenvolvedor integre à sua aplicação um mapa, também disponibiliza algumas ferramentas de gerenciamento, posicionamento e de criação como linhas, marcadores e poligonos. (Google, 2014, s/p). 3. Geoprocessamento O Geoprocessamento é um termo vasto, que inclui varias tecnologias de manipulação e tratamento de dados geográficos, através métodos computacionais. Porém as ferramentas que recebem destaque são Sensoriamento Remoto ultilizando o Sistema de Posicionamento Global, os Sistemas de Informação Geográfica, bem como a automação de tarefas cartográficas e a digitalização de dados. (MADRUGA, 2008, p. 8) 4. Cálculos matemáticos A intenção de fazer o cálculo da área delimitada pelo usuário, cálculo da distância entre dois pontos e o cálculo para encontrar as coordenadas do centro do polígono foram tarefas que exigiram conceitos matemáticos, esses que serão explanados nos tópicos seguintes Centróide do Polígono A centróide é o ponto no interior de um polígono chamado centro geométrico. Se o polígono possui um corpo de densidade uniforme então a centróide coincide com o centro de massa e se a figura geométrica está submetida a um campo gravitacional então este ponto coincide com o centro de gravidade. (MADEIRA, 2009, s/p)

13 13 Figura 1 Fórmula para calcular ponto central de um polígono. Tecnodetail. 2014/ Adaptado Distância entre dois pontos sobre a superfície terrestre Uma fórmula baseada no sistema de coordenadas geográficas para calcular a distância entre 2 pontos da superfície terrestre sobre uma esferóide até ao momento apresenta uma precisão de 0.5mm porém o seu peso computacional é enorme e exige um processamento muito alto, a alternativa encontrada foi a fórmula de Haversine baseada na ortodromia, que assume a Terra como esférica. A garante uma precisão de 0.3% e é bastante menos complexa e computacionalmente menos dispendiosa (SILVA, 2012, p. 10). Figura 2 Fórmula de haversine. Ryanduell. 2014/ Adaptado Área do Polígono Esférico Os polígonos esféricos são definidos por grandes arcos circulares que conectam pontos em uma esfera. Usando a Terra como a esfera em questão é possível afirmar que os pontos cartesianos são os pontos que compõe esse polígono, área de um polígono esférico em graus esféricos é o excesso esférico, definido da seguinte forma. (Heckbert, 1994).

14 14 O algoritmo usado nesta pesquisa para encontrar a área do polígono delimitado pelo usuário foi apontado por (Heckbert, 1994) usando codificação em C++, conforme é mostrado na imagem seguinte. Figura 3 Excesso de um polígono esférico. DAMIANI.F.L.P.2014 Adaptado Graphics Gem IV

15 15 5. Projeto O aplicativo utilizou as bibliotecas fornecidas pelo Android combinado com a biblioteca externa Google Maps API V2 em seu desenvolvimento para a elaboração da tela do mapa, esta tela que permite criar os poligonos e retornar suas informações, como, quantidade total de pontos geográficos e seus respectivos valores cartesianos, área em metros quadrados e o perímetro do polígono. Figura 4 Aplicativo criando e exibindo dados de um polígono esférico. DAMIANI.F.L.P.2014 Usando o entendimento do geoprocessamento e suas ferramentas nos permitiu encontrar os requisitos básicos para o desenvolvimento do sistema de informação geográfica, como, coleta de informações geográficas, armazenamento no banco de dados, a recuperação e manipulação dos dados geográficos na tela do mapa. E por fim, assim que o usuário cria o polígono no mapa é usado o algoritmo que faz o cálculo da área da figura geométrica esférica, o código em C++ apresentado por Snyder foi adaptado para a linguagem Java, linguagem padrão do desenvolvimento em Android. CONCLUSÃO O aplicativo alcançou os objetivos realizando os processos de exibição e salvamento dos dados geográficos permitindo também a manipulação e a recuperação desses dados na tela do mapa. Os benefícios conquistados por esta aplicação para o usuário foram poupar

16 16 gastos extremos de alocação de equipamentos em áreas que não exigem grandes precisões, armazenar dados geográficos e gerar relatórios sobre as áreas através de exibição na tela do aparelho ou por documento em PDF. Como implementações futuras sugeridas serão criados o método de compartilhamento, o método de inserção manual de coordenadas para que o usuário crie delimitações digitando manualmente as coordenadas. 7. Referencias bibliograficas OPENHANDSETALLIANCE. Industry Leaders Announce Open Platform for Mobile Devices. Disponível em: < Acesso em: 10 jun Android Developers. Get the Android SDK. Disponível em: < Acesso em: 10 jun GOOGLE. API Android do Google Maps Biblioteca Externa. Disponível em: < Acesso em: 05 mai MADRUGA, R.A. Geração de base cartográfica digital utilizando imagens de satélite de altíssima resolução espacial para o suporte ao planejamento municipal. Universidade Federal do Rio Grande do Sul. Centro Estadual de Pesquisa em Sensoriamento Remoto e Meteorologia. Programa de Pós Graduação em Sensoriamento Remoto. Porto Alegre, HECKBERT, S. Paul. Graphics Gem IV. Pittsburgh Pennsylvania,1994.

17 17 PROPOSTA DE SOFTWARE PARA GESTÃO DE PROCESSOS DOS DEPARTAMENTOS DE UMA ORGANIZAÇÃO RIBEIRO, Jared Pereira 1 jared.ribeiro13@gmail.com BRAUN, Leonardo Luiz 2 leonardolbraun@gmail.com SANTANA, Edie Correia 3 ediecs@gmail.com ICE INSTITUTO CUIABANO DE EDUCAÇÃO Resumo Os processos dentro de um departamento refletem como o mesmo funciona, e produzem o produto ou serviço que atenderá um cliente ou até mesmo outro departamento dentro da organização. A partir da definição e aplicação dos processos os departamentos irão gerar valor, capacitando seus colaboradores as atividades do mesmo e contribuindo para que a organização crie diferenciais competitivos no mercado. Estes processos se bem definidos, centralizados e disponibilizados de forma fácil e coerente possibilitam ao colaborador entender como o seu departamento ou empresa funciona, e por conseguinte instruem o mesmo colaborador a executá-los de forma eficaz. Para atender a este objetivo propõe-se o desenvolvimento de um software que realize a modelagem de negócios e gerencie os processos dos departamentos de uma organização em uma ferramenta de fácil utilização e acesso. Com esta ferramenta será possível cadastrar os departamentos que compõem uma empresa, gerando seu modelo de negócios, anexando checklists que os colaboradores possam estar utilizando e mapeando todos os processos. Palavras Chaves: Software, processos 1. Introdução Devido ao cenário do mercado atual as empresas visam sempre garantir a estabilidade no segmento de mercado e diferenciais competitivos que as destaquem dos demais concorrentes, para isto estão buscando continuamente a otimização dos processos organizacionais, sua adequação e funcionamento. Além disso a compreensão dos processos é essencial para o sucesso em qualquer negócio, pois eles irão gerar uma 1 Acadêmico do curso de Ciência da Computação 2 Professor do curso de Ciência da Computação 3 Professor do curso de Ciência da Computação

18 18 estrutura adequada para fornecer produtos e/ou serviços de qualidade ao cliente. (PAMPONET, 2009) Além disso uma empresa precisa demonstrar logicamente através de um modelo como ela cria, entrega e gera valor e associar a este modelo os processos envolvidos para alcançar resultados concretos. Um software que gere este modelo, associe e gerencie processos ajudaria os colaboradores na compreensão dos mesmos e forneceria a organização uma ferramenta que contribuísse para o sucesso no segmento em que atua. No decorrer deste artigo será apresentado através de princípios administrativos uma proposta para o desenvolvimento de um software que gere o modelo de negócios, gerencie processos e centralize documentações dos departamentos que compõem uma empresa. Além da metodologia utilizada como base, será demonstrado a estrutura do software independente de linguagem ou banco de dados utilizado, ficando assim a critério do desenvolvedor escolher as ferramentas para o desenvolvimento. 2. Administração de empresas Segundo Nogueira (2010), a administração de empresas torna eficaz os pontos fortes das pessoas e minimiza o impacto causado pelas fraquezas. Esta administração de pessoas torna-se fator crítico para qualquer empresa. Com base na teoria proposta por Nogueira (2010), disponibilizando de maneira fácil aos funcionários os processos de seus respectivos departamentos é uma forma de auxiliar nesta administração de pessoas. Cada departamento da organização possui seus processos, por isso foi necessário realizar um estudo sobre departamentalização de uma organização. 3. Departamentalização A especialização na organização pode ser dar tanto no sentido vertical quanto no horizontal. A especialização horizontal também conhecida como departamentalização ocorre quando se verifica a necessidade de aumentar a perícia, a eficiência e a melhor qualidade de trabalho em si. (CHIAVENATO, 2003)

19 19 De acordo com Chiavenato (2003, pág. 209) A departamentalização é uma característica típica das grandes organizações. Ela é diretamente relacionada com o tamanho da organização e com a complexidade das operações. Quando a organização torna-se grande, todas as atividades não podem ser supervisionadas diretamente pelo proprietário ou diretor, mas por meio de vários executivos responsáveis pelas diferentes fases da atividade ou pelos diferentes aspectos dessa atividade. Chiavenato complementa dizendo que a departamentalização pode acontecer por função, que consiste no agrupamento das atividades e tarefas de acordo com as funções principais desenvolvidas dentro da empresa. Dentro de uma economia de troca por exemplo podemos ter em uma empresa as funções de produção, vendas e financiamentos, agrupando assim as atividades em departamentos: de produção, de vendas e de finanças. (CHIAVENATO, 2000, pág. 210) Podemos constatar através da teoria de Chiavenato que uma organização é dívida em departamentos, cada um com suas atividades que por conseguinte são exercidas por seus colaboradores. 4. Modelo de Negócios Para o levantamento do gerenciamento de processos foi utilizado como base o guia de BPM desenvolvido pela ABPMP (Association of Business Process Management Professionals) que é uma associação internacional de profissionais de Gerenciamento de Processos de Negócio (BPM Business Process Management), sem fins lucrativos, independente de fornecedores e dedicada à promoção dos conceitos e práticas de BPM. (FURLAN et al., 2009) Segundo FURLAN et al. (2009, pág. 64) Modelos de negócios retratam os principais eventos, atividades e resultados que descrevem cada um dos principais processos por completo, seus subprocessos e suas interações com o ambiente. Modelos de negócios também descrevem o suporte e os processos de gerenciamento e como interagem com os processos primários ou de apoio. Em uma abordagem mais simples Osterwalder, Pigneur (2009, pág. 14) definem que um modelo de negócios descreve a lógica de como uma organização cria, entrega, e captura valor.

20 20 Para descrever como os departamentos criam, entregam, geram valor e com quem eles interagem dentro da organização, foi necessário gerar um modelo de negócios específico para eles, porém utilizando como base um modelo de referência na área administrativa, o modelo escolhido foi o Business Model Canvas que é uma ferramenta de gerenciamento estratégico, que permite desenvolver e esboçar modelos de negócio novos ou existentes. (OSTERWALDER, PIGNEUR, 2009, pág. 42) Na imagem abaixo temos o modelo de negócios proposto pelo método Canvas. Figura 1: Modelo de negócios utilizando o método Canvas Fonte: Exame.com 1 1 Disponível em: < Acesso em out

21 21 5. Checklist Segundo FURLAN et al. (2009, pág. 307), o checklist é uma lista de verificação composto por itens agrupados e listados para facilitar comparação ou garantir que ações associadas sejam gerenciadas adequadamente e não sejam esquecidas. Cada departamento possui diversos checklists que serão utilizados pelos colaboradores como lembrete de itens em tarefas muito longas, ou passos a serem seguidos para se obter sucesso em uma determinada atividade. 6. Mapeamento de Processos Segundo FURLAN et al. (2009, pág. 30) um processo é um conjunto definido de atividades ou comportamentos executados por humanos ou máquinas para alcançar uma ou mais metas. Os processos podem ser disparados por eventos apresentando um ou mais resultados, estes resultados podem significar o término do processo ou a transferência de controle para outro processo. Os processos são compostos por várias tarefas ou atividades com o objetivo de solucionar uma questão específica, onde o trabalho é realizado ponta-a-ponta gerando valor aos clientes. (FURLAN et al., 2009) O mapeamento de processos é utilizado para desenhar e comunicar processos de negócios e são realistas em termos de seus usos. (FURLAN et al., 2009) Em outra definição Cheung e Bal (1998) afirmam que o mapeamento de processos é uma técnica onde coloca-se em um diagrama o processo de um setor, departamento ou organização, para orientação em suas fases de avaliação, projeto e desenvolvimento. Abaixo é apresentada uma imagem exemplificando o mapeamento de processos da utilização do software.

22 22 Figura 2: Mapeamento de processos da utilização do software Fonte: Elaborada pelo autor Conforme abordado anteriormente foi apresentado um método para demonstrar como um departamento gera valor e interage com quem ele ajuda, esta interação será apresentada com um mapeamento de processos, os processos deste mapeamento podem ter ou não fluxograma, o conceito de fluxograma de processos será visto a seguir. 7. Fluxogramas De acordo com o FURLAN et al. (2009), fluxograma é uma ferramenta utilizada para apresentar um ou mais processos através de simbologia. Uma representação comum de fluxogramas foi aprovada como um padrão ANSI no ano de 1970, utilizada na época para gerar fluxos de sistemas. Em uma definição mais simples Barnes (2004) afirma que um fluxograma de processo é uma ferramenta utilizada para se registrar um processo de maneira compacta, por meio de alguns símbolos padronizados. Um fluxograma comum pode conter os símbolos de início e fim sendo representados por losangos, retângulos ovais ou arredondados geralmente contendo a palavra Inicio ou Fim, ou outra que indique o início e o fim de um processo. Pode apresentar também setas interligando dois símbolos, indicando que o controle passa de um símbolo para o próximo, passos de processamento representado como retângulos, entrada e saída representadas por um paralelogramo, condição (ou decisão) representada pelo losango geralmente contendo teste como Sim/Não ou Verdadeiro/Falso, e vários outros símbolos que não são comumente utilizados mas que podem ser adotados. (FURLAN et al., 2009) Na imagem abaixo temos um exemplo de fluxograma de processo.

23 23 Figura 3: Exemplo de fluxograma do processo Fonte: Elaborada pelo autor 8. Estrutura do software Após a metodologia levantada a estrutura do software pode ser definida através de um cadastro inicial de departamentos, cada departamento irá possuir seus checklists e modelo de negócios, onde neste último devem ser apresentados seus relacionamentos, quem ajuda o departamento, de que forma ele é ajudado, quem o departamento ajuda, como ele ajuda, sendo que a forma de como o departamento é ajudado e como ele ajuda serão representados através do mapeamento de processos contendo diversos processos e fluxogramas que contribuíram para que o usuário obtenha uma matriz de conhecimento sobre seu departamento e consiga executar suas atividades com eficiência. A imagem abaixo ilustra a estrutura do software com base nos conceitos levantados.

24 24 Figura 4: Estrutura do software Fonte: Elaborada pelo autor 9. Conclusão O objetivo deste artigo foi propor o desenvolvimento de um software para gerar o modelo de negócios dos departamentos que compõem uma organização, associando processos e documentações utilizados por eles. O primeiro passo foi passo foi compreender o conceito de departamentalização dentro de uma organização e utilizar como base um modelo de negócios que fornecesse aos colaboradores uma visão ampla de como o seu departamento gera valor e os processos envolvidos para se alcançar os objetivos desejados. Para isto foi necessário realizar uma pesquisa aprofundada sobre alguns conceitos administrativos como processos, checklist e fluxograma de processos. Conclui-se também que com a implementação deste software será possível cadastrar todos os departamentos existentes em uma organização gerando um modelo de negócios para cada departamento, anexando os checklists utilizados e gerenciando os processos envolvidos, sendo possível demonstrar estes processos através de um fluxograma de processos.

25 25 O software fornecerá a organização uma central de conhecimento em gestão de processos, auxiliando os colaboradores a executarem suas atividades com eficiência, para que eles consigam alcançar os resultados esperados afim de fornecer produtos e serviços de qualidade ao cliente, ou seja, o software se desenvolvido será um diferencial para que a empresa se destaque em relação a seus concorrentes. 10. Referências BARNES, R. M. Estudo de movimentos e de tempos. Tradução da 6ª edição americana. 9ª reimpressão. São Paulo: Edgard Blücher, CHEUNG, Y.; BAL, J. Process analysis techniques and tools for business improvements. Business Process Management Journal, v. 4, n. 4, p , CHIAVENATO, Idalberto. Introdução à teoria geral da administração: uma visão abrangente da moderna administração das organizações. 7. ed. rev. e atual. Rio de Janeiro: Elsevier, ª reimpressão, ISBN FURLAN, J. et al. Guia para o Gerenciamento de Processos de Negócio Corpo Comum de Conhecimento. Versão 2.0, NOGUEIRA, W. O que é administração de empresas?. Disponível em: Acesso em: 01 de out OSTERWALDER A., PIGNEUR Y. Business Model Generation ISBN PAMPONET, A. V. Como Entender os Processos Organizacionais. Disponível em: Acesso em: 15 de nov

26 26 APESVICI: UM APLICATIVO ANDROID DE COLETA DE DADOS SOBRE AS CONDIÇÕES DE TRÁFEGO DAS ESTRADAS VICINAIS Resumo JESUS,Erivelton Gonçalo 1 BRAUN, Leonardo Luiz 2 BARROS, Andersown Becher Paes 2 Este artigo tem como objetivo apresentar os resultados obtidos através de pesquisas bibliográficas e implementação, para se desenvolver o aplicativo APESVICI (Aplicativo Estrada Vicinal). A seção dois aborda conceitos relacionados às tecnologias empregadas para desenvolver o software. Na seção três é apresentada a arquitetura, explicando como é realizada a integração entre as diferentes tecnologias. Já na seção quatro, é exposto o aplicativo, descrevendo as principais funcionalidades e suas características. Palavras chaves: APESVICI, Aplicativo, Estrada Vicinal, Tecnologias. Abstract This article aims to present the results obtained through bibliographic research and implementation, to develop APESVICI application (App outer). Section two discusses the related concepts used to develop the application technology. In section three to architecture is presented, explaining how the integration between different technologies is carried out. Already in section four, the application is exposed, describing the main features and characteristics. Key Words: APESVICI, Application, Side Roads, Technologies. 1 Acadêmico do Curso de Ciência da Computação do Instituto Cuiabano de Educação. eriveltongoncalo@gmail.com 2 Professor/Orientador do Curso de Ciência da Computação do Instituto Cuiabano de Educação. E- mail:leonardolbraun@gmail.com

27 27 1. Introdução As estradas vicinais, também chamadas de estradas rurais, ou ainda estradas municipais, podem ser definidas como vias que interligam as propriedades rurais com as cidades (VALFRIDIA, 2003). A maioria dessas vias não é asfaltada, o que dificulta o acesso a esses locais. Objetivo deste artigo é expor os resultados obtidos mediante pesquisas, para desenvolver o aplicativo móvel APESVICI (Aplicativo Estrada Vicinal). A seção dois apresenta de maneira resumida conceitos sobre a plataforma Android, biblioteca Google Play Services, e Web Service. A seção três explica a arquitetura do software, como é realizada a integração entre o aplicativo, Banco de Dados local, Web Service, servidor de Banco de Dados remoto, e quais protocolos são utilizados para a comunicação. Já a seção quatro apresenta o projeto, onde são explicitadas as principais funcionalidades do aplicativo e suas características. 2. Tecnologias empregadas ao aplicativo APESVICI Para desenvolver o aplicativo APESVICI (Aplicativo Estrada Vicinal) foi utilizada a plataforma de desenvolvimento Android, que é gratuita, de código aberto, e utiliza a linguagem de programação Java. Como o software utiliza mapas, foi necessário adicionar a biblioteca Google Play Services na aplicação, que oferece diversas funcionalidades para manipulação de mapas no Android. Dentre as funcionalidades disponíveis destacam-se GPS (Global Positioning System), visualização de mapas, inserção de marcadores, entre outros. Para estabelecer conexão do aplicativo APESVICI com um servidor externo, foi necessário utilizar Web Service. Conforme Hugo (2006), Web Service fornece serviços para soluções de problemas de comunicação entre diferentes tipos de aplicações, desenvolvidas nas mais variadas linguagens de programação. 3. Arquitetura do aplicativo A figura 1 faz a ilustração da arquitetura do aplicativo APESVICI. Como pode ser visualizado, o aplicativo primeiramente armazena uma cópia dos dados no Banco de Dados local do

28 28 Android, o SQLite. Essa prática foi necessária devido à conexão 3G de algumas localidades serem de péssima qualidade, especialmente no interior das cidades abordadas por este projeto. O acesso ao SQLite pode ser realizado off-line. Armazenando os dados na base de dados do dispositivo, permite que o usuário faça a sincronização com o servidor remoto assim que a conexão com a internet seja restabelecida. Após a sincronização todos os dados são excluídos do dispositivo. Figura 1 - Arquitetura do aplicativo APESVICI Elaborado pelo autor Conforme figura 1, o SOAP (Simple Object Access Protocol) é um protocolo de comunicação baseado em XML (Extensible Markup Language) onde seu objetivo aqui é criar um envelope que vai abrigar os métodos e as propriedades do Web Service, além das informações inseridas pelo usuário da aplicação. A comunicação é realizada através de troca de mensagens entre a aplicação requisitante e o serviço. Para enviar as informações do software para o Web Service, bem como receber a resposta deste, o aplicativo APESVICI utiliza o protocolo de transporte HTTP (HiperText Transfer Protocol). A interface do Web Service possui as descrições dos serviços oferecidos, e o tipo de dados que este suporta. O aplicativo APESVICI utiliza o serviço FS_Proced, que é um método responsável por fazer a inserção dos dados no Banco de Dados remoto, e o Consulta, que disponibiliza as informações no dispositivo, para que o usuário consulte. Os dados de conexão com o Banco de Dados remoto, como por exemplo, usuário e senha, não ficam disponíveis no Web Service, esses dados são ocultados para garantir a segurança.

29 29 4. APESVICI - Projeto O projeto APESVICI (Aplicativo Estrada Vicinal) consiste de um software móvel, desenvolvido na plataforma Android onde o mesmo tem como objetivo coletar dados sobre as condições de tráfego das estradas vicinais. As informações são fornecidas pelo usuário do aplicativo que identificar problemas nas vias participantes do projeto. Inicialmente o projeto conta com a participação de quatro cidades do estado do Mato Grosso, são elas: Alta Floresta, Confresa, Juara e Marcelândia. Para identificar as cidades, o aplicativo dispõe de uma lista com a descrição dos municípios, que ao ser clicado, mostra na tela o mapa com marcadores e linhas traçadas. Ao clicar no marcador o usuário é direcionado para um formulário onde poderá deixar a sua avaliação sobre a via que selecionou. Na mesma tela, existe uma aba para conferir os resultados parciais de avaliações anteriores. Veja a figura 2: Figura 2 Telas do Mapa e de avaliação. Fonte: Elaborado pelo autor. Conforme figura 2, a tela que exibe o mapa é a mais importante do projeto, pois é ela que vai inserir os traçados coloridos e marcadores, para que os dados possam ser coletados. O traçado preto representa a delimitação do município, que na figura acima é Confresa. Já o traçado interno desenha as estradas vicinais, onde são dispostos marcadores que ao ser clicado exibe um pop-up com a identificação da via selecionada e link para avaliação. Já a tela que exibe o formulário, figura 2, permite que o usuário realize a avaliação da via através de campos pré-definidos. No primeiro campo é designado que tipo de estrada vicinal o usuário vai avaliar: Pavimentada (Asfalto) ou Não pavimentada (Terra). No segundo campo é avaliada a condição que se encontra a estrada, no momento da interação do usuário com o

30 30 aplicativo. As opções são: Ótimo, Ruim e Buraco. Ao concluir o preenchimento do formulário, o usuário salva os dados primeiramente no dispositivo móvel, através do botão Salvar. Caso esteja com conexão 3G ou Wi-Fi o mesmo poderá enviar os dados para o servidor de Banco de Dados externo, bastando clicar no botão Enviar. A figura 3 exibe a tela Resultado e Gerar relatório. A tela resultado exibe para o usuário o percentual parcial de avaliações referente à condição de tráfego de determinada via. A exibição dos resultados é divido em dois tópicos: Tipo de estrada Asfalto e Terra. As condições disponíveis para consulta são: Buraco, Ótimo e Ruim. Já a tela Gerar relatório, permite gerar arquivos no formato PDF (Portable Document Format). Os dados disponíveis no relatório são os seguintes: Identificação da via avaliada, o tipo de estrada: Asfalto ou Terra, e a condição da via: Buraco, Ótimo e Ruim. Veja a figura 3: Figura 3 Tela Resultado e Gerar Relatório Fonte: Elaborado pelo autor. 5. Resultados obtidos Dessa forma, o resultado final que se obteve, foi à conclusão do aplicativo, que realiza a coleta de dados sobre as condições de tráfego das estradas vicinais. A princípio os dados são distribuídos apenas através do aplicativo, mas para trabalhos futuros será desenvolvido um gerenciador web para administrar as informações coletadas.

31 31 6. Conclusão As estradas vicinais são caminhos que ligam as propriedades rurais aos grandes centros urbanos. A superfície da maioria dessas estradas não dispõe de pavimentação, o que prejudica o fluxo de veículos. Problemas como poeira, erosão, buracos e atoleiros é bastante comum de encontrar durante o percurso. Essas vias são importantes para o crescimento socioeconômico do Brasil, pois é através delas que os produtos do agronegócio são escoados para outras localidades. O objetivo deste artigo foi expor os resultados obtidos através de pesquisas, para desenvolver um software para dispositivos móveis, na plataforma Android, capaz de coletar informações sobre as condições de tráfego das estradas vicinais. 7. Referências bibliográficas ESTRELLA, Júlio Cézar; et al. Avaliação de desempenho de web services attachments. Disponível em: < Acesso em: 08 de jun HUGO, Victor Vieira. Web Services de apoio a aplicações voltadas ao trabalho em grupo Dissertação (Mestre em Ciência da Computação e Matemática Computacional) Instituto de Ciências Matemáticas e de Computação ICMC-USP, Universidade de São Paulo, São Paulo, Disponível em: < >. Acesso em: 18 de abr VALFRIDIA, Tercia Lima Nunes. Método de previsão de defeitos em estradas vicinais de terra com base no uso das redes neurais artificiais: Trecho de Aquiraz CE. Dissertação (Mestrado em Engenharia de Transportes) Programa de Mestrado em Engenharia de Transportes, Universidade Federal do Ceará, Fortaleza, Disponível em: < 2>. Acesso em 28 de mar LECHETA, Ricardo R. Google android: aprenda a criar aplicações para dispositivos móveis com o android sdk. 2 ed. São Paulo: Novatec, RABELLO, Ramon Ribeiro. Android: um novo paradigma de desenvolvimento móvel. Disponível em: < Acesso em: 27 de out

32 32 DESENVOLVENDO APLICAÇÕES WEB ADAPTÁVEIS UTILIZANDO CONCEITOS DE DESIGN RESPONSIVO BARROS, Andersown Becher Paes 1 AMORIN, Kenny Jonhson da Silva 2 2 RESUMO A crescente evolução das tecnologias e juntamente com a popularização de dispositivos móveis têm permitido o desenvolvimento de aplicações que tenham uma melhor experiência para o usuário. Neste aspecto, o web design responsivo tem como função facilitar esse desenvolvimento. Tendo como objetivo central o estudo dos conceitos básicos e recursos disponíveis para serem utilizados em aplicações web para dispositivos móveis. Utilizando como exemplo o site do ICE ( Mantendo o design do layout, porém tornando-o adaptável a qualquer resolução. Palavras chave: Web Design, Responsivo, Aplicações Web. ABSTRACT The growing and evolving technologies with popularization of mobile devices have allowed the development of applications that have a better user experience. In this aspect, the responsive web design is to facilitate this function development. Having a central procedure the study of basic concepts and available for use in web applications for mobile devices features.

33 33 1. INTRODUÇÃO A popularização dispositivos móveis, tais como celulares, smartphones e tablets tem aumentado a facilidade de acesso a informação, em especial através da internet. E isso tem gerado uma grande mudança na maneira de acessar as informações, com um crescente número de usuários, diversos modelos e resoluções de telas diferentes, surgiu a necessidade de criar interfaces mais amigáveis e adaptáveis a esses dispositivos. Na tentativa de solucionar esse problema, surge o conceito de, desenvolver uma aplicação web voltada para telas maiores e outra interface voltada para telas menores. Essa abordagem gerava uma experiência de usuário mais agradável, quando acessado a partir de um celular, ou outro dispositivo com tela menor. Porém gerava outros, como se tratava de uma interface exclusiva, esta possuía outro endereço. E quando o link é compartilhado visitantes ficarão presos em uma pequena tela amigável vista, independentemente do dispositivo que seja usado, gerando um má experiência no caso de desktop. Figura 1 - Layout Responsivo. (Fonte: Acessado em: 01/04/2014)

34 34 2. DESENVOLVIMENTO Zemel (2012) nos diz que para conseguir implementar um design responsivo necessitamos de 3 tecnologias principais: 1) Layout fluido; 2) Imagens e recursos flexíveis; e 3) Media queries LAYOUT FLUÍDO Layout fluídos ou como chamado por Marcotte, grid flexível, é o primeiro passo para se conseguir construir aplicações web responsivas. Para isso é importante não utilizar medidas absolutas no CSS. De modo que os espaçamentos, tamanhos, margens, paddings, ou qualquer outro elemento do layout da pagina do site devemos utilizar unidades relativas como porcentagem e em. Para converter uma medida absoluta, geralmente em pixel em uma medida relativa Marcotte nos apresenta uma fórmula. target context = result Com a fórmula fica fácil calcular qual será a medida relativa permitindo assim a conversão correta de um determinado elemento que possuía uma medida absoluta.

35 35 Figura 2 - Medidas Absolutas Por exemplo, vamos aplicar a fórmula ao site acima (Figura 1). O menu possui 170px de largura, e o conteúdo possui 960px de largura, então neste caso a largura do menu é o target (170) e a largura do conteúdo é o context (960), então aplicando a fórmula ficaria da seguinte maneira: = 0,177 O resultado será 0,177, se avançarmos duas casas decimais a direita teremos 17,7 e este é o valor e porcentagem. Dessa maneira é possível converter todas as medidas absolutas em pixel em valores relativos em porcentagem IMAGENS E RECURSOS FLEXÍVEIS Quando se desenvolve uma aplicação através do conceito de web design responsivo, é preciso encontrar uma solução que faça com que as imagens se adequem ao espaço devido e, independentemente da resolução, sejam bem apresentadas. Segundo Marcotte (2011, p. 52), para se conseguir um efeito de imagens flexíveis, é preciso apenas algumas poucas linhas de CSS (Cascading Style Sheets). Sem regras complexas ou propriedades recém-lançadas. Só é preciso acrescentar isso ao CSS.

36 36 img { } max-width: 100%; Figura 3 Script responsável por tornar as imagens com tamanho responsivo O problema dessa abordagem mais simples, é que é a imagem será sempre a mesma independente, forçando dispositivos com tamanhos menores utilizar uma imagem em alta resolução, devido a atender a qualidade em dispositivos com tamanhos maiores. Alem disso quando o acesso é feito a partir de dispositivos moveis a velocidade de acesso geralmente é menor. Para isso existem frameworks que podem ser de alternativa para isso como o jquery-picture MEDIA QUERYS O design responsivo não consiste em apenas redimensionamento de conteúdo e imagens, mas também que os elementos possam variar de posição, tamanho, se esconder ou exibir, conforme a necessário. E é exatamente para isso que utilizaremos as media querys. <link rel="stylesheet" type="text/css" media="screen and (minwidth:480px)" href="480.css"> <link rel="stylesheet" type="text/css" media="screen and (minwidth:768px)" only screen and (min-width: 480px) {... only screen and (min-width: 768px) {... } Figura 4 Semântica das media-queries O media query é uma parte de um recurso presente no css desde a versão 2.1 e seu uso é recomendado pela W3C, as media types. Media type é responsável por permitir que sejam criados estilos distintos conforme a mídia, como monitores, projetores, impressão TVs, entre outros. Mas as media types não servem totalmente como separadores de estilo porque cada vez mais dispositivos de mídia surgem com recursos diferentes e ao mesmo tempo parecidos, mesclando recursos existentes entre algumas mídias.

37 37 Os media querys permitem que o foco da separação de layout seja o tamanho e não o tipo da mídia em si. É possível especificar o uso de estilos separados por arquivo ou blocos dentro do mesmo arquivo usando um ou vários dos parâmetros a seguir: width height device-width device-height orientation aspect-ratio device-aspect-ratio color color-index monochrome resolution scan grid No geral apenas alguns poucos parâmetros são usados para estruturar o layout. A maioria dizem respeito a largura e altura do display e a orientação do dispositivo. Para declarar as regras CSS especificas conforme o tamanho do dispositivo ou browser, utilizamos os parâmetros devicewidth e width. Mas, é importante definir breakpoints (pontos de interrupções) adequados, pois, estes serão os pontos em que o comportamento e/ou a estrutura do layout sofrerá alterações. Não há um padrão predefinido de quais devem ser os melhores breakpoints a serem adotados. Cada aplicação web tem sua necessidade. E portanto deverá ser ajustada conforme a necessidade.

38 38 Mesmo assim, existem uma serie de frameworks que definem alguns breakpoints iniciais, como o Twitter Bootstrap, Skeleton e Less Framework. Cada um deles estabelecem um modelo de breakpoints APLICAÇÃO DO DESIGN RESPONSIVO Como forma de demonstrar a aplicação das técnicas de web design responsivo foi utilizado o site do ICE localizado no endereço eletrônico Por meio do layout responsivo o site se adapta a diferentes resoluções como pode ser visto na figura abaixo (Figura 3 - Layout Responsivo). Se comparado com o layout de largura fixo que foi desenvolvido focado em resoluções de 1024 pixels de largura. No caso de resoluções superiores esta não aproveita devidamente o espaço excedente na tela e em casos de resoluções menores gera barra de rolagem na posição horizontal prejudicando a experiência do usuário. Figura 3 - Layout Responsivo Isso só é possível as media-queries que definem como os elementos irão ser posicionados na tela dependendo de cada resolução. Como no caso do menu superior que se adapta a largura afim de aproveitar melhor o espaço na tela. Na primeira parte da imagem ele fica escondido, aparecendo apenas quando clicado no ícone ao lado do campo de busca, já na terceira imagem ele assume o tamanho de 100% da largura da tela. Os menus de navegação tiveram que ser escondidos em caso de resoluções menores como de celulares e smartphones.

39 39 Figura 4 - CSS responsável pelo layout dos menus. Figura 5 - Menu responsivo.