SaudeBemEstar

From Labmm2

(Difference between revisions)
Jump to: navigation, search
(→Javascript)
Line 236: Line 236:
==Arborescencia==
==Arborescencia==
-
Segue aqui a estrotura arborescente do nosso projecto:
+
Segue aqui a estrotura arborescente do nosso projecto:<br/>
[[File:Arborescencia.jpg]]
[[File:Arborescencia.jpg]]
 +
 +
 +
==CSS==
 +
#dropdown{position:relative; font-size: 10px; margin:0; padding:0;<br/>
 +
top:-30px;<br/>
 +
width:inherit;<br/>
 +
}<br/>
 +
#dropdown ul{font-size: 10px; margin:0; padding:0; line-height:30px;}<br/>
 +
#dropdown li{ font-size: 10px; margin:0; padding:0; list-style:none; float:left; position:relative;}<br/>
 +
<br/>
 +
#menus #dropdown ul li {<br/>
 +
padding-right:10px;<br/>
 +
}<br/>
 +
        <br/>
 +
#menus #dropdown ul li a img{<br/>
 +
border:0px;}<br/>
 +
#dropdown ul li a{font-size: 10px; text-align:center; font-family:Arial, Helvetica, sans-serif; text-decoration:none; height:60px; width:125px; display:block; color:#000;}<br/>
 +
#dropdown ul li ul a{font-size: 10px; text-align:center; font-family:Arial, Helvetica, sans-serif; text-decoration:none; height:30px; width:125px; display:block; color:#000; border:1px solid #000; background-color:#09F;}<br/>
 +
#dropdown ul li ul a:hover{font-size: 10px; text-align:center; font-family:Arial, Helvetica, sans-serif; text-decoration:none; height:30px; width:125px; display:block; color:#000; border:1px solid #000; background-color:#0F0;}<br/>
 +
 +
<br/>
 +
#dropdown ul ul{<br/>
 +
font-size: 10px;<br/>
 +
position:absolute;<br/>
 +
visibility:hidden;<br/>
 +
top:60px;<br/>
 +
left: 6px;<br/>
 +
height: 110px;<br/>
 +
}<br/>
 +
#dropdown ul li:hover ul{ font-size: 10px; visibility:visible;}<br/>
 +
<br/>
 +
 +
#dropdown ul li ul:hover ul{font-size: 10px; visibility:visible;}<br/>
 +
<br/>
 +
#dropdown ul ul ul{<br/>
 +
font-size: 10px;<br/>
 +
position:absolute;<br/>
 +
left:127px;<br/>
 +
height: 158px;<br/>
 +
width: 138px;<br/>
 +
z-index: 5;<br/>
 +
}<br/>
 +
 +
 +
 +
 +
 +
 +
#calculadora{float:left; border: solid medium #000;}<br/>
 +
body{ font-family: , sans-serif; border:1px #000;}<br/>
 +
#topo{<br/>
 +
position:relative;<br/>
 +
position:absolute;<br/>
 +
width:950px;<br/>
 +
height:397px;<br/>
 +
}<br/>
 +
#logo{<br/>
 +
position:absolute;<br/>
 +
width:200px;<br/>
 +
height:250px;<br/>
 +
float:left;<br/>
 +
max-width:200px;<br/>
 +
max-height:250px;<br/>
 +
top:8px;<br/>
 +
height:10em;<br/>
 +
left: 18px;<br/>
 +
z-index: 1;<br/>
 +
}<br/>
 +
#menus{<br/>
 +
width:748px;<br/>
 +
height:250px;<br/>
 +
float:left;<br/>
 +
max-width:750px;<br/>
 +
max-height:250px;<br/>
 +
position:relative;<br/>
 +
left:224px;<br/>
 +
padding-left: 10px;<br/>
 +
    padding-top:50px;<br/>
 +
<br/>
 +
top:80px;<br/>
 +
height:323px;<br/>
 +
margin-top:-5em;<br/>
 +
position:relative;<br/>
 +
z-index:2;<br/>
 +
text-align:center;<br/>
 +
}<br/>
 +
 +
#menus img{ width:130px; height:60px; padding-left:5px;}<br/>
 +
#menus img:hover{ width:130px; height:60px; padding-left:5px;}<br/>
 +
#conteudos{ position:relative; width:950px; height:450px; max-width:950px; max-height:450px; top:250px; left:14px;}<br/>
 +
#sidebar{<br/>
 +
position:absolute;<br/>
 +
width:193px;<br/>
 +
