UNJBG

¡¡LÍDER EN CAPACITACIÓN INFORMÁTICA!!

ITEL
Garantía del proceso Enseñanza-Aprendizaje con las últimas
CARRERA
tecnologías, con computadoras de última generación,
Técnico Analista CURSO
impresoras, escáner, multimedia, redes, Internet, material
Programador de Programación Visual .NET II
didáctico paso a paso, biblioteca y aula virtual con docentes del
Sistemas
mas alto nivel.

GUÍA DE LABORATORIO N° 07

OBJETIVOS:
 Creación de un proyecto de ayuda.
 Utilización de HTML Help Workshop

I. CREANDO AYUDAS HTML (ARCHIVOS CHM)

En este ejemplo usted creará archivos de ayuda CHM de tipo HTML, para esto utilizara el programa HTML Help
WorkShop de Microsoft para crear los archivos CHM compilados y usará Microsoft Word o Microsoft Front Page
para crear los archivos HTML, luego lo podrá utilizar en una aplicación EXE estándar de Visual Basic.

NOTA: Los archivos a crear y los gráficos utilizados deber estar en la misma carpeta.

Procedimiento:
Creando los archivos HTML

1.1. Ingrese a Microsoft Word para crear los

archivos HTML cuyo contenido será la
información de la ayuda a crear, los
hipervínculos, etc.
1.2. En nuevo documento nuevo ingrese la
siguiente información:

1.3. Guarde el documento como página web, elija

el menú Archivo / Guardar como página
web y asigne el nombre de Principal (se
habrá creado un archivo llamado
principal.htm)

1.4. Crear otra página web cuyo nombre será

ActClientes, guárdelo en la misma carpeta
donde guardo la página web Principal y
agregue la siguiente información===>

1.5. Crear dos (02) páginas web adicionales, la

primera que contenga información relevante
a la actualización de Empleados y la 2da.
Pagina Web con información sobre
actualización de artículos, los mismos que
serán guardados con el nombre
ActEmpleados y ActArticulos
respectivamente.

1.6. Guarde los cambios de todas las páginas

creadas y cierre el programa de Microsoft
Word.

Bimestre Acadêmico : 2009- Docente : José Luis Ponce Segura.

Ciclo : V (1 de 12) Fecha : Tacna, Enero del 2009
Universidad Nacional Jorge Basadre Grohmann - ITEL
Carrera: Técnico Analista Programador de Sistemas. Curso: Programación Visual .Net II

1. Utilizando el programa HTML Help WorkShop

Ingrese al programa HTML Help WorkShop, haga clic botón Inicio / Programas / HTML Help
WorkShop / HTML Help WorkShop:

Proceda a crear el archivo de proyecto (*.hhp) elija el

menú File / New y seleccione la opción Project y clic en
el botón Ok: ===>

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 ningún archivo HLP a
CHM, haga clic en el botón Siguiente para
continuar: ===>

Docente: José Luis Ponce Segura Prac07 (2 de 12) e-mail: jlponcesg@hotmail.com

Cel. : 952636911 www.redtacna.net
Universidad Nacional Jorge Basadre Grohmann - ITEL
Carrera: Técnico Analista Programador de Sistemas. Curso: Programación Visual .Net II

En la siguiente figura nos permite seleccionar

el destino del archivo HHP (archivo de
proyecto) a crear, haga clic en el botón
Examinar y seleccione la carpeta donde
desea guardar el archivo (seleccione la
carpeta donde guardo los archivos HTML
creados) y escriba el nombre de
AyudaSistema y luego haga clic en Abrir y a
continuación clic en Siguiente.

Ahora tenemos la posibilidad de incluir

archivos de contenido (*.HHC), archivos
de índice (*.HHK) y archivos html (*.HTM)
para este caso NO active ninguna casilla y
haga clic en el botón Siguiente y luego
Finalizar

Al finalizar se mostrará la siguiente pantalla:

Ventana del programa HTML Help WorkShop con el proyecto AyudaSistema creado.

Docente: José Luis Ponce Segura Prac07 (3 de 12) e-mail: jlponcesg@hotmail.com

Cel. : 952636911 www.redtacna.net
Universidad Nacional Jorge Basadre Grohmann - ITEL
Carrera: Técnico Analista Programador de Sistemas. Curso: Programación Visual .Net II

2. Agregando Ventana de Definiciones:

Haga clic en el botón Add/Modif. Windows

