1 / 24

Paradigmas de Programación Primer Seminario

Paradigmas de Programación Primer Seminario. Departamento de Informática Universidad de Valladolid Curso 2010-11 Grado en Ingeniería Informática Grado en Ingeniería Informática de Sistemas. Objetivos.

wayne-mcdowell
Download Presentation

Paradigmas de Programación Primer Seminario

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Paradigmas de ProgramaciónPrimer Seminario Departamento de Informática Universidad de Valladolid Curso 2010-11 Grado en Ingeniería Informática Grado en Ingeniería Informática de Sistemas César Vaca Rodríguez, Dpto. de Informática, UVa

  2. 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 webdiná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. César Vaca Rodríguez, Dpto. de Informática, UVa

  3. 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: http://www.infor.uva.es/~cvaca/asigs/docpar/eclipse01.zip • Y las imágenes utilizadas en: http://www.infor.uva.es/~cvaca/asigs/docpar/imgsem1.zip César Vaca Rodríguez, Dpto. de Informática, UVa

  4. Estructura de una página HTML César Vaca Rodríguez, Dpto. de Informática, UVa

  5. 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=" + " />&nbsp; <INPUT type="button" value=" - " />&nbsp; <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> César Vaca Rodríguez, Dpto. de Informática, UVa

  6. 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> César Vaca Rodríguez, Dpto. de Informática, UVa

  7. 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: http://www.infor.uva.es/~cvaca/asigs/docpar/eclipse02.zip César Vaca Rodríguez, Dpto. de Informática, UVa

  8. 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> César Vaca Rodríguez, Dpto. de Informática, UVa

  9. 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=" + " />&nbsp; <INPUT type="button" value=" - " />&nbsp; <INPUT type="button" value=" <-> " /><BR><BR> </FORM> </DIV> <DIV class="objMovible4" style="top:10;left:15;" id="img_zod"> <IMG src="zodiaco.png"> </DIV> <DIV class="objMovible5" style="top:99;left:340;" id="img_som1"> <IMG src="minisombra.png"> </DIV> César Vaca Rodríguez, Dpto. de Informática, UVa

  10. 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> César Vaca Rodríguez, Dpto. de Informática, UVa

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

  12. 3. Cálculos • .. que se han codificado en un módulo javascript: http://www.infor.uva.es/~cvaca/asigs/docpar/astro.js 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 DEC (Declinación) RA (Ascensión Recta) César Vaca Rodríguez, Dpto. de Informática, UVa

  13. 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. César Vaca Rodríguez, Dpto. de Informática, UVa

  14. Elementos de Javascript • 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); } César Vaca Rodríguez, Dpto. de Informática, UVa

  15. Elementos de Javascript • 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) César Vaca Rodríguez, Dpto. de Informática, UVa

  16. Elementos de Javascript • 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. César Vaca Rodríguez, Dpto. de Informática, UVa

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

  18. 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” César Vaca Rodríguez, Dpto. de Informática, UVa

  19. 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’ César Vaca Rodríguez, Dpto. de Informática, UVa

  20. 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. César Vaca Rodríguez, Dpto. de Informática, UVa

  21. 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> César Vaca Rodríguez, Dpto. de Informática, UVa

  22. 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)" />&nbsp; <INPUT type="button" value=" - " onclick="animar(false)" />&nbsp; <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> César Vaca Rodríguez, Dpto. de Informática, UVa

  23. 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); César Vaca Rodríguez, Dpto. de Informática, UVa

  24. Su turno! • Rellene las funciones que faltan en la página siguiente para poder ver en funcionamiento la simulación del mecanismo de Antikythera! http://www.infor.uva.es/~cvaca/asigs/docpar/eclipse.zip César Vaca Rodríguez, Dpto. de Informática, UVa

More Related