Análisis: Dreamweaver CS4
Comunícate con nosotros
Comunícate con nosotros

Menu superior

Actualidad

Análisis: Dreamweaver CS4

Adobe Dreamweaver CS4 es una actualización sólida sobre un programa para el diseño de sitios web ya de por sí impresionante. La última versión amplía las características introducidas en Dreamweaver CS3 (por ejemplo, integración con Photoshop y herramientas JavaScript Spry par crear interfaces interactivas), y también presenta una interfaz de usuario completamente actualizada y que se asemeja a la de otros productos de la Creative Suite. Pero las incorporaciones más significativas están dirigidas a los desarrolladores web que creen sitios web en los que se utilice tanto JavaScript como HTML y CSS (hojas de estilo en cascada).

Adobe Dreamweaver CS4 es una actualización sólida sobre un programa para el diseño de sitios web ya de por sí impresionante. La última versión amplía las características introducidas en Dreamweaver CS3 (por ejemplo, integración con Photoshop y herramientas JavaScript Spry par crear interfaces interactivas), y también presenta una interfaz de usuario completamente actualizada y que se asemeja a la de otros productos de la Creative Suite. Pero las incorporaciones más significativas están dirigidas a los desarrolladores web que creen sitios web en los que se utilice tanto JavaScript como HTML y CSS (hojas de estilo en cascada).

Con la CS4, Dreamweaver ya no parece tanto un primo lejano del resto de los componentes de la Creative Suite. La interfaz, familiar desde los días de Macromedia, se ha renovado para que se alinee mejor con el aspecto y funcionalidad proporcionados por Photoshop, Illustrator y Flash. En Dreamweaver CS4, los paneles y las ventanas están dispuestas como un todo unificado por omisión bajo una nueva barra de aplicación que cubre por completo el ancho de la pantalla. Sin embargo se pueden mover las ventanas y personalizar los paneles para crear el entorno de trabajo óptimo que se ajuste mejor a las necesidades en cada caso. El programa proporciona múltiples opciones para organizar las ventanas y los paneles del espacio de trabajo y permite crear un área de trabajo confortable tanto si se está utilizando una pantalla de 17 pulgadas como si se emplean dos monitores de 21 pulgadas cada uno.

Es posible que a los usuarios más veteranos de Dreamweaver les lleve algo de tiempo acostumbrarse al nuevo aspecto, como por ejemplo la nueva barra de herramientas de Aplicación, la ausencia de la barra de herramientas Insertar (ahora tratada como un panel más del programa) o la capacidad para minimizar los paneles en una vista de icono que ahorre espacio en pantalla; pero si utilizas cualquiera de los otros programas de la Creative Suite, entonces te gustará contar con una interfaz de usuario más unificada.

Dreamweaver CS3 fue la primera versión del programa en la que se permitía la inserción y optimización de los archivos de Photoshop directamente sobre Dreamweaver. La versión CS4 del programa aumenta aun más dicha capacidad mediante el soporte de los Objetos Inteligentes (imágenes optimizadas para la web con enlaces vivos a los documentos PSD originales de Photoshop). No sólo es posible optimizar los archivos de Photoshop en Dreamweaver, cambiar su tamaño o incluso recortarlos antes de insertarlos en una página de Dreamweaver, sino que la nueva versión web del gráfico permanecerá enlazada con el archivo PSD original. Por tanto, si haces cambios en Photoshop podrás hacer que con un clic del ratón dichos cambios queden reflejados también en la versión web del gráfico.

Llamada a todos los desarrolladores web

Desde sus orígenes, el foco de Dreamweaver en el diseño visual ha sido contemplado con recelo por la comunidad de diseñadores web "de código a mano". Las mayores innovaciones en Dreamweaver CS4 están dirigidas a los diseñadores que se sientan tan cómodos trabajando en la vista de código como en la vista de diseño visual.

La nueva barra de herramientas de archivos relacionados aparece cuando se abre una página web que utilice CSS externos, JavaScript, o bien archivos de programación del lado del servidor. La barra de herramientas muestra los nombres de cada uno de los archivos enlazados, y cuando se hace lcic sobre el nombre del archivo aparece el código correspondiente al archivo en cuestión. Esto proporciona una vía rápida y directa para saltar a un archivo CSS o JavaScript, hacer los cambios correspondientes, y regresar al archivo de la página web para observar los resultados.

