Desenrolo de aplicacións con tecnoloxías web 2013: julio 2013

miércoles, 31 de julio de 2013

Calculo de elementos xeométricos

Exercicio para os alumnos.

Realizar unha aplicación JavaScript que faga o seguinte:

Pedir o radio.

Pedir un numero entre 1 e 3:

Dependendo do segundo dato, indicar:

1 - Lonxitude da circunferencia. (2 * PI * R)

2 - Area do circulo. (PI * R * R)

3 - Volume da esfera. 4/3 * (PI * R * R * R)

NOTA:
O valor de PI é 3.14 (os decimáis separanse mediante un punto)

-------------------------------------------------

SOLUCIÓN:

var PI = 3.14;
var radio;
var opcionSeleccionada; //1 lonx 2 sup 3 vol
var resultado;
var mensaxe;

radio = prompt ("Indique o radio da figura.","1");
opcionSeleccionada = prompt ("Indique o dato que desexa obter:\n1 - Lonxitude da circunferencia.\n2 - Superficie do circulo.\n3 - Volume da esfera.");

if (opcionSeleccionada == 1){
 //calculo lonxitude circunferencia 2 * PI * R
 resultado = 2 * PI * radio;
 mensaxe = "A lonxitude da circunferencia é: " + resultado;
}
else if (opcionSeleccionada == 2){
 //calculo superficie circulo PI * R * R
 resultado = PI * radio * radio; 
 mensaxe = "A superficie do circulo é: " + resultado;
} 
else if (opcionSeleccionada == 3){
 //calculo volume esfera 4 / 3 * PI * R*R*R
 resultado = 4 / 3 * PI * radio * radio  * radio; 
 mensaxe = "O volume da esfera é: " + resultado;  
}
else {
 mensaxe = "Dato introducido incorrecto";
}

alert (mensaxe);

NOTA:
Engadese a posibilidade de controlar se a opción introducida é incorrecta.

Aproveitando que iso nos obliga a reescribir o valor da variable
mensaxe, se personaliza para cada tipo de elemento:opcionSeleccionada = 1;

opcionSeleccionada = 2;

opcionSeleccionada = 3;

opcionSeleccionada = 4;

Comparativo idade neno e nena

Exercicio JavaScript:
Solicitar a idade de un neno e de unha nena en anos, e amosar unha mensaxe indicando cal é maior.

NOTA:
É preciso destacar que neste exercicio existen tres posibles casos:
a) O neno é maior que a nena.

b) O neno é menor que a nena.

c) O neno é a nena teñen a mesma idade.

//Bloque de declaracion de variables
var idadeNeno, idadeNena, mensaxe;

//Bloque de captura de datos
idadeNeno = prompt ("Indique a idade do neno en anos.");
idadeNena = prompt ("Indique a idade do nena en anos."); 

//Bloque de algoritmia
if (idadeNeno > idadeNena) {
 mensaxe = "O neno e maior que a nena.";
}
else if (idadeNeno < idadeNena) {
 mensaxe = "O neno e menor que a nena.";
} else {
 mensaxe = "O neno e a nena teñen a mesma idade.";  
}

//Bloque de saida de datos
alert (mensaxe);

Familia Numerosa

Exercicio JavaScript:

A partir de un dato solicitado mediante a función prompt, determinar se unha familia é numerosa ou non.

var NUMERO_MINIMO_FILLOS_PARA_FAMILIA_NUMEROSA = 3;
var numeroRealFillos;

numeroRealFillos = prompt ("Cantos fillos tes?");

if (numeroRealFillos >= NUMERO_MINIMO_FILLOS_PARA_FAMILIA_NUMEROSA) {
 alert ("Tes unha familina NUMEROSA.");
}
else {
 alert ("Non tes familia numerosa, tes que ter mais fillos.");  
}

Como alternativa varíase o código para evitar o uso da función alert duas veces no medio do código que executa a parte de algoritmo do programa.

Para evitalo, almacénase o texto a amosar nunha variable.

Finalmente na parte final do código, mediante un único alert, (que se atopa illado do resto do código) se amosa a mensaxe desexada.

Esta técnica de programación permite separa o código en bloques con propósitos distintos, de xeito que facilita o seu futuro mantemento.

