contenido_103Cuando la versión 1.0 fue lanzada en 1997, surgió el desafío de proporcionar una mejor experiencia visual para los diseñadores web, independientemente de cómo tuvieran codificadas sus páginas. DHTML estaba de moda en ese momento, y en el 2000 todo el mundo esperaba experimentar códigos HTML interactivos con Javascript. Y CSS, que fue implantado en ese momento en Internet Explorer 4.0, era el nuevo paradigma emergente del diseño visual.

Hemos recorrido un largo camino.

Si miramos atrás en el tiempo, vemos que el lenguaje DHTML desapareció víctima de la guerra de navegadores y la incompatibilidad en los DOM entre Nestcape e Internet Explorer. Sin embargo, el HTML dinámico ha resurgido bajo la influencia de una nueva moda y/o movimiento: Ajax (utilizando muy poco el término, y centrándose más en la experiencia de los usuarios en las aplicaciones de Ajaxian a diferencia del JavaScript asincróno y la metodología XML usada para ordenar datos entre el cliente y el servidor, que proporcionaba los acrónimos prácticos.)

Por su parte, CSS ha florecido durante los últimos 10 años, y Dreamweaver se ha concentrado especialmente en los diseños base en sus últimas versiones. Y aunque Dreamweaver se ha establecido como líder en el mercado entre los editores visuales, también ha sido un foco importante para reforzar las principales herramientas que hoy en día usan diseñadores y programadores. Pero 10 años es mucho tiempo, y ambas industrias y flujos laborales pueden cambiar rápidamente.

Cuando nos enfrentamos con la dura tarea de planear esta nueva versión de Dreamweaver, supimos que era el momento de realizar algunos cambios trascendentes en los flujos de trabajo, así como nuevas formas de visualización en los proyectos de diseño de la web. Los interfaces de JavaScrip dinámicos y estáticos ya no son dominio exclusivo de ingenieros o especialistas. Los diseñadores también están obligados a proporcionar experiencias más ricas para sus clientes, y están trabajando conjuntamente con equipos de ingenieros para diseñar aplicaciones de experiencias más complejas. Después de Dreamweaver CS3, el equipo de producción se reunió con cientos de diseñadores y programadores, examinando su modo de trabajar, y cómo los flujos de trabajo han cambiado en una década, desde que salió la versión de Dreamweaver 1.0.

Es un placer introducirles los resultados de nuestros esfuerzos: Dreamweaver CS4 beta, nombre código Stiletto (vea figura 1).


Figura 1. Conozca Dreamweaver CS4 beta.

Nueva Imagen, nuevas sensaciones

Cuando inicie el Dreamweaver CS4 beta, verá que ahora cuenta con una interfaz personalizado de usuario que se ajusta sin problemas con el resto de sus programas del Creative Suite. Uno de los aspectos más destacados de la nueva interfaz es el ahorro del espacio de trabajo para sus documentos, que le permitirá elegir fácilmente el correcto espacio de trabajo para las tareas en las que esté trabajando. (vea Figura 2).


Figura 2. Elija el espacio de trabajo que se adecue mejor a sus tareas -o cree el suyo propio.

Hemos incluido algunos de los espacios de trabajo más utilizados, pero siéntase libre de crear los suyos propios, como por ejemplo el nuevo modo compacto para sus paneles, que le permite ahorrar espacio para sus documentos -amontone sus paneles a la derecha de su pantalla y ábralos sólo cuando sea necesario.

(Vea Figura 3).


Figura 3. Los nuevos paneles “plegables” le otorgarán más posibilidades para trabajar con ellos.

Los diseños visuales cobran vida

Afrontémoslo, las herramientas de diseño visual siempre tienen ligeras diferencias con los navegadores a los que están emulando. Y como la interactividad del JavaScript dinámico se ha popularizado en los últimos años, la necesidad de diseñar con mayor precisión cada uno de los elementos en las páginas (incluyendo los menús desplegables, los paneles deslizantes, la interfaz dinámica de Ajax y otras herramientas parecidas) se ha vuelto de gran importancia. Además, la naturaleza estática de la vista Diseño habitual ya no encajaba con las necesidades de los usuarios.

