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 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)
Sliding e uso das setas do teclado
Os scripts mais essenciais para o nosso website são aqueles que permitem o slide dos ecrãs através das setas do teclado. Para tal foi usado jQuery (versão 1.3.2), para permitir essa animação de slide. O código é o seguinte:
A animação horizontal ou vertical é indicada no código por "left" e "top", respectivamente. A velocidade da animação, no caso, é "slow" (poderia também ser atribído um intervalo de tempo exacto). O "id" presente no código corresponde precisamente ao id do elemento na direcção do qual a animação será feita.
Foi necessária a criação de uma variável ("var div") que mudasse consoante o ecrã que estava a ser mostrado. Essa variável adquire assim o valor do nome da div, e é alterada consoante a tecla pressionada e o ecrã que estava anteriormente a ser mostrado. Isto foi conseguido através de um sistema de if's associados aos scripts que detectam quando as setas do teclado são pressionadas. Esses scripts encontram-se exemplificados a seguir:
Exemplo:
No primeiro if do exemplo mostrado, quando se pressiona a tecla esquerda, caso a variável div tenha o valor "ecrasobre" será executado o script andahorizontal('ecrainicial');. Ou seja, ao pressionar a tecla esquerda (37), será feito o slide para o ecrã inicial. Quando essa função é executada, também a variável div passará a ter o valor "ecrainicial".
Este método foi utilizado para todos ecrãs. Foi criado um sistema de if's para cada tecla (direita, esquerda, cima e baixo).
A variável div tem inicialmente o valor "ecrainicial", já que é o primeiro ecrã que aparece quando se entra na página.
Esta implementação de scripts veio permitir que o utilizador apenas pudesse fazer slide em direcções predefinidas, orientando assim a sua navegação pelo website. As direcções possíveis são indicadas pelas setas nas margens dos ecrãs.
Galerias de fotos
Para as galerias de fotos foram usados os seguintes códigos javascript (jQuery):
.png)
.png)
Para que estes scripts pudessem funcionar sem problemas, foi necessário ter em atenção os valores usados nas dimensões das fotografias e das divs. As fotografias, que foram adicionadas através de HTML, tiveram também que ter o valor das suas dimensões explícito no código ("<img src="foto.jpg" width="xxx" height="yyy" />").
O aspecto do código HTML e CSS usado para a galeria é o seguinte:
Uma vez que queríamos criar três galerias, foi necessário dar ids diferentes a cada galeria (e divs das fotos), e também criar variáveis diferentes no código javascript, para que todas elas pudessem funcionar devidamente.
Chamada de vídeos
No ecrã das curtas-metragens vencedoras foi criado um menu com links que, ao serem clicados, faziam com que o vídeo da curta correspondente aparecesse. Para isto foi usado o seguinte código javascript:
Exemplo:
A função foi associada ao link da curta correspondente, e é chamada através de onclick.
Div de ajuda (aparecer/desaparecer)
No ecrã inicial existe um botão que o utilizador, em caso de dúvida, passa com o cursor e surge uma caixa de texto com algumas informações. Para o fade in e fade out dessa caixa foi usado o seguinte código javascript:
Aqui, "img#ajuda" corresponde ao id da imagem à qual é feito o rollover (o evento de rollover é detectado pelo "hover" no código). "#divajuda" corresponde ao id da caixa que aparece (fadeIn) e desaparece (fadeOut). Os valores 500 correspondem à velocidade da animação.
Div de falso loading desaparece
O código que permite que a div inicial de falso loading desapareça é o seguinte:
A função é chamada com o onload do body: setTimeout('desaparece()',2000);
Integração com outras tecnologias (frameworks, linguagens, etc...)
Soluções técnicas para problemas encontrados
O primeiro desafio encontrado foi como poderíamos ter divs com as dimensões da janela do browser lado a lado. A resolução desse desafio foi já explicada na parte da estrutura XHTML implementada, no início deste relatório.
O tipo de implementação de código usado para a animação dos ecrãs em slide através das setas do teclado mostrou-se também um problema quando a página era visualizada no navegador Firefox. O que acontecia era que as setas do teclado não só faziam o slide como faziam scroll em direcções indesejadas. Se o utilizador estivesse por exemplo no primeiro ecrã e pressionasse a seta para baixo, a página fazia scroll para baixo, e isto não era desejado. Para a resolução deste problema foi usado o seguinte código:
O primeiro if presente no código foi acrescentado posteriormente, quando ao colocar o formulário de contacto nos apercebemos que no seu preenchimento, caso o utilizador quisesse usar as setas para se deslocar no texto, o ecrã fazia slide. Para a resolução deste conflito, definiu-se que, quando nos campos de texto é feito onfocus, a variável div adquire o valor "nenhum". Assim, caso div=="nenhum", a função faria return true, e assim o uso das setas torna-se possível dentro das áreas de texto (isto só é possível pois div=="nenhum" não tem associada nenhuma função de slide horizontal ou vertical). Quando é feito onblur dos campo de texto, a variável div volta a adquirir o valor "ecracontacto", e assim o código torna-se novamente activo.
Melhoramentos futuros
Após a conclusão do projecto, alguns problemas ficaram por ser resolvidos, nomeadamente o redimensionamento da janela do browser e o refresh da página, que dá origem a alguns entraves na navegação do Website.
Respectivamente ao redimensionamento da janela do browser, este, ao ser executado, faz com que os conteúdos se sobreponham e as divs se desloquem, alterando assim o layout original. Por enquanto, este problema é resolvido fazendo o reload da página na barra de endereço.
Ao fazer o refresh da página, independentemente do ecrã que esteja a ser visualizado, o browser assume sempre como se fosse o ecrã inicial, o que vai implicar uma navegação errada. Por enquanto, esse erro pode ser remediado fazendo o reload da página, e não refresh (ou os dois combinados).
O grupo considera assim que estes são os aspectos mais importantes a melhorar futuramente.
Conclusões
Terminado o projecto, o grupo pode concluir que atingiu com sucesso os objectivos estabelecidos inicialmente. O maior desafio ao qual nos propusemos foi a implementação de um tipo de navegação inovador e original, que é feito através das setas do teclado. Depois de uma vasta pesquisa e compreensão dos códigos necessários para este tipo de navegação, conseguimos conciliar a informação encontrada ao longo da pesquisa com os conhecimentos adquiridos nas aulas de Laboratório Multimédia II. A programação do site foi assim concluída conforme o planeado e com bastante sucesso. Ultrapassada a maior dificuldade encontrada, procedemos à formatação do Website. Optamos pela criação de layouts de aspecto simples e limpo, combinando imagens criadas pelo grupo com informação relativa ao Made in DeCA. Concluímos assim que a execução deste projecto foi muito importante na implementação dos conhecimentos já obtidos, e na aquisição de novas aprendizagens.
Referências bibliográficas
http://blogs.ua.pt/madeindeca/
http://www.campusitv.com/?page_id=2
http://madeindeca.blogs.ua.sapo.pt/
prevent scrolling with arrow keys
Documento de Especificações para Desenvolvimento Web
5 Things You Need to Know to Start Using HTML5 Video and Audio Today