De hecho, ahora es posible observar simultáneamente tanto la vista correspondiente al diseño visual de la página como al código correspondiente a dicha página, o bien de cualquiera de los archivos relacionados. De este modo puedes ver los cambios de inmediato sobre el diseño de la página web en una mitad de la ventana a medida que estás editando el código CSS sobre la otra mitad. Si bien es cierto que Dreamweaver ya disponía de esta vista partida (parte código, parte diseño), esta versión por fin permite utilizar ambas vistas en formato vertical.

La nueva opción de vista en vivo permite comprobar cómo se verá la página en un navegador sin necesidad de abandonar Dreamweaver gracias al motor de renderizado WebKit embebido (el mismo utilizado en Safari). Dicha opción incluso permite interactuar con la página, de modo que también se puede probar directamente en Dreamweaver cualquiera de los efectos JavaScript como rollovers, menús desplegables o validaciones de formulario. Pero dicho modo no sólo es válido para previsualizar una página; en el modo de ventana dividida también se puede editar el código CSS, JavaScript, y HTM y comprobar de inmediato los resultados en la vista en vivo.

Los diseñadores Web con conocimientos de JavaScript también apreciarán la vista de código vivo, dado que mostrará el código HTML de la página después de que haya sido manipulado por el JavaScript. Esto te permite comprobar si el código JavaScript está modificando el HTML de la página del modo que deseas; de hecho, incluso puedes pausar el JavaScript dentro de la vista en vivo de modo que pueda analizar los momentos, de otro modo difíciles de capturar, como por ejemplo la forma en la que afecta el rollover del ratón los elementos de una página. Dreamweaver CS4 incluye ahora una característica de ayuda de código para JavaScript y que funciona con las librerías JavaScript más populares como Spry, Prototype y jQuery. Esta ventana emergente contiene sugerencias de código y atajos para evitar que debas escribir tanto.

Las nuevas características de código, como la vista compartida de código y diseño, así como el navegador de código CSS, simplifica la producción de páginas web.

Por último, los verdaderos guerreros del código apreciarán el nuevo Navegador de Código, una ventana emergente útil que muestra todos los estilos CSS que afectan un elemento de la página en concreto. Haz clic sobre un estilo en la ventana emergente y Dreamweaver te llevará directamente al código CSS para dicho estilo. Si bien Dreamweaver tiene herramientas similares, el navegador de código supone la forma más rápida para saltar al código CSS relevante. Del mismo modo, en la vista en vivo sólo se puede utilizar el navegador de código para ver los estilos CSS aplicados mediante JavaScript sobre un elemento de la página, una tarea que por lo general es un largo proceso de ensayo y error.

Herramientas para el resto de nosotros

Si no te sientes tan cómodo con el código como cuando usas las herramientas visuales de Dreamweaver, entonces todavía encontrarás algunos añadidos útiles en la última versión del programa. Dreamweaver CS4 amplía las herramientas JavaScript basadas en Spry añadidas en la versión CS3 del producto, y que permite que los usuarios que no sean programadores puedan aplicar con sencillez en sus sitios web sofisticados elementos de interfaz de usuario interactivos, como por ejemplo menús de navegación desplegables. Dreamweaver CS4 añade a Spry las herramientas de validación de formulario mediante las que se evita que los visitantes de tu sitio puedan enviar información incorrecta o incompleta en tus formularios web. Ahora puedes asegurarte de que se selecciona una opción en un grupo de botones de radio, proporciona un campo de contraseña a prueba de hacker; por ejemplo, "Tu contraseña debe tener un mínimo de 8 caracteres y 3 números", y forzar a que el visitante confirme alguna información que resulte crítica, reintroduciéndola (como una contraseña o dirección de correo electrónico).

El nuevo elemento de etiqueta de Spry permite añadir tiras de información emergentes a los enlaces, las imágenes o cualquier otro elemento de la página. De este modo, puedes proporcionar definiciones ampliadas aplicadas a las palabras, o bien mostrar información suplementaria para una fotografía. Adicionalmente, el conjunto de herramientas Spry HTML facilita la tarea de coger una simple tabla HTML llena de datos y convertirla en una presentación interactiva: puedes hacer tablas cuyos datos se puedan ordenar pulsando simplemente en la parte superior de la columna, automatizar el proceso de añadir color sobre las filas alternas de información e incluso ordenar los datos antes de que aparezcan en la tabla. Otra opción, proporciona una vía sencilla para mostrar un sumario de las filas correspondientes a una tabla, así como destacar los detalles de una única fila de información. Haz clic sobre otra fila y aparecerán los detalles correspondientes a la misma, sin que sea preciso volver a cargar la página web.

