Cargando...
Feedback

Diseño líquido sobre Flash: adaptarse a cualquier tamaño

 

Durante el último año hemos estado experimentado con web basadas en diseño líquido sobre programación en Flash. Aquí os dejamos algunas de nuestras conclusiones.

El diseño líquido permite que las páginas web se adapten al tamaño de la pantalla, haciendo que algunas de sus partes redimensionen su tamaño o se redistribuyan por la pantalla de forma distinta según las medidas de la ventana del navegador.

Aunque a primera vista conseguir que la web se adapte a la pantalla de forma dinámica puede parecer muy interesante, no siempre es una buena opción. Dependerá en cada momento del tipo de web y del tipo de información que se quiera visualizar en su interior.

Teniendo en cuenta las limitaciones que pueden presentar las webs desarrolladas completamente en Flash, creemos que la mejor forma de jugar con diseño líquido es utilizando imágenes de fondo que puedan adaptarse al tamaño de la ventana o posicionando los elementos gráficos en las zonas laterales de la pantalla.

A continuación podéis ver algunos ejemplos:

Un buen ejemplo de diseño líquido aplicado a imágenes en background se puede observar en una web que hemos desarrollado, conjuntamente con la empresa de diseño gráfico Bifid, en la que ha sido necesario disponer de una zona lo más grande posible para mostrar imágenes de montaña, www.guiesnordsud.net.  La web ha sido desarrollada completamente en Flash y se puede observar como en función del tamaño de la ventana del navegador, la imagen de fondo se ajusta a la pantalla y algunos detalles gráficos se mantienen flotando en las esquinas de la parte inferior de la pantalla a medida que la pantalla aumenta o disminuye de tamaño.

/blog/images/flash_liquid_design.png

Otro ejemplo de diseño líquido lo podéis encontrar en otra web muy simple que desarrollamos el año pasado (diseño gráfico de David Clos), www.recrec.cat, en donde el pie de página dispone de dos zonas (imagen a la izquierda y datos de contacto a la derecha) que se reajustan automáticamente al tamaño de la ventana del navegador.

/blog/images/example_liquid_design2.png

10 comentarios

Estan muy buenos los trabajos, pero... ¿algun manual de donde aprender a hacer sitios como esos?, hace mucho he intentado con el escalado liquido y no me ha dado resultado, gracias !
Bernardo Ibarra 09.03.2010 | 06:06
Hola Bernardo, pues la verdad es que nosotros no conocemos ningún manual que explique como hacerlo. Al principio de trabajar con Flash líquido buscamos información de como hacer este tipo de formatos web y no encontramos mucha, así que al final nos decidimos por crear nuestro propio framework de código en ActionScript para poder controlar las dimensiones líquidas y posiciones relativas de los elementos en Flash. No puedo asegurártelo, pero en cuanto tengamos un rato podría pasarte el código de Actionscript que hemos utilizado con un ejemplo práctico de uso. Un saludo, Jordi.
Jordi 12.03.2010 | 19:54
Muchas gracias Jordi, la verdad te agradeceria muchisimo la ayuda que me puedas prestar con alguna informacion que me ayude a poder realizar este tipo de sitios. Quedo pendiente y gracias de nuevo !!!
Bernardo Ibarra 13.03.2010 | 00:01
Bueno, yo también estoy en la misma que Jordi, y aprovecho que parecen muy buena gente para pedirles que, de ser posible, también puedan compartir tan valioso código con migo... Muchas Gracias!
Juan Manuel Cantero 18.03.2010 | 15:00
en la misma que bernardo ja!
Juan Manuel Cantero 18.03.2010 | 21:51
Hola he visto el articulo y me ha parecido muy interesante ya que este tema me ha dado bastantes quebraderos de cabeza. Y si pudierais pasar el framework con un ejemplo de uso estaria bastante bien. gracias
zoaks 06.05.2010 | 10:43
Hola, he preparado una pequeña demo que contiene las funcionalidades básicas para posicionar de forma líquida cualquier movieclip en diferentes puntos de la ventana. Está pensada para poder funcionar a partir de Flash Player 8. Si queréis descargar la demo y leer una pequeña explicación de su funcionamiento, os dejo más información en el siguiente post: http://www.conductiva.com/es/blog/post/61
jordi 08.05.2010 | 14:11
Jordi...

Simplemente, gracias... excelente informacion y aporte para quienes hemos estado buscando como implementar ese tipo de sitios. De nuevo muchas gracias !
Bernardo Ibarra 09.05.2010 | 13:27
Jordi, te agradezco mucho por la informacíon, la verdad que me resulta mas que útil como punto de partida.
Un abrazo!!!
Juan Manuel Cantero Petryna 10.05.2010 | 15:15
thanks!
tadd 16.09.2010 | 08:50

Se han cerrado los comentarios para este post
 
© 2013  • condiciones generales