HTML Help Workshop Utilidad para crear un sistema de ayuda basado en páginas HTML

Primera Entrega

Publicado el 29/Jun/98
Autor: Guillermo 'guille' Som

Vamos a empezar con el tema.
Lo primero será crear una página HTML con distintos links a otras páginas. Esta primera página será la que hará las veces de contenido o punto de partida de nuestro sistema de ayuda.

Para simplificar las cosas, aunque después cambie de idea, usaremos estas páginas del HHW para las pruebas, aunque la página indice.htm no se incluirá, en su lugar se pondrá prueba.htm, (para quitar cualquier enlace a otras páginas, ya que si no el compilador podría ponerse a procesar todas las páginas que estén enlazadas y se podría generar un fichero de ayuda de unos cuantos megas), desde ella accederemos a las demás páginas, es decir que será nuestra página de contenidos.

Manos a la obra.

Crea una carpeta para almacenar los ficheros de prueba. Copia en esa carpeta los siguientes ficheros e imágenes, todas ellas están en el ZIP de esta primera entrega. Una vez hecho esto, tendrás estos ficheros: GIFs: fondo.gif, hhw_ico.gif JPGs: el_guille.jpg, hhw.jpg HTMs: prueba.htm, hhw01.htm Posiblemente algunos más, pero estos son los que en principio necesitaremos.

Para empezar:

Empezaremos cargando el HTML Help Workshop (hhw.exe) Nos mostrará una pantalla vacía, así que dale a la hojita que está en la barra de tareas o selecciona New del menú File. Nos preguntará que es lo que queremos añadir. Selecciona: Project A continuación nos pregunta si queremos convertir un proyecto WinHelp (el formato HLP de "antes") No marques la opción, para continuar creando uno nuevo. Pulsa en Next> Lo siguiente que nos pregunta es el nombre del proyecto, (con opción de buscar uno ya existente) Escribe hhw_test (con esto crearemos nuestro primer proyecto llamado hhw_test) La siguiente pantalla nos pregunta si tenemos ya algunas cosillas creadas y nos da tres opciones con distintas extensiones, en esta ocasión seleccionaremos HTML files (.htm), para añadir las páginas que tenemos creadas. Por tanto, marca esa opción y pulsa en Netxt> Lo siguiente que el Wizard quiere saber es dónde están las páginas que queremos añadir al proyecto. Pulsa en Add... y posiciónate en el directorio en el que hayas copiado estas páginas, selecciona prueba.htm Continuamos añadiendo páginas, en esta ocasión seleccionaremos hhw01.htm, que es esta página. Es un pequeño rollo esto de tener que ir seleccionando el directorio en el que se encuentran los ficheros que queremos añadir, para solucionar ese problema, deberás crear un acceso directo a hhw.exe, en el que la carpeta por defecto sea en la que tenemos nuestras páginas. De esta forma no tendrás que ir de Mis Documentos hasta el directorio en el que tenemos las páginas HTML que queremos usar... (ten en cuenta que estoy siguiendo los pasos que hay que hacer, conforme voy escribiendo esto, así que no te extrañe encontrarte con comentarios de este tipo) Una vez que hemos añadido estas dos páginas, pulsa en Next> para continuar con el Wizard. Ya hemos acabado, al menos por ahora, así que si crees que todo está bien, pulsa en Finish, sino puedes ir hacia atrás para cambiar las opciones y ficheros añadidos. Ahora nos saldrá una serie de opciones en un panel, esa es la información que el Wizard ha recabado de lo que le hemos dicho. A la izquierda verás una serie de botones que van de arriba a abajo. Más adelante veremos algunos de ellos, (entre otros el de creación y personalización de ventanas). Aunque puedes probar por ti mismo, entre ellos está el botón de guardar y compilar. Para curarnos en salud... (este programa aún tiene sus fallos), pulsa en Save project (del menú File) El fichero recién guardado estará en la carpeta en la que estaba el acceso directo. Así que ahora vamos a dejar esto y pasaremos a crear un acceso directo al HHW.EXE que esté en la carpeta de trabajo. Es que para mi esto de tener que ir especificando carpetas de continuo me resulta un poco rollo, así que vamos a salir del programa y vamos a crear un acceso directo a nuestra medida. Pulsa en File/Exit para salir del programa, si no has guardado el proyecto, a pesar de que te mereces un tirón de orejas por no hacerme caso antes, el programa te avisará para que lo puedas guardar. Ahora localiza el acceso directo con el que cargaste el programa. Cópialo, junto con el fichero hhw_test.hhp, con el menú Editar/Copiar de la carpeta de Windows. Posiciónate en la carpeta en la que tienes los ficheros de esta prueba y pégalos. Pulsa con el botón derecho y selecciona propiedades. En el campo que hay debajo del acceso directo es dónde debes especificar la carpeta de inicio. Por tanto, escribe el path en el que está el acceso directo. Ahora vuelve a ejecutar el hhw.exe o mejor aún haz doble click en hhw_test.hhp, de esta forma la carpeta por defecto será en la que está el proyecto.

