Los tutoriales de vídeo para las nuevas funciones de Dreamweaver CS6 ya están disponibles en Adobe TV (http://www.adobe.com/go/learn_dwcs6_adobetv_es).
Insertar contenido de vídeo HTML5
En este vídeo comprobará lo fácil que es insertar el contenido de vídeo en una página Web basada en HTML5 en Adobe Dreamweaver CS6.
por Chad Chelius
El cuadro de diálogo Administrar sitios (Sitios > Administrar sitios) dispone de un nuevo aspecto, aunque gran parte de la funcionalidad sigue siendo la misma. La funcionalidad adicional consiste en la capacidad de crear o importar sitios de Business Catalyst.
Use la potente función de diseños de cuadrícula fluida de Dreamweaver (Nuevo > Nuevo diseño de cuadrícula fluida) para crear diseños CSS adaptables que respondan a distintos tamaños de pantalla. Cuando se crea una página Web con una cuadrícula fluida, el diseño y el contenido se ajustan automáticamente al dispositivo de visualización del usuario, ya sea este un equipo de sobremesa, una tableta o un smartphone.
- Introducción a los diseños de cuadrícula fluida
- Uso de diseños de cuadrícula fluida en Dreamweaver CS6 (tutorial)
- Adobe TV: Uso de diseños de cuadrícula fluida en Dreamweaver CS6
- Adobe TV: Creating adaptive designs with fluid grid layouts in Dreamweaver CS6 (Creación de diseños adaptables con diseños de cuadrícula fluida en Dreamweaver CS6)
- Adobe TV: Descripción detallada del diseño de cuadrícula fluida con Scott Fegette, jefe de producto de Dreamweaver
Use el nuevo panel Transiciones CSS para aplicar cambios suaves en las propiedades de los elementos de páginas basadas en CSS en respuesta a eventos desencadenantes como pasar el puntero, hacer clic y situar el foco. (Un ejemplo común es un elemento de la barra de menús que se funde de forma gradual de un color a otro cuando se coloca el puntero sobre él.) Ahora puede crear transiciones mediante compatibilidad de nivel de código y con el nuevo panel Transiciones CSS (Ventana > Transiciones CSS).
Ahora puede aplicar varias clases CSS a un único elemento. Seleccione el elemento, abra el cuadro de diálogo Selección de varias clases y elija las clases. Después de aplicar varias clases, Dreamweaver crea una nueva clase múltiple a partir de sus selecciones. La nueva clase múltiple estará entonces disponible en otros lugares en los que se realizan selecciones de CSS.
Puede abrir el cuadro de diálogo Selección de varias clases desde varios puntos de acceso:
- El inspector de propiedades de HTML (seleccione Aplicar varias clases del menú.)
- El menú emergente Regla de destino del inspector de propiedades de CSS
- El menú contextual del selector de etiquetas situado en la parte inferior de la ventana de documento (haga clic con el botón derecho del ratón en una etiqueta y elija Establecer clase > Aplicar varias clases).
A través de la integración directa con el nuevo e interesante servicio PhoneGap Build, los clientes de Dreamweaver CS6 pueden crear aplicaciones nativas para dispositivos móviles con los conocimientos que ya poseen sobre el código HTML, CSS y JavaScript. Una vez que haya iniciado sesión en PhoneGap Build mediante el panel PhoneGap Build (Sitio > PhoneGap Build), puede crear su aplicación Web directamente en el servicio PhoneGap Build y descargar las aplicaciones móviles resultantes en su escritorio local o dispositivo móvil. El servicio PhoneGap Build administra su proyecto y le permite crear aplicaciones nativas para las plataformas móviles más habituales, entre las que se encuentran Android, iOS, Blackberry, Symbian y webOS.
jQuery Mobile 1.0
Dreamweaver CS6 se suministra con archivos de jQuery 1.6.4 y de jQuery Mobile 1.0. Las páginas de inicio de jQuery Mobile están disponibles en el cuadro de diálogo Nuevo documento (Archivo > Nuevo > Página de muestra > Mobile Starters). Ahora también puede elegir entre dos tipos de archivos CSS al crear páginas de jQuery Mobile: archivos CSS completos o archivos CSS divididos en componentes de estructura y tema.
- Aplicaciones y páginas de inicio de jQuery Mobile
- Adobe TV: Compatibilidad mejorada con jQuery Mobile en Dreamweaver CS6
Muestras de jQuery Mobile
Previsualice todas las muestras (temas) de un archivo CSS de jQuery Mobile mediante el nuevo panel Muestras de jQuery Mobile (Ventana > Muestras de jQuery Mobile). A continuación, utilice el panel para aplicar las muestras o eliminarlas de distintos elementos de la página Web de jQuery Mobile. Utilice esta función para aplicar individualmente las muestras a encabezados, listas, botones y otros elementos.
- Uso de temas de jQuery Mobile en Dreamweaver CS6 (tutorial)
- Adobe TV: Compatibilidad mejorada con jQuery Mobile en Dreamweaver CS6
Nuevo sitios de Business Catalyst
Ahora puede crear un nuevo sitio de prueba de Business Catalyst directamente desde Dreamweaver y explorar las amplias prestaciones que Business Catalyst puede ofrecer a sus clientes y proyectos.
Panel Business Catalyst
Tras iniciar sesión en el sitio de Business Catalyst, puede insertar y personalizar módulos de Business Catalyst directamente desde el panel Business Catalyst (Ventana > Business Catalyst) en Dreamweaver. Dispondrá de acceso a amplia funcionalidad, como catálogos de productos, integración con blogs y redes sociales, carro de compras, etc. La integración ofrece una forma de que sus archivos locales de Dreamweaver y el contenido de la base de datos del sitio en el sitio de Business Catalyst funcionen de forma armonizada.
- Integración Dreamweaver-Business Catalyst (referencia)
- Reimport Business Catalyst sites into Dreamweaver CS6 (referencia) (Reimportación de sitios de Business Catalyst en Dreamweaver CS6)
- Customize a Business Catalyst module using Dreamweaver (referencia) (Personalización de un módulo de Business Catalyst mediante Dreamweaver)
- Adobe TV: Creating and Editing your Business Catalyst website (Creación y edición de su sitio Web de Business Catalyst)
Ahora puede utilizar fuentes creativas compatibles con Web (como fuentes Web de Google o Typekit) en Dreamweaver. En primer lugar, use el Administrador de fuentes Web (Modificar > Fuentes Web) para importar una fuente Web al sitio de Dreamweaver. La fuente Web, queda disponible para su uso en las páginas Web.
El cuadro de diálogo Vista previa de imagen de Dreamweaver CS5 ahora se llama cuadro de diálogo Optimización de imágenes. Para abrir el cuadro de diálogo, seleccione una imagen en la ventana de documento y haga clic en el botón Editar configuración de imagen del inspector de propiedades. Algunas de las opciones que se encontraban en el antiguo cuadro de diálogo Vista previa de imagen de CS5 ahora aparecen en el inspector de propiedades.
Se muestra una vista previa de la imagen en la vista Diseño al cambiar la configuración del cuadro de diálogo Optimización de imágenes.
Dreamweaver utiliza transferencia multicanal para transferir simultáneamente los archivos seleccionados a través de varios canales. Dreamweaver también permite utilizar simultáneamente las operaciones Obtener y Colocar para transferir archivos.
Si hay suficiente ancho de banda disponible, la transferencia asíncrona multicanal de FTP acelera considerablemente el proceso de transferencia.
Para obtener más información, consulte http://blogs.adobe.com/dreamweaver/2012/06/ftp-improvement-in-dreamweaver-cs6.html.
Las condiciones de Creative Commons no cubren las publicaciones en Twitter™ y Facebook.