Introduzca el nuevo modo Live Preview (vea Figura 4). A diferencia del Design view, Live Preview usa el motor de renderizado del WebKit (que además incrementa la velocidad del navegador Safari y del tiempo de ejecución del Adobe Air) para darle una vista preliminar exacta de su página, tal como lo haría un navegador. Pero esto no es todo. También puede interactuar con su página directamente dentro del Dreamweaver, y ver todos los elementos que ésta puede requerir: abrir y cerrar los menús desplegables, los paneles acordeón de contexto de Spry, incluso Flash o películas Flex SWF y reproductores JavaScript de terceros.


Figura 4. Live Preview le permite interactuar con sus páginas.

Cuando seleccione el Live Code con el modo Live Preview, podrá ver fácilmente cómo la interactuación con su página afecta al código en tiempo real, las categorías que se han añadido y eliminado de los elementos vía JavaScript, el contenido dinámico insertado por Spry (u otro marco JavaScript), cómo la ínter actividad con la página actual afecta al DOM en el buscador, y mucho más. Para aquéllos que comienzan con el JavaScript, este modo es muy valioso para aprender cómo una página puede ser manipulada y para los expertos, se trata de un modo fantástico para depurar proyectos interactivos sin necesidad de cambiar constantemente a un navegador.

Sin embargo, una cosa es disponer de una vista preliminar de los elementos y otra muy diferente trabajar eficazmente con ellos. Al interactuar con su página y luego pinchar sobre el botón Freeze Javascript (o presionando F6), su página se “congelará” en su estado habitual (por ejemplo, con un menú desplegadle anclado abierto y un efecto de raton sobre el elemento) de manera que podrá editar aquellos elementos interactivos mostrados directamente en Dreamweaver. Por supuesto, todavía podrá usar la vista preliminar en su navegador preferido (F12) de manera interactiva, pero seguramente lo usará con menos asiduidad, teniendo la vista preliminar al alcance de la mano.

Apoyando los flujos de trabajo de hoy en día

Hoy en día, los proyectos de web son más complejos de lo que lo han sido nunca, y es raro encontrar si quiera una página que no esté compuesta por una serie de recursos, ya sean hojas de estilo en cascada, archivos externos de JavaScript y bibliotecas de archivos. Stiletto tiene dos nuevas herramientas que le ayudarán a ser mucho más eficaz en el diseño y en el manejo de sus páginas con diversos recursos y aplicaciones.

En primer lugar, la barra de Archivos Relacionados ahora se ejecuta a lo largo de la parte superior de su ventana, justo debajo de sus pestañas de documentos (vea Figura 5). Las tablas de documentos seguirán reflejando el documento en el cual está trabajando, pero la barra de Archivos Relacionados le mostrará los diversos archivos que se combinan para crear su página terminada: archivos JavaScript, CSS y SSI. Ahora también puede moverse de uno a otro usando la barra de Archivos Relacionados sin perder la vista previa de su página principal. Design view (o Live Preview) mostrará siempre el archivo principal, pero ahora es usted libre de modificar cualquiera de los archivos relacionados sin tener que perder el contexto visual que tanta importancia tiene.


Figura 5. La barra de archivos relacionados le muestra los distintos archivos que forman parte su de página finalizada.

El nuevo Code Navigator le permite saltar fácilmente a cualquiera de sus archivos relacionados (incluidas la normas específicas) que se combinan para crear el resultado final del elemento seleccionado. Si alguna vez ha perdido los nervios rebuscando a través de múltiples hojas de estilo para encontrar esa norma específica que tanto necesita, Stiletto pone a su disposición un sencillo menú contextual. Puede señalar con el cursor cada una de las normas en la ventada del Code Navigator para ver qué propiedades están siendo definidas, y luego simplemente pinchar encima de ellas para saltar al archivo y número de línea específico y así editar de manera rápida y eficaz. Una vez más, podrá hacer todo esto sin perder el contexto visual que tanta importancia tiene para diseñar de manera efectiva elementos interactivos.

Diseñador/Programador volumen de trabajo

En Dreamweaver CS3 le dimos la posibilidad de pegar una selección de sus documentos de Photoshop directamente en el Dreamweaver, pero en Stiletto hemos ido un paso más allá con Photoshop Smart Objects. Ahora puede arrastrar un documento PSD directamente a sus páginas web, y mantener un link en funcionamiento entre el PSD original y la imagen de la web optimizada en Dreamweaver. Cambie el tamaño de la imagen en Dreamweaver y la imagen será retocada de forma rápida y limpia. Cambiar la imagen en Photoshop y Dreamweaver le permitirá volver a sincronizar rápidamente la versión de la web optimizada. Con Stiletto podrá moverse sin problemas entre la imagen en edición y la web en desarrollo.

