Blog de sonicbyte

Aprende a trabajar, da capo

Después de mucho oír hablar de él, finalmente he leído “Rework” el famoso libro de Jason Fried y David Heinemeier Hansson, fundadores de 37Signals. Esta empresa que inspira por su éxito, por su forma de trabajar y por sus grandes productos. Desde que la descubrí y me hice aficionado a su blog, me atrajeron fundamentalmente su visión de negocio y su equilibrio entre diseño y desarrollo. Hay muchas buenas empresas de éxito que destacan por uno u otro, pero no consiguen cerrar la brecha entre sus equipos de diseño y desarrollo.

No voy a descubrir nada a nadie, de un libro que ya es un clásico en el sector, tenéis multitud de reseñas por Internet. Pero haré, eso sí, un resumen de las ideas que se me ocurrieron al leerlo y alguna cosa con la que no estoy de acuerdo (seguramente porque no entiendo).

Ignore the real world.

Si quieres llevar una idea adelante, te encontrarás demasiado a menudo con la frase “eso en España* no va a funcionar”. Es la versión latina ampliada y empeorada de “That would never work in the real world” de los yanquis, que parece aplicarse a algo novedoso. Aquí te la puedes encontrar en todo tipo de negocios que sabemos que funcionan si lo haces bien, como por ejemplo el e-commerce.  Prepárate para ignorar muchas opiniones.

* Puedo confirmar esta frase en más países como Argentina o Italia.

¿Fallar o no fallar?

Desde hace un tiempo se oyen distintas voces que proponen e incluso basan su desarrollo en aprender de los errores o fallar a pronto y fallar a menudo, e ideas similares. Por el contrario Jason y David (J&D):
- niegan que se aprenda de los errores, porque dicen que del error sabes lo que no debes volver a hacer y no lo que debes hacer.
- niegan las estadísticas que  prueban que la mayor parte de las empresas online fracasan, porque lo que le ocurre a otra gente es sólo eso, otra gente.
- defienden que el éxito te brinda un mayor aprendizaje y que es la experiencia que realmente cuenta.
- por último arriesgan que la evolución no ha perdurado en los errores del pasado, sino que se construye sobre lo que ha funcionado.

Aquí es donde empezaron a perderme. No discuto que haya un valor inmenso en el éxito, pero gran parte del aprendizaje se adquiere a raíz de los errores, es un hecho, ese es el fundamento del método científico^W.
El dato que dice que la inmensa mayoría de las empresas de Internet fracasan, efectivamente no significa que a la tuya le vaya a ir mal, estoy de acuerdo, pero no por ello debes negarlo, simplemente estar atento y hacer lo posible por evitar el fracaso.
Y finalmente el ejemplo de la evolución es definitivamente errado y su explicación posiblemente poco interesante para el lector de este blog. No es equiparable lo que “ha funcionado” a lo largo de la evolución, con el éxito de una empresa, ya que la evolución no tiene un objetivo, ni aprende, y más bien una empresa podría compararse con la vida de un individuo, no con la evolución de las especies, la escala es fundamental. Las empresas son diferentes a los organismos cuyo genotipo no varía.
Entiendo que se trata de una metáfora y como todas las metáforas permite aproximarse a la idea pero carece de precisión. En cualquier caso se me ocurre que si quisieramos relacionar la teoría evolutiva^W con las empresas de internet es más fácil argumentar en favor del aprendizaje de los errores, ya que la selección o éxito de las empresas puede darse en distintos momentos según su capacidad de adaptarse a los cambios del ambiente.

Por último, la idea que más me gustó del libro es esta:

Las grandes decisiones son difíciles de tomar y de cambiar… Cuando tomas pequeñas decisiones no puedes cometer grandes errores…”

A pesar de alguna crítica el libro me parece excelente y muchos de sus consejos aún los estoy madurando. Si no has leído el libro y quieres saber algo más te recomiendo esta charla de TED, en la cual Jason Fried presenta las principales ideas:

Quiero agradecer especialmente a @genezeta que me ha regalado el libro, y próximamente lo dejaré libre para que cualquier otra persona lo lea y aproveche.

Gracias también por la imagen a Rafael Peñaloza.

Bones

