Utilizador:Celebrate voices

Revisão das 16h33min de 14 de Janeiro de 2013

Apresentação do Projeto

Elementos do Grupo

• Cátia Estima

• João Campos

• Paulo Bruno

Temática do Projeto

1.Propósito do Projeto

O nosso projeto, como proposta para as unidades curriculares de Laboratório Multimédia 1 e de Imagem Digital Estática, baseia-se numa aplicação multimédia interativa de música e de entretenimento. Pretende-se com esta aplicação que o utilizador interaja com os diferentes meios de navegação e animação, de uma forma divertida e interativa.

Esta aplicação incluirá imagens, texto, video, som e animação. O público alvo (qualquer pessoa alfabetizada) poderá visualizar e ouvir diferentes grupos e géneros musicais, cantar, obter informações e ainda jogar.

Esta aplicação será de distribuição on-line e poderá ser utilizada por qualquer utilizador desde que esteja ligado a uma rede.

O desenvolvimento e o avanço tecnológico permitiu um crescimento alargado na utilização do “karaoke” em diferentes meios tecnológicos e multimédia interativos. Visto que o karaoke proporciona diversão, entretenimento, convívio e distração, consideramos de grande interesse trabalhar neste projeto.

2.Análise e Planeamento

Um pouco de história...

O termo karaoke surgiu no século XX, na década de 70 no Japão. Foi inventado por Daisuke Inoue e significa “sem orquestra”. Ao longo do tempo, a apresentação do karaoke foi evoluindo com a utilização de meios mais sofisticados. Tornou-se muito popular e rapidamente se difundiu por todas as partes do mundo.

As nossas pesquisas...

