Como norma general, cualquier usuario sabe que, cuando el cursor cambia a una mano, se puede hacer click sobre el elemento. Por lo tanto el truco es muy sencillo: Hacer que label responda cambiando el cursor cuando nos situamos encima del mismo, como por ejemplo en este input:

¿Y cómo conseguimos la mano? Para eso tenemos CSS:

label{
    cursor:pointer
}

Listo

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:

Sin embargo, por defecto, algunas funcionalidades, como añadir una pantalla de entrada (Splash screen) sólo aparece disponible por defecto para las aplicaciones de iOS.

El problema reside en que esta funcionalidad sólo ha estado disponible desde las últimas versiones de PhoneGap

¿Quiere esto decir que no podemos hacer lo mismo para Android? Con un pequeño retoque, sí.

El código de Dreamweaver ya estaba preparado para aceptarla cuando apareciera, así que sólo necesitamos saber dónde se encuentra escondida y activarla.

1.- Por defecto, la ventana para configurar una aplicación de Android (Site->Mobile Applications->Application Settings…) presenta este diseño:

2.- El diseño y la lógica de esta ventana se encuentra en la carpeta Configuration/NativeAppFramework de DW, concretamente en los archivos NativeAppSetup.htm y NativeApp.js. Para trabajar más seguros, copiaremos todo a la carpeta configuration del usuario para que nos quede esta ruta:
C:\Users\*NombreUsuario*\AppData\Roaming\Adobe\Dreamweaver CS5.5\en_US\Configuration\NativeAppFramework\

De esta manera nos aseguramos de que cualquier problema que pueda aparecer se soluciona simplemente eliminando la carpeta.

3.- Ya tenemos todo listo: Abrimos el archivo NativeAppSetup.js y vamos a la línea 105:

4.- Simplemente comentamos las lineas 106 y 107:

5.- Guardamos los cambios, reiniciamos Dreamweaver y…. voilá:

2.- CSS3 a pleno rendimiento: No sólo vas a ver el resultado en la vista en vivo, sino que se han añadido nuevos grupos de propiedades al panel de estilos. Incluye incluso soporte para trabajar con los formatos de colores rgb, rgba, hsl y hsla

3.- Panel de CSS mejorado: Ahora hay muchas propiedades (como sombras, degradados…) que puede editar de forma visual desde el mismo panel.

4.- Ayuda al código: Además de todo lo que ya hacía, como la introspección de CS5, se añade soporte para HTML5, CSS3, DOM y… jQuery!!! Si utilizas este framework, te lo vas a pasar en grande: Lo primero de todo es que no hace falta ni enlazarlo: Viene de forma nativa. además verás que es capaz de distinguir entre métodos estáticos y no estáticos, encadenado de métodos, métodos sobrecargados, manejadores de eventos, selectores (sabe distinguir entre etiquetas, id’s y classnames sólo con empezar a teclear y funciona incluso con filtros)… impresionante

5.- Vista en múltiples pantallas y CSS media queries: Puedes configurar distintas dimensiones de pantalla y la vista diseño de Dw se redimensionará y se adaptará a los valores que hayamos definidos en los media queries de CSS. Ideal para trabajar en sitios complatibles en múltiples dispositivos (Pc, tablet, teléfonos…)

6.- Ahora sí: Validación de la buena: Los documentos no se validan en local, sino directamente contra el validador del W3C. Puede validar tanto documentos estáticos (html) como dinámicos (php)

7.- Soporte para FTPS, tanto en su modálidad implícita (FTPS) como explícita (FTPeS)

8.- Widget Browser: Ahora se instala por defecto y trae alguna novedad como poder arrastrar el widget directamente al documento que tengas abierto en Dreamweaver.

9.- jQuery Mobile: Se incluyen no sólo una colección de widgets especiales para jQM, sino que también tienes acceso a páginas predefinidas con las que poder comenzar a trabajar directamente con este framework especial para móviles

10.- PhoneGap: He dejado esta para el final porque es mi favorita: Si quieres comenzar en el mundo de las aplicaciones para iOS y Android lo tienes más fácil que nunca. Por ejemplo, si te gusta Android (como es mi caso), Dreamweaver te ayuda a instalar el SDK y el emulador con un sólo click y hasta a crear tus propios dispositivos virtuales para realizar pruebas en diferentes configuraciones. El proceso es tan sencillo como definir las características de tu aplicación (más sencillo que configurar un sitio), comenzar a crear y probarlo en el emulador en cualquier momento.

Fecha y hora: 14 de Junio a las a las 11:00 hs (Hora española, UTC+2 hours CEST)
¿Como puedo asistir? Desde cualquier lugar en el que te encuentres. Sólo necesitas un navegador con Adobe Flash Player.
Para saber más: Visita los detalles del evento en la web del MAUG

Pues de esto se encarga Widget Browser, disponible en Adobe Labs. Vamos a dar un paseo por sus paneles.

Una vez descargado e instalado como cualquier otra aplicación AIR, lo primero que veremos será una ventana donde se cargan automáticamente todos los widgets disponibles en Adobe Exchange (necesitarás un AdobeID):

