Dreamweaver y Flash, Diseño Web Bitmap/Vector
Escrito por Revista NeoPixel Miércoles, 29 de Julio de 2009 10:58
Texto por: Edgar Parada
En el medio del diseño web podemos hablar de dos categorías: web y bitmap, a raíz del tipo elementos y técnicas que se utilizan para construir los proyectos. A pesar de que hay sitios web que combinan ambos planteamientos, es todavía muy marcada la diferencia entre Sitio Web HTML con imágenes Bitmap (GIF/JPG) muy enfocado a proyectos como sitios institucionales, portales, blogs, en donde el acceso al contenido es lo más importante; en contraste con los Sitios Web Flash con imágenes Vectoriales orientados a sitios web de alto impacto donde se encuentran los sitios de películas, videojuegos, aplicaciones RIA, por citar algunos ejemplos donde se da mayor importancia a la experiencia de usuario dentro del sitio.
Pero es el punto medio que combina lo mejor de ambas técnicas donde un diseñador web puede explotar al máximo sus capacidades, y son algunos trucos, experiencias y flujos de trabajo lo que trataremos de compartir en este artículo. Al paso del tiempo el diseño web ha evolucionado al punto que hoy en día encontramos sitios web que integran audio, video, aplicaciones, etc. y tanto Dreamweaver como Flash han crecido para adaptarse a esas necesidades. Desde sus orígenes como parte de una suite llamada Macromedia Studio hasta lo que ahora conocemos como Adobe Creative Suite, la integración que existe entre ambas aplicaciones siempre ha sido algo fundamental que ha contribuido mucho para que los Diseñadores Flash se interesen en el desarrollo web y así mismo para que los Desarrolladores Web tomen conciencia de sus interfaces y el tipo de experiencia que le dan a los usuarios de sus aplicaciones.
Algunos Trucos para Empezar
Cuando diseñamos un sitio web HTML, una de las primeras restricciones que notaremos es el uso libre de las tipografías. Tal restricción obedece a la diversidad de plataformas y sistemas operativos que existen en la Internet, para solucionarlo podemos apoyarnos de la plataforma Flash en varios sentidos. El primero y más fácil de todos es insertar un SWF con el texto y la tipografía que necesitemos desde Dreamweaver.
En un siguiente nivel podemos aprovechar la técnica sIRF para reemplazar el “texto normal” por “texto flash” totalmente libre de restricciones de uso de cualquier tipografía, aprovechando una combinación de javascript, CSS, y Flash.
El procedimiento podemos resumirlo en lo siguiente:
1.- Descargar el proyecto de sIFR del sitio oficial: http://www.mikeindustries.com/blog/sifr/
2.- Generar un proyecto nuevo en Dreamweaver e importar los archivos del proyecto sIFR.
3.- Crear un documento (X)HTML de prueba donde utilicemos los estilos CSS disponibles.
4.- Abrir el archivo FLA incluido para incrustar las tipografías que necesitamos.
5.- Mediante CSS utilizamos las clases generadas para reemplazar el texto.
Aprender a utilizar esta técnica es muy útil sobre todo cuando existe una especificación de uso de HTML por parte del cliente y queremos aún así tener libertad en el uso de las tipografías. El manejo de CSS y Javascript por parte de una herramienta como Dreamweaver se vuelve necesario para optimizar el tiempo de desarrollo con todas las ayudas que actualmente tiene: introspección de código javascript, manejo de estándares web, documentos relacionados, etc.
Otro truco que se vuelve básico para ciertas tareas es el poder mandar parámetros a los objetos SWF dentro del HTML, lo anterior obedece a varios propósitos desde el hecho de mandar alguna variable como parámetro al SWF para que algún código realizado en ActionScript pueda interpretarlo, hasta la posibilidad de cambiar la transparencia del fondo con wmode para crear los famosos banners no-intrusivos o eventos del sistema sobre el contenido, muy al estilo de portales como Yahoo.
Experience that Matters
Ese era uno de los grandes lemas de Macromedia, aquella empresa que contribuyó en gran parte a la evolución de la plataforma Flash y al crecimiento de la Web en general. Y fue gracias a esta visión y a la aparición de varios fenómenos que ya no podemos hablar de estas herramientas por separado.
El primero en la lista conocido como efecto EOLAS, que restringía el uso de plugins incrustados en el navegador provocó una actualización forzosa para Dreamweaver 8.0.2 que permitía mediante el uso de JavaScript de manera automática corregir el error, curiosamente la actualización nunca llegó a Flash 8 y era necesario abrir el HTML en Dreamweaver para actualizar nuestro contenido. Hoy en día esto se puede realizar de manera sencilla con un simple drag and drop de un SWF sobre un documento HTML abierto en Dreamweaver.
Otro factor importante fue la aparición de YouTube que provocó el que una cantidad importante de diseñadores web quisieran tener video en Flash en sus sitios, y esto dio pauta para que una simple extensión de Dreamweaver conocida como Flash Video Importer fuera incluida como un must-have de ahora en adelante, que no solamente permite ligar un FLV (video de Flash) a nuestras páginas si no que abre todo un abanico de posibilidades para realizar skinning, autoplays, loops y otro tipo de opciones muy interesantes.
Flujos de Trabajo
Ya hablando en materia de integración y flujos de trabajo es necesario nombrar un par de características presentes desde hace algunas versiones de las herramientas: Roundtrip y el Panel de Proyectos. La primera de ellas, el Roundtrip deja de lado a la publicación sencilla como HTML desde Flash que a pesar de ser el primer recurso que tiene todo usuario de la herramienta para exportar su contenido hacia la web, aún hoy en día tiene algunas carencias en cuestión de lo que se puede lograr con un poco de edición de ese HTML en Dreamweaver.
La idea es muy sencilla, ya que teniendo acceso a los archivos fuentes del SWF podemos incluirlos en nuestra definición de sitio en Dreamweaver y aprovechar las características de filtrado (cloaking) para evitar subir los archivos fuente (FLA) junto con los demás archivos. Lo que permite activar la opción de edición directa y tener todo un flujo de edición optimizado (Roundtrip) para acelerar bastante los tiempos de desarrollo.
En cuanto al Panel de Proyectos se refiere, es una opción más avanzada que hoy en día permite a los desarrolladores de aplicaciones Flash centralizar todos sus archivos, clases, librerías y componentes. Y en combinación con Dreamweaver tener todo un control de versiones y un esquema de publicación directa al servidor.
Y justo cuando creemos que todo esto pareciera llegar al límite de sus capacidades, aparece en escena SWFObject, un proyecto el cual todos los diseñadores/desarrolladores Flash deberían de tener presente. Ya que en futuras versiones de la herramienta será el estándar para incrustar objetos SWF en un HTML debido a las características tan flexibles que tiene. Y sin lugar a dudas el contar con un editor de código al estilo de Dreamweaver será fundamental para poder trabajar con esta tecnología.
Consideraciones Finales
Las posibilidades de integración que pueden llegar a tener Dreamweaver y Flash son incontables. En este artículo nos hemos centrado en platicar algunas de las más importantes, sin embargo hay temas que requieren un estudio aún más profundo como el hecho de combinar de manera transparente las aplicaciones AJAX con Flash, el entregar aplicaciones AIR desde Dreamweaver y/o Flash, aprovechar las capacidades del servidor de video Flash Media Server para integrarlo con portales tipo Web 2.0 entre otros.
Como diseñadores web, aunque nos decantemos por un cierto tipo de sitios web ya sean bitmap o vectoriales, no podemos ignorar del todo la existencia de las demás tecnologías y el poder dominar la integración de ambas corrientes nos lleva a un plano donde las posibilidades creativas se multiplican. Quedo en espera de sus comentarios e inquietudes acerca del tema.
Texto por Edgar Parada. Búscalo en twitter como @edgarparada
RSS feed Comments
