Wide Angle

Brainstorming

No processo de brainstorming foram obtidas várias ideias. Como podíamos partir de temas como objectos artísticos, personalidades, e produtos, o grupo optou por trabalhar com o tema dos objectos artísticos, nomeadamente a fotografia. A escolha incidiu sobre a fotografia por não haver consenso relativamente às outras ideias e por ser um gosto comum. Contudo, tivemos uma diversidade de temas que foram sugeridas ao longo deste processo:

• Tim Burton - Site dedicado ao célebre cineasta, famoso pelas suas temáticas sombrias.
  
• Jazz - O objectivo seria fomentar o gosto por este género musical que não é tão popular entre os jovens, promovendo assim a sua descoberta.
  
• Arte - Site focalizado principalmente nos materiais usados nas Belas-Artes, mostrando a diversidade dos mesmos, bem como o uso que lhes podemos dar.
  
• Cerveja - Construir um site com conteúdos relacionados com a cerveja, como a diversidade de marcas e produtos existentes no mercado e as diferenças entre eles.
  
• Como usar um Mac? - Construção de um site informativo organizado, contendo informação relevante para os utilizadores de Mac, como o uso de atalhos. Teria algum interesse porque a maioria da informação encontra-se dispersa pela web, pelo que o objectivo seria concentrá-la e assim tornando-a mais acessível ao público.
  
• Origami – Construir um site dedicado à arte do papel, demonstrando técnicas com recurso a vídeo stop motion.
  
• Aplicação interactiva sobre a viagem entre Aveiro e Porto - O objectivo seria dar a conhecer todas as terras nas quais o comboio que efectua viagens do Porto para Aveiro e vice-versa faz paragens, explorando pontos de interesse cultural.
  

Logótipo









Dentro das experiências que fizemos do logótipo escolhemos o que se situa dentro do pequeno quadrado na parte inferior da imagem. A palavra "wide" pretende sugerir uma informação vasta do tema da fotografia e a palavra "angle" faz referência aos ângulos, que estão fortemente relacionada com a fotografia.


Limites/características da nossa aplicação

Nesta aplicação pretendemos que não haja qualquer limite/barreira para o utilizador, ou seja, sempre que este necessitar poderá aceder ao site e a qualquer informação que este dispõe.
A nossa aplicação não abrange outros dispositivos como "print" ou "handheld", residindo aí uma das suas limitações. Isto deve-se ao facto de a maior parte dos conteúdos serem compostos por imagens: O utilizador não teria uma boa percepção delas num tamanho inferior ao original, pelo que a sua visualização em dispositivos com ecrãs relativamente menores não resultaria.
Relativamente ao tamanho da aplicação, iremos utilizar 980x768.
Quanto à aplicação em si, esta não envolve qualquer tipo de negócios (compra e/ou venda de produtos), visto que se trata meramente de um site informativo.

Layouts iniciais


Nos layouts abaixo apresentados as imagens de fundo não serão as utilizadas para o projecto, servindo apenas como exemplo da estrutura dos layouts da aplicação.
Entretanto todos os layouts estão em remodelação, logo pode não ser exactamente esta a estrutura que iremos utilizar. No entanto, ficam aqui os nossos protótipos.


Menu inicial



History



Evolution



Gallery





O layout das Technics ainda se encontra em modelação. Ao contrário dos outros tópicos este terá sub-menus, em drop down.

1. Técnicas:
   1. Noções;
   2. Dicas;
   3. Materiais;
   4. Try it Yourself;





Layouts finais



Estas foram as alterações que fizemos ao layout do site. Tornámo-lo um pouco mais dinâmico e organizado em termos de estruturas, visto que cada opção de escolha do utilizador parecia estar um pouco fora de todo o layout não se enquadrando da melhor maneira e a sua simplicidade não dar aspecto do conteúdo pormenorizado que queremos dar.
Contudo, esta é apenas uma remodelação. Os layouts finais são os seguintes:

Este é o menu inicial. Ao centro estará uma imagem que irá alternando para outra de 5 em 5 segundos.

Estrutura XHTML

Para a estrutura xhtml vamos usar essencialmente divs para dividir os conteúdos e menus atribuindo id's a cada div para a sua formatação em CSS.

Estrutura do menu inicial:


Div id="container" - que contém todo o conteúdo, ou seja é a div "mãe".


Div id="header" style="height:139px; - este é o cabeçalho onde dentro terá a div id="logo" (que terá o logótipo) e a div id="menu" (onde tem as opções no menu distribuído pelas tags ul (id="lista") e li que permitem uma melhor organização e visualização ao utilizador. Nessee menu teremos as opções: History | Evolution | Gallery | Techniques | More Dentro da tag li da opção Techniques colocamos outro ul que dará lugar aos sub-menus dessa opção: Tips | Notions | Materials |Try it yourself

Para a ligação da páginas utilizámos a tag <a href=""></a>.

Ao centro decidimos criar um slideshow com as imagens a mudar depois de um certo tempo. (falta...)

Folhas de estilo CSS

Como é perceptível os menus (incluindo rodapé) estarão sempre presentes em qualquer nível do site. Para uma melhor organização iremos, por isso, utilizar somente uma folha css implementada em todas as páginas, com a mesma estrutura para todas. Isto permite-nos uma maior limpeza em termos de documentos e mais organização. As formatações irão ser feitas através de id's e classes.




Principais scripts implementadas

Integração com outras tecnologias

Além da utilização do dreamweaver para a implementação do código para a realização do site utilizámos outros programas para a edição de alguns elementos da aplicação nomeadamente o ilustrator cs5 para desenhar o logótipo e o photoshop para tratamento de imagens.
Em termos de programação utilizámos o jQuery para assistir ao javacscript, mais concretamente para desenhar a timeline na página da evolução das máquinas.




Soluções técnicas para problemas encontrados

Melhoramentos futuros

Conclusões

Referências webliográficas

• http://www.webmaster.pt/sliders-jquery-8747.html
• http://galleria.aino.se/
• http://simile.mit.edu/wiki/Timeline#Current_Documentation
• http://simile.mit.edu/wiki/How_to_Create_Timelines
  == Anexos ==