Algunas versiones de los productos son revolucionarias, y algunas son evolutivas. Es raro cuando pueden ser ambas. Considerando que el lanzamiento de Dreamweaver CS5.5 puede ser simplemente evolutivo dado el número de versión “punto cinco”, las características contenidas están altamente enfocadas en ayudarte a comenzar tu propia revolución basada en proyectos multiscreen, tan solo se requiere de un pequeño cambio en el flujo de trabajo con Dreamweaver, para afinar tus habilidades como un profesional de la web.

Dreamweaver CS5.5

Con HTML5 y CSS3 trayendo un nuevo nivel de consistencia entre dispositivos, así como nuevas capacidades independientes de diseño y media, en Dreamweaver CS5.5 se explotan ambos para ayudarte a llevar tus proyectos a un siguiente nivel, independientemente de si estas empezando un nuevo proyecto que requiera convertirse en una aplicación móvil o migrando un sitio web para dispositivos móviles.

Procesamiento y Live View

Aunque no sea evidente después de leer la parte posterior de la caja de Dreamweaver CS5.5, Live View y Design View han sido actualizadas para tomar ventaja de las últimas actualizaciones de Webkit, el motor de renderizado de navegadores de escritorio como Safari y Chrome, así como la mayor parte de navegadores móviles para arrancar y de Adobe AIR. Esto asegura que obtengas la vista previa más representativa de tus proyectos a través del escritorio y dispositivos móviles y permite al autor visualizar experiencias ricas de HTML5 y CSS3 con más confianza que nunca antes. Ahora echemos un vistazo a algunas de estas características dentro de Dreamweaver CS5.5

Edición de CSS3 y HTML5

Aunque muchos dispositivos móviles proclaman dar el poder de la web en la palma de la mano, en realidad las diferencias entre tabletas, teléfonos, navegadores de escritorio, e incluso cajas set-top de alta definición pueden representar una gran variedad de retos diseñando e implementando una simple interface que trabaje igual de bien en cada uno. Pero con los Media Queries de CSS3, tú no necesitas limitar tus diseños ya que es posible crear contenido HTML específico rápidamente y fácilmente visualizar alguna hoja CSS basada en la forma y resolución del dispositivo que estará navegando el sitio.

Si estás comenzando con un sitio web existente, una aplicación, o proyecto para algún cliente, puedes simplemente comenzar haciendo click en el botón Multiscreen en la parte superior de la ventana de documento en Dreamweaver CS5.5, y se te presentara con el panel de vista previa Multiscreen (el cual hizo su debut en el paquete de actualización del año pasado Dreamweaver HTML5 pack/11.0.3, pero ha sido en gran medida actualizado y pulido desde entonces). Los tres paneles del panel de la vista previa Multiscreen representan los tres factores de dispositivo más comunes en la actualidad: Escritorio, Teléfono, y Tableta. Y aunque todas muestren el mismo diseño, tu puedes usar el botón de Media Queries para orientar con precisión hacia nueva hoja de estilos CSS o hacia un archivo existente para afinar o replantear completamente la interfaz para algún navegador con un tamaño de ventana que se encuentre en un rango especifico.

Si acabas de empezar con CSS3, puedes utilizar las resoluciones preestablecidas o si eres un veterano en las Media Queries puedes agregar y modificar las resoluciones en tus archivos CSS asociados como mejor te parezca. En pocos pasos se pueden construir nuevas interfaces específicas para mobile. Esto es crítico para ayudar a realizar un trabajo eficiente con dispositivos móviles, y separar tu diseño del contenido.

Integración Móvil con jQuery

Para proyectos específicamente móviles, Dreamweaver CS5.5 integra el nuevo framework de JQuery móvil para permitir el desarrollo y el diseño de una interfaz móvil con la mínima cantidad de problemas. El equipo de Dreamweaver ha estado trabajando directamente y contribuyendo con el proyecto de jQuery Mobile, para asegurarse de no solo estar construyendo la herramienta adecuada para tal propósito, si no de compartir su experiencia en esta área con la comunidad en general.

Para crear una nueva aplicación de jQuery móvil, basta con ir a la opción Page from Sample > Mobile Starters en la nueva caja de dialogo del documento. Puedes elegir una plantilla de inicio que utiliza una versión hosteada de la librería de jQuery, o un sitio local con los archivos jQuery instalados en tu disco duro o servidor, o una versión creada para una aplicación móvil desarrollada con PhoneGap.

