Curso Superior de Tecnologia em Sistemas para Internet · Bruna Stella Fernandes Pinto Roberto Silva Conceição Rosilene Silva e Silva WEBPORTS- Aplicativo de Suporte Educacional

CENTRO ESTADUAL DE EDUCAÇÃO TECNOLÓGICA PAULA SOUZA

Faculdade de Tecnologia da Baixada Santista “Rubens Lara”

Curso Superior de Tecnologia em Sistemas para Internet

WEBPORTS: Aplicativo de Suporte Educacional para Área Portuária

Santos

Junho/2017

Bruna Stella Fernandes Pinto

Roberto Silva Conceição

Rosilene Silva e Silva

WEBPORTS- Aplicativo de Suporte Educacional para Área Portuária

Trabalho de Conclusão de Curso apresentado à Faculdade de Tecnologia Baixada Santista “Rubens Lara”, como exigência parcial para obtenção do título de Tecnólogo em Sistemas para Internet.

Orientadora: Prof.ª Me. Rosemeire Cardozo

Vidal

Santos

Junho/2017

PINTO, Bruna S. F.; CONCEIÇÃO, Roberto S.; SILVA, Rosilene, S.

WEBPORTS: Aplicativo de Suporte Educacional para Área Portuária / Bruna Stella Fernandes Pinto. Roberto Silva Conceição. Rosilene Silva e Silva. – Santos: Orientadora: Prof.ª Me. Rosemeire Cardozo Vidal. Centro Estadual de Educação Tecnológica Paula Souza (CEETEPS), junho, 2017.

84 f.

Trabalho de Conclusão de Curso – Centro de Educação Tecnológica Paula Souza, Faculdade de Tecnologia da Baixada Santista “Rubens Lara”, Curso de Sistemas para Internet. 1. Aplicativo móvel. 2. Conhecimento. 3. Quiz educacional. 4. Porto de Santos

PINTO, Bruna S. F.; CONCEIÇÃO, Roberto S.; E SILVA, Rosilene, S.

Bruna Stella Fernandes Pinto

Roberto Silva Conceição

Rosilene Silva e Silva

WEBPORTS- Aplicativo de Suporte Educacional para Área Portuária

Trabalho de Conclusão de Curso apresentado à Faculdade de Tecnologia da Baixada Santista “Rubens Lara”, como exigência parcial para obtenção do título de tecnólogo em Sistemas para Internet.

Santos, ___ de ________________ de ______

Banca Examinadora

Prof.ª Me. Rosemeire Cardozo Vidal – orientadora

Faculdade de Tecnologia da Baixada Santista “Rubens Lara”

Presidente

Prof. (título e nome completo)

Instituição

Prof. (título e nome completo)

Instituição

Dedicamos este trabalho às nossas

famílias, pela compreensão e apoio pleno

a nós proporcionados durante toda

trajetória acadêmica.

AGRADECIMENTOS

Aos nossos familiares, pelo carinho, paciência e dedicação incondicional,

que nos motivam a dar o nosso melhor em tudo aquilo que nos envolvemos, ainda

que não pareça possível retribuir todo o esforço em nós depositado.

Aos nossos professores, que nos inspiram diariamente, construindo e

compartilhando conhecimento e valores, enquanto nos prepararam para o mercado

profissional.

À nossa orientadora, Prof.ª Me. Rosemeire Cardozo Vidal, pelo papel

fundamental que desempenhou nas etapas deste projeto, fornecendo sugestões,

críticas construtivas, compartilhando conhecimento e principalmente, estimulando

cada integrante a dedicar o seu melhor.

A maior recompensa para o trabalho do

homem não é o que ele ganha com isso,

mas o que ele se torna com isso.

(John Ruskin)

RESUMO

PINTO. Bruna S. F. P.. CONCEIÇÃO. Roberto S.. SILVA. Rosilene S.. WEBPORTS:

Aplicativo de Suporte Educacional para a Área Portuária. 2017. 84 f. Trabalho de

Conclusão de Curso de Graduação de Tecnólogo em Sistemas para Internet -

Centro Estadual de Educação Tecnológica Paula Souza, Faculdade de Tecnologia

da Baixada Santista “Rubens Lara”, Santos, 2017.

O presente estudo tem como objetivo apresentar o desenvolvimento do aplicativo

WebPorts, desenvolvido para auxiliar no processo de aprendizagem de forma

interativa através de perguntas e respostas relacionadas às operações do porto de

Santos. O projeto é destinado aos estudantes e profissionais da área que buscam

conhecimentos básicos e/ou atualização sobre os avanços tecnológicos que

sobrevieram ao porto, possibilitando assim, colocá-los em prática no mercado de

trabalho. Para a realização do objetivo proposto, foram adotadas as tecnologias

HTML (Hyper Text Markup Language), CSS (Cascading Style Sheets), PHP

(Hypertext Preprocessor), JavaScript e banco de dados MySQL, em um ambiente de

desenvolvimento integrado denominado Intel XDK. Foram realizados testes de

usabilidade com 11 estudantes do 5º ciclo do curso de Gestão Portuária, onde o

aplicativo obteve 98% de aceitação.

Palavras-chave: Aplicativo móvel. Conhecimento. Quiz educacional. Porto de

Santos.

ABSTRACT

PINTO. Bruna S. F. P.. CONCEIÇÃO. Roberto S.. SILVA. Rosilene S.. WEBPORTS:

Aplicativo de Suporte Educacional para a Área Portuária. 2017. 84 f. Trabalho de

Conclusão de Curso de Graduação de Tecnólogo em Sistemas para Internet -

Centro Estadual de Educação Tecnológica Paula Souza, Faculdade de Tecnologia

da Baixada Santista “Rubens Lara”, Santos, 2017.

The present study aims to present the development of the WebPorts application,

developed to assist the learning process in an interactive way through questions and

answers related to the operations of the port of Santos. The project is aimed at

students and professionals in the area who seek basic knowledge and / or update on

the technological advances that have come to the port, making it possible to put them

into practice in the job market. In order to achieve this goal, HTML (Hyper Text

Markup Language), CSS (Cascading Style Sheets), PHP (Hypertext Preprocessor),

JavaScript and MySQL database were adopted in an integrated development

environment called Intel XDK. Usability tests were performed with 11 students from

the fifth semester of the Port Management course, where the application was 98%

accepted.

Keywords: Mobile Application. Knowledge. Educational Quiz. Port of Santos.

LISTA DE ABREVIATURAS E SIGLAS

ANTAQ Agência Nacional de Transportes Aquaviários

API Application Programming Interface (Interface de Programação de

Aplicação)

CBO Classificação Brasileira de Ocupações

CODESP Companhia Docas do Estado de São Paulo

COSEPS Comissão Orientadora de Serviços Portuários de Santos

CSS Cascading Style Sheets (Folha de Estilos)

DCU Diagrama de Caso de Uso

HTML Hyper-Text Markup Language (Linguagem de Marcação de Hipertexto)

JDBC Java Database Connectivity (Conectividade de Banco de Dados Java)

MEC Ministério da Educação

MER Modelo Entidade de Relacionamento

MTE Ministério do Trabalho e Emprego

OAB Ordem dos Advogados do Brasil

OGMO Órgão de Gestão de Mão-de-Obra

PHP Hypertext Preprocessor (Pré-processamento de Hipertexto)

RF Requisitos Funcionais

RIU Requisitos de Interface com o Usuário

RNF Requisitos não Funcionais

RN Regra de Negócios

SGBD Sistema de Gerenciamento de Banco de Dados

SQL Structured Query Language (Linguagem de Consulta Estruturada)

URL Uniform Resource Locator (Localizador Padrão de Recursos)

W3C World Wide Web Consortium (Consórcio World Wide Web)

XHTML Extensible Hypertext Markup Language (Linguagem de Marcação de

Hipertexto Extensível)

LISTA DE FIGURAS

Figura 1- Tela das subcategorias ................................................................................ 27

Figura 2- Tela de uma questão ................................................................................... 28

Figura 3- Tela da imagem que representa as categorias ............................................ 29


Figura 5- Tela inicial e suas categorias ....................................................................... 30


Figura 7- Camadas da arquitetura do Android ............................................................ 37

Figura 8- IDE da Intel .................................................................................................. 40

Figura 9- Diagrama de caso de uso ............................................................................ 47

Figura 10- Modelo Entidade de Relacionamento ........................................................ 50

Figura 11- Tela principal .............................................................................................. 51

Figura 12- Tela de cadastro e login ............................................................................. 52

Figura 13- Tela de cadastro realizado com sucesso ................................................... 52

Figura 14- Tela de ajuda ............................................................................................. 53

Figura 15- Tela de informação do modo “Estudo” ....................................................... 53

Figura 16- Tela de escolha de categoria ..................................................................... 54

Figura 17- Tela de perguntas modo “Estudo” .............................................................. 55

Figura 18- Tela de pergunta e opções de respostas ................................................... 55

Figura 19- Tela de erro modo “Estudo” ....................................................................... 56

Figura 20- Tela de resposta correta do modo “Estudo” ............................................... 57

Figura 21- Tela de modo “Aleatório” ............................................................................ 57

Figura 22- Tela de pergunta do modo “Aleatório” ........................................................ 58

Figura 23- Tela de relatório do usuário ....................................................................... 59

Figura 24- Tela de retorno quando não há respostas ................................................. 59

Figura 25- Tela do erro na tela de cadastro ................................................................ 68

Figura 26- Tela de cadastro atualizada ....................................................................... 68

Figura 27- Tela do erro na tela de login ...................................................................... 69

Figura 28- Tela de login atualizada ............................................................................. 70

Figura 29- Tela do erro na tela de login ...................................................................... 70

Figura 30- Tela de login atualizada ............................................................................. 71

Figura 31- Tela do erro na tela de apresentação ........................................................ 71

Figura 32- Tela de apresentação atualizada ............................................................... 72

Figura 33- Tela senha obrigatória ............................................................................... 80

Figura 34- Tela e-mail obrigatório ............................................................................... 80

Figura 35- Tela e-mail inválido .................................................................................... 81

Figura 36- Tela nome obrigatório ................................................................................ 81

Figura 37- Tela login obrigatório .................................................................................. 82

Figura 38- Tela senha obrigatória ............................................................................... 82

Figura 39- Primeira parte do questionário ................................................................... 83

Figura 40- Segunda parte do questionário .................................................................. 84

LISTA DE GRÁFICOS

Gráfico 1- Captura de tela da resposta da questão 1 .................................................. 61









Gráfico 10- Captura de tela da resposta da questão 10 .............................................. 65




LISTA DE TABELA

Tabela 1- Sistemas operacionais de cada aplicativo pesquisado ............................... 32

Tabela 2- Idiomas disponíveis para cada aplicativo pesquisado ................................. 32

Tabela 3- Relação das Regras de Negócios (RN) ...................................................... 43

Tabela 4- Relação dos Requisitos Funcionais (RF) .................................................... 44

Tabela 5- Relação dos Requisitos não Funcionais (RNF) ........................................... 45

Tabela 6- Relação dos Requisitos de interface com o usuário (RIU) .......................... 46

Tabela 7- Identificação dos atores e seus casos de uso ............................................. 48

Tabela 8- Identificação dos casos de uso ................................................................... 48

Tabela 9- Especificação do caso de uso 1 .................................................................. 48

Tabela 10- Especificação do caso de uso 2 ................................................................ 49




SUMÁRIO

1 INTRODUÇÃO ......................................................................................................... 16

1.1 JUSTIFICATIVA DO TEMA ................................................................................... 17

1.2 PROBLEMAS DA PESQUISA ............................................................................... 17

1.3 OBJETIVOS .......................................................................................................... 18

1.3.1 Objetivo geral .................................................................................................. 18

