Un píxel ya no es lo que era

Una de las cosas complicadas de colocar cosas en una pantalla es que hace tiempo que dejamos de saber a priori qué tamaño físico tiene esa pantalla, ni la ratio (¿4:3, 16:9, 16:10, 2.35:1?) ni cuántos píxeles tenemos a mano (ni, por tanto, la densidad de esos píxeles en pantalla, que hoy en día puede ir de algo más de 100 para una pantalla de ordenador a más de 200 en algunos dispositivos móviles).

Parece ser que el hecho de que esto sea así desde hace tiempo no ha evitado que cobre especial atención ahora por el rumor de que la próxima iteración de hardware del iPhone se va a ir a unos muy espectaculares 960×480 píxeles, lo que ha hecho que, naturalmente, se inquieten los desarrolladores, tanto web como de aplicaciones nativas, que obviamente no quieren que sus aplicaciones se encojan hasta niveles ridículos en una pantalla muy grande. Es fácil suponer que Apple no va a meter la pata con una cosa así, pero me ha llevado a QuirksBlog, que le dedica una entrada al tema, A pixel is not a pixel is not a pixel que habla, a su vez, de la solución que tiene Android para el tema (la diversidad de pantallas de los dispositivos Android provoca vértigo y, en más ocasiones de las deseables, nauseas…). Copio-y-traduzco de la página de soporte para múltiples pantallas:

Density-independent pixel (dip)

Una unidad de píxel virtual que pueden utilizar las aplicaciones para definir su IU para expresar dimensiones de ‘layout’ o posicionado independientemente de la densidad.

El píxel independiente de densidad es equivalente a un píxel físico en una pantalla de 160 ppp, la densidad base asumida por la plataforma […]. Se recomienda fuertemente usar unidades dip para definir la IU de la aplicación, como forma de asegurar una buena presentación de la IU en diferentes pantallas.

Cosas veredes, Sancho…

El Opera Web Standards Curriculum, en español y catalán

Como sucede de vez en cuando, voy a juntar trabajo y blog en una entrada. Y es que parte de mi trabajo durante los últimos meses ha sido encargar y revisar la traducción, edición web y publicación del Opera Web Standards Curriculum, que desde hace unos días se encuentra disponible tanto en castellano como en catalán:

El Opera Web Standards Curriculum es una gran obra (por su calidad y su tamaño) para introducirse en el mundo del diseño y desarrollo web con estándares. Hace unos nueve meses ya (como un parto, oiga) comenzamos a buscar alternativas para la asignatura de Lenguajes y estándares web del grado de Multimedia de la UOC y el Curriculum, con su licencia Creative Commons, nos pareció una gran forma de dar a nuestros estudiantes un recurso de aprendizaje de calidad notable y, a la vez, contribuir a la comunidad en general con un recurso abierto.

«Sólo» tenemos los primeros 38 artículos y la cosa aún no está completamente acabada (¿qué lo está, en la web?). Para cualquier error que detectéis, tenéis los comentarios de esta entrada, mientras habilitamos un mecanismo mejor (sabemos, de momento, por ejemplo, que la navegación presenta algún problemilla en navegadores ‘webkit’ y que, precisamente con Opera :-S, el CSS para los <code> es más bien enorme…).

En unas semanas espero tener publicado en Mosaic algo un poco más extenso sobre el tema en un par de semanas pero, de momento, sirva esta entrada como anuncio no oficial. Espero que os sea de utilidad :-).

Frameworks CSS y clases semánticas

Habitualmente, habríamos dicho frameworks o clases semánticas: los frameworks CSS, inevitablemente, nos llevaban a nombres de clase poco semánticos como span-24 si pretendíamos que el div en cuestión ocupase 24 columnas de nuestra parrilla. Pero, como explican en Sitepoint, esto ya no es así. Por un lado, tenemos ‘scripts’ que ‘compilan’ los diseños sobre frameworks CSS a clases semánticas (como ejemplo citan el compress.rb de Blueprint, todo un descubrimiento del que no tenía constancia). Y por el otro, frameworks que no son CSS directamente, sino que funcionan sobre lenguajes de scripting de servidor, como Compass o CSScaffold.

Va a haber que actualizarse…

Grids CSS Blueprint con Boks

Captura de pantalla de la herramienta Boks, descrita en el texto de la entrada
Pues no es tan difícil, usar un framework CSS...

A la hora de maquetar una página usar uno de los muchos frameworks CSS que corren por ahí (más info en anieto2k, por ejemplo) puede ser una buena forma de ahorrar tiempo y esfuerzo. El problema, para los que no somos nada visuales, es la ausencia de herramientas intuitivas que te permitan maquetar de manera más o menos gráfica… o eso pensaba yo, hasta que he descubierto Boks, un ‘editor visual de parrilas’ (o ‘grids’, que queda más ‘cool’) que se basa en el framework Blueprint, uno de los más populares, por lo que parece.

Os dejo con un screencast introductorio (hay más):

[vimeo]http://www.vimeo.com/3944726[/vimeo]

¿Cuándo lo podré usar?

Captura de pantalla de la web 'When Can I Use', que indica qué nuevas características de los estándares web soporta cada versión de cada navegador
Los selectores de CSS 2.1, ya. Los 3, tardarán...

Es estos tiempos interesantes de versiones cambiantes de navegadores y estándares, saber qué está implementado en cada navegador es un auténtico cirio. Tremendamente útil, pues, es When can I use…, que te lista qué puedes usar en cada uno de los ‘grandes’ navegadores, en su versión ‘actual’, anterior, ‘próxima’ y futura…