WinHIPE: edición, compilación y ejecución de programas; y generación de animaciones web. Manual de usuario.

Transcripción

1 WinHIPE: edición, compilación y ejecución de programas; y generación de animaciones web. Manual de usuario. Índice contenido. INTRODUCCIÓN ENTORNO DE TRABAJO EDICIÓN DE PROGRAMAS EDICIÓN DE UN PROGRAMA DESDE EL PRINCIPIO MODIFICACIÓN DE UN PROGRAMA EXISTENTE ALMACENAMIENTO DE UN PROGRAMA COMPILACIÓN DE PROGRAMAS EJECUCIÓN DE PROGRAMAS EXPRESIONES: CREACIÓN, APERTURA, MODIFICACIÓN Y ALMACENAMIENTO EVALUACIÓN DE EXPRESIONES ALMACENAMIENTO DE EVALUACIONES UTILIZACIÓN DE EVALUACIONES ALMACENADAS VISUALIZACIÓN DE LA EJECUCIÓN DE PROGRAMAS (ANIMACIONES) ANIMACIONES WEB CONSTRUCCIÓN DESDE CERO PUBLICACIÓN Jaime Urquiza Fuentes, Mayo 2006, pág. 1-1

2 Introducción En este documento se describe cómo editar, compilar y ejecutar (evaluaciones completa, y paso a paso) programas HOPE; así como construir animaciones web. 1. Entorno de Trabajo WinHIPE es un entorno integrado de desarrollo para el lenguaje funcional HOPE. Como todo entorno, tiene posibilidades de edición, compilación y ejecución de programas. WinHIPE, además, tiene posibilidades de visualización de programas funcionales, tanto a nivel estático (representación gráfica de un instante en la ejecución de un programa) como dinámico (animación de programas). La siguiente figura: WinHIPE se ha desarrollado para la plataforma Win32. WinHIPE es software de libre distribución, accesible en la web a través de la dirección: 2. Edición de programas La edición de un programa se puede hacer desde cero creando un fichero nuevo o abriendo un fichero existente. Para editar un programa se utiliza la ventana de edición, una vez disponible dicha ventana se escribe o modifica el código fuente del programa a voluntad del programador. Jaime Urquiza Fuentes, Mayo 2006, pág. 2-2

3 Edición de un programa desde el principio En el menú de la aplicación, seleccionar la opción Archivo, y dentro de ella la opción Nuevo archivo ; o seleccionar el primer botón de la barra de tareas (ver figura 1). Figura 1. Crear un programa desde el principio A continuación aparecerá la ventana de edición de programa en blanco (ver figura 2). Dicha ventana tendrá como título el texto Sin título, mientras su contenido no se guarde en algún fichero (ver sección 2.3 almacenamiento de un programa) Figura 2. Ventana de edición de programa en blanco El programador podrá editar directamente el programa en la ventana de edición disponible. Modificación de un programa existente En el menú de la aplicación, seleccionar la opción Archivo, y dentro de ella la opción Abrir archivo ; o seleccionar el segundo botón de la barra de tareas (ver figura 3). Jaime Urquiza Fuentes, Mayo 2006, pág. 2-3

4 Figura 3. Abrir un programa existente A continuación aparecerá el diálogo típico de selección de fichero (ver figura 4), donde habrá que seleccionar el fichero que contiene el programa (fichero con extensión.hop ). Figura 4. Diálogo de apertura de fichero Una vez seleccionado el fichero, se mostrará la ventana de edición de programa con el contenido de dicho fichero, (ver figura 5). Dicha ventana tendrá como título el nombre del fichero. Jaime Urquiza Fuentes, Mayo 2006, pág. 2-4

5 Figura 5. Ventana de edición de programa con el contenido del fichero abierto A partir de ahora, el programador podrá trabajar con el programa del modo que quiera: cambiar el contenido, compilarlo, o ejecutarlo. Almacenamiento de un programa El almacenamiento de un programa será posible, sólo cuando haya un programa abierto (de nueva creación o ya existente). En el menú de la aplicación, seleccionar la opción Archivo, y dentro de ella, alguna de las dos siguientes opciones: Guardar o Guardar como ; o seleccionar el tercer botón de la barra de tareas (ver figura 6), que coincide con la opción Guardar. La opción de Guardar, así como el tercer botón de la barra de tareas, sólo estarán habilitados si hay un programa existente abierto. De no ser así, si hubiera un programa de nueva creación abierto (y todavía sin haber sido almacenado por primera vez), sólo estaría disponible la opción del menú Archivo, y dentro de ella la opción Guardar como. Jaime Urquiza Fuentes, Mayo 2006, pág. 2-5

