Paradigmas de Programación Primer Seminario

Paradigmas de Programación Primer Seminario
Departamento de Informática Universidad de Valladolid Curso Grado en Ingeniería Informática Grado en Ingeniería Informática de Sistemas 11 Feb. 2011 César Vaca Rodríguez, Dpto. de Informática, UVa

César Vaca Rodríguez, Dpto. de Informática, UVa
Objetivos Crear una “aplicación” que simula algunas características del “mecanismo de Antikythera”: Mostrar posiciones del sol, la luna y algunos planetas en la esfera celeste para una determinada fecha. Se realizará mediante HTML, CSS y JavaScript (es decir, vamos a crear una página web dinámica) Resultados de aprendizaje: Conceptos de HTML, CSS y JavaScript Orientación a objeto Orientación a eventos Modelo MVC: Separación de contenido, presentación y respuesta a eventos. 11 Feb. 2011 César Vaca Rodríguez, Dpto. de Informática, UVa

1. Contenido El contenido está definido por el lenguaje HTML, que describe los elementos de la página. Estos elementos consistirán en imágenes y “controles” que permiten mostrar y pedir datos al usuario. Aquellos elementos que se van a referenciar en el código se les asigna un identificador Podeis descargar el esquema de página en la siguiente dirección: Y las imágenes utilizadas en: 11 Feb. 2011 César Vaca Rodríguez, Dpto. de Informática, UVa

Estructura de una página HTML
<HEAD> <TITLE> <SCRIPT> <STYLE> <BODY> Bloque <DIV> <TABLE> Inline <SPAN> <BR> <IMG> <FORM> <INPUT type ="text"> <INPUT type ="button"> 11 Feb. 2011 César Vaca Rodríguez, Dpto. de Informática, UVa

Página inicial <HTML> <HEAD> <TITLE>Paradigmas de Programacion - Seminario #1</TITLE> </HEAD> <BODY id="cuerpo"> <DIV id="controles"> <FORM> <B>Fecha:</B><BR> <INPUT type="text" size="10" id="fecha_ent" /><BR> <INPUT type="text" size="10" id="hora_ent" /><BR><BR> <SPAN id="txt_int"><B>Intervalo: Detenido</B></SPAN><BR><BR> <INPUT type="button" value=" + " /> <INPUT type="button" value=" - " /> <INPUT type="button" value=" <-> " /><BR><BR> </FORM> </DIV> <DIV id="img_zod"><IMG src="zodiaco.png"></DIV> <DIV id="img_som1"><IMG src="minisombra.png"></DIV> 11 Feb. 2011 César Vaca Rodríguez, Dpto. de Informática, UVa

Página inicial <DIV id="img_lun1"><IMG src="luna.png"></DIV> <DIV id="img_sol1"><IMG src="sol.png"></DIV> <DIV id="img_ven1"><IMG src="venus.png"></DIV> <DIV id="img_mar1"><IMG src="marte.png"></DIV> <DIV id="img_jup1"><IMG src="jupiter.png"></DIV> <DIV id="img_som2"><IMG src="sombra.png"></DIV> <DIV id="img_lun2"><IMG src="luna.png" id="fase_lunar"></DIV> <DIV id="img_sol2"><IMG src="sol.png"></DIV> <DIV id="img_ven2"><IMG src="venus.png"></DIV> <DIV id="img_mar2"><IMG src="marte.png"></DIV> <DIV id="img_jup2"><IMG src="jupiter.png"></DIV> <DIV id="img_map"><IMG src="mapamundi.gif"></DIV> <DIV id="img_cur"><IMG src="cursor.png"></DIV> </BODY> </HTML> 11 Feb. 2011 César Vaca Rodríguez, Dpto. de Informática, UVa

2. Presentación La presentación se puede ajustar haciendo uso de los estilos CSS Cada elemento HTML tiene asociada una serie de propiedades Nos interesa sobre todo la posibilidad de usar el posicionamiento absoluto de elementos. Los estilos se definen en el apartado style de la cabecera del documento, y se asocian a los elementos modificando la propiedad class. Podeis descargar la página modificada en: 11 Feb. 2011 César Vaca Rodríguez, Dpto. de Informática, UVa

Segunda iteración <HTML> <HEAD> <TITLE>Paradigmas de Programacion - Seminario #1</TITLE> <STYLE type="text/css"> .objMovible1 { position:absolute; z-index:1; } .objMovible2 { position:absolute; z-index:2; } .objMovible3 { position:absolute; z-index:3; } .objMovible4 { position:absolute; z-index:4; } .objMovible5 { position:absolute; z-index:5; } body { color: #FFFFFF; background: #0000A0; font: 13px Arial, sans-serif; } </STYLE> </HEAD> 11 Feb. 2011 César Vaca Rodríguez, Dpto. de Informática, UVa