Debe trabajar con Flash o archivos SWF Flex en sus proyectos? La nueva actualización del Dreamweaver CS4 beta incorpora la característica Insert Flash, que utiliza la popular fuente abierta SWFObject 2.0 codebase para integrar contenidos SWF. Esto le permitirá visualizar la vista preliminar de su archivo SWF en su contexto usando Live Preview, incluso diseño estático, así como contenido no-Flash alternative HTML/CSS en Design view. Obtenga un control total de sus proyectos híbrido Flash/HTML y de cada aspecto de sus características visuales.

Muchos diseñadores Dreamweaver-based trabajan con grandes equipos de desarrollo o como programadores individuales, aprendiendo los beneficios de mantener sus proyectos en sistemas de control, que es la solución más común para el código abierto de Subersion. Stiletto le permite conectarse a cualquier respositorio SVN y administrar sus archivos directamente a través de Subversion, lo que otorga a diseñadores y programadores un flujo de trabajo más suave y una mejor gestión global.

JavaScript es un ciudadano de primera clase

El JavaScript y los interfaces dinámicos se están convirtiendo en habilidades muy valoradas para los diseñadores web últimamente, y con el fin de ayudarle a ser más eficaz con JavaScript, deberían abordarse algunas funcionalidades básicas.

En Stiletto puede hacerse, no sólo con el código indicado para la funcionalidad básica de JavaScript, sino que además con funciones DOM e incluso con JavaScript personalizado. ¿Usar a menudo JavaScript personalizado? Conseguirá consejos sobre código personalizado en Code view, ayudando a los profesionales más habituados a ser más eficientes con sus códigos y a los diseñadores menos acostumbrados a introducirlo de manera más sencilla en sus proyectos. El código indicado JavaScript trabaja a tiempo real y con cualquier JavaScript externo. ¿Cambiar el método en su tipo de JavaScript externo? Este cambio es posible aplicando el código indicado a cualquier documento abierto subscrito al mismo -no necesitará si quiera guardar antes el archivo JavaScript.


Figura 6. El código indicado ha sido ampliado para Dreamweaver CS4 beta.

Y mucho más…

Ningún otro artículo parecido a este podrá darle una idea exacta de los cambios añadidos en Dreamweaver CS4 beta. ¡Descárguese ahora la versión pública beta y descubra Stiletto usted mismo! Para ayudarle con el proceso de aprendizaje, hemos lanzado seis vídeos demostración con las claves de las nuevas características de Stiletto con nuestro equipo de ingenieros. Se puede acceder a ellos desde la pantalla de Bienvenida de Stilletto y empezar de manera sencilla y sin problemas. También puede verlos directamente en Adobe TV. Asegúrese de leer las notas de lanzamiento para conocer las últimas novedades en el beta público, y háganos saber su opinión en los Dreamweaver CS4 beta forums.

Y recuerde, éste es un software beta -con alguna pequeña limitación en la que trabajamos duramente para sacar adelante. Además, algunas extensiones (incluyendo el the Adobe Dreamweaver Developer Toolkit) no son compatibles todavía con la versión beta del Dreamweaver CS4, por lo que recomendamos que guarde su copia del Dreamweaver CS3 como reserva.
Éste es probablemente uno de nuestros más grandes y ambiciosos trabajos en mucho tiempo, y esperamos que disfrute esta versión pública como un anticipo de lo que será la próxima versión del Dreamweaver. Prepárese para gozar de nuevas experiencia con el diseño y la construcción de páginas web y sus aplicaciones.

Sobre el autor

Scott Fegette es el Manager Técnico de producción. Manager de Dreamweaver en Adobe – y se centra en la web estándar, la difusión de la comunidad y en las relaciones entre los programadores. Además de dar charlas a lo largo de todo el mundo sobre el desarrollo y diseño web, la producción de vídeo y las comunidades en línea, Scott es músico profesional y fotógrafo independiente en sus ratos libres.


fuente: Adobe Developer Connection

Traducción: Only-Apartments (Barcelona Apartments)