El renovado inspector de Propiedades también clarifica el proceso de añadir HTML y CSS a la página. Las anteriores versiones de Dreamweaver facilitaban la creación de CSS un tanto confuso y difícil de actualizar utilizando el viejo inspector Propiedades.

La vista de vista en vivo permite comprobar cómo se verá la página en un navegador web. También permite interactuar con JavaScript, como el nuevo conjunto de herramientas Spry HTMl, sin necesidad de abandonar Dreamweaver.

Otros detalles

Dreamweaver CS4 incluye otras incorporaciones. Por ejemplo, un nuevo método para insertar películas Flash crea código HTML estándar (por fin) y proporciona un método sencillo para comprobar si los visitantes tienen Flash (o la versión adecuada de Flash) instalado en sus ordenadores. También es una buena noticia el soporte de Subversion para el relativamente pequeño grupo de desarrolladores web de Dreamweaver que necesitan trabajar con dicho sistema de código abierto para el control de versiones de archivo. Las herramientas de edición InContext permiten que los usuarios creen páginas Web que puedan editarse mediante un navegador Web, una gran herramienta para los diseñadores web que quieran permitir a alguien más actualizar el contenido del sitio web de una forma sencilla y a prueba de fallos. Y si estás trabajando con la tecnología AIR de Adobe, que te permite crear programas de escritorio y que utilizan lenguajes básicos de la web, también se añade una extensión de autoría gratuita AIR a las herramientas que necesitas para compilar, empaquetar, y previsualizar las aplicaciones AIR directamente en Dreamweaver.

Rendimiento sólido

Dreamweaver CS4 no es mucho más rápido en comparación con su predecesor, aunque sí se han realizado algunas mejoras de velocidad en la última versión del programa. En un Intel Core 2 Duo iMac a 2,8 GHz, el tiempo de arranque entre las versiones CS3 y CS4 fueron prácticamente iguales; y si bien Adobe ha actualizado la herramienta FTP para que funcione más rápido en esta versión, el aumento de velocidad en la subida de los archivos no es tan significativo: subir 7,6 MB de archivos HTML, Flash, CSS, JavaScript e imágenes llevó seis minutos y medio con la CS4 y un poco más de siete minutos con la CS3. En mi uso diario Dreamweaver CS4 es sustancialmente más estable que Dreamweaver CS3, con muchos menos cuelgues y salidas inesperadas de la aplicación.

Dreamweaver CS4 no proporciona mejoras en las herramientas del lado del servidor que han hecho de este programa el favorito de los diseñadores a los que no les gusta programar, pero que quieren que el sitio web pueda interactuar con bases de datos. El programa aún carece de comandos para solucionar problemas comunes del lado del servidor, como por ejemplo la subida de archivos, el envío de correo electrónico, y la generación visual de consultas SQL. Los diseñadores Web que quieran añadir características más avanzadas deben comprar extensiones de terceras partes y, por desgracia, incluso la solución de Adobe a este problema, la Dreamweaver Developer Toolbox, todavía no se ha actualizado para que funcione con la CS4.

Conclusiones

Dreamweaver CS4 soporta con solidez las tecnologías que utilizan los profesionales del diseño web y es una actualización significativa que ofrece un nuevo conjunto de herramientas para aquellos que pasan una gran cantidad de tiempo con HTML, CSS y JavaScript. Si te encuentras creando cada vez más y más sitios web que utilicen JavaScript y CSS complejo, entonces esta actualización es fundamental. De hecho, si eres un programador HTML de la vieja escuela, ahora es el momento de hacer el cambio. Incluso si renuncias a las herramientas de diseño visual del programa, el flujo de trabajo para múltiples archivos, la edición avanzada de texto, y el significativo aumento de productividad en el Navegador de Código, hacen que este sea uno de los mejores editores de páginas web disponible.

Si eres un usuario de Dreamweaver CS3, entonces la cuestión sobre si debes actualizar el programa dependerá del tipo de sitios web que construyas. Si no creas tu propio código JavaScript, y te basas fundamentalmente en el uso de código HTML claro y conciso, entonces puede que esta actualización no sea para ti. Sin embargo, puedes plantearte la actualización en el caso de que utilices otros programas de la Creative Suite y quieras utilizar una interfaz consistente, quieras emplear los objetos inteligentes de Photoshop, y quieras añadir más herramientas Spry a tu caja de herramientas de diseño web.


Fuente: http://www.idg.es/macworld/content.asp