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!

Cuales son los requisitos necesarios ?

Tener instalado un repositorio de Subversion en el servidor y un servidor Linux.

Y que Software necesitamos?

• Dreamweaver versiones 8 a CS4
• WinSCP
• SVN4Dw (Extensión para dreamweaver)
• TortoriseSVN
• Putty

Instalamos todo el software ya mencionado y extraemos el contenido de “putty.zip” en una carpeta (archivos de programa/putty)

Ejecutamos “putty“. Introducimos el host o la IP del servidor y un nombre para poder guardar la sesión, tratando de que sea distinto del host (p.ej SVN_Session). Guardamos la sesión y la volvemos a abrir.

Mediante la línea de comandos, nos logueamos en nuestra cuenta del servidor con el nombre y usuario (en caso de no disponer de una cuenta, habría que ponerse en contacto con el administrador de sistemas) y escribimos los siguientes comandos.

[~]$ ssh-keygen -t rsa

? Presionamos la tecla enter en cada prompt ?

[~]$ chmod 700 .ssh
[~]$ cd .ssh
[~]$ cp id_rsa.pub authorized_keys
[~]$ chmod 600 authorized_keys
[~]$ chmod 711 ~
[~]$ exit

Abrimos ahora el WinSCP y añadimos el host o IP del servidor, nombre de usuario, contraseña y seleccionamos “SCP” como protocolo. Hacemos click en Login.
Ahora, en la carpeta “.ssh“, hay un archivo llamado “id_rsa“. Descarga este archivo a la carpeta “keys” de la carpeta en la que hayas descomprimido el “putty“. En caso de no existir esta carpeta, la creamos.

Dentro de la carpeta de Putty, ejecutamos “puttygen.exe“, y en el menú “conversions“, hacemos click en “import key“. Seleccionamos entonces la clave “id_rsa” que anteriormente descargamos con el WinSCP. Hacemos click en “open” y nos aseguramos de que “SSH-2 RSA” está seleccionado. Hacemos click en “Save private key”, y nuevamente hacemos click en “Yes” cuando nos pregunte si deseamos guardar sin contraseña. Guardamos el archivo con el mismo nombre de la sesión (SVN_Session)

Ejecutamos nuevamente putty.exe, seleccionamos la sesión guardada y hacemos click en “load > Connection > SSH > Auth“, clickamos en “Browse/Examinar” y seleccionado el archivo .ppk creado anteriormente. Hacemos scroll hacia arriba y seleccionamos la sesión. La guardamos y la abrimos. Escribimos el nombre de usuario cuando se nos solicite y debería aparecer un mensaje de la forma “Authenticating with public key?”. Si hay algún mensaje de error, comprueba que has seguido los pasos correctamente.

Estamos llegando al final. Nos vamos ahora a “Mi PC” y nos ubicamos en una unidad de disco (por ejemplo C:\). Hacemos click con el botón derecho del ratón y seleccionamos “SVN Checkout“. La Url del repositorio debería ser similar a “svn+ssh://nombredeusuario+SVN_Session/home/ruta al repositorio de tu servidor“.

Seleccionamos ahora un directorio donde ubicar el “Site” en Dreamweaver, hacemos click en “OK” y esperamos a que todos los archivos sean descargados.

Ahora abrimos Dreamweaver y creamos un nuevo Sitio web. Para la ruta local, seleccionamos el directorio que hemos seleccionado para descargar del repositorio.

Cada vez que modifiquemos un archivo, utilizamos el menú creado por la extensión antes instalada “SVN4Dw“, llamado “SVN“. Utilizamos los comandos “Commit” para añadir un archivo al repositorio (archivos modificados por nosotros) y “Update” para descargar los nuevos archivos (actualizados por otros usuarios).

Ya esta todo listo para poder utilizar el “SVN” desde Dreamveaver.

Por cierto, para simplificar estos pasos, es posible crear atajos de teclado desde el menú “Edición > Métodos abreviados de teclado” desde el propio Dreamaweaver.

[ vía cmacias.com]

Nuestro panel original tiene esta apariencia:

El primer paso será editar en la definición del sitio la sección de columnas del panel:

Vamos a añadir una nueva columna. Para ello, pulsamos en el botón (+) y, en lo cuadros inferiores le asignamos un nombre y la asociamos a la nota de diseño “Status”:

El último retoque en este primer paso será activar las opciones “Enable column sharing” y “Share with all users of the site”, de manera que el resto de desarrolladores del sitio puedan ver y utilizar la columna que has creado.

Al activarlas, puede que DW te recuerde que debes activar las opciones de Mantener Notas de diseño y subir las notas al servidor para poder compartirlas. Estas opciones se encuentran en el apartado Design Notes de la definición del sitio:

IMPORTANTE: En contra de la opinión de ciertos usuarios, subir la carpeta “_notes” al servidor es seguro, ya que el guión bajo (underscore) al comienzo de su nombre la hace invisible a los navegadores. Si estás obsesionado con la seguridad, puedes eliminarla del servidor al terminar el proyecto.

Bueno, hemos terminado la definición de la columna y está lista para que todos los que trabajen en el proyecto puedan verla en su panel de archivos:

Si abrimos las notas de diseño (botón derecho en el panel) para un archivo…

… Y cambiamos su estado…

Veremos cómo la columna nos mostrará el estado actual del documento:

Incluso podemos pulsar sobre el nombre de la columna para ordenarlos por estado:

La principal ventaja de todo esto es que TODOS los miembros del equipo que estén trabajando en el sitio tendrán acceso a la misma información sobre el estado de los documento de forma instantánea. Pero podemos incluso combinarlo con el uso de Check In / Check Out para que los usuarios puedan además ver quién se encuentra trabajando en ese momento con el archivo. El primer paso es activar la opción en la definición del sitio:

Cuando comencemos a utilizarlo, todos los miembros del grupo tendrán una vista como esta en el panel de archivos.

TIP: El status “needs attention” tiene una característica muy útil: tan pronto como algún miembro accede al mismo mediante check out, pierde dicho status. Una forma muy práctica de llamar la atención al resto del grupo y que el responsable no necesite cambiar su estado una vez revisado.

En el ejemplo mostramos cómo el mismo documento cambia de apariencia dependiendo de si se está mostrando en pantalla o si va a ser imprimido, utilizando para ello el atributo media en la etiqueta link:

Descargar archivo de ejemplo