Promovespinho

From Labmm2

Latest revision as of 00:49, 22 June 2011

GRUPO:

• Andreia Couto, 51539
• Barbara Roncato, 59737

Introdução

O nosso projecto final da Unidade Curricular de Laboratório Multimédia 2 tem em vista ser um site informativo sobre o Concelho de Espinho.

Processo de Brainstorming

Quando nos foi lançado este projecto, desde logo tivemos a ideia de criar uma aplicação multimédia baseada numa agenda cultural sobre uma determinada região do nosso país. No entanto, era necessário decidir qual seria essa região. Como um dos elementos do grupo vive em Espinho, decidimos criar um site sobre este mesmo Concelho, dado que, era mais fácil de arranjar informação deste local, visto que também conhecemos uma pessoa que nos consegue disponibilizar toda a informação actualizada que pretendemos. Depois destas decisões começamos a trabalhar de imediato neste projecto.

Objectivos Gerais e Específicos

Com o nosso site pretendemos levar além-fronteiras tudo o que se passa de mais relevante no Concelho de Espinho. Reportagens sobre os eventos culturais realizados em Espinho, outras notícias de cariz informativo e vídeos documentais do património e associações de Espinho.

Público-Alvo

Inicialmente, pensamos em dirigir esta aplicação multimédia a todas as pessoas do País, eventualmente turistas, mas principalmente aos habitantes de todas as idades deste mesmo Concelho para que tenham fácil acesso a informação mais actualizada sobre a região de Espinho. No entanto, e após alguma reflexão decidimos que o site deveria ser dirigido mais propriamente aos adultos, pois é o grupo que mais se interessa pelo tipo de informação que vamos disponibilizar.

Estrutura Arborescente / Fluxograma

Visto o nosso projecto ser baseado num Paradigma de Interacção Índex onde os menus e submenus estão sempre presentes, a tipologia associada a este paradigma será a Hierárquica Não Linear. O utilizador poderá navegar entre os níveis da estrutura e entre os itens do mesmo nível da estrutura, sem restrições, tendo total liberdade de selecção de percursos.

FLUXOGRAMA:

Depois da análise deste Fluxograma podemos verificar que em primeiro lugar o utilizador vai deparar-se com o primeiro momento de decisão, pois o site abrirá com uma página onde existe uma galeria de fotos, onde o utilizador interage com as setas de navegação. O utilizador tanto pode interagir com a galeria, como pode optar por carregar no “skip” e passar de imediato para a página principal do site. Na página principal estarão destacadas as notícias mais importantes da semana, ou seja, as novidades, como por exemplo, informações actuais sobre desporto, as exposições mais próximas, os espectáculos, entre outros. Quando o utilizador se encontra na página incial este tem à sua disposição mais quatro momentos de decisão. Assim, poderá decidir navegar para o menu “Notícias” que tem mais quatro submenus, ou então escolher o menu “Agenda”, com três submenus e ainda os menus “Passatempos” e “Contactos”.

Desenvolvimento

Logo de início, na página principal, o utilizador tem à sua disposição uma galeria de fotos com imagens variadas do Concelho de Espinho. O utilizador pode optar por ver e interagir com a galeria, ou então passar à página inicial, o Índex. No índex estão disponíveis cinco menus, estes menus podem ser divididos em menus primários e menus secundários.

Nos menus primários podemos encontrar o menu “Notícias” e o menu “Agenda”:

• Menu “Notícias”: Este menu oferece ao utilizador todas as informações relacionadas com os eventos culturais e sociais do Concelho. Esta informação está, por sua vez, organizada em cinco submenus:

• Festas; • Música e Espectáculos; • Desporto • Exposições.

• Menu “Agenda”: O menu “Agenda” está dividido em três submenus, os quais contêm informação sobre as datas e contactos importantes que têm influência no quotidiano do Concelho de Espinho:

• Agenda do Concelho; • Calendário; • Contactos.

Nos menus secundários podemos encontrar o menu “Home”; “Passatempos” e o menu “Contactos”:

• Menu “Home”: Neste menu, os navegadores podem encontrar as intenções da criação deste site, bem como ter acesso a um notícia em destaque e a links de outras notícias actuais.

• Menu “Passatempos”: Com este menu, os utilizadores podem conhecer os passatempos em vigor e participar em diferentes concursos disponibilizados pelo site. Os vencedores podem ganhar bilhetes para concertos ou espectáculos a decorrer em Espinho ou até mesmo entradas para actividades desportivas.

• Menu “Contactos”: Presentes neste menu estarão os contactos das pessoas influentes na criação do site PromovEspinho, assim como os respectivos emails. Também haverá uma zona de comentários onde qualquer pessoa pode deixar uma mensagem particular que será enviada para os criadores do site.

Especificação Funcional

• Ambiente Gráfico

O ambiente gráfico será simples, de fácil acesso e com diversos menus organizados à disposição do utilizador.

• Metáforas

