Made in DeCA
From Labmm2
Relatório
Grupo
Cayna Amadeu 51873
Luís Ferreira 60382
Apresentação e contextualização do tema do projecto
O tema do nosso projecto é o Made in DeCA. Este é um evento anual que se caracteriza como uma mostra de trabalhos audiovisuais associada ao Departamento de Comunicação e Arte da Universidade de Aveiro. Através da nossa aplicação, pretendemos disponibilizar informação e material relevante das três edições passadas (2011, 2010 e 2009). Aqui, o utilizador poderá encontrar informação relativa ao evento, quais os nomeados de cada categoria, os vídeos das curtas vencedoras, galerias de fotos e informação sobre o pessoal envolvido em cada gala. Pretendemos proporcionar ao utilizador uma aplicação simples de usar, com uma forma de navegação diferente do habitual. Será implementada uma navegação feita através de atalhos do teclado, de maneira a tornar o site mais interessante e apelativo para quem não está familiarizado com esta forma de navegação.
Caracterização da narrativa/conceito visual e de interação inerente à aplicação multimédia
A navegação na página será feita através das setas do teclado. Assim, para navegar pelos conteúdos, o navegador terá que usar as setas para ir para esquerda, direita, cima ou baixo, para poder mudar o ecrã de conteúdos. Os diferentes ecrãs surgem com uma animação de slide. Este tipo de navegação pretende tornar a interacção mais intuitiva e ao mesmo tempo dinâmica. O ambiente gráfico consiste num aspecto limpo, simplista, acompanhado por algumas ilustrações simples que complementam de alguma forma o minimalismo da página. As cores, tipo de letra e disposição de conteúdos é tal que o utilizador possa ter acesso às informações que pretende de forma fácil e rápida. O grafismo da página quase nos remete para uma folha de papel pousada na mesa, onde se encontram os conteúdos. Neste website, diferentes categorias de conteúdos encontram-se em diferentes ecrãs. Assim, quando o utilizador faz slide para um ecrã diferente, nesse ecrã encontra-se outra categoria de informação.
Fluxograma
 |
Layouts
 Primeiro ecrã que surge para dar tempo de os conteúdos serem descarregados. |
 Ecrã principal. Possuí links para as redes sociais do evento, uma breve mensagens de boas vindas, e um botão de dúvida. |
 Ao passar com o cursor no botão de dúvida surge uma pequena caixa que informa ao utilizador como navegar na página. Indica também as especificações do website. |
 Ecrã com informação geral relativa ao evento. |
 Ecrã que serve de nó entre os ecrãs superiores e os ecrãs com as últimas edições do evento. |
 Exemplo de ecrã inicial de uma edição (no caso, de 2011). |
 Ecrã com a lista de nomeados da edição. |
 Ecrã com as curtas-metragens vencedoras da edição, e respectivas categorias. |
 Ecrã com as fotos da edição. |
 Ecrã com os convidados da edição. |
 Ecrã que possui um formulário para contacto com a organização do evento. |
Estrutura XHTML implementada
Cada ecrã de conteúdos é uma div que apresenta as dimensões da janela do browser. Uma vez que as dimensões da página HTML estão directamente relacionadas com as dimensões da janela, foi dada à página HTML uma largura de 400%. Isto porque precisávamos de 4 divs que se mantivessem lado a lado, e que ao mesmo tempo tivessem cada uma as dimensões da janela do browser. Foi dado ao body uma largura de 100% (esses 100% correspondem aos 400% da página HTML, já que as dimensões foram herdadas pelo body da página). Como as divs com os conteúdos se encontram dentro do body, foi-lhes dada uma largura de 25%, ou seja 100% do body a dividir por 4 divs. Essa largura de 25% corresponde assim à largura exacta da janela do browser. Isto veio permitir que fosse possível colocar lado a lado divs que tivessem a largura da janela do browser. A altura de todos os elementos manteve-se sempre a 100%.
Aspecto daquilo que foi explicado, na folha de estilos:
Folhas de estilos (CSS)
Principais scripts desenvolvidas (JavaScript)
Integração com outras tecnologias (frameworks, linguagens, etc...)
Soluções técnicas para problemas encontrados
Melhoramentos futuros
Conclusões
Referências bibliográficas
http://blogs.ua.pt/madeindeca/
http://www.campusitv.com/?page_id=2
http://madeindeca.blogs.ua.sapo.pt/