6 Figura 6. Almacenar un programa Si se selecciona la opción Guardar, o el tercer botón correspondiente, el programa será almacenado en el fichero en que estaba almacenado previamente, sobrescribiendo el contenido anterior con el actual. Si se selecciona la opción Guardar como, aparecerá el diálogo típico de almacenamiento de fichero (ver figura 7), donde habrá que introducir el nombre de fichero (con la extensión.hop incluida). Figura 7. Diálogo de almacenamiento de fichero Jaime Urquiza Fuentes, Mayo 2006, pág. 2-6

7 3. Compilación de programas Para compilar un programa con WinHIPE, seleccionar la ventana de edición donde se encuentra el programa a compilar (de no existir el programa abra uno existente o cree uno nuevo, ver secciones 2.1 y 2.2). A continuación, en el menú de la aplicación, seleccionar la opción Evaluación, y dentro de ella la opción Compilar ; o seleccionar el segundo botón de la barra de tareas (ver figura 8). Figura 8. Compilación de un programa Si la compilación no encontró errores se mostrará la siguiente pantalla (ver figura 9a), sino, el primer error detectado se describirá en una pantalla similar a la de la figura 9b. a) b) Figura 9. Resultados de la compilación de un programa 4. Ejecución de programas Jaime Urquiza Fuentes, Mayo 2006, pág. 4-7

8 Las características especiales del paradigma de programación funcional hacen que la ejecución de los programas funcionales sea distinta la ejecución de un programa imperativo. Un programa HOPE (fichero.hop) está formado por una o varias funciones. Para ejecutar dicho programa hay que escribir una expresión donde se usen las funciones definidas en el programa. Por ejemplo, para ejecutar el programa factorial.hop habrá que evaluar una expresión que use dicha función, por ejemplo: factorial(2+3); Esta expresión será evaluada, y el resultado de dicha evaluación será el resultado de la ejecución del programa. Por ello, a partir de ahora se hablará de evaluación, entendiendo como tal la ejecución de un programa basado en una expresión. Por lo tanto para evaluar un programa habrá que escribir (editar) una expresión y a continuación evaluarla. La evaluación de una expresión se puede hacer paso a paso y global; además una evaluación se puede almacenar para su posterior utilización. A continuación se detallan todos estos aspectos. (Recordar que para que una expresión pueda ser evaluada, el programa con las funciones correspondientes se ha debido compilar correctamente inmediatamente antes de evaluar la expresión) Expresiones: creación, apertura, modificación y almacenamiento Para editar una expresión hay que abrir la ventana de edición de expresión a evaluar. Esto se hace seleccionando en el menú de la aplicación, la opción Evaluación, y dentro de ella la opción Editar expresión (ver figura 10) Figura 10. Edición de expresiones Jaime Urquiza Fuentes, Mayo 2006, pág. 4-8

9 Una vez hecho esto, aparecerá la ventana de edición de expresiones (ver figura 11), donde se podrá escribir la expresión deseada. Figura 11. Ventana de edición de expresiones También se puede cargar una expresión de un fichero, utilizando el mismo proceso que el descrito en la sección 2.2. Pero esta vez, en el dialogo de apertura de fichero, hay que seleccionar ficheros con la extensión.exp. Una vez abierto ese fichero, habrá que copiar la expresión deseada en la ventana de edición de expresiones (figura 11). Sea creada desde el principio o cargada desde un fichero existente, la expresión a evaluar se podrá modificar a voluntad por el programador. Si se quiere guardar dicha expresión, se puede utilizar la opción de almacenar fichero (seccón 2.3), seleccionando en el dialogo correspondiente, la extensión.exp. Evaluación de expresiones Cuando la expresión a evaluar se ha editado al completo, se puede proceder a evaluarla. Recodar que antes se debe haber compilado el programa que contiene a las funciones utilizadas por esta expresión. Existen varios modos de evaluar una expresión: paso a paso, y completa. En ambos casos, antes de empezar, en primer lugar se pregunta si se quiere comenzar a evaluar desde el principio la expresión (ver figura 12). Figura 12. Comienzo de evaluación de una expresión Jaime Urquiza Fuentes, Mayo 2006, pág. 4-9

