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.

  • Me gusta el detalle del giro de la barra de herramientas, pero el drag and drop no funciona muy bien. Nos pasó lo mismo con un trabajo y al final lo quitamos.

  • alejita villegas

    Hola! estoy participando por un gps en esta página comparto el link está muy interesante Xd http://www.facebook.com/NavSatColombia

  • Gracias Mike! Estoy intentando arreglar el tema de drag and drop y el scroll. Cuando no meto el scroll el sistema va más fino. Creo que voy a usar sólo algunas partes la libraría de scroll y rehacerlo para que se no casque con el drag.

    Muchas gracias por tu comentario.