Desde las opciones anteriores, es posible editar la estructura base móvil de jQuery, la cuál es en esencia una serie de divs con funciones que representan diferentes páginas y sus elementos header/content/footer posteriores, así comorevisar los cambios con Live View para visualizar la aplicación completa y con la potencia de JavaScript para revisar la interacción y diseño tal y como los definiste, y hacer uso de Design View para editar rápidamente el contenido y la aplicación completa es muy pocos pasos.

El panel Insert ahora incluye una nueva categoría de jQuery Mobile que te permite acceder con un click a todas las interfaces nativas de jQuery Mobile y sus widgets, los cuales también pueden ser previsualizados con interactividad dentro de Live View. Y para hacerlo aún mejor, hemos reforzado el code hinting de JavaScript en Dreamweaver con soporte ampliado para jQuery, incluyendo DOM hinting para facilitar la unión de elementos de tu pagina a métodos y eventos de jQuery.

Apps Nativas (para iOS y Android) con PhoneGap

Aunque nuestro enfoque en esta versión de Dreamweaver ha sido principalmente basado en contenido, la demanda de aplicaciones móviles nativas ha ido en incremento llegando a ser parte de los requerimientos modernos de los proyectos web. Aprovechando tus habilidades de Dreamweaver y HTML para el desarrollo de aplicaciones nativas siempre ha sido una tarea que requiere una inversión importante de tiempo para aprender nuevos modelos de codificación y SDKs, pero ahora puedes construir aplicaciones nativas para Android y iOS (en la plataforma MAC) usando nada más que HTML5, CSS3 y JavaScript.

El framework PhoneGap es una forma ahora muy popular para empaquetar aplicaciones basadas en HTML dentro de aplicaciones nativas en lugar de reconstruirlas desde cero, y puedes ahora aprovechar directamente en Dreamweaver la migración de tus proyectos existentes basados en HTML, imágenes y el contenido hacia aplicaciones nativas.

Para Android, el proceso complejo de instalación, configuración, y verificación de él SDK de Android ha sido siempre un poco complicado, Dreamweaver CS5.5 quita todo el dolor de este proceso proporcionando una opción de “fácil instalación”, la cual hará todo lo anterior en el background. Aunque las herramientas del SDK del Apple iOS están sujetas a un modelo de licencia diferentes (y solo disponibles en la plataforma MAC), una vez que hayas instalado el SDK de Apple iOS (o Xcode desde la Mac App Store), tu simplemente apuntas Dreamweaver CS5.5 al directorio /Developer en tu disco duro y estás listo para empezar.

A partir de aquí, cualquier sitio de Dreamweaver puede llegar a ser una aplicación móvil nativa, basta con construir la interfaz de la aplicación usando todas las capacidades de diseño de Dreamweaver CS5.5 (incluyendo el soporte a jQuery móvil), probar el comportamiento general en Live View, y entonces usar la opción Build and Emulate para previsualizar tu aplicación directamente dentro del emulador nativo de iOS o Android.

Pero espera, hay más…

Aunque las características cubiertas aquí pueden ser vistas como las destacadas de Dreamweaver CS5.5, algunas de las actualizaciones aunque sean menos revolucionarias no las hace menos importantes. Como el soporte a FTPS y FTPeS que permite una mayor compatibilidad con servidores modernos de transferencia de archivos; la validación del W3C permite validar código HTML contra del servicio de validación del W3C en vivo y soporte actualizado para Subversion 1.7 asegura que tú podrás siempre estar en sintonía con grupos de trabajo distribuidos y flujos de trabajo diseñador/desarrollador.

Y como siempre, nos ocupados de arreglar un montón de pequeños problemas funcionales, meteduras de pata, y bugs que van mucho mas allá de un rápido resumen del articulo. Esperamos que seas capaz de abrir Dreamweaver CS5.5 y comenzar de inmediato a utilizarlo para hacer de todos tus proyectos una micro evolución en sí mismo—no podemos esperar a ver lo que construirás con él!

Este articulo esta publicado en Adobe Developer Connnetion (devnet) bajo licencia Creative Commons, escrito originalmente por Scott Fegette, Product Manager de Dreamweaver.