1.3.2 Objetivos específicos ..................................................................................... 18

1.4 PROCEDIMENTOS METODOLÓGICOS .............................................................. 18

1.5 ORGANIZAÇÃO DA MONOGRAFIA .................................................................... 19

2 O PORTO DA CIDADE DE SANTOS ................................................................... 20

2.1 MUDANÇAS DE TRABALHO NO PORTO DE SANTOS ...................................... 22

2.2 TRABALHADORES PORTUÁRIOS ...................................................................... 24

3 ESTADO DA ARTE .............................................................................................. 26

3.1 SOFTWARE EDUACIONAL BASEADO EM QUIZ ................................................ 26

3.2 CENÁRIO ATUAL- SOFTWARE PARA QUIZ ....................................................... 27

3.2.1 Aplicativo Learn & Play .................................................................................. 27

3.2.2 Aplicativo Perguntados .................................................................................. 28

3.2.3 Aplicativo Questões OAB .............................................................................. 30

3.3 UM QUIZ SOBRE A ÁREA PORTUÁRIA- WEBPORTS ....................................... 31

3.4 PRINCIPAIS DIFERENÇAS ENTRE OS APLICATIVOS ...................................... 31

4 METODOLOGIA ...................................................................................................... 34

4.1 LINGUAGENS DE PROGRAMAÇÃO ................................................................... 34

4.1.2 Html ................................................................................................................... 34

4.1.3 Css ..................................................................................................................... 34

4.1.4 JavaScript ......................................................................................................... 35

4.1.5 Php..................................................................................................................... 35

4.2 BANCO DE DADOS .............................................................................................. 35

4.3 ANDROID .............................................................................................................. 36

4.3.1 Camada Aplicações.......................................................................................... 38

4.3.2 Camada Framework de aplicações ................................................................. 38

4.3.3 Camada Bibliotecas ......................................................................................... 38

4.3.4 Camada Tempo de Execução Android ........................................................... 38

4.3.5 Camada Kernel do Linux ................................................................................. 39

4.3.6 Versões do Android ......................................................................................... 39

4.4 HTML 5 LOCAL STORAGE .................................................................................. 39

4.5 INTEL XDK ............................................................................................................ 39

4.6 ENGENHARIA DE SOFTWARE ........................................................................... 40

5 DESENVOLVIMENTO ............................................................................................. 42

5.1 DESCRIÇÃO GERAL DO APLICATIVO WEBPORTS .......................................... 42

5.1.1 Modo de Estudos ............................................................................................. 42

5.1.2 Modo Aleatório ................................................................................................. 42

5.2 CATEGORIAS E QUESTÕES ............................................................................... 43

5.3 REGRAS DE NEGÓCIOS ..................................................................................... 43

5.4 ANÁLISE DE REQUISITOS .................................................................................. 43

5.4.1 Requisitos Funcionais (RF) ............................................................................. 44

5.4.2 Requisitos Não Funcionais (RNF) ................................................................... 45

5.4.3 Requisitos de Interface com o Usuário (RIU) ................................................. 46

5.5 CASOS DE USO ................................................................................................... 46

5.5.1 Diagrama de Caso de Uso ............................................................................... 47

5.5.2 Definição de papéis .......................................................................................... 47

5.5.3 Identificação dos casos de uso ...................................................................... 48

5.5.4 Descrição dos casos de uso ........................................................................... 48

5.6 MODELO ENTIDADE DE RELACIONAMENTO ................................................... 50

5.7 TELAS DO APLICATIVO WEBPORTS ................................................................. 51

5.7.1 Tela principal .................................................................................................... 51

5.7.2 Tela de ajuda ..................................................................................................... 52

5.7.3 Tela do modo de jogo “Estudo” ...................................................................... 53

5.7.4 Tela de navegação por categorias do modo “Estudo” ................................. 54

5.7.5. Tela de navegação de perguntas do modo “Estudo” .................................. 54

5.7.6 Tela de questões do modo “Estudo” .............................................................. 55

5.7.7 Tela de retorno para resposta incorreta do modo “Estudo” ........................ 56

5.7.8 Tela de retorno para resposta correta do modo “Estudo” ........................... 56

5.7.9 Tela do modo de jogo “Aleatório” .................................................................. 57

5.7.10 Tela de pergunta do modo “Aleatório” ......................................................... 58

5.7.11 Tela de relatório .............................................................................................. 58

5.7.12 Tela de retorno ao usuário quando não há respostas ................................ 59

6 RESULTADOS ......................................................................................................... 60

6.1 MATERIAIS E MÉTODOS ..................................................................................... 60

6.2 AVALIAÇÃO DO TESTE COM O APLICATIVO WEBPORTS ............................... 67

6.2.1 Tela de cadastro ............................................................................................... 67

6.2.2 Tela para efetuar login ..................................................................................... 69

6.2.3 Tela de login ..................................................................................................... 70

6.2.4 Tela de apresentação ....................................................................................... 71

7 DISCUSSÃO E CONCLUSÃO ................................................................................. 73

REFERÊNCIAS ........................................................................................................... 75

GLOSSÁRIO ............................................................................................................... 79

APÊNDICE A .............................................................................................................. 80

APÊNDICE B .............................................................................................................. 83

16

1 INTRODUÇÃO

A tecnologia aliada a virtualização pode ser atualmente, caracterizada como

conquista essencial e intrínseca ao conhecimento, que expõem a junção de um

ambiente abstrato ao real, com a funcionalidade da criação de um movimento de

incremento de informações.

Surge a consideração de que atender às necessidades culturais, através dos

avanços tecnológicos, é realizável e notório na sociedade contemporânea. A lógica

da tecnologia em evolução com as ações lúdicas, que remetem a uma comunicação

visual, implementa uma experiência de aprendizado e evolução do conhecimento:

resulta por implicar em uma atividade de entretenimento e divertimento para os

indivíduos envolvidos.

A questão na necessidade de despertar a sensibilidade para perceber a existência de gerações de indivíduos que nasceram e se desenvolvem dentro de uma condição existencial que marcada pela velocidade, pela fluidez dos referenciais da qual a lógica determinista da cultura do impresso não dá conta, em caráter exclusivo. Assim diante desta subjetividade pós-moderna permeada pelo caráter lúdico, é preciso estabelecer nova sinergia entre as tecnologias audiovisuais e a cultura do impresso. (ARANHA, 2006, p.109).

Os jogos sob a perspectiva do entretenimento, segundo Koster (2003),

podem ser considerados como uma representatividade da evolução do cognitivo,

onde o indivíduo busca o divertimento, por vezes como distração, e como

consequência obterá o acrescer do aprendizado.

O porto da cidade Santos, atualmente denominado o principal da América

Latina, contribui grandemente para a história do Brasil, é responsável por diversos e

importantes processos de importação e exportação, sua expansão até os dias de

hoje é motivo de reconhecimento e desenvolvimento econômico para o país. É

também responsável por estabelecer uma grande cultura de colaboradores e

profissionais, que necessitam obter como requisito primordial, os conhecimentos

técnicos e teóricos sobre os procedimentos e tecnologias que envolvem a área

portuária.

A ideia de criar uma aplicação móvel para um quiz abordando os processos

portuários tem origem na carência da efetivação de aprendizado, e medição dos

17

níveis de conhecimento no ambiente portuário e acadêmico, pretendendo avaliar a

população e sua ciência acerca do porto da cidade de Santos.

1.1 JUSTIFICATIVA DO TEMA

No ambiente portuário, pode-se notar uma grande diversidade de

profissionais, que apresentam conhecimento técnico e teórico sobre as rotinas

portuárias, entretanto muitos não possuem todo o preparo para a obtenção de

procedimentos qualificados sobre a área em questão, isso ocorre devido a muitas

razões, pode-se citar em alguns casos a falta de triagem e seleção de profissionais

adequados, bem como o baixo grau de instrução dos mesmos.

Partindo desta possibilidade, o projeto em questão foi desenvolvido sob a

justificativa de proporcionar conhecimento, acerca de informações relacionadas aos

processos portuários, além de priorizar a intenção de oferecer fundamentos que

abordam a área. Através da interatividade de um quiz, pretende-se colaborar com o

conhecimento sobre o porto, de modo lúdico, aos usuários interessados pela área.

A relevância do estudo está em desenvolver um aplicativo para dispositivos

móveis, até este momento não oferecido, tendo como principal objetivo estimular o

aprendizado relacionado aos processos realizados no porto de Santos, por meio de

uma interação fácil e atrativa.

1.2 PROBLEMAS DA PESQUISA

Os processos portuários e seus detalhamentos técnicos necessitam de

profissionais capacitados para a execução de seus procedimentos, pode-se

observar que alguns profissionais não detêm conhecimentos técnicos em suas áreas

de atuação. O problema está relacionado ao quanto o aplicativo contendo questões

relacionadas ao porto de Santos, poderá auxiliar os estudantes e profissionais, por

solucionar a questão da falta de conhecimento sobre as operações do porto de

Santos.

18

1.3 OBJETIVOS

Com o propósito de proporcionar com clareza uma abordagem a respeito

dos objetivos deste projeto, estes foram divididos em objetivo geral e objetivos

específicos e serão apresentados a seguir:

1.3.1 Objetivo geral

O objetivo deste trabalho é desenvolver um aplicativo para dispositivo móvel

visando contribuir com o estudo e aprendizado acerca dos processos e operações

relacionados ao porto de Santos.

1.3.2 Objetivos específicos

a) Proporcionar o conhecimento através de informações atualizadas e

relevantes sobre o Porto de Santos.

b) Compreender os processos de desenvolvimento e as linguagens de

programação utilizadas para a aplicação no formato quiz.

c) Possibilitar que a aplicação móvel no formato quiz, se aproxime com a

comunicação, por ter a pretensão de tornar a experiência produtiva.

d) Oferecer um formato visual agradável, que favoreça o aprendizado

sobre a área portuária.

1.4 PROCEDIMENTOS METODOLÓGICOS

Esta pesquisa caracteriza-se como: tecnológica e qualitativa. Tecnológica

por propor o desenvolvimento de um aplicativo baseado em perguntas e respostas,

e qualitativa por tratar a experiência do usuário, utilizando de técnicas de análise de

usabilidade.

Dentro do contexto sugerido pretende-se estudar as aplicações móveis já

existentes, pesquisas bibliográficas por meio de livros, artigos e sites que ofereçam

conteúdo relevante sobre o tema, conteúdos sobre a área de design e linguagens de

programação, bem como criar e desenvolver uma aplicação útil e prática, através da

plataforma Intel XDK.

19

1.5 ORGANIZAÇÃO DA MONOGRAFICA

Para que seja possível concretizar os objetivos apresentados, considera-se

a importância do desenvolvimento do projeto com a seguinte estrutura:

No capítulo dois será apresentado o histórico do porto da cidade de Santos e

seus trabalhadores.

O capítulo três apresenta uma análise sobre as atuais tecnologias para

dispositivos móveis, com a principal concentração nos aplicativos em formato de

perguntas e respostas (quiz). Também será apontada neste capítulo a proposta

oferecida, como diferencial para o projeto desenvolvido.

O capítulo quatro será referente à metodologia utilizada para a aplicação do

design e da codificação do aplicativo em questão.

No capítulo cinco será abordado o desenvolvimento do aplicativo WebPorts

e suas etapas, por meio de levantamentos de requisitos, sendo eles funcionais e não

funcionais, seus casos de uso e sua codificação através da plataforma Intel XDK.

O capítulo seis registra-se os resultados através dos testes realizados no

aplicativo móvel, pelos profissionais e indivíduos interessados pela área portuária.

No capítulo sete faz-se uma referência a conclusão da aplicação do projeto,

discorrendo sobre as obtenções dos objetivos estabelecidos primordialmente, bem

como as considerações finais.

20