Continuamos:

Lo siguiente que vamos a hacer es compilar el proyecto para crear el fichero de ayuda en este nuevo formato. En el menú File, selecciona Compile... (también puedes darle al botón de la barra de herramientas, el tercero) Te mostrará un cuadro de diálogo con el nombre de nuestro proyecto. Debajo hay una opción (que no estará marcada) que sirve para mostrar el fichero una vez compilado. Marca esta opción y pulsa en Compile. Una vez compilado, se mostrará el fichero de ayuda recién creado. Si no pulsaste esa opción, el fichero recién creado estará en el directorio de trabajo (es decir en el que está el fichero del proyecto hhp) el nombre será el mismo y la extensión .chm. Por tanto haz doble click y te mostrará lo que acabamos de hacer. Como podrás comprobar no hay nada de especial, salvo que el sistema ahora usa el programa hh.exe para mostrar la ayuda, bueno, el hh.exe si tienes instalado el sistema de ayuda incluido con el Win98. Si no lo tienes, el propio hhw.exe se encarga de mostrarte el fichero de ayuda. Dentro de un momento crearemos una aplicación en Visual Basic que use este fichero de ayuda.

¿Que hay de nuevo viejo?

Pero este look no es nada nuevo, es casi igual que una página HTML, aunque sin tener que cargarla en un Explorador para mostrarla. Vamos a añadir una sección de contenidos al estilo del que se muestra en la ayuda de Windows 95 Vamos a ello.

Crear Marcadores (Bookmarks) en una página HTML

Cierra el fichero compilado y vamos a crear un sistema de opciones con los links que nos interesan. Para tu información, las líneas en negrita que separan esta lista de "pasos", son marcadores (bookmarks) creados para usar como links en este librito que vamos a crear. Estos marcadores se crean fácilmente con el FrontPage Express (que es el editor HTML que estoy usando y que se incluye con el IE4), me imagino que con otros editores será igualmente fácil hacerlo. En el FP-Express, selecciona la línea que quieres usar de marcador y en el menú Edición, selecciona Marcador. Te mostrará un cuadro con una serie de opciones, entre ellas la de añadir. En la caja de texto estará el texto seleccionado, yo suelo quitarle los espacios, ya que algunas veces esto de poner espacios no funciona muy bien. Repite la misma operación con cada marcador que quieras tener en la página.

Crear una tabla de contenidos

Ahora ya estamos preparados para crear nuestra tabla de contenidos. Pulsa en la solapa que pone Contents Te mostrará un mensaje de alerta indicándote que si quieres crear una nueva o usar una existente. Como no tenemos ninguna creada, dejamos la opción marcada, para crear una nueva Tabla de contenidos. Selecciona la localización del fichero y dale el siguiente nombre: hhw_contenido.hhc Ahora te mostrará la solapa Contents seleccionada y los botones de la barra de herramientas habrán cambiado. Selecciona el que tiene forma de una carpeta. (Puede que te lo muestre en forma de libro cerrado) Te mostrará un cuadro de diálogo, escribe el siguiente título: Ejemplo de creación de ayuda con Hhw Pulsa en OK (Aceptar) Verás que en el panel se muestra una carpeta abierta con el título que acabamos de darle. Para añadir páginas u hojas a esa carpeta, pulsa en el botón con el icono de una hoja Te preguntará si quieres añadirla al principio de la tabla de contenidos, dile que NO. En el cuadro Entry title, escribe: Contenido del ejemplo de ayuda HTML Pulsa en el botón Add... Te mostrará otro cuadro de diálogo para que especifiques el proyecto al que hará referencia. Nosotros vamos a especificar el que estamos creando, pero fíjate que puedes usar otros ficheros de ayuda ya creados. Selecciona hhw_test.hpp En la lista que hay debajo del combo de selección, te habrá mostrado las dos páginas que tenemos en el proyecto, selecciona la del índice, en el panel inferior verás prueba.htm Pulsa en Aceptar (OK) Vamos a añadir una nueva hoja, para que linke con esta página. Pulsa de nuevo en el icono de la hoja, escribe en el título: Primera entrega del ejemplo de ayuda HTML Pulsa en Add... y selecciona la página hhw01.htm, pulsa en Aceptar. El panel nos indicará que tenemos una carpeta abierta y dos hojas, cada una con sus respectivos títulos. Vamos a guardar esta tabla de contenido. Pulsa en el botón con el dibujo del diquete, y ya está. Compila de nuevo el proyecto, usando la opción del menú File o por el botón de la barra de herramientas que hay arriba del todo. Te avisará de que tienes que guardar el proyecto, dile que SI. Si te muestra la tabla de contenidos, pulsa aquí para saltar la siguiente sección.

Usar la tabla de contenidos con el fichero de ayuda

