El proceso más útil sería crear nuestra propia plantilla, pero además de ser algo complicado nos obligaría a crear una nueva cada vez que se actualicen las librerías.

La ventaja de utilizar el panel es que nos permite indicar una carpeta desde la que se obtienen los archivos requeridos por jQueryMobile, sin necesidad de que se encuentren dentro de la configuración de Dreamweaver ni en el sitio que estemos creando: Podemos dejar la carpeta en nuestro escritorio, selecionarla desde el diálogo que nos aparece al crear la primera página y DW se encargará de copiarlos al sitio además de recordar la configuración. Además podemos cambiar de versión de librería siempre que queramos.

Por último, otra pequeña ventaja: Al utilizar las plantillas, las librerías son copiadas directamente a la raiz del sitio. Al insertar páginas, en cambio, los archivos son copiados dentro de una carpeta (utiliza el mismo nombre que la carpeta donde tengamos alojados los archivos).

Podemos incluso crear nuestro propio comando, para poder definir la carpeta de origen en cualquier momento e incluso que nos añado los archivos sin necesidad de crear una página.

1.- Copiar los archivos JQMSettings.htm y JQMSettings.js que se encuentran dentro la carpeta Configuration/Commands de DW
2.- Pegarlos en la carpeta Configuration/Commands del usuario (crearla si aún no existe). Las rutas son:

• Mac: /Users/Usuario/Library/Application Support/Adobe/Dreamweaver CS5.5/[idioma]/Configuration
• Win: C:\Users\Usuario\AppData\Roaming\Adobe\Dreamweaver CS5.5\[idioma]\Configuration

3.- Editar la linea 1 de JQMSettings.htm y eliminar el comentario
4.- Editar la linea 89 de JQMSettings.js

• antes:
  result.returnValue = “OK”
• despues:
  if(result!=undefined){
  result.returnValue = “OK”
  }else{
  addResources(dw.getDocumentDOM());
  }

A partir de ahora, nos aparecerá un nuevo comando, desde el que podremos seleccionar y añadir directamente las librerías a nuestro documento:

La principal ventaja de la extensión es que no sólo te ayudará a crear un diseño rápido, sino que además se encargará de añadir todos los archivos necesarios a tu sitio.

La extensión se compone de 3 partes:

- En primer lugar tenemos un panel de inserción, desde el cual añadimos un layout completo a la página que nos servirá de base y que utilizaremos posteriormente para añadir nuevas filas y columnas:

- 960 Grid System incluye una ayuda visual, que nos permite ver las columnas que lo componen:

- Y, para terminar, un inspector de propiedades desde el que podemos modificar no sólo la posición de cada columna, sino sus paddings y añadirles los nombres de estilos css que hayamos creado para nuestro diseño:

Como podéis ver, trabajar con 960 es ahora un trabajo mucho más sencillo gracias a esta excelente extensión.

Aprender más y Descargar 960 Grid System para Dreamweaver (Se necesita registro gratuito en DMXZone.com)

Fecha: 13 de Octubre de 2010
Hora: 20:00 hora española peninsular

El aforo al aula online donde tiene lugar el eSeminar es limitado y sólo podrán entrar las primeras 250 personas que accedan al aula online.

La entrada al aula es aquí: http://webdwk35.bon.at/extensionesdw/, ¡compártanlo con sus colegas y amigos!

Por favor, para asistir al eSeminar y aprovecharlo al máximo, procura llegar a la hora convenida. Abriremos las puertas 5 minutos antes del comienzo de la sesión. Utiliza el nombre de usuario o el nombre y el apellido con el que estás registrado en video2brain.

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