Creando ayuda para los programas desarrollados

CREANDO AYUDAS HTML (ARCHIVOS CHM)

Mediante este tutorial se crear archivos de ayuda CHM de tipo HTML, para esto se utilizar
el programa HTML Help WorkShop de Microsoft para crear los archivos CHM compilados y
se usar dreamweaver y css para crear los archivos HTML.
Nota: Los archivos a crear y los grficos utilizados deber estar en la misma carpeta.
Paso 1: debemos tener en consideracin lo siguiente: Segn el diagrama vamos a utilizar
el css y html para maquetar y estructurar las pginas y, luego utilizar el programa HTML
Help WorkShop. Estructura siguientes
CSS

Para maquetar
HTML Word
SHOP

XHTML

Para Compilar

Estructura de
la pgina

Paso 2. Despus de crear las pginas, es momento de utilizar el programa siguiente:

1.
Utilizando el programa HTML Help WorkShop
Ingrese al programa HTML Help WorkShop, haga clic botn Inicio / Programas /
HTML Help WorkShop / HTML Help WorkShop:

2.

Proceda a crear el archivo de proyecto (*.hhp) elija el men File / New y seleccione
la opcin Project y clic en el botn Ok

Prof. Vargas Bonilla Robert.

3.

En la siguiente figura nos da la Bienvenida y, nos indica si desea convertir una archivo
de ayuda HLP (antiguo) a CHM (nuevo), para este caso NO active la casilla porque no
deseamos convertir ningn archivo HLP a CHM, haga clic en el botn Siguiente para
continuar:

4.

En la siguiente figura nos permite seleccionar el destino del archivo HHP (archivo de
proyecto) a crear, haga clic en el botn BROWSE

5.

Seleccione la carpeta donde desea guardar el archivo (seleccione la carpeta donde

guard los archivos HTML creados) y escriba el nombre de Ayuda y luego haga clic en
Abrir.

Prof. Vargas Bonilla Robert.

Y a continuacin clic en Siguiente.

6.

Ahora tenemos la posibilidad de incluir archivos de contenido (*.HHC), archivos de

ndice (*.HHK) y archivos html (*.HTM) para este caso Marcamos HTML Files
(.htm) y haga clic en el botn Siguiente y luego Finalizar.

En este cuadro, agregar los

archivos utilizados en el diseo
(.html, .jpg, .css, .gif, etc)
Para agregar hacer clic en ADD
luego buscar la carpeta de los
archivos para agregar.
Luego hacemos clic en siguiente.

Prof. Vargas Bonilla Robert.

7.

Al finalizar se mostrar la siguiente pantalla:

Ventana del programa HTML Help WorkShop con el proyecto Ayuda creado.
Paso 3: Agregando ventana de definiciones:
1.

Haga clic en el botn

Add/Modif. Windows definitions. Luego ingrese el nombre
para nuestra ventana: Ayuda

2.

Luego en la ficha General, ingrese el texto para la barra de ttulo (Title bar text):
Ayuda del Sistema.
Luego deber hacer clic en Aceptar

Prof. Vargas Bonilla Robert.

3.

As tambin en la ficha buttons, marque las casillas de verificacin necesarias,

ver figura de abajo

Luego de efectuado lo anterior haga clic en la ficha Navigator Pane y marque las
casillas de verificacin como se ve en la figura y luego Aceptar:

4.

En el caso que apareciera la figura de abajo, deber asignarle en Windows Type:

Ayuda, luego haga clic en Siguiente

Prof. Vargas Bonilla Robert.

Ahora en sta ventana marque las

dos casillas de verificacin y luego
haga clic en siguiente y por
ltimo clic en F na za

Paso 4: Creando el archivo tabla contenido

Haga clic en la ficha Contents, seleccione Create a new contents file:

Gurdelo en la carpeta
donde guard los archivos
HTML, etc con el nombre de
Con en do

Prof. Vargas Bonilla Robert.

Paso 5: Cambiando las propiedades de la tabla contenido:

Haga clic en el botn
Contents properties y desactive la casilla de verificacin Use
folders instead of books (Use flder en lugar de libros) y luego clic en Aceptar

Paso 6: Insertando Pginas y encabezados en la tabla contenido:

Insertando Pginas: haga clic en

el cuadro de texto Entry title

para insertar una pgina y escriba Acerca de en

Hacer clic en el Botn ADD

Prof. Vargas Bonilla Robert.

Si no ha agregado los archivos, Hacer

clic en el botn Browse y buscar el
Archivo.

Caso contrario seleccionar el archivo

Index.html, luego hacer clic en el botn
OK, en la prxima ventana le damos clic
en el botn aceptar

En la ficha contents haga clic en el botn

lnsert a heading, y escriba Contenido
en el cuadro de texto Entry title, luego haga clic botn Aceptar:

Luego clic en el botn aceptar

Se habr creado una pgina

y encabezado como se ve
en la f gura.

Prof. Vargas Bonilla Robert.

Paso 7: Insertando pginas en la tabla de contenidos:

Haga clic en el botn
lnsert a page, se mostrara el siguiente mensaje, (Usted
quiere insertar esta entrada al principio de la Tabla de contenido), elija No

Ahora escriba Ingreso en el cuadro de

texto Entry title, luego haga clic en el
botn Add (para seleccionar el archivo
que vincula a esta pg na

Seleccione
el
arch vo
que
corresponda (ingreso.htm) y luego
haga c c en OK, y luego en Aceptar

Prof. Vargas Bonilla Robert.

El resultado de la Tabla de
contenido ser el que se ve
en la figura super or

Observacin:
Ahora se deber agregar un encabezado llamado Actualizacin y agregarle tres pginas
llamadas: Clientes (vinculado al archivo ActClientes.htm), Empleados (archivo
ActEmpleados.htm) y Artculos (archivo ActArtculos.htm), utilice los botones Move
Selecction para Avanzar o Retroceder un Nivel ( ,
, ,
). Al finalizar la misma
deber quedar como se ve a continuacin:

Para terminar con la tabla de contenido proceda a indicar el archivo correspondiente al

proyecto. Nos vamos a la Ficha Project, Para ello haga clic en el botn
Add/Modif.
Windows definitions. Luego haga clic en la ficha Files y seleccione en TOC: Contenido.hhc
Haga clic en el botn
realizados.
Prof. Vargas Bonilla Robert.

Save

All file del Men File, Esto para guardar los cambios

Configurar esta ventana

como se muestra en
grfico

Paso 8: Generando el archivo CHM

Compile el proyecto, haga clic en el botn
compilar

Compile HTML files, luego clic en botn

Paso 9: Visualizando el archivo CHM compilado

Haga clic en el botn

View complied file

Hacer clic en el Botn Browse,

para buscar el archivo,
compilado, luego clic en el botn
View

Ventana para visualizar el archivo CHM compilado

Prof. Vargas Bonilla Robert.

Resultado de la ayuda HTML creada

Cierre la ventana del archivo de ayuda creada
Paso 10: Creando el archivo de ndice.
Haga clic en la ficha Index, seleccione Create a new index file

Prof. Vargas Bonilla Robert.

Gurdelo en la carpeta
donde guardo los archivos
HTML, etc con el nombre
de Ind ce

Paso 11: Creando las Palabras claves

Haga clic en el botn
Insert a keyword y escriba Acerca de en el cuadro de texto
Keyword, luego haga clic en el botn Add, para relacionar la palabra clave con el archivo
que contiene dicha informacin (archivo index.html):

Vuelva hacer clic en el botn

Insert a keyword, y se mostrar el siguiente mensaje,
(Usted quiere insertar esta entrada al principio del ndice), elija No

Ahora escriba Ingreso en el cuadro de texto Keyword y relacione esta palabra con
el archivo Ingreso.html

Prof. Vargas Bonilla Robert.

Inserte otra Palabra clave (keyword) llamada Men para el archivo Menu.html y otra
reporte para el archivo reporte.html

Ahora nos vamos a la ficha Project, Para terminar con las palabras claves proceda a indicar el
archivo correspondiente al proyecto para ello haga clic en
Add/Modif. Windows
definitions. Luego haga clic en la ficha Files y seleccione en Index : Indice.hhk

Prof. Vargas Bonilla Robert.

Segn el diseo de la ayuda deber agregar ms palabras claves para su sistema de ayuda.
Guarde su proyecto y luego proceda a compilar el mismo, observar que se habr agregado
la ficha ndice a su ayuda.
EJECUTAR DESDE VISUAL BASIC .NET

A)

Para ello deber abrir su proyecto en Visual Basic .NET

Asignando ayuda al Formulario principal
Agregar el siguiente cdigo para ejecutar
System.Diagnostics.Process.Start("D:\Ayuda.chm")

B)

Asociando la palabra clave de la ayuda con un control

Abra el formulario ingreso
Agregue un componente HelpProvider al formulario.
Luego proceda a establecer las siguientes propiedades a c/u de los objetos
Objeto

Form

HelpProvider

Propiedad
MaximizeBox
MinimizeBox
HelpButton
HelpKeyword
HelpNavigator
HelpString
HelpNamespace

Valor Asignado
False
False
True
Ingreso
KeywordIndex
Ingreso
D:\Ayuda.chm
ruta )

(usted deber cambiar la

Ejecute su aplicacin y cada vez que muestre el formulario de ingreso y

presione F1 se mostrar la ayuda del sistema, pero ir directamente el tema
correspondiente.

Prof. Vargas Bonilla Robert.