Para que el fichero de ayuda use la tabla de contenidos, pulsa en el botón de opciones del proyecto, (el que hay en la barra de herramientas del panel izquierdo, cuando la solapa Project está seleccionada, (si dejas el ratón encima te indicará que es para "Change project options") Te mostrará un cuadro de diálogo con varias solapas. Pulsa en la solapa Files Los dos primeros cuadros dejalos como están (en log file no habrá nada escrito, ese es el fichero de errores) En el tercero "Contents file", pulsa en Browse... para seleccionar nuestra tabla de contenidos: hhw_contenido.hhc NO SELECCIONES la opción que hay debajo: Automatically create... Pulsa en OK (Aceptar) (es que estoy usando el win98 en inglés y no sé si pondrá OK o Aceptar) Se supone que ahora debe funcionar bien. Guarda el proyecto y vuelve a compilarlo. Si aún así te da algún error al compilar o no muestra el contenido, es que hay algo que no estás haciendo bien, así que cierra el HHW y vuelve a cargarlo de nuevo. Revisa los pasos que hemos dado y "reza" porque todo te funcione bien... Si sigue sin funcionar, pásate por la sección Ayuda y crea una ayuda normal... je, je...

Configurar la apariencia de la ayuda

Para cambiar la apariencia de la tabla de contenido y el título del fichero de ayuda, se hace mediante las distintas opciones que nos da el botón "Properties" que se muestra en cada solapa.   Para añadir un título al fichero de ayuda: Pulsa en el botón de configuración (el primero que hay), te mostrará un cuadro de diálogo con varias solapas, la solapa General será la que esté seleccionada, si no es así, pulsa en ella. En la casilla que pone Title, escribe: Ejemplo de creación de ayuda con Hhw De la lista que hay debajo, (default file), selecciona prueba.htm, de esta forma, esa será la página que se muestre por defecto. Default window lo dejamos como está, después si quieres puedes crear una ventana por defecto para que se use de forma genérica al mostrar las páginas. Pulsa en OK (Aceptar)   Para cambiar los iconos de la tabla de contenido: Pulsa en la solapa Contents Pulsa en el botón de configuración, sí, ese que tiene una mano señalando. Verás que hay un par de casillas de verificación, si la primera está seleccionada, (use folders instead of books), querrá decir que mostrará carpetas en lugar de libros. La siguiente casilla es para especificar otros iconos, los cuales estarán en un fichero, que será el que habrá que indicarle, pero no vamos a hacerlo. Si has quitado la casilla esa de verificación, te mostrará un libro en lugar de una carpeta y en lugar de horas con rayitas, será hojas con una interrogación (al viejo estilo de la ayuda de Win95) Cuando quieras terminar, pulsa en OK. (o Aceptar, ya no lo repito más)

Cambiar los iconos de la tabla de contenidos

Imagínate que quieres resaltar alguna de las páginas o libros. Por ejemplo para el caso de quieres indicar que hay algo nuevo o cualquier otra chorrada que se te ocurra. Selecciona el icono que quieres cambiar de la lista con los libros y hojas que hemos añadido. Pulsa en el botón que tiene un lápiz Te mostrará un cuadro de diálogo, pulsa en la solapa Advanced En esta solapa tienes varias cosillas, pero lo que ahora vamos a ver está debajo de las cajas de texto. Si quieres que el icono actual se marque como nuevo, selecciona la primera opción, verás que le sale una estrellita roja. Si tu intención es cambiar esa sección de una página a un libro, verifica la siguiente casilla. Pero si lo prefieres, puedes indicar el icono que se mostrará. Para ello, dónde pone Image Index, (que estará en auto), selecciona el icono que quieras. En los que trae incorporado hay un total de 42. Una vez que hayas cambiado el icono, pulsa OK o Cancel, según quieras aceptar los cambios o no. Para ver los cambios, guarda el proyecto y compilalo.

Cambiar los estilos de la tabla de contenidos

También puedes cambiar los estilos de la forma en que se muestran los iconos. Por ejemplo, puedes hacer que cuando el ratón pase por encima del título de una de las hojas o libros/carpetas se resalte como un enlace (link) de una página HTML. Para ello, pulsa en el botón de propiedades de la solapa Contents y selecciona la solapa Styles. Te mostrará una lista con los estilos predeterminados. Pulsa en Add... y te mostrará un cuadro de diálogo con los estilos disponibles. Selecciona "Automatically track selection" (que será la que te muestre por defecto) Si quieres probar con otros estilos, juega un poco y a ver si sacas algo en claro...

Hasta aquí hemos llegado por hoy.

Bueno, creo que ya está bien por hoy.
En la siguiente ocasión veremos cómo cambiar el look de la tabla de contenidos y cómo aprovechar los "marcadores" que hemos usado.

Hasta la próxima.

Nos vemos.
Guillermo

Si quieres bajarte los ficheros que usaremos para probar, pulsa en este link (hhw_test.zip 31.5 KB)