Neste caso se poden diferenciar catro bloques:

Declaración de constantes e variables.
Captura de datos.
Algoritmo.
Saida de datos.

var NUMERO_MINIMO_FILLOS_PARA_FAMILIA_NUMEROSA = 3;
var numeroRealFillos;
var mensaxeAmosar;

numeroRealFillos = prompt ("Cantos fillos tes?");

if (numeroRealFillos >= NUMERO_MINIMO_FILLOS_PARA_FAMILIA_NUMEROSA) {
 mensaxeAmosar = "Tes unha familina NUMEROSA.";
}
else {
 mensaxeAmosar = "Non tes familia numerosa, tes que ter mais fillos.";  
}

alert (mensaxeAmosar);

NOTA:
A continuación se detallas os bloques diferenciados:

Bloque 1 - Declaración de constantes e variables.

var NUMERO_MINIMO_FILLOS_PARA_FAMILIA_NUMEROSA = 3;
var numeroRealFillos;
var mensaxeAmosar;





Bloque 2 - Captura de datos.

numeroRealFillos = prompt ("Cantos fillos tes?");


Bloque 3 - Algoritmo.

if (numeroRealFillos >= NUMERO_MINIMO_FILLOS_PARA_FAMILIA_NUMEROSA) {

 mensaxeAmosar = "Tes unha familina NUMEROSA.";
}
else {
 mensaxeAmosar = "Non tes familia numerosa, tes que ter mais fillos.";  
}



Bloque 4 - Saida de datos.

alert (mensaxeAmosar);

Semaforo (if else if else)

Exercicio JavaScritp:

Según a cor do semáforo (Vermello, Amarelo ou Verde) almacenada nunha variable, indicar mediante un alert a acción que deben realizar os vehículos.

//Temos unha variable na que se almacena unha das 
//tres posibles cores que pode ter un semaforo
//indicar que acción debe realizar o condutor
var VERMELLO = "Vermello";
var AMARELO = "Amarelo";
var VERDE = "Verde";

var colorActualSemaforo = "Vermello";

if (colorActualSemaforo == VERMELLO) {
 alert ("O vehiculo ten que parar.");
}
else if (colorActualSemaforo == AMARELO) {
 alert ("O vehiculo pode pasar con precaución."); 
}
else {
 alert ("O vehiculo pode pasar a toda mecha."); 
}

NOTA:

Neste código non se evalúa a posibilidade de que se introduza un valor erróneo, polo que só se analizan dúas condicións, asumindo que se non se da ningunha das dúas primeiras, se está a dar a terceira.
Como variante se pode solicitar o dato da cor ó usuario mediante o uso da función prompt, como se indica a continuación:

colorActualSemaforo = prompt ("Indica a cor do semaforo");

//Temos unha variable na que se almacena unha das

//tres posibles cores que pode ter un semaforo
//indicar que acción debe realizar o condutor
var VERMELLO = "Vermello";
var AMARELO = "Amarelo";
var VERDE = "Verde";

var colorActualSemaforo;

colorActualSemaforo = prompt ("Indica a cor do semaforo");

if (colorActualSemaforo == VERMELLO) {
 alert ("O vehiculo ten que parar.");
}
else if (colorActualSemaforo == AMARELO) {
 alert ("O vehiculo pode pasar con precaución."); 
}
else {
 alert ("O vehiculo pode pasar a toda mecha."); 
}

Indicar Sexo

Exercicio JavaScript
A partir do valor de unha variable indicar o sexo da persoa mediante un alert.

Unha primeira aproximación podería facerse indicando o sexo nunha variable de tipo texto, e comparándoo con un dos sexos almacenado noutra variable.

//Seleccionar sexo, so se pode indicar M MASCULINO ou F FIMININO
var MASCULINO = "M";
var sexoPersona = "F";

if (sexoPersona == MASCULINO) {
 alert ("Eres un home.");
}
else {
 alert ("Eres unha muller.");
}

NOTA:
Esta aproximación provoca que se nos indican un valor non válido, sempre se indique a opción da parte else.

Si en sexoPersona almeceno por exemplo "X", nos indicará que é unha muller.

var sexoPersona = "X";

Para solventar este inconvinte, é preciso engadir a posibilidade de decidir entra máis de dúas opcións.

