San Martin 948, Piso 2, Capital Federal, ARG.
(5411) 5239-3030 (rotativas)
cursos@dotzero.org
www.dotzero.org
(5411) 5239-3030 (rotativas)
cursos@dotzero.org
www.dotzero.org
Diseño adaptable con CSS3 Media Queries
por Hernán Beati el 11-10-2011
Demasiados diseñadores web, aún hoy siguen aferrados a la vieja idea de diseñar para una sola resolución de pantalla.
Esa idea proviene de una historia que (hasta hace poco) les daba la razón: las resoluciones mayoritarias eran prácticamente únicas, y fueron evolucionando de a saltos leves:
• En 1995, diseñábamos para 640 x 480px.
• En 2000, pasamos a diseñar para 800 x 600px.
• En 2005, para 1024 x 768px.
Pero entre los años 2008 a 2010, un doble proceso que revolucionaría la web se desató: por un lado, vivimos un aumento de resolución nunca antes visto, y por el otro, una cantidad enorme de nuevos dispositivos muy pequeños comenzaron a acceder a la web.
Como parte del primer proceso, los antiguos monitores de 14 y 15 pulgadas fueron reemplazándose por pantallas de LCD y LED con resoluciones que fueron creciendo desde los 1280px de ancho, pasando por 1366, 1440, 1680, 1920, 2048, 2560, y el número de pixeles de ancho seguirá creciendo con el paso del tiempo, sin dudas...
Y en el segundo caso, del 70% de la humanidad que posee un celular, el 85% de ellos ya navega por la web, usando dispositivos que parten de una pantalla de 160px de ancho, pasando por 240, 320, 480, 576, 768, 800... y toda una gama de valores intermedios.
El problema de no considerar esta diversidad de tamaños de dispositivos, es que los usuarios de móviles sufren lo que se llama “miniaturización”: de un sitio diseñado para PC, a tamaño natural y legible, solo alcanzan a ver una pequeñísima fracción en el tamaño de su pantalla, de aproximadamente una décima del ancho y una décima del alto, o sea: ven apenas una centésima parte del sitio de PC!...
Imaginemos el esfuerzo de hacer zoom y scroll en uno y otro sentido... solo para poder leer una simple página web!
Para solucionar esto, CSS3 nos trae una técnica llamada Media Queries, que nos permite entregar a cada tamaño de dispositivo una hoja de estilos diferente (y por lo tanto, unas imágenes y tamaños de textos diferentes), acordes al tamaño del dispositivo, optimizando el layout (cantidad de columnas) y reduciendo el tiempo de carga a lo estrictamente necesario.
Si bien la analizamos a fondo en nuestro curso de HTML5 y CSS3, esta idea para nosotros, como diseñadores, solamente implica tener en cuenta los rangos de tamaño que abarcan a un celular antiguo (128 x 160px), uno intermedio (320 x 240px), iPhone, iPad vertical y iPad horizontal, y pantallas de PC con mayor resolución. Apenas seis ligeras variantes de un mismo estilo e identidad visual, que pueden llevarnos solo un par de horas extra de trabajo, pero que a cambio, aseguran la legibilidad y navegabilidad a todos los usuarios de los sitios web que diseñemos.
Referencia: http://www.mediaqueri.es
Y Apple lo hizo Anunció hoy iBooks Author
¿Cómo convertir un archivo Flash en HTML5? Google Swiffy nos ayuda a convertir un archivo.swf en HTML5