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.