height:458px;<br/>
 +
max-width:200px;<br/>
 +
max-height:450px;<br/>
 +
left: 17px;<br/>
 +
top: 0px;<br/>
 +
}<br/>
 +
#info{width:710px; height:auto; float:right; max-width:750px; max-height:450px; top:250px; <br/>
 +
padding-left:150px;<br/>
 +
}<br/>
 +
 +
#imgLogo{<br/>
 +
margin-top:-6em;<br/>
 +
position:absolute;<br/>
 +
left: -8px;<br/>
 +
top: 121px;<br/>
 +
}<br/>
 +
#imgLogo *{<br/>
 +
margin:0px auto;<br/>
 +
}<br/>
 +
 +
<br/>
 +
 +
#butoes li{display: inline;<br/>
 +
list-style-type: none;<br/>
 +
padding-right: 2px;<br/>
 +
<br/>
 +
}<br/>
 +
#topo {<br/>
 +
position:relative;<br/>
 +
left: 12px;<br/>
 +
top: 0px;<br/>
 +
}
 +
<br/>
 +
 +
#menuAliment{ background-image:url(imagens/bot_alimen_2.png)}<br/>
 +
#menuAliment hover{ background-image:url(imagens/bot_alimenta%C3%A7ao.png)}<br/>
 +
<br/>
 +
#menuPrincipal{  width:130px; height:60px; padding-left:5px;}<br/>
 +
<br/>
 +
#aliment11{visibility:hidden; top:-60px; position:absolute;}<br/>
 +
#aliment12{visibility:hidden; top:-60px; position:absolute;}<br/>
 +
#aliment13{visibility:hidden; top:-60px; position:absolute;}<br/>
 +
#aliment31{visibility:hidden; top:-60px; position:absolute;}<br/>
 +
#aliment32{visibility:hidden; top:-60px; position:absolute;}<br/>
 +
#aliment33{visibility:hidden; top:-60px; position:absolute;}<br/>
 +
#aliment34{visibility:hidden; top:-60px; position:absolute;}<br/>
 +
#tratament11{visibility:hidden; top:-60px; position:absolute;}<br/>
 +
#tratament12{visibility:hidden; top:-60px; position:absolute;}<br/>
 +
#tratament13{visibility:hidden; top:-60px; position:absolute;}<br/>
 +
#tratament14{visibility:hidden; top:-60px; position:absolute;}<br/>
 +
#tratament15{visibility:hidden; top:-60px; position:absolute;}<br/>
 +
#tratament16{visibility:hidden; top:-60px; position:absolute;}<br/>
 +
#tratament17{visibility:hidden; top:-60px; position:absolute;}<br/>
 +
#tratament18{visibility:hidden; top:-60px; position:absolute;}<br/>
 +
<br/>
 +
#conteudos{<br/>
 +
position:relative;<br/>
 +
top:-180px;<br/>
 +
z-index:1;<br/>
 +
border-style:groove;<br/>
 +
border:1px;<br/>
 +
    <br/>
 +
}<br/>
 +
 +
 +
 +
  <br/>
 +
body{<br/>
 +
font-family:Arial, Helvetica, sans-serif;<br/>
 +
background-image:url(imagens/greenPattern.jpg);<br/>
 +
}<br/>
 +
p{<br/>
 +
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;<br/>
 +
font-size:18px;<br/>
 +
font-style:italic;<br/>
 +
color:#060;<br/>
 +
}<br/>
 +
<br/>
 +
#resultadoz{<br/>
 +
position:absolute;<br/>
 +
width:682px;<br/>
 +
height:446px;<br/>
 +
left: 231px;<br/>
 +
top: 2px;<br/>
 +
}<br/>

Revision as of 02:34, 22 June 2011

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.
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" ;
document.getElementById("resultadoz").innerHTML = ("IMC = "+IMC + ": Tem défice de peso. Para começar a adquirir um peso adquado às suas características de forma saudavel vá ao menú alimentação e clique no sub-menu ganhar peso");}

