Monografia - UNISUL

UNIVERSIDADE DO SUL DE SANTA CATARINA - UNISUL

FELIPPE RODRIGO PUHLE

DESENVOLVIMENTO DE KARAOKÊ WEB COM CONCEITOS DE

GAMIFICAÇÃO

Palhoça

2014

FELIPPE RODRIGO PUHLE

DESENVOLVIMENTO DE KARAOKÊ WEB COM CONCEITOS DE

GAMIFICAÇÃO

Monografia apresentada ao Curso Superior de

Sistemas para a Internet da Universidade do

Sul de Santa Catarina, como requisito parcial

para a obtenção do título de Tecnólogo.

Orientador: Prof. Clávison Martinelli Zapelini Esp.

Palhoça

2014

AGRADECIMENTOS

Muitas pessoas passaram pela minha vida nestes últimos tempos, e todos

contribuíram com um pouco para que este momento chegasse.

Em primeiro lugar, gostaria de agradecer a minha família por me ensinar a nunca

desistir de um sonho, por sempre ter me incentivado, por sempre me apoiar e dar a estrutura

necessária para que eles se realizem.

Em segundo lugar, gostaria de agradecer as pessoas que estão diretamente ligadas

a esta monografia: a minha coordenadora na empresa Naiara Sebben, por ter me ajudado na

concepção da ideia e na elaboração do projeto, e aos professores Clávison Martinelli Zapelini

e Flavia Lumi Matuzawa por sempre se disponibilizarem em nos ajudar, compartilhando

conhecimento e nos indicando os melhores caminhos para seguir.

Em terceiro lugar, a minha professora de técnica vocal, Celly Pacheco Maurer, por

ter me ensinado a nunca desistir da música e também por nunca ter desistido deste eterno

aluno.

Em quarto lugar e não menos importante, a todos os amigos e colegas de

trabalho pelos momentos compartilhados durante esta jornada.

Obrigado!

Dedico esta monografia à todos que

participaram desta etapa da minha vida e/ou

puderam me ajudar de alguma forma, seja ela

direta ou indiretamente.

“Cada sonho que você deixa para trás, é um futuro que deixa de existir.” (Steve Jobs)

RESUMO

Esta monografia explica e documenta o desenvolvimento de um Karaokê rodando em um

ambiente especificamente Web, o qual utiliza os conceitos de gamificação para recompensar e

fidelizar o usuário. Serão abordados conhecimentos sobre as linguagens de programação

utilizadas (PHP e Javascript), assim como modelagem do banco de dados, plug-ins, APIs e

frameworks utilizados para facilitarem o desenvolvimento. Também abordará uma breve

explicação sobre a teoria musical aplicada ao canto (técnica vocal) e como foi elaborado o

sistema de pontuação do game através da gamificação.

Palavras-chave: Karaokê, Canto, Gamificação, Técnica Vocal.

LISTA DE FIGURAS

FIGURA 1 - Mercado mundial de games por segmento .......................................................... 22

FIGURA 2 - Navegadores mais utilizados no mundo .............................................................. 41

FIGURA 3 - Navegadores mais utilizados no Brasil ............................................................... 41

FIGURA 4 - Compatibilidade de navegadores - Web Áudio ................................................... 42

FIGURA 5 - Suporte de navegadores (versões) - Web Áudio ................................................. 42

FIGURA 6 - jQuery - compatibilidade entre navegadores ....................................................... 43

FIGURA 7 - Exemplo de ícones - Font Awesome ................................................................... 44

FIGURA 8 - Banco de dados - Tabela de sessão (CodeIgniter) ............................................... 46

FIGURA 9 - Formulário de login ............................................................................................. 47

FIGURA 10 - Banco de dados - tabela de usuários .................................................................. 47

FIGURA 11 - Tela inicial da administração ............................................................................. 48

FIGURA 12 - Alteração do perfil ............................................................................................. 48

FIGURA 13 - Alteração da senha............................................................................................. 48

FIGURA 14 - Módulo "Categorias" ......................................................................................... 49

FIGURA 15 - Módulo "Categorias" - formulário .................................................................... 49

FIGURA 16 - Banco de dados - tabela de categorias ............................................................... 50

FIGURA 17 - Módulo "Artistas" .............................................................................................. 50

FIGURA 18 - Módulo "Artistas" - formulário ......................................................................... 51

FIGURA 19 - Banco de dados - tabela de artistas .................................................................... 51

FIGURA 20 - Módulo "Músicas" ............................................................................................. 51

FIGURA 21 - Módulo "Músicas" - formulário ........................................................................ 52

FIGURA 22 - Banco de dados - tabela de músicas .................................................................. 52

FIGURA 23 - Módulo "Músicas" - gerenciamento de acordes ................................................ 53

FIGURA 24 - Banco de dados - tabela de acordes ................................................................... 53

FIGURA 25 - Módulo "Músicas" - gerenciamento de textos .................................................. 54

FIGURA 26 - Banco de dados - tabela de textos ..................................................................... 54

FIGURA 27 - Banco de dados - tabela de ranking de jogadores ............................................. 55

FIGURA 28 - Módulo "Configurações" - geral ....................................................................... 55

FIGURA 29 - Módulo "Configurações" - mídias sociais ......................................................... 55

FIGURA 30 - Módulo "Configurações" - e-mail ..................................................................... 56

FIGURA 31 - Módulo "Usuários" ............................................................................................ 56

FIGURA 32 - Bootstrap - Sistema de grid ............................................................................... 58

FIGURA 33 - Bootstrap - Demonstração do sistema de grid ................................................... 58

FIGURA 34 - Layout ................................................................................................................ 59

FIGURA 35 - Tela de jogo ....................................................................................................... 60

FIGURA 36 - Jogo - permissão do navegador ......................................................................... 60

FIGURA 37 - Durante o jogo ................................................................................................... 61

FIGURA 38 - Escala de dó maior ............................................................................................ 62

FIGURA 39 - Término do jogo ................................................................................................ 63

FIGURA 40 - Registrar a pontuação ........................................................................................ 63

FIGURA 41 - Término do registro ........................................................................................... 64

FIGURA 42 - Compartilhando pontuação no Facebook .......................................................... 64

FIGURA 43 - Linha do tempo no Facebook ............................................................................ 65

FIGURA 44 - Melhores colocados ........................................................................................... 65

FIGURA 45 - Questionário de avaliação de usabilidade ......................................................... 72

FIGURA 46 - PageSpeed - Karaokê Web ................................................................................ 73

FIGURA 47 - PageSpeed - UOL .............................................................................................. 74

FIGURA 48 - WebPage Test - Karaokê Web .......................................................................... 74

FIGURA 49 - WebPage Test - UOL ........................................................................................ 75

FIGURA 50 - Validação HTML - W3C ................................................................................... 75

LISTA DE QUADROS

QUADRO 1 - Recursos Mobilizados ....................................................................................... 27

QUADRO 2 - Estudo de viabilidade ........................................................................................ 30

QUADRO 3 - Questionário de Estudo de Riscos de Projetos .................................................. 33

QUADRO 4 - Fluxo de Atividades .......................................................................................... 34

QUADRO 5 - Estimativa de recursos e custos mensais ........................................................... 35

QUADRO 6 - Divisão de tarefas com estimativa de recursos ................................................. 38

QUADRO 7 - Divisão de Reponsabilidades ............................................................................ 39

QUADRO 8 - Indicadores de desempenho .............................................................................. 68

QUADRO 9 - Respostas obtidas na avaliação de usabilidade ................................................. 76

QUADRO 10 - Navegador e SO utilizados pelas pessoas que responderam a avaliação de

usabilidade ................................................................................................................................ 78

QUADRO 11 - Formulário de Lições Aprendidas ................................................................... 80

LISTA DE GRÁFICOS

GRÁFICO 1 - Gráfico de Gantt – Cronograma previsto.......................................................... 36

GRÁFICO 2 - Gráfico de Gantt – Término da Etapa 1 ............................................................ 44




SUMÁRIO

INTRODUÇÃO ...................................................................................................................... 13

1 IDENTIFICAÇÃO DO ESCOPO DO PROJETO ........................................................... 14

1.1 DEFINIÇÃO E APRESENTAÇÃO DO TEMA ............................................................ 14

1.2 CATEGORIA DO PROJETO ........................................................................................ 14

1.3 CONTEXTO DO PROJETO .......................................................................................... 15

1.4 EQUIPE DO PROJETO ................................................................................................. 15

2 DESCRIÇÃO DETALHADA DO PROJETO .................................................................. 17

2.1 DESCRIÇÃO .................................................................................................................. 17

2.2 OBJETIVOS ................................................................................................................... 20

2.2.1 Objetivos Gerais ..................................................................................................... 20

2.2.2 Objetivos Específicos.............................................................................................. 21

2.3 JUSTIFICATIVA ........................................................................................................... 21

2.4 RESULTADOS ESPERADOS ....................................................................................... 22

2.5 COLETA E INTERPRETAÇÃO DE DADOS .............................................................. 23

3 ANÁLISE DO PROJETO .................................................................................................. 25

3.1 ESTUDO DE NECESSIDADES – PLANEJAMENTO DE ATIVIDADES ................. 25

3.1.1 Etapa 1 - Pesquisa .................................................................................................. 25

3.1.2 Etapa 2 – Desenvolvimento backend .................................................................... 26

3.1.3 Etapa 3 – Desenvolvimento frontend .................................................................... 26

3.1.4 Etapa 4 - Testes ....................................................................................................... 27

3.2 ESTUDO DE RECURSOS MOBILIZADOS ................................................................ 27

3.3 ESTUDO DE VIABILIDADE ....................................................................................... 28

3.4 ESTUDO DE RISCOS ................................................................................................... 30

4 PLANEJAMENTO DE PROJETO ................................................................................... 34

4.1 PLANO DE TRABALHO .............................................................................................. 34

4.1.1 Fluxo de Atividades ................................................................................................ 34

4.1.2 Detalhamento das Atividades ................................................................................ 35

4.1.3 Cronograma das Atividades (gráfico de Gantt) .................................................. 35

4.2 EQUIPES DE TRABALHO ........................................................................................... 36

4.2.1 Divisão de Tarefas .................................................................................................. 37

4.2.2 Divisão de Responsabilidades ................................................................................ 38

5 EXECUÇÃO DO PROJETO ............................................................................................. 40

5.1 RELATÓRIOS PARCIAIS DE EXECUÇÃO ............................................................... 40

5.1.1 Etapa 1 – Pesquisa .................................................................................................. 40

5.1.2 Etapa 2 – Desenvolvimento Backend .................................................................... 45

5.1.3 Etapa 3 – Desenvolvimento Frontend................................................................... 57

5.1.4 Etapa 4 – Testes ...................................................................................................... 66

5.2 VERIFICAÇÃO DE ÍNDICES DE DESEMPENHO .................................................... 67

5.3 AJUSTES / MODIFICAÇÕES DE PROJETO .............................................................. 69

5.4 PROTÓTIPO DO PROJETO .......................................................................................... 69

5.5 PROJETO PILOTO ........................................................................................................ 70

6 ENCERRAMENTO DO PROJETO ................................................................................. 71

6.1 VALIDAÇÃO DO PROJETO ........................................................................................ 71

6.2 ENTREGA / APRESENTAÇÃO FINAL ...................................................................... 73