Estoy terminando un sitio de e-commerce para una tienda pequeña y decidí implementarlo en WordPress. Al iniciar el proyecto pensaba utilizar un theme en blanco como Starkers, pero en ese momento me topé con algo distinto: Bones creado por Themble y quería compartir con ustedes mis impresiones hasta el momento sobre esta plantilla de trabajo.

Lo primero que llamó mi atención fue que lo recomendaba Paul Irish, uno de los creadores de la plantilla html5Boilerplate. Entonces me puse a investigar de qué se trataba.

Wow. Bones is super hot! Seriously… (Paul Irish)

A diferencia de Starkers, theme “desnudo” de todo estilo y formato, muy útil para aprender y no heredar estilos “de fabrica” de WordPress, pero que personalmente me resultaba algo lento para mi trabajo,  creí que Bones era similar, pero al interiorizarme descubrí que aporta otro enfoque.

Bones, nos brinda una plantilla sólida y optimizada, lista para trabajar, puesto que todo elemento se encuentra documentado e incluido en el css, lo que agiliza mucho el trabajo.

Bones fue creado en base a lo último en estandares HTML5,  y por supuesto es compatible con todo navegador moderno y testeado hasta en navegadores viejos como IE6 sin problemas. Es compatible con WordPress 3+ e incluye un theme default muy básico pero funcional para no tener que hacer todo literalmente desde la nada.

Así se ve el theme default cuando lo activamos por primera vez:

Estructura CSS

Cuenta con 2 hojas de estilo, primero llama a un hoja por defecto que incluye un reset.css y estilo básico (default.css) para todos los componentes del theme (por lo que es fácil restaurar valores si cometemos algún error) y luego llama a la segunda hoja de estilos: styles.css que es donde trabajaremos.

El reset esta basado en la plantilla html5Boilerplate y cuenta con algunos agregados propios de clases comunmente usadas:

Cabeceras y Titulos

Algo que me pareció bastante inteligente, muchas veces queremos que por ejemplo un h3 se vea como un h1 por cuestiones de diseño, pero por supuesto, no se debe agregar dos h1 en una misma página, por lo que terminamos agregando lineas extras de codigo, complicando la estructura. Esto con Bones se resuelve de la siguiente forma:

Entonces si queremos que un h3 se vea como un h1 agregamos el class .h1

<h1 class="h3">Esto es un H3 que se ve como un H1</h1>

Muy bonito, pero basta de pequeñeces… Vayamos a lo gordo

Grid Css

Bones cuenta con un grid incorporado al css muy flexible, permite layouts fluídos o fijos y podemos seleccionar libremente el ancho maximo y minimo del layout.
Su uso es muy simple, para agregar un ancho de 480pixels a un div, agregamos algo como:

<div id="main" class="col480">...</div>

Cada elemento de wordpress esta incluido en el css de forma meticulosa y clara, es super simple dar estilo a los elementos, incluso para páginas o posts especificos, gracias a selectores avanzados de css.

Media Queries y Especificidad

Incluye las reglas de Media Queries y móviles recomendadas por Andy Clarke (de quien escribí un post recientemente sobre uno de sus libros) para adaptar el diseño de manera “responsiva” a diferentes resoluciones y dispositivos (el uso es optativo por supuesto)

Además encontramos la técnica incluída ya en html5Boilerplate, sobre el manejo de clases para dar estilo a versiones especificas de Internet explorer sin agregar hojas de estilo extras.

Por ejemplo para dar estilo al contenedor de los post (.post_content) podemos llamar a las siguientes clases:

Extras

Por último incluye una hoja de estilo para impresión y algunos plugins para agregar video html5 que aún estan en fase de prueba y la verdad no tuve la oportunidad de probar.

Bones en números

Algunas estadisticas provistas por la pagina de Themble

Hasta ahora la experiencia ha sido muy grata, realmente me ha ahorrado mucho tiempo de desarrollo y les recomiendo que lo prueben.

¿Ya has usado Bones?, deja un comentario, me gustaría conocer tu experiencia !

Link al sitio de Bones

A list worth spreading: lista de todos los usuarios, ponentes TED

Also availablein English

Echa un vistazo a esta lista de twitter de todos los ponentes de TED cuyo usuario de twitter ha sido publicado en la web de TED.com y alguno más.