10 Y a continuación se informa sobre la corrección de la expresión. Al igual que los programas, las expresiones también se analizan, el resultado de dicho análisis puede ser correcto o erróneo, ver figuras 13 a) y 13 b) respectivamente. a) b) Figura 13. Resultados del análisis de una expresión Y a partir de este momento empieza la evaluación de la expresión. Tanto con la opción Evaluación, y dentro de ella la opción Paso a paso del menú, como con el botón se ejecuta la evaluación paso a paso. Cada vez que se haga clic sobre este botón u opción de menú se mostrará el siguiente paso de evaluación. Tanto con la opción Evaluación, y dentro de ella la opción Completa del menú, como con el botón se ejecutrá una evaluación completa, por lo que lo siguiente que se mostrará será el resultado final del programa. Almacenamiento de evaluaciones Una vez que se haya completado una evaluación, se puede almacenar. La información asociada a una evaluación será: el código fuente del programa (.hop), la expresión evaluada (.exp), los pasos de evaluación (.eva) y la configuración del entorno (.ini). Para almacenar una evaluación se usa la opción Guardar evaluación del menú Archivo. En este momento WinHIPE pedirá el nombre con queremos guardar la evaluación (ver figura 14). Dicho nombre se asignará a todos los ficheros mencionados anteriormente (código fuente, expresión, evaluación y configuración), ver figura 15. Jaime Urquiza Fuentes, Mayo 2006, pág. 4-10

11 Figura 14. Guardar una evaluación Figura 15. Ficheros generados para una evaluación guardada Utilización de evaluaciones almacenadas Para utiliza una evaluación previamente almacenada se usa la opción Abrir evaluación del menú Archivo. Una vez seleccionada la opción, se pregunta por el nombre de la evaluación a guardar (ver figura 16) Figura 16. Nombre de la evaluación a abrir Jaime Urquiza Fuentes, Mayo 2006, pág. 4-11

12 Una vez seleccionada la evaluación, WinHIPE carga el código fuente y lo compila (ver figura 17), informando de la compilación correcta. Figura 17. Compilación del código fuente de una evaluación cargada A continuación carga la expresión y la compila también (ver figura 18), informando de nuevo de la compilación correcta. Figura 18. Compilación de la expresión de una evaluación cargada Jaime Urquiza Fuentes, Mayo 2006, pág. 4-12

13 Y finalmente se generan todos los pasos de la evaluación (ver figura 19). Figura 19. Generación de pasos de evaluación de una evaluación cargada Visualización de la ejecución de programas (Animaciones) Una vez que se tiene una evaluación de una expresión (ha aparecido la ventana con el mensaje Fin de Evaluación ), se puede ver la ejecución del programa en formato de animación en WinHIPE. Para ello hay que abrir la ventana de animación. (ATENCIÓN no confundir con las animaciones web) La ventana de animación se puede abrir seleccionando la opción Animación del menú Ventana o selección ando una de las ventanas minimizadas en el entorno de WinHIPE (ver flechas en la figura 20). La ventana de animación aparecerá con la primera expresión de la evaluación. La animación se podrá manejar con los controles de reproducción disponibles, así como cambiar la velocidad de reproducción (ver figura 21). Jaime Urquiza Fuentes, Mayo 2006, pág. 4-13

14 Figura 20. Acceso a la ventana de animación Figura 21. Ventana de animación Muchas veces algunos pasos de la animación sobran, por ejemplo la evaluación de una expresión lógica true or false or true. O la evaluación de una expresión que contiene muchos pasos pero cuyo funcionamiento es trivial. Por ello WinHIPE permite seleccionar qué visualizaciones aparecerán en la animación y cuáles no. Esto se puede hacer en dos sitios distintos: en la ventana de evaluación (ver figura 22), o en la ventana de miniaturas (ver figura 23). Jaime Urquiza Fuentes, Mayo 2006, pág. 4-14

