10 dic 2009

Lección 3: Los objetos visuales de HAEduc (continuación…)

¿Listos para seguir?... en esta entrega le toca el turno al objeto Etiqueta, veamos sus características:


Etiqueta: Una línea de texto con fondo transparente y posibilidades de establecerle la fuente, el color, etc. Muy empleada para colocar títulos o explicaciones breves.






Sus propiedades específicas:
Propiedad
Significado
Valores posibles
Texto
El texto que se mostrará.
Cadena de caracteres
Color1
Color que mostrará en el estado normal.
Valor de los componentes rojo, verde y azul (RGB).
Color2
Color que mostrará en el estado over.
Valor de los componentes rojo, verde y azul (RGB).
Color3
Color que mostrará en el estado down.
Valor de los componentes rojo, verde y azul (RGB).
Fuente
Fuente a emplear.
Fuente instalada en el sistema.




La caja de valores es otro objeto disponible en la paleta de objetos de HAEduc.


Caja de valores: Le permite a los usuarios finales (los que usarán los productos elaborados con HAEduc) insertar valores a la aplicación en modo de ejecución.




Sus propiedades específicas:
Propiedad
Significado
Valores posibles
Texto
El texto que se mostrará inicialmente en la caja de valores.
Cadena de caracteres
Largo
Dimensiones en el eje x de este objeto.
Valores numéricos.
Fuente
Fuente a emplear en el texto.
Fuente instalada en el sistema.
Color de fuente
Color para el texto.
Valor de los componentes rojo, verde y azul (RGB).
Color de marco
Color para el borde de la caja.
Valor de los componentes rojo, verde y azul (RGB).
Fuente
Fuente a emplear.
Fuente instalada en el sistema.
Marco visible
Muestra u oculta el marco de la caja de valores.
True o False.




El objeto contenedor html.
Html: Este objeto permite visualizar e interactuar con ficheros con formato html. Estos ficheros pueden contener imágenes, hipervínculos, y demás elementos propios del lenguaje. Una de las características más interesantes de es este objeto es su posibilidad de interpretar no solo ficheros preexistentes en el disco, sino que además puede interpretar código html previamente almacenado en una variable del script. También es posible capturar los eventos del clic en los hipervínculos permitiendo personalizar el comportamiento de este objeto (esto es un adelanto, luego hablaremos de los eventos en HAEduc). Otro elemento importante es que este objeto puede cargar páginas web locales, de internet u otro servidor, siempre que la conexión a esta sea directa (sin proxy).


El objeto html se muestra como un rectángulo negro en modo de edición, mientras que al pasar a ejecución muestra la página que tiene cargada.






Sus propiedades específicas son:

Propiedad
Significado
Valores posibles
Fichero
El fichero que inicialmente cargará el objeto (puede omitirse si se le va a establecer por script)
Cadena de caracteres




Esta es una imagen de este objeto funcionando en ejecución:




Pasemos al objeto video.
Video: Reproductor de videos que permite visualizar películas en los formatos más comunes (mpg, avi, wmv, etc).
En modo de edición este objeto se muestra como un rectángulo de color negro, en ejecución visualiza el fichero de video cargado.


Sus propiedades específicas son:




Propiedad
Significado
Valores posibles
Fichero
El fichero de video que inicialmente cargará el objeto (puede omitirse si se le va a establecer por script)
Cadena de caracteres
Volumen
Volumen del sonido.
En porciento (0%-100%)
Estilo
El estilo de los controles nativos del reproductor.
SS_CONTROLES_NO
Sin controles


SS_CONTROLES_AVANCE
Muestra la barra de posición


SS_CONTROLES_VOLUMEN Muestra los controles de volumen


SS_CONTROLES_PORDEFECTO Estado por defecto del sistema











4 dic 2009

Lección 2: Objetos visuales de HAEduc

Hola nuevamente… en esta entrega vamos a comenzar a hablar de los objetos visuales de HAEduc, analizaremos sus propiedades y principales características así como algunas sugerencias para su empleo. Comenzamos…


Trabajo con los objetos de la paleta
En la paleta de objetos podrás encontrar los 12 objetos que HAEduc permite insertar desde edición. Ellos son:



Veamos las características de cada uno de ellos. Para esto vamos a comenzar insertando en la única página de nuestro libro un objeto imagen. A continuación el procedimiento general que vamos a emplear para insertar cualquier objeto:
  1. Seleccionamos el objeto en el panel de objetos.
  2. Hacemos click en el lugar del proyector donde se vaya a insertar este, y sin liberar el botón del mouse, arrastramos para seleccionar un área, que se corresponderá con el tamaño del objeto a insertar.
  3. Liberamos el botón del mouse.


 ¿Complejo verdad?