6.3 MEDIÇÃO DOS RESULTADOS .................................................................................. 73

7 CONSIDERAÇÕES FINAIS .............................................................................................. 79

7.1 LIÇÕES APRENDIDAS ................................................................................................ 81

7.2 NOVAS IDEIAS E OPORTUNIDADES ....................................................................... 81

REFERÊNCIAS ..................................................................................................................... 83

13

INTRODUÇÃO

A indústria dos games é relativamente nova e encontra-se em enorme expansão,

tendo um mercado gigantesco a ser explorado.

Poder jogar online oferecia uma enorme atratividade e era considerado o grande

diferencial dos games até alguns anos atrás. Hoje, trata-se de questão de sobrevivência do

mercado.

Principalmente depois da disseminação das práticas de gamificação que é a

utilização do conceito de um game no apoio de atividades como treinamentos, resoluções de

problemas, potencialização de retorno de investimento, mensuração da qualidade do serviço e

diversas outras (TOTVS, 2014).

Este trabalho trata do processo de desenvolvimento de um projeto denominado

“Karaokê Web”, um browser game de karaokê com sistema de pontuação incluso. Nele, serão

apresentadas as lógicas utilizadas para o desenvolvimento do código-fonte, assim como as

linguagens de programação, APIs e frameworks utilizados.

Ao final serão apresentados os resultados alcançados em comparação aos

resultados esperados, as lições aprendidas e ideias para melhorias na próxima versão do

projeto.

14

1 IDENTIFICAÇÃO DO ESCOPO DO PROJETO

A identificação do escopo do projeto aborda informações que detalham itens

como a equipe responsável pelo desenvolvimento deste trabalho, além de apontar a categoria

e o contexto do projeto; e por fim define e apresenta o tema.

1.1 DEFINIÇÃO E APRESENTAÇÃO DO TEMA

O tema do projeto foi escolhido baseado em uma paixão do próprio autor e de

milhares de pessoas ao redor do mundo: a música.

Após uma pesquisa, foram constatados dois pontos principais para a continuidade

do projeto:

Poucos são os games relacionados ao meio musical no mercado nacional,

e este número é ainda menor quando relacionado ao canto (técnica vocal);

O nível de aceitação da ideia foi extremamente grande.

O autor definiu como tema de seu projeto, o desenvolvimento de um web site

onde os usuários podem competir através da sua participação no karaokê que será

disponibilizado e ranqueado através de técnicas de gamificação.

1.2 CATEGORIA DO PROJETO

O projeto se enquadra na categoria de “Desenvolvimento Tecnológico”, pois trata-

se do desenvolvimento de um novo software utilizando conhecimentos já existentes, e que

será utilizado para suprir a demanda identificada pelo autor na elaboração do tema.

15

1.3 CONTEXTO DO PROJETO

É cada vez maior a procura pelas oportunidades de lazer que o avanço científico-

tecnológico tem nos oferecido. Dentro destas possibilidades, a Internet se tornou a principal

opção pelo simples fato de estar presente em grande percentual de residências pelo mundo.

Além disto, pesquisas também demonstram que são grandes os casos em que o

entretenimento e a música estão interligadas por meio de atividades realizadas mutuamente.

Apesar de ter um mercado gigante a ser explorado, a gamificação trata de um

conceito relativamente novo e representa basicamente o estabelecimento de regras e

mecânicas de um jogo a algo que não necessariamente seja um jogo.

Este projeto visa a inserção de um game rodando especificamente em um

ambiente Web no mercado nacional. Nele, os jogadores poderão fazer livre utilização do

sistema de pontuação para sua própria diversão e também a de seus amigos, promovendo uma

concorrência sadia entre eles através do compartilhamento nas redes sociais.

Sem qualquer instalação no computador necessária, “Karaokê Web” visa a

simplicidade e fácil jogabilidade, independentemente do local em que o usuário se encontra.

Para isto, o navegador precisa dar suporte a alguns componentes utilizados pelo jogo, além de

que o usuário habilite o microfone e dê permissão ao navegador para utilizá-lo.

1.4 EQUIPE DO PROJETO

A equipe do projeto é composta por apenas um integrante: Felippe Rodrigo Puhle,

o qual foi gestor e responsável por todas as etapas do processo de pesquisa e de

desenvolvimento, podendo destacar as pesquisas sobre melhores tecnologias a serem

utilizadas, elaboração do sistema de pontuação e área administrativa para gerenciamento de

conteúdo do site.

O autor trabalha há mais de três anos com desenvolvimento Web, com projetos de

que incluíam o desenvolvimento de websites, sistemas e integrações, utilizando tecnologias

como:

PHP;

16

Javascript;

jSon

jQuery;

MySql.

17

2 DESCRIÇÃO DETALHADA DO PROJETO

Neste capitulo consta a descrição do projeto, junto com o objetivo geral e as suas

especificidades. Justificando a relevância e a importância do mesmo para a comunidade,

assim como apresentando os resultados esperados e a interpretação dos dados coletados.

2.1 DESCRIÇÃO

Este projeto trata do desenvolvimento de um game on-line sobre música. O game

é composto por vários módulos, podendo ser separados também por duas seções: site e

administração.

Na seção administrativa, encontraremos:

a) Formulário de login: o acesso a administração de conteúdo do site só será

permitido para usuários cadastrados. O login poderá ser realizado com

sucesso utilizando e-mail e senha previamente cadastrados.

b) Atualização de perfil: todo usuário cadastrado poderá alterar seus próprios

dados dentro da administração do site.

c) Módulo de categorias: neste módulo, será possível gerenciar todas as

categorias de músicas disponíveis no site. Dentre as ações a serem

realizadas aqui são:

- Adição de novos registros;

- Listagem, alteração e exclusão de registros já cadastrados.

d) Módulo de artistas: neste módulo, será possível gerenciar todas os artistas

e bandas disponíveis no site. Dentre as ações a serem realizadas aqui são:



18

e) Módulo de músicas: neste módulo, será possível gerenciar todas as

músicas disponíveis no site. Neste cadastro estará incluso o arquivo de

áudio e também vínculos com artistas e categorias. Dentre as ações a

serem realizadas aqui são:


- Listagem, alteração e exclusão de registros já cadastrados;

- Gerenciamento das legendas (letras) que aparecerão na tela enquanto a

música estiver tocando;

- Gerenciamento da troca de acordes durante a música, o que acarretará em

como o sistema de pontuação funcionará.

f) Configurações: neste módulo, serão configuradas todas as informações

referentes ao site, como por exemplo:

- Título, descrição e palavras chave;

- Endereço de e-mail que deverá receber as mensagens de contato;

- Configurações de mídias sociais;

- Configuração de servidor de e-mail para envio de mensagens.

g) Módulo de usuários: neste módulo, será possível gerenciar todos os

usuários que terão acesso a área administrativa. Dentre as ações a serem

realizadas aqui são:



Na seção site, a visualização será composta por um template fixo, ou seja, em

todas as páginas teremos o mesmo cabeçalho e rodapé, com as seguintes opções:

Cabeçalho:

- Início: link para a página inicial;

- Artistas: link para a lista de artistas disponíveis;

- Categorias: link para a lista de categorias disponíveis;

- Músicas: link para a lista de músicas disponíveis;

- Contato: link para o formulário de contato;

19

- Avaliação de usabilidade: janela com um formulário disponível para

avaliação do sistema;

- Sobre: janela com algumas informações sobre o sistema;

- Ajuda: janela com algumas dicas de uso do sistema.

Rodapé:

- Início: link para a página inicial;

- Contato: link para o formulário de contato;

- Avaliação: janela com um formulário disponível para avaliação do

sistema;

- Sobre: janela com algumas informações sobre o sistema;

- Ajuda: janela com algumas dicas de uso do sistema;

- Integração com as redes sociais: Facebook, Twitter e Youtube.

A navegação do site se dará pelas seguintes telas:

a) Página inicial: na página inicial serão mostrados os seguintes dados:

- Top músicas: músicas mais jogadas;

- Top artistas: artistas mais jogados;

- Top categorias: categorias mais jogadas;

b) Artistas: lista de todos os artistas cadastrados. Ao final do conteúdo terá

uma área para paginação. Caso houver mais de doze registros esta área

será exibida, limitando assim a carga no banco de dados. Caso um item for

clicado, o usuário será redirecionado para a lista de música disponíveis

para este artista.

c) Categorias: lista de todas as categorias cadastradas. Ao final do conteúdo

terá uma área para paginação. Caso houver mais de doze registros esta área


clicado, o usuário será redirecionado para a lista de música disponíveis

para esta categoria.

20

d) Músicas: lista de todas as músicas cadastradas. Ao final do conteúdo terá

uma área para paginação. Caso houver mais de doze registros esta área


clicado, o usuário será redirecionado para a tela de jogo desta música.

e) Jogo: tela para qual o usuário será redirecionado ao escolher uma música.

Aqui serão exibidas algumas informações como: sistema de pontuação

está habilitado ou não (caso o usuário não tenha habilitado o microfone),

botão para a escolha da dificuldade e botão para início do jogo. Será

exibido também um ranking de melhores colocados para cada dificuldade.

f) Contato: formulário de contato com os campos para os dados do usuário e

texto a ser enviado. Enviará um e-mail para o endereço configurado nas

configurações do site.

2.2 OBJETIVOS

Os objetivos da monografia são descritos a seguir. Neles há uma divisão entre o

objetivo geral do trabalho e as especificidades a serem realizadas no transcorrer do mesmo.

2.2.1 Objetivos Gerais

O objetivo geral do projeto “Karaokê Web” é:

Desenvolver um aplicativo Web para karaokê com conceitos de gamificação.

21

2.2.2 Objetivos Específicos

Os objetivos específicos do projeto “Karaokê Web” são:

Desenvolver a área administrativa (backend);

Desenvolver o site (frontend);

Desenvolver módulo de análise de desempenho e pontuação do usuário;

Desenvolver módulo para integração com mídias sociais;

Realizar testes para saber se o sistema de pontuação é confiável.

2.3 JUSTIFICATIVA

Jogar na Web tem sido um grande atrativo para as pessoas que desejam tirar uns

minutinhos de folga para aliviar o stress. Fortalecem-se aqui a praticidade dos browser games:

sem a necessidade de efetuar o download de arquivos gigantes, difusos e disponíveis a todo o

momento na rede.

Nos últimos anos, o mercado dos games desponta como promissor e com um

crescimento de enorme potencial: “De acordo com Alves Junior, o mercado de games

movimenta algo em torno de US$ 2,63 bilhões no Brasil, uma prova de que proporcionar

diversão e entretenimento às pessoas por meio de jogos pode ser algo muito lucrativo”

(MACHADO, 2014).

Mundialmente falando, segundo estudo realizado pela empresa de pesquisa de

mercado Newzoo, o mercado de games movimentou de 2013 para 2014 cerca de US$ 81,5

bilhões, US$ 6 bilhões a mais que no ano anterior. Destes, 9% pertencem aos considerados

browser games, como pode ser visto na FIGURA 1 a seguir:

22

FIGURA 1 - Mercado mundial de games por segmento.

Fonte: Newzoo 1

Após pesquisa realizada, foi constatado que não há nenhum browser game na área

do canto e da técnica vocal no mercado nacional. Este projeto visa oferecer um game

