Usuario de Internet, blog personal de Fernando García Torres
El bloguero de turno mangatizado
Un Blog, Fernando García como Usuario, e Internet el Escenario

Cosas que le pasan a un desarrollador web profesional

Historias para no dormir: perder un iPhone

No me ha pasado, pero sí: yo salgo a la calle con el iPhone en el bolsillo ACOJONADO.

Antaño, cuando perdías un PC era poco menos que una hecatombe (y una especie de catarsis cuando lo asumías): fotos, música, documentos, toneladas de películas… hoy en día Internet lo ha cambiado todo, y al menos los hardcore users (a los que siempre asocio con el iPhone, al menos con el uso intenso del iPhone al que aquí me refiero) ya guardan gran parte de esa información en la nube.

Éste es uno de los ingredientes de la tragedia. El otro es la miniaturización del hardware y el poder llevar ahora un mini ordenador en el bolsillo, dispositivos que permiten acceder a la nube desde cualquier sitio.

En definitiva: cacharro + nube + pérdida/robo = OMGDEVUÉLVEMELAVIIIIIIIIIIIIIDA!! (sí, con la voz de Antonio Orozco el efecto es más dramático)

Y para ilustrar mi pavor, una captura de la pantalla principal de mi iPhone, así que el desgraciao que lo encontrara/robara tendría acceso a:

Aplicaciones principales de mi iPhone

  • Contactos: tener el número de mi madre y llamarla para burlarse de lo mandril que es su hijo es todo uno.
  • Calendario: ver dónde y a qué hora tendría una cita, podría venir a robarme la cartera también.
  • Fotos: ni te cuento, de hecho se me están poniendo los pelos como escarpias de pensarlo, voy a borrar algunas…
  • MoneyBook: app para llevar un control de gastos personales, aquí la verdad más que nada le entraría la risa…
  • Remember the milk: app para el control de tareas, lo mismo, “comprar calcetines de algodón” es algo íntimo que no debe ser compartido.
  • MobileRSS: lee tus propios feeds, desgraciao!
  • Tiempo: que pueda consultar el tiempo que hace en Elche desde MI telefóno no es justo.
  • Twitter: aquí traspasamos la delgada línea roja: redes sociales. Empezar a seguir a Enrique Dans me parece un ejemplo bastante cruel de puteo con mi cuenta…
  • Facebook: no te digo ná y te lo digo tó!
  • Tumblr: aquí sí que me cabrearía, mi tumblr es ahora mismo la joya de lo corona, pff…
  • LinkedIn: supongo que arruinar mi carrera profesional con un “mecagontosmisjefes” es un buen puteo.
  • Evernote: aquí hay un poco de todo: facturas, apuntes, contraseñas, etc… vamos, el Dorado del desgraciao.
  • Dropbox: pues lo mismo, si Evernote era el Dorado, éste es el Santo Grial.
  • Mensajes: y además ordenaditos por conversación, un puto lujo oche!
  • Mail: acceso directo y rápido a todas mis cuentas de email, el único límite es la imaginación!

Bueno, creo que el concepto ha quedado claro. Y ésta es una página de 4 (y lo restauré hace poco…) de aplicaciones, telita!

Y sí, claro que tengo activo el bloqueo con código, pero sin saber ni papa de estas cosas, pondría la mano en el fuego a que hay alguna forma sencilla de saltarse esta protección… lo dicho, tal es el acojono que me estuve planteando pagar por una cuenta de MobileMe únicamente por el borrado a distancia, pero no, he optado por la opción gitaner: un móvil de los que darían con los cereales que no tenga ni WAP para llevar en determinadas salidas (principalmente cualquiera que implique noche). Mi iPhone es mucho iPhone.

Scroll infinito con jQuery

También conocido como endless scrolling, endless pageless, paginación sin páginas, etc… es un patrón de interfaz de usuario del que se viene hablando desde hace unos años, aunque es últimamente cuando parece que lo veo implementado en cada vez más sitios.

El ejemplo por antonomasia es por supuesto el de Google Reader, pero hay muchos más: Facebook (fijaros que lo hace una vez cuando vas a mitad de página), Digg, Bing, Vimeo, Dropular….

Básicamente consiste en cargar más contenido dinámicamente conforme te acercas al final de la página, de forma que la navegación por el mismo no queda interrumpida en ningún momento. Viene a ser un sustitutivo de la paginación tradicional.