Bien vamos a insertar entonces el primer objeto, una imagen.

Imagen: El objeto imagen permite mostrar ficheros de imagen en el proyector, con posibilidades de reescalar la imagen, rotarla, modificar características como la opacidad, etc. Este además puede comportarse como una imagen de intercambio, al interactuar con el mouse, mostrando ora una imagen1 ora una imagen2 según sus propiedades.
Una característica interesante de este objeto se forma a partir de las áreas no transparentes del fichero de imagen empleado. Esto significa que si usamos una imagen con un área transparente esta no interactúa con el mouse, de forma tal que es posible crear áreas sensibles al ratón no necesariamente rectangulares, sino con la forma de la imagen seleccionada. Algo similar ocurre con el objeto botón, pero de eso aún no hablamos.

Al insertar una imagen aparece inmediatamente el siguiente diálogo:




En él seleccionaremos el fichero de imagen que se le va a establecer al objeto. HAEduc admite los formatos más comunes de imágenes (jpg, gif, png, bmp, etc). Una vez seleccionado el fichero aparecerá el siguiente dialogo:



En este diálogo se le indicará a HAEduc sobre las dimensiones que poseerá la imagen seleccionada. De responder Sí, el objeto imagen tomará las dimensiones originales del fichero de imagen, en otro caso, de responder No, el objeto imagen tomará las dimensiones que el usuario haya establecido en el rectángulo de selección al insertar el objeto.

Analicemos las propiedades de este objeto:





Todos los objetos que insertaremos tienen dos grupos de propiedades, las Generales que serán comunes para todos, y las Específicas, que son características propias para cada tipo de objeto. Es por ello que para no repetir vamos a explicar solo por esta vez las propiedades generales de los objetos.
 

Propiedad
Significado
Valores posibles
Nombre
El identificador de este objeto
Cadena de caracteres
x
Posición del objeto en el eje x
Valor numérico entero
y
Posición del objeto en el eje y
Valor numérico entero
Ancho
Dimensiones del objeto en el eje x
Valor numérico entero
Alto
Dimensiones del objeto en el eje y
Valor numérico entero
Bloqueado
Deshabilita el acceso al objeto mediante el mouse en modo de edición. Se emplea fundamentalmente para evitar mover accidentalmente el objeto.
True o False
Visible
Oculta el objeto para modo de edición y ejecución.
True o False
Cursor
Imagen del puntero del mouse al pasar sobre el objeto.
Constantes de cursores predeterminados por el sistema operativo:

SS_PUNTERO_MANO Representa una mano
SS_PUNTERO_EDICION Puntero de edición de texto
SS_PUNTERO_PROHIBIDO Símbolo de prohibición
SS_PUNTERO_INTERROGACION Símbolo de interrogación
SS_PUNTERO_NSEO Flecha con dirección norte-sur y este-oeste
SS_PUNTERO_NS Flecha con dirección norte-sur
SS_PUNTERO_NOSE Flecha con dirección noroeste-sureste
SS_PUNTERO_EO Flecha con dirección este-oeste
SS_PUNTERO_CRUZ Símbolo en forma de cruz
SS_PUNTERO_ESPERA Símbolo de espera
SS_PUNTERO_FLECHAESPERA Símbolo de espera con flecha
SS_PUNTERO_FLECHA Símbolo flecha (puntero normal)
SS_PUNTERO_IZQUIERDO Símbolo flecha invertida
SS_PUNTERO_DERECHO Símbolo flecha horizontal hacia la derecha


Opacidad
Nivel de transparencia que poseerá el objeto.
De 0 a 100
Rotación
Ángulo de rotación del objeto (en grados).
Valores numéricos

 Nota: Las propiedades cursos, opacidad y rotación no siempre están presentes en todos los objetos(p.e el objeto video).


Propiedad
Significado
Valores posibles
Imagen1
Ruta del fichero de imagen a mostrar por el objeto en su estado normal.
Cadena de caracteres
Imagen2
Ruta del fichero de imagen a mostrar por el objeto en su estado over, o estado down.
Cadena de caracteres
Tipo de imagen
Comportamiento del objeto imagen frente a la interacción del mouse.
SS_IMAGEN_NORMAL
La imagen no cambia su apariencia al interactuar con el mouse.

SS_IMAGEN_INTERCAMBIO_OVER
El objeto cambia su imagen al situarse el mouse sobre él, ahora empleando el fichero de la propiedad imagen2.

