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. É claro que a página HTML com uma largura de 400% ia causar o aparecimento da barra de scroll horizontal que não era desejada. Isso foi resolvido com um overflow: hidden;
A altura de todos os elementos manteve-se sempre a 100%.
Aspecto daquilo que foi explicado:
Tendo como base esta estrutura, todo o resto da estrutura XHTML foi feita através do uso de divs, dentro das divs maiores que foram feitas anteriormente (as divs de ecrã).
A organização e aspecto destas de todas as divs foram conseguidos através de CSS.
Na página foi implementado o <!DOCTYPE HTML>.
Folhas de estilos (CSS)
Como já foi referido, toda a formatação e estruturação da página foi feita em CSS. Foi usada apenas uma folha de estilos e, pontualmente, foi usado CSS internamente no ficheiro HTML quando se tratava de situações em que era necessário posicionar uma única imagem, por exemplo (isto para que não tivessem que ser criadas mais ids ou classes na folha de estilos por causa de um simples posicionamento de imagem).
Textos:
Para cada tipo de texto (títulos, subtítulos, textos maiores, mais pequenos, etc) foi criada uma classe diferente, sendo que a principal mudança foi o tamanho do texto. Em geral o texto da página é da família Helvetica, Arial, sans-serif, e apresenta efeito de sombra (CSS3).
Os títulos dos diferentes ecrãs têm o tipo de letra Lobster, que foi importado para a folha de estilos da seguinte forma:
Efeito Vignette
Em toda a página está sempre presente um efeito vignette, que torna os cantos da janela mais escuros. Este efeito foi conseguido através da propriedade box-shadow do CSS3, que foi aplicada a uma div que tem as mesmas dimensões que a janela do browser e que se mantém sempre estática. A esta div foi também dado um z-index negativo para que os conteúdos da página fossem clicáveis e os textos fossem seleccionáveis.
Div de carregamento
Foi criado um falso loading quando se entra na página, para dar tempo de os conteúdos serem carregados. Este falso loading não é mais do que uma div que foi aplicada da mesma forma que a div do efeito vignette, mas sem o z-index negativo. Esta div desaparece ao fim de alguns segundos através de uma função em javascript.
Div de dúvida
No primeiro ecrã existe um botão que, quando o utilizador passa com o cursor, apresenta informação sobre como navegar no site. A esta div foi dada a seguinte formatação:
Formulário de contacto
Aos inputs do formulário de contacto foram aplicados os seguintes estilos:
O botão do formulário foi conseguido com o seguinte código HTML: <button type="submit" name="send" class="enviar_btn" />
E com a seguinte formatação 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/
