Utilizador:Celebrate voices
| Linha 310: | Linha 310: | ||
http://www.colourlovers.com/ | http://www.colourlovers.com/ | ||
| + | |||
| + | PDF´s das aulas de Laboratório Multimédia1 | ||
==Anexos== | ==Anexos== | ||
Revisão das 18h52min de 14 de Janeiro de 2013
Índice
|
Apresentação do Projeto
Elementos do Grupo
Temática 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.
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.
Desenho Funcional
Requisitos Funcionais
Os requisitos funcionais da nossa aplicação são:
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.
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;
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
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.
Produção do Projeto
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;
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.
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.
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.
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.
Conclusões
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.
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.
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.thekaraokechannel.com
http://www.fotosearch.com.br/fotos-imagens/karaoke.html
PDF´s das aulas de Laboratório Multimédia1
