juantomas Hacking the planet

4 agosto, 2010

Como usar CSS3 para cambiar dinámicamente tus diseños web

No es nuevo pero cada día es más complicado resolver como diseñas una página web y/o presentas información.

Hace muchos años el mayor problema era a que resolución te iban a ver y esto era básicamente una cuestión de la resolución del monitor más o menos. Con la proliferación de iPhones/iPads/Androids y el resto de la familia de teléfono inteligentes ahora el problema es mayor. Ya no es solo es una cuestión de resolución es una cuestión de usabilidad: es un pecado «mostrar» un interface en un nexus one o un iPhone que en un iPad o cualquiera que sea la siguiente tableta que salga al mercado. Pero no solo esto la pantalla «retina» del iPhone4 muestra horrorosamente los gráficos que no han sido diseñados para tanta resolución.

La solución es el CSS3 que nos permite interrogar al dispositivo y cambiar lo que queramos: cual es la página de estilos que se va a seleccionar, cambiar solo algunas cosas de la actual y una larga lista de posibilidades incluido afinar las fotos para que se bien el el iPhone4.

Algunos de los trucos son del estilo:

<link rel=»stylesheet» media=»all and (max-device-width: 480px)» href=»iphone.css»>
<link rel=»stylesheet» media=»all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)» href=»ipad-portrait.css»>
<link rel=»stylesheet» media=»all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)» href=»ipad-landscape.css»>
<link rel=»stylesheet» media=»all and (min-device-width: 1025px)» href=»ipad-landscape.css»>

para aplicar hojas distintas dependiendo de la anchura.

O este que es unos de mis favoritos para el iPhone4 y en general para cualquier dispositivo que tiene mucha resolución:

<link
    rel="stylesheet"
    type="text/css"
    href="/css/retina.css"
    media="only screen and (-webkit-min-device-pixel-ratio: 2)" />


Los artículos que me han inspirado y que realmente merecen la pena verlos y revisar el sitio son:

Retina Display en el iPhone4.

Using CSS Media Queries to Style Your iPhone and iPad HTML By Elisabeth Robson

Actualización: Acabo de encontrar este artículo del maestro Icaza también sobre los displays de alta densidad y las aplicaciones.


3 febrero, 2010

MeetApp – Mobile Barcamp

Este jueves día 4 se celebra el MeetApp – Mobile Barcamp. Es una reunión informal de desarrolladores de aplicaciones y negocio para móviles. En unas cuantas convocatorias ha creado esa masa crítica y suficientemente interesante como para no perderselo. Por supuesto se nota y mucho quien es el maestro de ceremonias ;-).

Los datos son:

Lugar: Irish Rover (Av. de Brasil 7, 28020 Madrid)
Horario: De 20:00 a 23:30

Y por supuesto se les puede seguir en Twitter: @meetapp

17 junio, 2009

Evento Open movilforum

El jueves a las 12:30h Telefónica a través de su iniciativa Open movilforum va a mostrar las capacidades de operador que han abierto y sus API´s (recepción de SMS y videollamadas, localizar un móvil, acceder a la agenda, etc…)., disponibles en http://open.movilforum.com/apis

El evento no será una conferencia tradicional, creemos que será muy productivo y seremos unos 15-20.

Más información en la página oficial del evento Open movilforum.

11 mayo, 2009

Sesiones exclusivas en la Feria MovilForum

Durante la celebración de la feria MovilForum se van a celebrar algunos eventos a los que acceso será exclusivamente por invitación. Los usuarios de Open MovilForum van a disponer de invitaciones para estos eventos especiales.

Estos 3 eventos dentro de la agenda de ponencias de la Feria Movilforum son:

Android sobre el nuevo terminal HTC Dream.

HTC. Antonio Muñoz Tallon. Iberia Product manager.

Encuentro Desarrolladores «Google»

Fuera de agenda y al final de la ponencia, vendrá alguien de Google y se realizará un encuentro con desarrolladores.

Workshop Nokia.

WRT Widget Code Camp: Fun Time with Runtime: S60 WRT widgets! Hands on coding session día 21,9.30 -11h.

Si quieres asistir a algunos de estos eventos hay más información en la página de Open MoviForum.

Powered by WordPress