Las listas de Twitter son una gran manera de mantener la información separada por tema, eventos u otros. De modo que puedes ver en un momento determinado, como pausas de Pomodoro en la búsqueda de determinado tipo de datos.

Si eres fan de las charlas TED esta lista es un recurso muy interesante. Espero que te guste:

https://twitter.com/#!/pablojimeno/ted-speakers

Por cierto estoy colaborando con la organización del evento local TED TEDxZaragoza “El futuro de la felicidad”, mantente informado:

• TEDxZaragoza sitio
• TEDxZaragoza en Twitter
• TEDxZaragoza en Facebook

Diseño web para telefonos moviles con HTML5, CSS3 y Javascript

Ser o no ser…¿Versión nativa o HTML5 para nuestro nuevo sitio o aplicación web móvil?

Perdón, chiste trillado….Pero es una pregunta importante que debemos hacernos antes de encarar un proyecto de estas características. Elegir uno u otro camino tiene sus pro y contras, y si bien no voy a profundizar respecto a crear aplicaciones nativas, haré una introducción al tema.

Aplicación nativa es aquella que especificamente es diseñada para funcionar en el sistema operativo de ese dispositivo.

Esto tiene sus ventajas:

• Acceso al hardware del dispositivo
• Capacidad para funcionar sin conexión web (aunque gracias al Html5 ahora es posible lograr una funcionalidad similar, lo explico luego.)
• Performance y velocidad
• Posibilidad de monetizar la aplicación (Por ejemplo vender tu app desde el appStore)

Estas ventajas por supuesto son importantes, pero requieren de un desarrollo específico por cada plataforma (Android, Iphone, Symbian, Blackberry, etc), a veces inclusive más de una versión, y una inversión de recursos de hardware, y mayor tiempo y conocimientos de desarrollo.

Por otra parte, si optamos por HTML5, CSS3 y Javascript como opción de desarrollo tenemos un camino diferente.

Podemos utilizar reglas de CSS3 y aprovechar características HTML5 + Javascript para controlar el comportamiento de nuestro sitio o aplicación de teléfono móvil y ofrecer una grata experiencia al usuario sin preocuparnos por tantas variables.

Con Media Queries podemos evaluar unos pocos parámetros universales que cualquier dispositivo actual tiene (hay más, pero sólo éstos nos interesan en este caso):

• Ancho y alto del navegador
• Ancho y alto del dispositivo
• Orientación del dispositivo (Ejemplo, evaluar si un iPad se encuentra en modo landscape or portrai)
• Resolución del dispositivo

Ejemplo:

