Está en la naturaleza del html que su contenido se ajuste a las medidas del navegador, reposicionando el contenido automáticamente y generando scrolls cuando éste supera unas medidas mínimas. Un swf, por el contrario, simplemente es un objeto embebido en un html con unas dimensiones y una posición fija por defecto. Cualquier comportamiento extra que deba adoptar un swf dentro del navegador para visualizarse correctamente recae sobre el programador.
Desde el punto de vista de Flex, esto no supone un gran problema ya que por defecto el framework está dotado de un sistema que permite crear una interfaz líquida con muy poco esfuerzo. Pero si hablamos de Flash, no existe un mecanismo que nos ayude a adaptar nuestra película a cualquier resolución.
Diseño líquido vs diseño estático
Mientras que en html se han acuñado muchos términos a la hora de hablar de los diseños (fijo, estático, flexible, líquido, fluido, elástico…), en flash, básicamente, podemos hablar que un site tiene un diseño líquido o estático.
En un diseño líquido el contenido se posiciona en función del tamaño del navegador. El programador debe decidir elemento por elemento si está anclado, si se ha de reescalar, reposicionar, etc. Y dependiendo de la complejidad del site puede ser un trabajo realmente complejo y tedioso.
Por contra, en el diseño fijo le damos un alto y un ancho a nuestra película y todos los elementos quedan ubicados de manera absoluta. Aunque a nivel de diseño y de programación es comodísimo, el problema estriba en que si alguien accede con una resolución mucho mayor verá la página pequeña desperdiciando mucho espacio, y si es menor se generarán barras de scroll que pueden dificultar la experiencia y la navegación.
Se elija uno u otro, siempre hay que decidir qué resolución mínima tendrá nuestra web.
Resolución mínima
Una de las primeras tareas que deberíamos hacer cuando empezamos un proyecto es decidir qué resolución mínima usaremos, o dicho de otra manera, a partir de que resolución de pantalla nuestros usuarios verán el contenido sin problemas. Hace unos años el estándard era 800×600, encontrándose ahora normalmente en 1024×768.
Aún tratándose de una web líquida, es recomendable fijar un mínimo para que los elementos no queden apelotonados cuando el navegador se reduce demasiado.
El problema
De manera más o menos consciente, cualquier site está pensado para trabajar con una resolución mínima, pero el gran problema es que mucha gente se olvida de las resoluciones inferiores. La razón de escoger medidas es ofrecer garantías de que una web será visualizada correctamente en la mayoría de los casos, pero en aquellos que no se pueda, todo el contenido debe seguir siendo igualmente accesible.
Nota: en este contexto, accesible hace referencia a que el contenido se puede ver/clicar, no hablo de accesibilidad web.
Y este problema no está asociado únicamente a nuevos programadores o gente inexperta. Sin ir más lejos, aquí hay dos ejemplos sacados del FWA (ambos recientes, nada de buscar en el 2006):
En el primero de ellos reescalan el contenido, pero si tu resolución es de 800x600px se corta y no se puede acceder al menú inferior de opciones. En el segundo, con la misma resolución, no se puede acceder al botón para detener el audio.
En ambos casos, los programadores decidieron que la resolución mínima de sus webs sería de 1024×768, pero han descartado al resto. Detectando que la medida del navegador era inferior y añadiendo un scroll vertical posibilitarían que todo el mundo pudiera acceder a todos los elementos.
Un ejemplo de lo impredecible de la web
Muchas veces nos creemos con derecho a descartar a x usuarios pensando que son una minoría, como cuando empezamos a dejar de lado a los usuarios con monitores de 800×600, pensando que una altura de 600px nunca más se daría.
Pues bien, un tiempo después empieza a proliferar un pequeño ordenador llamado netbook, cuya resolución estándard es de 1024×600. En los últimos 3 años, mientras que la venta de ordenadores cae de manera incremental, el crecimiento de los netbooks lleva un ritmo que nadie era capaz de predecir.
Yo, en mi netbook, ¿por qué no puedo navegar la web de energylab? ¿o porqué no puedo detener el volumen en la de harrypotter?
No caigamos en la demagogia fácil de las minorías, en la que alguien pudiera decir “Pues no uses Flash entonces, que hay unos cuantos que no tienen el plugin”. Cualquiera, en función de objetivos, es libre de escoger la tecnología que mejor se ciñe a su propósito, así como la resolución. Si un artista considera que la resolución mínima para ver bien sus pinturas ha de ser de 1920×1050, perfecto. Pero si descarta las inferiores muchos sólo verán parte de la pintura, mientras que si habilita el scroll dará la posibilidad a todo el mundo de verla íntegra.
Eligiendo una resolución
Un error frecuente a la hora de elegir la resolución es pensar que el tamaño del swf puede ser el mismo. Se elige siempre una resolución de pantalla, pero a estas medidas hay que restar otros elementos como el menú del sistema operativo y el tipo de navegador, teniendo en cuenta además la configuración de éstos (con/sin favoritos, barras de estado, barras alternativas como la de Google, Yahoo, etc). Horizontalmente apenas afecta, pero verticalmente bastante.
Yo, a día de hoy, suelo plantear las webs con una resolución mínima de 1024×768. Esto se traduce en un tamaño de 996×578 para mis películas flash. Los 28px que resto horizontalmente lo hago contemplando la posibilidad de que se genere scroll vertical de sistema, mientras que los 90px que pierdo de altura corresponden a la configuración de un Firefox estándard en un sistema Windows.
Nota: a excepción de Chrome que cuenta con una interfaz muy limpia, el resto de navegadores cuentan con menús similares, así como los distintos sistemas operativos, que tienen un menú principal.
Como es imposible tener una medida que encaje en todas las combinaciones, es preferible dejar unos cuantos píxels de margen. A veces, por intentar ajustar demasiado se genera un scroll mínimo de 3 o 4 píxels que ensucia más que ayuda.
Así pues, 996×578 es el tamaño mínimo que garantizo para que una web se vea correctamente. Si el navegador tiene menos espacio para mostrar, se generará scroll de sistema.
Nota: hay gente que prefiere utilizar un scroll propio en flash. Yo no soy muy partidario para este caso concreto.
Swffit
Para no tener que lidiar directamente con javascript, existe una utilidad llamada swffit que permite fijar las medidas mínimas y máximas de tu película y se encarga de todo: mostrar el scroll cuando es necesario, reescalar la película para que ocupe todo el tamaño disponible, centrar la película, etc. Imprescindible.
Resumiendo
Los que trabajamos con Flash estamos acostumbrados a ver como la gente lo ataca por distintas razones. El tema de las resoluciones es una de ellas. Y con razón.
Resulta difícil de creer que programadores que hacen piezas tan espectaculares como para ganar un Favourite no tengan en cuenta este punto. Por no hablar de todos aquellos que “aprenden flash en 2 días” y venden webs al vecino.
Si queremos quitarle la razón a los detractores de Flash, tanto los diseñadores como los programadores debemos hacer las cosas bien, y esto pasa por empezar con las cosas básicas.
Me ha gustado mucho el artículo. Yo por ejemplo nunca tengo en cuenta a la gente con una resolución de 800-600, pero lo del netbook creo que me ha abierto los ojos… Le prestaré más atencion a estas cosas!!
Ey me alegro del regreso, ha sido toda una sorpresa ver que esa rss que tenía fosilizada de pronto había cobrado vida :)
Yo para estos menesteres uso swfin, una alternativa al swfObject que Incorpora su propio método “scrollBarsAt”., y funciona realmente bien. http://code.google.com/p/swfin/
De todas formas este problema la mayoría de las veces empieza más arriba, en el diseñador :-P
Saludos y sigue escribiendo!!
Gracias Guirado/Javi.
No conocía swfin, le echaré un vistazo ;)
He probado el Swffit y va perfecto. El único problema está en las imagenes jpg.
¿Habría alguna manera de que no se pixelarán y perdieran calidad?
Si una imagen la reescalas más allá de su medida la “romperás” y perderá calidad. La única opción para que no se pixele es cargar una imagen con una resolución mayor.
Dependiendo del tipo de imagen (por ejemplo, si la usas como background), puede ayudar mucho meter una trama encima, con lo que el “pixelado” pasa bastante desapercibido.
Saludos!