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.


31 julio, 2010

Recursos de Diseño web

Supongo que nos pasa a todos y es de lo más vulgar, pero cada vez que tengo que añadir algo de «diseño» a mis proyectos me bloqueo y/o me faltan recursos (iconos, imágenes, etc).

Para remediarlo en la medida de lo posible voy a publicar una pequeña lista de recursos que puede ser útil para empezar a buscar e incluso encontrar. Probablemente no se la megalista definitiva pero siempre es un mejor comienzo que buscar a ciegas en google ;-).

Esta es la mini lista de enlaces que me han gustado:

Iconos Gratuitos

Esta lista de sitios es impresionante. Es complicado que no encuentres lo que buscas o muy parecido.

Más iconos de alta calidad

Este sitio está en formato de blog con su RSS y esas cosas. Casi todos se pueden bajar en formato SVG.

MePhoBox

Este es uno de mis favoritos para romper cuando uno no está inspirado. Imprescindible en cualquier  bookmark.

TemplateMonster

Miles de plantillas (de pago) para casi cualquier producto web (wordpress, magento, etc). Impresionante y  en el caso de tener que hacer una plantilla para magento/oscommerce incluso wordpress merece la pena que el cliente elija la plantilla y comprarla.

CSS para Iphone (incluso para Android)

Y como pongo en el título muy utilizable para cualquier webapp orientado a móviles.

poolga.com

Fondos de pantalla diseñados para iPhone.

ffffound.com

Este sitio es especial. Es un blog que anota imágenes, desde diseños a fotografías. Si alguien tiene una invitación que se estire y me la mande 😉

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

3 octubre, 2009

5ER: Android, iPhone y Sam Ramji

Mi temas favoritos de este sábado son casi todos sobre movilidad.

Porque Apple va empezar a dejar de firmar contratos de exclusividad.

Después del éxito que ha conseguido Apple con el iPhone tiene sentido no auto-imponerse limitaciones. No hace falta arriesgarse mucho para pensar que no va renovar el contrato en exclusiva con Telefónica como ya no lo ha hecho con O2.

Vía: businessinsider.com

Noticias en tiempo real sobre: iPhone

Sam Ramji deja Microsoft y Codeplex.

Sam Ramji has sido durante estos años el responsable de software libre en Microsoft. Ultimamente estaba potenciando Codeplex la fundación patrocinada por Microsoft para extender la comunidad Open Source un poco más. A mi no me gusta nada la confusión de usar el término Open Source pero no me disgustaba en general que existiera Codeplex.

Parece ser que la razón es Sonoa una startup con proyectos de cloud computing y que le ha echo una oferta que no puede recharzar. Veremos que pasa con fundación Codeplex y la iniciativa de apoyo al software libre de Microsoft. Sam tiraba del carro, y bastante, muy pronto veremos si era un esfuerzo personal o formaba parte de una estrategia corporativa.

Enlace: CRN

Noticias en tiempo real sobre: Sam Ramji Codeplex

Como están las cifras de conexiones desde móviles.

La empresa especializada en anuncios para dispositivos móviles AdMob ha publicado en su informe mensual los siguientes datos:

iPhone 40%

Symbian 34%

RIM 8%

Android 7%

Web 4%

Windows 4%

Palm 1%

Estas cifras se calculan con las visitas que reciben los sitios en los que tienen publicidad. El informe es mucho más detallado y extenso y para la gente que se dedica al mundo de la movilidad hay bastante información interesante.

Para mi estos datos constatan algunas tendencias como:

* La entrada de iPhone ha sido disruptiva en muchos sentidos: interface, hábitos de compra, uso de internet, etc.

* Sorprende lo rápido que está ganando terreno Android y lo fácil que lo están perdiendo Windows Mobile y RIM.

Vía: Admob

Noticias en tiempo real sobre: Android Google


Android empieza a ser rentable para los desarrolladores.

Una de las críticas más comunes sobre android es que no hay suficiente mercado en comparación con iPhone. La segunda crítica es que hay poca cultura por parte de los usuarios para hacer micropagos por las aplicaciones.

Todo esto parece que está cambiando y que no era más que un espejismo inicial. A día de hoy estás son las estadísticas y en este sitio podemos encontrar muchas más: AndroidLib.

Estadisticas Android

Estadisticas Android

Vía: AndroidLib

Noticias en tiempo real sobre: Android Google

11 abril, 2009

screencast: como se hace una aplicaci

En la web de Open Movil Forum he encontrado este screencast de como se hace una aplicación para iPhone. Lo que más me ha gustado es el entorno de programación que han desarrollado la gente de apple. Este tipo de herramientas, aunque esta es propietaria, son las que necesitamos para poder desarrollar aplicaciones a toda velocidad.

Nunca he sabido porque no pensamos más en como reducir los tiempos de los desarrollos haciendo mejores herramientas como xcode. La verdad es que esto es una de las cosas que echo de menos en Android y algo más que un plugin para eclipse.

Powered by WordPress