Wide Angle

From Labmm2

Revision as of 16:47, 20 June 2011 by Ana Rita Pinheiro (Talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

Jump to: navigation, search

Grupo:

Anabela Casqueira - 59627
Ana Rita Pinheiro - 60789
Daniela Monteiro - 60811
João Soares - 61925
Telma Ferreira - 60360

1 Apresentação e contextualização do tema
2 Brainstorming
3 Logótipo
4 Layouts iniciais
5 Layouts finais
6 Estrutura XHTML
7 Folhas de estilo CSS
8 Principais scripts implementadas
9 Integração com outras tecnologias
10 Soluções técnicas para problemas encontrados
11 Melhoramentos futuros
12 Conclusões
13 Referências webliográficas
14 Anexos

Apresentação e contextualização do tema

O projecto do nosso grupo tem como tema a fotografia. O que pretendemos com o nosso site é dar a conhecer mais um pouco da fotografia, em termos de técnica e evolução, aos mais experientes, mas também a quem é um principiante na actividade. Para isso definimos um público-alvo primário e um secundário.

Público-alvo primário:
Pessoas amantes da fotografia, com experiência e alguma conhecimento prévio. O nosso site vai permitir que estas pessoas aprofundam os seus conhecimentos.

Público-alvo secundário:
Aqui estabelecemos uma idade mínima de 16 anos. Não restringimos a idade máxima porque temos como objectivo proporcionar conhecimento e momentos lúdicos e educativos para utilizadores também mais inexperientes.

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.

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.

Este é o menu que contará a breve história da fotografia.

Este será o layout onde teremos uma pequena galeria de fotos.

Aqui teremos a timeline com a evolução da sua fotografia desde o seu nascimento até aos dias de hoje, à era digital.

Esta será a página das técnicas a qual dará mais opções de escolha ao utiizador.

Páginas das opções incluídas nas técnicas

Esta página contém dicas para o utilizador (fotógrafo) puder melhorar as suas fotografias e técnica com pequenas instruções em relação ao foco, flash, enquadramento, entre outros aspectos importantes que possam tornar uma má fotografia numa obra de arte.

Esta página contém os equipamentos e acessórios para fotógrafos mais experientes.

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.

Esta foi uma das páginas css utilizada para a timeline. Este é o código da página superfish.css visível na imagem apresentada na parte dos scripts. Este código permite fazer o scroll horizontal para o utilizador puder avançar nos anos na timeline e ver a evolução das máquinas.

Principais scripts implementadas

Para fazer a timeline utilizámos JQuery com auxílio de alguns sites.

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.