Subliminal
From Labmm2
| (37 intermediate revisions not shown) | |||
| Line 78: | Line 78: | ||
| - | + | [[File:Layouts1.jpg]] | |
| + | |||
| + | |||
| + | Realizamos também a imagem de fundo para o site, pois foi devidamente alterada e tratada, para que o seu aspecto parece-se profissional. | ||
| + | |||
| + | Temos ainda uma página "bónus" para os utilizadores. Uma página que contém uma foto individual de cada bailarina e do género de uma ficha técnica. Pequenas curiosidades que os utilizadores gostam de ter acesso. | ||
| + | |||
| + | |||
| + | [[File:Outros_layouts.jpg]] | ||
| + | |||
| + | |||
| + | == Estrutura XHTML implementada == | ||
| + | |||
| + | A estrutura que utilizámos na página "home" tem somente uma div principal, "main". Dentro dessa mesma div, a página está dividida por áreas, que são elas: o cabeçalho, os "banners", o menu, o conteúdo e o rodapé. Na área do conteúdo da "home" apenas contém duas áreas; a área de "Vídeo em Destaque" e a área "Conheça as Dançarinas". Esta segunda área é uma zona que contém uma imagem interactiva que dá acesso a uma nova página. | ||
| + | |||
| + | As restantes páginas não alteram a sua estrutura, pois nelas mantém-se apenas as respectivas características relativas a cada página. Um pormenor a ter em conta é que a área do rodapé encontra-se dentro do conteúdo. | ||
| + | |||
| + | Como podemos verificar no código a seguir. | ||
| + | |||
| + | |||
| + | [[Media:XHTML.pdf]] | ||
| + | |||
| + | == Folhas de estilo CSS == | ||
| + | |||
| + | Utilizámos a seguinte estrutura: uma folha de estilo geral onde define as principais formatações da tag "body" e outros tags como a imagem abaixo o demonstra. | ||
| + | |||
| + | Nessa folha de estilo principal também definimos os “id's” para a formatação das respectivas áreas de conteúdo. Na estrutura do nosso site decidimos colocar uma folha de estilo local ou seja apenas contém formatação relativa a cada página XHTML. | ||
| + | |||
| + | Como se vê na imagem em cima essa formatação da página "Contactos" contém, como por exemplo, uma classe ".alerta{" que permite formatar as mensagens de validação do formulário que contém na página. Por fim, ainda nas folhas de estilos criámos somente uma para a navegação, onde contém a estrutura do nosso menu bem como a formatação dos links soltos que existem na página. | ||
| + | |||
| + | |||
| + | [[Media:CSS.pdf]] | ||
| + | |||
| + | == Principais Scripts desenvolvidas (JavaScript) == | ||
| + | |||
| + | Os principais sripts que desenvolvemos foram: a estrutura da galeria de fotos, a estrutura para visualizar os vídeos no youtube, a função de validação do formulário de contactos e a função para o "banner". | ||
| + | |||
| + | Criamos uma função que permite ao utilizador na galeria "bares" da página "fotos" clicar nas imagens pequenas, ou seja, nas miniaturas presentes na página, visualiza as imagens em grande. | ||
| + | |||
| + | Sendo que, o site tem três galerias, essa função repete-se para as outras galerias com os parâmetros das respectivas galerias. | ||
| + | |||
| + | Para visualizar os vídeos criámos uma função que permite ao utilizador clicar nas miniaturas na página e ter acesso ao título e ao vídeo para ser visualizado. | ||
| + | |||
| + | Em relação ao script utilizado para validar o formulário que está presente em "Contactos" utilizámos uma função que não deixa o utilizador enviar a mensagem sem que os campos estejam completamente e correctamente preenchidos. | ||
| + | |||
| + | Nesta função é importante realçar que o campo de Email é verificado em dois aspectos, sendo eles: se os campos estiverem todos bem preenchidos menos no campo de Email, esta função verifica a existência de erros na leitura do Email. Como por exemplo a falha de um "@" ou de um ".". | ||
| + | Por último, criámos uma função para o "banner". O que a função faz é exclusivamente, passar durante um intervalo de tempo os diferentes destaques. Os destaques são simplesmente uma imagem por completo. | ||
| + | |||
| + | |||
| + | |||
| + | [[Media:JavaScript.pdf]] | ||
| + | |||
| + | == Integração com outras tecnologias == | ||
| + | |||
| + | Neste projecto utilizámos outra tecnologia para além daquelas que aprendemos no âmbito desta disciplina. Em Laboratório Multimédia 2 aprendemos só a programar para client side, tivemos de recorrer a uma linguagem server side, mais concretamente linguagem PHP, para que ao clicar em "enviar" a informação fosse encaminhada para o destino correcto. Só assim os contactos podem funcionar. | ||
| + | |||
| + | |||
| + | [[Media:Outras_tecnologias.pdf]] | ||
| + | |||
| + | == Melhoramentos futuros == | ||
| + | |||
| + | De uma forma geral, o site está completo, contudo existem sempre pormenores a serem melhorados. | ||
| + | |||
| + | Perante a página inicial, tínhamos como ideia principal colocar no lugar do "vídeo em destaque", actualizações do Facebook, mas por questões de tempo, a pesquisa de código tornou-se extensa e demorada o que nos forçou a desistir da ideia e arrancar com uma solução. | ||
| + | |||
| + | Para que não ficasse um lugar incompleto e vazio, e principalmente para que conseguíssemos tornar um dos nossos objectivos cumpridos, o de completar aquele campo com um foco de interesse, decidimos então colocar um vídeo em destaque, de modo que, o utilizador tenha ainda mais pontos interactivos e interessantes para com a página. | ||
| + | |||
| + | Outro problema a ser resolvido seria os "banners", porque não estão totalmente terminados em termos interactivos, pois o utilizador não tem interactividade com tal, a informação simplesmente passa automaticamente, o que não era a ideia inicial. Tínhamos realizado os "banners" com três "bolas", de forma a que o utilizador pudesse passar a informação por intermédio dessas “bolas” como se fossem setas de encaminhamento da informação disponível nos destaques do “banner”, o que não acontece. | ||
| + | |||
| + | Por ultimo, a ser futuramente resolvido será a construção da página "loja Online", pois não a conseguimos realizar, sendo um grupo de 3 elementos, torna-se mais complicado de completar as tarefas a tempo. | ||
| + | |||
| + | Contudo temos a intensão de mais tarde terminar o site e melhorar até as próprias páginas, caso seja necessário. | ||
| + | |||
| + | |||
| + | == Conclusões == | ||
| + | |||
| + | Este trabalho contribuiu para uma maior experiência e, acima de tudo, uma maior aprendizagem relativamente à programação em XHTML, CSS e JavaScript. Foi um projecto que nos tornou mais autónomos e funcionou também como um teste às nossas capacidades, o que para nós foi muito gratificante e temos também a noção de que foi um bom contributo para o futuro. Em relação ao trabalho em grupo, nomeadamente às tarefas distribuídas pelos elementos, este foi cumprido. O grupo organizou-se e trabalhou arduamente nas suas tarefas ajudando-se mutuamente. | ||
| + | |||
| + | Contudo, é para nós uma tremenda desilusão, o facto de não termos concluído todos os nossos objectivos e expectativas iniciais. Objectivos estes que foram reparados durante a sua realização como sendo "impossíveis" de realizar, estes objectivos foram referidos ao longo do relatório, como sendo interessantes, apelativos e até com um valor de importância elevado para o nosso Website. | ||
| + | |||
| + | Este é um site que nos elevou o interesse e nos impulsionou para continuar a realizar mais Websites. Muitas ideias surgiram durante o seu desenvolvimento e será um prazer aplicá-las nos próximos projectos. | ||
| + | |||
| + | |||
| + | == ANEXOS == | ||
| + | |||
| + | |||
| + | Nos anexos temos presente os vários objectos que o nosso grupo realizou para a página do site "loja Online". | ||
| + | |||
| + | Visto que as Subliminal não tinham nenhum elemento para vender, de forma a conhecerem e promoverem o seu grupo, decidimos que era uma boa opção e uma ideia interessante para um site e também para quem é "fã" das Subliminal. | ||
| + | |||
| + | Realizamos objectos mais comuns e de mais impacto perante o público. Fomos buscar as coisas que mais se vendem para este tipo de grupos. | ||
| + | |||
| + | |||
| + | |||
| + | |||
| + | '''Almofadas''' | ||
| + | ---- | ||
| + | |||
| + | [[File:Almofada_preta.jpg]] [[File:Almofada_branca.jpg]] | ||
| + | |||
| + | '''Canecas''' | ||
| + | ---- | ||
| + | |||
| + | |||
| + | [[File:Caneca_branca_copy.jpg]] [[File:Caneca_preta_copy.jpg]] | ||
| + | |||
| + | '''Pin's''' | ||
| + | ---- | ||
| + | |||
| + | [[File:PIN22.jpg]] [[File:PIN_preto.jpg]] | ||
| + | |||
| + | '''Tapetes de rato''' | ||
| + | ---- | ||
| + | |||
| + | [[File:Tapete_rato_azul_copy.jpg]] [[File:Tapete_rato_preto.jpg]] | ||
| + | |||
| + | '''Camisolas''' | ||
| + | ---- | ||
| + | |||
| + | |||
| + | [[File:T-shirt_1.jpg]] [[File:T-shirt_2.jpg]] | ||
| + | |||
| + | |||
| + | |||
| + | == Relatório completo em PDF == | ||
| + | |||
| + | |||
| + | [[Media:Relatório_Subliminal.pdf]] | ||
Latest revision as of 17:44, 21 June 2011
Introdução
Olá ...
Esta é a nossa nova página na Wiki, desta vez, destinada ao prjecto final de Laboratório Multimédia 2.
O nosso tema para o projecto é sobre um grupo de dança, as Subliminal.
Vamos trabalhar :)
Projecto de LabMM2
Grupo
Sofia Magalhães | 50670
João Fernandes | 51077
Marisa Almeida | 51359
Apresentação e Contextualização do tema
No âmbito da Unidade Curricular de Laboratório Multimédia 2, para a realização do projecto final, foi-nos dada a liberdade de escolher um tema ao nosso gosto.
Como ideia inicial, íamos abordar um tema relacionado com uma marca, como a Nike ou Calzedonia. Visto que, neste caso são marcas bem conceituadas e com sites muito profissionais, não faria sentido criarmos um outo site para uma marca com estas características.
Após pesquisas de possíveis temas para o nosso grupo trabalhar, chegamos à conclusão de criar um site de raiz, ou seja, abordar um tema que ainda não tivesse uma página Web, visto que, o grupo poderia evoluir. Posto isto, escolhemos como tema, um grupo de dança, as Subliminal.
O grupo de dança Subliminal é composto por quatro dançarinas com idades compreendidas entre 19 e 23, sendo elas: Catarina Almeida (Coreógrafa), Nina Magalhães, Sílvia Peralta e Marisa Almeida. Nasceu no seio de um grupo de Carnaval “Barulhentas”, quando num evento de verão, em 2005, organizado pelos diversos grupos de Carnaval, as “Tasquinhas”, precisava de um pouco de animação diversificada para além de concertos de pagode. O sucesso destas actuações abriram portas para outras actuações em outros contextos: bares, concertos de verão, animação em festivais, concursos de talento, casamentos, apresentações em televisão entre outros. Este grupo apresenta coreografias baseadas no estilo Bellydancing, Freestyle e Pop. Cada coreografia contém um vestuário diferente e característico de cada estilo, o que torna cada actuação personalizada, apelativa e distinta de todas as outras que
As Subliminal não têm qualquer informação na internet sobre quem são e sobre os espectáculos que realizam, portanto, consideramos uma boa temática para abordarmos, pois seria uma ideia única e primária à qual poderíamos ser mais criativos, visto que não existe nenhum Website do mesmo e que para o grupo de dança será uma mais-valia.
Quisemos então, partir do ponto zero e fazer algo útil para que tenha continuação no futuro para este grupo de dança que tem actuações frequentemente e actualmente.
O nosso ponto forte para este projecto, é sem dúvida criar um bom site, para tal criar tudo o que um site necessita como: o logótipo, recolha de imagens, textos e até integrar as Subliminal nas diferentes redes sociais, para que os utilizadores possam ter várias formas de chegar até aos elementos do grupo.
Para concluir, esta é a nossa temática para o projecto final de Laboratório Multimédia 2, o grupo considera que as Subliminal merecem um Website para mostrarem o seu talento e promoverem os seus espectáculos.
Logótipo
Visto que, este grupo de dança não tinha nenhuma imagem presente na internet, para este projecto tivemos que criar tudo de novo. Uma das primeiras coisas a ser feita foi o logótipo, pois é de facto, um ponto de partida para a posterior escolha de tons e formas para os diversos layouts.
O logótipo é o próprio nome do grupo Subliminal, usar o nome como sendo a marca/logótipo é sempre uma forma inteligente e de fácil identificação, para além disso fica mais elegante e sofisticado de acordo com aquilo que é pretendido, uma maior sofisticação e elegância. Esta foi a primeira tarefa a realizar, escolher o que ia conter a imagem do logótipo.
Como segunda tarefa tivemos que escolher o tipo letra a utilizar e seleccionamos “Zapfino”, consideramos a melhor fonte e a mais adequada para o próprio nome do grupo e também de acordo com a elegância da dança. Este tipo de letra remeteu-nos a primeira vista o movimento, daí o termos seleccionado.
De seguida fizemos uma pesquisa relacionada com as cores, cores estas que identificassem a imagem e efeitos, se necessário. O sublime designa uma qualidade de extrema amplitude ou força, que transcende o belo. Como tal, o sublime provoca espanto, inspirado pelo medo ou respeito. Depois de uma pesquisa ás quatro elementos das Subliminal, escolhemos como cor base que foi o dourado, porque é uma das cores mais utilizadas nas roupas das dançarinas e também é utilizada em diversos acessórios no estilo de dança Bellydancing, um dos estilos explorados pelo grupo de dança. Achamos que esta seria a melhor opção a tomar, pois identificava o grupo em muitos aspectos.
Como toque final, preenchemos o logótipo com uns brilhos a "cobrir" o nome, são apenas pormenores para dar mais destaque e um aspecto profissional, tornar-se mais adequado ao tema e tem também um toque mais feminino e esbelto.
Layouts
Visto que se trata de um grupo de dança, a imagética do site vai basear-se na ideia de transportar graficamente a fluidez de movimentos, como por exemplo, a imagem de fundo, que será uma imagem do grupo no acto de dança (uma imagem estática). A ideia inicial prende-se em fazer um site cujo paradigma seja do tipo índex.
Para a realização dos layouts foi feita uma pesquisa aprofundada de vários sites de artistas, marcas e rádios, para que tivéssemos uma ideia do que está mais actual e mais activo (anexos – Sites base). Em geral, os layouts criados possuem as mesmas características gráficas e funcionais, todos têm presente uma imagem de fundo, o menu, o logótipo, assim como os link’s que dão acesso às diferentes redes sociais.
As cores seleccionadas para os layouts foram essencialmente a cor beije, laranja, cinza e o branco. Estas são cores que combinam e harmonizam directamente com as cores do logótipo criado. Os contrastes são feitos com os espaços brancos onde se encontra o conteúdo de cada página (imagens, texto, etc.).
O menu é simples e directo, para que o utilizador não se canse de pesquisar, daí colocarmos somente o essencial. Irá conter os seguintes tópicos: bio, fotos, vídeos, loja Online e contactos.
Realizamos também a imagem de fundo para o site, pois foi devidamente alterada e tratada, para que o seu aspecto parece-se profissional.
Temos ainda uma página "bónus" para os utilizadores. Uma página que contém uma foto individual de cada bailarina e do género de uma ficha técnica. Pequenas curiosidades que os utilizadores gostam de ter acesso.
Estrutura XHTML implementada
A estrutura que utilizámos na página "home" tem somente uma div principal, "main". Dentro dessa mesma div, a página está dividida por áreas, que são elas: o cabeçalho, os "banners", o menu, o conteúdo e o rodapé. Na área do conteúdo da "home" apenas contém duas áreas; a área de "Vídeo em Destaque" e a área "Conheça as Dançarinas". Esta segunda área é uma zona que contém uma imagem interactiva que dá acesso a uma nova página.
As restantes páginas não alteram a sua estrutura, pois nelas mantém-se apenas as respectivas características relativas a cada página. Um pormenor a ter em conta é que a área do rodapé encontra-se dentro do conteúdo.
Como podemos verificar no código a seguir.
Folhas de estilo CSS
Utilizámos a seguinte estrutura: uma folha de estilo geral onde define as principais formatações da tag "body" e outros tags como a imagem abaixo o demonstra.
Nessa folha de estilo principal também definimos os “id's” para a formatação das respectivas áreas de conteúdo. Na estrutura do nosso site decidimos colocar uma folha de estilo local ou seja apenas contém formatação relativa a cada página XHTML.
Como se vê na imagem em cima essa formatação da página "Contactos" contém, como por exemplo, uma classe ".alerta{" que permite formatar as mensagens de validação do formulário que contém na página. Por fim, ainda nas folhas de estilos criámos somente uma para a navegação, onde contém a estrutura do nosso menu bem como a formatação dos links soltos que existem na página.
Principais Scripts desenvolvidas (JavaScript)
Os principais sripts que desenvolvemos foram: a estrutura da galeria de fotos, a estrutura para visualizar os vídeos no youtube, a função de validação do formulário de contactos e a função para o "banner".
Criamos uma função que permite ao utilizador na galeria "bares" da página "fotos" clicar nas imagens pequenas, ou seja, nas miniaturas presentes na página, visualiza as imagens em grande.
Sendo que, o site tem três galerias, essa função repete-se para as outras galerias com os parâmetros das respectivas galerias.
Para visualizar os vídeos criámos uma função que permite ao utilizador clicar nas miniaturas na página e ter acesso ao título e ao vídeo para ser visualizado.
Em relação ao script utilizado para validar o formulário que está presente em "Contactos" utilizámos uma função que não deixa o utilizador enviar a mensagem sem que os campos estejam completamente e correctamente preenchidos.
Nesta função é importante realçar que o campo de Email é verificado em dois aspectos, sendo eles: se os campos estiverem todos bem preenchidos menos no campo de Email, esta função verifica a existência de erros na leitura do Email. Como por exemplo a falha de um "@" ou de um ".". Por último, criámos uma função para o "banner". O que a função faz é exclusivamente, passar durante um intervalo de tempo os diferentes destaques. Os destaques são simplesmente uma imagem por completo.
Integração com outras tecnologias
Neste projecto utilizámos outra tecnologia para além daquelas que aprendemos no âmbito desta disciplina. Em Laboratório Multimédia 2 aprendemos só a programar para client side, tivemos de recorrer a uma linguagem server side, mais concretamente linguagem PHP, para que ao clicar em "enviar" a informação fosse encaminhada para o destino correcto. Só assim os contactos podem funcionar.
Melhoramentos futuros
De uma forma geral, o site está completo, contudo existem sempre pormenores a serem melhorados.
Perante a página inicial, tínhamos como ideia principal colocar no lugar do "vídeo em destaque", actualizações do Facebook, mas por questões de tempo, a pesquisa de código tornou-se extensa e demorada o que nos forçou a desistir da ideia e arrancar com uma solução.
Para que não ficasse um lugar incompleto e vazio, e principalmente para que conseguíssemos tornar um dos nossos objectivos cumpridos, o de completar aquele campo com um foco de interesse, decidimos então colocar um vídeo em destaque, de modo que, o utilizador tenha ainda mais pontos interactivos e interessantes para com a página.
Outro problema a ser resolvido seria os "banners", porque não estão totalmente terminados em termos interactivos, pois o utilizador não tem interactividade com tal, a informação simplesmente passa automaticamente, o que não era a ideia inicial. Tínhamos realizado os "banners" com três "bolas", de forma a que o utilizador pudesse passar a informação por intermédio dessas “bolas” como se fossem setas de encaminhamento da informação disponível nos destaques do “banner”, o que não acontece.
Por ultimo, a ser futuramente resolvido será a construção da página "loja Online", pois não a conseguimos realizar, sendo um grupo de 3 elementos, torna-se mais complicado de completar as tarefas a tempo.
Contudo temos a intensão de mais tarde terminar o site e melhorar até as próprias páginas, caso seja necessário.
Conclusões
Este trabalho contribuiu para uma maior experiência e, acima de tudo, uma maior aprendizagem relativamente à programação em XHTML, CSS e JavaScript. Foi um projecto que nos tornou mais autónomos e funcionou também como um teste às nossas capacidades, o que para nós foi muito gratificante e temos também a noção de que foi um bom contributo para o futuro. Em relação ao trabalho em grupo, nomeadamente às tarefas distribuídas pelos elementos, este foi cumprido. O grupo organizou-se e trabalhou arduamente nas suas tarefas ajudando-se mutuamente.
Contudo, é para nós uma tremenda desilusão, o facto de não termos concluído todos os nossos objectivos e expectativas iniciais. Objectivos estes que foram reparados durante a sua realização como sendo "impossíveis" de realizar, estes objectivos foram referidos ao longo do relatório, como sendo interessantes, apelativos e até com um valor de importância elevado para o nosso Website.
Este é um site que nos elevou o interesse e nos impulsionou para continuar a realizar mais Websites. Muitas ideias surgiram durante o seu desenvolvimento e será um prazer aplicá-las nos próximos projectos.
ANEXOS
Nos anexos temos presente os vários objectos que o nosso grupo realizou para a página do site "loja Online".
Visto que as Subliminal não tinham nenhum elemento para vender, de forma a conhecerem e promoverem o seu grupo, decidimos que era uma boa opção e uma ideia interessante para um site e também para quem é "fã" das Subliminal.
Realizamos objectos mais comuns e de mais impacto perante o público. Fomos buscar as coisas que mais se vendem para este tipo de grupos.
Almofadas
Canecas
Pin's
Tapetes de rato
Camisolas
