SaudeBemEstar
From Labmm2
Nesta página será divulgado o processo de criação do projecto "Saúde e Bem Estar".
Contents |
Alunos
Rui Espinha 45715
Tiago Ferreira 46266
José Rocha 43394
Conceito
O projecto Saúde e Bem Estar trata um dos temas mais importantes da actualidade, pois mais de metade da população portuguesa sofre de excesso de peso.
Além do controlo de peso, a alimentação influencia a nossa saúde em geral, desse modo, o Saúde e Bem Estar mostrará como tratar vários problemas de saúde sem recorrer a medicamentos, consumindo apenas determinados alimentos, de uma forma 100% saudável.
Este site foca nos principais temas de saude e bem estar que são a Alimentação e o Exercicio Fisico.
Além disso terá uma secção "Sabia Que?" onde o utilizador poderá ler factos e mitos sobre alimentação e outras curiosidades.
A página IMC volta a estar presente como já esteve na época normal mas desta vez melhorada em:
-Aspecto geral da página
-Código JavaScript aprefeiçoado - agora funciona e os dados aparecem correctamente no sitio certo, sem danificar a formatação do resto da página.
-Conselhos para atingir o peso ideal na página IMC consoante o IMC do utilizador
Arborescencia
A arborescencia é simples, o site é constituido por 6 páginas: Home, Alimentação, Exercicio, Sabia Que?(acesso ao quizz), Contactos
Todas ligadas entre elas através do menu principal á excepção do "Quizz" que apenas é acedido e dá acesso á página "Sabia Que?"
Layout
Página Inicial (home)
Página "Alimentação"
Página "SabiaQue?"
Página "Exercicios"
Página "IMC"
Página "Contactos"
XHTML
A estrutura do site é composta por três "div's" sendo estas a "div" banner, menu e rodape. A div banner contem uma imagem que está disposta no topo da página. A div menu contem os varios "hiperlinks" entre as paginas e esta sobreposta a div banner. A div rodape esta posicionada no fundo da pagina, contem uma imagem criada por nos, onde tem o copyright da pagina e o conselho para o browser a ser utilizado para uma melhor performance.
Os conteúdos são aprensentados em tabelas (normalmente duas). Optamos por utilizar tabelas pois achamos ser mais rapido e facil organizar os conteudos do site. Estas tabelas repetem-se em todas as paginas (salvo pequenas alteraçoes) de maneira a manter um layout consistente.
A disposição destes componentes esta definida atraves de uma folha de estilos CSS e algumas alteraçoes nas tags da própria pagina (style="atributo:valor;").
O menu tem animacao nas imagens do menu quando o rato entra na area da imagem (onmouseover) e esta animaçao e feita atraves de codigo javascript.
Javascript
CSS
Melhoramentos Futuros
O principal melhoramento futuro que este projecto poderia fazer seria melhoramento da compatibilidade de cross-browser
Problemas/Conclusões
Tivemos diversos problemas no desenvolvimento deste projecto nomeadamente:
- Tivemos dificuldade na organização do layout da página, os conteúdos saiam do sitio quando mexiamos nas dimensões da janela do browser, conseguimos resolver esse problema através da propriedade em CSS "position:absolute"
e definimos em todos os elementos das páginas dimensões fixas em pixeis.
- Problemas com todo o código javascript, nomeadamente os formulários. Tivemos dificuldade em colocar todos os formulários a validar e a receber dados correctamente, e em certos casos enviar as informações para o servidor.
-Neste caso deixámos o "melhor" para o fim. O grande problema que acabámos por não conseguir resolver completamente foi a compatibilidade cross-browser. Apesar disso conseguimos que o site funcionasse correctamente em 2 dos principais browsers: Mozilla Firefox e o Opera. No Safari há ligeiros probelmas com o posicionamento dos elementos, o Google Chrome e o Internet Explorer são os browsers mais problemáticos na visualização do site.