dinâmico e que se adeque a este nicho de mercado.

Sem a necessidade de fazer qualquer instalação no computador, o projeto

“Karaokê Web” fornecerá estrutura necessária para que o usuário se divirta sem qualquer

limitações de uso.

2.4 RESULTADOS ESPERADOS

O desenvolvimento de um aplicativo Web para karaokê com conceitos em

gamificação. Com uma interface extremamente amigável, basta apenas que o usuário habilite

o microfone e permita que o navegador faça o seu uso para poder jogar.

Do ponto de vista estratégico, é esperado que o game promova uma disputa

acirrada e sadia, forçando os usuários e compartilharem os seus resultados nas redes sociais e

atraindo o maior número de visitantes possíveis da seguinte forma:

O sistema de pontuação será crescente, de forma que quanto mais o

usuário praticar, maior será sua pontuação;

1 Disponível em http://www.newzoo.com/insights/asia-pacific-contributes-82-6bn-global-games-market-growth. Acesso em out 2014.

http://www.newzoo.com/insights/asia-pacific-contributes-82-6bn-global-games-market-growth

http://www.newzoo.com/insights/asia-pacific-contributes-82-6bn-global-games-market-growth

23

Após o término da música o usuário poderá compartilhar a sua pontuação

nas redes sociais, visando a divulgação do game e atraindo outras pessoas

a conhecerem o produto.

Do ponto de vista técnico, “Karaokê Web” torna-se um projeto inovador e ousado.

O projeto contará com o uso da API de Web Áudio, tecnologia relativamente nova no

mercado. É esperado que a API e a integração com o Javascript consigam fornecer estrutura e

capacidade necessária para a elaboração do algoritmo de pontuação em tempo real, sem

quaisquer atrasos na execução.

2.5 COLETA E INTERPRETAÇÃO DE DADOS

Tratando-se do desenvolvimento de um software novo e após a concepção do

tema, a coleta das informações foi feita da seguinte maneira:

Através de pesquisa na Internet;

Com amigos, colegas de trabalho e do meio musical.

Com a pesquisa na internet, foi possível constatar a maior necessidade: uma

enorme escassez de browser games relacionados a música no mercado nacional. Alguns

modelos foram encontrados, mas a grande maioria ao estilo de “Guitar Hero”.

Após a identificação da necessidade de um karaokê, foram coletadas as

informações e dicas necessárias através de conversas informais com amigos, colegas de

trabalho e colegas no meio musical, a fim de verificarmos o nível de aceitação do projeto.

Através desta coleta foi chegado à conclusão de que o projeto era totalmente

viável, também sendo feito o levantamento de alguns itens primordiais para o funcionamento

e um rápido desenvolvimento do código fonte do sistema.

Com colegas de trabalho, debatemos as seguintes soluções:

Utilização de frameworks;

Linguagens de programação utilizadas;

Banco de dados a ser utilizado;

Utilização da API de web áudio;

Utilização de jQuery e outros plug-ins.

24

Com os colegas envolvidos no meio musical, debatemos sobre a teoria musical

básica: como poderíamos aplicar esta teoria ao sistema de pontuação do game.

25

3 ANÁLISE DO PROJETO

Este capítulo apresenta o estudo de necessidades para realizar o planejamento de

atividades. Pontuando os recursos mobilizados, assim como, o etudo de viabilidade e riscos

do trabalho.

3.1 ESTUDO DE NECESSIDADES – PLANEJAMENTO DE ATIVIDADES

Segundo (FACCINONI, 2006), “Um projeto é um conjunto de tarefas, arranjado

uma sequência ou relação definida, que produz um efeito ou saída pré-definida.”. Assim

sendo, dividimos o projeto em etapas e tarefas menores, para posterior análise (DUTRA,

2007). Sendo elas:

3.1.1 Etapa 1 - Pesquisa

Nesta etapa, o objetivo principal é a identificação de quais os requisitos mínimos

para que o game tenha um correto funcionamento. Além disto, será preparada a base para o

código fonte ser escrito futuramente. Fazem parte desta etapa:

a) Compatibilidade:

- Verificar compatibilidade do web áudio no HTML5 entre navegadores;

- Verifica se a captura de áudio pelo web áudio possui uma qualidade

mínima;

- Verificar se a detecção da nota emitida pelo vocalista é capturada de

maneira correta.

b) Equipamentos:

- Testar microfones de diferentes valores;

- Testar placa de áudio onboard e outras.

26

c) Linguagem de Programação:

- Pesquisa sobre qual framework será utilizado para programar;

- Pesquisa de plug-ins que poderão ser úteis.

3.1.2 Etapa 2 – Desenvolvimento backend

Nesta etapa, se dará o início do desenvolvimento. O ambiente backend nada mais

é do que a seção que administra o conteúdo do site. Fazem parte desta etapa:

a) Definição do framework

- Verifica qual framework se adapta melhor;

- Verificar linguagens que podem ser combinadas para melhorar o sistema.

b) Intranet base

- Desenvolver sistema de login;

- Desenvolver sistema de módulos;

- Desenvolver módulos básicos como: configurações, usuário, etc.

c) Módulos referente a música

- Desenvolver módulo de gerenciamento de músicas;

- Desenvolver módulo para controle do ranking de jogadores.

3.1.3 Etapa 3 – Desenvolvimento frontend

Após o término do desenvolvimento do backend começará o desenvolvimento do

frontend, que é a parte visível do site para os usuários. Fazem parte desta etapa:

a) Layout

- Verificar melhor estrutura HTML a ser utilizada;

- Definir esquema de cores;

27

- Desenvolver frontend.

b) Integração

- Integrar frontend com backend;

- Integrar com mídias sociais.

3.1.4 Etapa 4 - Testes

Última etapa do projeto. Nela será testada todo o desenvolvimento e integração

com as mídias sociais. Fazem parte desta etapa:

a) Verifica se o algoritmo de pontuação funciona adequadamente;

b) Verificar se a integração com as mídias sociais está funcionando.

3.2 ESTUDO DE RECURSOS MOBILIZADOS

Segundo (DUTRA, 2007), recursos podem ser materiais (equipamentos,

instalações, softwares, etc) e humanos (a equipe do projeto e/ou terceiros). Levando em conta

essa consideração, temos a seguinte previsão orçamentária (anual) para realização do projeto:

Previsão Orçamentária (ANUAL): R$ 34.295,00

Humanos Quantidade Custo mensal

Tecnólogo em web design e programação 1 R$ 2.500,00

Material Quantidade Custo

Computador 1 R$ 3.000,00

Interface de som offboard 1 R$ 800,00

Microfone multimídia (simples) 1 R$ 20, 00

Microfone Sennheiser E835 (profissional) 1 R$ 450,00

Cabo balanceado XLR 1 R$ 25,00

QUADRO 1 - Recursos Mobilizados.

Fonte: Adaptado (DUTRA, 2007)

28

Segundo informações exibidas no QUADRO 1, podemos notar que a previsão

orçamentária para um ano de desenvolvimento é de R$ 34.295,00. Destes, R$ 4.295,00 são

referentes aos materiais fixos, que serão utilizados durante todo o projeto. O restante se refere

a variável (salário do tecnólogo em web design e programação) multiplicada a quantidade de

meses que o projeto levará para ser executado.

3.3 ESTUDO DE VIABILIDADE

Segundo (DUTRA, 2007), o Estudo de Viabilidade de Projetos é importantíssimo

para fazer o levantamento de uma série de preocupações iniciais para prosseguir com o

desenvolvimento do projeto, assim como prever alguns riscos que possam atrapalhar

futuramente. Utilizaremos o modelo de questionário/relatório proposto por (FACCIONI,

2011) para tal.

Estudo de viabilidade

Desenvolvimento de Karaokê Web com conceitos de Gamificação

Equipe de estudo: FRP Music Technology

Local e data: São Miguel do Oeste – SC, 15 de abril de 2014

Resumo do projeto (escopo, objetivos, estratégias)

Trata-se do desenvolvimento de um karaokê web que pretende promover a diversão e

interação dos jogadores através dos conceitos de gamificação e interações com as redes

sociais.

Benefícios:

- quais são as vantagens mensuráveis que o

projeto trará?

- quais são os valores comparativos?

Descrição:

- A grande maioria dos softwares de

karaokê hoje tem de ser instalados no

computador para serem executados.

- Um karaokê web não teria esta

necessidade, bastaria acessar a página para

jogar.

29

Benefícios:

- que vantagens intangíveis ele trará?

- como se poderá verificar?

Descrição:

- Portabilidade: você poderia jogar em

qualquer lugar sem ter o game ‘instalado’

no computador.

Recursos:

- quais os recursos materiais necessários para

o projeto?

- esses recursos estão disponíveis?

- caso não disponíveis, é possível obtê-los?

Descrição:

- Recursos materiais conforme a tabela;

- Sim, já foram adquiridos;

Recursos:

- quais os recursos humanos necessários para

o projeto?

- essas pessoas estão disponíveis para o

projeto?

- caso não disponíveis, há outras pessoas

para substituí-las?

Descrição:

- Recursos humanos conforme a tabela;

- Equipe já está completa.

Custos:

- considerando os recursos necessários,

quanto dinheiro será necessário para

desenvolver o projeto?

- esse montante está disponível?

Descrição:

- Todos os itens físicos já estão disponíveis,

restando apenas o salário do Tecnólogo em

web design e programação.

- O dinheiro não está disponível.

Custos:

- há fontes de financiamento?

Descrição:

- Não, o projeto será levado com verbas

próprias.

Prazo:

- qual o prazo pré-definido pelo “cliente”

para o projeto?

Descrição:

- O prazo especificado para finalização do

projeto é de 12 meses.

Prazo:

- considerando a experiência da equipe, qual

o prazo estimado para o projeto? É igual ao

pré-definido?

Descrição:

- A projeção inicial do projeto foi de 6

meses, mas ele poderá ser executado em 4

meses.

Conclusões quanto à viabilidade do projeto:

O projeto é totalmente viável, tendo bastante tempo para a finalização do mesmo.

30

Recomendações:

Anexos:

QUADRO 2 - Estudo de viabilidade.

Fonte: Adaptado (FACCIONI, 2011, p. 125)

Conforme o QUADRO 2 mostra, o projeto tem viabilidade de ser concretizado e o

tempo disponível para execução é grande, mesmo após o remanejamento de tempo de

execução inicial.

3.4 ESTUDO DE RISCOS

O estudo de riscos em um projeto é uma etapa importantíssima para a

continuidade do mesmo. Os riscos já existem mesmo antes do projeto nascer, e o gestor deve

estar atendo ao processo de administração de riscos, que deve ser contínuo. Desta maneira,

eles podem ser antecipados e administrados, ou até mesmo eliminados (DUTRA, 2007).

Estudo de riscos

Desenvolvimento de Karaokê Web com conceitos de Gamificação

Equipe de estudo: FRP Music Technology

Local e data: São Miguel do Oeste – SC, 15 de abril de 2014

Resumo do projeto (escopo, objetivos, estratégias)

Trata-se do desenvolvimento de um karaokê web que pretende promover a diversão e

interação dos jogadores através dos conceitos de gamificação e interações com as redes

sociais.

Riscos quanto aos benefícios:

- o cliente tem uma idéia exata do resultado