SS_IMAGEN_INTERCAMBIO_DOWN
El objeto cambia su imagen al hacer un clic sobre él, intercambiando entre los ficheros de las propiedades  imagen1 e imagen2.
Rotación de colores
Realiza modificaciones en la distribución de los colores originales de una imagen, manteniendo los correspondientes a la escala de grises.
De 0 a 100, valor por defecto 50.

Ideas: 
  1. Un objeto imagen puede ser impleado como botón aprovechando sus posibilidades con las transparencias de imágenes png.
  2. También es posible obtener variantes visuales de una misma imagen explotrando la propiedad rotación de colores. 
  3. Un objeto imagen con el diseño adecuado y mediante la opción SS_IMAGEN_ITERCAMBIO_DOWN en en su propiedad de tipo podía covertirse en los muy empleados check box o casillas de selección.

    El próximo objeto de la paleta es el Botón.
    Botón: permite crear botones con el empleo de hasta tres imágenes que representan sus tres estados (normal, over, down). Al igual que el objeto imagen este explota muy bien el empleo de transparencias mediante ficheros png, con los que se puede definir el área interactiva del mismo.

    Al insertar un botón este se crea empleando una imagen que trae HAEduc por defecto, y que pude ser sustituida en una de sus propiedades.


    Sus propiedades específicas son:

    Propiedad
    Significado
    Valores posibles
    Imagen1
    La imagen que mostrará el botón en estado normal.
    Cadena de caracteres
    Imagen2
    La imagen que mostrará el botón cuando tenga el puntero del mouse sobre él (estado over).
    Cadena de caracteres
    Imagen3
    La imagen que mostrará el botón cuando se haya presionado un botón del mouse sobre él (estado down).
    Cadena de caracteres
    Texto
    El texto que se mostrará como etiqueta del botón. Puede establecerse a vacio esta propiedad.
    Cadena de caracteres
    Color1
    Color que mostrará el texto del botón en el estado normal.
    Valor de los componentes rojo, verde y azul (RGB).
    Color2
    Color que mostrará el texto del botón en el estado over.
    Valor de los componentes rojo, verde y azul (RGB).
    Color3
    Color que mostrará el texto del botón en el estado down.
    Valor de los componentes rojo, verde y azul (RGB).
    Fuente
    Fuente a emplear en la etiqueta del botón.
    Fuente instalada en el sistema.
    Rotación de colores
    Realiza modificaciones en la distribución de los colores originales del botón para sus tres estados, manteniendo los correspondientes a la escala de grises.
    De 0 a 100, valor por defecto 50.






    30 nov 2009

    Lección 1: Comenzando de cero en HAEduc

    Prefacio
    Después de mucha investigación y tiempo decidí abrir este blog y comenzar un grupo de lecciones en las que intentaré mostrar en el lenguaje más simple y directo posible los elementos esenciales del trabajo con HAEduc. Te mostraré los aspectos necesarios para crear recursos educativos empleando esta herramienta de autor. Trabajaremos con elementos de la interface de esta herramienta así como con el script profundizando en la mayor parte de los aspectos que maneja este lenguaje y la forma más adecuada de emplearlo para lograr crear recursos dinámicos, estables y atractivos. Por tanto verás que pasaremos por aspectos muy simples y por otros algo más complejos pero tranquilo que intentaré siempre ponerte la suficiente cantidad de ejemplos y comparaciones para que no te sientas perdido.
    Es válido declarar que para la elaboración de estas lecciones me he apoyado en la documentación brindada por los autores en el instalador de HAEduc y en su sitio oficial, además de ejemplos y trabajos de amigos que me han cedido sus notas y materiales.
    Sígueme pues…

    Lección 1: Comenzando de cero

    ¿Qué es HAEduc?
    Antes de empezar te recomiendo que te sientes cómodo, busques la bebida que más te guste (té, café, refresco, no alcohol), quizás algún dulcecillo, en fin, que te relajes ahora que puedes puesto que aún no hemos llegado a la parte compleja (si es que se puede llamar así, para mí divertida) de la programación en HAEduc.
    Aunque supongo que ya conozcas o tengas al menos una idea de lo que es HAEduc  por algún foro en la web o de su sitio oficial, voy a repetírtelo: HAEduc es una herramienta de autor para el desarrollo de aplicaciones educativas en (y para) los sistemas operativos Windows y Linux. Que ¿Qué es una herramienta de autor?, bueno en pocas palabras una aplicación que te permite crear productos multimedia con poco esfuerzo y sin necesidad de programar demasiado, pero eso estoy seguro de que ya lo sabías… continuemos pues.

    Características principales de HAEduc
    Bueno ya hablé de algunas, es multiplataforma (Windows y Linux) permitiendo no solo trabajar en ambos sistemas sino que también es posible desde uno de ellos exportar aplicaciones para el otro sistema, algo así como compilación cruzada aunque realmente no lo es porque HAEduc no compila sino interpreta, pero esa es otra característica que describo a continuación. La herramienta contiene un intérprete de script basado en el más que conocido lenguaje Basic aunque con características especiales similares a C++, Python, Lua y VB.NET con posibilidades de trabajo con programación orientada a objetos (o cercana a esto) implementando clases y herencia. Los autores declaran además que este intérprete de script proviene del intérprete libre wxBasic, con mejoras importantes en su funcionamiento, correcciones y adaptaciones para la metáfora que proponen. Por otra parte es destacable la relativamente buena velocidad y flexibilidad del mismo, suficiente para el objetivo del producto (desarrollar presentaciones multimedia interactivas para la educación).
    Otro detalle importante es el reducido tamaño del runtime de HAEduc en comparación con el de otras aplicaciones similares. En cuanto al IDE de HAEduc sí se podría decir que aunque permite el trabajo para el que está diseñado, carece de un grupo de facilidades de las cuales usted se percatará al trabajar, aunque advierto que nada tiene que ver el IDE de HAEduc con el funcionamiento de las aplicaciones que desee desarrollar, incluso si tuviera más tiempo me dedicaría a hacer un entorno más amigable pero mantendría por supuesto el runtime de este maravilloso producto del que increíblemente existen muy pocos gratuitos con estas potencialidades.
    El sistema además tiene la capacidad de atender a dos tipos de usuarios diferentes según sus conocimientos, es el caso del programador y del docente. Para ello el brinda herramientas para que ambos usuarios hagan tareas similares. Y aunque su principal objetivo es facilitar  la creación de aplicaciones educativas, también es perfectamente posible crear aplicaciones de corte general.

    Vaya!!! … como he escrito, seguramente me podrás disculpar por tantas palabras, pero es que a veces me emociono, vamos a lo nuestro. Pero antes rellenaré mi vaso de jugo.
    Listo… Ya estoy aquí, ¿seguimos?

    La metáfora de HAEduc
    Las metáforas en la informática siempre han jugado un papel esencial para atraer a los usuarios mediante el empleo de conceptos pertenecientes a la realidad. Es el caso por ejemplo del escritorio de Windows o las carpetas. En ambos casos estos objetos ya existían antes del desarrollo de esta ciencia, y fueron tomados prestados para facilitar el trabajo de las personas en estos ambientes.
    En los sistemas de autor también se suele usar este recurso. Aparecen entonces metáforas como la del eje de los tiempos, muy empleada en Macromedia Flash, también se emplea el organigrama y una muy popular es la metáfora del libro. Esta última precisamente es la que HAEduc propone.
    La metáfora del Libro no es más que la estructura que poseerán los proyectos de software que los usuarios crearán y gestionarán con HAEduc. Esta metáfora consiste en la presencia de un Libro que contiene páginas, las cuales a su vez contienen objetos:



     (Disculpe la calidad de la imagen, no soy buen dibujante)

    Instalando HAEduc
    Veamos ahora como podemos instalarnos HAEduc en nuestro computador:
    1.       Antes que nada debemos seleccionar el sistema operativo en el que lo vamos a instalar que… lógicamente es en el que estamos trabajando, de esto dependerá la versión que descargaremos. En El blog de HAEduc puedes descargarte los instaladores para ambos sistemas operativos. También puedes descargar el instalador de HAEduc desde el sitio oficial de la herramienta.
    2.       Una vez que tienes los instaladores veamos como instalarlo en ambos sistemas operativos:

    Si estas en Windows la instalación es muy simple, similar a como se instalan la mayoría de los programas (siguiente -> siguiente -> siguiente). A continuación las pantallas en las que puedes seleccionar donde instalarás el programa, el nombre del acceso en el menú de programas del menú inicio y otros detalles pocos significativos.



    (Pequeñas las imágenes verdad??, estamos contribuyendo con el ahorro de papel!!).

    Bien en el caso de Linux deberás emplear el comando dpkg. Luego de ubicar el paquete instalador (.deb) escribes esto en una consola:





     

    Queda claro que /home/usuario/Desktop/HAEduc.deb es la dirección del paquete de instalación.
    Y  guaaalaaa¡¡¡ finalmente después de taaaanto esfuerzo ya tenemos instalado HAEduc en nuestro computador… estamos listos entonces para el trabajo.
    Accedemos al programa (como mismo lo hacemos con los demás programas) desde el menú inicio de Windows o en Linux en aplicaciones. Podrás observar la presencia de un icono llamado SSEditor, este permite acceder a un editor de script externo que trae HAEduc pero esa historia todavía no te la cuento, al menos no hoy.
    La primera vista de HAEduc es esta:



    Para comunicarnos mejor a lo largo de este material emplearemos términos específicos para hacer referencia a diferentes partes del IDE de HAEduc, por ello vamos a definirlos en esta imagen:




    Mi primer libro en  HAEduc

    Para entender el funcionamiento de HAEduc comencemos por crear nuestro primer libro. Una vía para hacerlo es mediante la opción Nuevo del menú Libro o mediante la combinación Ctrl + N, como muestra la figura siguiente:




    Entonces aparece un diálogo que nos pide el nombre del libro que queremos crear. En mi caso le pondré miprimerlibro.
    Al presionar OK inmediatamente se crea un libro con este nombre que posee una página por defecto llamada nuevapag. Observemos el explorador de libro:



    El explorador de libros no solo nos brinda información de los componentes de nuestro libro, sino que además nos permite acceder en cualquier momento a dichos componentes para modificarlos.
    Inicialmente aparecerá seleccionada la página, vamos a observar ahora el panel de propiedades que actualmente muestra las de la página seleccionada (la única hasta ahora)

    Las páginas solo poseen dos propiedades:




    Nombre:
    El nombre de la página que es su identificación para acceder cuando sea necesario.
    Fondo:
    Aquí puedes seleccionar un fichero de imagen que se visualizará en el fondo de la página actual.

    Es importante mencionar que esta imagen de fondo se ubicará con sus dimensiones originales a partir de la esquina superior izquierda. Otras opciones seguramente serán incluidas en futuras versiones de HAEduc.


    Vamos a seleccionar ahora en el árbol del explorador de libro al libro (miprimerlibro). Observe que todos los paneles actualizaron su información (panel de propiedades y proyector). Así precisamente se comporta el entorno de HAEduc. Los paneles (si están visibles) se van actualizando según la selección actual que haga el usuario.

    Una vez seleccionado el libro observa ahora las propiedades de este en el panel de propiedades, debe verse así:




    Comentemos pues el significado de cada una de ellas:

    Nombre:
    El nombre que identifica a nuestro libro.
    Ancho y Alto:
    Mediante estas propiedades podrás modificar las dimensiones de la aplicación.

    Como ya tenemos nuestro primer proyecto (o libro) en HAEduc lo primero que haremos será proteger nuestro trabajo, así que lo guardaremos en alguna carpeta del disco duro.
    Para hacer esto podemos usar las opciones guardar o guardar como del menú Libro.




    También puedes usar las teclas Ctrl+G o Ctrl+F12 para guardar y guardar como respectivamente.
    Si empleas para esto la barra de herramientas encontrarás los siguientes botones:



    Sea cual sea la opción que elijas aparecerá el siguiente diálogo:





    Mediante este diálogo podrás seleccionar el directorio en el que se almacenará el proyecto actual. Una vez hecho esto exploremos la carpeta seleccionada y veremos los siguientes ficheros:





    El fichero miprimerlibro.hal almacena la información perteneciente al libro, el fichero nuevapag almacena la información de la página nuevapag. Esto nos muestra que HAEduc almacenará la información del libro en más de un fichero, separando las páginas en ficheros indepedientes. También podremos ver el fichero runtime.exe. Este ejecutable es el que hace funcionar el proyecto, y además es un fichero temporal que solo existe en la carpeta de un proyecto cargado en HAEduc. Una vez que se cierre el proyecto actual este fichero desaparecerá.

    Vamos a experimentar con los nombres del libro y la página para obtener algunas conclusiones. De vuelta en el IDE de HAEduc modifiquemos la propiedad nombre del libro en el panel de propiedades (debe seleccionarse previamente el libro en el árbol de explorador de libro).

     
    Nota Importante: Para que las propiedades modificadas en el panel de propiedades se establezcan, debe pulsar la tecla enter (o intro). Además de emplear la tecla mayor del centro del teclado (la otra de la derecha está reservada para otras funciones).



    Una vez que logremos modificar el nombre del libro, guarde el proyecto y vuelva a la carpeta donde está almacenándolo. Observe que ahora el nombre del fichero del libro (.hal) ha cambiado por el nuevo nombre introducido. De forma similar ocurre con las páginas.

    Hasta aquí nuestra primera lección, espero te haya sido de provecho, regularmente haré las próximas entregas de lecciones.
    Nos estamos leyendo.