Utilizador:Celebrate voices

Da Lab. Multimédia 1
(Diferença entre edições)
Ir para: navegação, pesquisa
(Criou nova página com 'O nosso grupo: Inês Graça nº67974 Paulo Bruno nº59588 João Campos nº68265 Cátia Estima nº69573 '''Tema:''' Música '''Subt...')
 
 
(37 edições intermédias de 2 utilizadores não apresentadas)
Linha 1: Linha 1:
−
O nosso grupo:  
+
[[Ficheiro:relatorio_lab1.pdf]]
−
          Inês Graça nº67974
+
−
          Paulo Bruno nº59588
+
−
          João Campos nº68265
+
−
          Cátia Estima nº69573
+
  
−
'''Tema:''' Música
 
  
−
'''Subtema:'''Karaoke
+
==Apresentação do Projeto==
 +
===Elementos do Grupo===
 +
*[http://wikis.ua.pt/labmm1/index.php/Utilizador:Catiaestima  Cátia Estima]
  
−
'''Projeto:'''
+
*[http://wikis.ua.pt/labmm1/index.php/Utilizador:Joao_Campos  João Campos]
−
    O nosso projeto baseia-se numa aplicação multimédia de música e de entretenimento. Pretende-se com esta aplicação que o utilizador interaja com os diferentes meios de navegação de uma forma divertida e interativa.
+
 
−
    Esta aplicação terá imagens, texto, video, som e animação. O utilizador poderá visualizar e ouvir diferentes grupos e estilos musicais, cantar e ,ainda, jogar.
+
*[http://wikis.ua.pt/labmm1/index.php/Utilizador:Paulo.j.bruno  Paulo Bruno]
 +
 
 +
===Temática do Projeto===
 +
[[Ficheiro:Musicwiki.jpg‎]] [[Ficheiro:KARAOKEwiki.jpg]]
 +
 
 +
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á futuramente 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.
 +
 
 +
====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 utilizador poderá aceder a determinadas animações, informações e imagens.
 +
 
 +
[[Ficheiro:2012-12-23 21.31.57.jpg|500px]]
 +
 
 +
 
 +
==Desenho Funcional==
 +
===Requisitos Funcionais===
 +
Os requisitos funcionais da nossa aplicação são:
 +
 
 +
[[Ficheiro:tabela1.png|500px]]
 +
 
 +
===Estrutura Arborescente===
 +
 
 +
[[Ficheiro:estrutura_caderno.JPG|500px]]
 +
 
 +
[[Ficheiro:lab1_estrutura.jpg]]
 +
 
 +
A nossa aplicação tem uma animação (loading) para permitir ao utilizador aceder ao menu inicial, homepage.
 +
 +
A homepage é constituída por três menus: karaoke, loja e contatos. Na transição dos menus existe uma animação.
 +
 
 +
No menu karaoke, o utilizador  visualiza 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 é constituída por vários links que correspondem a cd´s de música, onde o utilizador pode comprar. Ao aceder a estes links visualiza a imagem dos cd´s e a respetiva lista de canções que compõe o álbum.
 +
 
 +
O menu contatos apresenta três links, onde tem acesso aos sites do youtube, facebook e ao email do site.
 +
 
 +
É de salientar que há uma música de fundo. Durante a transição dos menus há um som e o utilizador durante o “play da música” no menu karaoke ouve a música instrumental para cantar.
 +
 
 +
Esta aplicação é constituída por 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 das 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 itens de navegação.
 +
 
 +
=====Loading=====
 +
 
 +
[[Ficheiro:loading.png|500px]]
 +
 
 +
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=====
 +
 
 +
[[Ficheiro:homepage normal.png|500px]]
 +
 
 +
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=====
 +
 
 +
[[Ficheiro:KARAOKE NORMAL.png|500px]]
 +
 
 +
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======
 +
 
 +
[[Ficheiro:KARAOKE PLAY.png|500px]]
 +
 
 +
======Karaoke:Informação======
 +
 
 +
[[Ficheiro:KARAOKE INFO.png|500px]]
 +
 
 +
======Karaoke:Jogo======
 +
 
 +
[[Ficheiro:KARAOKE JOGO.png|500px]]
 +
 
 +
=====Loja=====
 +
 
 +
[[Ficheiro:LOJA normal.png|500px]]
 +
 
 +
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======
 +
 
 +
[[Ficheiro:LOJA compra.png|500px]]
 +
 
 +
=====Contatos=====
 +
 
 +
[[Ficheiro:contactos normal.png|500px]]
 +
 
 +
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:
 +
 
 +
[[Ficheiro:palete.jpg]]
 +
 
 +
====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.
 +
 
 +
[[Ficheiro:fonte.png|500px]]
 +
[[Ficheiro:fontebold.png|500px]]
 +
 
 +
====Texto====
 +
A apresentação do texto na aplicação é pouco excessivo, não tornando massador para o utilizador. É de fácil leitura;
 +
 
 +
====Meios de Navegação====
 +
Os meios de navegação utilizados permite ao utilizador navegar apenas com um clique 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.
 +
 
 +
[[Ficheiro:sing_it.jpg|500px]]
 +
 
 +
====Síntese dos príncipios básicos de interação e interface====
 +
 
 +
[[Ficheiro:sintese.png|500px]]
 +
 
 +
==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 video.
 +
O recurso  à linguagem de scrip, ActionScrip0.2, permitiu definir 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==
 +
===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=====
 +
 
 +
[[Ficheiro:compra.png|500px]]
 +
 
 +
Esta janela é visível no menu loja quando o utilizador  clica no botão de compra. Esta janela apresenta os métodos de pagamento dos álbuns de música;
 +
 
 +
=====menu=====
 +
 
 +
[[Ficheiro:janela.png|200px]] [[Ficheiro:Untitlsfged-1.png|200px]]
 +
 
 +
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.
 +
 
 +
[[Ficheiro:menu.png|500px]]
 +
 
 +
No menu Karaoke quando utilizador acede ao menu jogo irá deparar-se com botões de controlo do jogo;
 +
 
 +
[[Ficheiro:botao_corrigir.png|100px]] [[Ficheiro:botao_validar.png|100px]] [[Ficheiro:botao_seguinte.png|100px]]
 +
 
 +
No menu contatos, é visivel também três botões de texto, o que correspondem aos links do youtube, facebook e email.
 +
 
 +
[[Ficheiro:botoes_contatos.png|500px]]
 +
 
 +
======botões em gráficos======
 +
 
 +
[[Ficheiro:botao_play.png|100px]] [[Ficheiro:botao_inf.png|100px]] [[Ficheiro:Untitled-1.png|100px]]
 +
 
 +
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.
 +
 
 +
[[Ficheiro:btn.png|50px]] [[Ficheiro:botao_semsom.png|50px]] [[Ficheiro:33.png|50px]]
 +
 
 +
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====
 +
O utilizador visualizará a animação do loading, 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;
 +
 
 +
[[Ficheiro:loading indicaçoes.png|500px]]
 +
 +
====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====
 +
É visível no 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;
 +
 
 +
[[Ficheiro:cen.png|500px]]
 +
 
 +
====Animações dos botões====
 +
A passagem do rato (rollover) apresenta a mudança visual dos botões (play, informação, jogo, compra, contatos, etc) e o clique do rato (release) nos botões apresentados permite aceder aos menus, janelas, links e entre outros;
 +
 
 +
[[Ficheiro:LOJA compra.png|500px]]
 +
 
 +
====Video====
 +
O video encontra-se no play do Karaoke e aparece em simultâneo com animação da letra da música.
 +
 
 +
[[Ficheiro:cen.png|500px]]
 +
 
 +
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;
 +
- 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 permitir ao utilizador ter autonomia para parar, aumentar ou diminuir o volume do som, pausa, 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 atrativos. A utilização do link do email funciona como um sistema de ajuda.
 +
 
 +
É 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===
 +
 
 +
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/álbuns 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.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/
 +
 
 +
PDF´s das aulas de Laboratório Multimédia1
 +
 
 +
 
 +
==Anexos==
 +
 
 +
===Adobe Photoshop===
 +
 
 +
[[Ficheiro:contactos.psd]]
 +
 
 +
[[Ficheiro:homepage.psd]]
 +
 
 +
[[Ficheiro:KARAOKE.psd]]
 +
 
 +
[[Ficheiro:loading.psd]]
 +
 
 +
[[Ficheiro:LOJA.psd]]
 +
 
 +
===Adobe Ilustrator===
 +
 
 +
[[Ficheiro:botao carrinho.ai]]
 +
 
 +
[[Ficheiro:botão informacao.ai]]
 +
 
 +
[[Ficheiro:botao_pontos.ai]]
 +
 
 +
[[Ficheiro:botoes.ai]]
 +
 
 +
[[Ficheiro:corrigir.ai]]
 +
 
 +
[[Ficheiro:corrigir1.ai]]
 +
 
 +
[[Ficheiro:microfone.ai]]
 +
 
 +
[[Ficheiro:seguinte.ai]]
 +
 
 +
[[Ficheiro:seguinte1.ai]]
 +
 
 +
[[Ficheiro:validar.ai]]
 +
 
 +
[[Ficheiro:validar1.ai]]
 +
 
 +
===Adobe Flash===
 +
 
 +
[[Multimédia:FICHEIRO FINAL.swf]]
 +
 
 +
===Ficheiros de Som===
 +
 
 +
[[Multimédia:sound2.mp3]]

Edição actual desde as 17h29min de 17 de Janeiro de 2013

Ficheiro:Relatorio lab1.pdf


Índice

Apresentação do Projeto

Elementos do Grupo

Temática do Projeto

Musicwiki.jpg KARAOKEwiki.jpg

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á futuramente 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.

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 utilizador poderá aceder a determinadas animações, informações e imagens.

2012-12-23 21.31.57.jpg


Desenho Funcional

Requisitos Funcionais

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

Tabela1.png

Estrutura Arborescente

Estrutura caderno.JPG

Lab1 estrutura.jpg

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

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

No menu karaoke, o utilizador visualiza 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 é constituída por vários links que correspondem a cd´s de música, onde o utilizador pode comprar. Ao aceder a estes links visualiza a imagem dos cd´s e a respetiva lista de canções que compõe o álbum.

O menu contatos apresenta três links, onde tem acesso aos sites do youtube, facebook e ao email do site.

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

Esta aplicação é constituída por 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 das 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 itens de navegação.

Loading

Loading.png

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

Homepage normal.png

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

KARAOKE NORMAL.png

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 PLAY.png

Karaoke:Informação

KARAOKE INFO.png

Karaoke:Jogo

KARAOKE JOGO.png

Loja

LOJA normal.png

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

LOJA compra.png

Contatos

Contactos normal.png

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:

Palete.jpg

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.

Fonte.png Fontebold.png

Texto

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

Meios de Navegação

Os meios de navegação utilizados permite ao utilizador navegar apenas com um clique 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.

Sing it.jpg

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

Sintese.png

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 video. O recurso à linguagem de scrip, ActionScrip0.2, permitiu definir 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

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

Compra.png

Esta janela é visível no menu loja quando o utilizador clica no botão de compra. Esta janela apresenta os métodos de pagamento dos álbuns de música;

menu

Janela.png Untitlsfged-1.png

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.

Menu.png

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

Botao corrigir.png Botao validar.png Botao seguinte.png

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

Botoes contatos.png

botões em gráficos

Botao play.png Botao inf.png Untitled-1.png

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.

Btn.png Botao semsom.png 33.png

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

O utilizador visualizará a animação do loading, 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;

Loading indicaçoes.png

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

É visível no 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;

Cen.png

Animações dos botões

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

LOJA compra.png

Video

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

Cen.png

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; - 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 permitir ao utilizador ter autonomia para parar, aumentar ou diminuir o volume do som, pausa, 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 atrativos. A utilização do link do email funciona como um sistema de ajuda.

É 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

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/álbuns 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.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/

PDF´s das aulas de Laboratório Multimédia1


Anexos

Adobe Photoshop

Ficheiro:Contactos.psd

Ficheiro:Homepage.psd

Ficheiro:KARAOKE.psd

Ficheiro:Loading.psd

Ficheiro:LOJA.psd

Adobe Ilustrator

Ficheiro:Botao carrinho.ai

Ficheiro:Botão informacao.ai

Ficheiro:Botao pontos.ai

Ficheiro:Botoes.ai

Ficheiro:Corrigir.ai

Ficheiro:Corrigir1.ai

Ficheiro:Microfone.ai

Ficheiro:Seguinte.ai

Ficheiro:Seguinte1.ai

Ficheiro:Validar.ai

Ficheiro:Validar1.ai

Adobe Flash

Multimédia:FICHEIRO FINAL.swf

Ficheiros de Som

Multimédia:sound2.mp3

Obtida de "http://wikis.ua.pt/labmm1/index.php?title=Utilizador:Celebrate_voices"
Ferramentas pessoais
Espaços nominais
Variantes
Acções
Navegação
Ferramentas