else if (IMC>=20.7 && IMC<=26.4){document.getElementById("resultadoz").style.color="#0F6" ; document.getElementById("resultadoz").innerHTML = ("IMC = "+IMC + ": Parabéns, tem o peso adequado. Para manter o seu peso de forma saudavel vá ao menú alimentação e clique no sub-menu manter peso");}
else if (IMC>=26.5 && IMC<=27.8){document.getElementById("resultadoz").style.color="#FF0" ; document.getElementById("resultadoz").innerHTML = ("IMC = "+IMC + ": Tem algum peso em excesso mas nada de grave. Para começar a perder peso de forma saudavel vá ao menú alimentação e clique no sub-menu perder peso");}
else if (IMC>=27.9 && IMC<=31.1){document.getElementById("resultadoz").style.color="#F90" ;
document.getElementById("resultadoz").innerHTML = ("IMC = "+IMC + ": Está obeso. Para começar a perder peso de forma saudavel vá ao menú alimentação e clique no sub-menu perder peso");} else if (IMC>31.1){document.getElementById("resultadoz").style.color="#F00" ;
document.getElementById("resultadoz").innerHTML = ("IMC = "+IMC + ": Sofre de obesidade morbida. Para começar a perder peso de forma saudavel vá ao menú alimentação e clique no sub-menu perder peso");}
break;
}
case ("Feminino"):
{
if (IMC<19.1){document.getElementById("resultadoz").style.color="#00F" ;
document.getElementById("resultadoz").innerHTML = ("IMC = "+IMC + ": Tem défice de peso. Para começar a adquirir um peso adquado às suas características de forma saudavel vá ao menú alimentação e clique no sub-menu ganhar peso");
} else if (IMC>=19.2 && IMC<=25.8){
document.getElementById("resultadoz").style.color="#0F6" ;
document.getElementById("resultadoz").innerHTML = ("IMC = "+IMC + ": Parabéns, tem o peso adequado. Para manter o seu peso de forma saudavel vá ao menú alimentação e clique no sub-menu manter peso"); }
else if (IMC>=25.9 && IMC<=27.3){document.getElementById("resultadoz").style.color="#FF0" ; 

document.getElementById("resultadoz").innerHTML = ("IMC = "+IMC + ": Tem algum peso em excesso mas nada de grave. Para começar a perder peso de forma saudavel vá ao menú alimentação e clique no sub-menu perder peso");

}

else if (IMC>=27.4 && IMC<=32.3){document.getElementById("resultadoz").style.color="#F90" ;
document.getElementById("resultadoz").innerHTML = ("IMC = "+IMC + ": Está obesa. Para começar a perder peso de forma saudavel vá ao menú alimentação e clique no sub-menu perder peso");
} else if (IMC>32.3){document.getElementById("resultadoz").style.color="#F00";
document.getElementById("resultadoz").innerHTML = ("IMC = "+IMC + ": Sofre de obesidade morbida. Para começar a perder peso de forma saudavel vá ao menú alimentação e clique no sub-menu perder peso");

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





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.

Para que a animação dos menus funcionasse foi utilizada esta função:

function imgali(x){
switch (x){
case 1:document.getElementById("imgal").src= "imagens/bot_alimentaçao.png";
break;
case 0:document.getElementById("imgal").src="imagens/bot_alimen_2.png";
break;
}
}
function imgex(x){
switch (x){
case 1:document.getElementById("imgexe").src="imagens/bot_exec1.png";
break;
case 0:document.getElementById("imgexe").src="imagens/bot_exec2.png";
break;
}
}
function imgmitos(x){
switch (x){
case 1:document.getElementById("imgmit").src="imagens/bot_mitos2.png";
break;
case 0:document.getElementById("imgmit").src="imagens/bot_mitos1.png";
break;
}
}
function imgim(x){
switch (x){
case 1:document.getElementById("imgimc").src="imagens/bot_imc1.png";
break;
case 0:document.getElementById("imgimc").src="imagens/bot_imc2.png";
break;
}
}
function imgcont(x){
switch (x){
case 1:document.getElementById("imgcon").src="imagens/bot_cont1.png";
break;
case 0:document.getElementById("imgcon").src="imagens/bot_cont2.png";
break;
}
}

Arborescencia

Segue aqui a estrotura arborescente do nosso projecto:

Arborescencia.jpg


CSS

  1. dropdown{position:relative; font-size: 10px; margin:0; padding:0;

top:-30px;
width:inherit;
}

  1. dropdown ul{font-size: 10px; margin:0; padding:0; line-height:30px;}
  2. dropdown li{ font-size: 10px; margin:0; padding:0; list-style:none; float:left; position:relative;}


  1. menus #dropdown ul li {

padding-right:10px;
}
  1. menus #dropdown ul li a img{

border:0px;}

  1. dropdown ul li a{font-size: 10px; text-align:center; font-family:Arial, Helvetica, sans-serif; text-decoration:none; height:60px; width:125px; display:block; color:#000;}
  2. dropdown ul li ul a{font-size: 10px; text-align:center; font-family:Arial, Helvetica, sans-serif; text-decoration:none; height:30px; width:125px; display:block; color:#000; border:1px solid #000; background-color:#09F;}
  3. dropdown ul li ul a:hover{font-size: 10px; text-align:center; font-family:Arial, Helvetica, sans-serif; text-decoration:none; height:30px; width:125px; display:block; color:#000; border:1px solid #000; background-color:#0F0;}


  1. dropdown ul ul{

font-size: 10px;
position:absolute;
visibility:hidden;
top:60px;
left: 6px;
height: 110px;
}

  1. dropdown ul li:hover ul{ font-size: 10px; visibility:visible;}


  1. dropdown ul li ul:hover ul{font-size: 10px; visibility:visible;}


  1. dropdown ul ul ul{

font-size: 10px;
position:absolute;
left:127px;
height: 158px;
width: 138px;
z-index: 5;
}




  1. calculadora{float:left; border: solid medium #000;}

body{ font-family: , sans-serif; border:1px #000;}

  1. topo{

position:relative;
position:absolute;
width:950px;
height:397px;
}

  1. logo{

position:absolute;
width:200px;
height:250px;
float:left;
max-width:200px;
max-height:250px;
top:8px;
height:10em;
left: 18px;
z-index: 1;
}

  1. menus{

width:748px;
height:250px;
float:left;
max-width:750px;
max-height:250px;
position:relative;
left:224px;
padding-left: 10px;

   padding-top:50px;


top:80px;
height:323px;
margin-top:-5em;
position:relative;
z-index:2;
text-align:center;
}

  1. menus img{ width:130px; height:60px; padding-left:5px;}
  2. menus img:hover{ width:130px; height:60px; padding-left:5px;}
  3. conteudos{ position:relative; width:950px; height:450px; max-width:950px; max-height:450px; top:250px; left:14px;}
  4. sidebar{

position:absolute;
width:193px;
height:458px;
max-width:200px;
max-height:450px;
left: 17px;
top: 0px;
}

  1. info{width:710px; height:auto; float:right; max-width:750px; max-height:450px; top:250px;

padding-left:150px;
}

  1. imgLogo{

margin-top:-6em;
position:absolute;
left: -8px;
top: 121px;
}

  1. imgLogo *{

margin:0px auto;
}


  1. butoes li{display: inline;

list-style-type: none;
padding-right: 2px;

}

#topo {

position:relative;
left: 12px;
top: 0px;
}

  1. menuAliment{ background-image:url(imagens/bot_alimen_2.png)}
  2. menuAliment hover{ background-image:url(imagens/bot_alimenta%C3%A7ao.png)}


  1. menuPrincipal{ width:130px; height:60px; padding-left:5px;}


  1. aliment11{visibility:hidden; top:-60px; position:absolute;}
  2. aliment12{visibility:hidden; top:-60px; position:absolute;}
  3. aliment13{visibility:hidden; top:-60px; position:absolute;}
  4. aliment31{visibility:hidden; top:-60px; position:absolute;}
  5. aliment32{visibility:hidden; top:-60px; position:absolute;}
  6. aliment33{visibility:hidden; top:-60px; position:absolute;}
  7. aliment34{visibility:hidden; top:-60px; position:absolute;}
  8. tratament11{visibility:hidden; top:-60px; position:absolute;}
  9. tratament12{visibility:hidden; top:-60px; position:absolute;}
  10. tratament13{visibility:hidden; top:-60px; position:absolute;}
  11. tratament14{visibility:hidden; top:-60px; position:absolute;}
  12. tratament15{visibility:hidden; top:-60px; position:absolute;}
  13. tratament16{visibility:hidden; top:-60px; position:absolute;}
  14. tratament17{visibility:hidden; top:-60px; position:absolute;}
  15. tratament18{visibility:hidden; top:-60px; position:absolute;}


  1. conteudos{

position:relative;
top:-180px;
z-index:1;
border-style:groove;
border:1px;

}



body{
font-family:Arial, Helvetica, sans-serif;
background-image:url(imagens/greenPattern.jpg);
}
p{
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-size:18px;
font-style:italic;
color:#060;
}

  1. resultadoz{

position:absolute;
width:682px;
height:446px;
left: 231px;
top: 2px;
}

Retrieved from "http://wikis.ua.pt/labmm2/index.php?title=SaudeBemEstar"
Personal tools
Namespaces
Variants
Actions
Navigation
Toolbox