Dreamweaver posee por defecto una colección de ellos que utilizan spry, sin embargo no estamos limitados al uso de este framework para utilizar widgets.

Gracias al Widget Packager, podemos añadir al insertbar widgets que utilicen otros frameworks, de manera que podamos utilizarlos (nosotros y otros usuarios) con un solo click de ratón.

Los pasos a seguir son bastante sencillos:

• Creamos una carpeta donde incluyamos todos los archivos de los que haga uso el widget (JavaScript, CSS)
• En dicha carpeta, crearemos un archivo xml con la extensión *.wdf (widget descriptor file) donde definiremos los parámetros y características de dicho widget. La sintaxis empleada es una implementación de la Open Ajax Alliance (OAA) Widget Metadata Specification.
  Podréis encontrar el listado de etiquetas soportadas y su descripción en la Guía para desarrolladores. Yo todavía me la estoy leyendo, así que de momento no puedo explicar todas las etiquetas 8-(
• Instalaremos la extensión Widget Packager en Dreamweaver. Es recomendable leer antes nuestra technote sobre instalación de extensiones en CS4.

Esta extensión añadirá un nuevo elemento a nuestro menú ‘Commands’: Package Web Widget.

• En la ventana emergente sólo tendremos que indicar la ruta al archivo wdf y activar la casilla ‘install extension’ si queremos que se nos incluya al terminar en nuestra lista de extensiones:
  
• Al terminar el empaquetado, habremos obtenido un archivo mxp listo parar ser usado por cualquier otro usuario de Dreamweaver

Como podéis ver, el proceso es bastante similar al empaquetado de extensiones normales (el archivo wdf se parece a un archivo mxi), pero algo más sencillo (no hay que crear la interfaz ni documentos edml, por ejemplo).

En cualquier caso, siempre es más sencillo aprovechar los widgets creados por terceros: En vez de fabricarlos tú, visita la sección de Adobe Exchange dedicada a los web widgets, descárgate los que te interesen e instálalos utilizando el Extension Manager (de nuevo, recuerda nuestra technote!)

Al mismo tiempo, la imagen contiene ‘ruido de fondo’ que hace aún más dificil el anáisis del código.

Lógicamente, existen limitaciones de accesibilidad, ya que este tipo de aproximación al problema deja fuera a personas con problemas de visibilidad (existen clases que son capaces de añadir voz para reproducir el texto). En cualquier caso, este método es una de las aproximaciones más habituales al problema.

Los requisitos para que esta extensión funcione son:

• Dreamweaver 8
• PHP y MySQL
• Soporte para la librería de gráficos GD (muchos servidores ya la incluyen)
• La carpeta donde se ejecuta el documento debe tener permisos de escritura

En un principio, la extensión está pensada para su uso con formularios dinámicos de inserción o actualización generados por Dreamweaver, sin embargo, el código es bastante flexible como para poder ser adaptado a otros entornos. si alguien se encuentra en esta situación, puede utilizar nuestro foro

El primer paso, por tanto, es insertar un formulario dinámico de Dreamweaver, para ello, el mejor método es utilizar la barra de inserción:

Una vez insertado el formulario, deberemos añadir un campo en el que el usuarios deberá introducir la clave que le será mostrada por la imagen:

Tras estos dos pasos, simplemente deberemos utilizar la extensión. Se encuentra en el panel ‘Comportamiento de Servidor->Captcha Image’. Una vez abierta, veremos la ventana donde poder definir las opciones:

Las opciones son sencillas:

• alto y ancho de la imagen
• colores del texto, del fondo y del ‘ruido’
• numero de caracteres de la clave
• Campo del formulario donde el usuario deberá introducir la clave de la imagen

Tras introducir la información, la extensión utiliza un traductor para añadir un placeholder que imita el ancho y alto seleccionado, de manera que su manipulación sea más sencilla:

Para generar el código, la extensión utiliza una fuente Verdana: En algunos servidores puede que no esté registrada, por lo que se hace necesario subir el archivo verdana.ttf que completa el paquete a la misma carpeta donde se ejecutará el documento. No es necesario ningún otro paso extra.

Al ejecutarla en nuestro servidor, podremos ver la imagen en acción:

Y está terminado.

Como repito, el código generado puede ser modificable para otras necesidades que no impliquen un formulario procedente de Dreamweaver, así como para generar y destruir la imagen ‘al vuelo’. En este caso, se ha preferido que trabaje más unida a Dreamweaver pensando en aquellos usuarios con menor nivel de programación. Como repito, pueden consultarse dudas sobre ella en nuestro foro

Pulsa aquí para descargar la Extensión