@media all screen and (max-device-width: 600px) {#container { width: 550px;}}

Con esta simple regla estamos diciendo que si el dispositivo que carga nuestra página tiene un ancho máximo de 600px entonces le aplique al div “container” un ancho de 550px.

De esta forma podemos controlar cómo se visualizará nuestro sitio web o aplicación en diferentes resoluciones, no sólo de teléfonos moviles sino también ordenadores de sobremesa, notebooks y netbooks con mínimo esfuerzo.

Aquí pueden ver un ejemplo práctico de una aplicacion web que recientemente desarrollamos para un cliente, llamada Tivifan en la que utilizamos esta técnica, y notarán en las capturas como el diseño se adapta a los diferentes dispositivos:

Monitor de sobremesa:

Esta es la vista del sitio “normal” en un monitor con resolución alta.

Ipad en modo portrait: el sitio se muestra correctamente, pero en una sola columna, dando mayor espacio y comodidad al contenido principal.

Ipad en modo landscape: Al tener mayor espacio, mostramos el sitio a dos columnas.

Móvil con Android: A menores resoluciones, como la de éste dispositivo, toda la estructura del sitio es modificada. Navegación, logo y formulario mas pequeño y simplificado, fuentes reducidas, contenido a una columna, etc. Aunque menos atractivo que las otras opciones el sito es plenamente usable y su contenido más importante sigue siendo accesible.

Puedes probarlo tu mismo desde aquí, simplemente cambiando el tamaño de tu navegador manualmente.

Otras métodos interesantes: Antes comentaba que una ventaja de aplicación nativa era la capacidad de trabajar off-line, esto con HTML5 es también posible, gracias a la capacidad de guardar datos de forma local. Una de las opciones es utilizar localStorage. Permite definir algunos campos en lo que se puede describir como una simple base de datos en el navegador y recuperar un valor, incluso cuando el usuario ha cerrado su navegador y lo vuelve a abrir más tarde.

Haz la prueba y juega con este ejemplo online creado con HTML5 y Javascript desde el siguiente link:

http://jsbin.com/alagur/3/edit

Este por supuesto fue apenas un vistazo del potencial de HTML5, javascript y CSS3 para el desarrollo de aplicaciones y sitios web para teléfonos moviles. Muy pronto, más…

Más información de localStorage y Media Queries:

Media Queries

LocalStorage en Quirksmode

Retrospectivas: de un buen equipo agile a uno mejor!

Also available in English

Primero que nada “no leí el libro del que habla el vídeo, pero lo haré pronto porque me han convencido”.

Una de las cosas que siempre intento mejorar en mi equipo son las retrospectivas. Si no sabes lo que son, probablemente este post no es para ti, en cualquier caso:

La retrospectiva es una reunión especial en la cual el equipo se junta después de haber completado una iteración o porción incremental de trabajo y adapta sus métodos y trabajo de equipo.

En equipos que desarrollan mediante métodos iterativos incrementales, las retrospectivas al final de cada iteración estimulan la mejora continua a lo largo del proyecto.

Hace un tiempo encontré esta presentación a cargo de Esther Derby (@estherderby) y Diana Larsen (@dianaofportland) una excelente explicación de su enfoque de 5 pasos para realizar retrospectivas, basada en su libro “Agile Retrospectives: Making Good Teams Great”. Resumiré básicamente los puntos más importantes de la charla, pero puedes saltarte esta parte y ver tú mismo el vídeo.

Este es un proceso continuo y enlazado que simplemente fluye al final de cada iteración, hacia la retrospectiva. El framework que proponen consiste en completar siempre la siguiente secuencia de 5 etapas o porciones de trabajo:

1. Establecer el escenario.
2. Reunir datos o información.
3. Generar ideas.
4. Decidir qué cosas hacer.
5. Cerrar la retrospectiva.

1. Establecer el escenario.

Establecer el marco para el trabajo que se va a realizar durante la retrospectiva. Por ejemplo: establecer el objetivo de esta retrospectiva, presentación de los asistentes, acuerdos o compromisos de trabajo, marcar el enfoque que tendrá la sesión, etc.

2. Reunir datos o información.

Estamos educados para analizar y procesar datos como individuos en un ambiente en el cual compartir ideas a veces equivale a copiar (hacer trampas).

Una de las razones por las que los equipos suelen discutir en procesos como la retrospectiva o la planificación, es porque no están acostumbrados a pensar juntos. Es por eso que recopilar datos es una de las primeras cosas que deben hacerse en este proceso de comenzar a pensar en equipo. Recopilamos datos no sólo sobre hechos sino también sobre sentimientos (aunque no debe usarse esta palabra sino Energía o algo menos emocional que no inhiba a nadie) para analizar cómo se sintió el equipo durante la iteración.

3. Generar ideas.

Una vez que tenemos los datos es hora de preguntar “¿Cómo llegamos a este punto? ¿Cuáles son las causas y patrones? ¿Qué nos dicen estos datos sobre el modo en que trabajamos?”

Un método para hacer esto lo denominan “la matriz de aprendizaje”, consiste en dividir un folio en cuatro cuadrantes y escribir:

• :) qué fue bien
• :( qué no fue tan bien
• *-:) (bombilla) ideas o cosas para hacer de otra manera
• ⚘ (flores) reconocimientos

4. Decidir qué cosas hacer.

Buscar acciones concretas que tomar en la siguiente iteración, no deben ser demasiadas iniciativas, uno o dos experimentos y asegurarse de analizarlos en la siguiente retrospectiva.

5. Cerrar la retrospectiva.

Finalizar la retrospectiva de manera contundente: no permitir que haya cosas que se cuelen hacia otras reuniones. Hacer una retrospectiva de la retrospectiva y cerrar la sesión.

Estas son algunas ideas que quería puntualizar del vídeo, por supuesto están mucho mejor expuestas y con mayor detalle en él, te recomiendo que lo mires, está en inglés y sin subtítulos.

Referencias:

Agile Retrospectives: Making Good Teams Great (Pragmatic Programmers)

La imagen es propieda de LIFE