a ser obtido?

- ou tem uma idéia aproximada?

- é possível medir os benefícios?

Descrição:

Sim, os benefícios serão notáveis devido ao

fato do karaokê pode ser acessado de

qualquer lugar com uma conexão com a

internet, porém, caso a internet estiver lenta,

pode ser que o usuário sinta-se frustrado pelo

fato de não poder jogar de uma maneira

satisfatória.

31

Riscos quanto aos benefícios:

- qual a probabilidade desse tipo de riscos?

- qual o seu impacto?

Descrição:

A probabilidade é média, visto que hoje

encontramos internet com altas taxas de

conexão em qualquer lugar, porém, a internet

no Brasil ainda é muito instável.

Riscos quanto aos recursos:

- há equipamentos de reserva?

- há pessoal de reserva?

- a tecnologia empregada é inteiramente

dominada?

Descrição:

Não há recursos materiais ou humanos

reserva. A tecnologia é dominada pelo

profissional visto que trabalha há alguns anos

com isto.

Riscos quanto aos recursos:



Descrição:

A probabilidade é mínima, mas pode resultar

em uma pequena demora no prazo inicial de

desenvolvimento da equipe (impacto

pequeno).

Riscos quanto aos custos:

- o financiamento de todo o projeto está

garantido?

- há um montante de reserva?

Descrição:

O financiamento não está garantido ou possui

reservas, apesar de todo o equipamento já ter

sido adquirido.

Riscos quanto aos custos:



Descrição:

A falta de recursos para pagamento de

recursos humanos pode acarretar em atrasos

no prazo inicial de desenvolvimento da

equipe (impacto médio).

Riscos quanto ao prazo:

- há fatores internos ou externos, não

considerados, que podem afetar o prazo do

projeto?

Descrição:

A maior dificuldade será devido ao fato do

web áudio ser um conceito novo e ainda não

ser suportado por todos os navegadores,

então o karaokê terá de ser testado em todos

para homologação de funcionamento.


- a equipe de projeto é experiente?

Descrição:

Apesar de nunca ter trabalho com web áudio,

a equipe trabalha há anos no mercado de

32

trabalho e possui domínio sobre as

linguagens de programação que serão

utilizadas.




Descrição:

Probabilidade pequena e impacto pequeno.

Caso um navegador não der suporte ao web

áudio, não há outra alternativa a não ser

instruir o usuário a utilizar um navegador

homologado pela equipe, verificação que não

atrasará no desenvolvimento do projeto...

Lista dos 10 riscos mais importantes:

- Falha nos testes efetuados durante a pesquisa;

- Erro na escolha do framework utilizado;

- Erro na escolha do modelo de frontend a ser utilizado;

- Atraso no desenvolvimento;

- Baixa performance da internet;

- Falha de integração de navegadores com o web áudio;

- Falha no desenvolvimento do algoritmo de pontuação (identificação da nota emitida);

- Falha nos equipamentos utilizados;

- Falha na captação do áudio pelo navegador;

- Baixa qualidade de captação do áudio pode interferir na pontuação do jogador;

Podemos conviver com eles?

Sim, mas em alguns casos específicos, será necessário o replanejamento do projeto.

É possível atenuá-los?

Em caso de falhas ou erros em relação a compatibilidade do web áudio com alguns

navegadores, deverá ser desenvolvido um módulo capaz de realizar a interação necessária

para que o jogador consiga fazer a atualização ou instalação de um navegador homologado

pelo sistema.

É possível evitá-los?

Em sua grande maioria, sim. A etapa de pesquisa será de importância significativa para

determinar qual o melhor caminho a ser seguido no desenvolvimento do sistema.

Além disto, em caso de alguma falha de equipamento, poderá ser locado ou pegar

emprestado os equipamentos de empresas parceiras.

33

Conclusões quanto aos riscos do projeto:

Tendo em vista que os maiores riscos devem-se a duvidosa integração do web áudio com os

navegadores, podemos afirmar que o projeto é de médio risco, pois de pouco em pouco

tempo temos constantes atualização dos mesmos e de suas APIs de integração com os

novos recursos do HTML5. Além disto, lendo sua documentação, temos a garantia de que

irá funcionar em pelo menos dois dos navegadores mais utilizados hoje – Google Chrome e

Mozilla Firefox.

Recomendações:

Anexos:

QUADRO 3 - Questionário de Estudo de Riscos de Projetos.

Fonte: Adaptado (FACCIONI, 2011, p.134)

No QUADRO 3, através do questionário para estudo de riscos de projeto,

proposto por FACCIONI (2011, p.134), podemos chegar à conclusão de que o projeto tem

médio risco. Apesar disto, o projeto é totalmente viável, bastando apenas que a equipe se

mantenha atenta a alguns riscos já calculados.

34

4 PLANEJAMENTO DE PROJETO

Aborda-se nesta sessão o plano de trabalho definido com base no capítulo anterior

e a equipe envolvida na execução do mesmo.

4.1 PLANO DE TRABALHO

Após o levantamento e análise de dados e os estudos de viabilidade e riscos do

projeto, a equipe pode estimar algumas informações importantes para a sequência do trabalho,

como o fluxo e o detalhamento das atividades. A seguir apresentaremos estas informações,

assim como o cronograma com o Gráfico de Gantt.

4.1.1 Fluxo de Atividades

Etapa 1 - Pesquisa Prazo estimado: 21 dias

Compatibilidade 10 dias

Equipamentos 7 dias

Linguagens de programação 4 dias

Etapa 2 – Desenvolvimento Backend Prazo estimado: 48 dias

Definição do framework 4 dias

Intranet Base 29 dias

Módulo referente a música 15 dias

Etapa 3 – Desenvolvimento Frontend Prazo estimado: 40 dias

Layout 20 dias

Integração 20 dias

Etapa 4 - Testes Prazo estimado: 20 dias

Algoritmo de pontuação 15 dias

Integração com mídias sociais 5 dias

QUADRO 4 - Fluxo de Atividades.


35

O QUADRO 4 demonstra o fluxo de atividades e seus respectivos prazos

estimados, contando apenas dias úteis de trabalho. Através dele podemos ter uma melhor

visão da duração total do projeto.

4.1.2 Detalhamento das Atividades

Definido o fluxo de atividades e estimada a sua duração, decompomos as

informações em uma outra tabela, estimando através do tempo de execução os custos e os

recursos necessários para a realização das tarefas:

MÊS RECURSO CUSTO (R$)

Junho Computador

Interface de som offboard

Microfone multimídia (simples)

Microfone Sennheiser E835 (profissional)

Cabo balanceado XLR

Equipe

3.000,00

800,00

20,00

450,00

25,00

2.500,00

Julho Equipe 2.500,00

Agosto Equipe 2.500,00

Setembro Equipe 2.500,00

Outubro Equipe 2.500,00

Novembro Equipe 2.500,00

QUADRO 5 - Estimativa de recursos e custos mensais.

Fonte: O autor (2014)

4.1.3 Cronograma das Atividades (gráfico de Gantt)

Considerando que as realizações das tarefas deverão ser executadas em um

período e ordem previamente definidos, o gráfico de Gantt serve para facilitar a visualização e

execução do que deverá ser desenvolvido.

36

No eixo horizontal do gráfico há um calendário com a escala de tempo, e no eixo

vertical as atividades a serem executadas. Estas, estarão distribuídas no gráfico utilizando uma

barra para demarcar a data inicial e final de realização da atividade, se estendendo por todo o

período de tempo compreendido (FACCIONI, 2011).

Após definição do fluxo de atividades e análise dos prazos, chegamos ao seguinte

cronograma:

GRÁFICO 1 - Gráfico de Gantt – Cronograma previsto.


O GRÁFICO 1 mostra que nenhuma atividade será realizada em paralelo. Isto se

deve ao fato de que cada etapa e tarefa foi estruturada para ser dependente da anterior, devido

ao fato da equipe contar com apenas uma pessoa.

4.2 EQUIPES DE TRABALHO

A equipe do projeto é composta por apenas uma pessoa, logo, temos apenas uma

equipe de trabalho também. Esta, ficará a cargo de todas responsabilidades e tarefas durante

todo o projeto.

37

4.2.1 Divisão de Tarefas

Segundo (DUTRA, 2007), o planejamento do projeto é fundamental para

começarmos a desenvolvê-lo, e um bom nível de detalhamento deve ser alcançando para que

consigamos estimar melhor as atividades.

Uma tabela foi criada com a descrição de cada etapa e tarefa, com informações

adicionais dos recursos necessários para a realização cada uma:

Etapas do desenvolvimento Recursos Necessários

Etapa 1 - Pesquisa

1) Compatibilidade Computador, Interface de som offboard,

Microfone multimídia (simples) ou

Microfone Sennheiser E835 (profissional),

Cabo balanceado XLR.

2) Equipamentos Computador, Interface de som offboard,

Microfone multimídia (simples), Microfone

Sennheiser E835 (profissional), Cabo

balanceado XLR.

3) Linguagem de programação Computador.

Etapa 2 - Desenvolvimento backend

1) Definição do framework Computador.

2) Intranet base Computador.

3) Módulos referente a música Computador, Interface de som offboard,



balanceado XLR.

Etapa 3 - Desenvolvimento frontend

1) Layout Computador.

2) Integração Computador.

Etapa 4 - Testes

1) Verificar se o algoritmo de

pontuação funciona adequadamente

Computador, Interface de som offboard,


38


balanceado XLR.

2) Verificar se a integração com as

mídias sociais está funcionando

Computador.

QUADRO 6 - Divisão de tarefas com estimativa de recursos.


Como demonstrado pelo QUADRO 6, todos os recursos deverão ser adquiridos

logo na primeira etapa e tarefa do projeto, pois serão através das pesquisas e dos testes iniciais

de compatibilidade que teremos maiores informações sobre o comportamento do web áudio.

4.2.2 Divisão de Responsabilidades

A divisão de responsabilidades é uma etapa extremamente importante para

qualquer projeto, pois é nesta etapa que será definido qual equipe de trabalho ficará

responsável por alguma atividade, e quais atividades poderão ser realizadas em paralelo.

Como o projeto “Karaokê Web” é composto por apenas um integrante e possui

apenas uma equipe de trabalho, todas as tarefas foram delegadas para esta mesma pessoa:

Etapas do desenvolvimento Responsável

Etapa 1 - Pesquisa

1) Compatibilidade Tecnólogo em web design e programação

2) Equipamentos Tecnólogo em web design e programação

3) Linguagem de programação Tecnólogo em web design e programação

Etapa 2 - Desenvolvimento backend

1) Definição do framework Tecnólogo em web design e programação

2) Intranet base Tecnólogo em web design e programação

3) Módulos referente a música Tecnólogo em web design e programação

Etapa 3 - Desenvolvimento frontend

1) Layout Tecnólogo em web design e programação

2) Integração Tecnólogo em web design e programação

Etapa 4 - Testes

39

1) Verificar se o algoritmo de

pontuação funciona adequadamente

Tecnólogo em web design e programação

2) Verificar se a integração com as

mídias sociais está funcionando

Tecnólogo em web design e programação

QUADRO 7 - Divisão de Reponsabilidades.


40

5 EXECUÇÃO DO PROJETO

A execução do projeto aborda os relatórios parciais de execução, apresenta a

