El desarrollo actual de aplicaciones profesionales requiere que sean acompañadas por sistemas de ayuda que permitan facilidad y claridad de uso por parte del usuario, logrando una curva de aprendizaje eficaz.
Los archivos de ayuda HTML compilados, con extensión chm y sucesores de aquellos con extension hlp, contribuyen a construir estos sistemas de ayuda, con los que se puede integrar multimedia y todas las prestaciones que se pueden obtener al usar archivos HTML.
Para producir esta clase de archivos usaremos la aplicación Microsoft HTML Help Workshop que está disponible en forma gratuita en el siguiente vínculo:
www.microsoft.com/downloads/details.aspx?FamilyID=00535334-c8a6-452f-9aa0-d597d16580cc&DisplayLang=en El archivo de instalación es htmlhelp.exe. Una vez descargado el archivo y realizada su instalación, se crearán accesos directos a dos aplicaciones: “HTML Help Workshop” y “HTML Help Image Editor”. Esta última es una aplicación para realizar captura y procesamiento básicos de imágenes, como fue el caso de las capturas de pantalla para este artículo.
Abre la aplicación HTML Help Workshop y elije File > New en el menú principal. En el cuadro de diálogo selecciona “Project” para iniciar el asistente para nuevos proyectos.
En el primer paso deja sin elegir “Convert WinHelp Project” ya que deseamos construir un proyecto desde cero. Esta opción solo se marca si vas a convertir un archivo de ayuda en formato HLP a este formato CHM.
En el segundo paso, se elige la dirección y el nombre del proyecto. Crea una carpeta para contener todos los archivos del proyecto, elige esa carpeta y escribe como nombre del proyecto Ayuda.hhp
En el tercer paso, se indican los archivos de tabla de contenido (.hhc), de índice (.hhk) y html (.htm) para agregarlos al proyecto. Como aún no existen, deja sin seleccionar estas tres opciones.
En el cuarto paso se llega a la finalización del asistente.
Al terminar el asistente, aparecerá una pantalla donde se resumen las características del proyecto en forma de tres pestañas “Project”, “Contents” e “Index”. En la pestaña Project en la sección [OPTIONS] se observa que el archivo de ayuda se llamará Ayuda.chm.
[titulo]Tabla de Contenido[/titulo]
Para crear la tabla de contenido (los temas y páginas) de nuestro proyecto, oprime la pestaña Contents.
Es aquí donde se especifica qué archivo se usará como tabla de contenido. Como en este proyecto todavía no existe, elije la opción “Create a new contents file”, llama a este archivo “Ayuda.hhc” y guárdalo en la misma carpeta del proyecto.
[titulo]Indice[/titulo]
Para crear el índice (la busqueda de temas) de nuestro proyecto, oprime la pestaña Index.
Es aquí donde se especifica qué archivo se usará como índice. Como en este proyecto todavía no existe, elije la opción “Create a new index file”, llama a este archivo “Ayuda.hhk” y guárdalo en la misma carpeta del proyecto.
De regreso a la pestaña Project, notarás que ya fueron agregados los archivos Ayuda.hhc y Ayuda.hhk. Guarda todo tu proyecto oprimiendo en el menu principal File > Save Project.
[titulo]Agregado de Entradas en Tabla de Contenido[/titulo]
Para empezar a construir nuestro archivo de ayuda vamos a escribir un archivo htm para que sea desplegado en el archivo Ayuda.chm. En el menu principal, elije File > New y selecciona HTML File en el cuadro de diálogo. Se crea un archivo htm básico y en un cuadro de diálogo se te pide el título de este archivo htm. Escribe “Introducción” como título y acepta este cambio. Entre las etiquetas y escribe “Introducción”. El archivo htm quedará como sigue:
Introducción
Introducción
|
Guarda este archivo htm (File > Save File) en la misma carpeta de tu proyecto con el nombre Introduccion.htm. Cierra este archivo.
Ahora oprime la pestaña Contents y elije el tercer botón desde arriba hacia abajo con la imagen de una hoja de papel con interrogación y que indica “Insert a page” en su texto para abrir la ventana “Table of Contents Entry”.
En el cuadro de texto "Entry title" escribe Introducción. Cada entrada en la tabla de contenido está asociada con un archivo htm. Esta entrada, Introducción, tendrá asociado el archivo Introduccion.htm. Para hacer esto, oprime el botón Add... y se desplegará la ventana “Path or URL”.
En esta ventana oprimiendo el botón Browse, busca y selecciona el archivo Introduccion.htm. Acepta esta asignación y tendrás una ventana como esta:
Acepta los cambios y verás que la entrada Introducción ya fue integrada a tu proyecto. Este archivo Introduccion.htm, además, tiene que ser agregado al proyecto. Para esto, en la pestaña Project, selecciona el segundo botón desde arriba hacia abajo que indica “Add/Remove topic files” y en la ventana “Topic Files” oprime el botón Add... para seleccionar el archivo Introduccion.htm. Después de aceptar los cambios, verás una nueva sección llamada [FILES] donde se lista el archivo Introduccion.htm.
[titulo]Compilación inicial[/titulo]
Antes de guardar y compilar por primera vez tu proyecto, oprime la pestaña Project y selecciona el primer botón de arriba hacia abajo que indica “Change Project Options” para abrir la ventana “Options”.
En la pestaña “General” de la ventana “Options” escribe los siguientes datos:
- Para tener titulo del archivo de Ayuda.chm, en el cuadro de texto Title escribe “Mi primer archivo CHM”.
- El primer archivo que se desplegará al abrir el archivo de ayuda es Introduccion.htm. Esto indícalo en la lista desplegable Default file.
- Selecciona la fuente y su tamaño con los que se desplegará la tabla de contenido oprimiendo el botón Change.
- Realiza los cambios necesarios para el idioma de acuerdo a tu Nación.
Guarda ahora el proyecto completo y selecciona File > Compile. En la ventana “Create a compiled file” de ser necesario oprime el botón Browse... para indicar la carpeta y el nombre del archivo Ayuda.hhp
Oprime el botón Compile. Si no existen errores, se despliega el informe de la compilación y se creará el archivo Ayuda.chm que podrás abrir al explorar la carpeta de tu proyecto.
Vamos a aumentar nuestro proyecto agregando un tema (heading) con su respectiva página. Crea dos nuevos archivos htm con las siguientes características, guárdalos en la misma carpeta donde estamos trabajando y agrégalos a tu proyecto.
Nombre de archivo |
Título |
Texto en cuerpo (BODY) |
Tema1.htm |
Tema 1 |
Tema 1 |
Tema1Pagina1.htm |
Tema 1 – Página 1 |
Página 1 de Tema 1 |
Ahora en la pestaña Contents selecciona la entrada Introducción y oprime el segundo botón de arriba hacia abajo con el icono de carpeta y cuyo texto es “Insert a heading”. Responde No a la pregunta "Do you want to insert this entry at the beginning of the table of contents?" ya que deseamos que se coloque a continuacion de la entrada Introducción y se abrirá la ventana “Table of Contents Entry” vista anteriormente. Escribe Tema 1 en el cuadro “Entry title” y asóciale el archivo Tema1.htm. Selecciona ahora el botón “Insert a page” y en la ventana “Table of Contents Entry” escribe “Página 1” en el cuadro “Entry title” y asóciale el archivo Tema1Pagina1.htm.
De este modo puedes seguir agregando los temas y las páginas que tu archivo de ayuda necesite y haciendo uso de los botones con las flechas "Move selection up " y "Move selection down" (para organizar el orden de los temas y sus páginas); y "Move selection right" y "Move selection left" (para organizar la jerarquia de los temas y sus páginas con respecto a los demás).
[titulo]Personalización de Tabla de Contenido[/titulo]
Es posible hacer distinguir cada entrada con una imagen diferente para denotar a primera vista su contenido. Vamos a hacer que el icono de la entrada Introducción tenga una hoja de papel con la letra i para señalar que contiene información inicial. Selecciona esta entrada y elije el cuarto botón de arriba hacia abajo con la imagen de un lapiz y cuyo texto indica “Delete selection” para desplegar la ventana “Table of Contents Entry” y a continuación oprime la pestaña “Advanced”. Explora las opciones del control Image index para ver todas las imagenes que se pueden desplegar y selecciona la imagen 17. Haz lo mismo para la entrada “Página 1” cambiando su imagen con la 11. Cabe hacer notar que en esta misma ventana puedes convertir una pagina en encabezado y viceversa con la opción "Change entry to a heading" o "Change entry to a page" según sea el caso.
Para cambiar el comportamiento y la apariencia general de la tabla de contenido oprime el primer botón de arriba hacia abajo cuyo texto indica “Contents properties” para desplegar la ventana “Table of Contents Properties”. Veremos las pestañas “General” y “Styles”.
Para la pestaña “General”, quita la marca en la opción “Use folders instead of books” para desplegar la imagen de los temas como libros en lugar de carpetas. Aquí tambien puedes elegir una imagen personalizada para los temas y seleccionar el estilo y tamaño de fuente para ellos.
Para la pestaña “Styles”, en el listado “Window Styles” se encuentran los comportamientos visuales que hasta el momento tiene tu tabla de contenido. Aquí puedes agregar otros mas como "Only expand a single heading" con lo que al expander un tema, los demas se contraen; o “Draw lines between items” que hará que se dibujen líneas de jerarquía, como un árbol, entre los temas y sus páginas. También puedes elegir los colores de primer y segundo plano. Realiza los cambios que desees y acepta los cambios en la ventana.
La ventana de tu proyecto se verá como esta:
Guarda y compila tu proyecto para ver los cambios.
[titulo]Agregado de Entradas en el Indice[/titulo]
Para alimentar las entradas del índice, se procede de manera similar al proceso de tabla de contenido. Oprime la pestaña "Index" y oprime el segundo botón de arriba hacia abajo con la imagen de una llave y cuyo texto indica “Insert a keyword” para desplegar la ventana “Index Entry”.
En el cuadro de texto "Keyword" escribe “Tema 1” y seguidamente oprime el botón Add... para elegir el o los archivos htm donde se mencione la palabra Tema 1. Para este caso habrá dos archivos que tienen esa referencia: Tema1.htm y Tema1Pagina1.htm.
Agrega ahora otra entrada al índice con la palabra clave “Pagina 1”. Al hacerlo se te preguntará si deseas agregar esta entrada al inicio del índice (Do you want to insert this entry at the beginning of the index?). Responderemos que Si y en esta nueva entrada la palabra clave será Página 1 asociándola con el archivo Tema1Pagina1.htm.
Guarda el proyecto y compílalo para ver los cambios. Al oprimir en el Indice en la palabra clave “Pagina 1” se desplegará el archivo asociado, mientras que al oprimir en la palabra “Tema 1” se mostrará una ventana donde se puede elegir entre dos ubicaciones dentro del archivo de ayuda porque a esta palabra clave le referenciamos precisamente dos archivos htm.
De este modo se le asignan al indice todas las palabras claves que sean convenientes, ordenándolas y jerárquizandolas para incluirlos en tus proyectos y de este modo crear archivos de ayuda mas profesionales con mayores recursos y palabras claves.
De la misma forma que para la tabla de contenido, con el primer botón de arriba hacia abajo con el texto "Index properties" se puede especificar la fuente y su tamaño con los que se desplegarán los temas del índice.
[titulo]Notas[/titulo]
Es muy conveniente utilizar editores mas poderosos para HTML, sean WYSIWYG o no, para crear los archivos html necesarios con sus imágenes, sonidos, cursores, hojas de estilo en cascada, guiones JavaScript o VBScript, etc.
La descompilación (en caso de que exista esta palabra), File > Decompile, de los archivos chm con esta aplicación extrae todos los archivos del proyecto, el archivo .hhc de tabla de contenido y el archivo .hhk, pero no el archivo de proyecto .hhp, por lo que es muy importante que respaldes todos tus archivos para poder actualizar tus archivos de ayuda.
Para finalizar, éste es el código que se incorpora en Visual Basic al procedimiento del evento Click de un control de menú llamado Ayuda, para desplegar tu archivo de ayuda:
Private Sub Ayuda_Click()
Dim strRutaArchivo As String
' Variable de cadena para designar
' la dirección del archivo de ayuda
strRutaArchivo = "C:Ayuda.chm"
Shell "hh.exe " & strRutaArchivo, vbMaximizedFocus
End Sub |
Podrás hallar los archivos Ayuda.chm, Ayuda.hhc, Ayuda.hhk, Ayuda.hhp, Introduccion.htm, Tema1.htm, Tema1Pagina1.htm y el articulo en formato pdf en
www.mygnet.com/codigos/editoresweb/22Ojala que este artículo te sea útil. Saludos.
Etapas Primero pensé que un maestro debía tener razón en todo. Despues percibí que mi maestro estaba equivocado en muchas cosas. Después me di cuenta de lo negativo y de lo positivo. Lo negativo era permanecer en cualquiera de las dos primeras etapas. Lo positivo era transmitir esto a todos.
26.- Albert Ruiz