Através da visualização de alguns sites de karaoke (por exemplo,http://www.thekaraokechannel.com) ,pensamos como poderia ser constituída a nossa aplicação e através da conversação e da apresentação de ideias dos elementos do grupo permitiu-nos pensar em aspetos importantes para iniciar o nosso projecto.

Aplicação Multimédia

Inicialmente, pensamos numa aplicação que iria abrange cinco músicas cantadas em karaoke, mas em conversação com os docentes das áreas curriculares: Imagem Digital Estática e Laboratório Multimédia 1, pensamos em optar por utilizar apenas duas músicas. Contudo, esta aplicação será constituída por duas músicas, mas futuramente, poderá ter muito mais. Outra das alterações efetuadas foi a mudança do nome do projeto “Celebrate voices” para “Sing it”, pois concordamos que seria mais atrativo e de fácil memorização.

Layout

Após algumas pesquisas, conversas e rabiscos concordamos em apresentar um layout baseado no paradigma de interação index. É constituído por um sistema de menus, onde o ulizador poderá aceder a determinadas animações, informações e imagens.

3.Desenho Funcional

3.1 Requisitos Funcionais

Os requisitos funcionais da nossa aplicação são:

3.2.Estrutura Arborescente

A nossa aplicação terá uma animação (loading) para permitir ao utilizador aceder ao menu inicial, homepage.

A homepage será constituída por três menus: karaoke, loja e contatos. Na transição dos menus terá uma animação.

No menu karaoke, o utilizador irá visualizar uma galeria com algumas músicas. Ao selecionar a música poderá cantar (menu: música – Play), obter informações do álbum (menu: informações) e ainda, jogar (menu: jogo).

A loja será constituída por vários links que correspondem a cd´s de música, onde o utilizador poderá comprar. Ao aceder a estes links visualizará a imagem dos cd´s e a respetiva lista de canções que compõe o álbum.

O menu contatos apresentará dois links: email e o like. O like funcionará do género do “facebook”.

É de salientar que haverá uma música de fundo. Durante a transição dos menus haverá um som e o utilizador durante o “play da música” no menu karaoke terá a música instrumental para cantar.

Esta aplicação será constituída por uma ou duas músicas, mas futuramente, poderá ter muito mais.

3.3 Desenho de Interação e Usabilidade

A criação de uma aplicação multimédia exige ir ao encontro das necessidades e desejos do utilizador para permitir uma facilidade de acesso e compreensão da estrutura, percursos e meios de navegação apresentados.

No nosso projeto tivemos o cuidado de permitir ao utilizador maior facilidade na realização de tarefas básicas numa primeira utilização da nossa aplicação, a compreensão do modo de funcionamento, a facilidade de memorização e tornar agradável a utilização da aplicação.

É importante salientar as carateristicas fundamentas de interação e usabilidade da aplicação: os cenários, as cores, o tipo de letra, o texto e os meios de navegação/interação.

Cenários

A estrutura da aplicação é de fácil reconhecimento e compreensão para o utilizador e permite rápido acesso aos items de navegação.

Loading

Neste cenário está presente o logotipo e o loading com a respetiva animação. Utilizamos uma cor de fundo escura de forma a salientar a informação que pretendemos transmitir ao utilizador.

Homepage

O utilizador terá acesso à homepage depois de realizada a animação: loading. A homepage é constituída por três menus: karaoke, loja e contatos, imagens ilustrativas e um texto informativo sobre o que iremos apresentar na nossa aplicação multimédia.

Karaoke

O cenário karaoke é constituído por um menu com uma lista de imagens de cd´s com a informação do artista ou grupo musical e a respetiva música. O utilizador ao selecionar uma destas imagens e clicar nos botões abaixo do ecrã poderá cantar em karaoke (karaoke:Play), visualizar a informação do artista/grupo musical (karaoke:Informação) e ainda, jogar (Karaoke:Jogo).

Karaoke:Play

Karaoke:Informação

Karaoke:Jogo

Loja

Na loja, o utilizador visualiza imagens de cd´s de música com respetivo nome do cd e o seu preço. Será possível comprar se clicar no botão da compra (Loja:Compra).

Loja:Compra

Contatos

Neste cenário, o utilizador visualiza três links para aceder ao site do youtube, do facebook e ao email do site Karaoke.

Palete de cores

Através das nossas pesquisas, verificamos que o subtema Karaoke deveria abranger um conjunto de cores simples e apelativas, visto que se trata de uma aplicação de entretenimento, cores visíveis e de fácil leitura, pois o utilizador irá interagir com diferentes meios de navegação e animação, que é o caso de cantar em karaoke e cores populares em meios audiovisuais musicais. A paleta de cores escolhida foi:

Fonte

A fonte de letra escolhida foi: “Code Light e Bold”. Optamos por utilizar esta fonte pelo facto de ser informativa, de fácil leitura e de rápida percepção por parte do utilizador. Consideramos que esta fonte apresenta características e pormenores simplistas de carater informativo.

Texto

A apresentação do texto na aplicação é pouco excessivo, não tornando massador para o utilizador,sendo de fácil leitura;

Meios de Navegação

Os meios de navegação utilizados permite ao utilizador navegar apenas com um click e com os botões apresentados, o utilizador consegue identificar em que ponto de estrutura se encontra e para onde navegar, isto porque os botões são perceptíveis pelas cores e imagens utilizadas, apresentam um som de transição, tem uma identificação visual e existe botões de retorno para uma facilidade de acesso a outros meios de animação.

Logotipo

Deste subtema: o karaoke começamos por pensar num logotipo, uma representação e elemento gráfico de marca, como identificação do nosso projeto. Surgiu-nos a ideia de um nome “Celebrate Voices”, cujo seu símbolo seria uma pessoa a cantar. Pelas nossas pesquisas consideramos subtil e muito popular, em que optamos por algo diferente e mais simples, cujo nome é “Sing It” , tendo como elementos gráficos formas geométricas. Inicialmente, o logótipo continha muitos elementos vetorizados, então simplificamos como se vê na imagem abaixo.

Síntese dos príncipios básicos de interação e interface

4. Desenho Técnico

A nossa aplicação multimédia foi implementada numa ferramenta de autoria multimédia, o Adobe Flash (versão CS5). É uma plataforma multimídia de desenvolvimento de aplicações interativas para distribuição on-line devido ao tamanho reduzido de ficheiros, não só pelo uso extensivo de elementos vetoriais, mas também pela codificação utilizada na exportação de ficheiros.

O adobe flash foi fundamental , pois permitiu manipular vetores e gráficos para criar textos animados, desenhos, imagens e até streaming de audio e video pela Internet. O recurso à linguagem de scrip, ActionScrip0.2, permitiu defenir eventos e ações na nossa aplicação, tornando-a mais atrativa, dinâmica e divertida. Na edição das imagens foram utilizados o adobe Photoshop (CS5) e Adobe Ilustrator (CS5).

Para visualizar esta aplicação é necessário placas de som e colunas ou auscultadores e o software Flash Player instalado no computador. Em termos futuros será necessário uma ligação à Internet, um browser instalado no computador e como já referido anteriormente, placa de som, colunas ou auscultadores e o software Flash Player instalado no computador.

5.Produção do Projeto

5.1.Estrutura e Meios de Navegação e Interação

A nossa aplicação disponibiliza um conjunto de meios de navegação/interação que facilitam o utilizador navegar de uma forma simples, rápida e eficaz.

Esta aplicação baseia-se no paradigma index e através da sua exploração é possível visualizar listagens de conteúdos, informações, animações e imagens.

Os meios de navegação/interação disponíveis na nossa aplicação são:

janelas

Esta janela é visivel no menu loja quando o utilizador clica no botão de compra. Esta janela apresenta os métodos de pagamento dos albúns de música;

menu

Estes menus estão presentes quando o utilizador acede ao menu karaoke e escolhe o álbum para poder cantar em karaoke e visualizar a informação do artista/grupo musical

botões

botões de texto

Após o loading, o utilizador no menu homepage encontra três botões de texto: karaoke, loja e contatos.

No menu Karaoke quando utilizador acede ao menu jogo irá deparar-se com botões de controlo de jogo;

No menu contatos, é visivel também três botões de texto, o que correspondem aos links do youtube, facebook e email.

botões em gráficos

Ao longo da exploração da aplicação, o utilizador irá encontrar este tipo de botões. O utilizador facilmente identifica as funcionalidades destes botões pelas suas caraterísticas visuais e gráficas. Os botões permitem jogar, informar, cantar, comprar e entre outros.

5.2 Integração e controlo de som

Todo o nosso projeto está relacionado com a música, o que leva a referir que a nossa aplicação exige a integração e controlo do som.

Ao longo da exploração da nossa aplicação, o utilizador vai deparar-se com um som de fundo, um som de transição entre menus e sons musicais relacionados com os álbuns de karaoke.

Após o loading, o utilizador acede à homepage da aplicação, onde terá um som de fundo. É possível navegar na aplicação com ou sem este som, basta o utilizador aceder aos botões gráficos que se encontram na parte superior direita do layout. O utilizador pode, ainda, escolher o volume do som utilizando a função de controlo de som.

No menu karaoke é possível visualizar e ouvir os videoclips com os sons musicais relacionados com os álbuns apresentados no menu. O utilizador pode fazer play, pause e stop.

Durante elaboração das funcionalidades do som foi necessário criar uma linkage e aplicar identificadores aos sons. Criou-se variáveis de som, attachSound, no sentido de ser possível de fazer start, play, stop, setVolume aos sons apresentados.

5.3 Animação

As animações presentes na nossa aplicação multimédia são:

Animação de imagens

Inicialmente, o utilizador visualizará a animação do loading, de seguida a animação do logotipo que estará presente em toda a navegação da aplicação, animação do aparecimento das linhas de correção no menu Jogo e animação de transição de cenários ;

Animação de transição dos cenários

Esta animação está presente quando acede aos cenários: homepage, karaoke, loja, contatos, onde se verifica a animação das imagens: microfone, logotipo, ecrã, botões,menus, janelas;

Animações do texto

O aparecimento de caixas de textos, animação da letra das músicas quando acede-se ao menu play do cenário Karaoke e a mudança das palavras quando o utilizador se encontra no menu jogo do cenário Karaoke;

Animações dos botões

A passagem do rato (rollover) é visível a mudança de visual dos botões (play, informação, jogo, compra, contatos, etc) e o clique do rato (release) nos botões apresentados que permite aceder aos menus, janelas, links e entre outros;

Video

O video encontra-se no no play do Karaoke e aparece em simultâneo com animação da letra da música.

As animações realizadas foram efetuadas frame-a-frame, keyframe e aplicação de ações e eventos da passagem e clique do rato através do actionscrip 0.2.

5.4 Soluções técnicas para a resolução de problemas

Ao longo da construção da aplicação tivemos o cuidado de satisfazer as necessidades e desejos do utilizador.

As soluções técnicas apresentadas para evitar erros e problemas da aplicação foram: - apresentar uma aplicação semelhante aos de músicas de karaoke com objetivo de o utilizador apresentar um relação de familiaridade e não de estranheza; - optamos por apresentar apenas uma ou duas músicas invés de cinco músicas, como tínhamos pensado inicialmente, pois iria sobrecarregar o sistema; - apresentar uma estrutura do layout simples e de fácil identificação dos eventos e ações a realizar pelo utilizador; - criar um controlo de som da aplicação de forma ao utilizador ter autonomia para parar, aumentar ou diminuir o volume do som, pause, seguinte e play do som; - utilização de ações como passagem do rato (rollover) e clique do rato (release) de forma facilitar rápido e eficaz acesso aos menus; - utilização de um ecrã de forma a incentivar o utilizador à descoberta; - simplificamos a forma de correção das palavras do jogo utilizando linhas a vermelho invés do aparecimento de palavras com preenchimentos a vermelho e a verde,tornando menos chocante e desagradável; - pretendeu-se colocar streaming do vídeo de forma a tornar o play do karaoke atrativo; - apresentamos links de acesso aos sites youtube e facebook para utilizador poder explorar e adquirir mais informação fora da aplicação, utilizando sites usuais e de atrativos. A utilização do link do email funciona como um sistema de ajuda de informações e dúvidas do utilizador.

É de salientar que todas estas funcionalidades e soluções técnicas devem ser melhoradas e aperfeiçoadas futuramente.

6.Conclusões

6.1 Reflexão Crítica

Desde da ideia até ao momento da conceção do projeto deparamos com mudanças de ideias, planos, dificuldades, melhoramentos, limitações e contribuições na construção da aplicação multimédia.

Este projeto contribuiu de uma forma significativa no nosso conhecimento e aperfeiçoamento do estudo realizado no âmbito das disciplinas Laboratório Multimedia 1 e Imagem Digital Estática. Não só deparamos com certas dificuldades a nível gráfico da utilização do Adobe Photoshop e Adobe Ilustrator como a utilização do Adobe Flash e acções e eventos do ActionScript 0.2 que exigiu uma investigação e um estudo das suas funcionalidades.

Toda estrutura, funcionalidades, caraterísticas gráficas foi a pensar em satisfazer o utilizador para uma rápida, eficaz, atrativa e divertida exploração e navegação da nossa aplicação.

Esta aplicação pode ser melhorada e aperfeiçoada futuramente.

6.2 Sugestões para o aperfeiçoamento e/ou desenvolvimento futuro do projeto

Como já referido anteriormente, a nossa aplicação pode ser aperfeiçoada e melhorada futuramente. Trata-se de uma aplicação atrativa que, hoje em dia, é muito usual ser utilizada não só entre amigos como entre família, de todas as idades.

Esta aplicação foi pensada no sentido de ser possível o seu desenvolvimento em termos futuros: - apresentar uma maior de escolha em termos de artistas/álbuns musicais; - ser possível ligar à Internet; - ser possível efetuar a compra dos álbuns musicais; - criar um registo do visitante, efetuando um login com o nome de utilizador e password; - audição não apenas da música do karaoke, mas de outras músicas dos artistas/albums musicais como elementos de diversão e informação; - visualização de videoclips, festivais, concertos e outros; - apresentar uma atualização dos álbuns lançados; - utilizar mais elementos dinâmicos e atrativos nos menus apresentados.

O desenvolvimento e aperfeiçoamento desta aplicação pode ter vantagens não só em termos de divertimento, mas também como um meio comercial de compra e venda.

7. Referências Web e bibliográficas

http://pt.wikipedia.org/wiki/Karaok%C3%AA

http://www.casamaravilhas.com/festasespeciais/DefinicaoKaraoke.html

http://www.karaokenet.com.br/RealOrche/historia_do_karaoke.htm

http://www.karaokeparty.com

http://www.karaoke.com

http://www.thekaraokechannel.com

http://www.singsnap.com

http://karaokescene.com

http://www.fotosearch.com.br/fotos-imagens/karaoke.html

http://www.colourlovers.com/

8. Anexos