verificação de índices de desempenho, ajustes e modificações, além do protótipo e o piloto do

projeto.

5.1 RELATÓRIOS PARCIAIS DE EXECUÇÃO

Para melhor entendimento e acompanhamento em tempo real durante o

desenvolvimento do projeto, os relatórios parciais de execução foram feitos na conclusão de

cada etapa.

5.1.1 Etapa 1 – Pesquisa

Um bom resultado durante a execução da etapa 1 era essencial para que o

desenvolvimento do projeto continuasse dentro do cronograma previsto. Um erro aqui poderia

significar em um atraso gradativo nas etapas posteriores.

A primeira tarefa desta etapa visava efetuar todos os testes de compatibilidade

possíveis para que o game funcione de forme homogênea no maior número de navegadores, e

um dos principais objetivos era a identificação de quais os navegadores mais utilizados na

atualidade. Veja as figuras abaixo:

41

FIGURA 2 - Navegadores mais utilizados no mundo

Fonte: Wikipedia 2

FIGURA 3 - Navegadores mais utilizados no Brasil.

Fonte: Wikipedia 3

Após o levantamento destes dados, nossa maior preocupação era sobre o suporte

do web áudio a estes navegadores. Mas o que é o web áudio?

“A API de Web Áudio disponibiliza um poderoso e versátil sistema de controle de

áudio para a Web, permitindo aos desenvolvedores escolher arquivos de áudio,

adicionar efeitos a estes arquivos, criar reprodutores de áudio, aplicar spatial effects

(como panning) e muito mais.” (MDN, 2014)

O web áudio é uma ferramenta extremamente nova no mercado, e nem todos

navegadores suportam o seu uso. A própria comunidade MDN especifica isto:

2 Disponível em http://pt.wikipedia.org/wiki/Anexo:Lista_de_navegadores. Acesso em jun 2014. 3 Disponível em http://pt.wikipedia.org/wiki/Anexo:Lista_de_navegadores. Acesso em jun 2014.

42

FIGURA 4 - Compatibilidade de navegadores - Web Áudio.

Fonte: MDN 4

Utilizamos também uma ferramenta que possibilitou uma visão geral das

funcionalidade em todos os navegadores, denominada “Can I Use”. Assim conseguimos

mapear quais versões de cada navegador realmente suportam o web áudio. Veja a figura

abaixo:

FIGURA 5 - Suporte de navegadores (versões) - Web Áudio.

Fonte: Can I Use 5

Podemos perceber através da FIGURA 4 que atualmente apenas o Internet

Explorer não fornece suporte para o Web Áudio. Porém, podemos relatar também que a

versão 5.1 do Safari não oferece suporte, através da FIGURA 5. Isto acaba tornando-se um

problema para usuários do Safari no Windows, pois a última versão lançada neste sistema

operacional é justamente a versão 5.1.

Definido quais navegadores terão compatibilidade, chegou o momento de

testarmos o web áudio de verdade. Testes foram feitos com todas as configurações de

4 Disponível em https://developer.mozilla.org/pt-BR/docs/Web/API/API_Web_Audio. Acesso em jun 2014. 5 Disponível em http://caniuse.com/#feat=audio-api. Acesso em jun 2014.

https://developer.mozilla.org/pt-BR/docs/Web/API/API_Web_Audio

http://caniuse.com/#feat=audio-api

43

hardwares previamente especificadas neste projeto e em todos os navegadores, chegando à

conclusão que o projeto poderia ser seguido normalmente com esta tecnologia.

Os navegadores Internet Explorer e Opera não conseguiram capturar o áudio dos

microfones, como relatado pela pesquisa anterior. No quesito qualidade na captura de áudio

não houve diferença: tanto com a placa de som onboard do computador quanto com a

interface de som offboard o resultado foi satisfatório. O mesmo se aplica nos dois microfones

testados.

Na última tarefa da Etapa 1, houve a definição dos frameworks e plug-ins que

seriam utilizado no desenvolvimento. Os principais encontrados foram: jQuery, Bootstrap e

Font Awesome.

jQuery:

“jQuery é uma biblioteca JavaScript cross-browser desenvolvida para simplificar

os scripts client side que interagem com o HTML. Ela foi lançada em dezembro de 2006 no

BarCamp de Nova York por John Resig. Usada por cerca de 77% dos 10 mil sites mais

visitados do mundo, jQuery é a mais popular das bibliotecas JavaScript” (WIKIPEDIA,

2014).

Além disto, jQuery possui compatibilidade com diversos navegadores:

FIGURA 6 - jQuery - compatibilidade entre navegadores.

Fonte: jQuery – site oficial 6

Bootstrap:

Bootstrap é um framework para se utilizar no frontend de um projeto e visa

facilitar o desenvolvimento e manutenção do mesmo, através da do reaproveitamento dos

códigos. Criado por Mark Otto e Jacob Thornton (engenheiros do Twitter), ele é capaz de

fornecer uma série de componentes, como:

Estrutura HTML com suporte a design responsivo;

Pacotes de ícones básicos;

Menus em cascata;

6 Disponível em http://jquery.com/browser-support. Acesso em jun 2014.

http://jquery.com/browser-support

44

Outros diversos plug-ins escritos em Javascript.

Font Awesome:

Font Awesome é um pacote de ícones vetoriais para se utilizar em websites.

Através do uso de CSS, é possível alterar seu tamanho, cor, sombra e quaisquer outras técnica

de estilização de fontes.

FIGURA 7 - Exemplo de ícones - Font Awesome.


Após o término da primeira etapa, com a atualização do cronograma geramos o

seguinte gráfico de Gantt:

GRÁFICO 2 - Gráfico de Gantt – Término da Etapa 1.


45

5.1.2 Etapa 2 – Desenvolvimento Backend

A primeira tarefa desta etapa refere-se a escolha das linguagens de programação e

frameworks utilizados para o início do desenvolvimento. As escolhas da equipe do projeto

foram:

PHP;

MySQL;

Javascript;

CSS;

CodeIgniter.

PHP

O PHP é uma linguagem de programação server-side, ou seja, ele é executado no

lado do servidor. O cliente recebe apenas o conteúdo que é processado pelo servidor, não

podendo visualizar o código fonte desta maneira.

Ele é suportado pela maioria dos servidores webs existentes hoje, e tem suporte a

uma ampla variedade de banco de dados.

MySQL

O MySQL é um dos sistemas gerenciadores de bancos de dados (SGBD) open

sources mais populares em uso atualmente. Sua linguagem é o SQL.

Sua popularidade deve-se ao fato da sua fácil integração com o PHP.

Javascript

Javascript é uma linguagem de programação interpretada e client-side (executada

no navegador do cliente). É considerada leve por causa deste fato. É uma linguagem baseada

em objetos, porém, a tipagem de suas variáveis são dinâmicas e não há distinção entre funções

e métodos.

CSS

46

“Cascading Style Sheets (ou simplesmente CSS) é uma linguagem de folhas de

estilo utilizada para definir a apresentação de documentos escritos em uma linguagem de

marcação, como HTML ou XML. Seu principal benefício é prover a separação entre o

formato e o conteúdo de um documento” (WIKIPEDIA, 2014).

O CSS está em fase de padronização e hoje está no seu terceiro estágio, também

chamado de CSS3.

CodeIgniter

CodeIgniter é um framework para desenvolvimento de projetos em linguagem de

programação PHP. Ele é gratuito, leve, rápido, possui várias bibliotecas e utiliza MVC

(modelo, visão, controle), facilitando e auxiliando na criação e manutenção do código fonte.

Model (modelo): comunicação com o banco de dados, através das

operações CRUD (create, read, update e delete);

View (visão): a parte visível das páginas para o usuário, o código HTML;

Controller (controle): é o elo de comunicação entre o modelo e a visão. É

aqui que ficará armazenada toda a lógica da aplicação.

Para iniciar o desenvolvimento, temos de levar em consideração que o sistema de

sessão do CodeIgniter também utiliza o banco de dados. Nossa modelagem foi feita através do

programa MySQL Workbench. A tabela referente as sessões abertas no CodeIgniter ficou

assim:

FIGURA 8 - Banco de dados - Tabela de sessão (CodeIgniter)


Criada a tabela das sessões, podemos iniciar o desenvolvimento do login no

sistema administrativo. A primeira parte a ser realizada foi o formulário a ser preenchido,

conforme FIGURA 9:

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

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

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

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

47

FIGURA 9 - Formulário de login.


Para que a autenticação ocorra, o e-mail informado necessita ser válido. Esta

autenticação é feita através do plug-in jQuery Validate. Além disto, e-mail e senha

informados devem estar previamente cadastrado na tabela “usuario” do banco de dados:

FIGURA 10 - Banco de dados - tabela de usuários.


Caso os dados não sejam validados, uma mensagem de erro aparecerá para o

usuário. Caso contrário, ele será redirecionado para a tela inicial da administração.

48

FIGURA 11 - Tela inicial da administração.


Como demonstra a FIGURA 11, a esquerda temos todos os módulos disponíveis,

e ao canto superior direito temos o nome do usuário que fez a autenticação. Clicando nos

módulos, o usuário será redirecionado para a página principal do módulo selecionado.

Clicando no seu próprio nome, ele será redirecionado para a tela de alteração de perfil, como

mostram as próximas figuras:

FIGURA 12 - Alteração do perfil.


FIGURA 13 - Alteração da senha.


49

Após clicar em finalizar, os dados serão alterados. Caso os campos referentes a

alteração de senha forem preenchidos, a senha também será alterada (caso a senha atual tenha

sido digitado corretamente).

Categorias

O primeiro módulo listado é o de categorias de músicas que serão disponibilizadas

no site. Ao acessá-lo, você será redirecionado para a página inicial do módulo:

FIGURA 14 - Módulo "Categorias".


Como podemos ver, a tela inicial do módulo é a lista de registros já inseridos.

Clicando em “Excluir”, uma confirmação será exigida para que a exclusão seja efetuada. Ao

clicar em “Alterar”, o usuário será redirecionado para o mesmo formulário da ação

“Adicionar”, porém, já virá preenchido:

FIGURA 15 - Módulo "Categorias" – formulário.


Os registros inseridos neste módulo ficam organizados da seguinte maneira no

banco de dados:

50

FIGURA 16 - Banco de dados - tabela de categorias.


Artistas

Entrando no módulo artistas, o usuário visualizará a seguinte tela:

FIGURA 17 - Módulo "Artistas".






51

FIGURA 18 - Módulo "Artistas" – formulário.



banco de dados:

FIGURA 19 - Banco de dados - tabela de artistas.


Músicas

Ao entrar no módulo “Músicas”, o usuário visualizará a seguinte tela:

FIGURA 20 - Módulo "Músicas".


52





FIGURA 21 - Módulo "Músicas" – formulário.



banco de dados:

FIGURA 22 - Banco de dados - tabela de músicas.


53

Na lista de músicas inseridas, ao clicar em “Acordes” o usuário será redirecionado

para a tela de gerenciamento de troca de acordes (notas), que será a base que o sistema de

pontuação utilizará para verificar se o usuário está cantando corretamente ou não. Veja:

FIGURA 23 - Módulo "Músicas" - gerenciamento de acordes.


Os acordes inseridos na música ficam organizados da seguinte maneira no banco

de dados:

FIGURA 24 - Banco de dados - tabela de acordes.


Ainda na lista de músicas cadastradas, ao clicar em “Textos”, o usuário será

redirecionado para a tela de gerenciamento dos textos que aparecerão no decorrer da música,

que neste caso será utilizado para exibir a letra a ser cantada:

54

FIGURA 25 - Módulo "Músicas" - gerenciamento de textos.


Os textos inseridos na música ficam organizados da seguinte maneira no banco de

dados:

FIGURA 26 - Banco de dados - tabela de textos.


Além destas opções, aproveitamos para modelar a tabela que será utilizada na

pontuação dos jogadores:

55

FIGURA 27 - Banco de dados - tabela de ranking de jogadores.


Configurações

Neste módulo, serão feitas todas as configurações referentes ao site. O formulário

está dividido em três etapas:

FIGURA 28 - Módulo "Configurações" – geral.


FIGURA 29 - Módulo "Configurações" - mídias sociais.


56

FIGURA 30 - Módulo "Configurações" - e-mail.


Na primeira tela, é feita a configuração geral do site: informações que são visíveis

aos usuários que o visitam.

Na segunda tela, temos a configuração das redes sociais. Aqui, devemos colocar o

nome de usuário nas redes sociais disponíveis, além do ID do APP no Facebook e seus

respectivos administradores. Desta maneira, quando um link do site for compartilhado,

aparecerá o nome do aplicativo no Facebook.

Na terceira tela é feita a configuração para que o site consiga enviar e-mails

autenticando em um servidor SMTP, evitando que se tenha problemas ao receber os e-mails

enviados através do formulário de contato.

Usuários

Módulo utilizado para gerenciar os usuários que tem acesso a administração. O

formulário utilizado para adicionar novos usuários e alterar usuários já existentes é o mesmo

formulário utilizado para atualização do perfil, assim como a tabela no banco de dados é a

mesma. Ao acessar o módulo usuários, a tela inicial será:

FIGURA 31 - Módulo "Usuários".


57

Com isto, a segunda etapa é finalizada. Atualizando o cronograma do projeto, o

seguinte gráfico de Gantt foi gerado:



5.1.3 Etapa 3 – Desenvolvimento Frontend

Esta etapa refere-se a elaboração do layout do site, e, foi relativamente rápida em

relação ao que havia sido previsto inicialmente. Através da utilização do Bootstrap, foi

possível desenvolver o layout rapidamente.

As telas visam um fácil entendimento e navegabilidade dentro do site. Com

apenas um clique é possível executar a ação desejada pelo usuário:

Voltar a página inicial;

Lista de músicas por artista;

Lista de músicas por categoria;

Lista de todas as músicas;

Jogar;

Formulário de contato.

58

A estrutura HTML do site é baseada no sistema de grid de 12 colunas responsivas

do próprio Bootstrap. Conforme a largura da tela (diferentes viewports), as colunas ajustam-se

ao tamanho da tela.

FIGURA 32 - Bootstrap - Sistema de grid.

Fonte: Bootstrap 7

Veja uma simples demonstração a seguir:

FIGURA 33 - Bootstrap - Demonstração do sistema de grid.

Fonte: Bootstrap 8

O esquema de cores definido pela equipe foi a utilização de cores neutras. Para

jogar, basta clicar em alguma música. Caso o usuário clique em um artista ou categoria, será

redirecionado para a lista de músicas do respectivo item selecionado.

7 Disponível em http://getbootstrap.com/css/#grid. Acesso em ago 2014. 8 Disponível em http://getbootstrap.com/css/#grid-example-basic. Acesso em ago 2014.

http://getbootstrap.com/css/#grid

http://getbootstrap.com/css/#grid-example-basic

59

FIGURA 34 - Layout


Jogo

Ao selecionar uma música, o usuário será redirecionado para a tela de jogo:

60

FIGURA 35 - Tela de jogo


Como podemos perceber, inicialmente a pontuação está desativada. Devido a

questões de segurança, o navegador irá solicitar se o usuário deseja ou não permitir que o

áudio seja capturado, como demonstra a imagem abaixo:

FIGURA 36 - Jogo - permissão do navegador


Negando esta permissão ou iniciando o jogo sem ela, o usuário poderá jogar

normalmente, porém, o sistema de pontuação ficará desativado e o usuário não poderá

compartilhar a sua pontuação.

Para iniciar o jogo basta selecionar o nível de dificuldade desejado e após isso

clicar em “Iniciar”.

61

FIGURA 37 - Durante o jogo


O sistema do jogo foi desenvolvido em Javascript e jQuery. Ao clicar em

“Iniciar”, é salvo em uma variável local a data em que o jogo começou. Através de uma

função recursiva o sistema verifica qual texto deverá ser exibido, qual será o próximo acorde

e se deverá trocar a cor do background através da verificação do tempo de execução da

música (subtraindo da data atual a data de início do jogo).

Para que o usuário pontue, é necessário que ele cante adequadamente em cima do

acorde que está sendo tocado pelo playback da música. Para isto, utilizaremos de referência a

teoria musical. Um acorde é formado por três notas:

Fundamental (que dá nome ao acorde);

3ª maior ou menor;

5ª justa.

Como exemplo, utilizaremos a escala de Dó Maior. A escala maior é formada

pelos seguintes intervalos: Fundamental, 2ª maior, 3ª maior, 4ª justa, 5ª justa, 6ª maior, 7ª

maior, 8ª justa.

62

FIGURA 38 - Escala de dó maior.

Fonte: Wikiversidade 9

Neste caso, o acorde de Dó Maior seria formado por Dó (fundamental), Mi (3ª

maior) e Sol (5ª justa). Quando a música tocar este acorde, o usuário deverá cantar uma destas

três notas para pontuar no jogo.

O nível de dificuldade escolhido está diretamente ligado a estas notas. São raros

os casos de que alguém cantará exatamente a nota necessária, ou seja, há um percentual de

desafinação. Os níveis de dificuldade foram definidos da seguinte maneira pela equipe:

Cantor de chuveiro – o usuário pontuará com até 90% de desafinação;

Amador – o usuário pontuará com até 40% de desafinação;

Profissional – o usuário pontuará com até 10% de desafinação.

Durante a execução da música deverão ocorrer várias trocas de acordes (de

milissegundos em milissegundos) e o usuário deverá ficar atento a este fato para conseguir

uma melhor pontuação.

Após o término da música, será exibida a pontuação que o usuário atingiu, assim

como um botão para que ele insira seu nome para cadastrar-se no ranking de jogadores. Após

o registro, ele poderá compartilhar o resultado no Facebook, como demonstram as imagens

abaixo:

9 Disponível em http://pt.wikiversity.org/wiki/Teoria_musical. Acesso em set 2014.

http://pt.wikiversity.org/wiki/Teoria_musical

63

FIGURA 39 - Término do jogo.


FIGURA 40 - Registrar a pontuação


Após efetuar o registro, o botão será substituído pelo botão de compartilhar do

Facebook:

64

FIGURA 41 - Término do registro.


Clicando em compartilhar, uma janela do próprio Facebook será aberta e o

usuário poderá postar a pontuação alcançada na sua linha do tempo:

FIGURA 42 - Compartilhando pontuação no Facebook.


65

FIGURA 43 - Linha do tempo no Facebook.


Além de poder compartilhar nas redes sociais, a pontuação do usuário também

poderá ficar salva na tabela de melhores colocados, veja:

FIGURA 44 - Melhores colocados.


66

Ao término desta etapa, temos a seguinte atualização de cronograma e gráfico de

Gantt:



5.1.4 Etapa 4 – Testes

A quarta e última etapa do projeto refere-se aos testes utilizando o sistema de

pontuação e a integração com as mídias sociais. Como detectado previamente nas etapas

anteriores, os navegadores Internet Explorer e Safari (versão 5.1 ou inferior) não possuem

compatibilidade com o Web Áudio, então nosso game também não será suportado por eles.

Nos primeiros testes realizados, constatamos que em algumas ocasiões legendas e

acordes não estavam sincronizados corretamente com a música. Conseguimos contornar este

problema habilitando o botão de iniciar o jogo apenas depois da música ter carregado

totalmente no navegador. Após esta correção, o algoritmo de pontuação funcionou como

planejado.

Sobre a integração com as redes sociais, encontramos um único problema: ao

compartilhar a pontuação, aparecia a mensagem “via Widget Share Log App”. O problema foi

resolvido após criarmos um aplicativo no próprio Facebook e também adicionarmos a sua

integração no código fonte do site.

67

Os testes foram feitos em todos os outros navegadores atualizados em suas

últimas versões, sendo elas:

Google Chrome: 37.0.2062.124

Mozilla Firefox: 32.0.3

Opera: 24.0.1558.64

Não conseguimos acesso a nenhum computador com Mac OS para testar o game

nas versões mais recentes do Safari.

Finalizando a última etapa, temos o seguinte gráfico de Gantt:



5.2 VERIFICAÇÃO DE ÍNDICES DE DESEMPENHO

De acordo com DUTRA (2007), uma revisão do projeto deve ser realizada a cada

término de etapa a fim de analisar os resultados obtidos e replanejar o projeto caso houver a

necessidade. Seguindo este modelo, elaboramos o QUADRO 8, com especificação detalhada

de cada etapa:

68

Indicadores de desempenho

Etapa 1 – Pesquisa

Cronograma: Projeto está adiantado.

Orçamento: Orçamento não foi violado.

Tecnologia: Os equipamentos adquiridos foram capazes

de suprir todas as necessidades desta etapa.

Etapa 2 – Desenvolvimento backend

Cronograma: Projeto está adiantado. Leve atraso no

desenvolvimento da intranet base, mas foi

compensado com a agilização das outras

tarefas.


Tecnologia: Linguagens de programação e frameworks

escolhidos deram um desempenho

satisfatório.

Etapa 3 – Desenvolvimento frontend



Tecnologia: As tecnologias selecionadas previamente

ajudaram na aceleração do desenvolvimento

do projeto.

Etapa 4 - Testes



Tecnologia: As tecnologias selecionadas previamente

ajudaram na aceleração do desenvolvimento

do projeto.

QUADRO 8 - Indicadores de desempenho.

Fonte: Adaptado (DUTRA, 2007 apud MENEZES, 2001)

69

5.3 AJUSTES / MODIFICAÇÕES DE PROJETO

Durante a fase de desenvolvimento e testes, várias alterações foram feitas visando

aprimoramentos na forma de jogar e também servindo de correções para bugs não previstos

anteriormente.

Além das correções citadas no relatório de acompanhamento da última etapa, a

principal alteração feita refere-se ao uso das funções setTimeout e setInterval do próprio

Javascript. Ambas não foram capazes de prover um desempenho satisfatório na hora de tornar

a função principal do game recursiva.

Através delas, mesmo chamando a função com um milisegundo de atraso, o

processamento levava mais de cinco milisegundos para acontecer, o que acarretava em atrasos

na exibição de legendas e trocas de acordes. A solução encontrada foi um uma implementação

cross-broswer da API setImmediate (proposta pela Microsoft para executar funções de

maneira assíncrona e diminuir a carga de recursos consumidas pelo navegador).

A última modificação importante foi no sistema de pontuação: inicialmente, havia

planejado o usuário começar o jogo com cinquenta pontos e atingir no máximo cem pontos.