2 O PORTO DA CIDADE DE SANTOS

Santos é considerada a principal cidade do litoral paulista e se estende por

uma área de 280,9 Km², tradicionalmente carrega uma bagagem histórica e

importância econômica para o país, além de possuir uma grande evolução

urbanística e abrigar o maior e mais influente porto da América Latina. (ORNELAS,

2008)

O porto da cidade de Santos é administrado pela Companhia Docas do

Estado de São Paulo (CODESP). A ANTAQ (Agência Nacional de Transportes

Aquaviários) indica que a localização do porto se estabelece no centro do litoral do

estado de São Paulo e distancia-se a dois quilômetros do oceano Atlântico,

limitando-se à ilha de São Vicente e Santo Amaro. (COMPANHIA DE DOCAS DO

ESTADO DE SÃO PAULO, 2016).

Segundo a Companhia de Docas do Estado de São Paulo- CODESP (2009,

p.25):

O marco oficial da inauguração do Porto de Santos é 2 de fevereiro de 1892, quando a concessionária entregou à navegação mundial os primeiros 260 metros de cais, na área até hoje denominada até hoje do “Valongo”. Nesta data atracou no novo e moderno cais o vapor "Nasmith", de bandeira inglesa.

A cidade de Santos, então passa a se destacar como um dos maiores

centros comerciais da América do Sul, onde se estabeleceu um grande número de

imigrantes que exerciam atividades ligadas ao porto e ao comércio. Surgiu também

a necessidade de instalações portuárias adequadas devido a expansão da cultura

do café e então, Santos passou a ser conhecida por abrigar o maior porto exportador

de café do mundo. (NEVES, 2005)

O crescimento da indústria do país sobreveio ao porto de Santos, que

passou a não suportar a grande quantidade de mercadorias. Ocorreram grandes

investimentos federais, como a extensão do cais, a ampliação dos armazéns, a

substituição das empilhadeiras fixas por automotivas e dos guindastes elétricos por

hidráulicos. Todos esses investimentos tiveram o objetivo de suportar tamanho

desenvolvimento no período. (PORTO GENTE, 2016)

21

Em 1969 é criada a Comissão Orientadora de Serviços Portuários de Santos

(Coseps), trazendo melhorias significativas por resultar no aumento da produtividade

do porto. Iniciou-se em 1977 no município de Guarujá, através da Petrobras, a

construção do maior terminal de contêineres. (PORTO GENTE, 2016). A CODESP,

em 1980, assumiu a administração do porto. (COMPANHIA DE DOCAS DO

ESTADO DE SÃO PAULO, 2009).

Mudanças estruturais no porto foram decorrentes dos avanços ao longo dos

anos; surgem os retroportos e os guindastes para contêineres, trazendo eficiência

no transporte das cargas. Logo a paisagem urbana e portuária sofrem mudanças

devido à movimentação das pilhas imensas de contêineres que passam a ocupar os

pátios na área do porto e ao seu redor. Algumas mudanças, contudo, acarretaram

em um grande dano: em 1990, como exemplo, a industrialização do município de

Cubatão resultou em poluição, prejudicando o meio ambiente e a saúde da

população local. Deslizamentos de solo nas encostas da Serra do Mar ocorreram

devido à destruição da mata Atlântica. Para controlar a poluição foi necessário o

governo, empresas e a comunidade se unirem. Cubatão, então, tornou-se modelo de

recuperação ambiental. (ORNELAS, 2008)

É notório ao analisar o passado e o presente, o crescimento e a evolução do

porto de Santos. Observa Pompéia e Serva (2010, p.43), em sua publicação:

O cenário mundial se transforma. Hoje, cresce incessantemente o comércio internacional e, com ele, a necessidade de mais espaço nos portos. Para esse fim, o Porto de Santos recebe investimentos privados e se moderniza.

Desde a sua fundação, o porto não cessou sua expansão, contribuindo com

todos os ciclos de crescimento econômico do país. No porto, são manipulados uma

diversidade de produtos em elevadas quantidades de pesagens, tais como: açúcar,

algodão, soja, adubo, trigo, carvão, sucos cítricos, granéis líquidos, veículos e etc.

O porto de Santos segue o código internacional para segurança de navios e

instalações portuárias, que aborda em termos físicos a necessidade de separar o

porto e a cidade na medida do possível. Nota-se, mesmo assim, que os moradores

22

associam o porto como grande parte da identidade da cidade de Santos. Vidal

(2002, p.20), salienta essa visão em seu estudo de caso sobre a cidade de Santos:

Se algumas cidades redefiniram as suas relações com o mar, a partir do afastamento do porto, „lançando mão‟ de sua identidade marítima‟, Santos ao contrário, reafirma-se como cidade portuária na memória de seus moradores, na sua configuração espacial e no tráfego de navios no Canal da barra, uma vez que abriga o maior porto do país, tanto pelo volume de carga transportada quanto pela sua abrangência geográfica.

Para Pompéia e Serva (2010, p. 34), a cidade de Santos abriga atualmente,

o mais importante porto da América Latina, onde faz do eixo Santos – São Paulo o

mais importante eixo econômico do Brasil:

[...] do Porto de Santos, parte o maior volume de exportações brasileiras para todo o mundo e que ali chega o maior volume de importações. Isso significa que o Porto de Santos representa, para o Brasil, o local onde o processo de globalização comercial mais se concentrou. E, como Santos é o porto de São Paulo, note que dali o processo de globalização se irradia para todo o país.

2.1 MUDANÇAS DE TRABALHO NO PORTO DE SANTOS

Em meados do século XX, na maioria dos portos do mundo, surgiu uma

forma de contratação de mão-de-obra que deu origem ao trabalho avulso, para a

realização de atividades de produção e fluxo de movimentação de embarcações nos

portos. Esse sistema era caracterizado por ações maleáveis de contratação da força

de trabalho, no qual a seleção dos trabalhadores era feita sem muitos critérios. Eram

eles escolhidos por comerciantes, donos de tapiches, armadores, capatazes, sendo

que estas contratações eram efetuadas através de afinidades por parte dos

contratantes. (SARTI, 1981)

Segundo Arantes (2005, p.91), o sistema de contratação no Brasil estava em

posse de agenciadores que comandavam e ditavam as formas de seleção dos

trabalhadores.

[...]'nas mãos' dos encarregados, e sua possibilidade de trabalho depende da decisão de outro indivíduo. Essa situação, associada ao fato de não haver barreiras à entrada de quem quer que seja na competição, define o comportamento dos portuários avulsos em um ambiente onde a competição faz parte de suas vidas.

23

Após a seleção, os trabalhadores exerciam suas atividades em coletivo sem

a competição que dominava a princípio. Para Gitahy (1992), era necessária força

física, habilidade e destreza, como requisitos para a realização das práticas do

ofício, o que caracterizou a identidade da categoria e a constituição de um orgulho.

Foi entre os estivadores, como comenta Arantes (2005), que se estabeleceu

a criação de identidades sindicais a fim de neutralizar o peso do mercado de

trabalho e do sistema que atuava na época para contratação, podendo assim o

sindicato, ter o controle de todo o processo de trabalho.

Os estivadores foram aprimorando suas atividades ao organizar o sistema

de escalas, introdução de novos trabalhadores na categoria e rodízios, de uma

maneira que então se estabeleceu uma forma de trabalho democrática.

A fundação do sindicato dos estivadores de Santos foi em 1930. Sua

principal função era a de controlar a mão-de-obra, ao distribuir as atividades e

controlar o revezamento entre os estivadores. O Estado participava através do

controle do sindicato que, por sua vez, decidiu a remuneração dos operários até os

anos 80. (BARROS, 2015)

Devido às novas tecnologias desenvolvidas e a crise de acumulação de

capital dos anos 70, se estabeleceu aos poucos algumas mudanças no cais do

porto, relacionadas à contratação de mão-de-obra e a gestão do porto, o que gerou

um processo de modernização a fim de diminuir a presença do Estado na relação

capital- trabalho e na administração dos portos. (BARROS, 2015)

A repercussão desta modernização na cidade de Santos gerou a demissão

de mais de cinco mil trabalhadores ligados a CODESP. Com a publicação da lei nº

8630 (Lei de Modernização dos Portos) do dia 25 de fevereiro de 1993, ficou

provado através das normas estabelecidas, a constituição de um símbolo da

modernização dos portos no país. (ORNELAS, 2008)

A significância desta lei para os trabalhadores pode ser refletida como um

rompimento do monopólio sindical quanto à distribuição de mão-de-obra no porto,

bem como a constituição de um Órgão de Gestão de Mão-de-Obra (OGMO), que se

caracteriza como um órgão a serviço dos operadores portuários.

24

2.2 TRABALHADORES PORTUÁRIOS

Ao analisar a história dos trabalhadores portuários pode-se notar um legado

de transformações e lutas, baseadas em suas culturas e razões de suas condições

humanas, necessárias para a existência da sua forma social.

Quanto aos aspectos culturais, Sahlins (2004) destaca que os indivíduos

utilizam a conduta cultural para criar suas ações e sua própria concepção no mundo,

e este por sua vez está em conformidade com elas. Ao se depararem com uma

transformação de cunho estrutural, estes indivíduos tendem a exteriorizar algumas

referências de sua cultura tradicional. Ao perceberem o mundo através de sua

própria cultura, podem considerar o seu modo de vida como o mais natural e correto.

O signo de trabalhador portuário, (onde se pode citar o cargo de estivador

como elucidação neste contexto) obteve sentido não pelo motivo de se executar as

atividades práticas do trabalho em si, mas principalmente com base nas

circunstâncias sociais formadas pelas ações do ofício, ou seja, suas culturas e

funções podem ser inerentes ao o que de fato movimenta seus comportamentos

neste ambiente, onde a administração dos processos de trabalho se objetivou pela

vinculação do sindicato ao Estado.

Segundo Gomes (2015), para os estivadores o sindicato representava muito

mais do que defender os interesses profissionais, ao citar:

Para os estivadores o sindicato era a bandeira simbólica de uma “profissão” que entendiam possuir, um espaço sagrado que devia ser defendido das ameaças externas a ele, um construtor de ordens culturais para moldar sua construção e ação no mundo, em outras palavras, as garantias da própria vida.

Diante desta realidade, onde novas normas são estabelecidas, muitas delas

devido à organização da mão-de-obra para uma nova realidade tecnológica,

estivadores sofreram com o impacto desta transformação, visto que suas atividades

anteriores não exigiam altos níveis de escolaridade, onde se bastava apenas a

experiência prática e manual.

25

Foi, portanto, perdida a liberdade e autonomia adquirida anteriormente, para

um novo padrão tecnológico e organizacional, vindos de uma expansão capitalista,

acompanhada de uma mudança nas distribuições das atividades, fazendo com que

exista a exigência de um trabalhador portuário renovado, participativo e com maiores

habilidades cognitivas, então se procura estabelecer uma nova cultura portuária.

(GOMES, 2015)

O homem tende a transformar os saberes em avanços tecnológicos. Os

conhecimentos dos trabalhadores passam a incorporar elementos tecnológicos por

meio de máquinas, ou seja, tais trabalhadores tendem a se ajustar às características

das máquinas. Para muitos trabalhadores e suas lideranças, a atual organização do

trabalho, que se caracteriza pelas novas tecnologias e por trabalhadores

multifacetados, se apresenta como algo que muito se difere da ordem cultural do

passado. (GOMES, 2015)

A transformação do processo de trabalho do porto, de crescente substituição

da mão-de-obra e de sua distribuição pelo emprego por máquinas e incorporações

de novas tecnologias, foi acompanhada por muita resistência e luta por parte dos

estivadores (BARROS, 2015). Por outro lado, proporcionou avanços quando se

considera a produtividade, o aumento de capitais e o crescimento cognitivo dos

