Tips para Adobe Dreamweaver CS4
Escrito por Revista NeoPixel Miércoles, 04 de Noviembre de 2009 12:04
Texto por: Scott Fegette (@sfegette en Twitter) y Devin Fernández
1.- Formato de código al instante
¿Debes trabajar con un CSS en un proyecto o widget que es simplemente ilegible? Usa la función Apply Source Formatting y reformatéalo exactamente según sus especificaciones. Solo da clic en el icono Format Source Code en la parte inferior de la barra de herramientas Coding (Edit>Toolbars>Coding) y selecciona Code Format Settings para configurar su formato de preferencia. Así puedes aplicarlo con un solo clic a cualquier archivo abierto seleccionando Apply Source Formatting desde el icono Format Source Code.
2.- Pre-visualizar páginas dinámicas
El nuevo modo Live View de Dreamweaver te ayuda a visualizar cómo se verán las páginas Web en un explorador pero, ¿qué pasa con las “vistas” dinámicas de aplicaciones Web como WordPress? Selecciona HTTP Request Settings desde View>Live View Options y entonces ingresa los parámetros GET o POST que necesitas para ver tu aplicación de forma correcta. ¡Así de simple!
3.- Diseño de forma interactiva
Otra característica de Live View en Dreamweaver CS4 es la habilidad de congelar JavaScript. Si estás trabajando en un menú desplegable de gran estilo, o si deseas diseñar con una pestaña particular seleccionada, solo enciende Live View (View>Live View), interactúa con tu página para obtener el estado preferido y luego presione F6. Ahora tu página está congelada en el lugar correcto y puedes darle estilo a la interfase interactiva con facilidad.
4.- ¡Wideget Manía¡
Aunque Dreamweaver CS4 se distribuye con widgets Spry UI para la construcción rápida de interfases Web, puede que necesites aprovechar soluciones de otros terceros. Solo da clic en el icono Extend Dreamweaver (luce como una palanca) en tu Barra de Aplicaciones y seleccione Browse for Web Widgets. Esto te llevará a Adobe Exchange donde podrás encontrar widgets adicionales de proveedores como Yahoo!, JQuery y muchos otros.
5.- Formato de texto sin desorden
Mucha gente usa Dreamweaver como una forma de actualizar contenido visualmente, como en un procesador de palabras. Antes de Dreamweaver CS4, esto podía resultar en reglas CSS redundantes como .class1, .class2 y así sucesivamente. En Dreamweaver CS4, solo cambia tu inspector Property a modo HTML (da clic en el icono HTML a la izquierda del inspector) y dile adiós a todas los CSS redundantes, insertando solo las marcas HTML apropiadas.
6.- Teletranspórtate a tu CSS
El Code Navigator le da acceso al código CSS aplicado a una selección en más que solo Design View. Puedes usar el Code Navigator en Live View, Code View o hasta en el selector de etiqueta. Para entrar al Code Navigator, solo da clic en Command-Option (PC: Ctrl-Alt-clic) en un elemento y una ventana pop-up se abrirá para mostrar todas las reglas CSS aplicadas a tu selección. Da clic en una regla para ser transportado instantáneamente al código fuente CSS relacionado. (Nota: en el selector de etiqueta, da clic en una etiqueta y luego presione Command-Option-N [PC: Ctrl-Alt-N]
7.- Ayuda visual para inspeccionar los CSS
Enciende las variadas ayudas visuales de CSS (View>Visual Aids) para una explicación visual de los misterios de la caja modelo, como los márgenes, padding y flotadores aplicados a un elemento determinado en la página. La opción de ayuda visual CSS Layout Backgrounds te ayuda a ordenar hasta los más complejos layouts con sus complicadas agrupaciones con solo aplicar un único fondo de color a cada <div> individual.
8.- Espacios de trabajo con memoria
La nueva interfase de Dreamweaver CS4 permite paneles e inspectores flexibles y configurables: arrástrelos a nuevas posiciones, a nuevos flotadores y más. Pero, todavía mejor, si encontraste un layout cómodo que te funciona mejor, guárdalo como tu nuevo espacio de trabajo (Designer Compact>New Workspace), dále un nombre y luego podrás llamarlo, junto con muchas otras configuraciones específicas de espacio de trabajo, con solo un clic.
9.- Formularios profesionales
¿Deseas validar tus campos de formularios como los profesionales, pero te preocupa tener que reconstruirlos desde el principio? Pierde cuidado. Solo selecciona un elemento de formulario existente, como un campo de texto, y aplica un widget Spry Validation desde el menú Insert>Spry. Luego controla los requisitos de validación como el mínimo o máximo de caracteres directamente desde el inspector Property.
10.- Datos dinámicos para el común de nosotros
La función Spry Data Set te permite crear contenido dinámico, como una tabla dinámica, sin los obstáculos de una base de datos. Deje que la guía de Spry Data Set (Insert>Spry>Spry Data Set) te lleve a definir una fuente de datos y coloque los datos en una tabla dinámica Spry en tu página. Para mantener las cosas todavía más simples, usa una tabla HTML básica como tu fuente de datos.
Texto por:
Scott Fegette
Gerente Técnico de Producto de Dreamweaver en Adobe.
Antes de unirse al equipo de Dreamweaver, se desempeñaba como evangelista y gerente de ingeniería de Flash Video en el equipo Web de Macromedia responsable de construir la infraestructura de sitio, servicios y arquitectura que ofrece hoy en día Adobe.com.
Previo a su experiencia con Macromedia en 2000, Scott se entrenó en diseño y desarrollo Web como director de servicios online para MetaCreations, una compañía de desarrollo de software que estuvo basada en Santa Bárbara, contribuyendo tanto al diseño del sitio global y código de marco de trabajo de servidor como manejando un equipo de 8 diseñadores y desarrolladores para dar soporte al sitio.
En su tiempo libre, Scott es un músico profesional y fotógrafo y cineasta independiente en San Francisco.
Devin Fernández
Gerente Senior de Producto de Creative Suite
Devin se relaciona activamente con la comunidad de usuarios finales para entender mejor los principales obstáculos de diseño que encuentran los diseñadores Web e interactivos. En el proceso de desarrollo de producto, él es el abogado de los consumidores, con el objetivo de dar la dirección correcta al diseño y la estrategia para diseñar conjuntos de funciones integrales que resuelvan los problemas de diseño del mundo real.
Fernández se unió a Adobe en 2004. Antes de ello, trabajó en AT&T, en donde se desempeñó como director asociado responsable de los servicios de aplicación administrados por la compañía.
Devin recibió el título de Masters of Business Administration en la Universidad de California en Berkeley. También es titulado de Bachelor of Science por la misma Universidad.
RSS feed Comments
