User:Faz-te á Estrada

From Labmm2

Revision as of 22:36, 21 June 2011

Grupo

• Alexandra Guedes
• Ana Rita Regatão
• Carolina Carvalho
• Diana Ribeiro
• Maria Alexandra Azevedo

Apresentação e contextualização do tema do projecto

O nosso site pretende explorar de uma forma nova o conceito de viagens para jovens dentro de Portugal. Desta forma, pretende-se apresentar opções de explorar o país de forma dinâmica e mais barata que as ofertas feitas pelas agências de viagens, dando a possibilidade de tomar opções distintas dependente do tempo, orçamento e actividades que pretendem realizar.

Brainstorming

Inicialmente usou-se uma técnica de brainstorming baseada em palavras que surgiram ao acaso, escritas por cada um dos elementos do grupo, que possivelmente sugeririam alguns temas e conceitos que seriam passíveis de serem aproveitados, sendo depois discutidos os seus prós e contras, e a sua possível aplicação nas linguagens de programação a utilizar. Durante este processo o grupo analisou alguns sites encontrados com temas e estruturas que considerou interessantes, desta forma, foram surgindo algumas ideias a nível de estratégia, desenvolvimento do conceito e design. Finalmente ficam dois temas que nos interessariam mais a nível de aplicação: Loja de Doces e Viagens para Jovens. Tendo em grupo optado pelo segundo, visto que considerou ser mais passível de exploração tanto a nível de interface gráfica e processos de interacção.

Objectivos Gerais e Específicos

Os objectivos gerais do site são dar ao utilizador a opção de pesquisar locais para visitar, bem como actividades e sítios de interesse para visitar. Disponibiliza também informações sobre alojamento, alimentação e transportes.
Teremos ao dispor dos nossos utilizadores uma secção de contactos onde estes poderão entrar em contacto com a equipa para esclarecer dúvidas, faBold textzer reclamações ou ainda dar sugestões para melhorar o nosso site.

Público Alvo

O nosso público-alvo primário são jovens com idades entre os 16 e os 25 anos, e o secundário são pessoas de todas as idades que tenham interesse em conhecer Portugal.
O público-alvo primário foi escolhido porque as estadias são maioritariamente em pousadas da juventude, e os locais de interesse são definidos segundo tal faixa etária.

Layouts

Seguem-se os layouts que apresentámos no protótipo do nosso website, servindo de exemplo para a estrutura e aspecto geral do mesmo.

Mapa c/ as Categorias (após entrada com Stopmotion)	Página principal c/ Menu Superior	Exemplo do layout da página após a selecção de cada categoria	Layout da página-exemplo de cada local escolhido
Ícones das Categorias

Estrutura XHTML Implementada