15 Figura 22. Ventana de evaluación Figura 23. Ventana de miniaturas Jaime Urquiza Fuentes, Mayo 2006, pág. 4-15

16 El acceso a estas dos ventanas es análogo al de la ventana de animación: desde el menú Ventana o desde la ventana minimizada en el entorno. En ambas ventanas aparecen checkboxes a la izquierda de cada paso de ejecución. Cuando este checkbox está seleccionado, el paso se mostrará en al animación, de lo contrario, el paso no aparecerá en la animación. La ventana de evaluación muestra todos los pasos a tamaño original, lo que implica que no todos los pasos se mostrarán a la vez. La ventana de miniaturas trata de mostrar la mayor cantidad de pasos de ejecución, por ello aparecen reducidos. Cuando se quiera ver en detalle alguno de ellos bastará con seleccionarlo. La selección se puede hacer tanto con el ratón como con el cursor. Una vez que se halla terminado la selección de los pasos a mostrar, se podrán ver en la animación los pasos seleccionados. 5. Animaciones web Las animaciones web pretenden juntar toda la información relativa a un programa HOPE: el código fuente del programa, la animación de su ejecución, y las descripciones del problema que resuelve y cómo se ha implementado en HOPE. Construcción desde cero Para poder generar una animación web hay que haber generado una evaluación gráfica previamente (a mano o cargada de una ya existente, ver evaluación expresiones y almacenamiento de expresiones) y haber seleccionado los pasos a mostrar en la animación web. Para generar la animación web hay que utilizar la opción Generar Animación Web del menú Animación Web (ver figura 24). Figura 24. Acceso a la generación de animaciones web A continuación se mostrará el interfaz de construcción de animaciones (ver figura 25), con él se podrá añadir la descripción del problema, la descripción de la solución, así como configurar algunas características sobre la apariencia de las páginas web y la propia animación. Jaime Urquiza Fuentes, Mayo 2006, pág. 5-16

17 Figura 25. Interfaz de creación de animaciones web Este interfaz permite modificar las distintas partes de una animación web permitiendo ver un boceto (parte inferior del interfaz) de la misma. A cada una de las partes de la animación web se accede mediante las solapas situadas en la parte superior (ver figura 26). Los cambios realizados no tienen efecto inmediato (en el boceto), a no ser que el usuario seleccione el botón Actualizar Cambios (ver figura 26, parte inferior derecha) Figura 26. Solapas Dichas solapas permiten acceder y modificar la siguiente información: título de la animación web, encabezado principal de la animación web, encabezado de las secciones y las secciones propiamente dichas. Jaime Urquiza Fuentes, Mayo 2006, pág. 5-17

18 Título de la Animación Web. Esta solapa (ver figura 27) permite establecer el título de las páginas web (contenido de la etiqueta <TITLE> </TITLE>) que formarán la animación web. Dicho título también aparecerá en la barra de título de la ventana de construcción de animaciones web (ver figura 27). Figura 27. Solapa Título de la Animación Web Encabezado Principal Animación Web (Ver figura 28). Esta solapa permite introducir tanto el texto correspondiente al encabezado principal como su formato. En el ejemplo de la figura 28 se ha introducido el texto Factorial de un número Figura 28. Solapa Encabezado Principal Animación Web Las opciones de formato del encabezado comprenden: el tamaño, el color de la fuente y la alineación horizontal del texto. Jaime Urquiza Fuentes, Mayo 2006, pág. 5-18

19 El tamaño viene definido como una constante y las unidades (ver figura 29 a), que pueden ser puntos (pt), píxeles (px), pulgadas (in), centímetros (cm), o porcentaje (%). El tamaño también se puede definir como el tipo de encabezado HTML en el campo Tipo de encabezado (ver figura 29 b) desde H1 (el más grande) al H6 el más pequeño. a) b) Figura 29. Definición del tamaño del encabezado principal de la animación, con medidas específicas (a), o por encabezados HTML (b) El color de la fuente se seleccionara de un diálogo específico, en la figura 30 a) se ve cómo seleccionar el color, en esta caso azul. La alineación del texto se selecciona en el grupo Justificación. Se puede elegir entre alineación a la izquierda, centrada, o a la derecha. En la figura 30 b) se muestra cómo se ha seleccionado la alineación centrada. a) b) Figura 30. a) Diálogo para la selección del color del encabezado principal de la animación. b) Selección de la alineación del texto Jaime Urquiza Fuentes, Mayo 2006, pág. 5-19

