Para aquellos que hemos usado Dreamweaver desde hace ya algún tiempo, podemos saber que es un potente programa para desarrollar sitios web en modo Diseñador como Desarrollador de código, claro que a veces nos parecía que debía integrar algunas nuevas funciones y tener un poco más de severidad con la aplicación de hojas de estilos y la creación de nuevas clases.
Ahora es grato saber que Adobe para la nueva versión llamada Dreamweaver CS4 trae excelentes novedades.
Novedades que hacen que Dreamweaver CS4 siga siendo una de las herramientas perfectas para diseñadores y desarrolladores avanzados como para novatos, ya que después de algo de práctica su uso se hace muchísimo más sencillo pues su uso es muy intuitivo.
A continuación conozca algunas novedades que incluye Adobe Dreamweaver CS4.
Vista en vivo
- Ya no hay que esperar a ver cómo luce el diseño en el navegador. Eso de estar minimizando y cambiar a la ventana del navegador era tiempo mal invertido. Ahora se puede ver dentro de Dreamweaver CS4 tal y como luce en el navegador. Se habla del webkit, liveview y livecode.
- Dreamweaver CS4 embebe el motor de renderizado WebKit (el mismo utilizado en Safari), de modo que al hacer clic sobre el botón de "vista en vivo" podrás ver la página tal y como sería renderizada en el navegador; incluso puedes interactuar con la página y ver efectos Java Script con rollovers, y menús desplegables sin tener que cambiar entre Dreamweaver y el navegador Web.
- La Vista Live code complementaria se encarga de mostrar el HTML, una incorporación muy útil para las páginas que utilicen Java Script para manipular el aspecto y contenido de la página, o para las páginas dinámicas que requieren información adicional desde una base de datos para visualizarse correctamente.
- Con la opción de Live view, puedes "detener" cualquier efecto Java Script, como por ejemplo congelar un menú de navegación, para utilizar a continuación el navegador de código para identificar con rapidez los estilos CSS que afectan dicho menú.
Nueva interfaz de usuario
Dreamweaver CS4, nos presenta ahora 8 diferentes interfaces de usuario, muy diferentes a las ya conocidas (Diseño, Dividir y Código), las nuevas interfaces son:
- Desarrollador de aplicaciones
- Desarrollador de aplicaciones avanzado
- Clásico
- Programador
- Programador avanzado
- Diseñador
- Diseñador condensado
- Pantalla doble
Su nueva interfaz sigue fielmente la línea del resto del aplicaciones de Adobe Creative Suite CS4.
- Si bien este cambio requerirá algo de tiempo para que los antiguos usuarios de Dreamweaver se habitúen, la nueva interfaz mejora significativamente la usabilidad del programa. Los paneles y las ventanas se integran bien entre ellos, resultan más sencillos de organizar, mover y ocultar, y la nueva interfaz también mejora la flexibilidad para crear un entorno de trabajo que resulte cómoda cuando estés trabajando con un monitor de 17 pulgadas o un Cinema Display de 30 pulgadas.
Objetos inteligentes de Adobe Photoshop
- Integración total con Photoshop: No hay necesidad de salirnos de Dreamweaver para editar imágenes.
- Dreamweaver CS4 ha dado el primer paso para soportar una característica que ya ha estado disponible durante años en el resto de programas de la Creative Suite: los SmartObjects.
- Dreamweaver CS4 proporciona ahora soporte para los SmartObjects de Photoshop, de modo que puedes arrastrar un archivo PSD sobre una página web de Dreamweaver CS4, optimizar la imagen para la web e incluso modificar su tamaño. Si posteriormente actualizas el archivo PSD original, aparecerá una flecha de color rojo sobre la imagen de Dreamweaver indicando que el archivo fuente ha sido modificado. A continuación, podrás hacer clic en el botón "actualizar desde el original" en el inspector de Propiedades, y se creará una nueva versión de la imagen.
Prácticas recomendadas CSS
- Estilos en cascada ordenados: cuando necesitábamos crear un nuevo estilo, recuerdan que, Dreamweaver empezaba a crear Estilo1, Estilo2, Estilo3…etc. y era una perdida de tiempo pues después había que copiar y pegar ese código a la stylesheet.
- Pues ahora podemos crear nuevas reglas CSS en el panel Propiedades y obtener, como asistencia para este proceso, explicaciones claras y sencillas acerca de la ubicación que corresponde a cada una de las propiedades en la cascada de estilos. Además nos ofrece las opciones Menos específico y Más específico, que sirve para hacer más amigables las anidaciones compuestas en los CSS.
- Un nuevo "navegador de código" (que es más parecido al "navegador CSS") te permite ver un listado de estilos CSS que afectan a la selección actual: puedes ver todo el conjunto de propiedades para ese estilo e incluso saltar directamente al código CSS desde dicho estilo. Mientras que las anteriores versiones de Dreamweaver proporcionaban herramientas similares para el panel de estilos CSS, este nuevo sistema supone un flujo de trabajo más directo.
Archivos relacionados y Navegador de código
- La nueva barra de "archivos relacionados", que aparece entre la barra de herramientas del documento y el propio documento, se encarga de mostrar todos los archivos CSS y Java Script enlazados con la página. (Si estás utilizando un lenguaje de programación de servidor, como PHP, entonces también verás los archivos incluidos del servidor.) Al hacer clic sobre uno de los archivos relacionados de esta barra te dirigirá directamente al código de dicho archivo. De este modo, puedes abrir una página web y tener acceso inmediato a otros archivos referenciados por la página: salta con rapidez al archivo CSS de la página, haz algunos cambios y regresa de nuevo al archivo de la página web para ver los cambios.
- La barra de archivos relacionados destaca especialmente cuando se combina con otra novedad: la vista vertical dividida. Ahora puedes ver a la par el código HTML de la página junto con su diseño visual. Haz un cambio en la vista gráfica y verás cómo se actualiza de inmediato el código correspondiente, o viceversa. Cuando se está viendo una página que tiene archivos relacionados (por ejemplo una hoja de estilo externa), puedes ver el aspecto visual de la página en una mitad de la vista y los archivos relacionados en la otra mitad. Esto te permite editar el código CSS y ver los cambios visualmente en la página web.
Conjuntos de datos HTML
Por último, la nueva herramienta de conjunto de datos HTML te permite tratar un archivo normal HTML como un pequeño sistema de base de datos. Por ejemplo, puedes crear una tabla HTML completa de filas y columnas de datos, y utilizar Dreamweaver para importar dicha tabla en otra página web (utilizando Java Script y Spry).
- De este modo puedes presentar la información en una amplia variedad de formas, como una página "General/Detalle" que permite que un usuario pueda ver el sumario general de filas en la tabla, hacer clic sobre un elemento de la lista y ver al instante todos los detalles correspondientes a dicha fila de la tabla
Formularios
- Dreamweaver CS4 también incluye tres nuevos elementos de validación para los formularios. El elemento de validación de contraseña permite que definas las reglas para las contraseñas (como por ejemplo, "esta contraseña debe tener una longitud de 10 caracteres y contener un mínimo de 2 números"). El elemento de confirmación de contraseña asegura que un usuario confirme la contraseña introducida. El elemento de validación de botón de radio te permite asegurarte de que se haya seleccionado un botón de radio antes de que se haya enviado el formulario.
Enlaces Relacionados |
|
Enlaces Relacionados |
|
