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;
}
No código acima, estão definidos os atributos da tag "p" e "h2"(não escrevemos correctamente a tag aqui pois a própria wiki intrepreta as tags e deforma o resto do texto) 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;
}
Para cada página, a tabela que apresenta os conteúdos tem um "id" diferente, de maneira a podermos editar a mesma para cada página a apresentação da tabela e consequentemente os respectivos conteúdos.
#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;
}
/* Alimentacao*/
#rodapeali{
position:absolute;
width:1280px;
height:106px;
top:1250px;
}
#contali{
azimuth:center;
position:absolute;
top:850px;
text-align:justify;
font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size:13px;
width:1280px;
padding-left:142px;
padding-right:143px;
}
(não colocámos o código completo para não "sobrecarregar" visualmente o relatório, apenas pretendemos exemplificar)
Para dar mais interactividade ao site utilizámos os atributos "display" e "visibility" para esconder e mostrar os conteúdos consoante a situação em que se encontram. Por exemplo na página "Sabia Que?" são apresentados conteúdos consoante a vontade do utilizador, escondendo os conteúdos através do código abaixo:
#sabia1,#sabia2,#sabia3,#sabia4,#sabia5,#sabia6{
display:none;
background-color:#F8F8F8;
}
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.