definitions. Luego ingrese el nombre para nuestra
ventana: AyudaSistema

Luego en la ficha General, ingrese el texto para

la barra de título (Title bar text): Ayuda del
Sistema. ===>
Luego deberá hacer clic en Aceptar ==>

Así también en la ficha buttons, marque las

casillas de verificación necesarias, ver figura de abajo.

Luego de efectuado lo anterior haga clic en la

ficha Navigator Pane y marque las casillas de
verificación como se ve en la figura superior.

Docente: José Luis Ponce Segura Prac07 (4 de 12) e-mail: jlponcesg@hotmail.com

Cel. : 952636911 www.redtacna.net
Universidad Nacional Jorge Basadre Grohmann - ITEL
Carrera: Técnico Analista Programador de Sistemas. Curso: Programación Visual .Net II

En el caso que apareciera la figura de abajo,

deberá asignarle en Windows Type: AyudaSistema,
luego haga clic en Siguiente

Ahora en ésta ventana marque las dos casillas de

verificación y luego haga clic en siguiente y por
último clic en Finalizar.

3. Creando el archivo Tabla de contenido.

Haga clic en la ficha Contents, seleccione Create a new

contents file: ===>

Guárdelo en la carpeta donde guardo los archivos HTML, etc.

con el nombre de Contenido

4. Cambiando las propiedades de la Tabla de contenido.

Haga clic en el botón Contents properties y desactive la casilla de verificación Use folders instead
of books (Use fólder en lugar de libros)

Docente: José Luis Ponce Segura Prac07 (5 de 12) e-mail: jlponcesg@hotmail.com

Cel. : 952636911 www.redtacna.net
Universidad Nacional Jorge Basadre Grohmann - ITEL
Carrera: Técnico Analista Programador de Sistemas. Curso: Programación Visual .Net II

5. Insertando encabezados en la Tabla de contenido.

En la ficha contents haga clic en el botón lnsert

a heading, y escriba Presentación en el cuadro de texto
Entry title, luego haga clic botón Aceptar:

Se habrá creado un encabezado como se ve

en la figura.

6. Insertando páginas en la Tabla de contenido.

Haga clic en el botón lnsert a page, se

mostrara el siguiente mensaje, (Usted quiere
insertar esta entrada al principio de la Tabla
de contenido), elija No:

Ahora escriba Introducción en el cuadro de

texto Entry title, luego haga clic en el botón Add
(para seleccionar el archivo que vincula a esta
página).

Docente: José Luis Ponce Segura Prac07 (6 de 12) e-mail: jlponcesg@hotmail.com

Cel. : 952636911 www.redtacna.net
Universidad Nacional Jorge Basadre Grohmann - ITEL
Carrera: Técnico Analista Programador de Sistemas. Curso: Programación Visual .Net II

Haga clic en Browse… y seleccione el archivo

que corresponda (principal.htm) y luego haga clic
en OK

El resultado de la Tabla de contenido será el que

se ve en la figura superior.

TAREA: Usted deberá agregar un encabezados llamado Actualización y agregarle tres páginas llamadas: Clientes
(vinculado al archivo ActClientes.htm), Empleados (archivo ActEmpleados.htm) y Artículos (archivo
ActArtículos.htm), utilice los botones Move Selecction para Avanzar o Retroceder un Nivel (, , , ). Al
finalizar la misma deberá quedar como se ve a continuación:

Docente: José Luis Ponce Segura Prac07 (7 de 12) e-mail: jlponcesg@hotmail.com

Cel. : 952636911 www.redtacna.net
Universidad Nacional Jorge Basadre Grohmann - ITEL
Carrera: Técnico Analista Programador de Sistemas. Curso: Programación Visual .Net II

Para terminar con la tabla de contenido proceda

a indicar el archivo correspondiente al proyecto.

Para ello haga clic en el botón Add/Modif.

Windows definitions. Luego haga clic en la
ficha Files y seleccione en TOC :
Contenido.hhc

Haga clic en el botón Save All file del

Menú File, Esto para guardar los cambios
realizados.

7. Generando el archivo CHM.

Compile el proyecto, haga clic en el botón

Compile HTML files:

8. Visualizando el archivo CHM compilado.

Haga clic en el botón View complied file:

Ventana para visualizar el archivo CHM compilado.

Docente: José Luis Ponce Segura Prac07 (8 de 12) e-mail: jlponcesg@hotmail.com

