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

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

Un problema muy habitual es no conseguir que un determinado elemento no se ajuste exactamente a la posición que deseamos, y la causa más habitual es que no hemos definido alguno de los atributos (sobre todo margin y padding), por lo que el navegador asigna los suyos propios que no tienen por qué coincidir con los que nosotros esperemos que sean.

Descargar Ejemplo de valores por defecto

(Nota: los ejemplos que vayamos subiendo serán “autoejecutables”: no necesitarás definir un sitio en DW para poder seguirlos)

La explicación es sencilla: Dreamweaver sigue siendo fiel a los estándares y éstos dictan que para dichas tareas se utilice CSS en lugar del ya desparecido atributo “background”.

Para facilitar la migración, hemos creado una breve demo que muestra los pasos a seguir ahora: No es el mejor de los ejemplos en lo que se refiere a buenas prácticas (CSS insertado en vez de enlazado), pero hemos intentado que sea lo más sencillo posible para facilitar la migración a los usuarios noveles y que aprendan los pasos a seguir a partir de ahora no sólo para este atributo, sino para muchos otros ya desaparecidos oficialmente (aunque los navegadores lo soporten por el eterno conflicto de compatibilidad vs buenas prácticas) en beneficio de las hojas de estilo.

Ver la demo