Insertando Ayuda en Aplicaciones Web

Fecha: 04/Oct/2004 (04/10/2004)
Autor: Francisco Fagas,
[email protected]

 


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:

 

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:

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

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

            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>

 


ir al índice

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