SaudeBemEstar
From Labmm2
Ruiespinha (Talk | contribs) |
Ruiespinha (Talk | contribs) |
||
| Line 27: | Line 27: | ||
Além disso haverá uma ajuda para o controlo total do peso: perder, ganhar e até manter peso. | Além disso haverá uma ajuda para o controlo total do peso: perder, ganhar e até manter peso. | ||
| + | |||
| + | |||
| + | ==Javascript== | ||
| + | |||
| + | Este site integra uma calculadora de IMC (Índice de Massa Corporal), aqui fica o código, explicado: | ||
| + | |||
| + | |||
| + | function calculaIMC() | ||
| + | { | ||
| + | var sexo = document.forms.IMC.sexo.value; | ||
| + | var gordo; | ||
| + | |||
| + | |||
| + | var peso=document.getElementById("pes").value; | ||
| + | var altura=document.getElementById("alt").value; | ||
| + | var IMC; | ||
| + | altura= altura/100; | ||
| + | altura= Math.pow(altura,2); | ||
| + | IMC=peso/altura; | ||
| + | IMC= IMC.toFixed(2); | ||
| + | if (isNaN(IMC) ) {alert("Dados inválidos, por favor introduza de novo.")} | ||
| + | else if (IMC>200) {alert("Dados inválidos, por favor introduza de novo.")} | ||
| + | else if (IMC<3) {alert("Dados inválidos, por favor introduza de novo.")} | ||
| + | else{ | ||
| + | switch (sexo) | ||
| + | { | ||
| + | case ("Masculino"): | ||
| + | { | ||
| + | if (IMC<20.7){document.getElementById("resultadoz").style.color="#00F" ; aconselhaBadochas(1);} | ||
| + | else if (IMC>=20.7 && IMC<=26.4){document.getElementById("resultadoz").style.color="#0F6" ; aconselhaBadochas(2);} | ||
| + | else if (IMC>=26.5 && IMC<=27.8){document.getElementById("resultadoz").style.color="#FF0" ; aconselhaBadochas(3);} | ||
| + | else if (IMC>=27.9 && IMC<=31.1){document.getElementById("resultadoz").style.color="#F90" ; aconselhaBadochas(4);} | ||
| + | else if (IMC>31.1){document.getElementById("resultadoz").style.color="#F00" ; aconselhaBadochas(5);} | ||
| + | break; | ||
| + | } | ||
| + | case ("Feminino"): | ||
| + | { | ||
| + | if (IMC<19.1){document.getElementById("resultadoz").style.color="#00F" ; aconselhaBadochas(1);} | ||
| + | else if (IMC>=19.2 && IMC<=25.8){document.getElementById("resultadoz").style.color="#0F6" ; aconselhaBadochas(2);} | ||
| + | else if (IMC>=25.9 && IMC<=27.3){document.getElementById("resultadoz").style.color="#FF0" ; aconselhaBadochas(3);} | ||
| + | else if (IMC>=27.4 && IMC<=32.3){document.getElementById("resultadoz").style.color="#F90" ; aconselhaBadochas(4);} | ||
| + | else if (IMC>32.3){document.getElementById("resultadoz").style.color="#F00" ; aconselhaBadochas(5);} | ||
| + | break; | ||
| + | } | ||
| + | } | ||
| + | |||
| + | document.getElementById("resultadoz").innerHTML = ("IMC = "+IMC); | ||
| + | |||
| + | Para começar o script vai buscar os valores inseridos pelo utilizador e verificar se estão correctos, para isso vai verificar se são números com a função IsNaN. em seguida vai verificar se os valores são "normais", nesse caso os critérios são: | ||
| + | O IMC terá que ser menor que 200, (o grau de obesidade máximo começa em 31.1 nos Homens e em 32.3 nas mulheres, e maior que 3, pois será também impossível. | ||
| + | |||
| + | Depois das validações, o programa verifica se o sexo introduzido foi masculino ou feminino, que apesar de não haver diferença no resultado numérico do IMC, os critérios que definem a categoria do peso da pessoa são ligeiramente diferentes. | ||
| + | |||
| + | Para cada "categoria" de valores o programa irá executar uma função que irá escrever um texto que aconselhará cada pessoa a chegar ao peso ideal, ou manter o mesmo. | ||
| + | |||
| + | function aconselhaBadochas(gordo){ | ||
| + | |||
| + | switch(gordo) | ||
| + | { | ||
| + | case 1: | ||
| + | limpaConselhos(); | ||
| + | document.getElementById("conselhoMagro").style.visibility="visible"; | ||
| + | break; | ||
| + | |||
| + | case 2: | ||
| + | limpaConselhos(); | ||
| + | document.getElementById("conselhoNormal").style.visibility="visible"; | ||
| + | break; | ||
| + | case 3: | ||
| + | limpaConselhos(); | ||
| + | document.getElementById("conselhoPesado").style.visibility="visible"; | ||
| + | break; | ||
| + | case 4: | ||
| + | limpaConselhos(); | ||
| + | document.getElementById("conselhoGordo").style.visibility="visible"; | ||
| + | break; | ||
| + | case 5: | ||
| + | limpaConselhos(); | ||
| + | document.getElementById("conselhoBadocha").style.visibility="visible"; | ||
| + | |||
| + | |||
| + | |||
| + | } | ||
| + | |||
| + | |||
| + | |||
| + | } | ||
| + | |||
| + | Esta função é chamada com o critério de entrada dado pela função que calcula o IMC, que utilizando os critérios atribuidos a cada sexo, irá aconselhar a pessoa a chegar ao peso ideal, nesse caso, funciona de uma forma simples: | ||
| + | Todos os textos estão desde o inicio no site, mas estão invisíveis, esta função começa por tornar todos invisíveis e mostrar apenas o conselho necessário a cada situação. | ||
| + | |||
| + | |||
| + | Tivémos algumas dificuldades na estrotura de menús "drop-down", que não conseguimos integrar apenas com código CSS e tivémos que procurar ajuda com javascript. Deste modo, quando o utilizador faz mouse over ou mouse out. O código utilizado foi este: | ||
| + | |||
| + | function mostraopcoes1() | ||
| + | { | ||
| + | var coisas1= document.getElementById('aliment11') | ||
| + | coisas1.style.visibility='visible'; | ||
| + | var coisas2= document.getElementById('aliment12') | ||
| + | coisas2.style.visibility='visible'; | ||
| + | var coisasa= document.getElementById('aliment13') | ||
| + | coisasa.style.visibility='visible'; | ||
| + | } | ||
| + | function mostraopcoes3() | ||
| + | { | ||
| + | var coisas5= document.getElementById('aliment31') | ||
| + | coisas5.style.visibility='visible'; | ||
| + | var coisas6= document.getElementById('aliment32') | ||
| + | coisas6.style.visibility='visible'; | ||
| + | var coisasa9= document.getElementById('aliment33') | ||
| + | coisasa9.style.visibility='visible'; | ||
| + | var coisasa13= document.getElementById('aliment34') | ||
| + | coisasa13.style.visibility='visible'; | ||
| + | } | ||
| + | function escondeopcoes3() | ||
| + | { | ||
| + | var coisas3= document.getElementById('aliment31') | ||
| + | coisas3.style.visibility='hidden' | ||
| + | var coisas4= document.getElementById('aliment32') | ||
| + | coisas4.style.visibility='hidden' | ||
| + | var coisasa11= document.getElementById('aliment33') | ||
| + | coisasa11.style.visibility='hidden' | ||
| + | var coisasa12= document.getElementById('aliment34') | ||
| + | coisasa12.style.visibility='hidden' | ||
| + | } | ||
| + | |||
| + | function escondeopcoes1() | ||
| + | { | ||
| + | |||
| + | var coisas7= document.getElementById('aliment11') | ||
| + | coisas7.style.visibility='hidden'; | ||
| + | var coisas8= document.getElementById('aliment12') | ||
| + | coisas8.style.visibility='hidden'; | ||
| + | var coisasa1= document.getElementById('aliment13') | ||
| + | coisasa1.style.visibility='hidden'; | ||
| + | |||
| + | } | ||
| + | |||
| + | function escondetratamentos(){ | ||
| + | var trata1= document.getElementById("tratament11") | ||
| + | trata1.style.visibility="hidden"; | ||
| + | var trata2= document.getElementById("tratament12") | ||
| + | trata2.style.visibility="hidden"; | ||
| + | var trata3= document.getElementById("tratament13") | ||
| + | trata3.style.visibility="hidden"; | ||
| + | var trata4= document.getElementById("tratament14") | ||
| + | trata4.style.visibility="hidden"; | ||
| + | var trata5= document.getElementById("tratament15") | ||
| + | trata5.style.visibility="hidden"; | ||
| + | var trata6= document.getElementById("tratament16") | ||
| + | trata6.style.visibility="hidden"; | ||
| + | var trata7= document.getElementById("tratament17") | ||
| + | trata7.style.visibility="hidden"; | ||
| + | var trata8= document.getElementById("tratament18") | ||
| + | trata8.style.visibility="hidden"; | ||
| + | } | ||
| + | function mostratratamentos(){ | ||
| + | var atrata1= document.getElementById("tratament11") | ||
| + | atrata1.style.visibility="visible"; | ||
| + | var atrata2= document.getElementById("tratament12") | ||
| + | atrata2.style.visibility="visible"; | ||
| + | var atrata3= document.getElementById("tratament13") | ||
| + | atrata3.style.visibility="visible"; | ||
| + | var atrata4= document.getElementById("tratament14") | ||
| + | atrata4.style.visibility="visible"; | ||
| + | var atrata5= document.getElementById("tratament15") | ||
| + | atrata5.style.visibility="visible"; | ||
| + | var atrata6= document.getElementById("tratament16") | ||
| + | atrata6.style.visibility="visible"; | ||
| + | var atrata7= document.getElementById("tratament17") | ||
| + | atrata7.style.visibility="visible"; | ||
| + | var atrata8= document.getElementById("tratament18") | ||
| + | atrata8.style.visibility="visible"; | ||
| + | } | ||
| + | |||
| + | |||
| + | Cada sub-menu é mostrado/escondido através destas funções acima, que são chamadas através de eventos mouse over e mouse out. | ||
Revision as of 16:58, 21 June 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.
O site foca 8 tratamentos saudáveis para 8 das doenças mais comuns:
- Colesterol
- Ácido Úrico
- Hipertensão
- Constipação
- Alergia
- Obstipação
- Enxaqueca
- Depressão
No site integrará uma lista de receitas saudáveis para todos os momentos de cada refeição, desde as entradas, carnes, peixes, e por fim sobremesas.
Além disso haverá uma ajuda para o controlo total do peso: perder, ganhar e até manter peso.
Javascript
Este site integra uma calculadora de IMC (Índice de Massa Corporal), aqui fica o código, explicado:
function calculaIMC()
{
var sexo = document.forms.IMC.sexo.value;
var gordo;
var peso=document.getElementById("pes").value;
var altura=document.getElementById("alt").value;
var IMC;
altura= altura/100;
altura= Math.pow(altura,2);
IMC=peso/altura;
IMC= IMC.toFixed(2);
if (isNaN(IMC) ) {alert("Dados inválidos, por favor introduza de novo.")}
else if (IMC>200) {alert("Dados inválidos, por favor introduza de novo.")}
else if (IMC<3) {alert("Dados inválidos, por favor introduza de novo.")}
else{
switch (sexo)
{
case ("Masculino"):
{
if (IMC<20.7){document.getElementById("resultadoz").style.color="#00F" ; aconselhaBadochas(1);}
else if (IMC>=20.7 && IMC<=26.4){document.getElementById("resultadoz").style.color="#0F6" ; aconselhaBadochas(2);}
else if (IMC>=26.5 && IMC<=27.8){document.getElementById("resultadoz").style.color="#FF0" ; aconselhaBadochas(3);}
else if (IMC>=27.9 && IMC<=31.1){document.getElementById("resultadoz").style.color="#F90" ; aconselhaBadochas(4);}
else if (IMC>31.1){document.getElementById("resultadoz").style.color="#F00" ; aconselhaBadochas(5);}
break;
}
case ("Feminino"):
{
if (IMC<19.1){document.getElementById("resultadoz").style.color="#00F" ; aconselhaBadochas(1);}
else if (IMC>=19.2 && IMC<=25.8){document.getElementById("resultadoz").style.color="#0F6" ; aconselhaBadochas(2);}
else if (IMC>=25.9 && IMC<=27.3){document.getElementById("resultadoz").style.color="#FF0" ; aconselhaBadochas(3);}
else if (IMC>=27.4 && IMC<=32.3){document.getElementById("resultadoz").style.color="#F90" ; aconselhaBadochas(4);}
else if (IMC>32.3){document.getElementById("resultadoz").style.color="#F00" ; aconselhaBadochas(5);}
break;
}
}
document.getElementById("resultadoz").innerHTML = ("IMC = "+IMC);
Para começar o script vai buscar os valores inseridos pelo utilizador e verificar se estão correctos, para isso vai verificar se são números com a função IsNaN. em seguida vai verificar se os valores são "normais", nesse caso os critérios são: O IMC terá que ser menor que 200, (o grau de obesidade máximo começa em 31.1 nos Homens e em 32.3 nas mulheres, e maior que 3, pois será também impossível.
Depois das validações, o programa verifica se o sexo introduzido foi masculino ou feminino, que apesar de não haver diferença no resultado numérico do IMC, os critérios que definem a categoria do peso da pessoa são ligeiramente diferentes.
Para cada "categoria" de valores o programa irá executar uma função que irá escrever um texto que aconselhará cada pessoa a chegar ao peso ideal, ou manter o mesmo.
function aconselhaBadochas(gordo){
switch(gordo) { case 1: limpaConselhos(); document.getElementById("conselhoMagro").style.visibility="visible"; break;
case 2: limpaConselhos(); document.getElementById("conselhoNormal").style.visibility="visible"; break; case 3: limpaConselhos(); document.getElementById("conselhoPesado").style.visibility="visible"; break; case 4: limpaConselhos(); document.getElementById("conselhoGordo").style.visibility="visible"; break; case 5: limpaConselhos(); document.getElementById("conselhoBadocha").style.visibility="visible";
}
}
Esta função é chamada com o critério de entrada dado pela função que calcula o IMC, que utilizando os critérios atribuidos a cada sexo, irá aconselhar a pessoa a chegar ao peso ideal, nesse caso, funciona de uma forma simples: Todos os textos estão desde o inicio no site, mas estão invisíveis, esta função começa por tornar todos invisíveis e mostrar apenas o conselho necessário a cada situação.
Tivémos algumas dificuldades na estrotura de menús "drop-down", que não conseguimos integrar apenas com código CSS e tivémos que procurar ajuda com javascript. Deste modo, quando o utilizador faz mouse over ou mouse out. O código utilizado foi este:
function mostraopcoes1() { var coisas1= document.getElementById('aliment11') coisas1.style.visibility='visible'; var coisas2= document.getElementById('aliment12') coisas2.style.visibility='visible'; var coisasa= document.getElementById('aliment13') coisasa.style.visibility='visible'; } function mostraopcoes3() { var coisas5= document.getElementById('aliment31') coisas5.style.visibility='visible'; var coisas6= document.getElementById('aliment32') coisas6.style.visibility='visible'; var coisasa9= document.getElementById('aliment33') coisasa9.style.visibility='visible'; var coisasa13= document.getElementById('aliment34') coisasa13.style.visibility='visible'; } function escondeopcoes3() { var coisas3= document.getElementById('aliment31') coisas3.style.visibility='hidden' var coisas4= document.getElementById('aliment32') coisas4.style.visibility='hidden' var coisasa11= document.getElementById('aliment33') coisasa11.style.visibility='hidden' var coisasa12= document.getElementById('aliment34') coisasa12.style.visibility='hidden' }
function escondeopcoes1() {
var coisas7= document.getElementById('aliment11') coisas7.style.visibility='hidden'; var coisas8= document.getElementById('aliment12') coisas8.style.visibility='hidden'; var coisasa1= document.getElementById('aliment13') coisasa1.style.visibility='hidden';
}
function escondetratamentos(){ var trata1= document.getElementById("tratament11") trata1.style.visibility="hidden"; var trata2= document.getElementById("tratament12") trata2.style.visibility="hidden"; var trata3= document.getElementById("tratament13") trata3.style.visibility="hidden"; var trata4= document.getElementById("tratament14") trata4.style.visibility="hidden"; var trata5= document.getElementById("tratament15") trata5.style.visibility="hidden"; var trata6= document.getElementById("tratament16") trata6.style.visibility="hidden"; var trata7= document.getElementById("tratament17") trata7.style.visibility="hidden"; var trata8= document.getElementById("tratament18") trata8.style.visibility="hidden"; } function mostratratamentos(){ var atrata1= document.getElementById("tratament11") atrata1.style.visibility="visible"; var atrata2= document.getElementById("tratament12") atrata2.style.visibility="visible"; var atrata3= document.getElementById("tratament13") atrata3.style.visibility="visible"; var atrata4= document.getElementById("tratament14") atrata4.style.visibility="visible"; var atrata5= document.getElementById("tratament15") atrata5.style.visibility="visible"; var atrata6= document.getElementById("tratament16") atrata6.style.visibility="visible"; var atrata7= document.getElementById("tratament17") atrata7.style.visibility="visible"; var atrata8= document.getElementById("tratament18") atrata8.style.visibility="visible"; }
Cada sub-menu é mostrado/escondido através destas funções acima, que são chamadas através de eventos mouse over e mouse out.