Luego comentaré los pros y contras que pienso tiene esta técnica. Antes contar cómo lo he implementado en mi tumblr, micro Usuario de Internet, algo que llevaba bastante tiempo queriendo hacer y que sin duda opino le va como anillo al dedo.

Scroll infinito en micro.usuariodeinternet.es

Aunque en principio tenía intención de remangarme, encontré un plugin, de-pagify, que lo implementa de forma muy flexible y aprovechando parte de la magia de jQuery. Utilizar un framework de javascript simplifica considerablemente la codificación del método, que de otra forma sería bastante más laboriosa, sobre todo el paso de procesar el contenido para pintarlo en pantalla.

En la página del plugin viene todo explicado muy claramente, sólo destacar dos cosas:

  • Hay 4 formas de lanzar el evento para traerse más contenido. Se configura con el párametro trigger, y puede ser cuando se llegue a un % de altura de la página, a una altura determinada (pixels), cuando se vea un determinado elemento de la página (mi elección) o incluso dependiendo de la salida de una función propia. La flexibilidad es máxima.
  • Como he comentado, utilizar jQuery ahorra mucho código, y una de las perlas que más me ha gustado es la siguiente línea:
    // Format url as "?page=1 div#wrapper div.post"
    var url = [next.attr('href'), options.container, options.filter].join(' ');

    El método de ajax load, que es con el que nos vamos a traer el contenido de la siguiente página para pintarlo dinámicamente, permite especificar la URL con selectores separados por espacios, de manera que podemos controlar qué elementos, qué HTML al fin y al cabo, queremos que se cargue en la capa que eligamos. Ésto nos ahorra de una tacada tener que hacer alguna modificación en el código de la aplicación (se van a ir pidiendo por ajax sucesivas páginas como si la navegación fuera la clásica) y tener que procesar el HTML que recibimos (se pinta tal cual porque ya viene filtrado con el contenido, lo único que he tenido que modificar de la página es un poco la maquetación).

En definitiva, y en mi opinión:

PROS

  • Experiencia de usuario: no tengo la menor duda de que, para cierto tipo de webs y, sobre todo, de contenido, el eliminar la paginación supone una mejora muy significativa en la forma de navegar por el sitio, comportándose de la forma natural en la que uno esperaría moverse por él.
  • Consumo: cuando desaparece el punto final (pie de página y paginación) pasa a ser un comportamiento natural el hacer scroll indefinidamente y por tanto seguir consumiendo el contenido de manera indefinida.

CONTRAS

  • Experiencia de usuario: y no es una contradicción, la nueva forma de navegación puede confundir a muchos usuarios menos duchos en esto de Internet, acostumbrados a los puntos de ruptura (paginación), a saber por qué página del libro van y a una estructura de web más convencional.
  • Implementación: no es tema trivial, ya no técnicamente, sino desde el punto de vista de la usabilidad. Por ejemplo está muy unido al dispositivo utilizado: con la rueda del ratón todo es maravilloso, con el teclado o arrastrando la barra de scroll ya pueden darse saltos incómodos. La norma aquí es que sea prácticamente imperceptible para el usuario lo que se está cociendo de fondo (aquí tengo que mejorar mi implementación).
  • Monetización: en sitios que se ganan las habichuelas con la publicidad puede suponer un problema la ubicación de los bloques de anuncios. Un esquema típico de jumbobanner arriba, roba a la derecha y Adsense bajo el contenido queda bastante desvirtuado con esta navegación. Lo mismo con páginas vistas (solucionable con una buena semilla).

Internacionalización con Smarty

Internacionalización con Smarty

El temita de la internacionalización (i18n para los amigos) en una aplicación web puede dar para largo y tendido, yo voy a hablar aquí concretamente de la forma de guardar y utilizar las cadenas de texto del site en varios idiomas utilizando el framework de templates Smarty.

Hay muchas formas de hacerlo, se pueden encontrar varias alternativas en este post de best way to build a multi-language site with smarty, que empezó en el ¡2003! (el frenético ritmo que lleva la tecnología hace que no me crea nada que no sea de ayer…). Todas tienen sus ventajas e inconvenientes, y dado que no hay nada en el core de Smarty para ésto ni una solución popularmente aceptada como la estándar, cada uno debe analizar lo que necesita para su proyecto y tener unas preferencias subjetivas, que en mi caso son:

  • Que no implique PHP: obviamente hay opciones mucho más sofisticadas, eficientes, etc… para solucionar el tema del i18n con programación (por ejemplo smarty-gettext), pero precisamente el uso de Smarty es para separar la lógica de la aplicación de la de presentación, y dado que considero que ésto es problema de front-end puro, yo quiero resolverlo únicamente con Smarty.
  • Que sea sencillo y eficiente: con el tiempo me estoy conviertiendo en un talibán del código, en el sentido bueno (creo) de intentar que las cosas se hagan de la forma más clara posible (KISS power!) y que note un pinchazo en el corazón con cada ciclo de reloj que se consume en código prescindible.

