Utilizador:Celebrate voices

Da Lab. Multimédia 1
(Diferença entre edições)
Ir para: navegação, pesquisa
 
(6 edições intermédias de um utilizador não apresentadas)
Linha 1: Linha 1:
 +
[[Ficheiro:relatorio_lab1.pdf]]
 +
 +
 
==Apresentação do Projeto==
 
==Apresentação do Projeto==
 
===Elementos do Grupo===
 
===Elementos do Grupo===
Linha 12: Linha 15:
 
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.  
 
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 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.
+
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.
 
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.
Linha 29: Linha 32:
 
====Aplicação Multimédia====
 
====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.
 
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.
+
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====
 
====Layout====
 
Após algumas pesquisas, conversas e rabiscos concordamos em apresentar um layout baseado no paradigma de interação index.
 
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.
+
É 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]]
 
[[Ficheiro:2012-12-23 21.31.57.jpg|500px]]
Linha 50: Linha 53:
 
[[Ficheiro:lab1_estrutura.jpg]]
 
[[Ficheiro:lab1_estrutura.jpg]]
  
−
A nossa aplicação terá uma animação (loading) para permitir ao utilizador aceder ao menu inicial, homepage.  
+
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.
  
−
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  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).
  
−
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 é 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.
  
−
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 apresenta três links, onde tem acesso aos sites do youtube, facebook e ao email do site.  
  
−
O menu contatos apresentará dois links: email e o like. O like funcionará do género do “facebook”.
+
É 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.
  
−
É 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 é constituída por duas músicas, mas futuramente, poderá ter muito mais.
−
 
+
−
Esta aplicação será constituída por uma ou duas músicas, mas futuramente, poderá ter muito mais.
+
  
 
===Desenho de Interação e Usabilidade===
 
===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.
 
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.  
+
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.
 
É 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====
 
====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.
+
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=====
Linha 84: Linha 87:
 
[[Ficheiro:homepage normal.png|500px]]
 
[[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.
+
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=====
Linha 133: Linha 136:
  
 
====Texto====
 
====Texto====
−
A apresentação do texto na aplicação é pouco excessivo, não tornando massador para o utilizador,sendo de fácil leitura;
+
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====
 
====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.
+
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====
 
====Logotipo====
Linha 151: Linha 154:
 
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.
 
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 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 defenir eventos e ações na nossa aplicação, tornando-a mais atrativa, dinâmica e divertida.
+
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).
+
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  
+
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.  
−
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.  
+
  
  
Linha 171: Linha 173:
 
[[Ficheiro:compra.png|500px]]
 
[[Ficheiro:compra.png|500px]]
  
−
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;
+
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=====
 
=====menu=====
Linha 185: Linha 187:
 
[[Ficheiro:menu.png|500px]]
 
[[Ficheiro:menu.png|500px]]
  
−
No menu Karaoke quando utilizador acede ao menu jogo irá deparar-se com botões de controlo de jogo;
+
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]]
 
[[Ficheiro:botao_corrigir.png|100px]] [[Ficheiro:botao_validar.png|100px]] [[Ficheiro:botao_seguinte.png|100px]]
Linha 218: Linha 220:
  
 
====Animação de imagens====
 
====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 ;
+
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]]
 
[[Ficheiro:loading indicaçoes.png|500px]]
 
 
 
====Animação de transição dos 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;
+
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====  
 
====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;
+
É 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]]
 
[[Ficheiro:cen.png|500px]]
  
 
====Animações dos botões====  
 
====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;
+
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]]
 
[[Ficheiro:LOJA compra.png|500px]]
  
 
====Video====
 
====Video====
−
O video encontra-se no no play do Karaoke e aparece em simultâneo com animação da letra da música.
+
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]]
 
[[Ficheiro:cen.png|500px]]
Linha 248: Linha 250:
 
As soluções técnicas apresentadas para evitar erros e problemas da aplicação foram:
 
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;
 
- 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;
+
- 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;
 
- 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;
+
- 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 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;
 
- 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;
 
- 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;
 
- 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.
+
- 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.
 
É de salientar que todas estas funcionalidades e soluções técnicas devem ser melhoradas e aperfeiçoadas futuramente.
Linha 273: Linha 275:
 
===Sugestões para o aperfeiçoamento e/ou desenvolvimento futuro do projeto===
 
===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.  
 
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.  
  
Linha 281: Linha 282:
 
- ser possível efetuar a compra dos álbuns musicais;
 
- ser possível efetuar a compra dos álbuns musicais;
 
- criar um registo do visitante, efetuando um login com o nome de utilizador e password;
 
- 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;
+
- 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;
 
- visualização de videoclips, festivais, concertos e outros;
 
- apresentar uma atualização dos álbuns lançados;
 
- apresentar uma atualização dos álbuns lançados;
−
- utilizar mais elementos dinâmicos e atrativos nos menus apresentados.
+
- 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.
 
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.
Linha 310: Linha 311:
  
 
http://www.colourlovers.com/
 
http://www.colourlovers.com/
 +
 +
PDF´s das aulas de Laboratório Multimédia1
  
  
 
==Anexos==
 
==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