envolvidos no domínio e ciência de tais tecnologias, através de buscas por

informações e treinamentos. Nota-se um cenário em que os atuais trabalhadores

necessitam assumir novas exigências como, por exemplo, a multifuncionalidade

para a ocupação dos cargos.

26

3 ESTADO DA ARTE

Para a elaboração deste projeto, foram necessárias pesquisas sobre outras

tecnologias baseadas em softwares educacionais em formato de perguntas e

respostas, que por sua vez serão descritas, para que então seja apresentado um

conceito, onde se espera obter um diferencial que poderá contribuir com as

necessidades do público-alvo.

3.1 SOFTWARE EDUCACIONAL BASEADO EM QUIZ

A palavra quiz apresenta como significado, para o dicionário de língua

inglesa Oxford, como uma prova de conhecimentos ou um breve teste informal dado

aos estudantes. Já o dicionário Cambridge define a palavra quiz como um jogo em

que é possível responder as questões.

No cenário atual nota-se que os softwares estão em constante evolução

onde os meios de comunicar alguma informação ou conhecimento se apresentam

cada vez mais diversificada e interessante.

Considera-se um software educacional quando se fornece ao usuário uma

experiência de relação de ensino e conhecimento. Pode-se notar que o que

caracteriza um software educativo, é por um lado a relação da apresentação de uma

teoria ou conteúdo de aprendizagem, juntamente com a possiblidade de eficiência

com que o usuário irá assimilar e construir o conhecimento sobre um determinado

assunto.

Um quiz é um exemplo de um software educacional que pode ser

considerado como um jogo de questionários, que possui a finalidade de testar os

conhecimentos sobre um determinado conteúdo. Pode ser apresentado como um

quiz educacional em que pode existir a competição entre usuários ou somente um

quiz com o intuito de informar ou oferecer conhecimento sobre um assunto ou tema,

sem que haja necessariamente uma competição.

27

3.2 CENÁRIO ATUAL- SOFTWARE PARA QUIZ

É possível notar uma diversidade de tipos de aplicativos na modalidade quiz,

para tanto se observou como exemplo, algumas aplicações disponíveis na loja on-

line Play Store do Google Play, que serão descritas a seguir:

3.2.1 Aplicativo Learn & Play

Trata-se de um tipo de aplicativo educativo que apresenta a possibilidade

de estudo de diversos idiomas para iniciantes, como o inglês, espanhol, alemão,

francês e etc. São fornecidos neste aplicativo a pronúncia e grafia de palavras de um

idioma desejado, a leitura e associação de uma palavra com a imagem, bem como o

alfabeto e verbos. É um quiz educativo e não possui uma competição entre usuários.

Na figura 1 é apresentada a tela das subcategorias referentes à categoria

chamada: Qual é a imagem?

Figura 1: Tela das subcategorias

Fonte: Aplicativo Learn & Play English, 2016

Na figura 2 é apresentada a tela de uma imagem com as opções de

respostas, referente à subcategoria “body parts” pertencente à categoria chamada:

Qual é a imagem?

28

Figura 2: Tela de uma questão

Fonte: Aplicativo Learn & Play English (2016)

3.2.2 Aplicativo Perguntados

Neste aplicativo, os usuários têm como meta vencer os desafios de

conhecimentos gerais, onde as questões são divididas entre seis categorias, são

elas: artes, esportes, entretenimento, ciências, geografia e história. São quatro

opções de respostas para cada questão, onde o usuário terá de escolher apenas

uma que considera correta.

Trata-se de um quiz competitivo, onde é possível a disputa entre os

usuários. O oponente que obter todos os seis personagens característicos de cada

categoria, será o vencedor.

Na figura 3 é apresentada a tela com uma imagem representada por uma

roleta que indicam as categorias. Cada categoria é caracterizada por uma imagem

específica. As categorias serão sorteadas de forma aleatória, após o usuário tocar

no botão Girar.

29

Figura 3: Tela da imagem que representa as categorias

Fonte: Aplicativo Perguntados, 2016

Na figura 4 é apresentada a tela de uma questão com opções de respostas

pertencentes à categoria Geografia.


Fonte: Aplicativo Perguntados, 2016

30

3.2.3 Aplicativo Questões OAB

Refere-se a um aplicativo para estudos voltado ao conhecimento, onde o

usuário poderá responder as questões de exames anteriores da Ordem dos

Advogados do Brasil (OAB).

É possível ao usuário escolher entre as 17 categorias disponíveis, que são

as áreas relativas ao direito, bem como o ano da prova da OAB, dessa forma poderá

responder ao questionário onde cada questão possui quatro opções de respostas.

A figura 5 apresenta a tela inicial do aplicativo Questões OAB. Nesta tela

estão disponíveis algumas categorias que o usuário poderá escolher que são

relativas às áreas específicas do direito.

Figura 5: Tela inicial e suas categorias

Fonte: Aplicativo Questões OAB, 2016

Na figura 6 é apresentada a tela de uma questão com opções de respostas

da categoria Filosofia do Direito, referente ao exame do ano de 2013.

31


Fonte: Aplicativo Questões OAB, 2016

3.3 UM QUIZ SOBRE A ÁREA PORTUÁRIA- WEBPORTS

Procurou-se desenvolver neste projeto, um software interativo em formato

quiz, com questões e opções de respostas, com o foco educativo que até o

momento deste trabalho, não foi desenvolvido para os trabalhadores e estudantes

que necessitam de informações e conhecimento sobre os processos relacionados ao

porto de Santos.

Esta aplicação caracteriza-se principalmente pela finalidade de proporcionar

a aquisição de conhecimento de uma forma clara, atrativa e eficiente, por meio do

uso de dispositivos móveis. Este quiz surge como um instrumento complementar e

didático, que poderá ser atualizado e orientado para as novas técnicas e

informações que poderão surgir sobre a área portuária.

3.4 PRINCIPAIS DIFERENÇAS ENTRE OS APLICATIVOS.

Algumas diferenças podem ser comparadas ao analisar os aplicativos

citados com o aplicativo a ser desenvolvido WebPorts, como por exemplo, o sistema

operacional e os idiomas disponíveis para cada aplicação. Na tabela 1 são

32

demonstrados quais sistemas operacionais são utilizados para cada aplicação

móvel:

Tabela 1: Sistemas operacionais de cada aplicativo pesquisado.

Fonte: App Store da Apple, Google Play e Microsoft, 2016

Na tabela 2, são apresentados os principais idiomas disponíveis para cada

aplicativo analisado:

Tabela 2: Idiomas disponíveis para cada aplicativo pesquisado.

Fonte: Aplicativos Learn & Play, Perguntados, Questões OAB e WebPorts, 2016

Ao confrontar quanto às funcionalidades dos aplicativos aqui pesquisados

com a aplicação a ser desenvolvida neste projeto, foi possível observar as principais

diferenças:

a) O aplicativo Learn & Play English apresenta a informação sobre o acerto

ou erro de uma questão durante a execução da mesma, no entanto, a aplicação

WebPorts além de oferecer similar funcionalidade, também apresenta uma relação

informativa contendo a quantidade de acertos e erros do usuário, com base no total

das questões respondidas.

b) O aplicativo Perguntados é um quiz inteiramente competitivo, e em um

determinado momento o usuário pode ser induzido a comprar pacotes para dar

continuidade ao jogo. Já o aplicativo WebPorts não tem como ênfase o lucro ou a

competição, sendo uma aplicação destinada completamente à obtenção de

conhecimento.

Sistema Opercional Learn & Play English Perguntados Questões OAB WebPorts

Android x x x x

IOS x

Windows Phone

Idiomas Learn & Play English Perguntados Questões OAB WebPorts

Português x x x x

Inglês x x

Espanhol x x

33

c) O aplicativo Questões OAB e WebPorts são semelhantes por apresentar

conteúdos informativos e educacionais, ambos apresentam seu conteúdo com

clareza, porém o primeiro apresenta somente uma forma de estudo, que se dá ao

escolher a categoria e o ano do exame da OAB, enquanto que o aplicativo WebPorts

disponibiliza dois modos de estudo (Aleatório e Estudo), onde o usuário terá

autonomia de escolher qual desejar.

Ao comparar os tipos de aplicativos existentes no formato quiz, nota-se uma

maior prevalência dos tipos educativos que por sua vez instigam a competição,

porém este trabalho foi baseado em quizzes integralmente educativos sem que haja

competição entre os usuários, onde se espera com isso, melhor qualificar os

resultados através da transmissão do conhecimento de uma maneira clara e

objetiva.

34

4 METODOLOGIA

Neste capitulo serão apresentadas as tecnologias utilizadas para a

construção deste projeto, onde serão descritos os métodos e ferramentas utilizados

para o desenvolvimento do aplicativo WebPorts.

4.1 LINGUAGENS DE PROGRAMAÇÃO

Uma linguagem de programação, de acordo com Puga e Rissetti (2009), é

formada de palavras, denominadas palavras-chave, que agrupadas em frases,

chamadas estruturas de programação, produzem um determinado significado.

Sendo assim, um programa consiste de palavras-chave e estruturas de

programação, organizadas de forma compreensível ao ser humano. São diversos os

tipos de linguagem utilizados para o desenvolvimento de aplicações, variando de

acordo com a tarefa que se pretende executar.

4.1.2 Html

Os documentos apresentados em uma página web encontram-se no formato

de texto HTML (Hyper-Text Markup Language) que é uma linguagem simples, com

uma série específica de tags que permitem a formatação de dados de forma que

possam ser visualmente atrativos quando visualizados através de um navegador

(SHARMA, VIVEK e RAJIV, 2000). Sua finalidade tem sido melhorar a linguagem

oferecendo suporte para as mais recentes multimídias, enquanto a mantém

facilmente legível aos seres humanos e compreendida por computadores e outros

dispositivos.

4.1.3 Css

A CSS, acrônimo de Cascading Style Sheets, ou em português, folha de

estilos, é uma tecnologia do W3C, ou World Wide Web Consortium, responsável por

desenvolver padrões web, que permite a especificação e apresentação dos

elementos em uma página web, como por exemplo, fontes, cores, espaçamentos,

entre outros. Uma folha de estilos pode ser incorporada fora da XHTML ou na

HTML, diretamente na seção “head”, que corresponde ao cabeçalho da página,

utilizando o elemento style, responsável por definir características relacionadas ao

35

estilo da página (DEITEL, 2008). O CSS (Cascading Style Sheets) é utilizado para

definir a apresentação visual dos elementos contidos no código HTML.

4.1.4 JavaScript

Para a criação de páginas web dinâmicas, segundo Deitel (2008), são

utilizados scripts, através do JavaScript. A linguagem apresenta como característica

principal sua alta portabilidade, contando com duas finalidades: introduzir a criação

de script no lado do cliente, tornando as páginas web mais dinâmicas, e servir de

base para a criação de scripts no lado servidor. Jorge (2004) define JavaScript como

uma linguagem de fácil assimilação e aprendizado, que permite o usuário final

controlar seus programas de maneira eficaz, e aponta scripts como os responsáveis

por preencher uma lacuna deixada pelas linguagens de programação.

4.1.5 Php

O PHP é uma tecnologia de código aberto que conta com o apoio de uma

grande comunidade de usuários e desenvolvedores. É independente de plataforma,

havendo implementações para todos os principais sistemas operacionais, como

UNIX, Linux, Mac e Windows, e também aceita muitos bancos de dados, como o

MySQL. É uma linguagem utilizada para gerar conteúdo dinâmico, possibilitando

uma interação com os usuários através de formulários, parâmetros da URL e links.

(Deitel, 2008, p.462).

4.2 BANCO DE DADOS

Um banco de dados pode ser definido como uma coleção de dados

relacionados de diferentes tamanhos e complexidade variada. Pode ser gerado e

