Los móviles prometen ser los reyes del 2012

Si el 2011 fue el año de la explosión social, este año promete ser la confirmación del móvil como principal dispositivo de acceso a la web, mano a mano con los ordenadores de escritorio.

Mientras que muchos usuarios son rehacios o no se atreven a instalar un simple programa en su ordenador “Oye..como me instalo eso..”, “me va a entrar un virus si me pongo esto otro?..”, otros han encontrado en el móvil un aparato que no les impone ninguna barrera, fácil de manejar y con miles de aplicaciones y juegos gratis o a precios ridículos. Esa facilidad de uso unido a la ubiquidad y movilidad de los smartphones han conseguido que no echemos de menos el ordenador. Sólo hay que ver las estadísticas del artículo de gigaom.com en que dan algunas cifras de acceso desde dispositivos móviles y se comple la tendencia de crecimiento de los dispositivos móviles (smartphones, tablets, etc..) como principal vía de acceso de los usuarios: “It’s becoming a mobile-first world”

Todos los dispositivos móviles suman un 54% de acceso

55% de acceso desde móviles a twitter y un 33% a Facebook

¿Que podemos hacer ante esta tendencia? Lo primero, mirar las estadísticas de acceso a tu web:

• ¿Se cumple esta tendencia en mi sector?
• El contenido que hay publicado, ¿se puede ver desde un dispositivo móvil? (adios adobe flash adiooooos)

Puede ser que todo esto no se refleje en tus estadísticas, o  ”para cuatro gatos que acceden a la web desde móvil no merece la pena el esfuerzo”, pero piénsalo mejor. Levanta la vista y fíjate en el entorno, en toda esa gente mirando un aparatito que emite luz entre sus manos y que al realizar una búsqueda, lo hacen con ese aparato. Cuando les envían un enlace por email, lo abren en ese aparato. Cuando ven una dirección en el periódico (los pocos que lo siguen leyendo), lo consultan en ese dispositivo.

La situación está cambiando y no va a parar. Paseáte por las grandes superficies, vete a la zona de smartphonesy tablets. Fíjate en el perfil de clientes, de que hablan, cotillea leñe!: una señora comprándole un ipad a su padre anciano para que pueda leer el periódico en frances todos los días, unos padres comprándole un smartphone a su hijo para accede a tuenti por sacar buenas notas, una señora que lo quiere para enviar todos los mensajes que quiera a su hijo por whatsup… No son cuatro gatos.. son todos!

Ahora vuelve a mirar tu web y piensa si se ajusta a lo que toda esa gente va estar usando.

Enlaces:

• Gigaom.com: It’s becoming a mobile-first world
  Vía  ”Internet ya es un espacio móvil, no es un vaticinio, lo es desde la Navidad recién pasada” de Eduardo Arriagada 
• Meeker Says Majority Of Pandora’s And Twitter’s Traffic Is Mobile; Square Transactions Grew 20,000%

Enlaces interesantes 3 enero

Enlaces interesantes 3 enero

• Kevinjohn Gallagher .com :: Responsive Design is Irresponsible « « KevinjohnGallagher.com –
• Desarrollo en Android | sgoliver.net blog –
• Reparar un Monitor de Ordenador por Menos de 1 euro | BlogSOStenible··· – – – ··· – – – ··· – – – ··· – – – ··· «Otras» noticias, y «otra» forma de pensar… –
• WordPress Essentials: The Definitive Guide To WordPress Hooks –
• Joaquin Sevilla Moróder: Tipos de empleo, piratas y escritoras –
• Orientation to Android Training | Android Developers –
• 10 great Google Analytics walkthroughs | Econsultancy –
• Best Web Metrics / KPIs for a Small, Medium or Large Sized Business –

Enlaces interesantes 11 diciembre

Enlaces interesantes 11 diciembre

• Claves para el éxito en social media: estrategia, formación y herramientas adecuadas | Blog de Marketing Online de Tristán Elósegui –
• 40 Beautiful Free HTML5 & CSS3 Templates –
• Useful WordPress Tricks to be Like a Pro – Truquillos para ser una ninja de wordpress :)
• Una docena de tipografías de redes sociales | una docena de –
• 40+ Useful and Fresh jQuery Plugins –
• Dieter Rams: ten principles for good design –
• Remembrance Day 2011: Haunting pictures of the Great War’s battlefields | Mail Online – Paisajes actuales de batallas en la Segunda Guerra mundial
• Asynchronous UIs – the future of web user interfaces –

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.

Enlaces interesantes 22 noviembre

Enlaces interesantes 22 noviembre

• Pagination Gallery: Examples And Good Practices – Smashing Magazine –
• The Anatomy of an Effective Homepage –
• aaron hobson || c i n e m a s c a p e s – Galería de fotos tomadas por el coche de Google Street View
• What Is User Experience Design? Overview, Tools And Resources – Smashing UX Design –
• 75 libros gratis para descargar sobre Social Media y Redes Sociales | Social BlaBla –
• Un viaje con Richard Stallman (esa persona) « Ricardo Galli, de software libre –
• iOS Fonts – Tipografía disponible en el iphone y ipad
• 10+ Jquery File Upload Plugins for web developers –