Para conseguir isto se pode engadir unha instrucción condicional if en cada else.

else if (sexoPersona == FIMININO)

//Seleccionar sexo, so se pode indicar M MASCULINO ou F FIMININO
var MASCULINO = "M";
var FIMININO = "F";
var sexoPersona = "X";

if (sexoPersona == MASCULINO) {
 alert ("Eres un home.");
}
else if (sexoPersona == FIMININO) {
       alert ("Eres unha muller.");
}
else {
       alert ("Dato introducido INCORRECTO.\nVostede introducíu " + sexoPersona); 
}

Neste caso ó indicar o valor "X", se indica que o valor é incorrecto.

Maioría de idade

Exercicio JavaScript:

A partir da idade de unha persoa indicar si e maior ou menor de idade.

//indicar se unha persoa e maior de idade
//amosando a sua idade

//zona de declaracion de variables
var MAIORIA_IDADE = 18; //Con 18 anos eres maior de idade
var idadeActual = 18;

if (idadeActual >= MAIORIA_IDADE) {
 //cumplese a condicion
 //alert (  texto + variable + texto  );
 alert ("Eres maior de idade porque tes " + idadeActual + " anos.");
}
else {
 //non se cumple
 alert ("Eres menor de idade porque tes " + idadeActual + " anos.");
}

Como variante podemos optar por comprobar se a persoa é menor de idade.

Para poder realizar isto teremos que invertir a condición da sentencia if, cambiando o >= por un <, e intercambiar o contido da parte if co da parte else.

//indicar se unha persoa e maior de idade
//amosando a sua idade

//zona de declaracion de variables

var MAIORIA_IDADE = 18; //Con 18 anos eres maior de idade
var idadeActual = 18;

if (idadeActual < MAIORIA_IDADE) {
 //cumplese a condicion
 //alert (  texto + variable + texto  );
 alert ("Eres menor de idade porque tes " + idadeActual + " anos.");
}
else {
 //non se cumple
 alert ("Eres maior de idade porque tes " + idadeActual + " anos."); 
}

martes, 30 de julio de 2013

Presentacións introdución ás linguaxes de guión.

Arquitecturas de aplicacions web
https://docs.google.com/presentation/d/1MscryojZOBKVjzRMv7FNp7wDaaGNCt3v1WmKCk790RY/edit?usp=sharing

Navegadores web
https://docs.google.com/presentation/d/1QjY7jzLiBg4DwcjRPamHf6cH10tIUJR5AVYBSMN3jhw/edit?usp=sharing

Introducción ás linguaxes de programación
https://docs.google.com/presentation/d/1-Qdq4VUqgD-L3lxDZCjxdG7N2Wn0TmfFwSEjgS3SDxg/edit?usp=sharing

Estrutura, erros, ciclo de vida
https://docs.google.com/presentation/d/1I4DQust3OTSoNkIUF3LdJGx_Q-dM6NVAfXFybqXIiMk/edit?usp=sharing

Pseudicódigo
https://docs.google.com/presentation/d/1yhdSTAtDQP4CxRdgziKi0tZUmIMkdlAPG_RgYiy8Hq0/edit?usp=sharing

JavaScript
https://docs.google.com/presentation/d/1jebWosTVN0g0bkJHNt8ug87WImSfMwLjLWeS9UgWEq4/edit?usp=sharing

Instrucción condicional if else en JavaScript

Exemplo de toma de decisións en JavaScript mediante a instrucción condicional If Else:

NOTA: A instrucción debe incluirse dentro da etiquetas <SCRIPT> de HTML.

A continuación o código anterior, para poder copiar e pegar:

<SCRIPT>

//indicar se unha persoa pode entrar nunha discoteca
//poderá entrar se ten 16 anos ou mais
var idadeMinimaEntradaDiscoteca = 16;
var idadeActual = 16;

if (idadeActual >= idadeMinimaEntradaDiscoteca)
{
//instruccions si se cumple a condicion
 alert("Podes pasar.");
}
else
{
//instruccions si NON se cumple a condicion
 alert("Ainda non tes idade para entrar.");  
}

</SCRIPT>

domingo, 21 de julio de 2013

Especificación CSS3 Módulo de cores

CSS Color Module Level 3
http://www.w3.org/TR/css3-color/