Conforme a música fosse tocando a pontuação iria decaindo, desta maneira, caso o usuário

permanecesse em silêncio a sua pontuação final seria zero.

O sistema de pontuação final foi simplificado: a pontuação inicia em zero e vai

aumentando gradativamente as notas emitidas corretamente. Ao remover este limite de

pontuação, no ponto de vista da equipe do projeto, a competição entre os jogadores será

infinita. Sempre haverá disputa pela maior pontuação.

5.4 PROTÓTIPO DO PROJETO

Na visão da equipe, a prototipagem foi uma etapa muito importante. Foi a partir

dela que conseguimos identificar e melhorar o desenvolvimento em vários pontos críticos no

decorrer do projeto.

A técnica escolhida pela equipe e que melhor se adaptou no desenvolvimento foi a

técnica de prototipagem evolutiva: conforme fomos desenvolvendo, fomos implementando as

alterações ao protótipo online.

70

Apesar de termos demorado mais no desenvolvimento e implementação,

acabamos ganhando mais tempo prevendo e contornando algumas situações que poderiam ser

catastróficas para a finalização do projeto.

5.5 PROJETO PILOTO

O projeto piloto se encontra disponível no link http://karaokeweb-

lippep.rhcloud.com/ e o jogo pode ser testado em qualquer computador, desde que se utilize

um navegador com suporte ao web áudio.

Para acessar o sistema administrativo, o seguinte endereço deve ser acessado:

http://karaokeweb-lippep.rhcloud.com/sysadmin. A fins de demonstração, o usuário para

acesso é “[email protected]” e a senha “123456”, ambos sem as aspas.

http://karaokeweb-lippep.rhcloud.com/


mailto:[email protected]

71

6 ENCERRAMENTO DO PROJETO

Para encerramento do projeto apresenta-se a validação, a apresentação final e os

resultados medidos.

6.1 VALIDAÇÃO DO PROJETO

A validação do projeto foi realizada em três etapas. Na primeira delas, o objetivo

era a otimização do carregamento do site. Para isto, foi necessária a utilização de duas

ferramentas:

JS CSS Minify Compress: plug-in disponível para instalação na própria

IDE utilizada para o desenvolvimento do projeto (Netbeans IDE 7.4). Com

ele, comprimimos todo o CSS e JS utilizados no site, diminuindo assim o

tamanho de cada arquivo.

PageSpeed: extensão do navegador Google Chrome, fornecida pela

própria Google. Através dela, foi possível mensurar e otimizar scripts e

imagens que poderiam acarretar em um carregamento mais lento do site.

Na segunda etapa, foi estipulado a validação do código HTML de acordo com as

normas estabelecidas pela W3C. Para isto, foi utilizado uma ferramenta disponibilizada por

eles: W3C Markup Validation Service, disponível em http://validator.w3.org/.

Na terceira e última etapa, decidimos elaborar um questionário de avaliação de

usabilidade incluso no próprio site. O questionário visa obter o feedback e o índice de

aceitação dos usuários que utilizaram o sistema, e pode ser acessado através do menu ou ao

terminar uma música. Além das perguntas visíveis, alguns dados referentes ao sistema

operacional e navegador utilizados também são enviados.

http://validator.w3.org/

72

FIGURA 45 - Questionário de avaliação de usabilidade.


As opções disponíveis para as questões referente ao layout, facilidade de uso,

carregamento do site, jogabilidade e sincronismo entre áudio e legenda eram:

Excelente;

Bom;

Regular;

Ruim;

Péssimo.

As opções disponíveis para a largura de banda de conexão eram:

Abaixo de 1MBps;

Entre 1MBps e 2MBps;



Acima de 10MBps.

73

6.2 ENTREGA / APRESENTAÇÃO FINAL

O projeto encontra-se disponível através do link http://karaokeweb-

lippep.rhcloud.com/ e foi compartilhado através das redes sociais para que o maior número

possível de pessoas pudessem testar.

O feedback agradou a equipe do projeto, pois houve um grande número de

pessoas que testaram este browser game e nos mandaram mensagens através das redes sociais.

Apesar disto, o percentual de pessoas que responderam o questionário foi baixo em relação ao

total de pessoas que jogaram, e menor ainda os que utilizaram o sistema de pontuação.

O acesso ao sistema administrativo permaneceu confidencial, pois não há a

necessidade de termos um feedback sobre o gerenciamento do projeto.

6.3 MEDIÇÃO DOS RESULTADOS

Os resultados obtidos após aplicação dos índices de avaliação foram excelentes.

Utilizamos as mesmas ferramentas para comparação do projeto com um dos sites mais

visitados atualmente no Brasil, a UOL.

Através do PageSpeed Insights10, conseguimos uma pontuação de 92 (de um

máximo de 100), enquanto a UOL tem uma pontuação de 81. Veja:

FIGURA 46 - PageSpeed - Karaokê Web.

Fonte: PageSpeed Insights 11

10 Disponível em https://developers.google.com/speed/pagespeed/insights. Acesso em out 2014. 11 Disponível em https://developers.google.com/speed/pagespeed/insights/?url=karaokeweb-lippep.rhcloud.com. Acesso em out 2014.



https://developers.google.com/speed/pagespeed/insights

https://developers.google.com/speed/pagespeed/insights/?url=karaokeweb-lippep.rhcloud.com

https://developers.google.com/speed/pagespeed/insights/?url=karaokeweb-lippep.rhcloud.com

74

FIGURA 47 - PageSpeed - UOL.

Fonte: PageSpeed Insights 12

Utilizamos outra ferramenta para verificarmos quanto tempo cada site demorava

para carregar, e os índices foram ainda melhores: Karaokê Web teve mais que o dobro de

velocidade para abrir do que o site comparado.

FIGURA 48 – WebPage Test - Karaokê Web.

Fonte: WebPage Test 13

12 Disponível em https://developers.google.com/speed/pagespeed/insights/?url=uol.com.br. Acesso em out 2014. 13 Disponível em http://www.webpagetest.org/result/141007_B2_10T0/. Acesso em out 2014.

https://developers.google.com/speed/pagespeed/insights/?url=uol.com.br

http://www.webpagetest.org/result/141007_B2_10T0/

75

FIGURA 49 - WebPage Test – UOL.

Fonte: WebPage Test 14

De acordo com o validador da W3C, nosso projeto também está de acordo com as

normas e regras estabelecidas:

FIGURA 50 - Validação HTML - W3C.

Fonte: W3C Markup Validation Service 15

Através do formulário de avaliação de usabilidade, conseguimos os seguintes

resultados:

Avaliação de Usabilidade

Número de respostas obtidas: 10

Pergunta Respostas Percentual

Layout Excelente – 3

Bom – 6

Regular – 1

Ruim – 0

Péssimo – 0

Excelente – 30%

Bom – 60%

Regular – 10%

Ruim – 0%

Péssimo – 0%

Facilidade de Uso Excelente – 5

Bom – 4

Regular – 1

Ruim – 0

Péssimo – 0

Excelente – 50%

Bom – 40%

Regular – 10%

Ruim – 0%

Péssimo – 0%

14 Disponível em http://www.webpagetest.org/result/141007_XM_10NV/. Acesso em out 2014. 15 Disponível em http://validator.w3.org/check?uri=http%3A%2F%2Fkaraokeweb-lippep.rhcloud.com%2F&charset=%28detect+automatically%29&doctype=Inline&group=0. Acesso em out 2014.

http://www.webpagetest.org/result/141007_XM_10NV/

http://validator.w3.org/check?uri=http%3A%2F%2Fkaraokeweb-lippep.rhcloud.com%2F&charset=%28detect+automatically%29&doctype=Inline&group=0

http://validator.w3.org/check?uri=http%3A%2F%2Fkaraokeweb-lippep.rhcloud.com%2F&charset=%28detect+automatically%29&doctype=Inline&group=0

76

Carregamento do Site: Excelente – 7

Bom – 2

Regular – 1

Ruim – 0

Péssimo – 0

Excelente – 70%

Bom – 20%

Regular – 10%

Ruim – 0%

Péssimo – 0%

Sua Conexão: Abaixo de 1MBps – 0

Entre 1MBps e 2MBps – 2



Acima de 10MBps – 0

Abaixo de 1MBps – 0%

Entre 1MBps e 2MBps – 20%



Acima de 10MBps – 0%

Jogabilidade Excelente – 8

Bom – 2

Regular – 0

Ruim – 0

Péssimo – 0

Excelente – 80%

Bom – 20%

Regular – 0%

Ruim – 0%

Péssimo – 0%

Utilizou sistema de

pontuação

Sim – 4

Não - 6

Sim – 40%

Não – 60%

Sincronismo entre áudio e

legenda

Excelente – 8

Bom –1

Regular – 1

Ruim – 0

Péssimo – 0

Excelente – 80%

Bom – 10%

Regular – 10%

Ruim – 0%

Péssimo – 0%

Jogará mais vezes Sim – 10

Não - 0

Sim – 100%

Não – 0%

QUADRO 9 - Respostas obtidas na avaliação de usabilidade.


Podemos notar um índice satisfatório de aprovação do projeto. Porém, poucas

foram as pessoas que utilizaram o sistema de pontuação, e apenas duas registraram a sua

pontuação no ranking do site. Algumas alegaram não possuir microfone na hora do teste.

Além disto, capturamos os seguintes dados referentes ao navegador e sistema

operacional utilizados por estas pessoas:

77

Avaliação de Usabilidade – Navegadores e Sistemas Operacionais

User Agent Browser Plataform

Mozilla/5.0 (Windows NT

6.1; WOW64)

AppleWebKit/537.36

(KHTML, like Gecko)

Chrome/37.0.2062.124

Safari/537.36

Chrome Unknown Windows OS


6.3; WOW64; rv:32.0)

Gecko/20100101

Firefox/32.0

Firefox Unknown Windows OS


6.1; WOW64)

AppleWebKit/537.36

(KHTML, like Gecko)

Chrome/37.0.2062.124

Safari/537.36



6.1; WOW64)

AppleWebKit/537.36

(KHTML, like Gecko)

Chrome/37.0.2062.124

Safari/537.36



6.3; WOW64; rv:32.0)

Gecko/20100101

Firefox/32.0

Firefox Unknown Windows OS

Mozilla/5.0 (Macintosh;

Intel Mac OS X 10_9_5)

AppleWebKit/537.36

(KHTML, like Gecko)

Chrome/39.0.2166.2

Chrome Mac OS X

78

Safari/537.36



AppleWebKit/537.36

(KHTML, like Gecko)

Chrome/39.0.2166.2

Safari/537.36

Chrome Mac OS X



AppleWebKit/537.36

(KHTML, like Gecko)

Chrome/39.0.2166.2

Safari/537.36

Chrome Mac OS X


5.1) AppleWebKit/537.36

(KHTML, like Gecko)

Chrome/37.0.2062.124

Safari/537.36

Chrome Windows XP


6.3; WOW64)

AppleWebKit/537.36

(KHTML, like Gecko)

Chrome/37.0.2062.124

Safari/537.36


QUADRO 10 - Navegador e SO utilizados pelas pessoas que responderam a avaliação de usabilidade.


Como podemos perceber, todos os navegadores utilizados estão atualizados a

ponto de possuírem suporte ao web áudio. O Google Chrome tem um índice esmagador de