20 Encabezado Secciones. (Ver figura 31). Esta solapa permite cambiar el formato de presentación de los encabezados de las cuatro secciones. Figura 31. Solapa para manipular el encabezado de secciones Como se puede apreciar, su formato se manipula de igual manera que el encabezado principal: tamaño, color y alineación. En la figura 31 se han seleccionado los encabezados de secciones como encabezado de tipo H2, de color verde y con alineación centrada. Jaime Urquiza Fuentes, Mayo 2006, pág. 5-20

21 Secciones. (Ver figura 32). Esta solapa permite cambiar el contenido de las secciones de texto (descripción del problema y el algoritmo), así como el formato de presentación de las cuatro secciones. Figura 32. Solapa para manipular las secciones Con la lista situada en la parte superior izquierda Sección se permite seleccionar cuál de las secciones se quiere modificar. Para cada sección se puede modificar: el texto del encabezado de esa sección ( Encabezado ), el color de fondo de dicha sección ( Color de Fondo ), y el contenido ( Contenido ). En las figuras 33 y 34 se pueden ver las manipulaciones de las secciones de descripción del problema y la solución, respectivamente, así como su efecto. Figura 33. Manipulación de la sección de la descripción del problema Jaime Urquiza Fuentes, Mayo 2006, pág. 5-21

22 Figura 34. Manipulación de la sección de la descripción de la solución Jaime Urquiza Fuentes, Mayo 2006, pág. 5-22

23 En la figura 35 se puede observar la manipulación de la sección del código fuente. Figura 35. Manipulación de la sección del código fuente Jaime Urquiza Fuentes, Mayo 2006, pág. 5-23

24 Finalmente, en la figura 36 se puede observar la manipulación de la sección correspondiente a la animación. Como antes, se puede elegir el texto del encabezado, pero en este caso, también cómo se muestra la animación: con una sola imagen, con dos dispuestas horizontalmente, o verticalmente. En la figura 35 se han colocado dos imágenes verticalmente. Figura 36. Manipulación de la sección de la animación Una vez que se ha detallado toda esta información sólo queda guardar la animación web. Para ello se ha de seleccionar la opción Guardar Animación Web del menú Animación Web (ver figura 37). Figura 37. Guardar una animación web Jaime Urquiza Fuentes, Mayo 2006, pág. 5-24

25 A continuación se muestra un diálogo para especificar dónde se guardará la animación web (ver figura 38). Figura 38. Diálogo para guardar una animación web El nombre especificado, Factorial en este caso, será el nombre de una carpeta donde se guardarán todos los ficheros relacionados con la animación (ver figura 39). Figura 39. Ficheros de la carpeta de la animación web El contenido de esta carpeta se divide en: páginas html (extensión.htm ), imágenes (iconos.gif, y visualizaciones de la animación, carpeta imgs ), una hoja de estilos.css, y un conjunto de ficheros ejecutables java.class para el applet de visualización de la animación, todos ellos para la publicación de la animación; ficheros.wpa.xml y.dtd para la manipulación posterior de la animación web; y un fichero comprimido.wpz que permitirá la descarga eficiente de la anterior información (xml, wpa y dtd). Jaime Urquiza Fuentes, Mayo 2006, pág. 5-25

26 Publicación Para publicar una animación web bastará con copiar toda la carpeta generada (figura 38) allá donde se quiera ubicar. Para acceder a la animación web habrá que hacer un enlace a alguno de los siguientes ficheros: nombre_de_la_animación-plain.html nombre_de_la_animación-f1.html nombre_de_la_animación-f2.html nombre_de_la_animación-star.html En el ejemplo de la figura 39: Factorial-plain.html, Factorial-f1.html, Factorial-f2.html y Factorial-star.html. Jaime Urquiza Fuentes, Mayo 2006, pág. 5-26