TweeTablet. Jugando con media queries en una webapp para ipad

Tenía ganas de aplicar media queries en algún proyecto, pero como la montaña no venía a mahoma, mahoma va a la montaña. Osea, que necesitaba algún ejemplo en que practicar y se me ocurrió hacer un lector de tweets (que original!) para el iPad a modo de web app.

También quería practicar un poco de jQuery ya que aparte de tocarlo para modificar galerías, sliders e interacciones sencillas, no había tenido la oportunidad de encontrarme con problemas que solucionar, que es como se aprenden las cosas: a base de golpes.

¿Para que sirve tweeTablet?  Ahora mismo, para poco salvo para haber practicado con media queries, css3, diseño de interfaz para el ipad y aprender un poco de jQuery.

Podéis jugar con en ejemplo en: www.tweetablet.com (desde iPad)

El funcionamiento es sencillo:

• Entras a tweeTablet.com desde el iPad (Desde el firefox peta por todos lados. En chrome un poco menos)
• Buscas una palabra, hashtag o por cercanía mediante geolocalización.
• Arrastras los usuarios que quieres seguir más de cerca a la pestaña lateral
• Y ya está, por que no hace nada más :)

Técnicas aplicadas en el ejemplo:

Media queries.

No son más que unas condiciones que se aplican a los css para que use unos css u otros en base al tamaño del viewport, orientación, etc… En el caso de la barra de herramienta,  cambia de orientación a  horizontal al usar la app en vertical o a vertical al usarla en apaisado. Buscaba la mayor superficie útil en la aplicación, ya que entre barra de direcciones, pestaña y barra de herramienta, se comía mucho espacio. Ahora sólo encaja bien en iPad, pero al principio también lo hacía en el BqVerne de 7″ y 800*600, pero por unos errors y simplificar el código, lo quité. Total, tampoco funcionaba el Drag&Drop

jQuery

En otros proyectos como la guía móvil para las Fallas de Valencia o guía móvil para las Hogueras de Alicante, había usado jqueryMobile como framework, pero las líneas gráficas no me encajaban con el diseño que quería para el iPad, así que no lo usé esta vez. En lugar de eso fuí añadiendo distintos plugins a jQuery para conseguir lo que necesitaba y de paso intentaba comprender como usar jQuery de verdad. Lo mejor en este caso sería usar un framework que ya ofrezca toda empaquetado (y compatible!) como SensaTouch o buscar otro framework más adecuado, pero quería hacerlo por la vía puzzle :). También quería aprender como se trataban los datos por json, formatearlos, guardar cookies, utilizar drag and drop, scrolls táctiles, etc… La forma de obtener los tweets es la más básica, sin autentificación ni nada. Por eso no puedes reponder ni seguir ni hacer las tipicas operaciones de un cliente de twitter.

Diseño UI para el iPad

El iPad es mucho más goloso que los móviles a la hora de diseñar: más pantalla, interfaz táctil, etc…  El diseño en parrilla o galería me sirve para poder seguir hashtags en eventos, cotillear lo que va diciendo de una palabra, etc… A veces es complicado seguir algunos hashtags por la cantidad de tweets y no quería estar haciendo scroll continuamente, así que de esta forma le puedes echar un ojo. Salvo los logos e iconos, los demás efectos los he aplicado con css3, que permite liberar a photoshop de la mayoría de trabajo: sombras, bordes redondeados, degradados, etc…

Como se ve en el video, no se puede llamar ni beta ni alfa, es.. mega-hiper-super alpha :D

Unas pantallas de ejemplo:

Posicion vertical y barra de herrmientas arriba

Si la orientación es apaisada, la barra se mueve a la izquierda para ganar espacio

Pestaña para arrastar a los usuarios que quieres seguir de cerca

Sombras y degradados con css3

Pantalla general en apaisado con la pestaña desplegada

Problemas.

• Al avanzar me di cuenta de que había un gran error. Por querer que las capas “fluyeran” y la pestaña empujara a la galería pasando de filas de 3 items a filas de 2, se cargó el sistema que parecía tan funcional de Pinchar y arrastrar. Al arrastrar no pasa por encima de la pestaña, lo hace por debajo. Glups!
• El scroll no tiene aceleración. Esto es por que chocan el pichar y arrastrar con el scroll. El sistema no sabe que quiero hacer. He intentado anular el scroll cuando intento arrastar, pero no me sale bien. Todo deja de funcionar..el drag y el scroll. Necesito practicar más :)
• La pestaña no funciona si lo usas como una App móvil de facebook. Al fina del video se ve lo que pasa. Se queda un poco pillado. Puedes probarlo buscando “tweetablet” desde la app de facebook para ipad.
• Si giras el dispositivo con la pestaña abierta, se va todo al traste. Otra cosa a mejorar.
• No funciona en Android. Bueno, he conseguido que vea bien en mi bq Verne de 7″, pero el drag no va. quizás en otro dispositivo funciona, pero no lo he podido probar. Tengo que ir al Corte Ingles y probarlo en su zona de betatesters :)
• Al principio guardaba los preferidos con cookies, pero lo anulé. Lo tengo que volver a aplicar.