Segunda iteración <BODY id="cuerpo"> <DIV class="objMovible5" style="top:205;left:712;" id="controles"> <FORM> <B>Fecha:</B><BR> <INPUT type="text" size="10" id="fecha_ent" /><BR> <INPUT type="text" size="10" id="hora_ent" /><BR><BR> <SPAN id="txt_int"><B>Intervalo: Detenido</B></SPAN><BR><BR> <INPUT type="button" value=" + " /> <INPUT type="button" value=" - " /> <INPUT type="button" value=" <-> " /><BR><BR> </FORM> </DIV> <DIV class="objMovible4" style="top:10;left:15;" id="img_zod"> <IMG src="zodiaco.png"> <DIV class="objMovible5" style="top:99;left:340;" id="img_som1"> <IMG src="minisombra.png"> 11 Feb. 2011 César Vaca Rodríguez, Dpto. de Informática, UVa

Segunda iteración <DIV class="objMovible5" style="top:335;left:576;" id="img_lun1“>.. <DIV class="objMovible5" style="top:571;left:340;" id="img_sol1“>.. <DIV class="objMovible5" style="top:335;left:104;" id="img_ven1">.. <DIV class="objMovible5" style="top:325;left:114;" id="img_mar1">.. <DIV class="objMovible5" style="top:345;left:94;" id="img_jup1">.. <DIV class="objMovible3" style="top:335;left:370;" id="img_som2">.. <DIV class="objMovible2" style="top:335;left:340;" id="img_lun2">.. <DIV class="objMovible1" style="top:335;left:280;" id="img_sol2">.. <DIV class="objMovible1" style="top:275;left:340;" id="img_ven2">.. <DIV class="objMovible1" style="top:395;left:340;" id="img_mar2">.. <DIV class="objMovible1" style="top:385;left:360;" id="img_jup2">.. <DIV class="objMovible1" style="top:10;left:712;" id="img_map">.. <DIV class="objMovible2" style="top:53;left:882;" id="img_cur">.. </BODY> </HTML> 11 Feb. 2011 César Vaca Rodríguez, Dpto. de Informática, UVa

3. Cálculos El cálculo de las posiciones del sol, luna y planetas requiere conocimientos de mecánica celeste... 11 Feb. 2011 César Vaca Rodríguez, Dpto. de Informática, UVa

3. Cálculos .. que se han codificado en un módulo javascript: RA (Ascensión Recta) DEC (Declinación) Eclíptica tpo -> tipo Date, fecha actual lat, lon -> grados r = calcAstro(tpo,lat,lon); r[0].RA -> RA del sol r[0].DEC -> Dec del sol r[0].late -> Latitud eclíptica del sol r[1] -> Sombra tierra r[2] -> Luna r[2].fase -> Fase luna (0-1) r[3] -> Venus r[4] -> Marte r[5] -> Júpiter 11 Feb. 2011 César Vaca Rodríguez, Dpto. de Informática, UVa

Elementos de Javascript
Tipos de datos No es necesario declarar las variables (salvo en el bloque ppal, con var) y no tienen un tipo de datos asociado. Conversión automática entre tipos de datos. Operador de asignación (=), comparaciones (==, !=), lógicos (!,&&,||) Los arrays pueden indexarse por cualquier valor, pueden almacenar valores de tipos distintos y se pueden asignar fuera de rango. var v = [1,[2,3.14],”hola”]; v[1][2]  3.14 “Registros”: var r = {nombre:”pedro”, edad:25}; r.edad  25 Cadenas de caracteres: Se puede usar indistintamente comillas simples o dobles. No son arrays. 11 Feb. 2011 César Vaca Rodríguez, Dpto. de Informática, UVa

Estructuras de control: Las sentencias terminan en punto y coma. Bloques: { s1; s2; } Condicional: if(cond) { ... } else { ... } Bucles: for(inicio; cond; paso) { ... } inicio es una sentencia (tipicamente una asignación) ejecutada una sóla vez antes de comenzar el bucle. cond representa la condición de permanencia en el bucle. paso es una sentencia (tipicamente de incremento) ejecutada al final de cada iteración. Operadores especiales: Autoincremento ( x++; y--;) Autoasignación ( x += 5; y /= 2; ) Condicional Definición de funciones: function min(a,b) { return(a < b ? a : b); } 11 Feb. 2011 César Vaca Rodríguez, Dpto. de Informática, UVa

Orientación a objeto: Los objetos son elementos dinámicos que contienen tanto propiedades (“campos”) como métodos (“funciones” que modifican propiedades del objeto o devuelven valores asociados al objeto) El acceso/invocación de propiedades/métodos se realiza mediante el operador punto Los arrays, “registros”, strings y elementos de la página HTML son objetos. Para este seminario no es necesario crear objetos. Objeto Math Es un objeto preexistente (clase estática) Math.PI Math.round(expr) Math.sqrt(expr) 11 Feb. 2011 César Vaca Rodríguez, Dpto. de Informática, UVa