mantido manualmente, ou pode ser automatizado, que por sua vez, é criado e

mantido tanto por um grupo de aplicativos, quanto por um sistema gerenciador de

banco de dados, também conhecido como SGBD (Sistema de Gerenciamento de

Banco de Dados). (ELMASRI, NAVATHE, 2005)

Em se tratando de um SGBD (Sistema de Gerenciamento de Banco de

Dados), Elmasri, Navathe (2005) descreve como uma coleção de programas que

torna possível a criação e manutenção de um banco de dados, ou, ainda, como um

36

sistema de software que atende a um determinado propósito, facilitando os

processos de construção, definição, manipulação e compartilhamento de bancos de

dados. O processo de armazenar os dados em determinada mídia controlada pelo

SGBD (Sistema de Gerenciamento de Banco de Dados) é denominado construção.

A definição implica em especificar os tipos, estruturas e restrições para os dados

que serão armazenados em um banco de dados. A manipulação apresenta funções

como pesquisas em bancos de dados e atualização. Por fim, o compartilhamento

permite o acesso de múltiplos usuários ao banco de dados. Segundo Sharma

(2001), em um banco de dados relacional, os dados são organizados através de

tabelas, formadas por colunas e linhas. Para especificar as tabelas, informações e

os dados em um banco é necessário utilizar comandos SQL.

A SQL, ou Structured Query Language, em português, Linguagem de

Consulta Estruturada, é a linguagem padrão e mais conhecida no mundo para

interagir com um banco de dados. A tecnologia Java fornece uma maneira padrão

para realizar a conexão com um banco de dados e front-ends, e enviar instruções

SQL, através de uma API chamada JDBC (Java Database Connectivity). Uma API,

acrônimo de Application Programming Interface, é uma interface de programa de

aplicativos, sendo a JDBC caracterizada por apresentar uma série de interfaces, que

possibilitam a conexão e a manipulação de um banco de dados, tornando dessa

forma possível inserir, atualizar e acessar dados. (SHARMA, 2001).

O MySQL é o banco de dados de código aberto mais popular no mundo,

devido a sua confiabilidade e bom desempenho, sendo o banco de dados mais

utilizado em se tratando de aplicações baseadas na web. (MYSQL, 2015)

4.3 ANDROID

Segundo GOOGLE INC (2012), Android é uma plataforma para dispositivos

móveis, criado para diminuir custos e melhorar a experiência do usuário nesses

dispositivos. O Android foi idealizado desde o início para ser um sistema com código

fonte open source, facilitando a adequação a diversos dispositivos diferentes e

personalização do conteúdo. Pelo fato de ser baseado no Linux, ele também possui

um repositório de aplicativos, onde todos os aplicativos públicos a serem instalados

nos sistemas, podem ser visualizados e adquiridos.

37

Na figura 7 é representada a disposição das camadas da arquitetura

Android:

Figura 7: Camadas da arquitetura do Android

Fonte: Google, 2016

A arquitetura do Android está divido em camadas, permitindo ao

programador ou à empresa de desenvolvimento de dispositivos customizar apenas a

parte que lhe será necessária.

As camadas da arquitetura do Android, da externa para a interna, são:

a) Aplicações;

b) Framework de aplicações;

c) Bibliotecas;

d) Tempo de Execução Android;

e) Kernel do Linux.

38

4.3.1 Camada Aplicações

A camada de “Aplicações” contém todas as aplicações já compiladas e

instaladas, prontas para serem executadas. Essas aplicações podem ser criadas

usando as APIs do Android juntamente com a linguagem de programação Java.

4.3.2 Camada Framework de aplicações

A camada do “Framework” de aplicações contém todas as APIs necessárias

para o desenvolvimento das aplicações voltadas para o Android.

As aplicações nativas da plataforma são desenvolvidas utilizando essas

mesmas APIs, permitindo ao programador alterar, se necessário, alguma

funcionalidade contida no núcleo de uma aplicação nativa, desde que o usuário

permita o acesso de uma aplicação à outra.

4.3.3 Camada Bibliotecas

A camada de “Bibliotecas” contém todas as bibliotecas necessárias para

manuseio de aplicações terceiras como, por exemplo, uma biblioteca de sistema C,

bibliotecas de reprodução e gravação de áudio e vídeo, bibliotecas de uma engine

de gráficos 2D e 3D, bibliotecas para manuseio de bancos de dados SQLite e

bibliotecas de renderização de vetores e bitmaps.

4.3.4 Camada Tempo de Execução Android

A camada de “Tempo de Execução” Android contém as bibliotecas do núcleo

da linguagem Java, necessárias para execução das aplicações, e a máquina virtual

Dalvik, otimizada para dispositivos móveis onde cada aplicação é executada como

uma nova instância na máquina virtual.

Segundo GOOGLE (2012), a máquina virtual Dalvik, presente nesta camada,

depende da camada Kernel do Linux para tarefas mais próximas ao hardware, como

gerenciamento de threads e de memória.

39

4.3.5 Camada Kernel do Linux

A camada do “Kernel” do Linux contém o núcleo do Android, usando a

versão 2.6 do Linux para tarefas como gerenciamento de processos, de rede e

drivers. O Kernel também serve como camada de abstração entre o hardware do

aparelho e o resto da plataforma.

4.3.6 Versões do Android

De acordo com GOOGLE INC (2012), de tempos em tempos, são

disponibilizadas novas versões do Android, normalmente contendo novos recursos,

melhoria de desempenho e correção de bugs e problemas. Curiosamente, a partir da

versão 1.5 do sistema, cada versão tem um codinome representando um nome de

um doce e em ordem alfabética.

4.4 HTML 5 LOCAL STORAGE

Considera-se a API Web Storage do HTML5 como um cookie com muito

espaço de armazenamento, onde os dados não são transitados a cada requisição de

página e não possui data para expirar.

Ela se divide em dois tipos: sessionStorage e localStorage:

a) A sessionStorage ficará disponível apenas para a janela que criou o

dado até que seja fechada (por exemplo, quando a sessão for encerrada).

b) A localStorage, por outro lado, não depende da sessão. Ao “setar” um

dado no local storage este ficará automaticamente disponível para qualquer janela.

Além disso, permanecerá disponível até que seja deletada pelo programador do site

ou pelo o usuário. Os dados permanecerão mesmo após o usuário fechar a janela

ou reiniciar o computador.

4.5 INTEL XDK

Entende-se por Intel XDK como um ambiente para desenvolvimento de

dispositivos móveis com HTML 5, possibilitando a criação de aplicações híbridas

para os sistemas operacionais Android e IOS, fazendo com que seja possível

submeter para diferentes lojas de aplicativos.

http://dev.w3.org/html5/webstorage/

http://pt.wikipedia.org/wiki/Cookie

40

A figura 8 apresenta o ambiente de desenvolvimento oferecido pela Intel

XDK.

Figura 8: IDE da Intel

Fonte: Mouta, 2015

Ele foi desenvolvido com o objetivo de ajudar o desenvolvedor nas criações

de aplicativos que possam ser disponibilizados nas principais lojas e executados na

maioria dos dispositivos existentes. As aplicações feitas com o XDK são híbridas, ou

seja, são aplicações feitas em HTML5 que possuem a capacidade de acessar os

recursos nativos do dispositivo. Isso é possível através de uma conexão entre a

aplicação HTML5 e os recursos do dispositivo. Essa conexão é chamada de

framework. (MOUTA, 2015)

4.6 ENGENHARIA DE SOFTWARE

A engenharia de software é uma disciplina da engenharia que se ocupa de

todos os aspectos da produção de software, desde os estágios iniciais de

especificação do sistema até a manutenção desse sistema, depois que ele entrou

em operação (SOMMERVILLE, 2003).

Modelos de processos de softwares foram criados para tornar a atividade de

desenvolvimento de software menos caótica e visam organizar o desenvolvimento

utilizando técnicas e métodos (SOMMERVILLE, 2008).

41

O objetivo da engenharia de software é fornecer uma base para o

desenvolvedor e obter um software de qualidade, utilizando técnicas que apoiam a

especificação do projeto e evolução de programas, (SOMMERVILLE, 2011).

Os processos de software seguem modelos, “alguns são receitas do

caminho que o desenvolvimento de software deveria seguir e outros são descrições

do modo como o desenvolvimento do software é realmente feito.” (PFLEEGER,

2004).

Para Sommerville (2011), cada modelo fornece informações parciais sobre o

processo. Um modelo de processo genérico é uma abstração que explica o

desenvolvimento, permitindo a ampliação e adaptação do mesmo. Pressman (2011)

define como a forma em que os métodos, ações e tarefas são organizados

cronologicamente e sequencialmente.

42

5 DESENVOLVIMENTO

Neste capítulo serão apresentados o conceito da criação geral do sistema e

os processos de desenvolvimento para a realização da aplicação WebPorts, são

eles: regras de negócios, análise de requisitos, casos de uso e estrutura de banco

de dados.

5.1 DESCRIÇÃO GERAL DO APLICATIVO WEBPORTS

O aplicativo WebPorts foi desenvolvido para ser implementado em qualquer

aparelho com o sistema operacional Android, com armazenamento de dados no

sistema de gerenciamento de banco de dados MySQL e LocalStorage, onde

pretende-se trabalhar com todas as funcionalidades de modo on-line e sem custos.

Primeiramente a aplicação atua verificando se o usuário tem conexão com a

internet. Para a primeira experiência do usuário, será necessário um cadastro com o

oferecimento do endereço de e-mail e criação de uma senha. Uma vez cadastrado,

uma tela inicial com as informações do usuário é apresentada, com os resultados

das interações realizadas e a opção de “jogar”. Na tela “jogar” há dois modos de

interação para o início do quiz: Estudo e Aleatório.

5.1.1 Modo de Estudos

No modo Estudo, o usuário poderá escolher entre as categorias existentes,

dentro de cada categoria existem no máximo trinta e uma questões disponíveis,

onde cada questão possui quatro opções de respostas. Não existe limite de tempo

para respondê-las. O usuário terá a opção de escolher uma nova questão dentro da

categoria em que escolheu ou optar por uma nova categoria. Se a questão

respondida estiver incorreta, o usuário terá a opção de responder novamente a

mesma questão, escolher outra categoria ou ir para a próxima.

5.1.2 Modo Aleatório

Neste modo o usuário irá responder ao maior número de questões

aleatórias, estipulado pelo sistema, por um período de três minuto, ao final do

43

tempo, o usuário será notificado sobre os acertos e erros das questões respondidas

por meio de um relatório final.

5.2 CATEGORIAS E QUESTÕES

As categorias do quiz foram definidas através da matriz do curso de Gestão

Portuária, que por sua vez foi idealizado junto ao Ministério da Educação (MEC),

utilizando a Classificação Brasileira de Ocupações (CBO) do Ministério do Trabalho

e Emprego (MET). A CBO caracteriza-se por um documento que identifica e nomeia

os títulos e representa as características das ocupações do mercado de trabalho

brasileiro.

As categorias e perguntas contidas no aplicativo foram elaboradas pelos

alunos do curso de Gestão Portuária sob a orientação dos professores. Além disso,

um estudo das rotinas operacionais realizadas no porto de Santos analisadas para

melhor compreensão destas atividades.

5.3 REGRAS DE NEGÓCIOS

Segundo Rosca (1997), as regras de negócios são “uma nova categoria de

requisitos do sistema que representam decisões sobre como executar o negócio, e

são caracterizadas pela orientação do negócio e sua tendência às mudanças”.

Na tabela 3 demonstram-se as principais regras de negócio para a aplicação

desenvolvida:

Tabela 3: Relação das Regras de Negócio (RN)

RN-01 O cadastro será aceito apenas se o e-mail fornecido for legítimo.

