Ver conteúdo

Não possui permissão para editar esta página, pelo seguinte motivo:

Pode ver e copiar o conteúdo desta página:

[[Ficheiro:relatorio_lab1.pdf]] ==Apresentação do Projeto== ===Elementos do Grupo=== *[http://wikis.ua.pt/labmm1/index.php/Utilizador:Catiaestima Cátia Estima] *[http://wikis.ua.pt/labmm1/index.php/Utilizador:Joao_Campos João Campos] *[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]]

Voltar para Utilizador:Celebrate voices.