jueves, 18 de julio de 2013

Exercicio taboa cores

Crear unha páxina web con unha folla de estilos externa cunha táboa similar a que se amosa.

Podedes usar os seguintes atributos en CSS:

Tipo de letra – font-face
Cor letra – color
Cor fondo – background-color

miércoles, 17 de julio de 2013

Presentación Tema 4 Follas de Estilo en Cascada (CSS)

Xa é posible acceder á presentación sobre a introducción ás Follas de Estilo en Cascada (Cascading Style Sheets), que complementa ó capítulo 14 do libro.

https://docs.google.com/presentation/d/1fl7nnWPuzAJuFqboA-nkSuva8lwHqgMhMQuakmbGKrU/edit?usp=sharing

Etiqueta meta robots

Etiqueta meta robots

http://www.desarrolloweb.com/articulos/etiqueta-meta-robots.html

martes, 16 de julio de 2013

Lista emails

Listado de emails de alumnos do curso
https://docs.google.com/spreadsheet/ccc?key=0AqWlzM8W-gAEdEN6TUZzMWlnMldOQ2dBNHZKS2k1OXc&usp=sharing

lunes, 15 de julio de 2013

Presentación Tema 3 Multimedia en HTML

Xa podedes acceder á presentación sobre Multimedia, que complementa ó capítulo 8 do libro.

https://docs.google.com/presentation/d/1K8AkwUvk2-Ijksbmtcw63nFbKFlEdyGjSDrTzstfZGM/edit?usp=sharing

Material compartido por alumnos

Enlace a documento compartido:

https://docs.google.com/document/d/1ubbSM3VglAjcMOzTqvV7DLYtGiQi3lhIlX4RaJUmR3c/edit?usp=sharing

viernes, 12 de julio de 2013

Taboas

Modificar o exercicio da tenda de xoguetes para que a páxina do catálogo estéa organizada mediante unha táboa, ó estilo das tendas de xoguetes reais como http://juguettos.com/en/juguete/mickey-mouse-club-house.

martes, 9 de julio de 2013

Tenda de Xoguetes

Crear un sitio web para unha tenda de xoguetes, seguindo a seguinte estrutura:

Deberá ser posible acceder dende a páxina inicial ás outras dúas e regresar delas á inicial.

Na páxina de contacto, incluir unha imaxe cun plano de situación, un teléfono (cos números separados de tres en tres, ex 986 123 456), e un enlace para enviar un email.

Na páxina dos xoguetes, incluir Foto, descrición e prezo de polo menos dous xoguetes. O prezo deberá estar escrito noutra cor.

Engadir cores ou imaxes de fondo ó gusto.

viernes, 5 de julio de 2013

Paxina web persoal

Creade unha páxina acerca de vós, tentando utilizar todo o aprendido ata agora

tipos de letra tamaños e cores
fondo de color pax 31
etiqutas a usar:

p, h3, title, cursivas, negritas, etc. hr, alineacions, letras acentuadas, etiquetas meta (author), comentarios, enlaces

jueves, 4 de julio de 2013

Solucion exercicio menú

<!DOCTYPE HTML> 
<html>
 <head>
  <title>Solución menú</title>
 </head>
 <body>
  <ol type="1">
   <li>Entrantes</li>
   <ol type="A">
    <li>Calamares</li>
    <li>Empanada</li>
    <li>Croquetas</li>
    <li>Tortilla</li>
   </ol>
   <li>Primeiros</li>
   <ol type="A">
    <li>Ensalada</li>
    <li>Espaguetis</li>
   </ol>
   <li>Segundos</li>
   <ol type="A">
    <li>Rodaballo</li>
    <li>Costilla</li>
   </ol>
   <li>Postres</li>
   <ol type="A">
    <li>Tarta de Santiago</li>
    <li>Tiramisú</li>
    <li>Xeados</li>
   </ol>
  </ol>
 </body>
</html>

A Calamares

B Empanada

C Croquetas

D Tortilla

2 Primeiros

A Ensalada

B Espaguetis

3 Segundos

A Rodaballo

B Costilla

4 Postres

A Tarta Santiago

B Tiramisú
C Xeados

Desenrolo de aplicacións
con tecnoloxías web 2013