Objetos de tipo Date Creación (fecha actual): fecha = new Date(); Acceso y modificación del dia, mes, año, hora, minutos: min = fecha.getMinutes(); fecha.setMinutes(35); Los meses se numeran de 0 a 11. Incremento de una fecha (x es el número de milisegundos) fecha.setTime(fecha.getTime() + x); Objetos de tipo String Acceso a carácter: “Hola”.charAt(2)  “l” Parsing: “12/8/2010”.split(“/”)  [“12”,”8”,”2010”] Objetos de tipo Array Longitud (propiedad): [1,2,3,4].lenght  4 Indices comienzan en cero. 11 Feb. 2011 César Vaca Rodríguez, Dpto. de Informática, UVa

Document Object Model (DOM)
<INPUT> 11 Feb. 2011 César Vaca Rodríguez, Dpto. de Informática, UVa

Trabajando con DOM Acceso a un elemento de la página web: Acceso y modificación del texto de un <INPUT>: Modificación del texto de un elemento inline (<SPAN>): Modificación de una imagen (<IMG>); e = document.getElementById(“identificador”); e.value e.innerHTML e.src = “fichero” 11 Feb. 2011 César Vaca Rodríguez, Dpto. de Informática, UVa

Cambio de propiedades CSS
Posicionamiento absoluto (pixels): Ocultar y hacer visible un elemento: Cambiar el color de fondo (aplicado a <BODY>): Los colores se especifican en hexadecimal, en orden RGB. e.style.left e.style.top e.style.visibility = ‘hidden’; e.style.visibility = ‘visible’; e.style.backgroundColor = ‘#FFA0B8’ 11 Feb. 2011 César Vaca Rodríguez, Dpto. de Informática, UVa

Orientación a Eventos Para que una página web sea dinámica, es necesario que pueda cambiar cuando el usuario interactua con sus elementos. Javascript tiene acceso al documento (via el modelo DOM) y puede cambiar su contenido. Es necesario poder asociar código javascript a la ocurrencia de eventos del usuario sobre elementos del documento. También debe ser posible mantener un estado (variables globales) durante la visualización del documento. 11 Feb. 2011 César Vaca Rodríguez, Dpto. de Informática, UVa

Tercera iteración <HTML> <HEAD> <TITLE>Paradigmas de Programacion - Seminario #1</TITLE> <SCRIPT SRC="astro.js"></SCRIPT> <SCRIPT type="text/javascript"> // --- Variables globables --- var fecha; // fecha mostrada var lat = 41.75; // latitud (grados) var lon = -4.74; // longitud (grados) ... Otras funciones, variables y constantes ... function onIniciar() { ... } function cambiarFecha(event) { ... } function cambiarHora(event) { ... } function cambiarLatLon(event) { ... } function animar(incr) { ... } function invertir() { ... } </SCRIPT> <STYLE type="text/css“> ... </STYLE> </HEAD> 11 Feb. 2011 César Vaca Rodríguez, Dpto. de Informática, UVa

Tercera iteración <BODY id="cuerpo" onload="iniciar()"> <DIV class="objMovible5" style="top:205;left:712;" id="controles"> <FORM> <B>Fecha:</B><BR> <INPUT ... id="fecha_ent" onkeypress="cambiarFecha(event)"/><BR> <INPUT ... id="hora_ent" onkeypress="cambiarHora(event)"/><BR><BR> <SPAN id="txt_int"><B>Intervalo: Detenido</B></SPAN><BR><BR> <INPUT type="button" value=" + " onclick="animar(true)" /> <INPUT type="button" value=" - " onclick="animar(false)" /> <INPUT type="button" value=" <-> " onclick="invertir()" /><BR><BR> </FORM> </DIV> ... <DIV class="objMovible1" id="img_map"> <IMG src="mapamundi.gif" onmousedown="cambiarLatLon(event)“> </DIV> <DIV class="objMovible2" id="img_cur"> <IMG src="cursor.png“ onmousedown="cambiarLatLon(event)"></DIV> </BODY> </HTML> 11 Feb. 2011 César Vaca Rodríguez, Dpto. de Informática, UVa

Concurrencia A veces es necesario que un proceso se ejecute en paralelo a otro. En nuestro caso deseamos mostrar una animación pero seguir siendo capaces de responder a eventos del usuario. Javascript tiene un modelo de concurrencia muy sencillo, basado en temporizadores y acceso no restringido a las variables globales. Podemos pedir que una función se ejecute continuamente a intervalos periódicos (medidos en milisegundos): Para detener la repetición: id = setInterval(“función”,msegs); clearInterval(id); 11 Feb. 2011 César Vaca Rodríguez, Dpto. de Informática, UVa

Su turno! Rellene las funciones que faltan en la página siguiente para poder ver en funcionamiento la simulación del mecanismo de Antikythera! 11 Feb. 2011 César Vaca Rodríguez, Dpto. de Informática, UVa

Paradigmas de Programación Primer Seminario

Presentaciones similares

Presentación del tema: "Paradigmas de Programación Primer Seminario"— Transcripción de la presentación:

Presentaciones similares

Sobre el proyecto

Feedback

Iniciar la sesión

Autorizarse a través de una red social:

Paradigmas de Programación Primer Seminario

Presentaciones similares

Presentación del tema: "Paradigmas de Programación Primer Seminario"— Transcripción de la presentación:

Presentaciones similares

Sobre el proyecto

Feedback