SaudeBemEstar

From Labmm2

Latest revision as of 20:10, 11 July 2011

Nesta página será divulgado o processo de criação do projecto "Saúde e Bem Estar".

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

A animação ao evento mouseover nas imagens do menu é feita através do código abaixo, o parametro de entrada "x" varia consoante a posição do rato em cima das várias imagens do menu, por exemplo se o rato estiver em cima da imagem do menu Alimentação, o parametro de entrada enviado é "1".

function mudaimg(x){
	
	switch (x){
	
				case 1:document.getElementById("ali").src="img/alimen2.png";
				break;
				case 0:document.getElementById("ali").src="img/alimen.png";
			    break;
			    case 3:document.getElementById("exe").src="img/exe2.png";
			    break;
				case 2:document.getElementById("exe").src="img/exe.png";
			    break;
				case 5:document.getElementById("sabia").src="img/sabia2.png";
			    break;
				case 4:document.getElementById("sabia").src="img/sabia.png";
			    break;
				case 7:document.getElementById("calc").src="img/calc2.png";
			    break;
				case 6:document.getElementById("calc").src="img/calc.png";
			    break;
				case 9:document.getElementById("cont").src="img/contactos2.png";
			    break;
				case 8:document.getElementById("cont").src="img/contactos.png";
			    break;
			    case 11:document.getElementById("home").src="img/home2.png";
			    break;
				case 10:document.getElementById("home").src="img/home.png";
			    break;	
			}
		
		}
		

Na página "Sabia Que?" o efeito de esconder e mostrar conteúdo é feito através do código abaixo. Basicamente o que fizemos foi esconder todo o conteúdo indesejado, mostrando apenas o que o utilizador pretende ver. Para cada situação é enviado um parametro de entrada consoante o conteúdo que o utilizador pretende ver, para isso utilizámos uma estrutura de decisão "switch".