Panel principal de Widget Browser

Una vez seleccionado el widget que queramos, podremos añadirlo a “My widgets”, panel donde encontraremos todos los que hayamos seleccionado y que deseamos configurar:

Panel My Widgets

El panel de opciones es muy sencillo: Puedes mostrar/ocultar la barra superior de información o hailitar el panel para crear tus propios proyectos de widgets.

Panel de Opciones

¿Cómo personalizar los widgets? Sencillo: Seleccionamos uno del panel “My Widgets” y se nos abrirá una vista previa del mismo. A partir de aquí, el panel izquierdo mostrará presets que haya creado el desarollador y que pueden servir de muestra.Podemos seleccionar cualquiera de ellos como primer paso:

Panel de configuración del widget

La configuracióin puede ir más allá: Pulsando el botón “Configure” en la parte inferior izquierda del panel, se nos abrirán todas las opciones de personalización que el desarrollador haya añadido. En este widget, por ejemplo, se pueden ver cuatro apartados: General, Animation, Colors and Dimensions y Fonts:

Configurando el widget

Cuando hayamos realizado las modificaciones, podemos guardar nuestro preset desde la parte inferior derecha: Le asignamos un nombre, le damos una descripción (opcional) y pulsamos “Save Preset”:

Guardando nuestro preset

Ya tenemos nuestro widget personalizado. El siguiente paso es poder utilizarlo con Dreamweaver.

• Informe de validación de accesibilidad: Se veía venir ya que apenas nadie lo usaba, sino que se prefería utilizar los servicios online disponibles para esta tarea
• Comportamientos de servidor ASP/JavaScript: Ya había desaparecido prácticamente en CS4. Nada nuevo
• Comportamiento de JavaScript “comprobar navegador”: ¿Alguien recuerda la última vez que lo uso?
• Conectarse por FTP/RDS sin definir un sitio: Ésta es la que más voy a echar en falta: Era el método idea para realizar pequeñas ediciones en sitios sin necesidad de realizar todo el proceso de definir un sitio
• Comportamiento Control Shockwave o SWF: Vease “comprobar navegador” un par de puntos más arriba
• Create Web Photo Album: Era una forma sencilla de crear un album, pero la verdad que los resultados dejaban bastante que desear.
• Hide Pop-up Menu: Vease de nuevo “Comprobar navegador”
• InContext Editing Manage Available CSS Classes
• Insertar FlashPaper: no estaba mal, pero nunca tuvo mucho éxito
• Insert/Remove Mark of the Web: ¿Alguien se acuerda de Netscape4?
• Integración con Microsoft Visual Sourcesafe:/li>
• Barras de navegación: Ahora pasan a ser de Spry
• comportamiento Play Sound: vease “Comprobar navegador”. Una pesadilla menos
• Menu “Show Events For…” en el panel de comportamientos: Hoy en día todos los navegadores soportan los eventos disponibles en DW, así que no tenía gran sentido
• Show Pop-up Menu: más de lo mismo
• comportamientos con Timeline: tuvieron sus días de gloria, ya pasados
• Validate tags: Sólo han quedado las opciones para validar ColdFusion y xml (File->Validate…)
• View Live Data: Con la potencia actual de la vista en vivo no se echará de menos, palabra

Mis 5 atajos básicos son los siguientes:
F4: Cambiar a pantalla completa: te permite cerrar todos los paneles y es ideal cuando vás a trabajar en el código directamente.
F6: Congelar JavaScript: Otra imprescindible cuando realizas vistas en vivo de páginas que utilicen ajax: Permite ‘congelar’ la ejecución de scripts, de manera que se puede ver de forma muy sencilla qué partes del código original han cambiado (por ejemplo, qué estilos css se han aplicado a determinado elemento)
F12: Vista previa en el navegador principal; utiliza ctrl+F12 para utilizar el navegador secundario.
ctrl+T: Selecciona un objeto en vista diseño, pulsa ctrl+T una vez y tendrás acceso al código html del mismo; púlsalo de nuevo y podrás enolver la selección con la etiqueta que quieras. El segundo paso es ideal cuando tienes elementos anidados que hacen dificil a veces averiguar dónde terminan.
ctrl+Espacio: abrir la ayuda al código, que siempre viene bien!

El primero es “DW CS4 avanzado”, en el que, de la mano de Alejandro Rodriguez, manager de MAUG, aprenderás a sacar todo el provecho a Dreamweaver creando sitios dinámicos con PHP y MySQL. Puedes ver los videos gratuitos y adquirir el curso con un importante descuento desde nuestra sección de E-learning

El segundo de los cursos, titulado “Mi primer proyecto web” es una excelente guía con todo lo que conviene tener en cuenta al comenzar a desarrollar sitios completos, ya que la adquisición de estas habilidades desde el principio nos servirá en el futuro: Planear el sitio, pensar en el usuario final, organización la información, optimización, usabilidad… Todo ello enfocado desde la perspectiva del uso de Dreamweaver y Fireworks para estas tareas. Puedes ver los detalles y adquirirlo desde nuestra sección