Introducción:

Todos sabemos que el hecho de que nuestras aplicaciones incluyan ayuda para guiar al usuario en alguna tarea que necesite ejecutar dentro de nuestras aplicaciones es muy importante, es por eso que en ésta ocasión veremos las diferentes vías por las que podemos mostrar ésta información a usuarios de aplicaciones desarrolladas en ASP.NET.

Nosotros podemos proveer de ayuda a nuestras aplicaciones web mediante:

• La adición de ToolTips en los controles de servidor o HTML de un web form

• Mostrándola en un web form o en una página HTML en un navegador, en el cual podemos controlar el tamaño y foco del browser que está mostrando la ayuda

• Mostrando archivos de ayuda HTML compilados usando el HTML Help Viewer

 

Adición de ToolTips

Como podemos observar en la figura anterior los Tooltips son pequeños mensajes que aparecen cuando el usuario posiciona el puntero del mouse sobre un control durante unos pocos segundos, es común utilizar éste tipo de mensajes en aplicaciones windows para proveer información de la funcionalidad que cumplen ciertos controles como botones, cajas de texto, etc. Pero no solo podemos utilizar tooltips en aplicaciones windows, en ASP.NET muchos de los controles de servidor incluyen la propiedad tooltip en la cual podemos establecer el mensaje que queremos que sea presentado ante el usuario, ahora si comparamos el código HTML del control en tiempo de diseño vs. ejecución nos damos cuenta que la propiedad tooltip es el atributo title, pero éste atributo sólo lo puede mostrar el Microsoft Internet Explorer y no todos los controles sea HTML o control del servidor como es el caso del DropDownList y ListBox poseen  la propiedad ToolTip ni el atributo title. A Continuación el código HTML del control presentado en la imagen anterior:

Diseño:

<asp:ImageButton id="ImageButton1" style="Z-INDEX: 101; LEFT: 24px; POSITION: absolute; TOP: 24px" runat="server" ImageUrl="Imagenes/HelpCenter.gif" ToolTip="Click aquí para obtener ayuda"></asp:ImageButton>

Ejecución:

<input type="image" name="ImageButton1" id="ImageButton1" title="Click aquí para obtener ayuda" src="Imagenes/HelpCenter.gif" border="0" style="Z-INDEX: 101; LEFT: 24px; POSITION: absolute; TOP: 24px" />

Mostrándo la ayuda en un web form o en una página HTML

 

 

El hecho de mostrar la ayuda en un WebForm o página HTML le permite al usuario tener acceso al contenido de la ayuda  en una nueva ventana, éstos archivos de ayuda pueden residir en la misma carpeta de la aplicación Web o en otra subcarpeta.

Para que el usuario tenga acceso a la ayuda podemos agregar hyperlinks en nuestra aplicación u otro control (En el gráfico podemos observar que yo utilicé un ImageButton para poder abrir la ayuda en el navegador), los pasos para implementar éste otro tipo de ayuda a nuestras aplicaciones detallo a continuación:

• Crear las paginas que contendrán la ayuda. Como se puede observar en la imagen el contenido de la ayuda la plasmé en un WebForm, y por cada tópico tendría que agregar un nuevo WebForm, ahora para aplicaciones complejas y extensas se podría crear un solo WebForm e ir cargando la información que el usuario requiera de alguna fuente que contenga el contenido de la ayuda, hay que considerar incluir un control o hyperlink dentro del WebForm que le permita al usuario abandonar la ayuda, por ejemplo podríamos una opción de cerrar al final de la ayuda, para lo cual el código sería el siguiente:

            <a href="#" onclick="window.close()">Cerrar</a>

• En éste caso se creó un script el cual muestra en una ventana pequeña la página HTML o WebForm con tamaños fijos, uso una función ya que puede darse el caso que en un mismo WebForm exista varios hyperlinks llamando a diferentes páginas de ayuda. El código del script es el siguiente:

          <script language="javascript">
                function Ayuda(tema)
                {
                    var AWin;
                    AWin = window.open(tema, "helpwin","left=600,height=300,width=200");
                    AWin.focus();
                }
        </script>

• Para hacer la referencia a la ayuda agrego un ImageButton y en el evento load del WebForm escribo el siguiente código en C#:

            this.Imagebutton2.Attributes.Add("OnClick","Ayuda('infoGen.aspx')");

 

Mostrándo  archivos de ayuda HTML compilados usando el HTML Help Viewer

 

Por último también podemos generar archivos de ayuda chm los cuales son archivos HTML que han sido previamente compilados y comprimidos en un solo archivo usando el HTML HelpWorkshop, para proveerles de características adicionales como lo son: contenido, índice y herramientas de búsqueda, éstos archivos podemos presentarlos en una ventana con el mismo método showHelp que hemos venido utilizando, identificando cada tema de ayuda por un contextId que es creado durante la compilación del archivo de ayuda.

Pero hay que tener en cuenta que cuando utilizamos el método showHelp  no podemos mostrar la ayuda HTML con contenido, índice y herramientas de búsqueda por medio del navegador, pero si podemos mostrar algún tema en específico de dicho archivo compilado, o si queremos podemos ofrecer al usuario la posibilidad de descargar el archivo chm a su máquina y que los links de ayuda abran el archivo que se encuentra en la máquina del usuario, pero hay que considerar que por éste método encontramos un problema: no todos los usuarios van a guardar el archivo compilado en el mismo directorio, es por esto que es mejor mostrar en un navegador algún tema en específico del archivo compilado. El código para acceder a dicha información es la siguiente:

<A onclick="window.showHelp('http://localhost/AyudaWeb/AyudaWeb.chm::/capitulo1.htm')"
href="#">Click aquí</A>

 

Fichero con el código de ejemplo: ffagas_ayudaWeb.zip - 35,1 KB