function mostra(x){
	switch(x){
		case 1: 	
	document.getElementById("sabia1").style.display ="block";
	document.getElementById("sabia2").style.display ="none";
	document.getElementById("sabia3").style.display ="none";
	document.getElementById("sabia4").style.display ="none";
	document.getElementById("sabia5").style.display ="none";
	document.getElementById("sabia6").style.display ="none";
	document.getElementById("rodapesabia").style.top="1220px";
	 break; 
	 	case 2: 	
	document.getElementById("sabia1").style.display ="none";
	document.getElementById("sabia2").style.display ="block";
	document.getElementById("sabia3").style.display ="none";
	document.getElementById("sabia4").style.display ="none";
	document.getElementById("sabia5").style.display ="none";
	document.getElementById("sabia6").style.display ="none";
	document.getElementById("rodapesabia").style.top="1265px";
	 break; 

A estrutura tem um total de 6 "cases", escrevemos aqui apenas 2 para exemplificar e não sobrecarregar o relatório.

Para o "Quizz" foi utilizada uma função que:
-Para cada resposta dada, uma variável de total de respostas incrementa, que no fim será verificado se o valor dessa variável corresponde ao total de perguntas (10) se não corresponder será enviada uma mensagem ao utilizador informando o que não respondeu a todas as perguntas.
-Para cada resposta certa uma variável vai incrementar e no fim será mostrada para informar o utilizador de quantas respostas acertou
-O mesmo para as respostas erradas.
-Para avaliar se o utilizador simplesmente respondeu á pergunta, ou no caso de responder se acertou ou não, para cada pergunta foi criada uma variável que recebe ambos os valores "sim" e "não" de cada resposta num array, depois verificamos qual resposta foi dada pelo utilizador através do código "pergunta[0].checked" para as respostas "sim" e "pergunta[1].checked" para as respostas "não". para ambas as respostas a variavel que guarda o total de respostas incrementa, nesse caso se o utilizador não responder, no fim a variável será inferior a 10 e será enviada uma mensagem de erro. segue aqui o código:

function calculaquizz(){
	
	var points=0;
	var erradas=0;
	var total=0;
	
	var radio1 = document.getElementsByName("perguntas1");
	if (radio1[0].checked){total++; erradas++;
document.getElementById("q0").innerHTML="<img src='img/errado.png'/>";}
	else if (radio1[1].checked){points++; total++;
		document.getElementById("q0").innerHTML="<img src='img/certo.png'/>";
	}
	
	var radio2 = document.getElementsByName("perguntas2");
	if (radio2[0].checked){total++; erradas++;	document.getElementById("q1").innerHTML="<img src='img/errado.png'/>";}
	else if (radio2[1].checked){points++; total++;	document.getElementById("q1").innerHTML="<img src='img/certo.png'/>";}
	
	var radio3 = document.getElementsByName("perguntas3");
	if (radio3[0].checked){total++; erradas++;	document.getElementById("q2").innerHTML="<img src='img/errado.png'/>";}
	else if (radio3[1].checked){points++; total++;	document.getElementById("q2").innerHTML="<img src='img/certo.png'/>";}
	
	var radio4 = document.getElementsByName("perguntas4");
	if (radio4[1].checked){total++; erradas++;	document.getElementById("q3").innerHTML="<img src='img/errado.png'/>";}
	else if (radio4[0].checked){points++; total++;	document.getElementById("q3").innerHTML="<img src='img/certo.png'/>";}
	
	var radio5 = document.getElementsByName("perguntas5");
	if (radio5[0].checked){total++; erradas++;	document.getElementById("q4").innerHTML="<img src='img/errado.png'/>";}
	else if (radio5[1].checked){points++; total++;	document.getElementById("q4").innerHTML="<img src='img/certo.png'/>";}
	
	var radio6 = document.getElementsByName("perguntas6");
	if (radio6[1].checked){total++; erradas++;	document.getElementById("q5").innerHTML="<img src='img/errado.png'/>";}
	else if (radio6[0].checked){points++; total++;
		document.getElementById("q5").innerHTML="<img src='img/certo.png'/>";}
	
	var radio7 = document.getElementsByName("perguntas7");
	if (radio7[0].checked){total++; erradas++;	document.getElementById("q6").innerHTML="<img src='img/errado.png'/>";}
	else if (radio7[1].checked){points++; total++;	document.getElementById("q6").innerHTML="<img src='img/certo.png'/>";}
	
	var radio8 = document.getElementsByName("perguntas8");
	if (radio8[1].checked){total++; erradas++; 	document.getElementById("q7").innerHTML="<img src='img/errado.png'/>";}
	else if (radio8[0].checked){points++; total++;	document.getElementById("q7").innerHTML="<img src='img/certo.png'/>";}
	
	var radio9 = document.getElementsByName("perguntas9");
	if (radio9[0].checked){total++; erradas++;	document.getElementById("q8").innerHTML="<img src='img/errado.png'/>";}
	else if (radio9[1].checked){points++; total++;
		document.getElementById("q8").innerHTML="<img src='img/certo.png'/>";}
	
	var radio10 = document.getElementsByName("perguntas10");
	if (radio10[1].checked){total++; erradas++;	document.getElementById("q9").innerHTML="<img src='img/errado.png'/>";}
	else if (radio10[0].checked){points++; total++;
		document.getElementById("q9").innerHTML="<img src='img/certo.png'/>";}
	else if (radio10[2].checked){total++; erradas++;	document.getElementById("q9").innerHTML="<img src='img/errado.png'/>";}
	
if (total<10){alert("N„o respondeu a todas as perguntas!")}
else{
	if (points<=3){alert("Num total de "+total+" perguntas:\r\nAcertou em "+points+" perguntas. \r\nErrou "+erradas+" perguntas.\r\nN„ao percebe nada disto!");
	}
	else if (points>3 && points<=4){alert("Num total de "+total+" perguntas:\r\nAcertou em "+points+" perguntas. \r\nErrou "+erradas+" perguntas.\r\nNem metade acertou! Cuidado com essa saude!");}
	else if (points>5 && points<=7){alert("Num total de "+total+" perguntas:\r\nAcertou em "+points+" perguntas. \r\nErrou "+erradas+" perguntas.\r\nDevia pesquisar mais sobre alimentaÁ„o saud·vel!");}
	else if (points>8 && points<=9){alert("Num total de "+total+" perguntas:\r\nAcertou em "+points+" perguntas. \r\nErrou "+erradas+" perguntas.\r\nBom resultado!");}
	else if (points=10){alert("Num total de "+total+" perguntas:\r\nAcertou em "+points+" perguntas. \r\nErrou "+erradas+" perguntas.\r\nParabÈns! … um verdadeiro expert na alimentaÁ„o saud·vel!!");}
}

Na página de exercicios temos uma função que permite alterar o video apresentado na página, alterando através de java script o "src" do vídeo.

function mudavidrandom(){
var x= Math.round(Math.random()*6);
switch (x){
	case 0:
	document.getElementById("video").src="http://www.youtube.com/embed/c70kpI4hHUQ";
	break;
	case 1: 
	document.getElementById("video").src="http://www.youtube.com/embed/Qz7IWo0wlPY";
	break;
	case 2:
	document.getElementById("video").src="http://www.youtube.com/embed/Vi7PeHSZYKM";
	break;
	case 3:
	document.getElementById("video").src="http://www.youtube.com/embed/mrwG4prdaAM";
	break;
	case 4:
	document.getElementById("video").src="http://www.youtube.com/embed/9T6W_izwCts";
	break;
	case 5:
	document.getElementById("video").src="http://www.youtube.com/embed/HM6p0EcFeic";
	break;
	}
}

A calculadora de IMC tem uma validação para garantir que todos os campos são preenchidos e que não são preenchidos com valores "irrealistas", depois de validar ela vai receber os valores do utilizador e calcular o IMC da seguinte forma:

function calculaIMC()
{
var sexo = document.forms.IMC.sexo.value;
var gordo;


var peso=document.getElementById("pes").value;
var altura=document.getElementById("alt").value;
altura= altura/100;
altura= Math.pow(altura,2);
IMC2=peso/altura;
IMC2= IMC2.toFixed(2);
if (isNaN(IMC2) ) {alert("Dados inválidos, por favor introduza de novo.")}
else if (IMC2>200) {alert("Dados inválidos, por favor introduza de novo.")}
else if  (IMC2<3)  {alert("Dados inválidos, por favor introduza de novo.")}
else{
switch (sexo)
{
	case ("Masculino"):
	{
	 if (IMC2<20.7){aconselhaBadochas(1);}
	else if (IMC2>=20.7 && IMC2<=26.4){aconselhaBadochas(2);}
	else if (IMC2>=26.5 && IMC2<=27.8){aconselhaBadochas(3);}
	else if (IMC2>=27.9 && IMC2<=31.1){aconselhaBadochas(4);}
	else if (IMC2>31.1){aconselhaBadochas(5);}
	break;
	}
	case ("Feminino"):
	{
		 if (IMC2<19.1){aconselhaBadochas(1);}
	else if (IMC2>=19.2 && IMC2<=25.8){aconselhaBadochas(2);}
	else if (IMC2>=25.9 && IMC2<=27.3){aconselhaBadochas(3);}
	else if (IMC2>=27.4 && IMC2<=32.3){aconselhaBadochas(4);}
	else if (IMC2>32.3){aconselhaBadochas(5);}
	break;	
	}	
	}
}
}

Além de calcular a função vai chamar uma outra função com um critério de entrada definido na estrutura de decisão "if" que para cada valor de IMC irá mostrar o conteúdo correcto na respectiva área de conteúdos. A função chamada é a seguinte:

function aconselhaBadochas(a)
{
	switch (a)
	{
	case 1: {
	document.getElementById("dicasIMC").innerHTML="O seu IMC é: <span id='magro'>"+IMC2+"</span> , tem défice de peso. O seu IMC é mais baixo que o limite inferior do intervalo de IMC recomendado e classificado como Normal (entre 20 a 25). Ter um peso demasiado baixo pode aumentar o risco de doenças, como por exemplo a osteoporose. Por esta razão e para que consiga ter um peso mais saudável é importante ter uma alimentação equilibrada e variada e ter uma actividade física regular para que possa desfrutar de uma vida mais saudável! Para mais informações consulte a nossa página <a class='linkali' href='alimentacao.html'>Alimentação</a>."}
	
	break;
	case 2: {document.getElementById("dicasIMC").innerHTML="O seu IMC é: <span id='normal'>"+IMC2+"</span> ,  parabéns!! Está no peso ideal. O seu IMC está dentro dos valores considerados como Normais (IMC entre 20 e 25). De acordo com o seu Índice de Massa Corporal o seu peso não o coloca em maior risco de sofrer de doenças como por exemplo diabetes ou doença coronária. É importante ter uma alimentação equilibrada e variada e também ter uma actividade física regular para que possa desfrutar de um peso adequado e de uma vida mais saudável! Para mais informações consulte a nossa página <a class='linkali' href='alimentacao.html'>Alimentação</a>."}
	break;
	case 3: {
	document.getElementById("dicasIMC").innerHTML="O seu IMC é: <span id='pesadito'>"+IMC2+"</span> , está ligeiramente acima do peso ideal. O seu IMC é superior ao limite superior do intervalo de IMC classificado como Normal (IMC entre 20 e 25). Este situação coloca-o num risco significativamente maior de problemas de saúde. O excesso de peso e a obesidade estão associadas a um maior risco de doenças como diabetes e doenças coronárias. É aconselhável consultar um especialista que o possa ajudar a elaborar um plano alimentar adequado à sua situação. Perder algum peso é importante para que consiga alcançar um melhor estado de saúde. É importante ter uma alimentação equilibrada e variada e também ter uma actividade física regular para que possa desfrutar de um peso saudável e de uma vida mais saudável! Para mais informações consulte a nossa página <a class='linkali' href='alimentacao.html'>Alimentação</a>." ;
	
	}
	break;	
	case 4: {document.getElementById("dicasIMC").innerHTML="O seu IMC é: <span id='gordo'>"+IMC2+"</span> , sofre de obesidade Grau 2. O seu IMC é superior ao limite superior do intervalo de IMC classificado como Normal (IMC entre 20 e 25). Este situação coloca-o num risco significativamente maior de problemas de saúde. O excesso de peso e a obesidade estão associadas a um maior risco de doenças como diabetes e doenças coronárias. É aconselhável consultar um especialista que o possa ajudar a elaborar um plano alimentar adequado à sua situação. Perder algum peso é importante para que consiga alcançar um melhor estado de saúde. É importante ter uma alimentação equilibrada e variada e também ter uma actividade física regular para que possa desfrutar de um peso saudável e de uma vida mais saudável! Para mais informações consulte a nossa página <a class='linkali' href='alimentacao.html'>Alimentação</a>."}
	break;
	case 5: {document.getElementById("dicasIMC").innerHTML="O seu IMC é: <span id='badocha'>"+IMC2+"</span> ,  sofre de obesidade mórbida. A obesidade não é apenas um factor de risco para a morte prematura, mas também aparece como causa de outras doenças graves, nomeadamente a hipertensão arterial, diabetes mellitus tipo 2 (não insulino-dependente), alterações de triglicerídeos e colesterol do sangue, doenças cardiovasculares, apneia do sono (dificuldades respiratórias durante o sono), gota, osteoartrite e o aumento da prevalência de determinados tipos de cancro, nomeadamente do ovário, da mama, e do cólon. Quem se encontra neste grupo deve procurar rapidamente perder peso. Uma pequena diminuição do peso (5 a 10%), está associado a uma redução do aparecimento de diabetes mellitus entre 30 e 40% e de uma diminuição entre 20 a 25% de mortalidade. Para mais informações consulte a nossa página <a class='linkali' href='alimentacao.html'>Alimentação</a>."	}
	break;
		
	}
	
	
}

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;
	}

A maior parte dos hiperlinks apresenta uma animação ao evento "mouseover", e esse efeito é conseguido através do código abaixo:

a:hover{text-decoration:"underline";}

Em relação á tipografia, está definida nas tabelas de conteúdos de cada página.

text-align:justify;
font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size:13px;

Alguns dos outros estilos estão definidos na própria página, como por exemplo "valign" "width" "bgcolor" entre outros.

Melhoramentos Futuros

O principal melhoramento futuro que este projecto poderia fazer seria melhoramento da compatibilidade de cross-browser.

Integração com outras tecnologias

O nosso site integra com as seguintes tecnologias:

-Adobe PDF Reader (o browser necessitará o plug in "Adobe Reader" para ler correctamente os PDF's apresentados na página Alimentação
-Youtube (vídeos na página Exercicios)
-Google Maps (na página contactos)

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.
-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.