Continuar leyendo – Internacionalización con Smarty »

Integrar las APIs de login de Facebook, Yahoo y Windows Live

El bonito single sign-on

La filosofía del single sign-on ha terminado imponiéndose por pura lógica de saturamiento 2.0, con los grandes jugadores vendiendo sus nuevas propuestas (OpenID lo intentó y no lo consiguió…) y los usuarios cansados de procesos de registro y contraseñas varias. Darles a éstos la oportunidad de usar sus credenciales de alguno de los servicios top para utilizar tu sitio debería ser ya a estas alturas planteado como una funcionalidad primaria de cualquier proyecto web.

Lo que viene a continuación es una guía para implementar en tu web la funcionalidad de “login externo” usando las APIs de tres de los grandes: Facebook, Yahoo y Windows Live (Google y OpenID vendrán en otro post). El proceso es similar en todos los casos, y el objetivo es acabar teniendo para utilizar en nuestro código el id único externo (la variable $id_unico en los ejemplos) que nos sirva para identificar y validar al usuario en nuestro sistema local.
Continuar leyendo – Integrar las APIs de login de Facebook, Yahoo y Windows Live »

Ya tengo nuevo juguete: tumblr

Logo tumblr

Estoy viciado a tumblr, enganchado a su sencillez, encantado con su filosofía y alucinando con su comunidad.

  • Es sencillo como pocas cosas compartir lo que quieras en tu tumblr. Tienes un dashboard con enlaces según el tipo de contenido que quieres publicar y poco más. Rellenas un campo (dos si eres pro) y de las al botón de Create post. Hay extensiones de firefox que lo hacen tan trivial como arrastrar el contenido a un icono de tu barra de estado. Y sí, la sencillez crea adicción (¿he oído twitter?)
  • tumblr es la quintaesencia de la filosofía del tumblelog, el término medio entre el blog de toda la vida y el nuevo microblogging, un espacio sin necesidad de temática fija, sin los rigores de un post más trabajado y con ese plus multimedia que a veces se echa en falta en el nanoblogging. No hay comentarios, no hay categorías ni tags… es una servilleta de papel de un bar en la que apuntas lo que te viene a la cabeza, lo que encuentras, lo que te gusta… y es tu servilleta, porque las posibilidades de personalización son totales (ver ejemplos).
  • Y sin duda lo que más me ha sorprendido es la comunidad. Me recuerda la sensación que tengo cuando navego por Vimeo, todo parece de tanta calidad y veo tan poca morralla que me da que pensar si estas comunidades se forman de manera espontánea o la supuesta navegación por el portal es en realidad una visita guiada a través de un filtro anti-shit. Una muestra en el Radar y el Directorio.

    Otro plus es que es una comunidad activa (cosa que no me extraña). En tu dashboard puedes ver las actualizaciones de los tumblrs que sigues (otro vicio), y continuando con la sencillez, puedes rebloguear ese contenido o guardártelo como favorito. Todo esto para comentar que he visto como un usuario (que digo yo será bastante popular) ha colgado una foto y al minuto tenía más de 20 reblog/likes. Lástima que en castellano hayan tan pocos (bueno, tampoco me he puesto a buscar, me vale con las joyitas que voy encontrando) tumblrs…

En definitiva, para mi tumblr ha supuesto el complemento perfecto a este blog y mi tuiter. La puntilla ha sido cuanto el otro día lanzaron la integración oficial con twitter, justo en el clavo, es exactamente uno de los usos que me gusta darle al microblogging, compartir cosas que me voy encontrando en las navegaciones a la deriva… ahora por fin tengo la perfecta servilleta de papel para apuntarlos y que no se pierdan en la niebla de mi historial!

Para terminar, unos cuantos tumblrs: yimmyayo, hipstertracks, graphiceverywhere, kari-shma… y por supuesto el mio!! micro usuario de internet!!

micro usuario de internet, mi tumblr