utilizadores, cerca de 80%. Mesmo as pessoas com Mac OS utilizaram o navegador da

Google ao invés do navegador nativo do sistema operacional (Safari).

79

7 CONSIDERAÇÕES FINAIS

As considerações finais abordam a melhoria do processo de desenvolvimento do

projeto em si, documentando e analisando pontos cruciais da memória do projeto. Aqui, foi

registrado a opinião pessoal de cada membro da equipe, conforme modelo de formulário

proposto por (DUTRA, 2007).

Lições Aprendidas

Título do Projeto: Desenvolvimento de Karaokê Web com conceitos de Gamificação

Data de Início do Projeto: 01/03/2014

Data de Entrega de Projeto: 24/10/2014

Seu nome: Felippe Rodrigo Puhle

Sua função no projeto: Gestor e desenvolvedor

Em sua opinião, cite três itens que mais

contribuíram para que o sucesso no

projeto pudesse ser obtido.

Comprometimento da equipe;

Conhecimento nas linguagens de programação

utilizadas;

Aquisição de equipamentos necessário para o

desenvolvimento.

Em sua opinião, quais os três itens que

contribuíram para que o projeto falhasse e

o que pode ser feito para evitar/prevenir

isto em projetos futuros?

Mal planejamento do projeto;

Falta de tempo para desenvolvimento;

Incompatibilidade do karaokê com

navegadores;

Devido à falta de experiência do gestor, o tempo de

desenvolvimento do projeto era bem menor do que

o previsto. Um gestor com maior experiência e uma

equipe maior (agregando maior conhecimento)

ajudaria a solucionar os problemas.

Identifique os obstáculos críticos ou

ponto chave que impediram o

desenvolvimento e o progresso do

projeto.

Como a equipe era composta por apenas uma

pessoa, as tarefas tiveram de ser desenvolvidas

consecutivamente. Com uma equipe maior, várias

tarefas poderiam ser feitas simultaneamente, e

alguns obstáculos poderiam ser contornados de

maneira mais rápida devido à variedade de

conhecimentos que seriam agregados desde a etapa

de planejamento do projeto.

80

Identifique os fatores críticos que

geraram um desvio significativo na

equipe:

As funções nativas de timeout do Javascript não

foram capazes de prover o desempenho necessário

para as funções recursivas do jogo. Foram feitos

diversos testes até chegarmos a uma solução.

Baseado em sua experiência neste

projeto, quais seriam as três

recomendações que você faria para uma

próxima equipe de projeto?

Planejar o projeto mais detalhadamente, de

maneira a conseguir mensurar melhor custos e

tempo para desenvolvimento;

Compor a equipe com um número maior de

membros, de maneira que o conhecimento de

cada pessoa agregue valor ao projeto;

Explorar outras linguagens de programação,

com recursos melhores ao tratamento do áudio.

Identifique pontos positivos no processo

de desenvolvimento do seu projeto:

Apesar do tempo de planejamento de cada tarefa ter

sido mensurado errado, a sequência e ordem de

elaboração e desenvolvimento facilitaram as

próximas etapas.

Identifique oportunidades de melhoria no

processo de desenvolvimento do seu

projeto:

Com uma equipe maior, o planejamento do projeto

seria diferente. A equipe poderia ser dividida em

equipes menores, e as etapas e tarefas divididas de

maneira que pudessem ser feitas de maneira

simultânea, onde cada equipe seria responsável

pelas tarefas correspondentes ao ponto forte dos

seus integrantes.

Novas Ideias e Oportunidades

Perspectivas Futuras

Adição de novos recursos ao jogo e aprimoramento da interface, visando atingir um maior

número de jogadores.

Além disto, deverão ser feitas melhorias na administração do site, de maneira que o cadastro de

músicas se torne fácil e intuitivo.

Outras informações relevantes

QUADRO 11 - Formulário de Lições Aprendidas.


81

7.1 LIÇÕES APRENDIDAS

Chegando ao fim do projeto, podemos perceber que o total sucesso do seu

desenvolvimento se deve aos conteúdos e propostas sugeridos por (DUTRA, 2007) e

(FACCIONI, 2006).

Através destes, foi possível manter o projeto rigorosamente em dia, através de

técnicas de controle e previsão de acontecimentos que poderiam atrasar sua entrega ou até

mesmo o seu cancelamento.

Um dos fatos a ser citado aqui é a utilização de funções recursivas. No

desenvolvimento de games, este tipo de função é comum. A recursividade trata de uma

função chamar a ela mesmo no término da sua execução. Porém, cuidados devem ser tomados

para não cair em um loop infinito.

Podemos destacar também o aprendizado adquirido no trabalho com a API do

web áudio. Através dela, a equipe pode desenvolver a lógica necessária para o

desenvolvimento da interface e funcionamento de um jogo.

7.2 NOVAS IDEIAS E OPORTUNIDADES

O projeto não deve parar por aí. Novas ideias já estão em etapa de planejamento e

pesquisa para futuros aprimoramentos e correções.

A primeira delas refere-se a integração de uma nova linguagem de programação

para o tratamento do áudio no momento do cadastro de uma nova música. Hoje, os

administradores do sistema precisam cadastrar manualmente as trocas de acordes (de

milissegundos em milissegundos), e isto é um processo trabalhoso. Através de algumas

pesquisas iniciais, encontramos algumas bibliotecas para tratamento de áudio nas linguagens

de programação Java e Python.

A segunda ideia refere-se ao tratamento de tempo durante o jogo. Hoje,

trabalhamos com a verificação do tempo de execução através de milissegundos de diferença

do início do jogo. Futuramente, pretendemos trabalhar com a noção de compassos e bpm

(batidas por minutos). Assim poderemos aprimorar o sistema de pontuação, cadastrando

exatamente qual nota o usuário deverá emitir para que pontue no jogo (diferentemente de

hoje, que pode ser cantado as três notas do acorde).

82

Terminando a divisão em compassos e cadastrando devidamente as notas emitidas

pelo usuário, tentaremos tornar o jogo multiplayer da seguinte maneira:

Cadastrar segunda e terceira voz (vocais de apoio);

Adição de outros instrumentos, jogando através do teclado ou de algum

equipamento que forneça suporte ao mapeamento midi.

A opção multiplayer fará com que o nível de dificuldade aumente, pois todos os

usuários deverão jogar em sincronia, porém, uma correta execução de todos fará com que a

pontuação atinja níveis não alcançados jogando sozinho.

Todas estas ideias deverão ser testadas cuidadosamente a fim de sabermos suas

viabilidades. Além disto, o aprimoramento do layout é um fator crucial para tornar o site mais

atrativo e conhecido pelo público alvo.

83

REFERÊNCIAS

BOOTSTRAP. Disponível em: <http://getbootstrap.com/>. Acesso em 25 jun 2014.

CAN I USE. Web Audio API. Disponível em: <http://caniuse.com/#feat=audio-api>. Acesso

em 05 jun 2014.

CODEIGNITER. Disponível em: <https://ellislab.com/codeigniter>. Acesso em 02 jul 2014.

DUTRA, Cynthia Beatriz Scheffer. Projeto Integrador Web (I e II). 3 ed. Palhoça:

UnisulVirtual, 2007.

FACCIONI FILHO, Mauro. Gestão de projetos e de equipes. 4 ed. Palhoça: UnisulVirtual,

2011.

FONT AWESOME. Disponível em: <http://fontawesome.io/>. Acesso em 26 jun 2014.

GITHUB. YuzuJS / setImmediate. Disponível em:

<https://github.com/YuzuJS/setImmediate>. Acesso em 18 set 2014.

GOOGLE. Site de buscas. Disponível em: <http://www.google.com.br>. Acesso em: 07 mar.

2014.

JQUERY. Disponível em: <http://jquery.com/>. Acesso em 23 jun 2014.

MACHADO, Pedro. Mercado de games movimenta US$ 2,63 bilhões no País e pode crescer

ainda mais. Disponível em:

<http://anoticia.clicrbs.com.br/sc/economia/negocios/noticia/2014/03/mercado-de-games-

movimenta-us-2-63-bilhoes-no-pais-e-pode-crescer-ainda-mais-4447494.html>. Acesso em

30 set 2014.

MDN – Mozilla Developer Network. API Web Áudio. Disponível em:

<https://developer.mozilla.org/pt-BR/docs/Web/API/API_Web_Audio>. Acesso em 02 jun

2014.

MDN – Mozilla Developer Network. CSS. Disponível em: <https://developer.mozilla.org/pt-

BR/docs/Web/CSS>. Acesso em 01 jul 2014.

MDN – Mozilla Developer Network. Javascript. Disponível em:

<https://developer.mozilla.org/pt-BR/docs/Web/JavaScript>. Acesso em 01 jul 2014.

MYSQL. Disponível em: <http://www.mysql.com/>. Acesso em 30 jun 2014.

Newzoo Games Market Research. Asia-Pacific Contributes 82% of the $6Bn Global Games

Market Growth in 2014. Disponível em: <http://www.newzoo.com/insights/asia-pacific-

contributes-82-6bn-global-games-market-growth/>. Acesso em 01 out 2014.

PAGESPEED TOOLS. Disponível em: <https://developers.google.com/speed/pagespeed/>.

Acesso em 05 out 2014.

http://www.google.com.br/

http://www.mysql.com/

84

PHP. Disponível em: <http://php.net/>. Acesso em 30 jun 2014.

TOTVS. Gamification: conheça essa tendência. Disponível em:

<http://blog.totvs.com/gamification-conheca-essa-tendencia/>. Acesso em 26 set 2014.

W3CSCHOOLS. Site com conteúdo para desenvolvedores. Disponível em:

<http://www.w3schools.com>. Acesso em: 07 mar. 2014.

WEBPAGE TEST. Test a website’s performance. Disponível em:

<http://www.webpagetest.org/>. Acesso em 05 out 2014.

WIKIPEDIA. Anexo: Lista de navegadores. Disponível em:

<http://pt.wikipedia.org/wiki/Anexo:Lista_de_navegadores>. Acesso em 02 jun 2014.

WIKIPEDIA. Cascading Style Sheets. Disponível em:

<http://pt.wikipedia.org/wiki/Cascading_Style_Sheets>. Acesso em 01 jul 2014.

WIKIPEDIA. CodeIgniter. Disponível em: <http://pt.wikipedia.org/wiki/CodeIgniter>.

Acesso em 02 jul 2014.

WIKIPEDIA. Enciclopédia online. Disponível em: <http://www.wikipedia.org>. Acesso em:

07 mar. 2014.

WIKIPEDIA. Javascript. Disponível em: <http://pt.wikipedia.org/wiki/JavaScript>. Acesso

em 01 jul 2014.

WIKIPEDIA. jQuery. Disponível em: <http://pt.wikipedia.org/wiki/JQuery>. Acesso em 23

jun 2014.

WIKIPEDIA. MySQL. Disponível em: <http://pt.wikipedia.org/wiki/MySQL>. Acesso em 30

jun 2014.

WIKIVERSIDADE. Teoria Musical. Disponível em:

<http://pt.wikiversity.org/wiki/Teoria_musical>. Acesso em 10 set 2014.

http://php.net/

http://www.w3schools.com/

http://www.wikipedia.org/

Software

Monografia - UNISUL