Pretendemos utilizar metáforas globais, tais como:

O símbolo/imagem de um telemóvel (Ver Figura 1) que remete para os contactos telefónicos existentes no site.

Figura 1.

O símbolo de informação (Ver Figura 2), geralmente utilizados com “i”minúsculo, para demonstrar que de seguida estarão explícitas informações relevantes. Outros dados a incluir são um calendário e a integração do Google Maps.

Figura 2.

• Estratégias e Tipologias de Interacção

O principal modo de interacção será através dos menus, mas não só. O utilizador poderá deixar o seu comentário para dar a sua opinião e/ou sugestões para o site, assim como responder a inquéritos que estarão disponíveis ao público. O utilizador encontrará ainda botões interactivos para a visualização de fotos e vídeos.

• Tipologias de Ecrã

O nosso ecrã é constituído por um, onde o menu e a imagem de cabeçalho mais a barra lateral são sempre fixos, ou seja, não se modifica. A única informação que se altera é apenas o conteúdo.

Layouts

Decidimos utilizar no nosso site CSS Based Layouts onde existem principalmente duas barras laterais, um cabeçalho e o rodapé.

Com excepção da galeria principal, os layouts do site são todos iguais apenas se altera o conteúdo. A imagem contida no "Header", o Menu Principal e as Barras Laterais (criadas com o elemento Float) estão sempre presentes em todos os submenus do site.

Optámos por este tipo de Layout, pois é mais fácil e mais simples de executar.

Ecrã Home

Galeria de Fotos

Ecrã Submenu

Ecrã Submenu com Slideshow

Ecrã Calendário

Ecrã Contactos

Estrutura XHTML Implementada

Folhas de Estilos (CSS)

O nosso site contém apenas uma folha de estilo CSS. Nesta folha estão os códigos de praticamente toda a formatação dos elementos do site, com excepção da galeria de imagens que é um ficheiro à parte e contém a sua formatação numa outra folha CSS.

Principais Scripts desenvolvidas (JavaScript)

No nosso site conseguimos implementar praticamente todos os elementos que queríamos com a utilização da linguagem Javascript. O que fomos capazes de fazer foi:

- Um menu deslizante presente na barra lateral da esquerda onde aparece uma breve informação juntamente com um link para a página a qual se trata. Este menu está em constante movimento.

- Um calendário no menu "Agenda" onde estão presentes nas respectivas datas, os eventos que irão acontecer ou que já passaram.

- Dois tipos de galerias de imagens utilizando as frames Jquery:

1º Galeria: É A galeria principal do site, esta apresenta fotos de todo o Concelho de Espinho. Podemos encontrar a mesma no menu "Home".

2º Galeria e /ou Slideshow: Está presente nos diversos sub-menus onde estão contidas fotos sobre o tópico que trata.

Integração com outras Tecnologias

No nosso projecto, para além do uso da aplicação do Dreamweaver que foi utilizado para a implementação de todo código necessário para a criação da nossa aplicação, usamos também o Photoshop CS5 e o Illustrator CS5. O Photoshop foi utilizado para a edição de todas as fotografias utilizadas no nosso site. E o Illustrator para a edição dos separadores que podemos encontrar em cada um dos submenus.

Soluções Técnicas para Problemas Encontrados

Durante o processo de criação do site, não encontramos grandes problemas pois a maior parte dos códigos que precisávamos estavam na Internet com bons tutorias para ajudar a implementá-los.

Os únicos impasses que tivemos foram alguns "bugs" que os templates causaram, por exemplo, na implementação de algumas galerias de imagens com a linguagem JavaScript.

Foi necessário rever o código e alterar algumas linhas do template para que a galeria funcionasse.

O maior problema que tivemos foi o facto da dropbox não funcionar correctamente e não éramos capazes de aceder aos ficheiros que cada uma alterava no seu respectivo computador.

Foi então preciso dividir bem as tarefas e depois juntar tudo num só computador, o que obviamente trouxe muito trabalho e alterações.

Melhoramentos Futuros

De modo geral, estamos satisfeitas da forma como elaboramos o nosso projecto.

Entretanto, numa próxima oportunidade o que poderíamos fazer de maneira a melhorar o nosso trabalho, seria arranjar outra forma que não o uso dos templates, pois estes trouxeram-nos algumas complicações.

Devido ao pouco tempo que tivemos não fomos capazes de melhorar alguns aspectos do site, mais concretamente o Índex. Este poderia estar muito mais completo e dinâmico com menus mais interactivos e diferentes para captar a atenção do utilizador.

Conclusão

O nosso projecto tem em vista ser uma espécie de agenda cultural ou até mesmo um jornal electrónico para o público mais adulto, especialmente, para os habitantes do Concelho de Espinho. Com este projecto temos como objectivo tornar de fácil acesso toda informação importante e relevante para promover o Concelho de Espinho e facilitar a divulgação de eventos culturais, sociais, entre outros, aos seus habitantes.