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?"
Aqui fica uma imagem para explicar melhor:
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 vários "hiperlinks" entre as páginas e está sobreposta á div banner. A div rodape está posicionada no fundo da página, contém uma imagem criada por nós, onde tem o copyright da página e o conselho para o browser a ser utilizado para uma melhor performance.
Os conteúdos são aprensentados em tabelas (normalmente duas). Optámos por utilizar tabelas pois achámos ser mais rápido e fácil organizar os conteúdos do site. Estas tabelas repetem-se em todas as páginas (salvo pequenas alterações) de maneira a manter um layout consistente.
A disposição destes componentes está definida através de uma folha de estilos CSS e algumas alterações nas tags da própria pagina (style="atributo:valor;").
O menu tem animação nas imagens do menu quando o rato entra na área da imagem (onmouseover) e esta animação e feita através de código JavaScript.
Javascript
CSS
Aqui vai ser explicado o principal código css nas páginas.
Div banner. As alterações realizadas nesta div baseiam-se em posição da div e dimensões da mesma. Através de CSS alterámos a posição da mesma para "absolute" e o "width" para o valor em px de
#banner{
position:absolute;
width:1280px;
Os conteúdos são apresentados nas tabelas e têm os posicionamentos, tipos de letra, dimensões e paddings definidos através de CSS:
#indexcont{
azimuth:center;
position:absolute;
top:500px;
text-align:justify;
font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size:13px;
width:1280px;
padding-left:142px;
padding-right:143px;
height: 397px;
}
#indexcont p{
font-size:15px;
color:#090;
}
#indexcont h1{
text-align:right;
font-size:11px;
color:#CCC;
}
#indexcont h2{
text-align:left
font-size:18px;
color:#030;
}
" e "
" contidos na tabela "indexcount" que é a principal área de conteúdos.
A div "menu" apresenta os icones de navegação, compostos por imagens e através de CSS definimos o posicionamento do mesmo em relação ao resto dos conteúdos da páginas com o código abaixo:
#menu{text-align:right;
padding-top:90px;
position:absolute;
width:100%
height:20px;
width:200px;
left:560px;
}
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.