Cel. : 952636911 www.redtacna.net
Universidad Nacional Jorge Basadre Grohmann - ITEL
Carrera: Técnico Analista Programador de Sistemas. Curso: Programación Visual .Net II

Resultado de la ayuda HTML creada.

Cierre la ventana del archivo de ayuda creada.

9. Creando el archivo de Índice.

Haga clic en la ficha Index, seleccione Create a

new index file:

Guárdelo en la carpeta donde

guardo los archivos HTML, etc.
con el nombre de Indice.

Docente: José Luis Ponce Segura Prac07 (9 de 12) e-mail: jlponcesg@hotmail.com

Cel. : 952636911 www.redtacna.net
Universidad Nacional Jorge Basadre Grohmann - ITEL
Carrera: Técnico Analista Programador de Sistemas. Curso: Programación Visual .Net II

10. Creando las Palabras claves.

Haga clic en el botón

Insert a keyword y escriba
Introducción en el cuadro
de texto Keyword, luego
haga clic en el botón Add,
para relacionar la palabra
clave con el archivo que
contiene dicha información
(archivo Principal.htm):

Vuelva hacer clic en le botón Insert a keyword, y se mostrará el siguiente mensaje, (Usted
quiere insertar esta entrada al principio del índice), elija No:

Ahora escriba Cliente en el cuadro de texto Keyword y relacione esta palabra con el archivo
ActCliente.htm:

Docente: José Luis Ponce Segura Prac07 (10 de 12) e-mail: jlponcesg@hotmail.com
Cel. : 952636911 www.redtacna.net
Universidad Nacional Jorge Basadre Grohmann - ITEL
Carrera: Técnico Analista Programador de Sistemas. Curso: Programación Visual .Net II

Inserte otra Palabra clave (keyword) llamada Empleado para el archivo ActEmpleado.htm y otra
Artículo para el archivo ActArticulo.htm

Para terminar con las palabras claves proceda a indicar el archivo correspondiente al proyecto. Para ello

haga clic en el botón Add/Modif. Windows definitions. Luego haga clic en la ficha Files y
seleccione en Index : Indice.hhk

Usted deberá agregar más 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.

Docente: José Luis Ponce Segura Prac07 (11 de 12) e-mail: jlponcesg@hotmail.com
Cel. : 952636911 www.redtacna.net
Universidad Nacional Jorge Basadre Grohmann - ITEL
Carrera: Técnico Analista Programador de Sistemas. Curso: Programación Visual .Net II

II. UTILIZANDO EL ARCHIVO DE AYUDA EN UNA APLICACIÓN VISUAL BASIC .NET

 Para ello deberá abrir su proyecto en Visual Basic .NET

A) Asignando ayuda al Formulario principal

 Abra el formulario FrmPrincipal y codificar un elemento del Menú:

Private Sub MnuAyuContenido_Click(ByVal sender As System.Object, ByVal e As

System.EventArgs) Handles MnuAyuContenido.Click
Dim ayuda As System.Windows.Forms.Help
ayuda.ShowHelp(Me, "D:\jlponce\AyudaDSistema\AyudaSistema.chm")
End Sub

 Además asigne la propiedad Shortcut: F1 al elemento del menú MnuAyuContenido

B) Asociando la palabra clave de la ayuda con un control

 Abra el formulario FrmActEmpleados

 Agregue un componente HelpProvider al formulario.
 Luego proceda ha establecer las siguientes propiedades a c/u de los objetos

Objeto Propiedad Valor asignado

Form MaximizeBox False
MinimizeBox False
HelpButton True
HelpKeyword Empleado
HelpNavigator KeywordIndex
HelpString Empleado
HelpProvider HelpNamespace D:\jlponce\AyudaDSistema\AyudaSistema.chm (usted
deberá cambiar la ruta )

 Ejecute su aplicación y cada vez que muestre el formulario de FrmActEmpleados y presione F1 se

mostrará la ayuda del sistema, pero irá directamente el tema correspondiente, es decir, lo referente a
Actualización de Empleados.

NOTA: También podemos establecer ayuda para cualquier control (ejemplo: un TextBox) para que al estar
el foco en el TextBox y presione F1 muestre la ayuda que corresponda. (Consulte al profesor)

TAREA: Establezca la ayuda para c/u de los formularios que forman parte de la aplicación
Debe agregar un control

Docente: José Luis Ponce Segura Prac07 (12 de 12) e-mail: jlponcesg@hotmail.com
Cel. : 952636911 www.redtacna.net