Relativamente á estruturas das páginas o grupo optou por utilizar um template para todas as páginas excepto o menu inicial. Este template é constituído por conteúdos comuns a todas as páginas, ou seja, que se mantêm fixos em todas as páginas criadas com base no template (Menu Superior – Categorias –, Menu Inferior, Imagem de fundo e estrutura de divs.

Também contém uma zona opcional (galeria de fotos) que só é utilizada nas páginas de conteúdo informativo (cidades incluídas em cada categoria), sendo possível controlar a sua presença ou não na página baseado no template.

Neste template constam também as zonas editáveis que nos permitiam acrescentar o conteúdo localizado e alinhado e comum a todas as páginas.

Quando á página inicial, os ícones estão organizados numa estrutura de divs de modo a ficarem alinhados relativamente ao mapa do fundo.

Os links para a navegação entre páginas foram também feitos baseados nas possibilidades do HTML.

Optámos por organizar o nosso projecto desta forma de modo a rentabilizar recursos e criar uma coerência entre as páginas constituintes.

Folhas de Estilos (CSS)

Para o nosso website, implementámos um CSS geral, ou seja, para todas as páginas. Deste modo, o fundo, logo, menus e etc., estariam sempre coerentes em termos de disposição e cores.
Ao longo do CSS, utilizámos pequenos comentários para mais facilmente localizarmos cada página ou sector de cada uma. Consoante o código HTML, estabelecemos ids que ligassem as divs ao CSS, assim como classes (quando se tratava de formatar o estilo para vários tags de HTML com o mesmo nome).

No menu superior, uma vez que utilizámos o jQuery, aproveitámos algum CSS que já vinha com este. De resto, utilizamos principalmente código para alinhar o menu (com as margens), para definir o tamanho, as fontes, as cores e a decoração do texto:

Os links do menu inferior têm uma formatação própria para não adoptarem a formatação dos restantes links do site, visto que se encontram em todas as páginas:

Para integrar a galeria de fotos e a aplicação do Google Maps, foram criadas duas divs específicas apenas visíveis nas páginas que contêm informação sobre os locais:

A parte que se segue diz respeito ao formulário. Para este, definimos - através do CSS - a área de texto do formulário e editámos tudo o que estava relacionado com este de modo a ficar inserido na página no espaço em que pretendíamos colocá-lo.

Na página em que se encontra o mapa, estabelecemos ids e classes para as "legendas", ou seja, os nomes que surgem debaixo de cada ícone relativo às categorias principais. Aqui, editámos especialmente as áreas de texto e a sua posição na área de conteúdo da página através de um controlo do padding.

Dividimos ainda as páginas individuais de cada categoria e editámos as imagens de fundo em cada uma, o posicionamento das mesmas e o alinhamento horizontal e de texto.

Javascript

Baseado nas funcionalidades que exploramos nas aulas práticas de Lab e com a ajuda de alguma pesquisa adicional, integramos a linguagem Javascript em vários componentes do nosso website. A sua aplicação mais significativa foi na concretização das galerias de fotos que colocamos na página relativa a cada cidade. Para a sua realização servimo-nos de timers, utilizando a função set Interval que, consoante o intervalo de tempo que definimos, chama uma outra função que incrementa a variável associada a cada fotografia. Utilizamos ainda duas afirmações if que permitem ver o slideshow em loop e navegar pelas fotos da mesma forma. Isto significa que quando chega à ultima foto volta a ser apresentada a primeira e, ao navegar manualmente, ao retroceder na primeira foto è mostrada a última. Este trecho de código foi utilizada para todas as galerias.

Fizemos também uso do javascript para fazer as transições entre as páginas dos stopmotions e as páginas de conteúdo. Assim, utilizamos a função setTimeout e definimos um redireccionamento para outra página html após a tempo de reprodução do video ter passado.

Para fazer as legendas dos icons presentes no mapa, ou seja, o seu estado over, utilizamos uma estrutura de if's que permite esconder ou revelar a legenda de cada categoria através do style.display = 'none' e do style.display = 'block', respectivamente

No submenu de cada categoria existe ainda uma foto que apresenta os vários locais que o utilizador pode explorar. Passado alguns segundos esta foto muda, coagindo o user a agir. Para programar esta acção utilizamos de novo um timer semelhante ao das galerias.

Integração com outras tecnologias

jQuery:

http://jquery.com
O jQuery consiste numa livraria de JavaScript que simplifica documentos de HTML e que nos ajudou em animações, interacções, e num desenvolvimento web mais prático.
Utilizámos esta tecnologia no menu superior relativo às categorias principais.

Soluções técnicas para problemas encontrados

Google Maps

O nosso objectivo é implementar Google Maps na página de cada local, para assim orientar geograficamente os nossos utilizadores. Tentamos seguir um tutorial mas optamos por utilizar uma ferramenta gratuita do Google que nos permite implementá-lo facilmente no site.

Imagemaps

Na página de escolha dos locais, temos uma fotografia que muda com o passar do tempo para levar o utilizador a agir. Em cada uma dessas fotografias temos 4 placas que indicam os locais que o utilizador pode escolher. O nosso objectivo era fazer imagemap para que cada uma dessas placas nos levasse à página pretendida, no entanto, com o passar da primeira para a segunda fotografia o imagemap deixa de funcionar. Apesar das pesquisas realizadas e várias tentativas de resolver o problema, foi-nos no entanto impossível. Este tópico integra-se também na categoria dos melhoramento que pretenderíamos fazer futuramente.

Formulário

Na página das perguntas, para além das FAQ’s queríamos implementar um formulário. Para tal, tentamos implementar com Jquery, mas não foi possível, não a [[File:nível de programação mas da aleteração que a sua implementação fazia às propriedades gerais da página controladas pelo template. Por isso, acabamos por implementar um formulário simples em HTML.

Imagem de Fundo

Devido às formas de interacção de animação que escolhemos, o fundo do nosso website é uma fotografia, de modo a integrar-se no stopmotion que aparece como introdução. Desta forma, aquando a iniciação da concretização da página, ocorreram algumas complicações devido á sua dimensão e ajuste da foto aos diferentes browsers. Baseando-se na pesquisa que fizemos para resolver o problema ([1]http://www.w3schools.com/browsers/browsers_display.asp) a imagem ficou centrada na página e perceptível para todos os browsers e dimensões de ecrã, apesar de não ocupar o ecrã inteiramente, devido a estas diferenças.

Melhoramentos Futuros

Relativamente aos melhoramentos que gostaríamos de efectuar no futuro, o principal baseia-se numa mais evoluida integração do tipo de layouot escolhido numa página web, como galerias de fotos, imagem de fundo, menus, de modo a torná-lo mais coerente e também melhoramentos a nível de interacção, visto que, tendo sido o último projecto feito em flash, fomos um bocado ambiciosas relativamente a este ponto, desta forma, com as capacidades de trabalho em JS, HTML e CSS mais desenvolvidas, perspectivaríamos uma interacção mais dinâmica.

Outro melhoramento, que seria realizável, seria a utilização desta plataforma online para mais que apenas informação. A possibilidade de cada utilizador possuir uma conta, possibilitando-lhe uma navegação mais direccionada, a marcação de viagens para os locais sugeridos no site, e a partilha de experiência com outros utilizadores.

É importante referir um melhoramento ao nível dos links dos vários menus, nos quais deveria ser indicada a página em que o utilizador se encontra e não só no próprio conteúdo da página e também seria necessário uma reacção ao passar o rato nas placas de escolha da cidade dentro da categoria, sendo este um mecanismo de ajuda oa utilizador. Isto não aconteceu devido a problemas relativos à implementação.

Para além destes, a extensão a outros dispositivos, nomeadamente dispositivos móveis, seria bastante útil para os utilizadores do Faz-te à Estrada, visto que poderiam consultar as informações durante a viagem mesmo sem acesso a um computador.

E, por fim, um dos nossos objectivos iniciais tinha em vista a implementação de um player de música em flash, que se mantivesse sempre a funcionar sem quebras ao longo do site.

Referências Bibliográficas

HTML/CSS/JS:
tympanus.net
webdesignerwall.com
using-image-maps-in-javascript-a-demo-application
www.w3schools.com/browsers
w3schools.com
www.1stwebdesigner.com

Google Maps:
www.searchengineknowledge.com

Pesquisa de Locais/Informações para o Site:
www2.cm-evora.pt
www.hotfrog.pt
lazer.publico.pt
actividades-de-verao-para-jovens
www.guiadacidade.pt
aventura-no-geres
www.strawberryworld-lisbon.com
www.rotasdovento.pt

Anexos

Fluxograma/Mapa do Site