RN-02 Os resultados oferecidos pelo aplicativo serão baseados apenas pelas respostas da primeira tentativa.

RN-03 O aplicativo aceitará apenas uma resposta para cada questão.

Fonte: Aplicativo WebPorts, 2016

5.4 ANÁLISE DE REQUISITOS

Os requisitos são caracterizados através da percepção das principais

necessidades que os desenvolvedores de sistemas, em conjunto com o usuário ou

44

cliente devem satisfazer para que se obtenha um software adequado e que atinja

seu objetivo. O autor Rezende (2005) observa em seu livro:

O sucesso no desenvolvimento de um projeto, sistema ou software, depende fundamentalmente do levantamento de dados, em face dessa atividade ser a base que permitirá ao pesquisador ou desenvolvedor tirar conclusões sobre situações, problemas ou fenômenos e, assim, sugerir propostas que possam contribuir para a solução de problemas, criação de sistemas ou melhorias dos assuntos investigados. (REZENDE, 2005, p.159)

Nesta etapa ocorre o levantamento dos requisitos necessários para a

elaboração de Casos de Uso, sendo a documentação responsável por sustentar a

construção do software.

Os requisitos podem ser classificados em duas grandes categorias:

requisitos funcionais e requisitos não funcionais.

5.4.1 Requisitos Funcionais (RF)

Os requisitos funcionais definem as funcionalidades do sistema, ou seja, o

que o sistema irá fazer quando estiver pronto.

A tabela 4 apresenta a relação obtida por meio dos requisitos funcionais

analisados:

Tabela 4: Relação dos Requisitos Funcionais (RF)

RF-001 Analisar conexão:

O usuário deve ter conexão com a Internet.

Prioridade: ■ Essencial □ Importante □ Desejável

RF-002 Autenticar usuário:

Este requisito faz a autenticação do usuário através de seu login e senha e em seguida exibe as opções, com as funcionalidades permitidas a ele.


RF-003 Manter registro:

Este requisito mantém o registro das questões já respondidas pelo usuário.


45

RF-004 Visualizar questões Certas e Erradas:

Este requisito mantém o registro das questões respondidas corretamente e as respondidas de forma errônea.



5.4.2 Requisitos Não Funcionais (RNF)

Os requisitos não funcionais estão diretamente ligados à funcionalidade de

um sistema, que por sua vez declaram as características e restrições relacionadas

às suas funcionalidades.

A tabela 5 apresenta os requisitos não funcionais do sistema desenvolvido:

Tabela 5: Relação dos Requisitos não Funcionais (RNF)

RNF-001 Portabilidade O sistema deve ser compatível com os sistemas operacionais Android a partir da versão 4.4.

Prioridade: □ Essencial ■ Importante □ Desejável

RNF-002 Desempenho

O sistema deve garantir que o tempo de retorno não seja maior que 20 segundos.

Prioridade: □ Essencial ■ Importante □ Desejável

RNF-003 Segurança

O sistema deve dispor de mecanismos de segurança para a autenticação do usuário e controle de acesso a conteúdo e funcionalidades do sistema.


RNF-004 Usabilidade

O sistema deve prover o usuário com interface simples e intuitiva, de fácil navegação para facilitar o uso do mesmo por parte dos usuários.


RNF-005 Apresentação de interface gráfica

O sistema deve fazer uso, exclusivamente, da língua Portuguesa

46

para todo e qualquer texto apresentado no portal de conteúdo.


RNF-006 Disponibilidade

O sistema deverá estar disponível aos usuários 24 horas por dia e 7 dias por semana.



5.4.3 Requisitos de Interface com o Usuário (RIU)

Na tabela 6 são apresentadas as ações e características que a interface

deverá disponibilizar ao usuário:

Tabela 6: Relação dos Requisitos de interface com o usuário (RIU)

RIU-001 O sistema deverá apresentar uma tela com informações sobre a aplicação

RIU-002 O sistema deverá apresentar uma caixa de texto para digitação do login e senha.

RIU-003 O sistema deverá apresentar uma tela com uma lista de questões respondidas.

RIU-004 O sistema deverá apresentar uma tela com uma lista de questões respondidas, tanto as certas quanto as erradas.


5.5 CASOS DE USO

Os casos de uso representam as principais funcionalidades, onde cada uma

delas mostra a ligação do sistema com os atores e agentes externos, ou seja,

descreve a interação do ponto de vista do usuário. Para Pressman e Lowe (2009,

p.57), os casos de uso são como um “contrato de comportamento” onde este

contrato define como um ator usa uma aplicação para realizar alguma meta.

“Basicamente, um caso de uso captura as interações que ocorrem entre os

produtores e consumidores da informação e do próprio sistema.”

47

5.5.1 Diagrama de Caso de Uso

O diagrama de caso de uso (DCU) possui a função de apresentar, de forma

gráfica, como um sistema irá funcionar. Na figura 9, é apresentado o diagrama de

caso de uso do aplicativo WebPorts.

Figura 9: Diagrama de caso de uso


5.5.2 Definição de papéis

Segundo Bezerra (2006), os atores são elementos externos que interagem e

trocam informações com o sistema, são denominados externos, pois não fazem

parte do sistema.

A tabela 7 apresenta os atores da aplicação e seus casos de uso.

48

Tabela 7: Identificação dos atores e seus casos de uso

Atores Descrição

Usuário

Cadastrar Usuário

Buscar Informações

Jogar no modo Aleatório

Jogar no modo Estudo

Recuperar Login

Administrador Atualizar conteúdo dos questionários


5.5.3 Identificação dos casos de uso

A tabela 8 apresenta a descrição dos casos de uso e suas identificações:

Tabela 8: Identificação dos casos de uso

Caso de uso Descrição

UC001 Cadastrar Usuário

UC002 Buscar Informações

UC003 Jogar no modo Aleatório

UC004 Jogar no modo Estudo

UC005 Recuperar Login Fonte: Aplicativo WebPorts, 2016

5.5.4 Descrição dos casos de uso

Nas tabelas 9 a 13, são apresentados os detalhes dos casos de uso

identificados:

Tabela 9: Especificação do caso de uso 1

Caso de uso Cadastrar Usuário (UC001)

Ator Usuário

Pré-condição Usuário cria sua conta através da tela de cadastro

Fluxo principal 1- Aplicativo apresenta os campos que deverão ser preenchidos, que são: Nome (obrigatório); Empresa (opcional); E-mail (obrigatório); Senha (obrigatório); Confirmar senha (obrigatório).

2- Usuário submete os dados após o preenchimento dos campos.

3- Mensagem é apresentada ao usuário: “Cadastro realizado com sucesso!”. (ME002)

Fim do caso de uso.

Fluxo alternativo Usuário deseja efetuar o login sem primeiramente realizar o cadastro.

49

Pós-condição Usuário cadastrado. Fonte: Aplicativo WebPorts, 2016


Caso de uso Buscar informações (UC002)

Ator Usuário

Pré-condição Usuário ter realizado o cadastro

Fluxo principal 1- Usuário obtém informações da conta. 2- Usuário obtém ajuda sobre a utilização do quiz. 3- Usuário obtém informações sobre o ranking.

Fim do caso de uso.

Fluxo alternativo Usuário seleciona a opção sair da aplicação.

Pós-condições O sistema disponibiliza os modos de jogo. Fonte: Aplicativo WebPorts, 2016


Caso de uso Jogar no modo Aleatório (UC003)

Ator Usuário


Fluxo principal Fluxo principal: 1- O usuário seleciona o modo aleatório. 2- O usuário inicia o quiz. 3- O usuário responde o máximo de pergunta em 3

minutos. Fim do caso de uso.


Pós-condição O quiz é finalizado. Fonte: Aplicativo WebPorts, 2016


Caso de uso Jogar no modo Estudo (UC004)

Ator Usuário


Fluxo principal 1- O usuário seleciona o modo estudo. 2- O usuário inicia o quiz. 3- O usuário visualiza as categorias existentes e escolhe

a categoria que deseja responder. 4- O usuário escolhe a quantidade de perguntas que

deseja responder. Fim do caso de uso.


Pós-condições O aplicativo disponibiliza outras opções de categoria. O quiz é finalizado.



Caso de uso Recuperar login (UC005)

Ator Usuário

Pré-condição Usuário ter realizado o cadastro do e-mail

Fluxo principal 1- O usuário clica no link “Esqueceu sua senha?“ 2- O usuário insere o e-mail no campo: Recuperar

50

senha. 3- Usuário recebe a mensagem: “Sua senha será

enviada para o seu e-mail”. (ME003) Fim do caso de uso.


Pós-condição O quiz é finalizado. Fonte: Aplicativo WebPorts, 2016

5.6 MODELO ENTIDADE DE RELACIONAMENTO

Desenvolveu-se após o levantamento de requisitos, um modelo conceitual

que permite orientar no desenvolvimento da aplicação, que fornecerá dados que

possuam relação entre si.

O Modelo Entidade de Relacionamento (MER), segundo Rodrigues (2015),

representa de forma abstrata a estrutura que possuirá o banco de dados da

aplicação. Obviamente, o banco de dados poderá conter várias outras entidades,

tais como chaves e tabelas intermediárias, que podem só fazer sentido no contexto

de no contexto de bases de dados relacionais. Na figura 10 são apresentadas as

tabelas de entidade relacionamento do projeto WebPorts:

Figura 10: Modelo Entidade de Relacionamento


51

5.7 TELAS DO APLICATIVO WEBPORTS

A seguir serão apresentadas algumas telas, (as demais telas encontram-se

no apêndice A), do aplicativo WebPorts, bem como suas funcionalidades.

A combinação das tecnologias de programação: HTML5, CSS, PHP,

JavaScript e banco de dados MySQL, proporcionou ao desenvolvimento do

aplicativo, uma performance mais dinâmica.

5.7.1 Tela principal

Na tela principal do aplicativo há duas opções: cadastro e login. Na opção

cadastro, no caso de primeira interação, o usuário deverá preencher os campos:

nome, e-mail e senha, conforme a figura 12, para a confirmação do cadastro uma

mensagem de “cadastro realizado com sucesso” na parte inferior da tela é

apresentada, conforme a figura 13. Na opção de login, os campos para identificação

e autenticação do usuário no aplicativo são apresentados, conforme a figura 11.

Figura 11: Tela Principal


52

Figura 12: Tela de cadastro e login


Figura 13: Tela de cadastro realizado com sucesso


5.7.2 Tela de ajuda

A tela de ajuda fornece informações sobre os dois modos de jogo: “Aleatório”

e “Estudo”. A figura 14 apresenta a tela de ajuda.

53

Figura 14: Tela de ajuda


5.7.3 Tela modo de jogo “Estudo”

Na tela “Estudo” o sistema apresenta as informações sobre o modo de jogo

“Estudo” e a opção de iniciar o jogo, conforme a figura 15. Neste modo o usuário

poderá escolher a categoria que desejar e não há limite de tempo para responder as

questões.

Figura 15: Tela de informações do modo “Estudo”


54

5.7.4 Tela de navegação por categorias do modo “Estudo”

Na tela de navegação por categorias do modo “Estudo” (figura 16), o

aplicativo apresenta em forma de categorias os assuntos relacionados ao porto, que

podem ser escolhidos pelo usuário conforme sua necessidade de estudo ou

interesse

Figura 16: Tela de escolha de categoria


5.7.5 Tela de navegação de perguntas do modo “Estudo”

Após selecionar a categoria (figura 16), a tela com as questões relacionadas

à categoria escolhida é apresentada, (figura 17). O sistema indica através de cores

o status das questões: respondidas corretamente, botões na cor verde claro; não

respondidas, botões na cor verde escura; respondidas incorretamente, botões na cor

vermelha.

55

Figura 17: Tela de perguntas modo “Estudo”


