Utilizador:Celebrate voices
| Linha 12: | Linha 12: | ||
[[Ficheiro:Musicwiki.jpg]] [[Ficheiro:KARAOKEwiki.jpg]] | [[Ficheiro:Musicwiki.jpg]] [[Ficheiro:KARAOKEwiki.jpg]] | ||
| − | + | ==1.Propósito do Projeto== | |
O nosso projeto, como proposta para as unidades curriculares de '''Laboratório Multimédia 1''' e de '''Imagem Digital Estática''', baseia-se numa aplicação multimédia interativa de música e de entretenimento. Pretende-se com esta aplicação que o utilizador interaja com os diferentes meios de navegação e animação, de uma forma divertida e interativa. Esta aplicação incluirá ''imagens, texto, video, som'' e ''animação''. O público alvo (qualquer pessoa alfabetizada) poderá visualizar e ouvir diferentes grupos e géneros musicais, cantar, obter informações e ainda jogar. | O nosso projeto, como proposta para as unidades curriculares de '''Laboratório Multimédia 1''' e de '''Imagem Digital Estática''', baseia-se numa aplicação multimédia interativa de música e de entretenimento. Pretende-se com esta aplicação que o utilizador interaja com os diferentes meios de navegação e animação, de uma forma divertida e interativa. Esta aplicação incluirá ''imagens, texto, video, som'' e ''animação''. O público alvo (qualquer pessoa alfabetizada) poderá visualizar e ouvir diferentes grupos e géneros musicais, cantar, obter informações e ainda jogar. | ||
| + | Esta aplicação será de distribuição on-line e poderá ser utilizada por qualquer utilizador desde que esteja ligado a uma rede. | ||
| + | O desenvolvimento e o avanço tecnológico permitiu um crescimento alargado na utilização do “karaoke” em diferentes meios tecnológicos e multimédia interativos. Visto que o karaoke proporciona diversão, entretenimento, convívio e distração, consideramos de grande interesse trabalhar neste projeto. | ||
| − | + | ==2.Análise e Planeamento== | |
| − | + | ====Um pouco de história...==== | |
| − | + | ||
O termo karaoke surgiu no século XX, na década de 70 no Japão. Foi inventado por Daisuke Inoue e significa “sem orquestra”. | 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. | 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. | 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==== |
| − | Após algumas pesquisas, conversas e rabiscos concordamos em apresentar um layout baseado no paradigma de interação index | + | Inicialmente, pensamos numa aplicação que iria abrange cinco músicas cantadas em karaoke, mas em conversação com os docentes das áreas curriculares: Imagem Digital Estática e Laboratório Multimédia 1, pensamos em optar por utilizar apenas duas músicas. Contudo, esta aplicação será constituída por duas músicas, mas futuramente, poderá ter muito mais. |
| + | Outra das alterações efetuadas foi a mudança do nome do projeto “Celebrate voices” para “Sing it”, pois concordamos que seria mais atrativo e de fácil memorização. | ||
| + | |||
| + | ====Layout==== | ||
| + | Após algumas pesquisas, conversas e rabiscos concordamos em apresentar um layout baseado no paradigma de interação index. | ||
É constituído por um sistema de menus, onde o ulizador poderá aceder a determinadas animações, informações e imagens. | É constituído por um sistema de menus, onde o ulizador poderá aceder a determinadas animações, informações e imagens. | ||
| − | ===== | + | ==3.Desenho Funcional== |
| + | ===3.1 Requisitos Funcionais=== | ||
| + | Os requisitos funcionais da nossa aplicação são: | ||
| + | |||
| + | ===3.2.Estrutura Arborescente=== | ||
| + | |||
| + | [[Ficheiro:lab1_estrutura.jpg]] | ||
| + | |||
| + | A nossa aplicação terá uma animação (loading) para permitir ao utilizador aceder ao menu inicial, homepage. | ||
| + | A homepage será constituída por três menus: karaoke, loja e contatos. Na transição dos menus terá uma animação. | ||
| + | No menu karaoke, o utilizador irá visualizar uma galeria com algumas músicas. Ao selecionar a música poderá cantar (menu: música – Play), obter informações do álbum (menu: informações) e ainda, jogar (menu: jogo). | ||
| + | A loja será constituída por vários links que correspondem a cd´s de música, onde o utilizador poderá comprar. Ao aceder a estes links visualizará a imagem dos cd´s e a respetiva lista de canções que compõe o álbum. | ||
| + | O menu contatos apresentará dois links: email e o like. O like funcionará do género do “facebook”. | ||
| + | É de salientar que haverá uma música de fundo. Durante a transição dos menus haverá um som e o utilizador durante o “play da música” no menu karaoke terá a música instrumental para cantar. | ||
| + | Esta aplicação será constituída por uma ou duas músicas, mas futuramente, poderá ter muito mais. | ||
| + | |||
| + | ===3.3 Desenho de Interação e Usabilidade=== | ||
| + | A criação de uma aplicação multimédia exige ir ao encontro das necessidades e desejos do utilizador para permitir uma facilidade de acesso e compreensão da estrutura, percursos e meios de navegação apresentados. | ||
| + | No nosso projeto tivemos o cuidado de permitir ao utilizador maior facilidade na realização de tarefas básicas numa primeira utilização da nossa aplicação, a compreensão do modo de funcionamento, a facilidade de memorização e tornar agradável a utilização da aplicação. | ||
| + | É importante salientar as carateristicas fundamentas de interação e usabilidade da aplicação: os cenários, as cores, o tipo de letra, o texto e os meios de navegação/interação. | ||
| + | |||
| + | ====Cenários==== | ||
| + | A estrutura da aplicação é de fácil reconhecimento e compreensão para o utilizador e permite rápido acesso aos items de navegação. | ||
| + | |||
| + | =====Loading===== | ||
| + | Neste cenário está presente o logotipo e o loading com a respetiva animação. Utilizamos uma cor de fundo escura de forma a salientar a informação que pretendemos transmitir ao utilizador. | ||
| + | |||
| + | =====Homepage===== | ||
| + | O utilizador terá acesso à homepage depois de realizada a animação: loading. A homepage é constituída por três menus: karaoke, loja e contatos, imagens ilustrativas e um texto informativo sobre o que iremos apresentar na nossa aplicação multimédia. | ||
| + | |||
| + | =====Karaoke===== | ||
| + | O cenário karaoke é constituído por um menu com uma lista de imagens de cd´s com a informação do artista ou grupo musical e a respetiva música. O utilizador ao selecionar uma destas imagens e clicar nos botões abaixo do ecrã poderá cantar em karaoke (karaoke:Play), visualizar a informação do artista/grupo musical (karaoke:Informação) e ainda, jogar (Karaoke:Jogo). | ||
| + | ======Karaoke:Play====== | ||
| + | ======Karaoke:Informação====== | ||
| + | ======Karaoke:Jogo====== | ||
| + | |||
| + | =====Loja===== | ||
| + | Na loja, o utilizador visualiza imagens de cd´s de música com respetivo nome do cd e o seu preço. Será possível comprar se clicar no botão da compra (Loja:Compra). | ||
| + | ======Loja:Compra====== | ||
| + | |||
| + | =====Contatos===== | ||
| + | Neste cenário, o utilizador visualiza três links para aceder ao site do youtube, do facebook e ao email do site Karaoke. | ||
| + | |||
| + | ====Palete de cores==== | ||
Através das nossas pesquisas, verificamos que o subtema Karaoke deveria abranger um conjunto de cores simples e apelativas, visto que se trata de uma aplicação de entretenimento, cores visíveis e de fácil leitura, pois o utilizador irá interagir com diferentes meios de navegação e animação, que é o caso de cantar em karaoke e cores populares em meios audiovisuais musicais. | 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: | A paleta de cores escolhida foi: | ||
| Linha 34: | Linha 82: | ||
[[Ficheiro:palete.jpg]] | [[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. | A fonte de letra escolhida foi: “Code Light e Bold”. Optamos por utilizar esta fonte pelo facto de ser informativa, de fácil leitura e de rápida percepção por parte do utilizador. Consideramos que esta fonte apresenta características e pormenores simplistas de carater informativo. | ||
| − | ===== | + | ====Texto==== |
| + | A apresentação do texto na aplicação é pouco excessivo, não tornando massador para o utilizador,sendo de fácil leitura; | ||
| + | |||
| + | ====Meios de Navegação==== | ||
| + | Os meios de navegação utilizados permite ao utilizador navegar apenas com um click e com os botões apresentados, o utilizador consegue identificar em que ponto de estrutura se encontra e para onde navegar, isto porque os botões são perceptíveis pelas cores e imagens utilizadas, apresentam um som de transição, tem uma identificação visual e existe botões de retorno para uma facilidade de acesso a outros meios de animação. | ||
| + | |||
| + | ====Logotipo==== | ||
Deste subtema: o karaoke começamos por pensar num logotipo, uma representação e elemento gráfico de marca, como identificação do nosso projeto. Surgiu-nos a ideia de um nome “Celebrate Voices”, cujo seu símbolo seria uma pessoa a cantar. Pelas nossas pesquisas consideramos subtil e muito popular, em que optamos por algo diferente e mais simples, cujo nome é “Sing It” , tendo como elementos gráficos formas geométricas. Inicialmente, o logótipo continha muitos elementos vetorizados, então simplificamos como se vê na imagem abaixo. | 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]] | [[Ficheiro:sing_it.jpg]] | ||
| − | + | ====Síntese dos príncipios básicos de interação e interface==== | |
| − | + | ==4.Desenho Funcional== | |
| + | 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, ActionScrip 0.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. | ||
| − | + | ==5.Produção do Projeto== | |
| + | ===5.1.Estrutura e Meios de Navegação e Interação=== | ||
| + | A nossa aplicação disponibiliza um conjunto de meios de navegação/interação que facilitam o utilizador navegar de uma forma simples, rápida e eficaz. | ||
| + | Esta aplicação basea-se no paradigma index e através da sua exploração é possível visualizar listagens de conteúdos, informações, animações e imagens. | ||
| + | Os meios de navegação/interação disponíveis na nossa aplicação são: | ||
| − | + | =====janelas===== | |
| + | Esta janela é visivel no menu loja quando o utilizador clica no botão de compra. Esta janela apresenta os métodos de pagamento dos albúns de música; | ||
| − | + | =====menu===== | |
| + | Este menu está presente quando o utilizador acede ao menu karaoke e escolhe o albúm para poder cantar em karaoke, visualizar a informação e jogar; | ||
| − | + | =====botões===== | |
| + | ======botões de texto====== | ||
| + | Após o loading, o utilizador no menu homepage encontra três botões de texto: karaoke, loja e contatos. | ||
| + | No menu Karaoke quando utlizador acede ao menu jogo irá deparar-se com botões de controlo de jogo; | ||
| − | + | No menu contatos, é visivel também três botões de texto, o que correspondem aos links do youtube, facebook e email. | |
| − | + | ||
| − | ==== | + | ======botões em gráficos====== |
| + | Ao longo da exploração da aplicação, o utilizador irá encontrar este tipo de botões. O utilizador facilmente identifica as funcionalidades destes botões pelas suas caraterísticas visuais e gráficas. Os botões permitem jogar, informar, cantar, comprar e entre outros. | ||
| − | + | ===5.2 Integração e controlo de som=== | |
| − | + | Todo o nosso projeto está relacionado com a música, o que leva a referir que a nossa aplicação exige a integração e controlo do som. | |
| + | Ao longo da exploração da nossa aplicação, o utilizador vai deparar-se com um som de fundo, um som de transição entre menus e sons musicais relacionados com os álbuns de karaoke. | ||
| + | Após o loading, o utilizador acede à homepage da aplicação, onde terá um som de fundo. É possível navegar na aplicação com ou sem este som, basta o utilizador aceder aos botões gráficos que se encontram na parte superior direita do layout. O utilizador pode, ainda, escolher o volume do som utilizando a função de controlo de som. | ||
| − | + | No menu karaoke é possível visualizar e ouvir os videoclips com os sons musicais relacionados com os álbuns apresentados no menu. O utilizador pode fazer play, pause e stop. | |
| + | Durante elaboração das funcionalidades do som foi necessário criar uma linkage e aplicar identificadores aos sons. Criou-se variáveis de som, attachSound, no sentido de ser possível de fazer start, play, stop, setVolume aos sons apresentados. | ||
| − | + | ===5.3 Animação=== | |
| − | + | As animações presentes na nossa aplicação multimédia são: | |
| − | + | ====Animação de imagens==== | |
| + | Inicialmente, o utilizador visualizará a animação do loading, de seguida a animação do logotipo que estará presente em toda a navegação da aplicação, animação do aparecimento das linhas de correção no menu Jogo e animação de transição de cenários ; | ||
| + | |||
| + | ====Animação de transição dos cenários==== | ||
| + | Esta animação está presente quando acede aos cenários: homepage, karaoke, loja, contatos, onde se verifica a animação das imagens: microfone, logotipo, ecrã, botões,menus, janelas; | ||
| − | + | ====Animações do texto==== | |
| + | O aparecimento de caixas de textos, animação da letra das músicas quando acede-se ao menu play do cenário Karaoke e a mudança das palavras quando o utilizador se encontra no menu jogo do cenário Karaoke; | ||
| − | + | ====Animações dos botões==== | |
| + | A passagem do rato (rollover) é visível a mudança de visual dos botões (play, informação, jogo, compra, contatos, etc) e o clique do rato (release) nos botões apresentados que permite aceder aos menus, janelas, links e entre outros; | ||
| + | |||
| + | ====Video==== | ||
| + | O video encontra-se no no play do Karaoke e aparece em simultâneo com animação da letra da música. | ||
| + | |||
| + | As animações realizadas foram efetuadas frame-a-frame, keyframe e aplicação de ações e eventos da passagem e clique do rato através do actionscrip 0.2. | ||
| + | |||
| + | ==4. Desenho Técnico== | ||
| + | |||
| + | A nossa aplicação multimédia foi implementada numa ferramenta de autoria multimédia, o Adobe Flash (versão CS5). É uma plataforma multimídia de desenvolvimento de aplicações interativas para distribuição on-line devido ao tamanho reduzido de ficheiros, não só pelo uso extensivo de elementos vetoriais, mas também pela codificação utilizada na exportação de ficheiros. | ||
| + | O adobe flash foi fundamental , pois permitiu manipular vetores e gráficos para criar textos animados, desenhos, imagens e até streaming de audio e video pela Internet. | ||
| + | O recurso à linguagem de scrip, ActionScrip0.2, permitiu defenir eventos e ações na nossa aplicação, tornando-a mais atrativa, dinâmica e divertida. | ||
| + | Na edição das imagens foram utilizados o adobe Photoshop (CS5) e Adobe Ilustrator (CS5). | ||
| + | Para visualizar esta aplicação é necessário placas de som e | ||
| + | colunas ou auscultadores e o software Flash Player instalado no computador. Em termos futuros será necessário uma ligação à Internet, um browser instalado no computador e como já referido anteriormente, placa de som, colunas ou auscultadores e o software Flash Player instalado no computador. | ||
| + | |||
| + | ==5. Produção do Projeto== | ||
| + | ===5.1 Estrutura e meios de navegação/interação=== | ||
| + | |||
| + | A nossa aplicação disponibiliza um conjunto de meios de navegação/interação que facilitam o utilizador navegar de uma forma simples, rápida e eficaz. | ||
| + | Esta aplicação baseia-se no paradigma index e através da sua exploração é possível visualizar listagens de conteúdos, informações, animações e imagens. | ||
| + | Os meios de navegação/interação disponíveis na nossa aplicação são: | ||
| + | |||
| + | ====janelas==== | ||
| + | Esta janela é 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==== | ||
| + | Este menu está presente quando o utilizador acede ao menu karaoke e escolhe o albúm para poder cantar em karaoke, visualizar a informação e jogar; | ||
| + | |||
| + | |||
| + | ====botões==== | ||
| + | =====botões de texto===== | ||
| + | Após o loading, o utilizador no menu homepage encontra três botões de texto: karaoke, loja e contatos. | ||
| + | |||
| + | No menu Karaoke quando utilizador acede ao menu jogo irá deparar-se com botões de controlo de jogo; | ||
| + | |||
| + | No menu contatos, é visivel também três botões de texto, o que correspondem aos links do youtube, facebook e email. | ||
| + | |||
| + | =====botões em gráficos===== | ||
| + | Ao longo da exploração da aplicação, o utilizador irá encontrar este tipo de botões. O utilizador facilmente identifica as funcionalidades destes botões pelas suas caraterísticas visuais e gráficas. Os botões permitem jogar, informar, cantar, comprar e entre outros. | ||
| + | |||
| + | ===5.2 Integração e controlo de som=== | ||
| + | |||
| + | Todo o nosso projeto está relacionado com o tema música, o que leva a referir que a nossa aplicação exige a integração e controlo do som. | ||
| + | Ao longo da exploração da nossa aplicação, o utilizador vai deparar-se com um som de fundo, um som de transição entre menus e sons musicais relacionados com os álbuns de karaoke. | ||
| + | Após o loading, o utilizador acede à homepage da aplicação, onde terá um som de fundo. É possível navegar na aplicação com ou sem este som, basta o utilizador aceder aos botões gráficos que se encontram na parte superior direita do layout. O utilizador pode, ainda, escolher o volume do som utilizando a função de controlo de som. | ||
| + | No menu karaoke é possível visualizar e ouvir os videoclips com os sons musicais relacionados com os albúms apresentados no menu. O utilizador pode fazer play, pause e stop. | ||
| + | Durante elaboração das funcionalidades do som foi necessário criar uma linkage e aplicar identificadores aos sons. Criou-se variáveis de som, attachSound, no sentido de ser possível de fazer start, play, stop, setVolume aos sons apresentados. | ||
| + | |||
| + | ===5.3 Animação=== | ||
| + | As animações presentes na nossa aplicação multimédia são: | ||
| + | |||
| + | ====Animação de imagens==== | ||
| + | Inicialmente, o utilizador visualizará a animação do loading, de seguida a animação do logotipo que estará presente em toda a navegação da aplicação, animação do aparecimento das linhas de correção no menu Jogo e animação de transição de cenários ; | ||
| + | |||
| + | ====Animação de transição dos cenários==== | ||
| + | Esta animação está presente quando acede aos cenários: homepage, karaoke, loja, contatos, onde se verifica a animação das imagens: microfone, logotipo, ecrã, botões,menus, janelas; | ||
| + | |||
| + | ====Animações do texto==== | ||
| + | O aparecimento de caixas de textos, animação da letra das músicas quando acede-se ao menu play do cenário Karaoke e a mudança das palavras quando o utilizador se encontra no menu jogo do cenário Karaoke; | ||
| + | |||
| + | ====Animações dos botões==== | ||
| + | A passagem do rato (rollover) nos botões apresenta uma mudança de 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; | ||
| + | |||
| + | ====Video==== | ||
| + | O video encontra-se no no play do Karaoke e aparece em simultaneo com animação da letra da música. | ||
| + | |||
| + | As animações realizadas foram efetuadas frame-a-frame, keyframe e aplicação de ações e eventos do actionscrip 0.2 como rollover e release. | ||
| + | |||
| + | ===5.4 Soluções técnicas para a resolução de problemas=== | ||
| + | |||
| + | Ao longo da construção da aplicação tivemos o cuidado de satisfazer as necessidades e desejos do utilizador. | ||
| + | |||
| + | As soluções técnicas apresentadas para evitar erros e problemas da aplicação foram: | ||
| + | - apresentar uma aplicação semelhante aos de músicas de karaoke com objetivo de o utilizador apresentar um relação de familiaridade e não de estranheza; | ||
| + | - optamos por apresentar apenas uma ou duas músicas invés de cinco músicas, como tínhamos pensado inicialmente, pois iria sobrecarregar o sistema; | ||
| + | - apresentar uma estrutura do layout simples e de fácil identificação dos eventos e ações a realizar pelo utilizador; | ||
| + | - criar um controlo de som da aplicação de forma ao utilizador ter autonomia para parar, aumentar ou diminuir o volume do som, pause, seguinte e play do som; | ||
| + | - utilização de ações como passagem do rato (rollover) e clique do rato (release) de forma facilitar rápido e eficaz acesso aos menus; | ||
| + | - utilização de um ecrã de forma a incentivar o utilizador à descoberta; | ||
| + | - simplificamos a forma de correção das palavras do jogo utilizando linhas a vermelho invés do aparecimento de palavras com preenchimentos a vermelho e a verde,tornando menos chocante e desagradável; | ||
| + | - pretendeu-se colocar streaming do vídeo de forma a tornar o play do karaoke atrativo; | ||
| + | - apresentamos links de acesso aos sites youtube e facebook para utilizador poder explorar e adquirir mais informação fora da aplicação, utilizando sites usuais e de atrativos. A utilização do link do email funciona como um sistema de ajuda de informações e dúvidas do utilizador. | ||
| + | |||
| + | É de salientar que todas estas funcionalidades e soluções técnicas devem ser melhoradas e aperfeiçoadas futuramente. | ||
| + | |||
| + | ==6.Conclusões== | ||
| + | ===6.1 Reflexão Crítica=== | ||
| + | |||
| + | Desde da ideia até ao momento da conceção do projeto deparamos com mudanças de ideias, planos, dificuldades, melhoramentos, limitações e contribuições na construção da aplicação multimédia. | ||
| + | Este projeto contribuiu de uma forma significativa no nosso conhecimento e aperfeiçoamento do estudo realizado no âmbito das disciplinas Laboratório Multimedia 1 e Imagem Digital Estática. Não só deparamos com certas dificuldades a nível gráfico da utilização do Adobe Photoshop e Adobe Ilustrator como a utilização do Adobe Flash e acções e eventos do ActionScript 0.2 que exigiu uma investigação e um estudo das suas funcionalidades. | ||
| + | Toda estrutura, funcionalidades, caraterísticas gráficas foi a pensar em satisfazer o utilizador para uma rápida, eficaz, atrativa e divertida exploração e navegação da nossa aplicação. | ||
| + | Esta aplicação pode ser melhorada e aperfeiçoada futuramente. | ||
| + | |||
| + | ===6.2 Sugestões para o aperfeiçoamento e/ou desenvolvimento futuro do projeto=== | ||
| + | |||
| + | Como já referido anteriormente, a nossa aplicação pode ser aperfeiçoada e melhorada futuramente. | ||
| + | Trata-se de uma aplicação atrativa que, hoje em dia, é muito usual ser utilizada não só entre amigos como entre família, de todas as idades. | ||
| + | |||
| + | Esta aplicação foi pensada no sentido de ser possível o seu desenvolvimento em termos futuros: | ||
| + | - apresentar uma maior de escolha em termos de artistas/álbuns musicais; | ||
| + | - ser possível ligar à Internet; | ||
| + | - ser possível efetuar a compra dos álbuns musicais; | ||
| + | - criar um registo do visitante, efetuando um login com o nome de utilizador e password; | ||
| + | - audição não apenas da música do karaoke, mas de outras músicas dos artistas/albums musicais como elementos de diversão e informação; | ||
| + | - visualização de videoclips, festivais, concertos e outros; | ||
| + | - apresentar uma atualização dos álbuns lançados; | ||
| + | - utilizar mais elementos dinâmicos e atrativos nos menus apresentados. | ||
| + | |||
| + | O desenvolvimento e aperfeiçoamento desta aplicação pode ter vantagens não só em termos de divertimento, mas também como um meio comercial de compra e venda. | ||
| + | |||
| + | ==7. Referências Web e bibliográficas== | ||
| + | |||
| + | http://pt.wikipedia.org/wiki/Karaok%C3%AA | ||
| + | |||
| + | http://www.casamaravilhas.com/festasespeciais/DefinicaoKaraoke.html | ||
| + | |||
| + | http://www.karaokenet.com.br/RealOrche/historia_do_karaoke.htm | ||
| + | |||
| + | http://www.karaokeparty.com | ||
| + | |||
| + | http://www.karaoke.com | ||
| + | |||
| + | http://www.thekaraokechannel.com | ||
| + | |||
| + | http://www.singsnap.com | ||
| + | |||
| + | http://karaokescene.com | ||
| + | |||
| + | http://www.fotosearch.com.br/fotos-imagens/karaoke.html | ||
| + | |||
| + | http://www.colourlovers.com/ | ||
| + | |||
| + | ==8. Anexos== | ||
Revisão das 23h13min de 13 de Janeiro de 2013
Apresentação do Projeto
Elementos do Grupo
Temática do Projeto
1.Propósito do Projeto
O nosso projeto, como proposta para as unidades curriculares de Laboratório Multimédia 1 e de Imagem Digital Estática, baseia-se numa aplicação multimédia interativa de música e de entretenimento. Pretende-se com esta aplicação que o utilizador interaja com os diferentes meios de navegação e animação, de uma forma divertida e interativa. Esta aplicação incluirá imagens, texto, video, som e animação. O público alvo (qualquer pessoa alfabetizada) poderá visualizar e ouvir diferentes grupos e géneros musicais, cantar, obter informações e ainda jogar. Esta aplicação será de distribuição on-line e poderá ser utilizada por qualquer utilizador desde que esteja ligado a uma rede. O desenvolvimento e o avanço tecnológico permitiu um crescimento alargado na utilização do “karaoke” em diferentes meios tecnológicos e multimédia interativos. Visto que o karaoke proporciona diversão, entretenimento, convívio e distração, consideramos de grande interesse trabalhar neste projeto.
2.Análise e Planeamento
Um pouco de história...
O termo karaoke surgiu no século XX, na década de 70 no Japão. Foi inventado por Daisuke Inoue e significa “sem orquestra”. Ao longo do tempo, a apresentação do karaoke foi evoluindo com a utilização de meios mais sofisticados. Tornou-se muito popular e rapidamente se difundiu por todas as partes do mundo.
As nossas pesquisas...
Através da visualização de alguns sites de karaoke (por exemplo,http://www.thekaraokechannel.com) ,pensamos como poderia ser constituída a nossa aplicação e através da conversação e da apresentação de ideias dos elementos do grupo permitiu-nos pensar em aspetos importantes para iniciar o nosso projecto.
Aplicação Multimédia
Inicialmente, pensamos numa aplicação que iria abrange cinco músicas cantadas em karaoke, mas em conversação com os docentes das áreas curriculares: Imagem Digital Estática e Laboratório Multimédia 1, pensamos em optar por utilizar apenas duas músicas. Contudo, esta aplicação será constituída por duas músicas, mas futuramente, poderá ter muito mais. Outra das alterações efetuadas foi a mudança do nome do projeto “Celebrate voices” para “Sing it”, pois concordamos que seria mais atrativo e de fácil memorização.
Layout
Após algumas pesquisas, conversas e rabiscos concordamos em apresentar um layout baseado no paradigma de interação index. É constituído por um sistema de menus, onde o ulizador poderá aceder a determinadas animações, informações e imagens.
3.Desenho Funcional
3.1 Requisitos Funcionais
Os requisitos funcionais da nossa aplicação são:
3.2.Estrutura Arborescente
A nossa aplicação terá uma animação (loading) para permitir ao utilizador aceder ao menu inicial, homepage. A homepage será constituída por três menus: karaoke, loja e contatos. Na transição dos menus terá uma animação. No menu karaoke, o utilizador irá visualizar uma galeria com algumas músicas. Ao selecionar a música poderá cantar (menu: música – Play), obter informações do álbum (menu: informações) e ainda, jogar (menu: jogo). A loja será constituída por vários links que correspondem a cd´s de música, onde o utilizador poderá comprar. Ao aceder a estes links visualizará a imagem dos cd´s e a respetiva lista de canções que compõe o álbum. O menu contatos apresentará dois links: email e o like. O like funcionará do género do “facebook”. É de salientar que haverá uma música de fundo. Durante a transição dos menus haverá um som e o utilizador durante o “play da música” no menu karaoke terá a música instrumental para cantar. Esta aplicação será constituída por uma ou duas músicas, mas futuramente, poderá ter muito mais.
3.3 Desenho de Interação e Usabilidade
A criação de uma aplicação multimédia exige ir ao encontro das necessidades e desejos do utilizador para permitir uma facilidade de acesso e compreensão da estrutura, percursos e meios de navegação apresentados. No nosso projeto tivemos o cuidado de permitir ao utilizador maior facilidade na realização de tarefas básicas numa primeira utilização da nossa aplicação, a compreensão do modo de funcionamento, a facilidade de memorização e tornar agradável a utilização da aplicação. É importante salientar as carateristicas fundamentas de interação e usabilidade da aplicação: os cenários, as cores, o tipo de letra, o texto e os meios de navegação/interação.
Cenários
A estrutura da aplicação é de fácil reconhecimento e compreensão para o utilizador e permite rápido acesso aos items de navegação.
Loading
Neste cenário está presente o logotipo e o loading com a respetiva animação. Utilizamos uma cor de fundo escura de forma a salientar a informação que pretendemos transmitir ao utilizador.
Homepage
O utilizador terá acesso à homepage depois de realizada a animação: loading. A homepage é constituída por três menus: karaoke, loja e contatos, imagens ilustrativas e um texto informativo sobre o que iremos apresentar na nossa aplicação multimédia.
Karaoke
O cenário karaoke é constituído por um menu com uma lista de imagens de cd´s com a informação do artista ou grupo musical e a respetiva música. O utilizador ao selecionar uma destas imagens e clicar nos botões abaixo do ecrã poderá cantar em karaoke (karaoke:Play), visualizar a informação do artista/grupo musical (karaoke:Informação) e ainda, jogar (Karaoke:Jogo).
Karaoke:Play
Karaoke:Informação
Karaoke:Jogo
Loja
Na loja, o utilizador visualiza imagens de cd´s de música com respetivo nome do cd e o seu preço. Será possível comprar se clicar no botão da compra (Loja:Compra).
Loja:Compra
Contatos
Neste cenário, o utilizador visualiza três links para aceder ao site do youtube, do facebook e ao email do site Karaoke.
Palete de cores
Através das nossas pesquisas, verificamos que o subtema Karaoke deveria abranger um conjunto de cores simples e apelativas, visto que se trata de uma aplicação de entretenimento, cores visíveis e de fácil leitura, pois o utilizador irá interagir com diferentes meios de navegação e animação, que é o caso de cantar em karaoke e cores populares em meios audiovisuais musicais. A paleta de cores escolhida foi:
Fonte
A fonte de letra escolhida foi: “Code Light e Bold”. Optamos por utilizar esta fonte pelo facto de ser informativa, de fácil leitura e de rápida percepção por parte do utilizador. Consideramos que esta fonte apresenta características e pormenores simplistas de carater informativo.
Texto
A apresentação do texto na aplicação é pouco excessivo, não tornando massador para o utilizador,sendo de fácil leitura;
Os meios de navegação utilizados permite ao utilizador navegar apenas com um click e com os botões apresentados, o utilizador consegue identificar em que ponto de estrutura se encontra e para onde navegar, isto porque os botões são perceptíveis pelas cores e imagens utilizadas, apresentam um som de transição, tem uma identificação visual e existe botões de retorno para uma facilidade de acesso a outros meios de animação.
Logotipo
Deste subtema: o karaoke começamos por pensar num logotipo, uma representação e elemento gráfico de marca, como identificação do nosso projeto. Surgiu-nos a ideia de um nome “Celebrate Voices”, cujo seu símbolo seria uma pessoa a cantar. Pelas nossas pesquisas consideramos subtil e muito popular, em que optamos por algo diferente e mais simples, cujo nome é “Sing It” , tendo como elementos gráficos formas geométricas. Inicialmente, o logótipo continha muitos elementos vetorizados, então simplificamos como se vê na imagem abaixo.
Síntese dos príncipios básicos de interação e interface
4.Desenho Funcional
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, ActionScrip 0.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.
5.Produção do Projeto
A nossa aplicação disponibiliza um conjunto de meios de navegação/interação que facilitam o utilizador navegar de uma forma simples, rápida e eficaz. Esta aplicação basea-se no paradigma index e através da sua exploração é possível visualizar listagens de conteúdos, informações, animações e imagens. Os meios de navegação/interação disponíveis na nossa aplicação são:
janelas
Esta janela é visivel no menu loja quando o utilizador clica no botão de compra. Esta janela apresenta os métodos de pagamento dos albúns de música;
Este menu está presente quando o utilizador acede ao menu karaoke e escolhe o albúm para poder cantar em karaoke, visualizar a informação e jogar;
botões
botões de texto
Após o loading, o utilizador no menu homepage encontra três botões de texto: karaoke, loja e contatos.
No menu Karaoke quando utlizador acede ao menu jogo irá deparar-se com botões de controlo de jogo;
No menu contatos, é visivel também três botões de texto, o que correspondem aos links do youtube, facebook e email.
botões em gráficos
Ao longo da exploração da aplicação, o utilizador irá encontrar este tipo de botões. O utilizador facilmente identifica as funcionalidades destes botões pelas suas caraterísticas visuais e gráficas. Os botões permitem jogar, informar, cantar, comprar e entre outros.
5.2 Integração e controlo de som
Todo o nosso projeto está relacionado com a música, o que leva a referir que a nossa aplicação exige a integração e controlo do som. Ao longo da exploração da nossa aplicação, o utilizador vai deparar-se com um som de fundo, um som de transição entre menus e sons musicais relacionados com os álbuns de karaoke. Após o loading, o utilizador acede à homepage da aplicação, onde terá um som de fundo. É possível navegar na aplicação com ou sem este som, basta o utilizador aceder aos botões gráficos que se encontram na parte superior direita do layout. O utilizador pode, ainda, escolher o volume do som utilizando a função de controlo de som.
No menu karaoke é possível visualizar e ouvir os videoclips com os sons musicais relacionados com os álbuns apresentados no menu. O utilizador pode fazer play, pause e stop. Durante elaboração das funcionalidades do som foi necessário criar uma linkage e aplicar identificadores aos sons. Criou-se variáveis de som, attachSound, no sentido de ser possível de fazer start, play, stop, setVolume aos sons apresentados.
5.3 Animação
As animações presentes na nossa aplicação multimédia são:
Animação de imagens
Inicialmente, o utilizador visualizará a animação do loading, de seguida a animação do logotipo que estará presente em toda a navegação da aplicação, animação do aparecimento das linhas de correção no menu Jogo e animação de transição de cenários ;
Animação de transição dos cenários
Esta animação está presente quando acede aos cenários: homepage, karaoke, loja, contatos, onde se verifica a animação das imagens: microfone, logotipo, ecrã, botões,menus, janelas;
Animações do texto
O aparecimento de caixas de textos, animação da letra das músicas quando acede-se ao menu play do cenário Karaoke e a mudança das palavras quando o utilizador se encontra no menu jogo do cenário Karaoke;
Animações dos botões
A passagem do rato (rollover) é visível a mudança de visual dos botões (play, informação, jogo, compra, contatos, etc) e o clique do rato (release) nos botões apresentados que permite aceder aos menus, janelas, links e entre outros;
Video
O video encontra-se no no play do Karaoke e aparece em simultâneo com animação da letra da música.
As animações realizadas foram efetuadas frame-a-frame, keyframe e aplicação de ações e eventos da passagem e clique do rato através do actionscrip 0.2.
4. Desenho Técnico
A nossa aplicação multimédia foi implementada numa ferramenta de autoria multimédia, o Adobe Flash (versão CS5). É uma plataforma multimídia de desenvolvimento de aplicações interativas para distribuição on-line devido ao tamanho reduzido de ficheiros, não só pelo uso extensivo de elementos vetoriais, mas também pela codificação utilizada na exportação de ficheiros. O adobe flash foi fundamental , pois permitiu manipular vetores e gráficos para criar textos animados, desenhos, imagens e até streaming de audio e video pela Internet. O recurso à linguagem de scrip, ActionScrip0.2, permitiu defenir eventos e ações na nossa aplicação, tornando-a mais atrativa, dinâmica e divertida. Na edição das imagens foram utilizados o adobe Photoshop (CS5) e Adobe Ilustrator (CS5). Para visualizar esta aplicação é necessário placas de som e colunas ou auscultadores e o software Flash Player instalado no computador. Em termos futuros será necessário uma ligação à Internet, um browser instalado no computador e como já referido anteriormente, placa de som, colunas ou auscultadores e o software Flash Player instalado no computador.
5. Produção do Projeto
A nossa aplicação disponibiliza um conjunto de meios de navegação/interação que facilitam o utilizador navegar de uma forma simples, rápida e eficaz. Esta aplicação baseia-se no paradigma index e através da sua exploração é possível visualizar listagens de conteúdos, informações, animações e imagens. Os meios de navegação/interação disponíveis na nossa aplicação são:
janelas
Esta janela é 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;
Este menu está presente quando o utilizador acede ao menu karaoke e escolhe o albúm para poder cantar em karaoke, visualizar a informação e jogar;
botões
botões de texto
Após o loading, o utilizador no menu homepage encontra três botões de texto: karaoke, loja e contatos.
No menu Karaoke quando utilizador acede ao menu jogo irá deparar-se com botões de controlo de jogo;
No menu contatos, é visivel também três botões de texto, o que correspondem aos links do youtube, facebook e email.
botões em gráficos
Ao longo da exploração da aplicação, o utilizador irá encontrar este tipo de botões. O utilizador facilmente identifica as funcionalidades destes botões pelas suas caraterísticas visuais e gráficas. Os botões permitem jogar, informar, cantar, comprar e entre outros.
5.2 Integração e controlo de som
Todo o nosso projeto está relacionado com o tema música, o que leva a referir que a nossa aplicação exige a integração e controlo do som. Ao longo da exploração da nossa aplicação, o utilizador vai deparar-se com um som de fundo, um som de transição entre menus e sons musicais relacionados com os álbuns de karaoke. Após o loading, o utilizador acede à homepage da aplicação, onde terá um som de fundo. É possível navegar na aplicação com ou sem este som, basta o utilizador aceder aos botões gráficos que se encontram na parte superior direita do layout. O utilizador pode, ainda, escolher o volume do som utilizando a função de controlo de som. No menu karaoke é possível visualizar e ouvir os videoclips com os sons musicais relacionados com os albúms apresentados no menu. O utilizador pode fazer play, pause e stop. Durante elaboração das funcionalidades do som foi necessário criar uma linkage e aplicar identificadores aos sons. Criou-se variáveis de som, attachSound, no sentido de ser possível de fazer start, play, stop, setVolume aos sons apresentados.
5.3 Animação
As animações presentes na nossa aplicação multimédia são:
Animação de imagens
Inicialmente, o utilizador visualizará a animação do loading, de seguida a animação do logotipo que estará presente em toda a navegação da aplicação, animação do aparecimento das linhas de correção no menu Jogo e animação de transição de cenários ;
Animação de transição dos cenários
Esta animação está presente quando acede aos cenários: homepage, karaoke, loja, contatos, onde se verifica a animação das imagens: microfone, logotipo, ecrã, botões,menus, janelas;
Animações do texto
O aparecimento de caixas de textos, animação da letra das músicas quando acede-se ao menu play do cenário Karaoke e a mudança das palavras quando o utilizador se encontra no menu jogo do cenário Karaoke;
Animações dos botões
A passagem do rato (rollover) nos botões apresenta uma mudança de 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;
Video
O video encontra-se no no play do Karaoke e aparece em simultaneo com animação da letra da música.
As animações realizadas foram efetuadas frame-a-frame, keyframe e aplicação de ações e eventos do actionscrip 0.2 como rollover e release.
5.4 Soluções técnicas para a resolução de problemas
Ao longo da construção da aplicação tivemos o cuidado de satisfazer as necessidades e desejos do utilizador.
As soluções técnicas apresentadas para evitar erros e problemas da aplicação foram: - apresentar uma aplicação semelhante aos de músicas de karaoke com objetivo de o utilizador apresentar um relação de familiaridade e não de estranheza; - optamos por apresentar apenas uma ou duas músicas invés de cinco músicas, como tínhamos pensado inicialmente, pois iria sobrecarregar o sistema; - apresentar uma estrutura do layout simples e de fácil identificação dos eventos e ações a realizar pelo utilizador; - criar um controlo de som da aplicação de forma ao utilizador ter autonomia para parar, aumentar ou diminuir o volume do som, pause, seguinte e play do som; - utilização de ações como passagem do rato (rollover) e clique do rato (release) de forma facilitar rápido e eficaz acesso aos menus; - utilização de um ecrã de forma a incentivar o utilizador à descoberta; - simplificamos a forma de correção das palavras do jogo utilizando linhas a vermelho invés do aparecimento de palavras com preenchimentos a vermelho e a verde,tornando menos chocante e desagradável; - pretendeu-se colocar streaming do vídeo de forma a tornar o play do karaoke atrativo; - apresentamos links de acesso aos sites youtube e facebook para utilizador poder explorar e adquirir mais informação fora da aplicação, utilizando sites usuais e de atrativos. A utilização do link do email funciona como um sistema de ajuda de informações e dúvidas do utilizador.
É de salientar que todas estas funcionalidades e soluções técnicas devem ser melhoradas e aperfeiçoadas futuramente.
6.Conclusões
6.1 Reflexão Crítica
Desde da ideia até ao momento da conceção do projeto deparamos com mudanças de ideias, planos, dificuldades, melhoramentos, limitações e contribuições na construção da aplicação multimédia. Este projeto contribuiu de uma forma significativa no nosso conhecimento e aperfeiçoamento do estudo realizado no âmbito das disciplinas Laboratório Multimedia 1 e Imagem Digital Estática. Não só deparamos com certas dificuldades a nível gráfico da utilização do Adobe Photoshop e Adobe Ilustrator como a utilização do Adobe Flash e acções e eventos do ActionScript 0.2 que exigiu uma investigação e um estudo das suas funcionalidades. Toda estrutura, funcionalidades, caraterísticas gráficas foi a pensar em satisfazer o utilizador para uma rápida, eficaz, atrativa e divertida exploração e navegação da nossa aplicação. Esta aplicação pode ser melhorada e aperfeiçoada futuramente.
6.2 Sugestões para o aperfeiçoamento e/ou desenvolvimento futuro do projeto
Como já referido anteriormente, a nossa aplicação pode ser aperfeiçoada e melhorada futuramente. Trata-se de uma aplicação atrativa que, hoje em dia, é muito usual ser utilizada não só entre amigos como entre família, de todas as idades.
Esta aplicação foi pensada no sentido de ser possível o seu desenvolvimento em termos futuros: - apresentar uma maior de escolha em termos de artistas/álbuns musicais; - ser possível ligar à Internet; - ser possível efetuar a compra dos álbuns musicais; - criar um registo do visitante, efetuando um login com o nome de utilizador e password; - audição não apenas da música do karaoke, mas de outras músicas dos artistas/albums musicais como elementos de diversão e informação; - visualização de videoclips, festivais, concertos e outros; - apresentar uma atualização dos álbuns lançados; - utilizar mais elementos dinâmicos e atrativos nos menus apresentados.
O desenvolvimento e aperfeiçoamento desta aplicação pode ter vantagens não só em termos de divertimento, mas também como um meio comercial de compra e venda.
7. Referências Web e bibliográficas
http://pt.wikipedia.org/wiki/Karaok%C3%AA
http://www.casamaravilhas.com/festasespeciais/DefinicaoKaraoke.html
http://www.karaokenet.com.br/RealOrche/historia_do_karaoke.htm
http://www.thekaraokechannel.com
http://www.fotosearch.com.br/fotos-imagens/karaoke.html