Sin la necesidad de scroll el sistema funcionaría mejor. El sistema de arrastar y soltar sobra la zona de “preferidos” lo podéis aplicar en muchas entornos: eligiendo ropa, zapatos, gadgets, seleccionando fotos, etc… y el iPad es un dispositivo que se presta a ello, el gesto de arrastar es natural en él.

Recursos

El ejemplo que me sirvió de referencia fue este tutorial: A jQuery Twitter Ticker Usé la forma que obtener tweets y lo adapté para el sistema que quería montar. Con eso, un poco de media queries, otro poco de css3, unas librerías jquery y listos. En un par de tardecitas está hecho. Lo que más tarda, como siempre, son los ajustes visuales.

Un buen punto de partida para entender las media queries es el artículo de A list Apart: Responsive Design

Ahora, a seguir practicando jQuery.

Video del proceso de fabricación de lentes Leica

Si te preguntabas por que son tan caras las ópticas Leica, sólo hay que ver este vídeo en el que podemos apreciar la precisión y proceso casi artesanales con el que crean cada lente:

Via notcot.com: Great behind-the-scenes look at the craftsmanship and making of Leica lenses in the production facilities of Leica Camera AG

Ingenioso sistema de bloqueo de disparo en la Olympus Trip

Al abrir la Olympus Trip para una pequeña limpieza de visor (no se veía ni torta), he visto el ingenioso sistema de bloqueo de disparo que evita la toma en condiciones de baja iluminación:

Lo más destacable de la cámara es su sencillez y simplicidad de manejo. Dispone de un medidor de selenio que es el que le permite el automatismo y alimenta el  sistema de bloqueo de disparo se me muestra en el video.

Si queréis saber más sobre la cámara, os dejo este interesante post sobre ella en el blog camarantigua.cl:

Esta cámara se fabricó a partir del año 1967 y se vendió hasta aproximadamente el año 1983. Mi ejemplar, en particular, se fabricó en Julio de 1975. Viene con un lente Zuiko 1:2.8 de 40mm. Es pequeña y se siente bien en el bolsillo y en la mano; su construcción metálica se siente firme y bruñida a 33 años de su construcción, con un hermoso y leve sonido al disparar. Es un gusto sacarla a la calle, usarla hasta el abuso. Para eso se hizo.

O en la web de Kenrockwell (que también la hace batirse en duelo con una Canon 5d)

Como siempre, en youtube podréis encontrar mucho material sobre la cámara, incluso uno de los primeros anuncios con David Bailey mostrando la simplicidad y calidad de la Olympus Trip (en clave de humor):

O este otro, que también tiene su gracia :)

Probando el sistema de arranque HP Quickweb en el Hp mini 210

POST ACTUALIZADO a 15 de Abril de 2011. Enlace sobre Quick Web al fina del artículo

Una de las cosas que más me ha sorprendido del HP mini 210-1000 es el sistema de arranque instantáneo QuickWeb que te permite utilizar el netbook sin que arranque el Sistema Operativo (windows 7 en este caso). Al usar este arranque evitas las esperas si lo único que quieres es hacer una rápida consulta a internet, una llamada (puedes usar skype) o usar ficheros mp3 o fotografías.

He grabado un pequeño video para que os hagais una idea de cómo funciona HP Quickweb. Puedes ver más información sobre el netbook en la web de HP o en la magnífica review que Xataka le hizo al mini 210 en mayo.

El sistema es muy completo y te puede sacar de un apuro sin las esperas que los sistemas operativos que en cada nueva actualización, tardan más en arrancar.

Ver en youtube: Probando el arranque instantáneo Quickweb del HP mini 210

Enlace sobre Quick web (abril-2011)
HP Quickweb: o como te meten Linux y no te das cuenta!

Otra forma creativa de usar Adwords

A mi compañero Gabriel le ha sorprendido un anuncio de Adwords que aparecía en una noticia sobre Garzón, así que hemos hecho la prueba: buscar Garzón en google y ver que se muestra:

¿Una canción?. El anuncio es de un video de “el canal de ese tio“, un humorista que canta sobre temas de actualidad:

Este caso es muy parecido al que hace unos días se comentaba por los blogs “como encontrar trabajo usando adwords“.

Dale a gente un sitio donde subir videos y moverán el mundo :)