5.7.6 Tela de questões do modo “Estudo”

Na figura 18 é apresentado um exemplo da tela de questões. Nesta tela é

apresentada a questão a ser respondida e as opções de respostas em forma de

botões, somente uma opção dentre as 4 respostas poderá ser escolhida.

Figura 18: Tela de pergunta e opções de respostas


56

5.7.7 Tela de retorno para resposta incorreta do modo “Estudo”

Na figura 19 é apresentada a tela de retorno de resposta incorreta. Neste

caso, o usuário é informado que a questão está incorreta, o sistema então oferece

três opções: escolher outra categoria, escolher outra pergunta dentro da categoria

anterior ou tentar novamente.

Figura 19: Tela de erro modo “Estudo”


5.7.8 Tela de retorno de resposta correta do modo “Estudo”

Uma mensagem de retorno é apresentada nesta tela (figura 20), informando

ao usuário que a questão foi respondida corretamente e então o sistema apresenta

as próximas ações como opções para o usuário, que são: escolher outra categoria

ou escolher outra pergunta dentro da categoria respondida anteriormente.

57

Figura 20: Tela de resposta correta do modo ”Estudo”


5.7.9 Tela modo de jogo “Aleatório”

Nessa tela o sistema apresenta as informações sobre o modo de jogo

“Aleatório” e a opção de iniciar o jogo (figura 21). Diferentemente do modo “Estudo”,

neste modo o usuário terá tempo limite de três minutos, para responder as questões

que são disponibilizadas de forma aleatória pelo sistema.

Figura 21: Tela modo ”Aleatório”


58

5.7.10 Tela de pergunta do modo “Aleatório”

A tela de pergunta do modo “Aleatório”, assim como o modo “Estudo” que

apresenta a questão com as opções de respostas, apresenta adicionalmente um

cronômetro, na parte superior esquerda da tela, com o tempo limite de três minutos,

conforme figura 22. O ciclo de perguntas escolhida aleatoriamente pelo sistema,

prossegue até o final do tempo estipulado.

Figura 22: Tela de pergunta do modo “Aleatório”


5.7.11 Tela de relatório

Na figura 23 é apresentada a tela de relatório, informando a quantidade de

questões respondias, bem como a quantidade de respostas corretas e incorretas, as

respostas na cor vermelha são as incorretas e as de cor verde são as corretas.

59

Figura 23: Tela de relatório ao usuário


5.7.12 Tela de retorno ao usuário quando não há respostas

A figura 24 é representada por uma mensagem de que não houve respostas,

ou seja, quando o usuário não responde nenhuma questão. O sistema apresenta

botões de saída, com a opção de jogar novamente ou escolher os tipos de jogos.

Figura 24: Tela de retorno quando não há respostas


60

6 RESULTADOS

Neste capítulo serão apresentados os resultados do teste de usabilidade

realizado com o aplicativo WebPorts.

6.1 MATERIAIS E MÉTODOS

Para Matias (1995), no teste de usabilidade, é necessário observar a

interação dos usuários no mundo real ou sob condições controladas, onde os

avaliadores examinam os problemas identificados pelos usuários durante o uso e

analisam se a interface é adequada às tarefas executadas pelos usuários.

O teste de usabilidade foi realizado por onze alunos do 5º ciclo do curso de

Gestão Portuária da Faculdade de Tecnologia Rubens Lara, sendo que quatro são

profissionais portuários.

Os dispositivos móveis utilizados para o teste foram: um smartphone da

marca Samsung, com tela de 5.2 polegadas, versão Android 6.0; um smartphone da

marca Asos com tela de 5 polegadas, versão Android 5.1 e um tablet da marca

Samsung, com tela de 10.1 polegadas, versão Android 4.0.

Os participantes foram convidados a realizar as seguintes tarefas: Tarefa 1:

Fazer o cadastro e efetuar o login; Tarefa 2: Entrar no modo “Aleatório”; Tarefa 3:

Responder as questões dentro de três minutos.

Após a realização das tarefas, todos os participantes responderam ao

questionário on-line (apêndice B) disponibilizado através do Google, para o

levantamento das impressões dos participantes, quanto à interação com o aplicativo.

Segundo Barros (2003) a aplicação de um questionário para pesquisa se

caracteriza como uma técnica de grande utilidade mediante a um processo de

avaliação de interação, ou seja, com o questionário o avaliador pode obter

informações relevantes sobre o perfil do usuário e suas dificuldades de interação

com o sistema.

61

Para Oliveira (2013, p. 33), a aplicação do questionário tem como objetivo

“identificar o nível de satisfação do usuário com a usabilidade dos aplicativos

testados e a validade desse questionário.”.

A seguir serão apresentados os resultados demográficos e do teste de

usabilidade.

No gráfico 1, é apresentada a faixa etária dos participantes, onde 45,5% tem

idade acima de 31 anos e 36,4% tem idade entre 18 e 20 anos.

Gráfico 1: Captura de tela da resposta da questão 1

Fonte: Formulário Google, 2017

No gráfico 2, são apresentadas as horas semanais de uso da internet por

cada usuário. Dos 11 participantes 81,8% utilizam mais de 7 horas semanais e

18,2% utilizam a internet por menos de 7 horas semanais.



62

No gráfico 3, é apresentado o resultado da questão 3, onde 45,5%

concordam totalmente e 54,5% concordam, que foi fácil encontrar as informações

solicitadas, sendo que as opções “discordo totalmente” e “discordo” não foram

assinaladas.



No gráfico 4, é apresentado o resultado para a questão 4, onde 45,5% dos

usuários concordam totalmente e 45,5 % concordam com a afirmativa de que o

tempo utilizado para completar as tarefas foi adequado. Apenas 9,1% não

concordaram com a afirmação. A opção “discordo totalmente” não foi assinalada.



63

No gráfico 5, é apresentado o resultado para a questão 5, onde 54,5% dos

usuários concordam totalmente e 45,5% concordam, que foi fácil aprender a usar o

aplicativo. As opções “discordo totalmente” e “ discordo” não foram assinaladas.



No gráfico 6 é apresentado o resultado para a questão 6, onde 54,5% dos

usuários concordam totalmente e 45,5% concordam com a afirmação de que foi fácil

navegar nos menus e telas do aplicativo, sendo que as opções “discordo totalmente”

e “discordo” não foram assinaladas.



64


usuários concordam totalmente e 54,5% concordam que recomendariam o

aplicativo para outras pessoas, sendo que as opções “discordo totalmente” e

“discordo” não foram assinaladas.




usuários concordam totalmente e 81,8% concordam com a afirmação de que o

aplicativo é consistente, sendo que as opções “discordo totalmente” e “discordo” não

foram assinaladas.



65


usuários concordam totalmente e 72,7% concordam que usariam o aplicativo com

frequência, sendo que as opções “discordo totalmente” e “discordo” não foram

assinaladas.




usuários concordam totalmente e 63,6% concordam que conseguiram completar as

tarefas solicitadas com sucesso, sendo que 9,1% discordam totalmente da

afirmação. A opção “discordo” não foi assinalada.



66


usuários concordam totalmente e 63,6% concordam que gostaram de utilizar o

aplicativo, sendo que as opções “discordo totalmente” e “discordo” não foram

assinaladas.



No gráfico 12 é apresentado o resultado para a questão 12, nota-se que

36,4% dos usuários concordam totalmente e 63,6% concordam que os símbolos e

ícones são claros e intuitivos, sendo que as opções “discordo totalmente” e

“discordo” não foram assinaladas.



67


usuários concordam totalmente e 45,5% concordam que os textos do aplicativo são

fáceis de ler, sendo que as opções “discordo totalmente” e “discordo” não foram

assinaladas.



6.2 AVALIAÇÃO DO TESTE COM O APLICATIVO WEBPORTS

Durante o teste de usabilidade, foram encontradas algumas deficiências de

usabilidade no aplicativo, que foram reportadas pelos usuários durante a execução

das tarefas propostas. A seguir serão apresentados estes achados e as soluções

para cada problema.

6.2.1 Tela de cadastro

Após o usuário fazer o cadastro, uma mensagem de sucesso é apresentada

na tela. Por estar na parte inferior da mesma e o teclado do aparelho estar

disponível, a mensagem “cadastro realizado com sucesso faça o login”, não ficava

visível para o usuário (figura 25), causando dúvida sobre qual seria a próxima ação a

ser realizada.

68

Figura 25: Tela do erro na tela de cadastro


Como solução, a mensagem “cadastro realizado com sucesso faça o login”,

foi colocada na parte superior da tela (figura 26) com pedido de confirmação do

usuário. Esta solução torna a mensagem visível e consequentemente, a

compreensão da próxima ação a ser realizada durante a interação.

Figura 26: Tela de cadastro atualizada


69

6.2.2 Tela para efetuar login

Observou-se que na tela para efetuar o login, alguns usuários ficaram

confusos devido a cor dos botões “Login” e “Cadastro”. Uma vez realizado o

cadastro, a tela de efetuar login é apresentada. Nota-se que diferentemente da tela

de cadastro, na tela de login o botão “Login” não está na cor branca, o que sugere

uma função “desabilitada” (figura 27). Tal efeito provocou confusão à maioria dos

usuários, pois ficaram em dúvida se estavam na tela “Login” ou na tela “Cadastro”.

Figura 27: Tela do erro na tela de login


Na figura 28 é apresentada a solução para o problema anterior. Foi alterada

a cor do botão “Login”, para um tom mais claro em relação ao botão “Cadastro”, o

que se observa maior foco neste botão, permitindo melhor percepção da ação a ser

realizada.

70

Figura 28: Tela de login atualizada


6.2.3 Tela de login

Alguns usuários tiveram dúvidas em o que preencher no campo “Login”, se

seria o nome de cadastro ou o e-mail. Na figura 29 é apresentada a tela de login

antes da correção.

Figura 29: Tela do erro na tela de login

Fonte: Aplicativo WebPorts,2017

71

Como solução para o problema, mudou-se o nome do campo de “Login”

para “E-mail”, conforme figura 30.

Figura 30: Tela de login atualizada


6.2.4 Tela de apresentação

Durante a interação, os participantes tinham como tarefa utilizar o modo

“Aleatório” do aplicativo. Para tanto, bastaria que iniciassem a interação

selecionando o botão “JOGAR”, porém em 90% dos casos tentaram iniciar o modo

aleatório selecionado o texto, conforme ilustra a figura 31.

Figura 31: Tela do erro na tela de apresentação


72

Para solução do problema, foram criados dois botões, ”ESTUDO” e

“ALEATÓRIO” separadamente (figura 32), tornando mais aparente as opções e

eliminado a incerteza anteriormente apresentada.

Figura 32: Tela de apresentação atualizada


73

7 DISCUSSÃO E CONCLUSÃO

O porto da cidade de Santos vem se modernizando, tal modernização possui

como principal elo a tecnologia, que motivou novas adequações e mudanças por

parte dos profissionais do meio portuário. Desta forma, soluções de auxílio ao

conhecimento e aprendizado na área portuária são bem-vindas, pois podem agregar

valor à carreira dos profissionais da área.

Este projeto apresenta um aplicativo mobile, baseado em perguntas e

respostas, com o objetivo de auxiliar estudantes e profissionais do porto, no

aprendizado acerca das operações portuárias.

A implementação utilizando a ferramenta Intel XDK, forneceu um ambiente

de desenvolvimento completo e ágil, disponibilizando a possibilidade de uma

aplicação híbrida, podendo ser executado para plataforma Android.

Com o propósito de atualização de conteúdo, haverá a possibilidade de as

questões serem expandidas no sistema.

Por se tratar de um instrumento para estudos, houve a preocupação de

desenvolver um layout agradável e com usabilidade. Para tanto foi realizado um

