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.

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.

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.

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:

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.

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.

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 é “felippe@dblinks.com.br” e a senha “123456”, ambos sem as aspas.

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.

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.

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.

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.

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.

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.

Monografia - UNISUL

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (19)

Semelhante a Monografia - UNISUL

Semelhante a Monografia - UNISUL (20)

Monografia - UNISUL