teste de usabilidade com 11 alunos do 5º ciclo do curso de Gestão Portuária. Os

resultados dos testes apontaram que, 100% dos usuários confirmaram que as telas

e menus do aplicativo são de fácil navegação e que os seus símbolos e ícones são

claros e intuitivos, confirmando a aceitação da aplicação quanto à apresentação

visual. Da mesma forma, 100% dos usuários recomendariam o aplicativo para

outras pessoas e o utilizariam com frequência. Foi percebido que o percentual de

discordância de 9,1% relacionado ao tempo de completar as tarefas, foi devido aos

problemas reportados na seção 6.2 do capítulo 6 e que foram solucionados através

de adequações no layout do aplicativo, conforme disposto também neste mesmo

capítulo.

Conclui-se que o objetivo proposto foi atingindo, considerando que o

aplicativo foi desenvolvido e testado, ainda que de forma reduzida, com aceitação de

98% nos testes de usabilidade.

74

Pretende-se disponibilizar o aplicativo WebPorts para uso gratuito, pois

acredita-se que a aplicação irá beneficiar alunos e profissionais do porto com

conhecimentos básicos sobre as operações portuárias de forma prática e interativa.

75

REFERÊNCIAS

ARANHA, Gláucio. Jogos Eletrônicos como um conceito chave para o desenvolvimento de aplicações imersivas e interativas para o aprendizado. Ciências & Cognição, Rio de Janeiro, 31 maço 2006. Disponível em: <http://www.cienciasecognicao.org/revista/index.php/cec/article/view/560/347> Acesso em: abril 2016. ARANTES, E. B. O Porto Negro: Cultura e Trabalho no Rio de Janeiro dos Primeiros anos do século XX. 2005, 159f. Dissertação (Mestrado em História). Programa de Pós-Graduação em História, Universidade Estadual de Campinas, Campinas, 2005. BARROS, Thiago Pereira de. As mudanças regulatórias dos portos brasileiros e os rebatimentos aos trabalhadores. In: ENCONTRO NACIONAL DA ANPEGE, XI, 2015, Presidente Prudente- SP. Anais do XI- ENANPEGE, 2015. P. 2206- 2217. BARROS, Vanessa Tavares de Oliveira. Avaliação da interface de um aplicativo computacional através de teste de usabilidade, questionário ergonômico e análise gráfica do design. 2003. 146f. Dissertação (Mestrado em Engenharia da Produção) – Programa de Pós-Graduação em Engenharia de Produção. UFSC, Florianópolis. BEZERRA, Eduardo. Princípios de Análise e Projeto de Sistemas com UML. 3ª edição. Rio de Janeiro: Ed. Elsevier, 2006. Cambridge Dictionary. Disponível em: <http://dictionary.cambridge.org/dictionary/english/quiz?a=british>. Acesso em: setembro, 2016. CBO - Classificação Brasileira de Ocupações. Disponível em: <http://www.mtecbo.gov.br/cbosite/pages/saibaMais.jsf>. Acesso em: setembro,

2016. COMPANHIA DOCAS DO ESTADO DE SÃO PAULO- CODESP: Plano de Desenvolvimento e Expansão do Porto de Santos- PDEPS. Relatório Preliminar Consolidado. São Paulo, 2009. DEITEL, Paul J. Ajax, Rich Internet Applications e desenvolvimento Web para programadores. São Paulo: Pearson Prentice Hall, 2008. ELMASRI, Ramez; NAVATHE, Shamkant B. N. Sistemas de Banco de Dados. São Paulo: Pearson Addison Wesley, 2005. Camada de arquitetura Android. Disponível em: <http://knoow.net/ciencinformtelec/informatica/android-sistema-operativo/>. Acesso em: set 2016. GITAHY, M. L. C. Ventos do mar: trabalhadores do porto, movimento operário e cultura urbana. São Paulo: Editora da Universidade Estadual Paulista, 1992.

76

GOMES, João Carlos . Tecnologia, multifuncionalidade e cultura do trabalho no porto de Santos. 2015. (Apresentação de Trabalho/Comunicação). GOOGLE INC.. Disponível em:< https://developer.android.com/about/index.html >. Acesso em: agosto, 2016. JORGE, Marcos. Java Passo a Passo Lite. São Paulo: Pearson Education do Brasil, 2004. KOSTER, Ralph. Theory of Fun for Videogames. California: McGraw Hill/Osborn, 2003. Learn & Play. Disponível em: <https://play.google.com/store/apps/details?id=free.langame_us.rivex>. Acesso em: setembro, 2016. Loja on-line Google Play. Disponível em: <https://play.google.com/store?hl=pt_BR>. Acesso em: setembro, 2016. MATIAS, Márcio. Checklist: uma ferramenta de suporte à avaliação ergonômica de interfaces. 92 f. Dissertação (Mestrado em Engenharia da Produção)- Universidade Federal de Santa Catarina, Florianópolis, 1995. MOUTA, Albert Eije Barreto. Desenvolvendo aplicações multiplataforma com o XDK. AlbertEije.COM e-book, 2015. Disponível em: < http://www.alberteije.com/livros/xdk/>. Acesso em: outubro 2016. MYSQL. Disponível em: <http://www.mysql.com/about/>. Acesso em: setembro 2016. NEVES, Maria Fernanda Britto. Santos e o planejamento ambiental do espaço portuário: desafios na gestão de um porto sustentável. 144 f. Dissertação (Mestrado em Gestão de Negócios)- Universidade Católica de Santos, Santos, 2005. O passado do porto de Santos. Disponível em: <https://portogente.com.br/portopedia/73228-o-passado-do-porto-de-santos>. Acesso: setembro, 2016. OLIVEIRA, Rafael José de. Proposta de um questionário pós-teste para medir usabilidade de aplicativos de celulares touchscreen. 122 f. (Trabalho de Conclusão de Curso)- Universidade Federal de Santa Catarina, Florianópolis, 2013. ORNELAS, Ronaldo dos Santos. Relação porto/cidade: o caso de Santos. 141 f. Dissertação (Mestrado em Geografia)- Faculdade de Filosofia, Letras e Ciências Humanas Departamento de Geografia, Universidade de São Paulo, São Paulo, 2008. Oxford Dictionary .Disponível em:<

http://www.oxforddictionaries.com/pt/defini%C3%A7%C3%A3o/ingl%C3%AAs/quiz?searchDictCode=all>. Acesso em: setembro, 2016.

77

Perguntados. Disponível em: <https://play.google.com/store/apps/details?id=com.etermax.preguntados.lite>. Acesso em: setembro, 2016. POMPÉIA, Marcos; SERVA, Jayme. O porto de Santos e a história do Brasil. São Paulo: Neotropica, 2010. ______. O porto de Santos e a história do Brasil. Manual do professor. São Paulo: Neotropica, 2010. PFLEEGER, Shari Lawrence. Engenharia de Software : Teoria e Prática. 2ª edição. São Paulo: Pearson Prentice Hall, 2004. Porto de Santos. Disponível em:<http://www.antaq.gov.br/Portal/pdf/Portos/Santos.pdf>. Acesso em: julho, 2016. PRESSMAN, Roger S. Engenharia de Software: Uma Abordagem Profissional. 7ª edição. São Paulo: AMGH Editora, 2011. PRESSMAN, Roger S; LOWE, David. Engenharia Web. Rio de Janeiro: Grupo Editorial Nacional, 2009. PUGA, Sandra, RISSETTI, Gerson. Lógica de programação e estrutura de dados, com aplicações em Java. São Paulo: Pearson Prentice Hall, 2009. Questões OAB. Disponível em: <https://play.google.com/store/apps/details?id=com.pedefeijao.questoesoab>. Acesso em: setembro, 2016. Resumo Histórico. Disponível em:< http://www.portodesantos.com.br/historia.php>. Acesso em: junho, 2016. REZENDE, Denis Alcides. Engenharia de Software e Sistemas de Informação / Denis Alcides Rezende. – 3. ed rev. e ampl. – Rio de Janeiro: Brasport, 2005. RODRIGUES, Joel. Modelo Entidade Relacionamento (MER) e Diagrama Entidade Relacionamento (DER), 2015. Disponível em: < http://www.devmedia.com.br/curso/curso-modelagem-de-bancos-de-dados-relacionais/409>. Acesso em: outubro, 2016. ROSCA D. GREENSPAN S., FEBLOWITZ M., WILD C. (1997). A decision Making Methodology in support of business rules Lifecycle. In Proceeding of RE 97: IEEE International Symposuim on Requeriments Engineering, IEEE Computer Society Press, p. 236 -246. SAHLINS, M. Cultura na prática. Rio de Janeiro: Editora UFRJ, 2004. SARTI, I. Porto vermelho: os estivadores santistas no Sindicato e na política. Rio de Janeiro: Paz e Terra, 1981.

78

SHARMA, Vivek; SHARMA, Rajiv. Desenvolvendo sites e-Commerce. São Paulo: Makron Books, 2001. SOMMERVILLE, Ian. Engenharia de Software. 6ª edição. São Paulo: Addison Wesley, 2003. ______. Engenharia de Software. 8ª edição. São Paulo: Pearson Prentice Hall, 2008. ______. Engenharia de software. 9ª edição. São Paulo: Pearson Prentice Hall, 2011. VIDAL, Soraia Maria. S.C. Santos: porto, cidade e região. In: Desafios da Modernização Portuária. JUNQUEIRA, Luciano. A.P (org.). São Paulo: Aduaneiras, 2002. WAZLAWICK, R. S. Análise e projeto de sistemas de informação orientados a objetos. (p. 352). Rio de Janeiro: Campus/SBC, 2010.

79

GLOSSÁRIO

Design Desenho, projeto.

E-mail Correio eletrônico.

Framework Estrutura em que algo é construído.

Front-end Aspecto gráfico, corresponde ao html.

Layout Esquema de distribuição dos elementos dentro de um desenho.

Links Elo, vínculo ou ligação.

Login Ter acesso. Processo de identificação do utilizador perante um

computador.

Mobile Que é móvel.

On-line Conectado direta ou remotamente a um computador e pronto

para uso

Open source Código aberto. Programas que tem seu código fonte livre.

Quiz Prova de conhecimento

Ranking Classificação ordenada de acordo com critérios determinados.

Scripts Escritas.

Tablet Dispositivo eletrônico portátil, de tamanho pequeno, com tela

sensível ao toque.

Tag Etiqueta, identificação.

Software Programas que controlam o funcionamento de um computador.

Web Teia, rede.

80

APÊNDICE A

Abaixo, seguem as telas restantes do aplicativo WebPorts:

Tela de retorno ao usuário, informando que é necessário preencher o campo

senha na tela “Cadastro”.

Figura 33: Tela senha obrigatória



e-mail na tela “Cadastro”.

Figura 34: Tela e-mail obrigatório


81

Tela de retorno ao usuário, informando que o e-mail digitado na tela

“Cadastro” está inválido.

Figura 35: Tela e-mail inválido


Tela de retorno ao usuário, informando que é obrigatório o preenchimento do

campo nome na tela “Cadastro”.

Figura 36: Tela nome obrigatório


82

Tela de retorno ao usuário, informando que é obrigatório o preenchimento do

campo login, na tela “Login”.

Figura 37: Tela login obrigatório



senha, na tela “Login”.

Figura 38: Tela senha obrigatória


83

APÊNDICE B

A seguir serão apresentadas as perguntas do questionário para o teste de

usabilidade do aplicativo, conforme figura 39 e 40:

Figura 39: Primeira parte do questionário


84

Figura 40: Segunda parte do questionário


85

Documents

Curso Superior de Tecnologia em Sistemas para Internet · Bruna Stella Fernandes Pinto Roberto Silva Conceição Rosilene Silva e Silva WEBPORTS- Aplicativo de Suporte Educacional